/**
 * Section 03 — Advantages. CLONE ban mau Fabrica.
 * Bang so day du xem template-parts/home/section-uu-the.php.
 */

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

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

/* ---------- Khoi dau: luoi 4 cot, khe 4 ---------- */
.w22-uu-the__dau {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--w22-khe-the);
	align-items: center;
	min-height: 198px;
}

.w22-uu-the__nhan {
	align-self: start;
	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);
}

.w22-uu-the__cham {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--w22-toi);
	flex: none;
}

/* Tieu de chiem 3 cot con lai; ban mau gioi han be ngang 830. */
.w22-uu-the__tieu-de {
	grid-column: span 3;
	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);
}

/* Ban mau: phan sau cua tieu de mo di. */
.w22-uu-the__tieu-de span {
	color: var(--w22-muc-mo);
}

/* ---------- Than: luoi 4 cot ---------- */
.w22-uu-the__than {
	margin-top: 120px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--w22-khe-the);
}

/* ---------- Cot 1: the anh cao ---------- */
/*
 * Ban mau do o 1920 ra dh=0 — the CAO CO DINH 621, khong khoa ti le.
 * Khoa aspect-ratio thi len 1920 cot rong 377 se keo cao thanh 691 (da lech).
 */
.w22-the-anh {
	position: relative;
	height: 621px;
	border-radius: 18px;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
}

.w22-the-anh__anh {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/*
	 * Neo MEP TREN: anh la anh chup trang chu tren dien thoai, o kho desktop the
	 * dung ti le 339/621 nen vua khit, nhung tu 1024 tro xuong the doi sang kho
	 * NGANG 16/11 va cat rat manh — de mac dinh `center` thi ra mot khuc giua
	 * trang, nhin nhu anh hong.
	 */
	object-position: top;
	transition: transform var(--w22-cham) var(--w22-duong-cong);
}

/*
 * Lop phu — ban mau de .2 va KHONG doi khi hover, vi anh ben do la anh toi san.
 * 🔴 Ta thay bang anh chup DIEN THOAI trang chu du an that, co cai sang co cai
 * toi, ma chu hien khi hover la chu TRANG. Giu .2 thi gap web nen sang la doc
 * khong ra. Nen dam len khi hover — lech ban mau co chu dinh.
 */
.w22-the-anh__phu {
	position: absolute;
	inset: 0;
	/*
	 * Doc tu duoi len: dam o day (cho dat chu + nut) roi nhat dan len tren, de
	 * van nhin ro giao dien web ben duoi. Ban mau dung mot mau phang vi anh no
	 * toi san.
	 */
	background: linear-gradient(
		to top,
		var(--w22-toi) 0%,
		var(--w22-toi) 26%,
		rgba(10, 10, 10, 0.45) 100%
	);
	opacity: 0.2;
	transition: opacity var(--w22-vua-tg) var(--w22-duong-cong);
}

.w22-the-anh:hover .w22-the-anh__phu {
	opacity: 0.86;
}

.w22-the-anh__icon {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 18px;
	height: 18px;
	color: var(--w22-toi);
	z-index: 2;
}

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

/*
 * Khoi chu AN san, hien khi hover.
 * KHAC CO CHU DICH: ban mau doi chieu cao 161 -> 131 (mep duoi dung yen).
 * Animate height vua giat vua khong dang -> dung opacity + dich nhe.
 */
.w22-the-anh__chu {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: 0 30px 60px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 26px;
	color: var(--w22-tren-toi);
	opacity: 0;
	transform: translateY(14px);
	transition: opacity var(--w22-vua-tg) var(--w22-duong-cong),
		transform var(--w22-vua-tg) var(--w22-duong-cong);
}

.w22-the-anh__chu p {
	font-size: var(--w22-chu-16);
	line-height: 1.4;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
}

.w22-the-anh:hover .w22-the-anh__chu {
	opacity: 1;
	transform: none;
}

.w22-the-anh:hover .w22-the-anh__anh {
	transform: scale(1.1);
}

/*
 * 🔴 `.w22-nut-den` / `.w22-cham-trang` DA CHUYEN SANG base.css (27/08):
 * trang chi tiet du an cung dung nut nay, ma file section chi nap o trang chu.
 * Cung ho voi bay §47 — component dung o nhieu trang thi phai o file chung.
 */

