/**
 * Dau trang.
 *
 * Thanh tren: clone Fabrica (fixed h=60, nen #f5f5f5, tran het be ngang).
 * 🔴 NGAN KEO MENU: clone ban mau KHAC — mugenstudio.framer.website.
 *    Bang so day du xem dau file header.php. Phien sau dung "sua lai cho dung
 *    Fabrica".
 */

.w22-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 40;
	height: var(--w22-header-cao);
	display: flex;
	align-items: center;
	background: var(--w22-nen);
}

/*
 * Bon muc tren thanh: logo · dong ho · "Du an [n]" · burger.
 *
 * 🔴 Vi tri KHONG phai space-between. Do that o 1440 / 1920 / 1024 roi suy ra
 * cong thuc, khop CA BA kho:
 *     dong ho bat dau o  1/3 vung noi dung + 5px
 *     "Du an"  bat dau o  2/3 vung noi dung + 11px
 * => hai rank dau la `100%/3` cong them 5 va 6, rank cuoi om "Du an" + burger.
 * (space-between voi 4 muc ra 397 / 720 — lech ban mau toi hon 100px.)
 */
.w22-header__hang {
	display: grid;
	grid-template-columns: calc(100% / 3 + 5px) calc(100% / 3 + 6px) 1fr;
	align-items: center;
	width: 100%;
	padding-inline: var(--w22-le);
}

.w22-header__cuoi {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--w22-khe-3);
}

/* ---------- Dong ho tren thanh ---------- */
.w22-header__noi {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 14.5px;
	line-height: 1.5;
	font-weight: var(--w22-dam);
	letter-spacing: -0.03em;
	color: var(--w22-muc);
	white-space: nowrap;
}

.w22-header__gio {
	color: var(--w22-muc-mo);
	font-variant-numeric: tabular-nums;
}

/* ---------- "Du an [n]" ---------- */
.w22-header__viec {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14.5px;
	line-height: 1.5;
	font-weight: var(--w22-dam);
	letter-spacing: -0.02em;
	color: var(--w22-muc);
	white-space: nowrap;
	/* Ban mau: hai ban sao chu cach 24 => nac cuon 24 (thoai mai cho dau Viet). */
	--cuon-cao: 24px;
}

.w22-header__so {
	font-size: 14.5px;
	line-height: 1.4;
	font-weight: var(--w22-vua);
	letter-spacing: -0.03em;
	color: var(--w22-muc-mo);
}

/* ---------- Logo ---------- */
.w22-logo {
	font-size: var(--w22-chu-20);
	line-height: 1.1;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
	flex: none;
}

.w22-logo sup {
	font-size: 0.55em;
	vertical-align: super;
	line-height: 0;
}

/* ---------- Burger ----------
 * Mugen: hop 36x12, ba vach day 2 xep BAC THANG —
 * tren 18 canh TRAI, giua 36, duoi 18 canh PHAI.
 */
.w22-burger {
	position: relative;
	width: 36px;
	height: 12px;
	flex: none;
}

.w22-burger__vach {
	position: absolute;
	left: 0;
	height: 2px;
	background: var(--w22-muc);
	transition: transform var(--w22-vua-tg) var(--w22-duong-cong),
		width var(--w22-vua-tg) var(--w22-duong-cong),
		opacity var(--w22-nhanh) var(--w22-duong-cong);
}

.w22-burger__vach--tren  { top: 0;  width: 18px; }
.w22-burger__vach--giua  { top: 5px; width: 36px; }
.w22-burger__vach--duoi  { top: 10px; left: auto; right: 0; width: 18px; }

/* Ba vach dan ve mot vach khi mo (nut dong that nam trong ngan keo). */
.w22-burger[aria-expanded='true'] .w22-burger__vach--tren,
.w22-burger[aria-expanded='true'] .w22-burger__vach--duoi {
	width: 0;
	opacity: 0;
}

.w22-burger[aria-expanded='true'] .w22-burger__vach--giua {
	transform: scaleX(0);
}

/* ---------- Lop phu ----------
 * Mugen: rgba(0,0,0,.8) + backdrop-filter blur(7px), nam DUOI ngan keo va
 * TREN header (nen logo cung bi lam mo — dung nhu ban mau).
 */
.w22-phu {
	position: fixed;
	inset: 0;
	z-index: 45;
	background: rgba(0, 0, 0, 0.8);
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
	opacity: 0;
	transition: opacity 600ms var(--w22-cong-menu);
}

.w22-phu[hidden] {
	display: none;
}

.w22-phu--mo {
	opacity: 1;
	transition-duration: 760ms;
}

/* ---------- Ngan keo ----------
 * Mugen: 600px co dinh dan mep phai o CA 1440 va 1920; phu tron o kho 390.
 * `flex column` + `space-between`, pad doc 48/24, pad ngang dat o TUNG KHOI
 * (duong ke phai trai het 600 nen khong the de pad o ngan).
 */
.w22-panel {
	position: fixed;
	inset: 0 0 0 auto;
	z-index: 46;
	width: 600px;
	max-width: 100%;
	padding: 48px 0 24px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow-y: auto;
	background: var(--w22-menu-nen);
	color: var(--w22-tren-toi);
	transform: translateX(100%);
	transition: transform 600ms var(--w22-cong-menu);
}

.w22-panel[hidden] {
	display: none;
}

.w22-panel--mo {
	transform: none;
	transition-duration: 760ms;
}

.w22-panel__tren,
.w22-panel__lien-he,
.w22-panel__mxh,
.w22-panel__chan {
	padding-inline: 48px;
	flex: none;
}

/*
 * 🔴 Khoi lien he va mang xa hoi phai NAM CHUNG mot boc.
 * Ban mau chi co BA khe doc tu gian (tren · duong ke -> lien he ·
 * mang xa hoi -> chan); khe giua lien he va mang xa hoi la CO DINH 64.
 * De roi thanh hai con cua `space-between` thi thanh BON khe, mang xa hoi
 * tut xuong thap hon ban mau — bang so khong lo, anh ghep moi thay.
 */
.w22-panel__giua {
	display: flex;
	flex-direction: column;
	gap: 64px;
	flex: none;
}

/* Nut dong: dung cho burger vua dung (canh theo le cua header, khong phai 48). */
.w22-panel__dong {
	position: absolute;
	top: 24px;
	right: var(--w22-le);
	width: 24px;
	height: 24px;
	color: var(--w22-tren-toi);
	z-index: 1;
}

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

/* ---------- Nhan nho: Menu · Trao doi · Mang xa hoi ---------- */
.w22-panel__nhan {
	font-size: var(--w22-chu-12);
	line-height: 1.12;
	font-weight: var(--w22-dam);
	/* Ban mau dung -0.02em cho chu nho, KHONG phai -0.04em cua token chung. */
	letter-spacing: -0.02em;
	color: var(--w22-menu-mo);
}

/* ---------- Muc menu ---------- */
.w22-panel__nav {
	margin-top: 12px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

/*
 * Buoc 43 = khung 39 + khe 4. Khung 39 cung la NAC chu cuon:
 * ty le 1.3 so voi co chu 30 — vua du cho dau hai tang tieng Viet.
 */
.w22-panel__muc {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 39px;
	font-size: var(--w22-chu-30);
	line-height: 1.3;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian);
	color: var(--w22-tren-toi);
	--cuon-cao: 39px;
}

.w22-panel__so {
	font-size: var(--w22-chu-30);
	line-height: 1.1;
	font-weight: var(--w22-vua);
	letter-spacing: -0.03em;
	color: var(--w22-menu-mo);
}

/* ---------- Duong ke chia hai vung: trai het 600 ---------- */
.w22-panel__ke {
	display: block;
	height: 1px;
	background: var(--w22-menu-ke);
	flex: none;
}

