/**
 * Token thiet ke — web22-2027
 *
 * ┌───────────────────────────────────────────────────────────────────────┐
 * │ GIAI DOAN HIEN TAI: CLONE ban mau FABRICA                             │
 * │ https://fabrica.framer.media/                                          │
 * │ Moi gia tri duoi day do that tu DOM o 1440 va 1920.                   │
 * │                                                                       │
 * │ SAU KHI DUYET: lat sang nhan dien Web22 — chi sua DUNG FILE NAY.      │
 * │ Khong file nao khac hardcode mau/phong.                               │
 * │ Goc nhan dien: C:\Users\hienj\.claude\web22\nhan-dien-thuong-hieu.md  │
 * └───────────────────────────────────────────────────────────────────────┘
 *
 * Ghi chu: ban mau KHONG co mau nhan (accent). No choi den-trang-xam thuan.
 * Khi lat sang Web22 se them coral #ff6986 vao cac diem nhan.
 */

:root {
	/* ---- Mau ---- */
	--w22-nen: #f5f5f5;          /* nen trang chinh */
	--w22-nen-the: #ffffff;      /* the trang */
	--w22-toi: #0a0a0a;          /* nen khoi toi */
	--w22-toi-2: #131313;

	--w22-muc: #0a0a0a;          /* chu chinh tren nen sang */
	--w22-muc-2: #090909;
	--w22-muc-mo: rgba(10, 10, 10, 0.6);

	--w22-tren-toi: #ffffff;             /* chu tren nen toi */
	--w22-tren-toi-mo: rgba(255, 255, 255, 0.7);
	--w22-tren-toi-mo-2: rgba(255, 255, 255, 0.6);

	--w22-net: #e7e7e7;
	--w22-net-2: #e9e9e9;
	--w22-net-toi: #313131;
	--w22-net-trang-mo: rgba(255, 255, 255, 0.1);
	--w22-nen-trang-mo: rgba(255, 255, 255, 0.04);

	/* Web22 sau nay: accent coral #ff6986 / dam #e84e6e / nhat #ffeaef */
	--w22-nhan: #0a0a0a;

	/*
	 * 🔴 Mau DUY NHAT cua Web22 duoc dung khi CHUA lat nhan dien (anh Hien chot
	 * 26/08: giu he den-trang cua ban mau, chi doi chu). Dau cham cuoi wordmark
	 * "Web22." bat buoc coral — cam nang §A3 goi do la diem nhan dien, cam doi
	 * mau. Khi lat han nhan dien thi coral thanh accent chung.
	 */
	--w22-coral: #ff6986;
	--w22-coral-dam: #e84e6e;
	--w22-coral-nhat: #ffeaef;

	/*
	 * ---- Ngan keo menu ----
	 * 🔴 KHONG phai mau cua Fabrica. Anh Hien chot 26/08 lam menu theo ban mau
	 * khac (mugenstudio.framer.website) — do that tu DOM ben do.
	 */
	--w22-menu-nen: #050505;   /* nen ngan keo */
	--w22-menu-ke: #363636;    /* duong ke chia vung */
	--w22-menu-gach: #545454;  /* gach chan email */
	--w22-menu-mo: #b8b8b8;    /* nhan nho, so dem, gio, dong © */

	/*
	 * Mau DUY NHAT khong thuoc he den-trang-xam cua ban mau: sao danh gia
	 * (section 06). Do that tu SVG goc — rgb(251,152,38).
	 * Khi lat sang Web22 co the doi sang coral, hoac giu cam cho giong quy uoc
	 * danh gia ma nguoi dung quen mat.
	 */
	--w22-sao: #fb9826;

	/* ---- Phong ----
	 * Ban mau dung DUY NHAT Inter (w500 + w600). Inter du dau tieng Viet,
	 * theme da tu-host san (assets/css/fonts.css).
	 * Web22 sau nay: tieu de doi sang Inter Tight.
	 */
	--w22-phong: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--w22-phong-tieu-de: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--w22-phong-code: ui-monospace, Consolas, 'Courier New', monospace;

	--w22-vua: 500;
	--w22-dam: 600;

	/* Gian chu: do duoc -0.04em cho chu nho, -0.06em cho chu display. */
	--w22-gian: -0.04em;
	--w22-gian-to: -0.06em;

	/* Co chu do duoc tren ban mau */
	--w22-chu-9: 9px;
	--w22-chu-12: 12px;
	--w22-chu-14: 14px;
	--w22-chu-15: 15px;
	--w22-chu-16: 16px;
	--w22-chu-18: 18px;
	--w22-chu-20: 20px;
	--w22-chu-22: 22px;
	--w22-chu-30: 30px;
	--w22-chu-34: 34px;
	--w22-chu-36: 36px;
	--w22-chu-45: 45px;
	--w22-chu-60: 60px;
	--w22-chu-144: 144px;
	--w22-chu-148: 148px;   /* h1 trang /blog va trang tinh cua ban mau */

	/* ---- Hinh khoi (do tu ban mau) ---- */
	--w22-header-cao: 60px;
	--w22-le: 36px;        /* khe ngang trong header + trong the hero */
	--w22-khe-the: 4px;    /* the hero thut 4px moi mep */

	/*
	 * Khe giua CAC SECTION cua trang chu. Ban mau dat mot cho duy nhat:
	 * khoi Main la `flex column` voi gap nay, ap deu cho ca 12 section, con
	 * moi section chi co le NGANG. Do that: 190 / 120 / 50 theo kho man.
	 * 🔴 Dung them padding-top cho tung section de "gia lam" khe nay — lam vay
	 * thi moi section mot con so, sai lech don dan xuong duoi.
	 */
	--w22-khe-section: 190px;

	--w22-bo-the: 11px;
	--w22-bo-lon: 62px;
	--w22-bo-tron: 100%;

	--w22-khe-1: 8px;
	--w22-khe-2: 16px;
	--w22-khe-3: 24px;
	--w22-khe-4: 32px;
	--w22-khe-5: 48px;
	--w22-khe-6: 64px;
	--w22-khe-7: 90px;

	/* ---- Chuyen dong ---- */
	--w22-nhanh: 160ms;
	--w22-vua-tg: 280ms;
	--w22-cham: 520ms;
	--w22-duong-cong: cubic-bezier(0.22, 1, 0.36, 1);

	/*
	 * Duong cong lay tu bundle ban mau, khong uom bang mat:
	 *   ke — transition tween cua component "Animated line"
	 *   tu — tween cua hieu ung tach tu (tokenization: word)
	 *   lo — spring bounce .1 dai 1.2s, chep lai bang linear() tinh tu chinh
	 *        phuong trinh dao dong tat dan (he so tat 0.9) moi 100ms
	 *
	 * 🔴 Tien to `sl-` vi sinh ra o Section 07, nhung quy tac `.w22-tu` (khai
	 * trong so-lieu.css) ap cho MOI section. De bien o pham vi `.w22-so-lieu`
	 * thi ngoai section do `var()` khong giai duoc → ca khai bao `transition`
	 * hong → chu hien TUC THI. Da dinh dung Section 09/10/12; phai o `:root`.
	 */
	--sl-ke-cong: cubic-bezier(0.85, -0.02, 0.31, 0.96);
	--sl-tu-cong: cubic-bezier(0.44, 0, 0.13, 0.96);
	--sl-lo-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
	);
}

@media (max-width: 1024px) {
	:root {
		--w22-le: 30px;
		--w22-khe-section: 120px;
		--w22-header-cao: 56px;
		--w22-khe-7: 48px;
	}
}

@media (max-width: 600px) {
	:root {
		--w22-le: 20px;
		--w22-khe-section: 50px;
	}
}