/**
 * Section 09 — Pricing (bang gia). CLONE ban mau Fabrica.
 * Bang so day du + tham so sau hieu ung: template-parts/home/section-bang-gia.php.
 *
 * ⚠️ Moi con so la GIA BIA cua ban mau. Xem canh bao dau file PHP.
 */

.w22-bang-gia {
	position: relative;
	padding: 200px var(--w22-le);
	background: var(--w22-nen);
	color: var(--w22-tren-toi);

	/* Cung spring bounce .1 dai 1.2s dung o Section 07/08. */
	--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
	);
	/* Spring cua chu cuon trong nut, ~400ms vot qua ~7% (giong mui ten S08). */
	--bg-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
	);
}

/* ---------- Tam nen toi + nhieu hat ---------- */
.w22-bg-nen {
	position: absolute;
	inset: 0 6px;
	z-index: 0;
	background: var(--w22-toi);
	border-radius: 25px;
	overflow: hidden;
	pointer-events: none;
}

.w22-bg-nen img {
	width: 100%;
	height: 100%;
	object-fit: fill;
}

/*
 * Lop nhieu hat: anh 256x256 lap kin, mo .05, NHAY qua 10 vi tri trong 8 giay
 * roi lap lai — chep tu component Grain cua ban mau (ease steps(10, start),
 * nen dung `step-end` de moi moc duoc giu nguyen toi moc ke tiep).
 */
.w22-bg-hat {
	position: absolute;
	inset: -200%;
	width: 400%;
	height: 400%;
	background-image: var(--hat-anh);
	background-size: 256px 256px;
	background-repeat: repeat;
	opacity: 0.05;
	animation: w22-bg-hat 8s step-end infinite;
}

@keyframes w22-bg-hat {
	0% { transform: translate(0%, 0%); }
	10% { transform: translate(-5%, -10%); }
	20% { transform: translate(-15%, 5%); }
	30% { transform: translate(7%, -25%); }
	40% { transform: translate(-5%, 25%); }
	50% { transform: translate(-15%, 10%); }
	60% { transform: translate(15%, 0%); }
	70% { transform: translate(0%, 15%); }
	80% { transform: translate(3%, 35%); }
	90% { transform: translate(-10%, 10%); }
	100% { transform: translate(0%, 0%); }
}

/* ---------- Khung noi dung ---------- */
.w22-bg-khung {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1520px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 80px;
}

/* ---------- Dau ---------- */
.w22-bg-dau {
	display: grid;
	grid-template-columns: repeat(4, minmax(50px, 1fr));
	gap: var(--w22-khe-the);
	align-items: start;
}

.w22-bg-nhan {
	justify-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);
}

/* Cham tron 18x18 co dau cong — hai bien the sang / mo. */
.w22-bg-cham {
	position: relative;
	flex: none;
	width: 18px;
	height: 18px;
	border-radius: var(--w22-bo-tron);
}

.w22-bg-cham i {
	position: absolute;
}

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

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

.w22-bg-cham--sang {
	background: var(--w22-tren-toi);
}

.w22-bg-cham--sang i {
	background: var(--w22-toi);
}

.w22-bg-cham--mo {
	background: var(--w22-net-trang-mo);
}

.w22-bg-cham--mo i {
	background: var(--w22-tren-toi);
}

.w22-bg-tieu {
	grid-column: span 3;
}

/*
 * 🔴 Cao dong 0.92 o co 144px XEN MU dau tieng Viet neu co overflow:hidden —
 * ban mau co, ta KHONG chep (cung cach da xu ly o Section 06).
 */
.w22-bg-tieu-de {
	font-size: var(--w22-chu-144);
	line-height: 0.92;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian-to);
	color: var(--w22-tren-toi);
}

/* ---------- Bang gia ---------- */
.w22-bg-bang {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 120px;
}

.w22-bg-bang__trong {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
}

.w22-bg-vien-hang {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(4, minmax(50px, 1fr));
	gap: var(--w22-khe-the);
}

.w22-bg-vien {
	grid-column: 2 / span 3;
	justify-self: start;
	display: inline-flex;
	align-items: center;
	padding: 4px;
	background: var(--w22-nen-trang-mo);
	border-radius: 50px;
}

.w22-bg-vien__nut {
	padding: 12px 22px;
	border-radius: 50px;
	font-size: var(--w22-chu-14);
	line-height: 1.3;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-tren-toi);
	white-space: nowrap;
}

/* Ban mau doi TUC THI, khong co chuyen dong — da lay mau tung khung. */
.w22-bg-vien__nut.is-chon {
	background: var(--w22-tren-toi);
	color: var(--w22-muc);
}

.w22-bg-luoi {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(4, minmax(50px, 1fr));
	gap: var(--w22-khe-the);
	align-items: stretch;
}

