/* Ngô Huỳnh Ads — font tự host (Lora, Inter), subset latin + latin-ext + vietnamese */

@font-face {
	font-family: 'Lora';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/lora/lora-vietnamese-500-normal.woff2') format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
	font-family: 'Lora';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/lora/lora-latin-ext-500-normal.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Lora';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/lora/lora-latin-500-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Lora';
	font-style: italic;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/lora/lora-vietnamese-500-italic.woff2') format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
	font-family: 'Lora';
	font-style: italic;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/lora/lora-latin-ext-500-italic.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Lora';
	font-style: italic;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/lora/lora-latin-500-italic.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Lora';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/lora/lora-vietnamese-600-normal.woff2') format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
	font-family: 'Lora';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/lora/lora-latin-ext-600-normal.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Lora';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/lora/lora-latin-600-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Lora';
	font-style: italic;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/lora/lora-vietnamese-600-italic.woff2') format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
	font-family: 'Lora';
	font-style: italic;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/lora/lora-latin-ext-600-italic.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Lora';
	font-style: italic;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/lora/lora-latin-600-italic.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/inter/inter-vietnamese-400-normal.woff2') format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/inter/inter-latin-ext-400-normal.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/inter/inter-latin-400-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/inter/inter-vietnamese-500-normal.woff2') format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/inter/inter-latin-ext-500-normal.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/inter/inter-latin-500-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/inter/inter-vietnamese-600-normal.woff2') format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/inter/inter-latin-ext-600-normal.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/inter/inter-latin-600-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ====================================================================
   Token màu, khoảng cách — Ngô Huỳnh Ads (DESIGN.md Phần B2/B6)
   ==================================================================== */

:root {
	/* Màu */
	--nh-paper: #f0f1ec;
	--nh-card: #fcfcfa;
	--nh-ink: #15181d;
	--nh-body: #2a2e35;
	--nh-muted: #5b626c;
	--nh-line: #d9dcd4;
	--nh-line-strong: #b9bdb3;
	--nh-accent: #1e3a5f;
	--nh-accent-hover: #152b47;
	--nh-accent-wash: #e3eaf3;
	--nh-mark: #f2e6b3;
	--nh-pill-blue: #dde7f4;
	--nh-pill-amber: #f6e9c9;
	--nh-pill-rose: #f5e0dc;
	--nh-pill-green: #dbeee2;
	--nh-pill-lilac: #e7e3f3;
	--nh-code-bg: #e9ebe4;
	--nh-success: #1f7a4d;
	--nh-error: #b42318;
	--nh-zalo: #0068ff;
	--nh-messenger: #0866ff;

	/* Khoảng cách (đơn vị 4px) */
	--nh-space-4: 4px;
	--nh-space-8: 8px;
	--nh-space-12: 12px;
	--nh-space-16: 16px;
	--nh-space-20: 20px;
	--nh-space-24: 24px;
	--nh-space-28: 28px;
	--nh-space-32: 32px;
	--nh-space-40: 40px;
	--nh-section-gap-desktop: 88px;
	--nh-section-gap-mobile: 56px;

	/* Bo góc */
	--nh-radius-card: 12px;
	--nh-radius-image: 10px;
	--nh-radius-button: 8px;
	--nh-radius-input: 8px;
	--nh-radius-pill: 9999px;

	/* Cột đọc bài viết */
	--nh-reading-width: 720px;
}

/* ====================================================================
   Reset nhẹ + đảm bảo dấu tiếng Việt hiển thị rõ (CLAUDE.md mục 8)
   ==================================================================== */

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

html {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

body {
	background-color: var(--nh-paper);
	color: var(--nh-body);
}

/* ====================================================================
   Thang chữ — DESIGN.md B4 (desktop / mobile qua clamp)
   ==================================================================== */

.c-display {
	font-family: 'Lora', serif;
	font-weight: 600;
	font-size: clamp(36px, 5vw, 56px);
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--nh-ink);
}

.c-heading-lg {
	font-family: 'Lora', serif;
	font-weight: 600;
	font-size: clamp(30px, 4vw, 44px);
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--nh-ink);
}

.c-subheading {
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: clamp(18px, 2vw, 20px);
	line-height: 1.5;
	color: var(--nh-body);
}

.c-body-article {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 17px;
	line-height: 1.75;
	color: var(--nh-body);
}

@media (min-width: 782px) {
	.c-body-article {
		font-size: 18px;
	}
}

.c-small {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 13px;
	line-height: 1.5;
	color: var(--nh-muted);
}

@media (min-width: 782px) {
	.c-small {
		font-size: 14px;
	}
}