/**
 * Section 05 — Showreel. CLONE ban mau Fabrica.
 * Bang so day du xem template-parts/home/section-showreel.php.
 */

/* Khe doc do `.w22-than` lo (xem --w22-khe-section) — section chi co le ngang. */
.w22-showreel {
	padding-inline: var(--w22-le);
}

.w22-showreel__khung {
	width: 100%;
	max-width: 1520px;
	margin-inline: auto;
}

/* ---------- Khoi dau: luoi 4 cot, khe 4 ---------- */
.w22-showreel__dau {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--w22-khe-the);
	align-items: start;
}

.w22-showreel__nhan {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: var(--w22-chu-16);
	line-height: 1.4;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
}

/* Vong tron 18px nen toi, dau cong trang 8x8 day 2px. */
.w22-showreel__cham {
	width: 18px;
	height: 18px;
	flex: none;
	color: var(--w22-toi);
}

.w22-showreel__cham svg {
	width: 100%;
	height: 100%;
}

/* Cot 2-4 (rong 1025 @1440). */
.w22-showreel__tieu {
	grid-column: span 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

.w22-showreel__hieu {
	font-size: var(--w22-chu-20);
	line-height: 1.1;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
}

.w22-showreel__chu {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 30px;
}

/*
 * Ban mau co `overflow:hidden` o khoi nay (phuc vu hieu ung rieng cua Framer).
 * KHONG chep: chu Viet co dau hai tang o co 60px se bi xen mu.
 */
.w22-showreel__tieu-de {
	max-width: 830px;
	font-size: var(--w22-chu-60);
	line-height: 1.1;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian-to);
	color: var(--w22-muc-2);
}

.w22-showreel__tieu-de span {
	color: var(--w22-muc-mo);
}

.w22-showreel__dan {
	max-width: 375px;
	font-size: var(--w22-chu-16);
	line-height: 1.4;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
	opacity: 0.6;
}

/* ---------- Than: hang the + khoi phim, khe 4 ---------- */
.w22-showreel__than {
	margin-top: 120px;
	display: flex;
	flex-direction: column;
	gap: var(--w22-khe-the);
}

.w22-showreel__buoc {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--w22-khe-the);
}

/* ---------- Mot the buoc ---------- */
.w22-buoc {
	display: flex;
	flex-direction: column;
	gap: 30px;
	padding: 30px;
	border-radius: 18px;
	background: var(--w22-nen-the);
}

.w22-buoc__tren {
	display: flex;
	align-items: flex-start;
	gap: var(--w22-khe-3);
}

/*
 * 🔴 CHAM LA CHI BAO TINH, khong tu xoay vong.
 * Da lay mau 8 giay: chuoi 1000 / 1100 / 1110 / 1111 dung yen.
 */
.w22-buoc__cham {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	flex: none;
}

.w22-buoc__cham i {
	width: 8px;
	height: 8px;
	border-radius: var(--w22-bo-tron);
	background: var(--w22-net-2);
}

.w22-buoc__cham i.w22-buoc__cham--dam {
	background: var(--w22-toi);
}

.w22-buoc__so {
	font-size: 10px;
	line-height: 1.1;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian-to);
	color: var(--w22-muc-2);
	opacity: 0.5;
}

.w22-buoc__duoi {
	display: flex;
	align-items: flex-start;
	gap: var(--w22-khe-3);
}

/*
 * O bieu tuong 51x51 — ban mau de ANH CHUP (stock) o day; ta ve bieu tuong
 * (xem ghi chu trong section-showreel.php). Giu nguyen co 51 va bo 7 cua ban
 * mau de nhip hang khong doi.
 */
.w22-buoc__icon {
	width: 51px;
	height: 51px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 7px;
	background: var(--w22-toi);
	color: var(--w22-tren-toi);
}

.w22-buoc__icon svg {
	width: 24px;
	height: 24px;
}

.w22-buoc__chu {
	font-size: var(--w22-chu-18);
	line-height: 1.3;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc-2);
}

/* ---------- Khoi phim ----------
 * Ti le KHOA 1.6114 — do duoc y het o 1440 / 1920 / 1024, KHONG phai ti le
 * goc cua anh (anh goc 2280x1350 = 1.689).
 */
.w22-phim {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1.6114;
	border-radius: 25px;
	overflow: hidden;
	cursor: pointer;
	/*
	 * 🔴 <button> mac dinh canh GIUA theo UA stylesheet — khong dat lai thi dong
	 * "(2016-25©)" bi day vao giua trong khi ban mau canh TRAI
	 * (do duoc: Video Info Container la `flex column flex-start/flex-start`).
	 * Bang so khong bat duoc loi nay, anh chup moi lo.
	 */
	text-align: left;
}

