/**
 * Section 10 — Team (doi ngu). CLONE ban mau Fabrica.
 * Bang so day du + tham so nam hieu ung: template-parts/home/section-doi-ngu.php.
 *
 * ⚠️ Bon nguoi la anh stock cua template, vai tro va loi gioi thieu deu bia.
 *    Xem canh bao dau file PHP.
 */

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

	/*
	 * `--bg-cong` la duong cong spring bounce .1 dai 1.2s — quy tac
	 * `[data-w22-hien9]` khai o bang-gia.css, o day chi cap lai bien cho no
	 * ke thua xuong (tre dat inline bang `--bg-tre`).
	 */
	--bg-cong: linear(
		0, 0.14 8.33%, 0.386 16.67%, 0.609 25%, 0.771 33.33%, 0.876 41.67%,
		0.938 50%, 0.973 58.33%, 0.99 66.67%, 0.998 75%, 1
	);
	/* Hover the nguoi: do duoc ~460ms, hinh chu S (cham - nhanh - cham). */
	--dn-cong: linear(
		0, 0.004 5%, 0.019 10%, 0.052 16.6%, 0.107 24.5%, 0.203 35%,
		0.318 42.9%, 0.406 49.4%, 0.518 56.4%, 0.631 60.8%, 0.721 64.1%,
		0.788 67.8%, 0.838 71.8%, 0.877 75.1%, 0.908 78.3%, 0.933 82.7%,
		0.954 85.3%, 0.971 89.9%, 0.986 93.4%, 0.998 96.3%, 1
	);
	/* Chu cuon trong nut: ~420ms, vot qua ~7% (cung ho voi Section 08/09). */
	--dn-nut-cong: linear(
		0, 0.132 3.75%, 0.332 7.5%, 0.545 11.75%, 0.807 18%, 0.967 24%,
		1.03 28%, 1.059 32.25%, 1.068 37.75%, 1.038 48.25%, 1.005 60.75%,
		0.996 73.25%, 0.998 88.75%, 1
	);
}

.w22-dn-the-trang {
	width: 100%;
	max-width: 1520px;
	margin-inline: auto;
	padding: 10px;
	background: var(--w22-nen-the);
	border-radius: 25px;
	display: grid;
	grid-template-columns: repeat(3, minmax(50px, 1fr));
	gap: 0;
}

/* ======================================================================
   Cot chu
   ====================================================================== */
.w22-dn-chu {
	grid-column: span 2;
	padding: 60px 90px 60px 60px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 120px;
}

.w22-dn-dau {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
}

.w22-dn-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);
}

/*
 * Hai tu dau mau #090909, phan sau rgba(10,10,10,.6) — lop `.w22-tu--mo` cua
 * so-lieu.css da dung dung mau nay, khong can ghi de.
 */
.w22-dn-tieu-de {
	max-width: 480px;
	font-size: 60px;
	line-height: 1.1;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian-to);
	color: var(--w22-muc-2);
}

.w22-dn-tieu-de.w22-tu-hien .w22-tu {
	opacity: 1;
	transform: none;
}

.w22-dn-luoi-chu {
	display: grid;
	grid-template-columns: repeat(2, minmax(50px, 1fr));
	gap: var(--w22-khe-the);
}

.w22-dn-cot {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.w22-dn-cot--trai {
	justify-content: space-between;
}

.w22-dn-cot--phai {
	gap: 160px;
}

/* Dau cong 16x16 net 2px, mo .3 (khac cham tron 18x18 cua Section 09). */
.w22-dn-cong {
	position: relative;
	flex: none;
	width: 16px;
	height: 16px;
	opacity: 0.3;
}

.w22-dn-cong i {
	position: absolute;
	background: var(--w22-muc);
}

.w22-dn-cong i:nth-child(1) {
	left: 7px;
	top: 0;
	width: 2px;
	height: 16px;
}

.w22-dn-cong i:nth-child(2) {
	left: 0;
	top: 7px;
	width: 16px;
	height: 2px;
}

.w22-dn-moi {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 28px;
}

.w22-dn-moi__chu {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 13px;
}

.w22-dn-moi__tieu {
	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);
}

.w22-dn-moi__ta {
	font-size: var(--w22-chu-15);
	line-height: 1.4;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
	opacity: 0.6;
}

/* ---------- Nut "Nop ho so" ---------- */
.w22-dn-nut {
	display: inline-flex;
	align-items: center;
	gap: 34px;
	padding: 9px 11px 9px 12px;
	background: var(--w22-toi);
	border-radius: 50px;
	overflow: hidden;
	color: var(--w22-tren-toi);
	transition: background-color 420ms var(--dn-nut-cong);
}

