/**
 * Nen tang — reset, chu, tien ich chung.
 * Ngon ngu thi giac lay tu ban mau Fabrica (do that tu DOM).
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

/* Lenis tu lo viec cuon muot — chi bat scroll-behavior khi KHONG co Lenis. */
html:not(.lenis) {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html:not(.lenis) {
		scroll-behavior: auto;
	}
}

html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
	overflow: hidden;
}

body {
	margin: 0;
	background: var(--w22-nen);
	color: var(--w22-muc);
	font-family: var(--w22-phong);
	font-size: var(--w22-chu-16);
	line-height: 1.4;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg,
video {
	max-width: 100%;
	display: block;
}

img,
svg {
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-family: var(--w22-phong-tieu-de);
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian-to);
	color: inherit;
}

p {
	margin: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.w22-an-nhin {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.w22-bo-qua {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--w22-muc);
	color: #fff;
	padding: 12px 20px;
}

.w22-bo-qua:focus {
	left: 12px;
	top: 12px;
}

/* ---------- Nhip doc cua trang ----------
 * Ban mau: khoi Main la `flex column` voi `gap:190px`, ap deu cho ca 12
 * section; tung section chi co le NGANG (rieng Services/Pricing co them le doc
 * 200px cua chinh no). Giu dung mot cho nay de nhip khong troi.
 */
.w22-than {
	display: flex;
	flex-direction: column;
	gap: var(--w22-khe-section);
}

/* ---------- Khung ngang ----------
 * Ban mau FULL-BLEED: khong co cot co dinh. Do o 1440 va 1920 ra dw=+480,
 * dx=0 — moi section trai het be ngang man, chi co khe ngang co dinh 36px.
 */
.w22-hang {
	width: 100%;
	padding-inline: var(--w22-le);
}

/* ---------- Net vien 1px ve bang ::after ----------
 * Ban mau ve vien bang pseudo-element chu khong dung thuoc tinh border —
 * vien phu len nen KHONG chiem cho, so do khoi giu nguyen.
 */
.w22-net {
	position: relative;
}

.w22-net::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	border: 1px solid var(--w22-net);
	border-radius: inherit;
}

/* ---------- Nut tron nho (ban mau: vien 1px #313131, bo 100%) ---------- */
.w22-nut-tron {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--w22-bo-tron);
	transition: background-color var(--w22-nhanh) var(--w22-duong-cong);
}

/* ---------- Chu cuon (hover roll) ----------
 * Ban mau dung khap noi: 2 ban sao chu xep doc trong khung overflow:hidden,
 * hover thi ca cum truot len 1 nac.
 * 🔴 BAY TIENG VIET: ban mau de khung cao = dung line-height (chu Latin khong
 * co dau nho len). Chu Viet thi xen dau (ổ, ậ...) — luat skill: GIU font-size,
 * NOI khung ~+30% co chu, va translateY phai bang dung chieu cao khung moi.
 * Cach dung: dat --cuon-cao (chieu cao 1 nac) tren phan tu .w22-cuon.
 */
.w22-cuon {
	display: inline-flex;
	overflow: hidden;
	height: var(--cuon-cao, 1.35em);
}

.w22-cuon__truot {
	display: inline-flex;
	flex-direction: column;
	transition: transform var(--w22-vua-tg) var(--w22-duong-cong);
}

.w22-cuon__truot > * {
	display: inline-flex;
	align-items: center;
	height: var(--cuon-cao, 1.35em);
	white-space: nowrap;
	/*
	 * 🔴 BAT BUOC: khong co dong nay thi flex container (cao 1 nac) NEN hai
	 * ban sao lai (160 -> 80), ban 2 bat dau som va LO ra trong khung.
	 * Da tra gia: menu lo nua chu ban sao ngay duoi moi muc.
	 */
	flex: none;
}

a:hover > .w22-cuon .w22-cuon__truot,
a:hover.w22-cuon .w22-cuon__truot,
.w22-cuon-chu-nha:hover .w22-cuon__truot {
	transform: translateY(calc(var(--cuon-cao, 1.35em) * -1));
}

