/* ==========================================================================
   Align 2026 — design tokens
   Thang chữ / spacing lấy từ production align.vn, đã sửa lỗi typo.
   ========================================================================== */

:root {
	font-size: max(16px, 1.11vw);

	/* --- Color ----------------------------------------------------------- */
	--ground: #bf400b;
	/* Kênh MỰC: mọi màu chữ / viền / lớp kính đều tính từ đây, nên thêm một nền
	   chỉ cần khai lại --ground với --ink-rgb. Trước đây 42 chỗ đóng đinh màu
	   trắng nên không thể có nền sáng. Các token dẫn xuất từ nó nằm ở khối
	   "phạm vi mực" ngay dưới :root, KHÔNG khai ở đây — xem chú thích ở đó. */
	--ink-rgb: 255, 255, 255;
	--on-light: #bf400b;
	/* Menu phủ kín màn: luôn nền tối ở mọi theme nên tách riêng token */
	--sheet-bg: #0e1414;
	/* Hai nền của site, gọi tên cố định để dùng chéo: ở nền cam cần màu đen,
	   ở nền đen cần màu cam — mà --ground thì đổi theo theme nên không dùng được. */
	--flame: #bf400b;
	/* Dạng thành phần của --flame, để pha alpha bằng rgba() — var() không nhét
	   được vào giữa một mã hex. */
	--flame-rgb: 191, 64, 11;
	--coal: #0d1011;

	--glass-blur: 50px;

	--radius-pill: 999px;

	/* --- Type ------------------------------------------------------------- */
	--font: 'Aeonik', 'Helvetica Neue', Helvetica, Arial, sans-serif;

	--t-xxxl: max(90px, 10.111vw);
	--t-xxl: max(64px, 6.25vw);
	--t-xxl3: max(48px, 5.333vw);
	--t-xl: max(34px, 3.444vw);
	--t-l: max(28px, 2.778vw);
	--t-m: max(19px, 1.667vw);
	--t-s: max(16px, 1.389vw);
	--t-xs: max(14px, 1.111vw);
	--t-xxs: max(12px, 0.972vw);

	--lh-display: 1.06;
	--lh-heading: 1.14;
	--lh-subhead: 1.15;
	--lh-lead: 1.3;
	--lh-body: 1.5;

	/* --- Rhythm -----------------------------------------------------------
	   Scale theo bề ngang màn hình (vw), chỉ có sàn px, KHÔNG có trần — nên
	   màn càng to khoảng thở càng lớn, đúng cách token của align.vn. */
	--gutter: 3vw;                 /* container = 94vw */
	/* Lề THẬT của .container. Không dùng --gutter cho mấy scene bleed được:
	   .container là `max-width:94vw` căn giữa trong khối rộng 100%, mà `vw`
	   tính CẢ thanh cuộn còn `100%` thì không — nên lề thật là 36px chứ không
	   phải 43px (đo ở 1440). */
	--edge: calc((100% - 94vw) / 2);

	--sp-1: max(32px, 2.3vw);      /* trong một khối */
	--sp-2: max(60px, 4.6vw);      /* giữa các khối */
	--sp-3: max(112px, 8.7vw);     /* giữa các nhóm lớn */

	/* Một nhịp DUY NHẤT giữa mọi khối cấp cao trong <main> — kể cả các scene
	   ghim (Forms, Deck) vốn không phải .section, nên trước đây nhịp bị lệch. */
	--sec-gap: max(172px, 15vw);
	--rule: 1px;

	/* --- Motion ----------------------------------------------------------- */
	--d1: 0.5s;
	--d2: 1s;
	--d3: 1.5s;
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-text: cubic-bezier(0.19, 1, 0.22, 1);
	--d-roll: 0.95s;               /* text roll: nav, nút, tên người trang About */
	--d-word: 1.35s;               /* reveal theo từng từ */
	--stagger-word: 70ms;          /* khoảng so le giữa hai từ */
	--d-char: 1.7s;                /* reveal theo từng ký tự */
	/* So le càng lớn thì hai ký tự cạnh nhau càng chênh nhau về độ cao, và
	   đường chân chữ trong lúc bay càng dốc. Đo trên tiêu đề hero: 18ms cho góc
	   dốc nhất 36.6°, nhìn như chữ đổ; 8ms còn 14.9°. Bù lại bằng --d-char dài
	   hơn nên tổng thời gian dòng 1 vẫn là ~1.34s. Đổi một cái thì phải đổi cái
	   kia, nếu không là đổi luôn cả nhịp. */
	--stagger-char: 8ms;
	--skew-word: -8deg;
	--skew-char: -8deg;
	--d-line: 1.55s;               /* reveal cả dòng một khối (.ln > i) */
	--d-rise: 1.45s;               /* khối mờ + dịch lên ([data-rise]) */
	--stagger-line: 150ms;         /* so le giữa hai dòng */
	/* Chỗ chừa cho đuôi chữ (g, y, p, j) tràn khỏi hộp dòng. Text roll phải đi
	   trọn (chiều cao hộp + khoảng này) thì bản cũ mới ra hết khỏi khung cắt. */
	--roll-tail: 0.18em;
	--d-push: 0.95s;               /* ảnh con trỏ đẩy nhau khi đổi người */
	--e-lot: cubic-bezier(0.167, 0.167, 0.833, 0.833);  /* Easy Ease, lấy từ Lottie */
}

