/* ==========================================================================
   Align 2026 — reset, type base, utilities
   ========================================================================== */

/* Bản SVN-Aeonik: cùng một font Aeonik, cùng chiều rộng từng chữ cái (tao đã
   đối chiếu 65 ký tự, không lệch ký tự nào), nhưng có đủ dấu tiếng Việt. Đã
   cắt bớt phần bảng mã không dùng, còn 37 KB so với 28 KB của bản chỉ có
   tiếng Anh. Đổi tên file để trình duyệt cũ không lấy nhầm bản trong bộ nhớ. */
@font-face {
	font-family: 'Aeonik';
	src: url('../assets/fonts/Aeonik-Regular-vn.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

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

html {
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
	/* Cuộn mượt do JS lo; tắt native smooth để không đánh nhau. */
	scroll-behavior: auto;
}

body {
	background: var(--ground);
	/* Nền TRANG, chốt tại body. Hero trang chủ khai đè --ground thành cam ở mọi
	   theme, nên trong hero không lấy được nền thật của trang nữa; biến này
	   thay thế đúng một lần ở đây rồi truyền xuống, hero không đè nó. */
	--page-bg: var(--ground);
	transition: background-color 0.7s var(--ease);
	color: var(--ink);
	font-family: var(--font);
	font-weight: 400;
	line-height: 1.2;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, li, span, a, blockquote { font-weight: 400; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img, video, svg, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
::selection { background: var(--ink); color: var(--ground); }

/* --- Layout --------------------------------------------------------------- */

.container {
	width: 100%;
	max-width: 94vw;
	margin-inline: auto;
}

.section {
	position: relative;
	z-index: 2;
}

/* Nhịp dọc: một khoảng duy nhất giữa mọi khối cấp cao, không cộng dồn
   padding trên + padding dưới như trước. */
main > * + * { margin-top: var(--sec-gap); }
main > .section:first-child { margin-top: var(--sec-gap); }

.bleed { max-width: 100%; }

/* --- Type utilities ------------------------------------------------------- */

.t-xxxl { font-size: var(--t-xxxl); line-height: var(--lh-display); letter-spacing: -0.035em; }
.t-xxl  { font-size: var(--t-xxl);  line-height: var(--lh-display); letter-spacing: -0.02em; }
.t-xxl3 { font-size: var(--t-xxl3); line-height: var(--lh-display); letter-spacing: -0.015em; }
.t-xl   { font-size: var(--t-xl);   line-height: var(--lh-heading); }
.t-l    { font-size: var(--t-l);    line-height: var(--lh-subhead); }
.t-m    { font-size: var(--t-m);    line-height: var(--lh-lead); }
.t-s    { font-size: var(--t-s);    line-height: var(--lh-body); }
.t-xs   { font-size: var(--t-xs);   line-height: var(--lh-body); }
.t-xxs  { font-size: var(--t-xxs);  line-height: var(--lh-body); }

.muted { color: var(--muted); }
.dimmed { color: var(--dim); }
.body-ink { color: var(--body); }
.pretty { text-wrap: pretty; }

/* Nhãn section kiểu ( ... ) */
.label {
	font-size: var(--t-xxs);
	line-height: var(--lh-body);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}
.label::before { content: '( '; }
.label::after { content: ' )'; }
.label--bare::before,
.label--bare::after { content: none; }

/* Nhãn luôn chỉ có một dòng nên dùng thẳng khung cắt (data-split="one"),
   khỏi phải đo chỗ ngắt dòng. Dấu ngoặc vốn là ::before/::after của .label,
   tức nằm NGOÀI khung — để nguyên thì ngoặc đứng im còn chữ lăn lên giữa hai
   cái ngoặc. Nên chuyển chúng vào thẻ đang chạy. */
.label:has(.ln)::before,
.label:has(.ln)::after { content: none; }
.label:not(.label--bare) .ln > i::before { content: '( '; }
.label:not(.label--bare) .ln > i::after { content: ' )'; }
/* .ln mặc định là block. Khung cắt một dòng thì phải inline-block, không thì
   nó rớt xuống dòng riêng (số bước ở How we work nằm ngay sau <h3>) và làm
   lệch đường chân chữ ở mấy hộp flex căn theo baseline (tên + năm dự án). */
[data-split="one"] > .ln { display: inline-block; vertical-align: bottom; }

/* --- A11y ----------------------------------------------------------------- */

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

.skip {
	position: absolute; top: -100px; left: 1rem; z-index: 100000;
	padding: 0.75rem 1.25rem; background: var(--ink); color: var(--on-light);
	border-radius: var(--radius-pill);
}
.skip:focus { top: 1rem; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }