/*
 * Trang DICH VU — dung chung cho `/dich-vu/` (danh sach) va `/dich-vu/{...}`
 * (chi tiet). Khoi TU THIET KE: ban mau Fabrica khong co nhom trang nay.
 *
 * He mau va phong theo §A7 cam nang thuong hieu (anh Hien chot 28/08: he
 * den-trang LA nhan dien web cua Web22, khong lat sang coral nua).
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * 🔴 DEM DAU TRANG dat tren `.w22-than`, BOC TRONG LOP CUA BODY.
 *
 * `.w22-than` mac dinh la nhip TRANG CHU: khe 190, KHONG co dem tren (vi hero
 * chiem tron man dau). Moi khuon trang trong deu phai tu khai dem tren 340/260/
 * 140 kem khe rieng, boc trong lop body de khong dung toi trang chu — xem
 * `trang-du-an.css`, `trang-tinh.css`, `chi-tiet-du-an.css`, `trang-blog.css`.
 *
 * Quen buoc nay thi `h1` chui thang len dinh trang, nam duoi thanh header co
 * dinh va bi cat mat nua tren. Da dinh mot lan o dot dung 28/08: bang so sach
 * tron (khong tran ngang, du muc, du chu) — **ANH CHUP MOI LO**. Cung ho bay
 * §21/§44: thu bang so khong bao gio bat duoc.
 */
.post-type-archive-service .w22-than,
.single-service .w22-than {
	padding-top: 340px;
	gap: 90px;
}

/* ═════════════ CHI TIET: /dich-vu/{...} ═════════════ */

.w22-tdv {
	padding: 0 var(--w22-le);
}

.w22-tdv-khung {
	max-width: 1368px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 90px;
}

/* ---------- Dau trang ---------- */
.w22-tdv-dau {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 1000px;
}

.w22-tdv-nhan {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: var(--w22-chu-15);
	line-height: 1.3;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc-mo);
}

.w22-tdv-nhan a {
	color: inherit;
	text-decoration: none;
	text-underline-offset: 3px;
}

.w22-tdv-nhan a:hover,
.w22-tdv-nhan a:focus-visible {
	color: var(--w22-muc);
	text-decoration: underline;
}

/*
 * 60/50/36 — CUNG THANG voi `.w22-bv-h1` cua khuon bai viet.
 * Do that tren 102 tieu de: trung vi 55 ky tu, dai nhat 81. O co 144/148px cua
 * «Dự án.» hay trang tinh thi mot tieu de 81 ky tu vo thanh 6-7 dong.
 */
.w22-tdv-h1 {
	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);
}

.w22-tdv-dan {
	max-width: 800px;
	font-size: var(--w22-chu-30);
	line-height: 1.2;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
}

/* ---------- Luoi: muc luc dinh + than bai ---------- */
.w22-tdv-luoi {
	display: grid;
	grid-template-columns: 339px 1fr;
	gap: var(--w22-khe-the);
	align-items: start;
}

/*
 * Muc luc DINH khi cuon. `--w22-header-cao` + 24 de no khong chui xuong duoi
 * thanh header co dinh. Bai dai toi 40.000 ky tu nen khong dinh thi cuon mot
 * doan la mat muc luc.
 */
.w22-tdv-ml {
	position: sticky;
	top: calc(var(--w22-header-cao) + 24px);
	max-height: calc(100vh - var(--w22-header-cao) - 48px);
	overflow-y: auto;
	padding-right: 30px;
}

.w22-tdv-ml__nhan {
	margin-bottom: 16px;
	font-size: var(--w22-chu-14);
	line-height: 1.3;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc-mo);
}

.w22-tdv-ml__ds {
	display: flex;
	flex-direction: column;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: w22ml;
}

.w22-tdv-ml__ds li {
	counter-increment: w22ml;
	display: flex;
	gap: 10px;
}

.w22-tdv-ml__ds li::before {
	content: counter(w22ml, decimal-leading-zero);
	flex: none;
	font-size: var(--w22-chu-12);
	line-height: 1.6;
	font-weight: var(--w22-vua);
	color: var(--w22-muc-mo);
}

