/**
 * Section 04 — Services. CLONE ban mau Fabrica.
 * Bang so day du xem template-parts/home/section-dich-vu.php.
 * Day la section DAO MAU duy nhat: panel toi, chu trang.
 */

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

/* Panel toi thut 6px moi mep, bo 25, co anh nen. */
.w22-dich-vu__panel {
	position: absolute;
	inset: 0 6px;
	border-radius: 25px;
	overflow: hidden;
	background: var(--w22-toi);
	z-index: 0;
}

.w22-dich-vu__nen {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.w22-dich-vu__khung {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1520px;
	margin-inline: auto;
}

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

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

/* Cham tron TRANG (sec 03 la cham den). */
.w22-dich-vu__cham {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--w22-tren-toi);
	flex: none;
}

.w22-dich-vu__tieu-de {
	grid-column: span 3;
	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);
}

/* "(4)" lo lung canh tieu de, mo .4. */
.w22-dich-vu__tieu-de sup {
	font-size: 37px;
	line-height: 1.2;
	letter-spacing: -0.06em;
	vertical-align: super;
	opacity: 0.4;
}

/* ---------- Accordion ----------
 * Ban mau: SO / NOI DUNG / NHOM / NUT nam CUNG MOT HANG luoi 4 cot.
 * Muc dong cao 66 (pad 20 + chu 26.4). Muc mo cao 237 = pad-tren 30
 * + noi dung 137 + pad-duoi 70. Cac hang cach nhau 20.
 */
.w22-dich-vu__ds {
	margin-top: 80px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/*
 * NHIP MO — do that tren ban mau, GOP 6 LUOT lay mau (moi luot roi vao pha
 * khac nhau) de co chuoi diem day:
 *   TRE 110ms sau khi bam roi moi chay  <- day la cai "giu lai mot nhip"
 *   thoi luong 322ms (do mot luot ra 281 la thieu — trang mau chay ~15fps)
 *   duong cong ease-in-out cham dau
 * 15 moc, da lam muot nhieu lay mau bang trung binh truot 3 diem.
 * 🔴 Chi 7 moc thi linear() noi THANG giua cac moc -> co goc gay, bam vao
 * thay GIAT du khong rot khung nao (da tra gia: khung TB 6.9ms van bi che).
 */
:root {
	--w22-dv-cong: linear(0, 0.0325 10%, 0.0625 20%, 0.1250 30%, 0.2525 40%, 0.4650 50%, 0.6950 60%, 0.8450 70%, 0.9275 80%, 0.9700 90%, 1);
	--w22-dv-tg: 322ms;        /* mo ra */
	--w22-dv-tg-dong: 334ms;   /* thu lai — do rieng, dai hon mo mot chut */
	--w22-dv-tre: 110ms;
	/* Tieu de hang dong chi hien ra o ~170ms sau khi BAT DAU thu, xong dung
	   luc thu xong -> tre 110+170=280ms, keo 165ms. Cho hien ngay tu 0ms
	   thi no CHONG len noi dung dang thu (anh Hien che "vuong, chong len"). */
	--w22-dv-td-tre: 280ms;
	--w22-dv-td-tg: 165ms;
	/*
	 * Noi dung ben trong MO DAN trong luc thu (do ban mau: 1 -> .87 -> .65
	 * -> .22 -> 0). Khong co no thi noi dung dac nguyen roi bi cat cung —
	 * anh Hien che "bi dinh". Duong cong nay CHAM hon duong cong chieu cao.
	 */
	--w22-dv-mo-cong: linear(0, 0.01 18%, 0.09 36%, 0.22 50%, 0.55 65%, 0.85 81%, 1);
}

.w22-muc-dv {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--w22-khe-the);
	align-items: start;
	min-height: 66px;
	padding-block: 20px;
	cursor: pointer;
	transition: padding var(--w22-dv-tg-dong) var(--w22-dv-cong) var(--w22-dv-tre);
}

.w22-muc-dv--mo {
	padding-block: 30px 70px;
	cursor: default;
	transition: padding var(--w22-dv-tg) var(--w22-dv-cong) var(--w22-dv-tre);
}

/* Vien duoi mo — ban mau ve bang ::after 0/0/1px/0. */
.w22-muc-dv::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -20px;
	height: 1px;
	background: var(--w22-net-trang-mo);
	pointer-events: none;
}

.w22-muc-dv:last-child::after {
	display: none;
}

.w22-muc-dv__chi-so {
	font-size: var(--w22-chu-16);
	line-height: 1.4;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	opacity: 0.6;
	transition: opacity var(--w22-vua-tg) var(--w22-duong-cong);
}

.w22-muc-dv--mo .w22-muc-dv__chi-so {
	opacity: 1;
}

/* Cot 2-4 la MOT HANG NGANG: [chu/than ...] + nut day ve phai. */
.w22-muc-dv__giua {
	position: relative;
	grid-column: 2 / -1;
	min-width: 0;
	display: flex;
	align-items: flex-start;
	gap: 40px;
}

/*
 * Khung co gian: grid-template-rows 0fr -> 1fr la cach animate chieu cao
 * "khong biet truoc" ma khong giat (max-height uoc luong se sai nhip).
 */
.w22-muc-dv__than-boc {
	flex: 1;
	min-width: 0;
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--w22-dv-tg-dong) var(--w22-dv-cong) var(--w22-dv-tre);
}

.w22-muc-dv--mo .w22-muc-dv__than-boc {
	grid-template-rows: 1fr;
	transition: grid-template-rows var(--w22-dv-tg) var(--w22-dv-cong) var(--w22-dv-tre);
}

/* Tieu de hang dong dat ABSOLUTE de khong tham gia tinh chieu cao khi mo. */
.w22-muc-dv__ten-dong {
	position: absolute;
	top: 0;
	left: 0;
	right: 86px;
	font-size: var(--w22-chu-22);
	line-height: 1.2;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	/* Chieu DONG: doi thu gan xong roi moi hien (tre 280ms, keo 165ms). */
	transition: opacity var(--w22-dv-td-tg) linear var(--w22-dv-td-tre);
}

.w22-muc-dv--mo .w22-muc-dv__ten-dong {
	opacity: 0;
	pointer-events: none;
	/* Chieu MO: bien ngay tu dau, khong tre. */
	transition: opacity var(--w22-dv-tre) linear 0s;
}

/* Trong than: anh 80 · khe 120 · chu 364 · khe 40 · nhom 336. */
.w22-muc-dv__than {
	min-height: 0;
	overflow: hidden;
	display: flex;
	align-items: flex-start;
	gap: 40px;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--w22-dv-tg-dong) var(--w22-dv-mo-cong) var(--w22-dv-tre),
		visibility 0s linear calc(var(--w22-dv-tg-dong) + var(--w22-dv-tre));
}

.w22-muc-dv--mo .w22-muc-dv__than {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--w22-dv-tg) var(--w22-dv-mo-cong) var(--w22-dv-tre),
		visibility 0s linear var(--w22-dv-tre);
}

.w22-muc-dv__than .w22-muc-dv__chu {
	margin-left: 4px;   /* cum anh rong 156, chu bat dau x=578 */
}

.w22-muc-dv__nhom {
	width: 336px;
	flex: none;
}

/*
 * 🔴 `.w22-muc-dv__chong` (ba anh 80x80 xep chong) DA BO 27/08 — anh stock cua
 * template. Xem ghi chu trong file PHP.
 * Cot chu an luon 196px do trong ra (156 cum anh + 40 khe) nen `__nhom` va nut
 * tron van dung nguyen cho cu, dung toa do ban mau.
 */
.w22-muc-dv__chu {
	width: 560px;   /* 364 + 156 + 40 */
	flex: none;
}

.w22-muc-dv__tieu-de {
	font-size: var(--w22-chu-30);
	line-height: 1.2;
	font-weight: var(--w22-vua);
	letter-spacing: -0.04em;
}

.w22-muc-dv__mo-ta {
	margin-top: var(--w22-khe-2);
	font-size: var(--w22-chu-16);
	line-height: 1.4;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	opacity: 0.6;
}

.w22-muc-dv__nhan-nhom {
	font-size: var(--w22-chu-12);
	line-height: 1.4;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	opacity: 0.6;
}

