/* ========================================================================== THẦN SỐ — TẦNG TOKEN (RF-30) -------------------------------------------------------------------------- Nguồn DUY NHẤT của biến CSS dùng trong ứng dụng: bảng màu ngữ nghĩa, màu phân loại (--cat-*, --wx-*), phông, cỡ chữ, khoảng cách — cho cả theme sáng (mặc định) lẫn tối (@media prefers-color-scheme: dark). Nạp TRƯỚC app.css (index.html). app.css/report.css chỉ còn luật thành phần. KHÔNG áp cho poster (infographic.css) và thẻ HTML xuất (infographic-html.css): hai tệp đó tự chứa token riêng vì phải chạy độc lập (EX-02/EX-03). ========================================================================== */ /* ------------------------------------------------- SỔ BREAKPOINT (RF-31) --- CSS không cho dùng var() trong @media, nên mốc không thể là token. Sổ dưới đây là nguồn đối chiếu DUY NHẤT: test/smoke.mjs đọc dòng `BREAKPOINTS:` và đỏ nếu app.css/report.css dùng một mốc px KHÔNG có trong sổ. Thêm mốc mới = thêm vào sổ kèm lý do. Mốc theo NỘI DUNG, không ép về một thang chung — đổi mốc là đổi bố cục ở dải chiều rộng đó (cổng G9 đo reflow). BREAKPOINTS: 860 820 720 680 640 520 860 app.css — lưới .dual/.trio (2–3 cột) → 1 cột 820 report.css — báo cáo HTML: lưới 2 cột, Lo Thư, danh sách chỉ số → 1 cột; Đại Vận 2 cột 720 app.css — hàng so sánh tab Tương hợp (nhãn · A · B · ghi chú) → 1 cột 680 report.css — reflow bảng thành thẻ (BD-21 · SKILL §5.6); dạng `max-width:679.98px` / `min-width:680px` để hai nhánh không chồng nhau. JS khớp mốc này: render-html.js `collapseBlocks()` (gập khối từ #4 trên mobile, BD-23). 640 app.css — điện thoại: nav hàng 2 → dropdown, 4 trụ → 2 cột, modal Markdown toàn màn hình 520 app.css — điện thoại nhỏ: nút về đầu trang chỉ còn icon, dải hồ sơ xuống dòng ------------------------------------------------------------------------- */ /* ---------------------------------------------------------------- tokens */ :root{ /* ================================================================== HỆ TOKEN NGỮ NGHĨA — Phương án A (Dark-Teal Anchored — nền đọc sáng, neo tối) ------------------------------------------------------------------ Cấu trúc theo §2 và §22 của BIDV_AI_Color_UIUX_Design_Guidelines v3.1. Tên token đặt theo NGỮ NGHĨA (vai trò), không theo thị giác (§22). Lý do từng giá trị: critical/Hy3.bidv-color-audit-2026-09-19.md. ================================================================== */ /* --- Tier A — Official BIDV brand (neo thương hiệu) --- */ --brand-emerald:#006B68; /* BIDV_EMERALD — hằng số Tier A. CHỈ dùng để định nghĩa token khác hoặc cho nhánh in. KHÔNG bao giờ đặt trực tiếp làm màu chữ/viền. */ /* Màu NHẤN đã ứng dụng (chữ, viền, icon). Tách khỏi --brand-emerald để đổi được theo theme: trên nền tối #006B68 chỉ đạt 2.82 (< 4.5) — xem critical/Hy3 §6.1 và kiểm chứng render test/_render-check.mjs. */ --accent-emerald:#006B68; --brand-gold:#FDB71A; /* BIDV_GOLD — accent; KHÔNG dùng làm chữ trên nền sáng */ /* --- Tier B — BIDV UI derived --- */ --ui-teal-900:#004441; --ui-teal-800:#005956; --ui-teal-500:#168784; /* §6.1: chỉ large text / đồ họa */ --ui-teal-100:#DCEFED; --ui-teal-50:#F2F9F8; --brand-gold-light:#FFF4D6; /* UI_GOLD_700 (§1.1 d.54): sắc "vàng" DÙNG ĐƯỢC LÀM CHỮ trên nền sáng. #FDB71A trên #F3F6F5 chỉ 1,61 — cấm làm chữ (§2.4 rule 2). #8A6100 đạt 5,09 trên #F3F6F5 · 5,54 trên trắng · 5,53 trên #F2F9F8 (§1.1 bảng d.94/263). Dùng cho SỐ/NHÃN nhấn kiểu vàng trên nền sáng; KHÔNG thay #FDB71A làm fill. Bổ sung theo điều kiện (5) của EX-05 — trước đây token này còn thiếu. */ --ui-gold-700:#8A6100; /* --- Tier C — Neutrals --- */ --text-primary:#172321; --text-secondary:#465452; --text-muted:#5E6E6C; --border:#DDE4E2; /* BORDER_STRONG (§1.1 d.66) = #7A8A87 (3.61 trên trắng, 3.32 trên #F3F6F5). Trước đây app dùng #7F8F8C cho LIGHT nhưng #7A8A87 cho DARK (d.1404) — hai scheme lệch nhau không lý do. BD-32: hợp nhất về giá trị chuẩn của SKILL. (Lịch sử: bản #A7B5B2 chỉ đạt 2.12 → không đạt ≥3:1.) */ --ui-border-strong:#7A8A87; /* --- Tier C — Surfaces --- */ /* NỀN TRANG = DARK-TEAL ANCHORED (D1 = A, quyết định 04/10/2026, xem docs/BRAND-EXCEPTIONS.md EX-01). §2.4: vùng đọc là nền SÁNG #F3F6F5; nền tối #004441 CHỈ ở 3 neo (navbar/hero/footer). Chữ mặc định mực tối #172321 trên nền sáng. Đích Anchored: dark ≤30% · vùng đọc 55–70% · emerald ≤10% · gold 3–7%. */ --bg-page:#F3F6F5; --bg-card:#FFFFFF; --bg-surface:#F3F6F5; --bg-input:#FFFFFF; --bg-teal-50:#F2F9F8; --bg-teal-100:#DCEFED; /* BD-20 · sọc zebra hàng bảng (§9.5). Tách RIÊNG khỏi --bg-teal-50 vì ở dark mode --bg-teal-50 trùng --bg-card (#162422) → sọc vô hình. Token riêng để mỗi theme chọn được một sắc thật sự khác nền bảng: sáng: #F2F9F8 trên nền bảng trắng (26 đơn vị RGB) tối : #1E3231 trên nền bảng #162422 (đậm hơn, thấy rõ) */ --row-zebra:#F2F9F8; --track:#E8EEEC; --tint-good:#E6F4EC; --tint-good-border:#C2E3D2; --tint-warn:#FDF1E6; --tint-warn-border:#F2D8BC; --tint-error:#FCEBE8; --tint-error-border:#F3CEC7; --tint-info:#EDF3FA; --tint-info-border:#CFDFF2; /* --- Chữ/viền đặt TRỰC TIẾP trên nền emerald (số đo §6.2) --- */ --text-on-brand:#FFFFFF; /* 6.36 trên #006B68 */ --text-on-brand-muted:#DCEFED; /* 5.33 trên #006B68 */ /* §3.3: viền nút ghost trên nền brand — alpha ≥.55 (3.05 trên #006B68, 4.47 trên #004441). Alpha .30 chỉ đạt 1.88 — KHÔNG đạt, đã đo lại bằng test/bidv-gates.mjs. */ --border-on-brand:rgba(255,255,255,.55); --navbar-bg:#004441; /* dải cấu trúc §9.3 — hợp lệ theo Area cap */ --navbar-fg:#DCEFED; /* 9.25 trên #004441 */ --navbar-fg-active:#FDB71A; /* gold trên #004441 = 6.29 — đúng §9.3 */ /* --- Tier D — Semantic (§8) --- */ --status-success:#16805C; --status-success-text:#0F5C40; /* bản tối hơn, dùng trên nền tint */ /* §1.1 d.75: trên NỀN TỐI (§7 bảng success) dùng bản sáng #5FCE94 (≥5.64). Không dùng #16805C trên nền tối — quá tối. Token tách để BD-32 gom hex ra khỏi luật thành phần. */ --status-success-on-dark:#5FCE94; --status-warning-fill:#D99A00; /* CHỈ kèm chữ tối */ --status-warning-text:#B45309; --status-error:#C74634; --status-error-text:#A33224; /* bản tối hơn, dùng trên nền tint */ --status-info:#2B6CB0; --status-neutral:#879492; /* chỉ đồ họa */ /* --- Định danh dữ liệu (đã đo: >=4.5 làm chữ trên trắng, >=3 làm fill, >=4.5 khi đặt chữ trắng lên — xem critical/Hy3 §7.4) --- */ --cat-teal:#0F6E56; /* GHI CHÚ BD-68 (giữ nguyên #2E7D4F / #8A6A1F — ĐÃ THỬ ĐỔI VÀ HOÀN NGUYÊN): Hai hue này chỉ đạt 4,23 trên --bg-teal-100 (#DCEFED) nếu dùng làm CHỮ. Đã thử đậm hoá thành #2B7549 / #856419 (đạt 4,70 / 4,59) nhưng phải HOÀN NGUYÊN vì `--wx-wood`/`--wx-earth` trỏ tới chúng, mà infographic.css đang ĐÓNG BĂNG (EX-02/D2) vẫn giữ literal cũ #2E7D4F / #8A6A1F → cổng G1 (token liên-tệp) đỏ. Kiểm lại DOM thật: KHÔNG có chữ --cat-* nào nằm trên --bg-teal-100 (ô .index-tile chỉ có .it-label/.it-value/.it-name; LoShu không dùng màu ngũ hành) ⇒ cặp đó là GIẢ ĐỊNH, không xảy ra. Vì vậy không đổi token và không thêm cặp giả vào test. Chuyện THẬT cần chặn là chữ ngũ hành (--wx-*) nằm trong dòng .current và dòng zebra của bảng Đại Vận: · dòng .current → ghim bằng --current-row-ink (rule `tr.current [style*="--wx-"]`); · dòng zebra → nền --row-zebra #1E3231, xử lý bằng --cat-red bản tối (xem khối dark mode) + cặp test --cat-* × --row-zebra. */ --cat-green:#2E7D4F; --cat-ochre:#8A6A1F; --cat-red:#B03A2E; --cat-blue:#2C6ABA; --cat-purple:#6A4C93; --cat-slate:#4A5568; --cat-rose:#A03A6B; --cat-ink:#FFFFFF; /* chữ đặt trên nền --cat-* */ /* --- Tương tác --- */ --focus-ring:#006B68; /* TÁCH khỏi trạng thái "đang chọn" (dùng gold) — §9.1. Dùng trên nền SÁNG: 5.85 trên #F3F6F5, 6.36 trên trắng. */ /* §3.3: trên nền brand/tối vòng focus phải là TRẮNG. #006B68 trên #006B68 = 1.00 (vô hình) và trên #004441 = 1.74 — đã đo bằng cổng G3 (test/bidv-gates.mjs). Trắng: 6.36 trên emerald, 11.03 trên #004441. */ --focus-ring-on-brand:#FFFFFF; /* --- Liên kết (§4.3) — link trong văn bản PHẢI có gạch chân, không chỉ dựa vào màu: người mù màu đỏ-lục không phân biệt được link với chữ thường nếu khác nhau mỗi màu. Cổng G10 (test/bidv-gates.mjs) kiểm cả hai vế: chữ ≥ 4,5 VÀ link trong câu (display:inline) có gạch chân. Bộ ba token có ĐÚNG hai ngữ cảnh nền, không thừa token nào: --link* → nền sáng (đổi theo dark mode) --link-on-brand* → nền brand/tối (KHÔNG đổi — nền brand tối ở cả 2 chế độ) */ --link:#006B68; --link-hover:#005956; /* hover = ĐẬM hơn trên nền sáng */ --link-visited:#4A5568; --link-on-brand:#4DBDB6; /* 4,87 trên #004441 · 7,09 trên #162422 */ --link-on-brand-hover:#DCEFED; --link-on-brand-visited:#A7B5B2; --focus-glow:rgba(0,107,104,.16); /* quầng sáng quanh input khi focus */ --seg-divider:rgba(23,35,33,.25); /* vạch chia giữa các đoạn timeline */ --disabled-bg:#F3F6F5; /* BD-03 · sàn vùng chạm (SKILL §5.1/§8, WCAG 2.5.5 AAA = 44×44). Token hoá để mọi thành phần tương tác dùng CHUNG một con số; đổi ở đây là đổi hết. */ --hit:44px; /* Nút disabled (§5.1/§9.1) — phải phân biệt bằng >=2 dấu hiệu. Bộ token dưới đây giữ ĐÚNG HUE của §5.1 (#879492 / #A7B5B2 / #FFF4D6) nhưng chia hai vai trò rõ ràng: · --disabled-hue-* : HUE §5.1, dùng cho NỀN / VIỀN / dấu hiệu hình khối; · --disabled-text : mực CHỮ, phải ĐỌC ĐƯỢC vì nút disabled của app còn HIỂN THỊ THÔNG TIN ("Còn 32 câu", "Đang tính…"). Lý do tách: #879492 trên #F3F6F5 chỉ 2,89 và #A7B5B2 chỉ 1,95 — đủ để "trông mờ" nhưng KHÔNG đọc nổi. WCAG 1.4.3 miễn trừ thành phần không hoạt động, nhưng ở đây chữ mang thông tin nên vẫn phải đạt 4,5 → mực dùng --text-muted (#5E6E6C, 4,92). Dấu hiệu thứ hai (viền đứt + con trỏ) là hình khối, không cần tương phản chữ. Đo bằng test/contrast.mjs. */ --disabled-hue-primary:#879492; /* §5.1: nền/viền nút Primary disabled */ --disabled-hue-secondary:#A7B5B2; /* §5.1: viền + chữ nút Secondary disabled */ --disabled-gold-bg:#FFF4D6; /* §5.1: nền CTA gold disabled */ --disabled-text:var(--text-muted); --ink-on-tint:#004441; /* mực đậm đặt trên nền nhạt (chip, gold) */ /* Dòng "hiện tại" của bảng (§5.5 · BD-24) — BA token theo vai trò. Bản sáng = gold nhạt + vạch gold + mực teal-900; bản tối ghi đè ở khối @media (prefers-color-scheme: dark). Tách token để rule không hardcode màu và để test/contrast.mjs đọc được cặp (mực, nền) qua token. */ --current-row-bg:#FFF4D6; --current-row-bar:var(--brand-gold); --current-row-ink:#004441; /* #004441 trên #FFF4D6 = 10,07 */ /* --- Ngũ hành: giữ 5 hue riêng, không ánh xạ sang màu thương hiệu (§10.4) --- */ --wx-wood:var(--cat-green); --wx-fire:var(--cat-red); --wx-earth:var(--cat-ochre); --wx-metal:var(--cat-slate); --wx-water:var(--cat-blue); /* --- DISC: định danh, không phải semantic --- */ --disc-d:var(--cat-red); --disc-i:var(--cat-ochre); --disc-s:var(--cat-green); --disc-c:var(--cat-blue); /* --- hình khối --- */ --radius:14px; --radius-lg:18px; --shadow:0 10px 30px rgba(23,35,33,.10); --shadow-sm:0 1px 2px rgba(23,35,33,.05),0 4px 14px rgba(23,35,33,.06); --border-line:1px solid var(--border); --border-steel:1px solid var(--ui-border-strong); /* TS-150: đổi Fraunces + Inter → Be Vietnam Pro (một họ dùng chung cho cả tiêu đề lẫn nội dung, phân biệt bằng độ đậm) — xem ghi chú đầy đủ về lý do đổi (lỗi hiển thị dấu tiếng Việt) tại khối @font-face trong index.html. */ --font-display:"Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body:"Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono:"Space Mono", ui-monospace, "Cascadia Mono", monospace; /* --- Thang cỡ chữ (SKILL §4.1) --- Thang chính thức: 12 / 14 / 16 (body) / 18 / 20 / 24 / 30 / 36 px. SÀN CỨNG 12px — "không chữ đọc nào <12px". Cổng G5 (test/bidv-gates.mjs) đo mọi text node trên DOM thật và báo mọi cỡ < --fs-2xs. Token hoá sàn để mọi nhãn/meta nhỏ nhất dùng CHUNG một con số; đổi ở đây là đổi hết. --fs-2xs = sàn nhãn/meta nhỏ nhất (thay cho 9,5–11,5px trước đây) --fs-xs = meta phụ (thay cho 12,5px đã dùng rời rạc) --fs-body = thân bài, ≥16px theo §4.1 */ --fs-2xs:12px; --fs-xs:12.5px; --fs-body:16px; } /* ========================================================================== DARK MODE (tuỳ chọn) — §14 của chuẩn BIDV -------------------------------------------------------------------------- §14 hợp thức hoá nền tối như một BIẾN THỂ cho người dùng chọn, KHÔNG phải scheme mặc định. Mặc định của ứng dụng là nền sáng chủ đạo (§4.1) vì đây là sản phẩm web — xem critical/Hy3.bidv-color-audit-2026-09-19.md §7.1. §14 định nghĩa nền/chữ/nhấn/border nhưng KHÔNG đưa giá trị semantic. Dùng thẳng Tier D của §8 lên #0E1918 thì success 3.65, warning 3.57, error 3.72, info 3.31 — đều dưới 4.5. Bộ dưới đây là bản TỰ SÁNG HOÁ đã đo lại, và là phần DUY NHẤT của hệ token nằm ngoài tài liệu chuẩn (§6.2 của bản rà soát). ========================================================================== */ @media (prefers-color-scheme: dark){ :root{ /* §14 — nền/chữ/border */ --text-primary:#DCEFED; --text-secondary:#DCEFED; /* §7: meta/phụ trợ trên nền tối — sáng hơn #A8BDB9, >=7 trên #162422 */ --text-muted:#A7B5B2; /* §7: chú thích — sáng hơn #8FA39A */ --border:#30413F; /* §7: viền mạnh #7A8A87 — đo thực tế ~4,35 trên #0E1918, ~3,97 trên #162422, ~3,6 trên #1E3231 (đều >=3:1 affordance input §9.4). #30413F chỉ 1,67 nên KHÔNG dùng làm border mạnh. */ --ui-border-strong:#7A8A87; --bg-page:#0E1918; --bg-card:#162422; --bg-surface:#162422; --bg-input:#0E1918; --bg-teal-50:#162422; --bg-teal-100:#1E3231; --row-zebra:#1E3231; /* BD-20: sọc zebra phải KHÁC --bg-card (#162422) */ --track:#243433; --tint-good:#16302A; --tint-good-border:#2A5148; --tint-warn:#33260F; --tint-warn-border:#5C4520; --tint-error:#33201D; --tint-error-border:#5E3630; --tint-info:#152634; --tint-info-border:#2C4A66; /* §14 đặt accent #168784, nhưng trên #0E1918 chỉ đạt 4.13 (< 4.5) → chỉ dùng được cho đồ họa. Chữ/nhấn cần bản sáng hơn. #2AA39C đủ trên nền trang/card NHƯNG chỉ 4.38 trên --bg-teal-100 tối (#1E3231) — đúng nơi .index-tile.active .it-value và .rp-tag đặt chữ accent. #31ACA5 đạt >=4.87 trên MỌI nền tối của hệ (mục F verify_new.py). */ --accent-emerald:#31ACA5; --focus-glow:rgba(49,172,165,.30); --seg-divider:rgba(220,239,237,.20); --focus-ring:#31ACA5; /* §7: trên nền dark mode, link là #4DBDB6 và focus ring là TRẮNG. Không ghi đè --link ở đây thì #006B68 rơi xuống thẻ tối #162422 (≈2.0). --link-hover cũng PHẢI ghi đè: nếu để nguyên #005956 thì hover tối đi còn ~1,5 — chữ gần như biến mất. Trên nền tối hover phải SÁNG hơn. */ --link:#4DBDB6; --link-hover:#DCEFED; --link-visited:#A7B5B2; --focus-ring-on-brand:#FFFFFF; --status-success:#5FCE94; /* §7 on-dark brighter */ --status-success-text:#5FCE94; --status-warning-fill:#D99A00; --status-warning-text:#F59A57; /* §7 on-dark brighter */ --status-error:#FF8A7A; /* §7 on-dark brighter */ --status-error-text:#F5A091; --status-info:#7BB3F0; /* §7 on-dark brighter */ --status-neutral:#879492; /* BD-68: --cat-red bản tối nâng #E2705F → #E67A69. ĐO THẬT (axe, dark/Tứ Trụ): chữ ngũ hành "Hỏa" trong bảng Đại Vận nằm ở dòng zebra có nền --row-zebra = #1E3231 (bản tối), nơi #E2705F chỉ đạt 4,32 < 4,5. #E67A69 đạt 4,73 trên #1E3231 · 5,61 trên #162422 · 6,28 trên #0E1918 — cùng hue §5.1, chỉ sáng hơn. Lưu ý: --cat-green/--cat-ochre KHÔNG đổi (xem chú thích ở :root) vì chúng không hề nằm trên #1E3231. */ --cat-teal:#3FA88A; --cat-green:#5FBE85; --cat-ochre:#C7A24E; --cat-red:#E67A69; --cat-blue:#6BA8E8; --cat-purple:#A98BD6; --cat-slate:#93A2BC; --cat-rose:#DE7BA8; --cat-ink:#0E1918; --disabled-bg:#1E3231; --disabled-text:var(--text-muted); /* #8FA39A trên #1E3231 = 5.06 */ --ink-on-tint:#DCEFED; /* §5.5 "Web dark mode": dòng hiện tại KHÔNG dùng gold — dùng nền chọn #1E3231 + vạch trái #4DBDB6, mực sáng. Nếu giữ gold nhạt thì mọi mực của bản tối (sáng màu) rơi xuống nền vàng nhạt, tương phản ~1,1. */ --current-row-bg:#1E3231; --current-row-bar:#4DBDB6; --current-row-ink:#DCEFED; /* #DCEFED trên #1E3231 = 11,32 */ --shadow:0 10px 30px rgba(0,0,0,.5); --shadow-sm:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.35); } }