.w22-dn-nut:hover,
.w22-dn-nut:focus-visible {
	background: #000;
}

.w22-dn-nut__chu {
	position: relative;
	display: block;
	height: 12px;
	overflow: hidden;
}

.w22-dn-nut__a,
.w22-dn-nut__b {
	display: block;
	font-size: var(--w22-chu-12);
	line-height: 1;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian);
	white-space: nowrap;
	transition:
		transform 420ms var(--dn-nut-cong),
		opacity 420ms var(--dn-nut-cong);
}

.w22-dn-nut__a {
	position: absolute;
	left: 0;
	top: 0;
	transform: translateY(-20px);
	opacity: 0;
}

.w22-dn-nut:hover .w22-dn-nut__a,
.w22-dn-nut:focus-visible .w22-dn-nut__a {
	transform: translateY(0);
	opacity: 1;
}

.w22-dn-nut:hover .w22-dn-nut__b,
.w22-dn-nut:focus-visible .w22-dn-nut__b {
	transform: translateY(20px);
	opacity: 0;
}

/*
 * Cham trang 8x8: ban mau chong HAI cham. Khi hover, cham thu nhat mo dan mat,
 * cham thu hai nay tu 0.8 ve 1 — nhin ra la mot cham nhun nhe.
 */
.w22-dn-nut__cham {
	position: relative;
	flex: none;
	width: 8px;
	height: 8px;
}

.w22-dn-nut__cham i {
	position: absolute;
	inset: 0;
	background: var(--w22-tren-toi);
	border-radius: var(--w22-bo-tron);
	transition:
		transform 420ms var(--dn-nut-cong),
		opacity 420ms var(--dn-nut-cong);
}

.w22-dn-nut:hover .w22-dn-nut__cham i:nth-child(1),
.w22-dn-nut:focus-visible .w22-dn-nut__cham i:nth-child(1) {
	opacity: 0;
}

.w22-dn-nut__cham i:nth-child(2) {
	transform: scale(0.8);
}

.w22-dn-nut:hover .w22-dn-nut__cham i:nth-child(2),
.w22-dn-nut:focus-visible .w22-dn-nut__cham i:nth-child(2) {
	transform: scale(1);
}

/*
 * Dong dau THUT VAO: ban mau nhet 20 dau cach truoc chu + white-space:pre-wrap
 * (20 x 0.2278em = 4.556em) — cung thu thuat voi khoi trich dan Section 09.
 * Bang so mu cho nay vi hop <p> tinh ca dau cach; ANH GHEP moi thay.
 */
.w22-dn-cham-ngon {
	text-indent: 4.556em;
	font-size: var(--w22-chu-22);
	line-height: 1.2;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc-mo);
}

.w22-dn-cham-ngon span {
	color: var(--w22-muc);
}

/* ======================================================================
   Bon the nguoi
   ====================================================================== */
.w22-dn-luoi-nguoi {
	height: 100%;
	display: grid;
	grid-template-columns: repeat(2, minmax(50px, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: var(--w22-khe-the);
}

.w22-dn-nguoi {
	position: relative;
	overflow: hidden;
	padding: 20px;
	background: var(--w22-toi);
	border-radius: 18px;
	color: var(--w22-tren-toi);
}

/*
 * Hover: anh NHOE blur(0 -> 5px) va mo 0.8 -> 0.6.
 * (Framer doi han ten bien the khi hover nen phep do bam theo data-framer-name
 *  se tro nham the — chot bang anh chup hai trang thai.)
 */
.w22-dn-nguoi__anh {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.8;
	filter: blur(0);
	transition:
		opacity 460ms var(--dn-cong),
		filter 460ms var(--dn-cong);
}

.w22-dn-nguoi:hover .w22-dn-nguoi__anh {
	opacity: 0.6;
	filter: blur(5px);
}

.w22-dn-nguoi__trong {
	position: relative;
	z-index: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
}

.w22-dn-nguoi__tren {
	width: 100%;
	display: flex;
	align-items: flex-start;
	gap: 20px;
}

/* Cham tron 18x18 nen toi, vach trang 2x8. */
.w22-dn-cham {
	position: relative;
	flex: none;
	width: 18px;
	height: 18px;
	background: var(--w22-toi);
	border-radius: var(--w22-bo-tron);
}

.w22-dn-cham i {
	position: absolute;
	background: var(--w22-tren-toi);
}

.w22-dn-cham i:nth-child(1) {
	left: 8px;
	top: 5px;
	width: 2px;
	height: 8px;
}

.w22-dn-cham i:nth-child(2) {
	left: 5px;
	top: 8px;
	width: 8px;
	height: 2px;
}

.w22-dn-nguoi__vai-tro {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--w22-khe-the);
}

.w22-dn-nguoi__vai {
	font-size: var(--w22-chu-15);
	line-height: 1.1;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian);
	text-align: right;
}