/* ---------- Khoi lien he ---------- */
.w22-panel__mail {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--w22-menu-gach);
	font-size: var(--w22-chu-30);
	line-height: 1.3;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian);
	color: var(--w22-tren-toi);
	transition: opacity var(--w22-nhanh) var(--w22-duong-cong);
}

.w22-panel__mail:hover {
	opacity: 0.7;
}

.w22-panel__mail-cong {
	font-weight: var(--w22-vua);
}

.w22-panel__noi {
	margin-top: 14px;
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-size: 14.5px;
	line-height: 1.5;
	font-weight: var(--w22-dam);
	letter-spacing: -0.03em;
	color: var(--w22-tren-toi);
}

.w22-panel__gio {
	color: var(--w22-menu-mo);
	font-variant-numeric: tabular-nums;
}

/* ---------- Mang xa hoi: 4 icon 24, buoc 36 (khe 12) ---------- */
.w22-panel__mxh ul {
	margin-top: 14px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.w22-panel__mxh a {
	display: block;
	width: 24px;
	height: 24px;
	color: var(--w22-tren-toi);
	transition: opacity var(--w22-nhanh) var(--w22-duong-cong);
}

.w22-panel__mxh a:hover {
	opacity: 0.6;
}

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

/* ---------- Chan ngan keo ---------- */
.w22-panel__chan {
	position: relative;
	padding-top: 24px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--w22-khe-2);
}

/* Duong ke tren thanh chan cung trai het 600 => ve bang ::before pha le. */
.w22-panel__chan::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--w22-menu-ke);
}

.w22-panel__phap-ly {
	display: flex;
	gap: var(--w22-khe-4);
}

.w22-panel__phap-ly a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 14.5px;
	line-height: 1.5;
	font-weight: var(--w22-dam);
	letter-spacing: -0.02em;
	color: var(--w22-tren-toi);
	border-bottom: 1px solid var(--w22-menu-gach);
	transition: opacity var(--w22-nhanh) var(--w22-duong-cong);
}

.w22-panel__phap-ly a:hover {
	opacity: 0.7;
}

.w22-panel__ban-quyen {
	font-size: var(--w22-chu-12);
	line-height: 1;
	font-weight: var(--w22-dam);
	letter-spacing: -0.03em;
	color: var(--w22-menu-mo);
}

.w22-panel__ban-quyen sup {
	font-size: 0.7em;
	vertical-align: super;
	line-height: 0;
}

.w22-khoa-cuon,
.w22-khoa-cuon body {
	overflow: hidden;
}

/* ---------- Man hep ---------- */
@media (max-width: 1024px) {
	/* Ban mau thu chu tren thanh xuong 0.9 lan o kho nay (14.5 -> 13.05). */
	.w22-header__noi,
	.w22-header__viec,
	.w22-header__so {
		font-size: 13.05px;
	}

	.w22-panel {
		padding-top: 40px;
	}

	.w22-panel__tren,
	.w22-panel__lien-he,
	.w22-panel__mxh,
	.w22-panel__chan {
		padding-inline: 44px;
	}

	.w22-panel__giua {
		gap: 48px;
	}
}

@media (max-width: 600px) {
	/* Ban mau @390 chi con logo + burger. */
	.w22-header__hang {
		display: flex;
		justify-content: space-between;
	}

	.w22-header__noi,
	.w22-header__viec {
		display: none;
	}

	.w22-panel__tren,
	.w22-panel__lien-he,
	.w22-panel__mxh,
	.w22-panel__chan {
		padding-inline: 24px;
	}

	.w22-panel__giua {
		gap: 36px;
	}

	/* Mugen @390: muc menu 24/31.2 — nac cuon lay 32 cho du dau tieng Viet. */
	.w22-panel__muc {
		height: 32px;
		font-size: var(--w22-chu-24, 24px);
		--cuon-cao: 32px;
	}

	.w22-panel__so,
	.w22-panel__mail {
		font-size: var(--w22-chu-24, 24px);
	}

	.w22-panel__phap-ly {
		gap: var(--w22-khe-3);
	}
}