.w22-tdv-ml__ds a {
	font-size: var(--w22-chu-15);
	line-height: 1.35;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
	text-decoration: none;
	text-decoration-color: transparent;
	transition: text-decoration-color var(--w22-vua-tg) var(--w22-duong-cong);
}

.w22-tdv-ml__ds a:hover,
.w22-tdv-ml__ds a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: currentColor;
}

.w22-tdv-than {
	max-width: 800px;
}

.w22-tdv-than .w22-bv-noi-dung {
	max-width: 800px;
}

/*
 * Chua chan cho neo: bam mot muc trong muc luc thi tieu de phai dung DUOI thanh
 * header co dinh, khong bi no che mat.
 */
.w22-tdv-than .w22-bv-noi-dung > h2 {
	scroll-margin-top: calc(var(--w22-header-cao) + 24px);
}

/* ---------- Khoi dich vu lien quan ---------- */
.w22-tdv-lq__h2 {
	margin-bottom: 40px;
	font-size: var(--w22-chu-45);
	line-height: 1.05;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian-to);
	color: var(--w22-muc);
}

.w22-tdv-lq__luoi {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--w22-khe-the);
	list-style: none;
	margin: 0;
	padding: 0;
}

.w22-tdv-lq__link {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	height: 100%;
	padding: 26px;
	border-radius: var(--w22-bo-the);
	background: var(--w22-nen-the);
	color: var(--w22-muc);
	text-decoration: none;
	transition: background var(--w22-vua-tg) var(--w22-duong-cong);
}

.w22-tdv-lq__link:hover,
.w22-tdv-lq__link:focus-visible {
	background: var(--w22-toi);
	color: var(--w22-tren-toi);
}

.w22-tdv-lq__td {
	font-size: var(--w22-chu-20);
	line-height: 1.25;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian-to);
}

.w22-tdv-lq__mui {
	flex: none;
	margin-top: 4px;
	transition: transform var(--w22-vua-tg) var(--w22-duong-cong);
}

.w22-tdv-lq__link:hover .w22-tdv-lq__mui,
.w22-tdv-lq__link:focus-visible .w22-tdv-lq__mui {
	transform: translate(2px, -2px);
}

/* ═════════════ DANH SACH: /dich-vu/ ═════════════ */

.w22-tdvd {
	padding: 0 var(--w22-le);
}

.w22-tdvd-khung {
	max-width: 1368px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 90px;
}

.w22-tdvd-dau {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.w22-tdvd-h1 {
	font-size: var(--w22-chu-144);
	line-height: 0.92;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian-to);
	color: var(--w22-muc);
}

.w22-tdvd-dan {
	max-width: 800px;
	font-size: var(--w22-chu-22);
	line-height: 1.45;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc-mo);
}

.w22-tdvd-luoi {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--w22-khe-the);
	list-style: none;
	margin: 0;
	padding: 0;
}

.w22-tdvd-the {
	display: flex;
	flex-direction: column;
	gap: 16px;
	height: 100%;
	min-height: 260px;
	padding: 26px;
	border-radius: var(--w22-bo-the);
	background: var(--w22-nen-the);
	color: var(--w22-muc);
	text-decoration: none;
	transition: background var(--w22-vua-tg) var(--w22-duong-cong);
}

.w22-tdvd-the:hover,
.w22-tdvd-the:focus-visible {
	background: var(--w22-toi);
	color: var(--w22-tren-toi);
}

.w22-tdvd-the__dau {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

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

.w22-tdvd-the__mui {
	flex: none;
	margin-left: auto;
	transition: transform var(--w22-vua-tg) var(--w22-duong-cong);
}

.w22-tdvd-the:hover .w22-tdvd-the__mui,
.w22-tdvd-the:focus-visible .w22-tdvd-the__mui {
	transform: translate(2px, -2px);
}

/* Tieu de nhom day len sat mui ten, mo ta neo xuong day the. */
.w22-tdvd-the__td {
	margin-top: auto;
	font-size: var(--w22-chu-22);
	line-height: 1.2;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian-to);
}

.w22-tdvd-the__ta {
	font-size: var(--w22-chu-15);
	line-height: 1.45;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
	.w22-tdv-lq__mui,
	.w22-tdvd-the__mui {
		transition: none;
	}

	.w22-tdv-lq__link:hover .w22-tdv-lq__mui,
	.w22-tdvd-the:hover .w22-tdvd-the__mui {
		transform: none;
	}
}

