/* Home sections — nhịp tedi.vn */

/* ---- Hero ---- */
.tdc-hero {
	position: relative;
	min-height: min(72vh, 640px);
	background: var(--tdc-navy);
	overflow: hidden;
}
.tdc-hero__track {
	position: relative;
	min-height: inherit;
}
.tdc-hero__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity 0.8s ease;
	pointer-events: none;
}
.tdc-hero__slide.is-active {
	opacity: 1;
	pointer-events: auto;
	position: relative;
}
.tdc-hero__slide img {
	width: 100%;
	height: min(72vh, 640px);
	object-fit: cover;
	display: block;
	filter: brightness(0.72);
}
.tdc-hero__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 18%;
	max-width: var(--tdc-wrap);
	margin: 0 auto;
	padding: 0 24px;
	color: #fff;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}
.tdc-hero__brand {
	margin: 0 0 8px;
	font-size: clamp(0.95rem, 1.6vw, 1.15rem);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.92;
}
.tdc-hero__slogan {
	margin: 0;
	font-size: clamp(1.55rem, 3.4vw, 2.6rem);
	font-weight: 700;
	line-height: 1.25;
	max-width: 18em;
}
.tdc-hero__dots {
	position: absolute;
	left: 50%;
	bottom: 22px;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	z-index: 2;
}
.tdc-hero__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 0;
	padding: 0;
	background: rgba(255, 255, 255, 0.45);
	cursor: pointer;
}
.tdc-hero__dot.is-active {
	background: #fff;
}

/* ---- Counters ---- */
.tdc-counters {
	background: var(--tdc-blue);
	color: #fff;
}
.tdc-counters__inner {
	max-width: var(--tdc-wrap);
	margin: 0 auto;
	padding: 36px 20px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	text-align: center;
}
.tdc-counters__item {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.tdc-counters .tdc-icon {
	margin-bottom: 12px;
	opacity: 0.95;
}
.tdc-counters__value {
	display: block;
	font-size: clamp(2rem, 4vw, 2.8rem);
	font-weight: 700;
	line-height: 1.1;
	/* Chữ số cùng bề ngang: số đếm từ 0 lên 1.000 đổi số chữ số liên tục, chữ số tỉ lệ sẽ làm
	   cả ô rung sang trái/phải suốt 1,1 giây và kéo dấu "+" chạy theo. */
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}
/* Đuôi "+" của "1.000+" — cùng cỡ với số để đọc liền một cụm, chỉ nhạt hơn một chút cho số
   là thứ bắt mắt trước. KHÔNG thu nhỏ: ở 2,8rem mà hạ xuống 0,7em thì trên mobile dấu "+"
   chỉ còn ~14px và nhìn như vết bẩn. */
.tdc-counters__suffix {
	margin-left: 1px;
	opacity: 0.85;
}
.tdc-counters__label {
	display: block;
	margin-top: 6px;
	font-size: 0.92rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.92;
}

/* ---- Fields ---- */
.tdc-fields {
	padding: var(--tdc-sec-y) 0 calc(var(--tdc-sec-y) - 16px);
	background: var(--tdc-bg);
}
/* Lưới linh hoạt chứ không phải cột cứng: 7 thẻ chia 4 + 3, hàng cuối tự căn giữa cho khỏi hụt
   một ô trống bên phải (tedi.vn có 6 lĩnh vực nên vừa khít một hàng, ta có 7 thì không). */
.tdc-fields__grid {
	max-width: var(--tdc-wrap);
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}
.tdc-fields__card {
	flex: 0 1 calc(25% - 12px);
	min-width: 250px;
	display: flex;
	flex-direction: column;
	background: var(--tdc-white);
	text-decoration: none !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tdc-fields__card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.13);
}
/* Bảy sắc chuyển đều từ navy sang xanh nước — pha thẳng từ hai token của bộ nhận diện, không gõ
   tay mã màu nào: đổi logo/đổi token thì cả dải tự đi theo. Trình duyệt cũ không hiểu color-mix
   thì rơi về nền xanh chủ đạo, vẫn đúng thương hiệu. */