/*
 * Duong cong truot cua ngan keo — chep tu phep do (mo 760ms, dong 600ms).
 * ⚠️ Bo lay mau chi dat ~7fps nen day la ban NOI SUY qua 5 moc do duoc:
 *   14.7% -> 10.25% · 28.4% -> 48.8% · 59.8% -> 95.9% · 80.5% -> 99.8%
 * Hinh chu S (cham - nhanh - cham), khong phai ease-out thuan.
 * Neu nhin thay khac ban mau thi lay mau day hon roi thay day.
 */
:root {
	--w22-cong-menu: linear(
		0,
		0.03 8%,
		0.103 14.7%,
		0.25 21%,
		0.488 28.4%,
		0.70 38%,
		0.84 47%,
		0.92 53%,
		0.959 59.8%,
		0.985 68%,
		0.998 80.5%,
		1
	);
}

@media (prefers-reduced-motion: reduce) {
	.w22-panel,
	.w22-phu,
	.w22-burger__vach {
		transition: none;
	}
}

/* ---------- NUT CHAT ZALO tren thanh header (31/08) ----------
 * Anh Hien chot: DUNG MOT nut, NHO, dat canh burger.
 *
 * 🔴 KHONG dung logo Zalo mau. Thanh header la he den-trang; mot khoi xanh
 * duong o day se hut mat manh hon ca logo "Web22." ngay ben canh — sai thu tu
 * nhin. Ve bong chat bang `currentColor` roi de chu "Zalo" canh no: doc ra ngay
 * la gi ma van dung he mau.
 *
 * Co: cao 32px giua thanh header 60px, chu 13.5px — NHO hon "Dự án" (14.5px)
 * co y, de no la muc phu chu khong tranh cho voi muc chinh.
 * Hieu ung tro vao DAO den-trang, dung nhip voi `.w22-hubdir__card`,
 * `.w22-tdvd-the`, `.w22-tdv-lq__link` — khong de ra kieu tuong tac moi.
 */
/*
 * 🔴 `margin-left:auto` la BAT BUOC, khong phai cho dep.
 * `.w22-header__cuoi` dat `justify-content: space-between`. Truoc day no co hai
 * con ("Dự án" va burger) nen dan deu la dung. Them con thu ba vao giua thi ba
 * cai dan deu ra: do duoc khe tu nut Zalo toi burger la **132px** — nhin nhu
 * mot muc doc lap giua thanh, khong phai nut phu canh burger nhu anh Hien muon.
 * Le auto nuot het khoang trong, keo Zalo + burger dinh nhau ve ben phai, khe
 * con dung 24px cua `--w22-khe-3`. Sua o day thay vi doi `space-between` de
 * khong dong toi vi tri "Dự án" da chot theo ban mau mugen.
 */
/*
 * 🔴 KHONG dong khung/vien quanh nut. Logo Zalo tu no DA LA mot huy hieu bo
 * tron nen; long them mot vong vien nua thanh khung trong khung. De tran nhu
 * burger ngay canh (burger cung khong khung) thi hai cai cung mot ngon ngu.
 * Logo da co san chu "Zalo" nen khong de chu ben canh — xem header.php.
 */
.w22-zalo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	margin-left: auto;
	text-decoration: none;
	transition: opacity var(--w22-nhanh) var(--w22-duong-cong);
}

.w22-zalo:hover,
.w22-zalo:focus-visible {
	opacity: 0.6;
}

/*
 * 26px chu khong phai 15px: logo co chu "Zalo" ben trong, nho hon nua la chu
 * nhoe thanh vet, mat luon cai giup khach nhan ra. Anh nguon 128x128 nen o
 * 26px van net tren man hinh retina.
 */
.w22-zalo__ico {
	display: block;
	width: 26px;
	height: 26px;
	flex: none;
}

/*
 * @600: ban mau chi con logo + burger, nhung GIU nut Zalo — dien thoai chinh la
 * cho khach hay nhan Zalo nhat (anh Hien: 95% khach Viet chat qua Zalo).
 * Day la cho LECH BAN MAU CO CHU DICH.
 */
@media (max-width: 600px) {
	.w22-zalo__ico {
		width: 24px;
		height: 24px;
	}
}

/* ---------- O TIM KIEM trong ngan keo (01/09) ----------
 * Ngan keo nen TOI (`--w22-menu-nen`), chu sang — nen o tim phai theo he do,
 * khong bung mot o trang vao giua.
 */
.w22-tim {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 30px;
	padding: 0 0 12px;
	border-bottom: 1px solid var(--w22-net-trang-mo);
}

.w22-tim__o {
	flex: 1 1 auto;
	min-width: 0;
	background: none;
	border: 0;
	padding: 6px 0;
	font-family: inherit;
	font-size: var(--w22-chu-18);
	line-height: 1.4;
	letter-spacing: var(--w22-gian);
	color: var(--w22-tren-toi);
}

.w22-tim__o::placeholder {
	color: var(--w22-tren-toi);
	opacity: 0.4;
}

.w22-tim__o:focus {
	outline: none;
}

/* Nguoi dung ban phim phai thay minh dang o dau — vien duoi sang len. */
.w22-tim:focus-within {
	border-bottom-color: var(--w22-tren-toi);
}

.w22-tim__nut {
	flex: none;
	display: inline-flex;
	color: var(--w22-tren-toi);
	opacity: 0.55;
	transition: opacity var(--w22-nhanh) var(--w22-duong-cong);
}

.w22-tim__nut:hover,
.w22-tim__nut:focus-visible {
	opacity: 1;
}

.w22-tim__nut svg {
	width: 20px;
	height: 20px;
}

/*
 * Bang goi y: DE NOI len tren, khong day cac muc menu xuong — ngan keo cao co
 * han, chen vao giua la menu nhay loan khi dang go.
 * `max-height` + cuon rieng vi 13 ket qua o kho dien thoai la dai hon man hinh.
 */
.w22-tim__ket {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 3;
	max-height: min(52vh, 420px);
	overflow-y: auto;
	padding: 16px 18px;
	border-radius: 12px;
	background: var(--w22-toi);
	border: 1px solid var(--w22-net-trang-mo);
}

.w22-tim__nhan {
	margin: 14px 0 8px;
	font-size: var(--w22-chu-12);
	line-height: 1.3;
	letter-spacing: var(--w22-gian);
	color: var(--w22-tren-toi);
	opacity: 0.45;
}

.w22-tim__nhan:first-child {
	margin-top: 0;
}

.w22-tim__ds {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}

.w22-tim__ds a {
	display: block;
	padding: 8px 0;
	font-size: var(--w22-chu-15);
	line-height: 1.35;
	letter-spacing: var(--w22-gian);
	color: var(--w22-tren-toi);
	text-decoration: none;
	transition: opacity var(--w22-nhanh) var(--w22-duong-cong);
}

.w22-tim__ds a:hover,
.w22-tim__ds a:focus-visible {
	opacity: 0.6;
}

.w22-tim__het {
	display: block;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--w22-net-trang-mo);
	font-size: var(--w22-chu-14);
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian);
	color: var(--w22-tren-toi);
	text-decoration: none;
}

.w22-tim__khong {
	font-size: var(--w22-chu-15);
	line-height: 1.4;
	color: var(--w22-tren-toi);
	opacity: 0.6;
}

@media (max-width: 600px) {
	.w22-tim {
		margin-bottom: 24px;
	}

	.w22-tim__o {
		font-size: var(--w22-chu-16);
	}
}