.w22-phim__anh {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 480ms var(--w22-cong-phim);
}

/*
 * 🔴 Lop toi om quanh nut — KHONG co o ban mau.
 * Ben do anh nen la anh phim toi san nen chu trang doc duoc ngay. Ta thay bang
 * anh chup trang chu du an that, gap web nen sang (vd AXM ao kem) la dong
 * "Xem dự án ..." mat hut, con dong nam o opacity .6 thi gan nhu vo hinh.
 * Dung dai toa TRON giua khoi de chi lam toi vung co chu, ria anh giu nguyen.
 * Mo di cung nhip voi chu khi hover (luc do chi con vong tron).
 */
.w22-phim::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(
		ellipse 48% 42% at 50% 50%,
		rgba(10, 10, 10, 0.66) 0%,
		rgba(10, 10, 10, 0.42) 45%,
		rgba(10, 10, 10, 0) 72%
	);
	transition: opacity 440ms var(--w22-cong-phim);
}

.w22-phim:hover::before,
.w22-phim:focus-visible::before {
	opacity: 0;
}

/* Lop hat nhieu — z:0, nam TREN anh, duoi nut. */
.w22-phim__hat {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

/*
 * Ban mau: inset -200%, kich thuoc 400%, PNG 256px lap kin, opacity .05.
 * Toa do nhay moi khung hinh (do duoc 24/24 mau khac nhau trong 2.6s)
 * -> app.js lo phan nhay, CSS chi dung khung.
 */
.w22-phim__hat > span {
	position: absolute;
	inset: -200%;
	width: 400%;
	height: 400%;
	background-repeat: repeat;
	opacity: 0.05;
	will-change: transform;
}

/* Nut giua khoi. Ban mau: top/left 50% + translate(-50%,-50%). */
.w22-phim__nut {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	display: flex;
	align-items: center;
	pointer-events: none;
}

.w22-phim__vong {
	width: 92px;
	height: 92px;
	flex: none;
	transition: transform 480ms var(--w22-cong-phim);
}

.w22-phim__vong svg {
	width: 100%;
	height: 100%;
}

/*
 * Hover: chu bien mat VA thoat khoi bo cuc, nen nhom co tu 335 ve 92 va vong
 * play don ve dung giua khoi (do that: icon.x 552.5 -> 664.8 = giua 1368).
 * Chieu ngang co bang meo grid 1fr -> 0fr (theme da dung meo nay o accordion
 * section 04).
 * 🔴 KHE 26px phai CO THEO, dat bang margin-left cua chinh khoi nay.
 * Da tra gia: de khe o `padding-left` cua phan tu con thi track ve 0 ma padding
 * van con -> nhom con 118 thay vi 92, vong play lech tam khoi 13px.
 * Dung `gap` cua flex cung dinh y het loi do.
 */
.w22-phim__doi {
	display: grid;
	grid-template-columns: 1fr;
	margin-left: 26px;
	overflow: hidden;
	transition: grid-template-columns 480ms var(--w22-cong-phim),
		margin-left 480ms var(--w22-cong-phim),
		opacity 480ms var(--w22-cong-phim);
}

.w22-phim__doi > * {
	min-width: 0;
}

.w22-phim__ten,
.w22-phim__nam {
	display: block;
	white-space: nowrap;
	color: var(--w22-tren-toi);
}

.w22-phim__ten {
	font-size: var(--w22-chu-30);
	line-height: 1.25;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian);
}

.w22-phim__nam {
	margin-top: 3px;
	font-size: var(--w22-chu-16);
	line-height: 1.4;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	opacity: 0.6;
}

/*
 * Nhip do duoc: VAO 436-443ms · RA 478-489ms (mo va dong KHAC nhau, dat
 * thoi luong rieng o tung trang thai dich). Duong cong chu S chep tu chinh
 * phep do bang linear() — xem --w22-cong-phim o cuoi file.
 */
.w22-phim:hover .w22-phim__anh,
.w22-phim:focus-visible .w22-phim__anh {
	transform: scale(1.1);
	transition-duration: 440ms;
}

.w22-phim:hover .w22-phim__vong,
.w22-phim:focus-visible .w22-phim__vong {
	transform: scale(1.2);
	transition-duration: 440ms;
}

.w22-phim:hover .w22-phim__doi,
.w22-phim:focus-visible .w22-phim__doi {
	grid-template-columns: 0fr;
	margin-left: 0;
	opacity: 0;
	transition-duration: 440ms;
}

/* ---------- Hop phim (bam vao khoi thi mo) ----------
 * Ban mau: lop phu rgba(10,10,10,.9) phu kin man, iframe 840x476 can giua
 * ca hai chieu.
 */
.w22-hop-phim {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--w22-le);
	background: rgba(10, 10, 10, 0.9);
	opacity: 0;
	transition: opacity var(--w22-vua-tg) var(--w22-duong-cong);
}

.w22-hop-phim--mo {
	opacity: 1;
}

.w22-hop-phim__khung {
	position: relative;
	width: min(840px, 100%);
	aspect-ratio: 840 / 476;
}

.w22-hop-phim__khung iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.w22-hop-phim__dong {
	position: absolute;
	top: -44px;
	right: 0;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--w22-bo-tron);
	color: var(--w22-tren-toi);
	transition: background-color var(--w22-nhanh) var(--w22-duong-cong);
}

.w22-hop-phim__dong:hover {
	background: var(--w22-nen-trang-mo);
}

.w22-hop-phim__dong svg {
	width: 16px;
	height: 16px;
}

/* ---------- Man hep ----------
 * Ban mau doi bo cuc o TABLET (810-1199) va PHONE (<810). Theme nay dung moc
 * 1024 / 600 san co cua cac section truoc — so lieu lay dung cua ban mau,
 * chi khac cho DAT moc. Da ghi lai de anh Hien quyet sau.
 */
@media (max-width: 1024px) {
	.w22-showreel__dau {
		grid-template-columns: 1fr;
		gap: var(--w22-khe-3);
	}

	.w22-showreel__tieu {
		grid-column: auto;
	}

	.w22-showreel__tieu-de {
		font-size: 50px;
		line-height: 1.1;
	}

	.w22-showreel__nhan,
	.w22-showreel__dan {
		font-size: var(--w22-chu-14);
	}

	.w22-showreel__than {
		margin-top: 60px;
	}

	.w22-showreel__buoc {
		grid-template-columns: repeat(2, 1fr);
	}

	.w22-buoc__chu {
		font-size: var(--w22-chu-16);
	}

	.w22-phim__ten {
		font-size: 28px;
	}

	.w22-phim__nam {
		font-size: var(--w22-chu-14);
	}

	/* Man cam ung khong hover duoc -> giu nguyen trang thai nghi. */
	.w22-phim__anh,
	.w22-phim__vong,
	.w22-phim__doi {
		transition: none;
	}
}

@media (max-width: 600px) {
	.w22-showreel__tieu {
		gap: var(--w22-khe-2);
	}

	/* Ban mau o kho dien thoai: "fabrica®" xuong DUOI chu dan. */
	.w22-showreel__hieu {
		order: 2;
	}

	.w22-showreel__tieu-de {
		font-size: 32px;
	}

	.w22-showreel__chu {
		gap: var(--w22-khe-3);
	}

	.w22-showreel__nhan,
	.w22-showreel__dan,
	.w22-phim__nam {
		font-size: 13px;
	}

	.w22-showreel__than {
		margin-top: 36px;
	}

	.w22-showreel__buoc {
		grid-template-columns: 1fr;
	}

	.w22-buoc {
		padding: 24px;
		gap: var(--w22-khe-3);
	}

	.w22-buoc__chu {
		font-size: var(--w22-chu-15);
	}

	/* Ban mau doi ti le va bo goc o kho dien thoai. */
	.w22-phim {
		aspect-ratio: 1.5;
		border-radius: 18px;
	}

	/* Nut xep DOC o kho dien thoai, vong nho lai 60. */
	.w22-phim__nut {
		flex-direction: column;
		text-align: center;
	}

	.w22-phim__vong {
		width: 60px;
		height: 60px;
	}

	/* Xep doc thi khe 26 ngang doi thanh khe 16 doc (do duoc tren ban mau). */
	.w22-phim__doi {
		margin-left: 0;
		margin-top: var(--w22-khe-2);
	}

	.w22-phim__ten {
		font-size: 24px;
	}

	.w22-hop-phim__dong {
		top: -40px;
	}
}

/*
 * Duong cong hover — chep tu phep do (khong uom cubic-bezier).
 * Lay mau tung khung hinh, chuan hoa be ngang khung anh 1368 -> 1504.8.
 */
:root {
	--w22-cong-phim: linear(
		0,
		0.014 5.3%,
		0.048 18.1%,
		0.096 28.9%,
		0.194 41.3%,
		0.433 54.4%,
		0.793 69.5%,
		0.933 84.2%,
		1
	);
}

@media (prefers-reduced-motion: reduce) {
	.w22-phim__anh,
	.w22-phim__vong,
	.w22-phim__doi,
	.w22-hop-phim {
		transition: none;
	}

	.w22-phim__hat > span {
		will-change: auto;
	}
}