.w22-bg-the1,
.w22-bg-the2 {
	background: var(--w22-nen-trang-mo);
	border-radius: 18px;
	padding: 50px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.w22-bg-the1 {
	justify-content: space-between;
}

.w22-bg-the2 {
	grid-column: span 3;
	justify-content: flex-start;
	gap: 180px;
}

.w22-bg-the1__chu {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
}

.w22-bg-the1__tieu {
	font-size: var(--w22-chu-18);
	line-height: 1.3;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
}

.w22-bg-the1__ta {
	font-size: var(--w22-chu-16);
	line-height: 1.4;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	opacity: 0.6;
}

.w22-bg-the1__hang {
	display: flex;
	align-items: center;
	gap: 20px;
}

.w22-bg-the1__gia {
	font-size: 27px;
	line-height: 1;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian-to);
}

/* Cong tac nho: bi 34x34 nam BEN PHAI khi bat, ben trai khi tat. */
.w22-bg-ct {
	flex: none;
	width: 76px;
	height: 44px;
	padding: 4px;
	background: var(--w22-tren-toi);
	border-radius: 50px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.w22-bg-ct.is-bat {
	justify-content: flex-end;
}

.w22-bg-ct i {
	display: block;
	width: 34px;
	height: 34px;
	background: var(--w22-toi-2);
	border-radius: var(--w22-bo-tron);
}

.w22-bg-the2__tren {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, minmax(50px, 1fr));
	gap: 120px;
	align-items: start;
}

.w22-bg-gia {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	font-size: 56px;
	line-height: 1;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian-to);
}

.w22-bg-gia__dv {
	font-size: var(--w22-chu-16);
	line-height: 1.4;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	opacity: 0.6;
}

.w22-bg-ds {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.w22-bg-ds li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var(--w22-chu-16);
	line-height: 1.4;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
}

/* Gia don sang mep phai de bon dong thang cot, doc luot xuong la so sanh duoc.
 * `nowrap` vi "3–7 triệu" bi be doi o kho hep la bang mat het thang hang. */
.w22-bg-ds__gia {
	margin-left: auto;
	padding-left: 12px;
	white-space: nowrap;
	opacity: .6;
}

.w22-bg-the2__duoi {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, minmax(50px, 1fr));
	gap: 120px;
	align-items: center;
}

.w22-bg-giao {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 58px;
	font-size: var(--w22-chu-14);
	line-height: 1.3;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
}

.w22-bg-giao__nhan {
	opacity: 0.6;
}

/* Duong ke sat DAY o khoi thoi gian ban giao. */
.w22-bg-giao::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--w22-tren-toi);
	opacity: 0.1;
}

/*
 * Nut: hai ban sao chu xep doc trong khung cat cut. Nghi thi hien ban DUOI;
 * hover thi ca cap truot XUONG 40px kem cheo mo, nen sang ngA sang #ebebeb.
 */
.w22-bg-nut {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 58px;
	padding: 18px 30px;
	background: var(--w22-nen-the);
	border-radius: 50px;
	overflow: hidden;
	color: var(--w22-muc);
	transition: background-color 400ms var(--bg-nut-cong);
}

.w22-bg-nut:hover,
.w22-bg-nut:focus-visible {
	background: #ebebeb;
}

.w22-bg-nut__cuon {
	position: relative;
	display: block;
	height: 22px;
	overflow: hidden;
}

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

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

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

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

/* ---------- Trich dan ---------- */
.w22-bg-trich {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(4, minmax(50px, 1fr));
	gap: var(--w22-khe-the);
	align-items: start;
}

.w22-bg-trich__nhan {
	font-size: var(--w22-chu-16);
	line-height: 1.4;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	opacity: 0.6;
}

.w22-bg-trich__chu {
	grid-column: span 3;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 50px;
}

/*
 * Dong dau THUT VAO: ban mau nhet 18 dau cach truoc chu + white-space:pre-wrap
 * (18 x ~0.2277em = 4.1em). Ta tach tu o PHP nen dau cach mat — dung text-indent
 * cho tuong duong va tu co gian theo co chu.
 */
.w22-bg-trich__doan {
	max-width: 785px;
	text-indent: 4.1em;
	font-size: var(--w22-chu-30);
	line-height: 1.2;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-tren-toi);
}

/* Phan chu mo cua doan nay la TRANG mo .6, khong phai muc mo cua nen sang. */
/*
 * 🔴 text-indent KE THUA. Moi tu la mot `inline-block` nen no cung la khoi
 * chua -> tu nao cung thut them 4.1em, doan van no tu 3 dong len 10. Phai tra
 * ve 0 cho tung tu.
 */
.w22-bg-trich__doan .w22-tu {
	text-indent: 0;
}

.w22-bg-trich__doan .w22-tu--mo {
	color: var(--w22-tren-toi-mo-2);
}

.w22-bg-trich__doan.w22-tu-hien .w22-tu {
	opacity: 1;
	transform: none;
}

.w22-bg-nguoi {
	display: flex;
	align-items: center;
	gap: 14px;
}

.w22-bg-nguoi img {
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: var(--w22-bo-tron);
	object-fit: cover;
}