/*
 * Bien the CHAM: hai cham 8px xep doc, cach nhau 1 nac 4px — dung o cac nut nho
 * ("Trao doi nhanh" o Section 03...). Nac truot = 8 cham + 4 khe = 12px, KHONG
 * phai --cuon-cao nhu bien the chu.
 * 🔴 Bo quy tac nay o file cua MOT section la sai (bay §39): nut o section khac
 * dung chung lop -> mat quy tac la cham lech nua than. Cho dung cua no la day.
 */
.w22-cuon--cham {
	--cuon-cao: 8px;
}

.w22-cuon--cham .w22-cuon__truot {
	gap: 4px;
}

.w22-cuon--cham .w22-cuon__truot > * {
	height: 8px;
}

a:hover > .w22-cuon--cham .w22-cuon__truot {
	transform: translateY(-12px);
}

@media (prefers-reduced-motion: reduce) {
	.w22-cuon__truot {
		transition: none;
	}

	a:hover > .w22-cuon .w22-cuon__truot,
	.w22-cuon-chu-nha:hover .w22-cuon__truot {
		transform: none;
	}
}

/* ---------- Nut den nho ----------
 * Cung kieu nut cua ban mau o nhieu cho: Section 03, Section 10/12, trang chi
 * tiet du an. Khung cuon chu cao 16 (chu Viet co dau tren — luat skill), cham
 * trang 8px o mep phai cung cuon theo.
 * 🔴 Truoc 27/08 nam trong `sections/uu-the.css` (chi nap o trang chu).
 */
.w22-nut-den {
	display: inline-flex;
	align-items: center;
	gap: 34px;
	height: 30px;
	padding: 0 11px 0 12px;
	border-radius: 50px;
	background: var(--w22-toi);
	color: var(--w22-tren-toi);
	font-size: var(--w22-chu-12);
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	white-space: nowrap;
	--cuon-cao: 16px;
}

.w22-cham-trang {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--w22-tren-toi);
	flex: none;
}

/* ---------- Vu dao tung tu ----------
 * Mo 0.001 → 1 + dich len 10px, 900ms, so le 20ms mot tu. Markup do PHP sinh
 * (`w22_2027_tach_tu`), khong nhay chu o man dau va khong co JS van doc duoc.
 *
 * 🔴 Truoc 27/08 khoi nay nam trong `sections/so-lieu.css` — file chi nap o
 * trang chu. Ra ngoai trang chu thi `.w22-tu` khong co kieu, hieu ung mat.
 * Nguy hiem hon: neu file CO nap ma thieu quy tac hien thi chu dung yen o
 * `opacity: .001`, tuc la MAT HAN. Cung ho voi bay §39 nen dua ve day.
 */
.w22-tu {
	display: inline-block;
	opacity: 0.001;
	transform: translateY(10px);
	transition:
		opacity 900ms var(--sl-tu-cong),
		transform 900ms var(--sl-tu-cong);
	transition-delay: calc(var(--tu-i, 0) * 20ms);
}

/* Quy tac hien CHUNG — moi khoi mang `data-w22-tu` deu chay, khoi phai nho
 * viet lai mot dong rieng cho tung section. */
[data-w22-tu].w22-tu-hien .w22-tu {
	opacity: 1;
	transform: none;
}

.w22-tu--mo {
	color: var(--w22-muc-mo);
}

@media (prefers-reduced-motion: reduce) {
	.w22-tu {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---------- Vu dao xuat hien ---------- */
[data-w22-hien] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity var(--w22-cham) var(--w22-duong-cong),
		transform var(--w22-cham) var(--w22-duong-cong);
}

[data-w22-hien].w22-da-hien {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	[data-w22-hien] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/*
 * Dau cham cuoi cua wordmark "Web22." — LUON coral, ke ca khi ca web dang o he
 * den-trang cua ban mau. Cam nang §A3 goi day la diem nhan dien, cam doi mau.
 */
.w22-cham-coral {
	color: var(--w22-coral);
}