.w22-dn-nguoi__noi {
	font-size: var(--w22-chu-12);
	line-height: 1.1;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian);
	text-align: right;
	opacity: 0.8;
}

.w22-dn-nguoi__duoi {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.w22-dn-nguoi__ten {
	max-width: 160px;
	font-size: var(--w22-chu-22);
	line-height: 1.2;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian);
}

/*
 * Khoi mo ta cao 0 khi nghi, mo ra khi hover. Dung `grid-template-rows`
 * 0fr -> 1fr de chay muot toi chieu cao tu dong (chieu cao that phu thuoc
 * do dai chu nen khong dat px cung duoc).
 */
.w22-dn-nguoi__mo {
	width: 100%;
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 460ms var(--dn-cong);
}

.w22-dn-nguoi__mo > div {
	overflow: hidden;
}

.w22-dn-nguoi:hover .w22-dn-nguoi__mo {
	grid-template-rows: 1fr;
}

.w22-dn-nguoi__ta {
	padding-top: 12px;
	font-size: var(--w22-chu-14);
	line-height: 1.3;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	opacity: 0;
	transition: opacity 460ms var(--dn-cong);
}

.w22-dn-nguoi:hover .w22-dn-nguoi__ta {
	opacity: 0.7;
}

/* ======================================================================
   Bang tablet
   ====================================================================== */
@media (max-width: 1024px) {
	.w22-dn-the-trang {
		display: flex;
		flex-direction: column;
		gap: 40px;
	}

	.w22-dn-chu {
		padding: 40px;
		gap: 70px;
	}

	.w22-dn-hieu {
		font-size: 19px;
	}

	.w22-dn-tieu-de {
		max-width: 410px;
		font-size: 50px;
	}

	.w22-dn-cot--phai {
		gap: 60px;
	}

	.w22-dn-moi__ta {
		max-width: 280px;
	}

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

	.w22-dn-nguoi__ten {
		font-size: var(--w22-chu-20);
	}

	.w22-dn-moi__tieu {
		font-size: var(--w22-chu-16);
		line-height: 1.3;
	}

	.w22-dn-moi__ta {
		font-size: var(--w22-chu-14);
		line-height: 1.4;
	}

	.w22-dn-cham-ngon {
		font-size: 19px;
	}

	/* Bon the ve MOT HANG o kho nay. */
	.w22-dn-luoi-nguoi {
		height: auto;
		grid-template-columns: repeat(4, minmax(50px, 1fr));
		grid-template-rows: 363.5px;
	}

	.w22-dn-nguoi {
		padding: 18px;
	}
}

/* ======================================================================
   Bang dien thoai
   ====================================================================== */
@media (max-width: 600px) {
	.w22-dn-the-trang {
		border-radius: 16px;
		gap: 14px;
	}

	.w22-dn-chu {
		padding: 20px;
		gap: var(--w22-khe-3);
	}

	.w22-dn-dau {
		gap: 14px;
	}

	.w22-dn-hieu {
		font-size: var(--w22-chu-18);
	}

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

	.w22-dn-luoi-chu {
		display: flex;
		flex-direction: column;
		gap: 26px;
	}

	.w22-dn-cot--trai {
		gap: 26px;
	}

	.w22-dn-cot--phai {
		gap: 20px;
	}

	.w22-dn-moi {
		gap: 26px;
	}

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

	.w22-dn-moi__ta {
		max-width: none;
		font-size: 13px;
	}

	.w22-dn-cham-ngon {
		font-size: var(--w22-chu-18);
	}

	/* Bon the xep doc, moi the cao 500. */
	.w22-dn-luoi-nguoi {
		display: flex;
		flex-direction: column;
		gap: var(--w22-khe-the);
	}

	.w22-dn-nguoi {
		height: 500px;
		padding: 24px;
		border-radius: 12px;
	}

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

	.w22-dn-nguoi__ten {
		max-width: none;
		font-size: var(--w22-chu-20);
	}

	.w22-dn-nguoi__ta {
		font-size: var(--w22-chu-12);
	}
}

@media (prefers-reduced-motion: reduce) {
	.w22-dn-nguoi__anh,
	.w22-dn-nguoi__mo,
	.w22-dn-nguoi__ta,
	.w22-dn-nut,
	.w22-dn-nut__a,
	.w22-dn-nut__b,
	.w22-dn-nut__cham i {
		transition: none;
	}
}