/* ═════════════ Kho tablet ═════════════ */
@media (max-width: 1024px) {
	.post-type-archive-service .w22-than,
	.single-service .w22-than {
		padding-top: 260px;
		gap: 70px;
	}

	.w22-tdv-khung,
	.w22-tdvd-khung {
		gap: 70px;
	}

	.w22-tdv-h1 {
		font-size: 50px;
	}

	.w22-tdv-dan {
		font-size: var(--w22-chu-22);
	}

	/*
	 * Muc luc THOI DINH va nam TREN than bai: o kho nay cot trai chi con ~200px,
	 * muc luc dinh mot ben lam than bai hep lai ma van kho doc.
	 */
	.w22-tdv-luoi {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.w22-tdv-ml {
		position: static;
		max-height: none;
		overflow: visible;
		padding: 24px 26px;
		border-radius: var(--w22-bo-the);
		background: var(--w22-nen-the);
	}

	.w22-tdv-ml:empty {
		display: none;
	}

	.w22-tdv-lq__h2 {
		font-size: var(--w22-chu-34);
	}

	.w22-tdvd-h1 {
		font-size: 99px;
	}

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

/* ═════════════ Kho dien thoai ═════════════ */
@media (max-width: 600px) {
	.post-type-archive-service .w22-than,
	.single-service .w22-than {
		padding-top: 140px;
		gap: 50px;
	}

	.w22-tdv-khung,
	.w22-tdvd-khung {
		gap: 50px;
	}

	.w22-tdv-h1 {
		font-size: 36px;
	}

	.w22-tdv-dan {
		font-size: var(--w22-chu-20);
	}

	.w22-tdv-ml {
		padding: 20px;
	}

	.w22-tdv-lq__h2 {
		margin-bottom: 24px;
		font-size: var(--w22-chu-30);
	}

	/*
	 * The lien quan ve MOT cot: hai cot o 390 chi con ~171px, ma tieu de dich vu
	 * dai trung vi 55 ky tu se vo thanh 6-7 dong.
	 */
	.w22-tdv-lq__luoi,
	.w22-tdvd-luoi {
		grid-template-columns: 1fr;
	}

	.w22-tdvd-h1 {
		font-size: 62px;
	}

	.w22-tdvd-dan {
		font-size: var(--w22-chu-18);
	}

	.w22-tdvd-the {
		min-height: 0;
		padding: 22px;
	}
}

/* ---------- NOI SILO: bai blog cua cum (31/08) ----------
 * Khoi nay la con truc tiep cua `.w22-tdv-khung` nen KHE DOC do `gap:90px` cua
 * khung lo — khong tu khai margin, dung nhu khoi "Cung nhom" ngay tren.
 *
 * 🔴 CO Y nhe hon khoi dich vu lien quan: kia la THE co nen, day chi la DONG co
 * duong ke. Bai blog la duong di phu; lam bang nhau ve thi giac thi no keo
 * nguoi doc ra khoi cac trang dich vu — nguoc muc dich cua silo.
 */
.w22-tdv-blog__h2 {
	margin-bottom: 32px;
	font-size: var(--w22-chu-30);
	line-height: 1.1;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian-to);
	color: var(--w22-muc);
}

.w22-tdv-blog__ds {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 900px;
}

.w22-tdv-blog__link {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	padding: 18px 0;
	border-top: 1px solid var(--w22-net);
	color: var(--w22-muc);
	text-decoration: none;
	transition: opacity var(--w22-vua-tg) var(--w22-duong-cong);
}

.w22-tdv-blog__o:last-child .w22-tdv-blog__link {
	border-bottom: 1px solid var(--w22-net);
}

.w22-tdv-blog__link:hover,
.w22-tdv-blog__link:focus-visible {
	opacity: 0.55;
}

.w22-tdv-blog__td {
	font-size: var(--w22-chu-20);
	line-height: 1.3;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
}

.w22-tdv-blog__ngay {
	flex: none;
	font-size: var(--w22-chu-14);
	line-height: 1.3;
	letter-spacing: var(--w22-gian);
	opacity: 0.5;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 1024px) {
	.w22-tdv-blog__h2 {
		margin-bottom: 24px;
		font-size: var(--w22-chu-22);
	}
}

@media (max-width: 600px) {
	.w22-tdv-blog__td {
		font-size: var(--w22-chu-16);
	}

	/* Kho hep: ngay tuot xuong duoi tieu de cho tieu de duoc tron be ngang. */
	.w22-tdv-blog__link {
		flex-direction: column;
		gap: 6px;
	}
}

/* ---------- BANG DANH MUC HUB `.w22-hubdir` (31/08) ----------
 * Khoi liet ke toan bo trang con cua mot nhom dich vu, nam TRONG THAN BAI cua
 * `/dich-vu/thiet-ke-website/` (44 link) va `/dich-vu/seo/` (10 link), danh dau
 * bang <!--w22-hub-dir--> trong `post_content`.
 *
 * 🔴 LICH SU, doc de khoi lam lai: CSS cu chi ton tai trong theme `web22`
 * (`assets/css/theme.css` dong 1133) nen doi sang theme 2027 la khoi nay mat
 * sach kieu dang — 44 the <a> ve `display:inline`, dinh lien nhau thanh mot bai
 * chu gach chan (bay §73). Ban dau khoi HTML con mang inline style cua nhan
 * dien CU (#E2603F · #3B82C4 · #16A34A) va HAI cau truc khac nhau, phai dung
 * `!important` moi de len duoc.
 * 31/08 anh Hien chot don han: `don-hubdir.php` da viet lai HTML trong CSDL ve
 * MOT cau truc, KHONG con inline style nao. Nho vay khoi CSS nay khong con
 * `!important`, khong con nhanh xu ly bien the cu.
 *
 * Cau truc (ca hai trang deu the nay):
 *   .w22-hubdir > .w22-hubdir__grp
 *       > .w22-hubdir__head  (<b>Nhan</b> <em>(n)</em>)
 *       > .w22-hubdir__grid  > a.w22-hubdir__card
 */
.w22-hubdir {
	display: flex;
	flex-direction: column;
	gap: 40px;
	margin: 40px 0;
}

.w22-hubdir__head {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--w22-net);
	font-size: var(--w22-chu-16);
	line-height: 1.3;
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
}