.w22-bg-nguoi__chu {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

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

.w22-bg-nguoi__vai {
	font-size: var(--w22-chu-14);
	line-height: 1.3;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	opacity: 0.6;
}


/* ---------- Vu dao xuat hien ---------- */
[data-w22-hien9] {
	opacity: 0;
	transition: opacity 1200ms var(--bg-cong) var(--bg-tre, 0ms);
}

[data-w22-hien9].w22-bg-hien {
	opacity: 1;
}

/* ---------- Bang tablet ---------- */
@media (max-width: 1024px) {
	.w22-bang-gia {
		padding: 100px var(--w22-le);
	}

	/* Do that: hai ben va DAY thut 4px, con dinh thi sat mep (0). */
	.w22-bg-nen {
		inset: 0 4px 4px;
	}

	.w22-bg-tieu-de {
		font-size: 99px;
	}

	/*
	 * Rieng kho tablet ban mau XEP DOC hai khoi nay; ve lai thanh hang o kho
	 * dien thoai. Bang so o mot kho khong lo ra — phai do du ba kho.
	 */
	.w22-bg-the2__tren {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 40px;
	}

	.w22-bg-ds {
		gap: 10px;
	}

	.w22-bg-the1__hang {
		flex-direction: column;
		align-items: flex-start;
	}

	.w22-bg-nhan,
	.w22-bg-the1__ta,
	.w22-bg-nguoi__ten {
		font-size: var(--w22-chu-14);
		line-height: 1.4;
	}

	.w22-bg-bang {
		gap: 90px;
	}

	.w22-bg-vien__nut,
	.w22-bg-giao,
	.w22-bg-nguoi__vai {
		font-size: 13px;
		line-height: 1.3;
	}

	.w22-bg-the1,
	.w22-bg-the2 {
		padding: 36px;
	}

	.w22-bg-the2 {
		gap: 60px;
	}

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

	.w22-bg-gia {
		font-size: 50px;
	}

	.w22-bg-gia__dv,
	.w22-bg-ds li {
		font-size: var(--w22-chu-14);
		line-height: 1.4;
	}

	.w22-bg-trich__chu {
		gap: 40px;
	}

	.w22-bg-trich__doan {
		font-size: 28px;
	}
}

/* ---------- Bang dien thoai ---------- */
@media (max-width: 600px) {
	.w22-bang-gia {
		padding: 50px var(--w22-le);
	}

	/* O kho nay ban mau cho tam nen TRAN HET va bo goc bang 0. */
	.w22-bg-nen {
		inset: 0;
		border-radius: 0;
	}

	.w22-bg-khung {
		gap: 40px;
	}

	.w22-bg-dau {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: var(--w22-khe-2);
	}

	/* Tra ve hang ngang (kho tablet moi xep doc). */
	.w22-bg-the1__hang {
		flex-direction: row;
		align-items: center;
	}

	.w22-bg-tieu-de {
		font-size: 62px;
	}

	.w22-bg-nhan,
	.w22-bg-the1__ta,
	.w22-bg-gia__dv,
	.w22-bg-ds li,
	.w22-bg-nguoi__ten {
		font-size: 13px;
		line-height: 1.4;
	}

	.w22-bg-vien__nut,
	.w22-bg-giao,
	.w22-bg-nguoi__vai {
		font-size: var(--w22-chu-12);
		line-height: 1.3;
	}

	.w22-bg-bang {
		gap: 40px;
	}

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

	.w22-bg-vien-hang {
		display: flex;
	}

	.w22-bg-vien {
		grid-column: auto;
	}

	/* Ban mau DAO thu tu o kho nay: the gia len truoc, the phu phi xuong duoi. */
	.w22-bg-luoi {
		display: flex;
		flex-direction: column;
		gap: var(--w22-khe-the);
	}

	.w22-bg-the2 {
		order: 0;
		gap: 20px;
	}

	.w22-bg-the1 {
		order: 1;
		gap: 28px;
		justify-content: flex-start;
	}

	.w22-bg-the1,
	.w22-bg-the2 {
		width: 100%;
		padding: 24px;
		border-radius: 14px;
	}

	.w22-bg-the1__chu {
		gap: 10px;
	}

	.w22-bg-the1__tieu {
		font-size: var(--w22-chu-15);
		line-height: 1.3;
	}

	.w22-bg-the2__tren {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: var(--w22-khe-3);
	}

	.w22-bg-gia {
		font-size: 32px;
	}

	.w22-bg-the2__duoi {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 30px;
	}

	.w22-bg-trich {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 23px;
	}

	.w22-bg-trich__chu {
		gap: var(--w22-khe-4);
	}

	/*
	 * Van GIU thut dong dau o kho nay — ban mau nhet 18 dau cach vao chinh
	 * chuoi nen thut theo co chu o MOI kho. Bang so khong lo (do hop <span>
	 * bao gom ca dau cach), anh ghep moi thay.
	 */
	.w22-bg-trich__doan {
		font-size: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.w22-bg-hat {
		animation: none;
	}

	[data-w22-hien9] {
		opacity: 1;
		transition: none;
	}

	.w22-bg-nut,
	.w22-bg-nut__a,
	.w22-bg-nut__b {
		transition: none;
	}
}