/* ============================================================================= The Legation Times — TOKEN Nơi DUY NHẤT khai giá trị. site.css và mọi nội dung dán vào trang đều đọc từ đây. VÌ SAO CÓ TỆP NÀY (đo ngày 04/09/2026 trên site.css bản 1.9.8) · Bảy màu của tờ báo được khai ở `:root`, nhưng riêng màu đồng #9A7B4F còn được GÕ THẲNG 20 lần trong cùng tệp ấy. Đổi màu thương hiệu nghĩa là sửa 21 chỗ và chỗ thứ 21 sẽ bị bỏ sót. · 24 mã màu thật sự được dùng, trong khi chỉ 7 mã có tên. Mười bảy sắc độ còn lại — #2a3340, #39424f, #C6A46E, #F1EBDD… — không ai gọi tên được nên mỗi lần cần lại pha một mã mới. · Bản chào đối tác khai LẠI đúng bảy màu ấy trong khối `.tltp` của nó, kèm một tầng tên thứ hai (`--fg`, `--bg`, `--rule`). Hai bảng giá trị trùng khít nhưng sửa bên này không lan sang bên kia. BA LUẬT, VI PHẠM LÀ HỎNG DẦN 1. Mã màu chỉ được viết Ở ĐÂY. Trong site.css và trong nội dung trang, màu luôn gọi qua `var(--…)`. Thấy một mã `#` trong quy tắc CSS nghĩa là có thứ vừa lọt ra. 2. Nội dung dán vào trang dùng TÊN THEO VAI TRÒ (`--fg`, `--bg`, `--rule`, `--accent`), không dùng tên nguyên bản (`--ink`, `--cream`). Vai trò đổi được mà không phải đổi màu. 3. Lớp CSS của một khối nội dung dán vào phải mang tiền tố riêng. Ngày 04/09/2026 năm tên lớp của theme — `sec`, `sec__head`, `card`, `hl`, `tblwrap` — trùng với bản chào đối tác và làm hỏng bố cục ba mục trên trang thương mại đang chạy. THANG CỠ CHỮ đã áp ngày 04/09/2026 sau khi chủ site duyệt: 28 cỡ px gom còn 9 bậc, 16 mức giãn chữ gom còn 5. Tổng cộng 167 khai báo trong site.css đổi sang gọi token, chỗ dịch nhiều nhất là 2px. Ba khai báo giữ nguyên vì là cỡ hiển thị chứ không thuộc thang chữ đọc: 30px, 31px và .32em. Bảng gom nằm trong `docs/DESIGN-SYSTEM.md`. ============================================================================= */ :root{ /* --- Bảy màu nguyên bản của tờ báo ------------------------------------- */ --ink:#16202E; /* mực — chữ chính, nền đảo */ --cream:#F7F3EA; /* kem — chữ trên nền đảo */ --paper:#FBF9F3; /* giấy — nền trang */ --grey:#6B6A63; /* xám ấm — chữ phụ */ --slate:#6B7076; /* xám lạnh — nhãn mờ, ngày tháng, dòng nguồn. ĐỔI 06/09/2026 từ #9AA0A8. Lý do: 22 trong 23 chỗ dùng nó là CHỮ trên nền sáng, và ở đó #9AA0A8 chỉ đạt 2,50:1 — trượt WCAG AA cả ngưỡng chữ lớn. #6B7076 đạt 4,74:1. Giữ nguyên sắc xám lạnh, chỉ hạ độ sáng. Chỗ duy nhất trên nền tối là .foot__meta, đã chuyển sang --slate-soft để không bị tối đi trên nền mực. */ --line:#D9D3C6; /* đường kẻ */ --brass:#9A7B4F; /* đồng — màu nhấn của tờ báo */ /* --- Sắc độ của mực ----------------------------------------------------- */ --ink-deep:#0d1620; /* đậm hơn mực, dùng cho dải nền tối nhất */ --ink-soft:#2a3340; /* trùng đúng --ink-soft mà bản chào đối tác đã đặt */ --ink-muted:#39424f; /* chữ dẫn, chữ mô tả — 10 chỗ trong site.css */ --ink-faint:#5c6470; /* --- Sắc độ trung tính -------------------------------------------------- */ --slate-soft:#98A0AC; --slate-pale:#cfd3d8; --white:#fff; /* --- Sắc độ giấy -------------------------------------------------------- */ --paper-warm:#FBF9F4; --cream-deep:#F1EBDD; --cream-warm:#f4ede0; /* --- Sắc độ đồng -------------------------------------------------------- */ --brass-light:#C6A46E; --brass-soft:#C8A87A; --brass-text:#856A44; /* đồng ĐỦ TỐI ĐỂ LÀM CHỮ trên nền sáng — 4,82:1 trên giấy, 4,58:1 trên kem. Thêm 06/09/2026. VÌ SAO KHÔNG ĐỔI THẲNG --brass: --brass #9A7B4F còn làm đường kẻ, viền, nền nhãn và outline ở 26 chỗ. Làm tối nó là đổi cả những chỗ đó, mà chúng không phải chữ nên không chịu ngưỡng AA. Tách hai vai: --brass giữ nguyên cho trang trí, --brass-text dành cho chữ. ĐỪNG dùng --brass-text trên nền tối: ở đó nó chỉ đạt 3,24:1, thấp hơn cả --brass. Chữ đồng trên nền mực thì dùng --brass-soft (7,29:1). */ /* đồng nhạt của bản chào đối tác — KHÁC --brass-light, đừng gộp hai cái. #C8A87A ấm và sáng hơn #C6A46E; bản chào dùng 10 chỗ, site.css dùng --brass-light đúng 1 chỗ (.foot__nav a:hover). Đưa vào đây ngày 05/09/2026 để bản chào thôi tự khai. */ --brass-mid:#b3711f; --brass-deep:#8a5a00; --brass-dark:#7a4b12; --highlight:#FFF3D6; /* nền đánh dấu */ /* --- Cảnh báo ----------------------------------------------------------- */ --alert:#b32d2e; --alert-deep:#a23; /* --- Thành phần RGB để pha trong suốt ---------------------------------- Viết `rgba(var(--brass-rgb),.14)` thay vì gõ lại bộ ba 154,123,79. Trước bản này bộ ba của đồng được gõ tay ba lần và bộ ba của kem hai lần. */ --ink-rgb:22,32,46; --cream-rgb:247,243,234; --brass-rgb:154,123,79; /* --- Biểu đồ — thêm 06/09/2026 ------------------------------------------ TLT tự định vị là ấn phẩm "dữ liệu và thị trường B2B" mà trước đây không có màu biểu đồ nào; người vẽ biểu đồ đầu tiên sẽ phải tự pha. Mượn KHUNG của Prosperous Intelligence (--c-* và --sc-*), nhưng GIÁ TRỊ ở lại trong thương hiệu: TLT là xanh thuần, nhấn đồng — không mượn xanh lá, đỏ gạch của PI. Phân loại: 5 màu, hai họ sắc (mực lạnh · đồng ấm) × độ sáng. ⛔ ĐO NGÀY 06/09/2026 — LUẬT LIỀN KỀ: WCAG 1.4.11 đòi 3:1 giữa hai mảng đồ hoạ cạnh nhau. Trong bảng này CHỈ --chart-1 (mực) đạt 3:1 với mọi màu khác; bốn màu còn lại đứng cạnh nhau chỉ 1,17–2,22. Đây là giới hạn của thương hiệu xanh thuần + đồng, không phải lỗi chọn màu — không có năm sắc trong hai họ này mà phân biệt được. Hệ quả bắt buộc (sửa 06/09 theo phản biện Codex — luật viền không phụ thuộc thứ tự dữ liệu, đáng tin hơn luật đếm mảng, nhất là với stacked chart và bản đồ): · MỌI mảng tô sáng (--chart-2..5) có viền 2px --ink, luôn luôn, không chờ tới chuỗi thứ ba. · Từ chuỗi thứ ba trở đi thêm hoa văn (gạch chéo, chấm) hoặc small multiples. · Luôn có nhãn trực tiếp trên mảng; không bao giờ chỉ dựa vào chú giải màu. · --chart-4 và --chart-5 trên nền giấy chỉ 2,14 và 2,51 — mảng tô bằng hai màu này PHẢI có viền --ink, nếu không tan vào nền. · --score-alert (#b32d2e) trên nền mực chỉ 2,60 — chỉ dùng trên nền sáng. */ --chart-1:var(--ink); /* mực đậm */ --chart-2:var(--brass); /* đồng */ --chart-3:var(--slate); /* xám lạnh */ --chart-4:var(--brass-soft); /* đồng nhạt */ --chart-5:var(--slate-soft); /* xám lạnh nhạt */ --chart-grid:var(--line); /* lưới */ --chart-axis:var(--grey); /* trục và nhãn trục — 5,16:1 trên giấy */ /* Tuần tự: một đại lượng từ thấp tới cao, năm bậc trên một trục mực. */ --seq-1:var(--slate-soft); --seq-2:var(--ink-faint); --seq-3:var(--ink-muted); --seq-4:var(--ink); --seq-5:var(--ink-deep); /* Thang điểm — đọc từ nhãn, KHÔNG CHỈ từ màu (độc giả mù màu vẫn phải đọc được). */ --score-high:var(--ink); --score-mid:var(--brass); --score-low:var(--slate); --score-alert:var(--alert); /* #b32d2e — mã đỏ duy nhất của tờ báo, chỉ cho cảnh báo. CHỈ TRÊN NỀN SÁNG (5,99:1). Trên nền mực chỉ 2,60 — ở đó dùng --cream kèm gạch chân hoặc biểu tượng, không dùng màu này. */ /* --- Tên theo vai trò --------------------------------------------------- Đây là bộ mà NỘI DUNG DÁN VÀO TRANG phải dùng. Cùng tên với bộ mà bản chào đối tác đã tự đặt, nên hai bên nói chung một thứ tiếng thay vì hai. */ --fg:var(--ink); --fg-2:var(--ink-soft); /* #2A3340. Edward chốt 05/09/2026: lấy sắc của bản chào đối tác, bỏ --ink-muted (#39424f) khỏi vai trò này. Nhờ vậy khối .tltp thôi phải đè, và hai bảng token hết chỗ nào nói khác nhau. Chạm 3 quy tắc site.css — .progmot, .progbang__lede, .tltf__dongy label — đều là chữ phụ, và đổi theo hướng ĐẬM hơn nên tương phản tăng. --ink-muted vẫn dùng nguyên 10 chỗ khác, không bỏ. */ --fg-3:var(--grey); --bg:var(--paper); --bg-2:var(--cream); --bg-inverse:var(--ink); --fg-inverse:var(--cream); --rule:var(--line); --accent:var(--brass); /* --- Chữ ---------------------------------------------------------------- Georgia ĐÃ BỎ khỏi chuỗi dự phòng: nó không có glyph cho nguyên âm hai dấu của tiếng Việt (ố ồ ế ề ầ ắ) nên vẽ thành chữ nền + dấu trôi — đo được ầ rộng 43,8px so với à 23,8px. Với font-display:swap, mỗi lần tải nguội độc giả thấy tiêu đề vỡ dấu cho tới khi Spectral về. Cambria và Times New Roman đều vẽ đúng một glyph. */ --serif:'Spectral',Cambria,'Times New Roman',serif; /* MỌI tiêu đề — chốt 27/07/2026 */ --body:'Lora',Cambria,'Times New Roman',serif; /* nội dung — chốt 24/07/2026 */ --sans:'Lora',Cambria,'Times New Roman',serif; /* nhãn/UI dùng chung Lora để giữ đúng cặp 2 font */ --display:'Spectral',Cambria,'Times New Roman',serif; /* header chrome — Spectral */ /* --- Thang cỡ chữ — ĐƠN VỊ rem TỪ 06/09/2026 ------------------------------ Edward chốt luật đơn vị theo làn: web rem · ấn phẩm pt · mạng xã hội px. rem co theo cỡ chữ mặc định người đọc đặt trong trình duyệt; độc giả TLT phần đông trên 45 tuổi, là nhóm hay chỉnh cỡ chữ nhất. Gốc là 16px của trình duyệt — html KHÔNG đặt font-size, đừng bao giờ đặt, nếu không cả thang trượt. Bốn bậc nhỏ nhất nắn từ nửa pixel lên số tròn để rem còn đọc được: 10,5→11, 11,5→12, 12,5→13, 13,5→14. Dịch nhiều nhất nửa pixel, và đều TO LÊN. Đợt 04/09 đã chấp nhận dịch tới 2px nên mức này nằm gọn trong tiền lệ. Lịch sử: Trước ngày 04/09/2026, site.css khai 122 lần `font-size` với 28 cỡ px khác nhau, nhiều cỡ chỉ hơn kém nhau nửa pixel: 9,5 · 10 · 10,5 · 11 · 11,5 · 12 · 12,5 · 13 · 13,5 · 14 · 14,5 · 15 · 15,5 · 16 · 16,5 · 17 · 18 · 19 · 19,5 · 20 · 21 · 22 · 23 · 25 · 26 · 27 · 30 · 31. Đó không phải thang mà là dấu vết của việc nhích từng nửa pixel qua nhiều lần sửa. Chín bậc dưới đây gom 119 trong số 122 khai báo ấy. Chỗ dịch nhiều nhất là 2px, rơi vào sáu quy tắc chữ mô tả (16px lên 18px, tức bằng đúng cỡ thân bài). Ba khai báo còn lại — 30px, 31px và các `clamp()` của tiêu đề trang — giữ nguyên vì chúng là cỡ hiển thị, không thuộc thang chữ đọc. */ --fs-micro:.6875rem; /* 11px — nhích +0,5 */ /* nhãn nhỏ nhất */ --fs-label:.75rem; /* 12px — nhích +0,5 */ /* nhãn, kicker */ --fs-meta:.8125rem; /* 13px — nhích +0,5 */ /* ngày tháng, chú thích */ --fs-small:.875rem; /* 14px — nhích +0,5 */ /* chữ phụ */ --fs-base:.9375rem; /* 15px */ /* chữ trong thẻ */ --fs-body:1.125rem; /* 18px */ /* nội dung bài, đoạn mô tả */ --fs-lead:1.25rem; /* 20px */ /* đoạn dẫn */ --fs-title:1.375rem; /* 22px */ /* tiêu đề khối */ --fs-display:1.625rem; /* 26px */ /* tiêu đề thẻ lớn */ /* --- Thang giãn chữ ------------------------------------------------------ Từ 16 mức xuống 5. Hai mức giữ riêng: `--ls-tight` là phép siết tiêu đề lớn, còn .32em là cách trình bày riêng của bìa bản chào — cả hai không thuộc thang. */ --ls-tight:-.01em; --ls-1:.03em; --ls-2:.06em; --ls-3:.10em; --ls-4:.16em; --ls-5:.22em; /* --- Bề ngang ------------------------------------------------------------ */ --maxw:1120px; /* khung ngoài cùng */ --measure:66ch; /* bề ngang tối đa của một cột chữ đọc được */ --gut:clamp(20px,5vw,44px); /* lề trong của bản chào đối tác — trước 05/09/2026 chỉ khai trong khối .tltp, dùng 1 chỗ. */ }