.tmpl-tidb-user-day {
	&__header {
		z-index: var(--z-header);
		position: sticky;
		top: var(--admin-bar-height, 0);
		left: 0;
		width: 100%;
		background-color: #000;
		padding: 32px 0;
		.header-inner {
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.header-nav {
			position: absolute;
			top: 50px;
			left: 0;
			right: 0;
			background: #000;
			height: 0;
			overflow: hidden;
			transition: all 0.3s;
			&.active {
				height: 200px;
			}
			@include media-min($medium) {
				position: static;
				background: transparent;
				display: flex;
				align-items: center;
				gap: 40px;
				height: auto;
			}
		}
		.nav-menu {
			color: #fff;
			font-weight: 500;
			font-size: 15px;
			line-height: 18px;
			text-decoration: none;
			display: block;
			padding: 10px 0;
			@include media-min($medium) {
				padding: 0;
			}
		}
		.button {
			margin-top: 10px;
			@include media-min($medium) {
				margin-top: 0;
			}
		}
		.navbar-toggle {
			padding: 1rem;
			display: flex;
			flex-direction: column;
			gap: 4px;
			cursor: pointer;
			span {
				width: 2rem;
				height: 2px;
				background-color: rgb(89, 90, 92);
			}
			@include media-min($medium) {
				display: none;
			}
		}
	}
	.banner-default__text-content {
		padding-top: 40px;
		@include media-min($medium) {
			padding-top: 80px;
		}
		@include media-min(1200px) {
			padding-bottom: 120px;
		}
		.banner-default__title {
			font-weight: 700;
			margin-top: 0;
			b {
				color: #dc150b;
			}
			@include media-min($large) {
				font-size: 82px;
				line-height: 78px;
			}
		}
		h2 {
			font-weight: 400;
			@include media-min($large) {
				font-size: 50px;
				line-height: 58px;
			}
		}
		p {
			margin: 8px 0;
			color: #fff;
		}
		.address {
			display: flex;
			gap: 4px;
			align-items: center;
		}
		.button {
			margin-top: 32px;
			@include media-min($large) {
				margin-top: 70px;
			}
		}
	}
	&__about,
	&__expect,
	&__attend,
	&__agenda,
	&__form,
	&__partner {
		.section-title {
			font-weight: 700;
			font-size: 40px;
			line-height: 58px;
			margin-bottom: 40px;
			color: #fff;
			@include media-min($medium) {
				font-size: 60px;
			}
		}
		p {
			width: 100%;
			color: #fff;
			font-size: 22px;
			line-height: 26px;
		}
	}
	&__about {
		.cards {
			display: flex;
			flex-direction: column;
			gap: 16px;
			margin-top: 60px;
			@include media-min($medium) {
				flex-direction: row;
			}
			.card {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				gap: 20px;
				font-weight: 500;
				font-size: 22px;
				line-height: 26px;
				flex: 1;
				border: 1px solid;
				padding: 12px 20px;
				&:nth-child(1) {
					border-color: #2c80ce;
				}
				&:nth-child(2) {
					border-color: #1aa8a8;
				}
				&:nth-child(3) {
					border-color: #83120c;
				}
				.icon {
					display: flex;
					align-items: center;
				}
			}
		}
	}
	&__expect {
		.cards {
			display: flex;
			flex-direction: column;
			gap: 32px;
			.card {
				display: flex;
				gap: 48px;
				align-items: center;
				flex-direction: column;
				font-weight: 400;
				font-size: 22px;
				line-height: 25px;
				@include media-min($medium) {
					flex-direction: row;
				}
				.icon {
					width: 72px;
					display: flex;
					justify-content: flex-start;
					align-items: center;
				}
				p {
					margin-top: 8px;
				}
				b {
					color: #dc150b;
				}
			}
		}
	}
	&__attend {
		p {
			font-size: 22px;
		}
		ul {
			font-size: 22px;
			line-height: 36px;
			color: #dc150b;
			span {
				color: #fff;
			}
		}
	}
	&__agenda {
		.card {
			margin-top: 30px;
			padding: 24px 20px;
			color: #fff;
			min-height: 160px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			&:nth-child(3n + 2) {
				border: 1px solid #dc150b;
				&.bg {
					background-color: #630d09;
				}
			}
			&:nth-child(3n + 1) {
				border: 1px solid #2c80ce;
				&.bg {
					background-color: #0d3152;
				}
			}
			&:nth-child(3n) {
				border: 1px solid #1aa8a8;
				&.bg {
					background-color: #0f5353;
				}
			}
			.date {
				display: flex;
				gap: 32px;
				align-items: center;
				font-weight: 700;
				font-size: 20px;
				line-height: 24px;
				flex-direction: column;
				text-align: center;
				@include media-min($medium) {
					flex-direction: row;
					text-align: left;
				}
				& + .speaker {
					margin-top: 40px;
				}
			}
			.time {
				font-weight: 700;
				font-size: 24px;
				line-height: 28.8px;
				@include media-min($medium) {
					width: 38%;
				}
			}
			.speaker {
				display: flex;
				gap: 32px;
				flex-direction: column;
				align-items: flex-start;
				@include media-min($medium) {
					align-items: center;
					flex-direction: row;
				}
				& + .speaker {
					margin-top: 24px;
				}
			}
			.users {
				@include media-min($medium) {
					width: 38%;
				}
			}
			.user {
				display: flex;
				align-items: center;
				gap: 16px;
				font-size: 16px;
				line-height: 20px;
				& + .user {
					margin-top: 40px;
				}
				.img {
					width: 77px;
					height: 77px;
					border-radius: 50%;
					background-color: #ccc;
					overflow: hidden;
				}
				.name {
					font-weight: bold;
				}
				.info {
					flex: 1;
				}
			}
			.content {
				font-weight: 400;
				font-size: 20px;
				line-height: 32px;
				flex: 1;
				&-wrap {
					flex: 1;
				}
			}
		}
		.desc {
			margin-top: 50px;
			a {
				color: #dc150b;
				text-decoration: none;
			}
		}
	}
	&__form {
		color: #fff;
		.input p {
			font-size: 16px;
		}
		p {
			margin-top: 32px;
		}
	}
	&__partner {
		background-color: #040b10;
		.cards {
			display: flex;
			justify-content: center;
			gap: 32px;
			img {
				width: 40%;
			}
			@include media-min($medium) {
				img {
					width: auto;
				}
				padding-top: 40px;
				gap: 100px;
			}
		}
	}
	&__footer {
		background-color: #000;
		padding: 24px 0;
		.contain {
			display: flex;
			flex-direction: column;
			gap: 32px;
			@include media-min($large) {
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}
		}
		.copyright,
		.copyright a {
			font-family: var(--font-moderat-mono);
			font-size: 1.4rem;
			font-weight: 400;
			color: #a2adb9;
			line-height: 20px;
			text-decoration: none;
		}
		.wrap {
			display: flex;
			align-items: center;
			gap: 16px;
		}
		.line {
			width: 2px;
			height: 16px;
			background-color: #fff;
		}
		.social-group {
			display: flex;
			gap: 24px;
			align-items: center;
			margin-top: 6px;
			flex-wrap: wrap;
		}
	}
	&.india-2026 {
		background-image: url("https://static.pingcap.com/files/2026/04/10220719/20260411-130619.png");
		background-size: cover;
		background-position: center;
		.banner-default__text-content {
			padding-top: 40px;
			@include media-min($medium) {
				padding-bottom: 80px;
			}

			.wysiwyg {
				margin-top: 30px;
			}
			h1 {
				font-size: clamp(36px, 3.65vw, 68px);
				font-weight: 700;
				line-height: 1.2;
			}
			p {
				width: 100%;
				font-size: 22px;
				line-height: 32px;
				@include media-min($medium) {
					font-size: 32px;
				}
			}
		}
		.banner-default__image-container {
			display: none;
			@include media-min($medium) {
				display: block;
			}
		}
	}
}