/** * tokens.css — nguồn chuẩn duy nhất cho màu, chữ, khoảng cách và bo góc. * * Giữ nguyên tên token của bộ V3 (--navy-*, --terra-*, --neutral-*), cộng một * lớp alias --tntam-* ở cuối file. Đổi thương hiệu về sau chỉ sửa lớp alias đó. * * KHÔNG hardcode màu, cỡ chữ hay khoảng cách ở bất kỳ file CSS nào khác. * * @package tntam-driving-theme */ /* ========================================================================== FONT — self-host, không nạp từ CDN ========================================================================== Bộ V3 gốc dùng @import từ Google Fonts. Đã bỏ hoàn toàn: học viên ở Vĩnh Long phần lớn vào bằng 4G, mỗi kết nối tới máy chủ ngoài là thêm một lần chờ DNS và bắt tay TLS. Chỉ giữ hai bộ ký tự latin và vietnamese. unicode-range khiến trình duyệt chỉ tải đúng file chứa ký tự đang dùng, nên trang tiếng Việt tải khoảng 32 KB cho mỗi độ đậm chứ không phải cả bộ. ========================================================================== */ @font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/be-vietnam-pro-400-vietnamese.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: 'Be Vietnam Pro'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/be-vietnam-pro-400-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/be-vietnam-pro-500-vietnamese.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: 'Be Vietnam Pro'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/be-vietnam-pro-500-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/be-vietnam-pro-600-vietnamese.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: 'Be Vietnam Pro'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/be-vietnam-pro-600-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/be-vietnam-pro-700-vietnamese.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: 'Be Vietnam Pro'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/be-vietnam-pro-700-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/be-vietnam-pro-800-vietnamese.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: 'Be Vietnam Pro'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/be-vietnam-pro-800-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/ibm-plex-mono-500-vietnamese.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: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/ibm-plex-mono-500-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/ibm-plex-mono-600-vietnamese.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: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/ibm-plex-mono-600-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ========================================================================== DESIGN TOKENS — nguyên văn từ bộ V3 ========================================================================== */ :root { /* ---- Colors ---- */ --navy-600: #0B2E63; --navy-700: #08234C; --navy-800: #061A38; --navy-100: #DCE4F1; --navy-50: #EEF2F8; --terra-500: #C85A2B; --terra-600: #A84621; --terra-700: #85351A; --terra-300: #E7905E; --terra-100: #F8DAC9; --terra-50: #FCEEE7; --neutral-0: #FFFFFF; --neutral-25: #FBFAF8; --neutral-50: #F5F3EF; --neutral-100: #EDEAE3; --neutral-200: #DDD8CD; --neutral-300: #C4BDAF; --neutral-500: #7D7364; --neutral-700: #423C33; --neutral-900: #171410; --success-500: #2E8B57; --success-100: #DFF0E5; --danger-500: #C43D3D; --warning-100: #F6E8CC; --warning-700: #8A5E0F; /* semantic aliases */ --bg-page: var(--neutral-25); --surface-card: var(--neutral-0); --surface-sunken: var(--neutral-100); --surface-brand: var(--navy-600); --surface-accent: var(--terra-500); --text-heading: var(--navy-800); --text-body: var(--neutral-700); --text-muted: var(--neutral-500); --text-on-brand: var(--neutral-0); --border-subtle: var(--neutral-200); --border-strong: var(--neutral-300); --border-brand: var(--navy-600); --action-primary: var(--terra-500); --action-primary-hover: var(--terra-600); --action-primary-active: var(--terra-700); /* ---- Fonts ---- */ --font-sans: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ---- Spacing (4px scale) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ---- Radius ---- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 999px; /* ---- Misc ---- */ --container-max: 1180px; --shadow-focus: 0 0 0 3px rgba(221, 111, 59, 0.35); --duration-fast: 120ms; --ease-out: cubic-bezier(0.2, 0.6, 0.3, 1); } /* ========================================================================== ALIAS THƯƠNG HIỆU — lớp duy nhất phải sửa khi đổi nhận diện ========================================================================== Component mới nên dùng nhóm --tntam-* này thay vì gọi thẳng --navy-600. Component sẵn có của bộ V3 giữ nguyên tên gốc, không đụng vào. ========================================================================== */ :root { --tntam-color-primary: var(--navy-600); --tntam-color-primary-dark: var(--navy-800); --tntam-color-accent: var(--terra-500); --tntam-color-accent-hover: var(--terra-600); --tntam-color-bg: var(--neutral-25); --tntam-color-surface: var(--neutral-0); --tntam-color-text: var(--neutral-700); --tntam-color-heading: var(--navy-800); --tntam-color-muted: var(--neutral-500); --tntam-color-border: var(--neutral-200); --tntam-color-success: var(--success-500); --tntam-color-danger: var(--danger-500); --tntam-font-sans: var(--font-sans); --tntam-font-mono: var(--font-mono); --tntam-radius-small: var(--radius-sm); --tntam-radius-medium: var(--radius-md); --tntam-border-width: 3px; --tntam-container: var(--container-max); /* * Độ rộng cột đọc. 760px ở cỡ chữ 16.5px cho khoảng 85–90 ký tự mỗi dòng — * mép trên của ngưỡng dễ đọc. Nới thêm là mắt bắt đầu nhảy nhầm dòng khi * xuống hàng. Lấy đúng con số của bộ V3, chỉ khác là gom về một token để * .article và .container--reading không lệch nhau. */ --tntam-reading-max: 760px; }