.tdc-fields__panel {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 196px;
	color: #fff;
	background: var(--tdc-blue);
}
.tdc-fields__card:nth-child(1) .tdc-fields__panel { background: color-mix(in srgb, var(--tdc-navy) 100%, var(--tdc-blue)); }
.tdc-fields__card:nth-child(2) .tdc-fields__panel { background: color-mix(in srgb, var(--tdc-navy) 83%, var(--tdc-blue)); }
.tdc-fields__card:nth-child(3) .tdc-fields__panel { background: color-mix(in srgb, var(--tdc-navy) 67%, var(--tdc-blue)); }
.tdc-fields__card:nth-child(4) .tdc-fields__panel { background: color-mix(in srgb, var(--tdc-navy) 50%, var(--tdc-blue)); }
.tdc-fields__card:nth-child(5) .tdc-fields__panel { background: color-mix(in srgb, var(--tdc-navy) 33%, var(--tdc-blue)); }
.tdc-fields__card:nth-child(6) .tdc-fields__panel { background: color-mix(in srgb, var(--tdc-navy) 17%, var(--tdc-blue)); }
.tdc-fields__card:nth-child(7) .tdc-fields__panel { background: var(--tdc-blue); }
.tdc-fields__body {
	padding: 18px 20px 22px;
}
/* Tên lĩnh vực KHÔNG lấy màu của ô: nửa cuối dải là xanh nước, mà xanh nước trên nền trắng chỉ
   đạt tương phản 3.34 — thừa để làm mảng, thiếu để làm chữ. Navy (10.76) cho cả bảy. */
.tdc-fields__name {
	display: block;
	color: var(--tdc-navy);
	font-size: 0.95rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin-bottom: 10px;
}
.tdc-fields__body ul {
	margin: 0;
	padding-left: 18px;
	list-style: disc;
	font-size: 0.88rem;
	color: var(--tdc-text);
}
.tdc-fields__body li + li {
	margin-top: 3px;
}

/* ---- Intro ---- */
.tdc-intro {
	padding: var(--tdc-sec-y) 0;
	background: var(--tdc-bg-soft);
}
.tdc-intro__inner {
	max-width: var(--tdc-wrap);
	margin: 0 auto;
	padding: 0 20px;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 36px;
	align-items: center;
}
.tdc-intro__text h2 {
	margin: 0 0 16px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--tdc-navy);
}
.tdc-intro__text p {
	margin: 0 0 14px;
	line-height: 1.7;
}
.tdc-intro__video {
	/* Từ 22/09/2026 khối này chứa BA phim: một sân khấu lớn + hai ô nhỏ. Khung 16:9 nay nằm ở
	   `.tdc-video-san`, không còn ở đây — để ở đây thì hai ô nhỏ bị nhốt trong khung 16:9. */
	position: static;
}
.tdc-video-san {
	position: relative;
	padding-top: 56.25%;   /* khung 16:9 dựng bằng padding — mọi thứ bên trong phải neo tuyệt đối */
	background: var(--tdc-navy);
	overflow: hidden;
}
.tdc-intro__video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---- Projects ---- */
.tdc-projects {
	padding: var(--tdc-sec-y) 0 calc(var(--tdc-sec-y) - 16px);
	background: var(--tdc-white);
}
.tdc-projects__grid {
	max-width: var(--tdc-wrap);
	margin: 0 auto;
	padding: 0 20px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.tdc-projects__card {
	display: block;
	text-decoration: none !important;
	color: var(--tdc-navy) !important;
	background: #fff;
}
.tdc-projects__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #dde3ea;
}
.tdc-projects__media img,
.tdc-projects__placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
.tdc-projects__placeholder {
	background: linear-gradient(135deg, #90a4ae, #455a64);
}
.tdc-projects__card:hover img {
	transform: scale(1.05);
}
.tdc-projects__name {
	display: block;
	padding: 14px 4px 8px;
	font-weight: 700;
	font-size: 1rem;
}

/* ---- News ---- */
.tdc-news {
	padding: var(--tdc-sec-y) 0;
	background: var(--tdc-bg-soft);
}
.tdc-news__grid {
	max-width: var(--tdc-wrap);
	margin: 0 auto;
	padding: 0 20px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.tdc-news__card {
	background: #fff;
	display: flex;
	flex-direction: column;
	min-height: 100%;
}
.tdc-news__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #cfd8dc;
}
.tdc-news__media img,
.tdc-news__placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.tdc-news__placeholder {
	background: linear-gradient(135deg, #90caf9, #1565c0);
}
.tdc-news__body {
	padding: 14px 16px 18px;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.tdc-news__body time {
	font-size: 0.8rem;
	color: var(--tdc-muted);
}
.tdc-news__body h3 {
	margin: 8px 0 12px;
	font-size: 1rem;
	line-height: 1.4;
	flex: 1;
}
.tdc-news__body h3 a {
	color: var(--tdc-navy);
	text-decoration: none;
}
.tdc-news__more {
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
}

/* ⚠️ Hai khối dưới từng bị mất khi tôi chuyển CSS footer sang brand.css bằng regex: các luật
   này gom nhiều selector trong một khối và có `.tdc-footer__inner` ở giữa, nên cả khối bị lôi đi,
   kéo theo `.tdc-intro__inner`/`.tdc-news__grid`. Bài học: đừng bóc CSS bằng regex theo selector —
   khối nằm TRONG @media bị lôi ra ngoài sẽ áp ở mọi khổ màn hình. */
@media (max-width: 980px) {
	.tdc-intro__inner,
	.tdc-news__grid { grid-template-columns: 1fr 1fr; }
	.tdc-counters__inner {
		grid-template-columns: repeat(2, 1fr);
	}
	.tdc-projects__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.tdc-fields__card {
		flex: 0 1 calc(50% - 8px);
	}
}

@media (max-width: 640px) {
	.tdc-counters .tdc-icon {
		width: 48px;
		height: 48px;
	}
	.tdc-fields__card {
		flex: 1 1 100%;
		min-width: 0;
	}
	.tdc-fields__panel {
		height: 168px;
	}
	.tdc-fields .tdc-icon {
		width: 96px;
		height: 96px;
	}
	.tdc-counters__inner,
	.tdc-projects__grid,
	.tdc-intro__inner,
	.tdc-news__grid { grid-template-columns: 1fr; }
	.tdc-hero__slide img,
	.tdc-hero {
		min-height: 52vh;
		height: auto;
	}
	.tdc-hero__slide img {
		height: 52vh;
	}
}

/* ===== VÒNG 2 — sửa theo ảnh chụp đối chiếu tedi.vn =====
   ⚠️ PHẢI để ở home.css chứ không phải brand.css: home.css nạp SAU (deps tdc-brand),
   viết ở brand.css thì các luật gốc trong file này đè ngược lại. Mất một vòng vì chuyện này. */
/* [2] Tiêu đề dải: tedi.vn canh GIỮA, chữ hoa, to hơn hẳn. Ta đang canh trái, nhỏ. */
.tdc-section-head { text-align: center; margin-bottom: 34px; }
.tdc-section-head h2 {
	font-size: 30px; line-height: 40px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .02em; margin: 0 0 8px;
}
.tdc-section-head p { color: var(--tdc-muted); margin: 0; font-size: 15px; }
.tdc-section-head__link {
	display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 600;
}

/* [3] Lưới 7 thẻ lĩnh vực: 3 cột ⇒ hàng cuối MỒ CÔI 1 thẻ. Chuyển sang flex canh giữa,
       4 thẻ hàng trên + 3 thẻ hàng dưới CANH GIỮA — cân mắt, không còn khoảng trống lệch. */
.tdc-fields__grid {
	display: flex; flex-wrap: wrap; justify-content: center; gap: var(--tdc-gap, 24px);
}
.tdc-fields__card {
	flex: 0 1 calc((100% - 3 * var(--tdc-gap, 24px)) / 4);
	min-width: 250px;
}

/* [4] Chữ trong thẻ bị CẮT vì thẻ bị khoá chiều cao. Bỏ khoá, để nội dung quyết định. */
.tdc-fields__card,
.tdc-fields__body { height: auto; max-height: none; overflow: visible; }
.tdc-fields__body ul { margin: 6px 0 0; padding-left: 16px; }
.tdc-fields__body li { font-size: 13px; line-height: 21px; }

/* [5] Tin tức đang hiện Ô XANH RỖNG khi bài không có ảnh — trông như lỗi tải ảnh.
       Đổi thành khối thương hiệu CÓ CHỦ Ý: nền xanh đậm + chữ TDC mờ. */
.tdc-news__placeholder,
.tdc-projects__placeholder {
	background: linear-gradient(135deg, var(--tdc-blue) 0%, var(--tdc-blue-deep) 100%);
	position: relative;
}
.tdc-news__placeholder::after,
.tdc-projects__placeholder::after {
	content: "TDC";
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--tdc-font); font-weight: 700; font-size: 34px;
	letter-spacing: .12em; color: rgba(255, 255, 255, .28);
}

/* [10] Tiêu đề dải vẫn canh TRÁI dù `.tdc-section-head{text-align:center}` đã áp — vì h2 có
        `text-align` riêng đặt trực tiếp. Đặt thẳng lên h2, đừng trông vào kế thừa. */
.tdc-section-head,
.tdc-section-head h2,
.tdc-section-head p { text-align: center; }
.tdc-section-head { position: relative; }
/* Gạch ngắn dưới tiêu đề — tedi.vn dùng để tách dải, rẻ mà nâng hẳn độ "chỉn chu" */
.tdc-section-head h2::after {
	content: ""; display: block; width: 56px; height: 3px; margin: 14px auto 0;
	background: var(--tdc-blue);
}
/* Link "Xem tất cả" đang nằm chồng lề trái — đưa xuống dưới tiêu đề cho cân */
.tdc-section-head__link { position: static; display: inline-block; margin-top: 12px; }

/* [11] Hero còn chừa lề hai bên; tedi.vn cho hero TRÀN VIỀN. Dùng 100vw + bù thanh cuộn. */
.tdc-hero,
.tdc-counters {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.tdc-hero__slide { min-height: 560px; }   /* tedi ~600px; ta đang 480 nên hero trông "lùn" */

/* [12] Thẻ dự án: tedi.vn bọc ảnh + tên thành THẺ có nền và hover. Ta đang để tên trần dưới ảnh. */
.tdc-projects__card {
	background: #fff; border: 1px solid var(--tdc-line, #e6e9ec); border-radius: 2px;
	overflow: hidden; transition: box-shadow .2s ease, transform .2s ease;
}
.tdc-projects__card:hover { box-shadow: 0 10px 26px rgba(0,0,0,.12); transform: translateY(-2px); }
.tdc-projects__name {
	display: block; padding: 14px 16px 16px; font-weight: 600; font-size: 15px;
	line-height: 22px; color: var(--tdc-dark);
}
.tdc-projects__card:hover .tdc-projects__name { color: var(--tdc-blue-ink); }

/* [13] Tiêu đề dải VẪN canh trái dù `text-align:center` đã ăn (computed = center).
        Nguyên nhân: `.tdc-section-head` là `display:flex` ⇒ h2 thành flex item, hộp CO LẠI bằng
        bề rộng chữ (đo được: head w=1240 nhưng h2 w=346) nên `text-align` không có gì để canh.
        Bài học: thấy `text-align` "đã đúng" mà vẫn lệch thì đo BỀ RỘNG HỘP, đừng chỉnh thêm màu mè. */
.tdc-section-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}
.tdc-section-head > * { width: 100%; }

/* [13] Ảnh bìa video + nút phát (template-parts/home/intro.php). */
.tdc-video {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: var(--tdc-navy);
	cursor: pointer;
	overflow: hidden;
}
.tdc-video__bia {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.tdc-video:hover .tdc-video__bia { transform: scale(1.06); }

/* Làm tối ảnh bìa bằng LỚP PHỦ, không dùng `filter: brightness()`.
   `filter` tạo lớp hợp thành riêng, và ảnh chụp `fullPage` của Playwright thỉnh thoảng bỏ rơi
   lớp đó ⇒ ảnh bìa ra mảng navy trơn trong ảnh chụp trong khi trên trang vẫn hiện đúng. Đã mất
   một vòng đi tìm lỗi không có thật vì chuyện này; lớp phủ cho kết quả y hệt mà chụp luôn đúng. */
.tdc-video::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(20, 32, 51, .18);
	transition: background .25s ease;
	pointer-events: none;
}
.tdc-video:hover::after { background: rgba(20, 32, 51, .30); }
.tdc-video__nut,
.tdc-video__nhan { z-index: 1; }
.tdc-video__nut {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
	transition: transform .2s ease, background .2s ease;
}
/* Tam giác phát vẽ bằng border — không cần thêm ảnh hay font icon nào. */
.tdc-video__nut::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-42%, -50%);
	border-style: solid;
	border-width: 13px 0 13px 21px;
	border-color: transparent transparent transparent var(--tdc-blue);
}
.tdc-video:hover .tdc-video__nut { transform: translate(-50%, -50%) scale(1.08); background: #fff; }
.tdc-video__nhan {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 34px 18px 14px;
	font-family: var(--tdc-font);
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	text-align: left;
	background: linear-gradient(to top, rgba(20, 32, 51, .78), rgba(20, 32, 51, 0));
}
/* Khung 16:9 dựng bằng `padding-top` nên chiều cao nằm ở PADDING, không phải content box: thứ
   gì đặt tĩnh trong đó sẽ rơi xuống DƯỚI phần padding. Lần đầu để nút bìa tĩnh nên nửa trên
   khung là mảng đen, ảnh bìa dồn xuống nửa dưới. Cả nút lẫn iframe chèn sau đều phải neo tuyệt đối. */
.tdc-video-san > .tdc-video,
.tdc-video-san > iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}