/* Cot 2 de trong. */
.w22-uu-the__dem {
	display: block;
}

/* ---------- Cot 3-4: doan chu + 2 the so lieu ---------- */
.w22-uu-the__muc {
	grid-column: span 2;
	display: flex;
	flex-direction: column;
}

.w22-uu-the__dan {
	max-width: 550px;
	font-size: var(--w22-chu-22);
	line-height: 1.2;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
}

.w22-uu-the__dan span {
	color: var(--w22-muc-mo);
}

.w22-uu-the__so-lieu {
	margin-top: auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--w22-khe-the);
}

/* ---------- The so lieu ---------- */
.w22-the-so {
	display: flex;
	flex-direction: column;
	gap: var(--w22-khe-the);
}

.w22-the-so__tren {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	height: 115px;
	padding: 30px;
	border-radius: 18px;
	background: var(--w22-nen-the);
}

.w22-the-so__con-so {
	font-size: 45px;
	line-height: 1.22;
	font-weight: var(--w22-dam);
	letter-spacing: -0.07em;
	color: var(--w22-muc);
}

.w22-the-so__chi-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-the-so__duoi {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 343px;
	padding: 30px;
	border-radius: 18px;
	background: var(--w22-nen-the);
}

/* Ban mau: tieu de trong the so lieu canh PHAI. */
.w22-the-so__tieu-de {
	text-align: right;
	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-the-so__chu {
	font-size: var(--w22-chu-16);
	line-height: 1.4;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	opacity: 0.6;
}

/*
 * 🔴 `.w22-the-so__logo` DA BO (27/08): ban mau de ba logo khach o the so lieu
 * thu hai; ta khong co logo khach ma luat theme cam bia, nen ca hai the deu
 * dung mot kieu (chu).
 */

/* ---------- Man hep ---------- */
@media (max-width: 1024px) {
	.w22-uu-the__dau {
		grid-template-columns: 1fr;
		gap: var(--w22-khe-3);
		min-height: 0;
	}

	.w22-uu-the__tieu-de {
		grid-column: auto;
		font-size: 36px;
	}

	.w22-uu-the__than {
		margin-top: 48px;
		grid-template-columns: 1fr;
		gap: var(--w22-khe-3);
	}

	.w22-uu-the__dem {
		display: none;
	}

	.w22-uu-the__muc {
		grid-column: auto;
		gap: var(--w22-khe-4);
	}

	.w22-uu-the__so-lieu {
		margin-top: 0;
	}

	/*
	 * 🔴 PHAI tra `height` ve auto khi doi sang aspect-ratio.
	 * Da tra gia: chieu cao co dinh 621px cua ban desktop con nguyen, trinh
	 * duyet lay no nhan ti le ra BE NGANG 621 x 16/11 = 903px trong mot cot
	 * luoi chi rong 358 -> ca trang chu tran ngang 529px o kho 390.
	 */
	.w22-the-anh {
		height: auto;
		aspect-ratio: 16 / 11;
	}

	/* Man cam ung khong hover duoc -> luon hien chu. */
	.w22-the-anh__chu {
		opacity: 1;
		transform: none;
	}

	/*
	 * 🔴 Chu luon hien thi lop phu cung phai DAM SAN, khong doi hover. Thieu
	 * dong nay thi tren dien thoai gap du an co nen sang la chu trang mat hut.
	 */
	.w22-the-anh__phu {
		opacity: 0.86;
	}

	.w22-the-so__duoi {
		min-height: 220px;
	}
}

@media (max-width: 600px) {
	.w22-uu-the__tieu-de {
		font-size: 28px;
	}

	.w22-uu-the__dan {
		font-size: var(--w22-chu-18);
	}

	.w22-uu-the__so-lieu {
		grid-template-columns: 1fr;
	}

	.w22-the-so__duoi {
		min-height: 0;
		gap: var(--w22-khe-5);
	}
}

@media (prefers-reduced-motion: reduce) {
	.w22-the-anh__anh,
	.w22-the-anh__chu {
		transition: none;
	}
}