/**
 * Băng video YouTube — dùng chung cho Trang chủ, Giới thiệu và Bài viết.
 *
 * Bám brand guideline: navy nền tảng, cam nhấn ở dạng chữ / icon / nét mảnh,
 * không mảng cam đặc. Nút play cố tình KHÔNG phải mảng cam: một băng sáu thẻ
 * là sáu mảng cam, vượt xa mức "tối đa một đốm lửa mỗi màn hình" — nên nút để
 * viền trắng mảnh trên nền tối, hover mới chuyển sang cam.
 *
 * Không nạp font riêng — dùng font của Customizer (Quicksand) như cả site.
 * Mọi thứ nằm trong `.ttcv` / `.ttcv-lb` để không đụng phần còn lại của trang.
 */

.ttcv {
	--ttcv-navy: #0F1E33;
	--ttcv-navy-900: #0A1626;
	--ttcv-navy-700: #16283F;
	--ttcv-navy-400: #8FA3BD;
	--ttcv-cream: #F7F5F0;
	/* Hai nấc cam nhấn: sáng cho nền navy, nung cho nền kem. `--ttcv-gold` là
	   nấc đang hiệu lực, đổi theo nền ở hai khối ngay bên dưới. */
	--ttcv-gold-lit: #F0A45E;
	--ttcv-gold-dark: #A85B0E;
	--ttcv-gold: var(--ttcv-gold-lit);
	--ttcv-mist: #D7DEE8;
	--ttcv-ink: #1C2B3F;
	--ttcv-muted: #6B7686;
	--ttcv-line: #E4DFD4;
	/* Bề rộng một thẻ. Nút mũi tên canh theo tâm ảnh 16:9 tính từ số này,
	   nên đổi bề rộng ở đâu thì nút tự theo. */
	--ttcv-w: min(340px, 78vw);

	position: relative;
	padding: 74px 0 80px;
}

/* Nấc nền navy — chữ sáng, cam nhạt 8.1:1 trên navy. */
.ttcv.is-navy {
	--ttcv-gold: var(--ttcv-gold-lit);
	--ttcv-heading: #fff;
	--ttcv-text: var(--ttcv-mist);
	--ttcv-meta: var(--ttcv-navy-400);
	--ttcv-nav-bg: transparent;
	--ttcv-nav-line: rgba(255, 255, 255, .3);
	--ttcv-nav-fg: #fff;

	background-color: var(--ttcv-navy);
}

/* Nấc nền kem — cam nhạt ở đây chỉ 1.9:1, phải đổi sang cam nung 4.6:1. */
.ttcv.is-cream {
	--ttcv-gold: var(--ttcv-gold-dark);
	--ttcv-heading: var(--ttcv-ink);
	--ttcv-text: var(--ttcv-muted);
	--ttcv-meta: var(--ttcv-muted);
	--ttcv-nav-bg: #fff;
	--ttcv-nav-line: var(--ttcv-line);
	--ttcv-nav-fg: var(--ttcv-ink);

	background-color: var(--ttcv-cream);
}

.ttcv__wrap {
	max-width: 1250px;
	margin: 0 auto;
	padding: 0 20px;
}

.ttcv__icon {
	flex: 0 0 auto;
	vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Đầu khối
   -------------------------------------------------------------------------- */

.ttcv__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px 32px;
	margin-bottom: 40px;
}

.ttcv__intro {
	max-width: 720px;
}

.ttcv__eyebrow {
	margin: 0 0 14px;
	color: var(--ttcv-gold);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 2.4px;
	text-transform: uppercase;
}

.ttcv__eyebrow::after {
	content: "";
	display: inline-block;
	width: 42px;
	height: 1px;
	margin-left: 14px;
	background-color: var(--ttcv-gold);
	vertical-align: middle;
}

.ttcv__title {
	margin: 0;
	color: var(--ttcv-heading);
	font-size: clamp(26px, 3vw, 38px);
	font-weight: 600;
	line-height: 1.24;
	letter-spacing: -.01em;
	text-transform: none;
}

.ttcv__desc {
	max-width: 620px;
	margin: 16px 0 0;
	color: var(--ttcv-text);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.8;
}

.ttcv__channel {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--ttcv-gold);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: color .18s ease;
}

.ttcv__channel:hover,
.ttcv__channel:focus-visible {
	color: var(--ttcv-heading);
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Băng cuộn
   Vuốt ngang chạy sẵn không cần JS; JS chỉ thêm hai nút mũi tên và kéo chuột.
   -------------------------------------------------------------------------- */

.ttcv__rail {
	position: relative;
	max-width: 1290px;
	margin: 0 auto;
	padding: 0 40px;
}

.ttcv__track {
	display: flex;
	overflow-x: auto;
	margin: 0;
	padding: 4px 0 14px;
	gap: 24px;
	list-style: none;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	cursor: grab;
}

.ttcv__track::-webkit-scrollbar {
	display: none;
}

.ttcv__track.is-dragging {
	cursor: grabbing;
	user-select: none;
}

.ttcv__track > li {
	flex: 0 0 auto;
	width: var(--ttcv-w);
	margin: 0;
	padding: 0;
	list-style: none;
	scroll-snap-align: start;
}

.ttcv__nav {
	position: absolute;
	/* Tâm của khung ảnh 16:9, cộng 4px đệm trên của băng. */
	top: calc(4px + var(--ttcv-w) * 9 / 32);
	z-index: 2;
	display: flex;
	width: 38px;
	height: 38px;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--ttcv-nav-line);
	border-radius: 50%;
	margin-top: -19px;
	background-color: var(--ttcv-nav-bg);
	color: var(--ttcv-nav-fg);
	cursor: pointer;
	transition: border-color .18s ease, color .18s ease;
}

.ttcv__nav:hover,
.ttcv__nav:focus-visible {
	border-color: var(--ttcv-gold);
	color: var(--ttcv-gold);
}

/*
 * `display: flex` ở trên là quy tắc của tác giả, còn `[hidden] {display:none}`
 * chỉ là quy tắc của trình duyệt — tầng tác giả thắng, nên phải tự tắt lấy.
 * Thiếu dòng này thì nút mũi tên hiện cả khi không còn gì để cuộn.
 */
.ttcv__nav[hidden] {
	display: none;
}

.ttcv__nav--prev {
	left: 0;
	transform: rotate(180deg);
}

.ttcv__nav--next {
	right: 0;
}

/* --------------------------------------------------------------------------
   Thẻ video
   -------------------------------------------------------------------------- */

.ttcv__card {
	display: block;
	color: inherit;
	text-decoration: none;
}

.ttcv__card:hover,
.ttcv__card:focus-visible {
	text-decoration: none;
}

.ttcv__thumb {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background-color: var(--ttcv-navy-700);
}

/*
 * Ảnh của YouTube (`hqdefault.jpg`) là khung 4:3 có hai vạch đen trên dưới.
 * Cắt về 16:9 bằng object-fit ăn đúng phần đen đó, khỏi phải đổi sang
 * `maxresdefault.jpg` — bản ấy nhiều video không có, hỏng ảnh cả thẻ.
 */
.ttcv__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
	-webkit-user-drag: none;
	user-select: none;
}

.ttcv__card:hover .ttcv__thumb img,
.ttcv__card:focus-visible .ttcv__thumb img {
	transform: scale(1.04);
}

.ttcv__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	width: 58px;
	height: 58px;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, .75);
	border-radius: 50%;
	margin: -29px 0 0 -29px;
	background-color: rgba(10, 22, 38, .42);
	color: #fff;
	transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

/* Mũi tên play lệch phải một chút cho cân về mặt thị giác trong hình tròn. */
.ttcv__play .ttcv__icon {
	margin-left: 3px;
}

.ttcv__card:hover .ttcv__play,
.ttcv__card:focus-visible .ttcv__play {
	border-color: var(--ttcv-gold-lit);
	background-color: rgba(10, 22, 38, .72);
	color: var(--ttcv-gold-lit);
}

.ttcv__body {
	display: block;
	padding-top: 16px;
}

.ttcv__name {
	display: -webkit-box;
	overflow: hidden;
	color: var(--ttcv-heading);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.45;
	transition: color .18s ease;
}

.ttcv__card:hover .ttcv__name,
.ttcv__card:focus-visible .ttcv__name {
	color: var(--ttcv-gold);
}

.ttcv__date {
	display: block;
	margin-top: 8px;
	color: var(--ttcv-meta);
	font-size: 12px;
	font-weight: 300;
	letter-spacing: .4px;
}

/* --------------------------------------------------------------------------
   Lightbox
   Khung do JS dựng một lần rồi dùng lại; iframe chỉ gắn vào lúc mở nên trang
   không tải gì của YouTube khi người xem chưa bấm.
   -------------------------------------------------------------------------- */

.ttcv-lb {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 60px 72px;
	background-color: rgba(10, 22, 38, .975);
	backdrop-filter: blur(6px);
}

.ttcv-lb.is-open {
	display: flex;
}

body.ttcv-lb-open {
	overflow: hidden;
}

.ttcv-lb__stage {
	display: flex;
	width: min(1120px, 100%);
	flex-direction: column;
	gap: 16px;
	margin: 0;
}

.ttcv-lb__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: calc(100vh - 190px);
	background-color: #000;
}

.ttcv-lb__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.ttcv-lb__caption {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 16px;
	color: #D7DEE8;
	font-size: 14px;
	font-weight: 300;
	text-align: center;
}

.ttcv-lb__count {
	color: #8FA3BD;
	font-size: 13px;
	white-space: nowrap;
}

.ttcv-lb__close,
.ttcv-lb__nav {
	position: absolute;
	display: flex;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 50%;
	background-color: transparent;
	color: #fff;
	cursor: pointer;
	transition: border-color .18s ease, background-color .18s ease;
}

.ttcv-lb__close:hover,
.ttcv-lb__nav:hover,
.ttcv-lb__close:focus-visible,
.ttcv-lb__nav:focus-visible {
	border-color: #fff;
	background-color: rgba(255, 255, 255, .12);
}

.ttcv-lb__nav[hidden] {
	display: none;
}

.ttcv-lb__close {
	top: 20px;
	right: 20px;
}

.ttcv-lb__nav--prev {
	left: 16px;
	transform: rotate(180deg);
}

.ttcv-lb__nav--next {
	right: 16px;
}

/* --------------------------------------------------------------------------
   Màn hẹp
   -------------------------------------------------------------------------- */

@media (max-width: 850px) {
	.ttcv {
		padding: 58px 0 62px;
	}

	.ttcv__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
		margin-bottom: 30px;
	}
}

@media (max-width: 640px) {
	.ttcv {
		--ttcv-w: min(300px, 82vw);
	}

	.ttcv__track {
		gap: 16px;
	}

	.ttcv__rail {
		padding: 0 20px;
	}

	.ttcv__nav {
		display: none;
	}

	.ttcv-lb {
		padding: 56px 16px 88px;
	}

	.ttcv-lb__frame {
		max-height: calc(100vh - 200px);
	}

	/* Màn hẹp không đủ chỗ hai bên — đưa nút chuyển video xuống đáy. */
	.ttcv-lb__nav {
		top: auto;
		bottom: 20px;
	}

	.ttcv-lb__nav--prev {
		left: calc(50% - 54px);
	}

	.ttcv-lb__nav--next {
		right: calc(50% - 54px);
	}
}