/* [13b] Hai phim còn lại — ô nhỏ dưới sân khấu.
   Bấm ô nhỏ thì phim chạy Ở SÂN KHẤU LỚN, không chạy trong ô nhỏ: xem phim 10 phút trong ô
   rộng 170px thì không ai xem. Việc chuyển chỗ do `home.js` làm. */
/* ⚠️ Phải viết `.tdc-intro .tdc-video-khac`, không được viết trần: The7 có luật `ul` cụ thể
   hơn, đặt `padding-left` cho mọi danh sách. Hậu quả khách nhìn thấy ngay: hàng ô nhỏ **thụt
   vào so với mép trái sân khấu**, nhìn như lệch khối. */
.tdc-intro .tdc-video-khac {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}
/* `list-style: none` trên <ul> KHÔNG đủ: The7 đặt `list-style-type: disc` ở luật cụ thể hơn,
   mà <li> thì vẫn `display: list-item` nên chấm tròn vẫn vẽ ra — đo được `listStyleType: disc`
   trên chính <li>. Phải hạ <li> về `display: block` mới hết chấm. */
.tdc-intro .tdc-video-khac > li {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}
.tdc-intro .tdc-video-khac > li::before { content: none; }

.tdc-video--nho {
	position: relative;
	height: auto;
	padding-top: 56.25%;
	border-radius: 3px;
}
.tdc-video--nho .tdc-video__bia { position: absolute; inset: 0; }
.tdc-video--nho .tdc-video__nut {
	width: 42px;
	height: 42px;
	box-shadow: 0 3px 12px rgba(0, 0, 0, .3);
}
.tdc-video--nho .tdc-video__nut::before {
	border-width: 8px 0 8px 13px;
}
.tdc-video__ten {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	z-index: 1;
	padding: 24px 10px 8px;
	font-family: var(--tdc-font);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
	text-align: left;
	background: linear-gradient(to top, rgba(20, 32, 51, .84), rgba(20, 32, 51, 0));
}
.tdc-video__dai {
	position: absolute;
	top: 8px; right: 8px;
	z-index: 1;
	padding: 2px 6px;
	border-radius: 3px;
	background: rgba(12, 18, 30, .76);
	color: #fff;
	font-family: var(--tdc-font);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .02em;
}


