/* ==========================================================================
   TẦNG 1 — BASE
   Thẻ HTML thuần, chuẩn hoá theo token. Không có class ở tầng này.
   ========================================================================== */

body {
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--c-ink);
	background-color: var(--c-white);
	-webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
	font-family: var(--font-body);
}

/* Chặn tràn ngang ở cấp gốc — không dùng overflow:hidden trên body
   (sẽ phá position:sticky của mục lục và header). */
html,
body {
	max-width: 100%;
}

body {
	overflow-wrap: break-word;
}

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

h1, h2, h3, h4, h5, h6 {
	color: var(--c-navy);
	margin: 0 0 var(--sp-3);
	text-wrap: balance;
}

h1, h2 {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
}

h3, h4, h5, h6 {
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-tight); }
h5 { font-size: var(--fs-h5); line-height: var(--lh-tight); }
h6 { font-size: var(--fs-h6); line-height: var(--lh-tight); }

p {
	margin: 0 0 var(--sp-4);
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: var(--c-link);
	text-decoration: none;
	transition: color var(--t-base);
}

a:hover,
a:focus {
	/* Cam sáng trên nền trắng chỉ 2,78:1 — dùng cam đậm. Trên nền navy
	   được đảo lại về cam sáng ở tầng 3. */
	color: var(--c-orange-strong);
}

/* Focus nhìn thấy được — bắt buộc cho accessibility, không được bỏ. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--c-link);
	outline-offset: 2px;
	border-radius: var(--r-sm);
}

ul, ol {
	margin: 0 0 var(--sp-4);
	padding-left: var(--sp-5);
}

li + li {
	margin-top: var(--sp-2);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Bảng thuần — bảng giá có component riêng ở tầng 3. */
table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-table);
}

th, td {
	padding: var(--sp-3);
	border-bottom: var(--bd-1);
	text-align: left;
	vertical-align: top;
}

th {
	font-weight: var(--fw-semibold);
	color: var(--c-navy);
}

blockquote {
	margin: 0 0 var(--sp-4);
	padding-left: var(--sp-4);
	border-left: 3px solid var(--c-orange);
	font-size: var(--fs-h4);
	font-style: italic;
	color: var(--c-ink);
}

hr {
	border: 0;
	border-top: var(--bd-1);
	margin: var(--sp-6) 0;
}

::selection {
	background: var(--c-orange-strong);
	color: var(--c-white);
}