.w22-hubdir__head b {
	font-weight: var(--w22-dam);
}

.w22-hubdir__head em {
	font-style: normal;
	opacity: 0.45;
	font-variant-numeric: tabular-nums;
}

.w22-hubdir__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 8px;
}

/*
 * 🔴 Phai them `.w22-bv-noi-dung` vao chon loc: kho chu than bai co luat
 * `.w22-bv-noi-dung a { text-decoration: underline }` (bai-viet.css dong 248),
 * chuyen biet hon class don nen no de len. Khong keo chuyen biet ra thi 44 the
 * van gach chan — nhin nhu danh sach chu chu khong nhu the bam duoc.
 */
.w22-bv-noi-dung .w22-hubdir__card,
.w22-hubdir__card {
	display: flex;
	align-items: center;
	min-height: 46px;
	padding: 10px 14px;
	border: 1px solid var(--w22-net);
	border-radius: 10px;
	background: transparent;
	font-size: var(--w22-chu-14);
	line-height: 1.35;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
	text-decoration: none;
	transition: background var(--w22-vua-tg) var(--w22-duong-cong),
		color var(--w22-vua-tg) var(--w22-duong-cong),
		border-color var(--w22-vua-tg) var(--w22-duong-cong);
}

/* Dao den-trang khi tro vao, dung nhip voi the "Cung nhom" ngay duoi. */
.w22-bv-noi-dung .w22-hubdir__card:hover,
.w22-bv-noi-dung .w22-hubdir__card:focus-visible,
.w22-hubdir__card:hover,
.w22-hubdir__card:focus-visible {
	background: var(--w22-toi);
	border-color: var(--w22-toi);
	color: var(--w22-tren-toi);
	text-decoration: none;
}

@media (max-width: 600px) {
	.w22-hubdir {
		gap: 32px;
	}

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

	.w22-hubdir__card {
		min-height: 42px;
		font-size: 13px;
	}
}