/* ---- PHẠM VI MỰC ---------------------------------------------------------
   Các token dẫn xuất phải khai lại ở MỌI phạm vi có đặt --ink-rgb, vì custom
   property được thay thế ngay tại element khai nó. Khai --body một lần ở :root
   thì nó đã chốt theo --ink-rgb của :root; body.is-light đặt lại --ink-rgb cũng
   không kéo --body đổi theo — đo được đúng triệu chứng đó: nền đổi sang sáng mà
   chữ, viền tag, góc khung, kẻ service vẫn trắng, trong khi .fq (vốn viết thẳng
   rgba(var(--ink-rgb), …) trên chính nó) thì đổi đúng.

   Thêm một phạm vi mực mới ở đâu thì phải thêm bộ chọn đó vào đây. */
:root,
body.is-light,
.sheet,       /* menu phủ kín màn, luôn nền tối nên giữ mực trắng */
.hero-pin,    /* hero trang chủ: cảnh WebGL luôn cam, xem khối "Nền cam cố định" */
.hdr.on-hero {
	--ink: rgb(var(--ink-rgb));
	--body: rgba(var(--ink-rgb), 0.86);
	--muted: rgba(var(--ink-rgb), 0.60);
	--dim: rgba(var(--ink-rgb), 0.38);
	--hairline: rgba(var(--ink-rgb), 0.28);
	--glass-bg: rgba(var(--ink-rgb), 0.10);
	--glass-border: rgba(var(--ink-rgb), 0.20);
	--media-bg: rgba(var(--ink-rgb), 0.16);
}

/* Nút đặc. Ở nền cam thì nút phải trắng (cam trên cam là mất hút), còn ở nền
   tối và nền sáng thì nút lấy chính màu cam làm màu nhấn của thương hiệu.
   Menu luôn nền tối nên cũng dùng nút cam. */
:root { --btn-bg: var(--ink); --btn-fg: var(--flame); }
body.is-dark,
body.is-light,
.sheet { --btn-bg: var(--flame); --btn-fg: #fff; }

/* Hero chạy ngay lúc mở trang nên người xem đang nhìn thẳng vào nó — không cần
   kéo dài, giữ đúng nhịp đã chốt (dòng 1 hết 1.34s). Mấy khối còn lại bắt đầu
   ở mép dưới màn hình nên phải chạy lâu hơn thì mắt mới bắt kịp lúc nó trôi
   lên. Đặt token ngay trên phần tử, các thẻ con thừa hưởng. */
[data-reveal-now] {
	--d-char: 1.15s;
	--d-word: 0.9s;
	--d-line: 1.05s;
	--d-rise: 1s;
}

/* Nền tối — một nấc của công tắc góc phải dưới. Mực vẫn trắng như nền cam nên
   chỉ cần đổi --ground; --on-light là màu chữ trên nút đặc (nút màu trắng) nên
   phải theo nền mới. */
body.is-dark {
	--ground: #0d1011;
	--on-light: #0d1011;
}

/* Nền sáng: đảo kênh mực. Tông giấy ấm chứ không trắng tinh, cho hợp sắc cam
   của thương hiệu. --on-light là màu chữ nằm TRÊN nút đặc, mà nút đặc lúc này
   đã thành gần đen, nên nó phải sáng trở lại. */
body.is-light {
	--ground: #f3efe8;
	--ink-rgb: 13, 16, 17;
	--on-light: #f3efe8;
}

/* Nền cam cố định. Hero trang chủ là cảnh WebGL nền cam ở MỌI theme, nên mọi
   thứ nằm trên nó — chữ, badge, nút, cả header khi còn ở trên hero (JS gắn
   .on-hero) — phải mang bộ mực của nền cam: mực trắng, nút trắng chữ cam.
   Đứng SAU body.is-dark / body.is-light nên thắng cả hai; bộ chọn cũng đã
   được thêm vào khối "phạm vi mực" ở trên để các token dẫn xuất tính lại. */
.hero-pin,
.hdr.on-hero {
	--ground: #bf400b;
	--ink-rgb: 255, 255, 255;
	--on-light: #bf400b;
	--btn-bg: #fff;
	--btn-fg: var(--flame);
	color: var(--ink);
}

@media (max-width: 640px) {
	:root {
		--t-xxxl: max(56px, 10.111vw);
		--t-xxl: max(44px, 6.25vw);
		--t-xxl3: max(36px, 5.333vw);
		--sp-3: max(80px, 10vw);   /* vẫn phải rõ hơn --sp-2 (60px) một bậc */
		--sec-gap: max(112px, 15vw);   /* phải hơn hẳn --sp-3 (80px) */
	}
}