/* Chip: nen trang bo 50, pad ngang 12, cao 30, chu 12px den. */
.w22-muc-dv__chip {
	margin-top: 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.w22-muc-dv__chip li {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 12px;
	border-radius: 50px;
	background: var(--w22-tren-toi);
	color: var(--w22-toi);
	font-size: var(--w22-chu-12);
	line-height: 1;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	white-space: nowrap;
}

/*
 * 🔴 `.w22-muc-dv__chip-them` (chip toi ghi "6+") DA BO 27/08: ben ban mau no
 * co nghia "con 6 hang muc nua", ta thi liet ke het hang muc that nen khong con
 * gi de dem.
 */

/* Nut tron 46x46 vien 1px #313131. */
.w22-muc-dv__dau {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	/*
	 * Nut keo len -12 khi DONG cho thang hang chu (hang cao 66, nut 46).
	 * Phai cho margin CHAY CUNG NHIP, khong thi chieu cao hang giat 12px
	 * ngay truoc khi chuyen dong bat dau (da bat duoc bang phep do).
	 */
	margin-top: -12px;
	border-radius: 50%;
	border: 1px solid var(--w22-net-toi);
	color: var(--w22-tren-toi);
	flex: none;
	transition: background-color var(--w22-nhanh) var(--w22-duong-cong),
		margin-top var(--w22-dv-tg-dong) var(--w22-dv-cong) var(--w22-dv-tre);
}

.w22-muc-dv--mo .w22-muc-dv__dau {
	margin-top: 0;
	transition: background-color var(--w22-nhanh) var(--w22-duong-cong),
		margin-top var(--w22-dv-tg) var(--w22-dv-cong) var(--w22-dv-tre);
}

.w22-muc-dv__dau svg {
	width: 16px;
	height: 16px;
}

/* Mo thi soc doc bien mat -> dau CONG thanh dau TRU. */
.w22-muc-dv__soc {
	transform-origin: center;
	transition: opacity var(--w22-vua-tg) var(--w22-duong-cong),
		transform var(--w22-vua-tg) var(--w22-duong-cong);
}

.w22-muc-dv--mo .w22-muc-dv__soc {
	opacity: 0;
	transform: rotate(90deg);
}

.w22-muc-dv__dau:hover {
	background: rgba(255, 255, 255, 0.08);
}

/* ---------- Nut cuoi ---------- */
/* Ban mau: nut thang cot 2 (x=379), khong sat le trai. */
.w22-nut-trang {
	margin-left: calc((100% - var(--w22-khe-the) * 3) / 4 + var(--w22-khe-the));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 58px;
	margin-top: 60px;
	padding-inline: 36px;
	border-radius: 50px;
	background: var(--w22-tren-toi);
	color: var(--w22-toi);
	font-size: var(--w22-chu-18);
	line-height: 1.2;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian);
	transition: opacity var(--w22-nhanh) var(--w22-duong-cong);
}

.w22-nut-trang:hover {
	opacity: 0.85;
}

/* ---------- Man hep ---------- */
@media (max-width: 1024px) {
	/* Le doc RIENG cua section nay (ban mau: Services/Pricing 200 -> 100 -> 50). */
	.w22-dich-vu {
		padding: 100px var(--w22-le);
	}

	.w22-dich-vu__panel {
		inset: 0 4px;
		border-radius: 18px;
	}

	.w22-dich-vu__dau {
		grid-template-columns: 1fr;
		gap: var(--w22-khe-3);
		min-height: 0;
	}

	.w22-dich-vu__tieu-de {
		grid-column: auto;
		font-size: 72px;
	}

	.w22-dich-vu__ds {
		margin-top: 48px;
	}

	.w22-muc-dv {
		grid-template-columns: auto 1fr auto;
		gap: var(--w22-khe-2);
	}

	.w22-muc-dv__ten-dong {
		font-size: var(--w22-chu-18);
	}

	/* Nhom chip xuong hang rieng tren man hep. */
	.w22-muc-dv__nhom {
		grid-column: 1 / -1;
	}

	.w22-muc-dv__than {
		flex-direction: column;
		gap: var(--w22-khe-3);
	}

	/*
	 * 🔴 Hai khoi nay dat cung 364px va 336px cho ban desktop. Doi sang xep doc
	 * ma khong tra lai be ngang thi chung rong hon o chua (228px) va bi
	 * `overflow:hidden` cua .w22-muc-dv__than XEN MAT ~136px chu — khong lam
	 * tran trang nen do so khong bat duoc, phai nhin anh chup moi thay.
	 */
	.w22-muc-dv__chu,
	.w22-muc-dv__nhom {
		width: 100%;
	}

	.w22-muc-dv__than .w22-muc-dv__chu {
		margin-left: 0;
	}

	.w22-muc-dv__dau {
		width: 38px;
		height: 38px;
		margin-top: 0;
	}

	.w22-nut-trang {
		margin-left: 0;
		margin-top: 40px;
		height: 50px;
		font-size: var(--w22-chu-16);
	}
}

@media (max-width: 600px) {
	/* Ban mau: rieng Services o kho dien thoai lay le ngang 24px, khong 20px. */
	.w22-dich-vu {
		padding: 50px 24px;
	}

	.w22-dich-vu__tieu-de {
		font-size: 46px;
	}

	.w22-dich-vu__tieu-de sup {
		font-size: 20px;
	}

	.w22-muc-dv__tieu-de {
		font-size: var(--w22-chu-22);
	}
}

@media (prefers-reduced-motion: reduce) {
	.w22-muc-dv__chi-so,
	.w22-muc-dv__ten,
	.w22-muc-dv__soc,
	.w22-muc-dv__dau {
		transition: none;
	}
}