/* Ô đang phát: viền xanh + bìa sáng hơn, để biết mình đang ở phim nào trong ba phim. */
.tdc-video--nho.dang-chon {
	outline: 2px solid var(--tdc-blue);
	outline-offset: 0;
}
.tdc-video--nho.dang-chon::after { background: rgba(20, 32, 51, .04); }
.tdc-video--nho.dang-chon .tdc-video__nut { background: #fff; }

@media (max-width: 760px) {
	/* Ba ô trên màn 390px thì mỗi ô còn ~112px — chữ tên phim không còn chỗ. Cho TRƯỢT NGANG,
	   mỗi ô rộng 62% để luôn thấy ló ô kế tiếp, người ta mới biết là vuốt được. */
	.tdc-intro .tdc-video-khac {
		display: flex;
		gap: 10px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 4px;
	}
	.tdc-intro .tdc-video-khac > li {
		flex: 0 0 62%;
		scroll-snap-align: start;
	}
	.tdc-video__ten { font-size: 12px; }
}

/* ===== VÒNG 3 (01/10/2026) — MÀN MỞ ĐẦU vừa khít một màn hình, như tedi.vn =====
   Khách chụp hai trang cạnh nhau trên CÙNG một máy (1920px): tedi.vn mở ra là thấy trọn ảnh +
   dải 5 con số; ta thì ảnh 640px + dải số liệu bị cắt ngang, phải cuộn mới đọc được số.
   Cách tedi làm, ta làm theo:
     1. ảnh cao đúng phần màn hình còn lại dưới header — `100svh - header`, không phải số cứng;
     2. dải số liệu NẰM ĐÈ lên đáy ảnh (nền trong suốt chuyển tối), không đứng thành dải riêng.
   Chỉ áp từ 981px trở lên. Điện thoại/máy tính bảng giữ dải số liệu xanh xếp dưới ảnh: chồng
   4 con số lên ảnh 52vh của điện thoại thì che mất gần hết ảnh. */
.tdc-mo-dau {
	--tdc-dau-h: 128px;   /* topbar 32 + header 96 (brand.css, khối "VÒNG 3 — HEADER") */
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.tdc-mo-dau > .tdc-hero,
.tdc-mo-dau > .tdc-counters { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; }

/* Ảnh mới từ Catalog đủ sáng và nét — bỏ lớp `brightness(0.72)` làm cả tấm xỉn đi (một phần
   lý do khách thấy "ảnh không đẹp"). Chữ vẫn đọc được nhờ lớp phủ chuyển màu ở góc trái-dưới,
   chỉ tối ở nơi có chữ. */
.tdc-hero__slide img { filter: none; }
.tdc-hero__slide::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background:
		linear-gradient(90deg, rgba(10, 20, 50, .55) 0%, rgba(10, 20, 50, .18) 45%, rgba(10, 20, 50, 0) 70%),
		linear-gradient(0deg, rgba(10, 20, 50, .35) 0%, rgba(10, 20, 50, 0) 40%);
}
.tdc-hero__caption { z-index: 1; }

@media (min-width: 981px) {
	.tdc-mo-dau .tdc-hero,
	.tdc-mo-dau .tdc-hero__track,
	.tdc-mo-dau .tdc-hero__slide {
		/* Sàn 500px: laptop 1366×657 (khổ phổ biến nhất VN) còn 529px dưới header — sàn 560 cũ
		   làm dải số liệu hụt khỏi màn 31px. */
		height: clamp(500px, calc(100vh - var(--tdc-dau-h)), 1000px);
		height: clamp(500px, calc(100svh - var(--tdc-dau-h)), 1000px);
		min-height: 0;
	}
	.tdc-mo-dau .tdc-hero__slide,
	.tdc-mo-dau .tdc-hero__slide.is-active { position: absolute; inset: 0; }
	.tdc-mo-dau .tdc-hero__slide img { width: 100%; height: 100%; object-fit: cover; }
	/* Dưới 1100px là header điện thoại/máy tính bảng: topbar 32 + header 80 (khối "HEADER
	   ĐIỆN THOẠI" của brand.css), không phải 32 + 96. */
	.tdc-mo-dau { --tdc-dau-h: 128px; }

	/* Chữ đặt trên dải số liệu (dải cao ~190px). */
	.tdc-mo-dau .tdc-hero__caption { bottom: 230px; }

	/* Chấm chuyển slide: dọc bên phải như tedi.vn, khỏi đụng dải số liệu. */
	.tdc-mo-dau .tdc-hero__dots {
		left: auto; right: 28px; bottom: auto; top: 50%;
		transform: translateY(-50%); flex-direction: column; gap: 10px;
	}
	/* Viền tối mảnh: ảnh mép phải nhiều khi là trời/biển sáng, chấm trắng trơn chìm mất. */
	.tdc-mo-dau .tdc-hero__dot { box-shadow: 0 0 0 1px rgba(10, 20, 50, .45); }

	/* Dải số liệu đè đáy ảnh. Nền chuyển từ trong suốt sang navy logo (#2C3093 tối hơn) để số
	   trắng luôn đủ tương phản dù ảnh sáng hay tối. */
	.tdc-mo-dau .tdc-counters {
		position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
		background: linear-gradient(180deg, rgba(14, 22, 64, 0) 0%, rgba(14, 22, 64, .62) 38%, rgba(14, 22, 64, .82) 100%);
	}
	.tdc-mo-dau .tdc-counters__inner { padding: 64px 20px 30px; }
	.tdc-mo-dau .tdc-counters .tdc-icon { width: 48px; height: 48px; margin-bottom: 8px; }
	.tdc-mo-dau .tdc-counters__value { font-size: clamp(2rem, 2.6vw, 2.5rem); text-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
	.tdc-mo-dau .tdc-counters__label { font-size: .88rem; }
}
@media (min-width: 981px) and (max-width: 1099px) {
	.tdc-mo-dau { --tdc-dau-h: 112px; }
}
/* Điện thoại / máy tính bảng: luật `.tdc-hero__slide { min-height: 560px }` (VÒNG 2, viết cho máy
   tính) lọt xuống đây trong khi ảnh chỉ cao 52vh (~440px ở 390×844) ⇒ dưới ảnh hở một dải navy
   trống ~120px. Cho khung ôm đúng chiều cao ảnh. */
@media (max-width: 980px) {
	.tdc-mo-dau .tdc-hero__slide { min-height: 0; }
}