/* ================================================================ BỘ NHẬN DIỆN GAUUX — biến dùng chung Nguồn: design/brand/ (bộ token chính thức, 16/08/2026). Xem THUONG-HIEU.md. File này CHỈ chứa token và font. Không có layout, không có component — để mọi trang dùng chung mà không kéo theo kiểu của trang khác. Tỉ lệ 70·20·10: nhiều nền tối, một chút cam, rất ít gradient. Gradient CHỈ dùng cho thứ liên quan trực tiếp đến AI. ================================================================ */ /* ---------------- Font ---------------- MOT HO FONT CHO CA HE THONG — quyet dinh cua bo nhan dien (design/brand, 16/08/2026). Sau khi do sau ho font truc tiep tu file goc theo tam tieu chi co trong so, Inter thang 79,3/100 cho vai tro giao dien, ke sau chi 69,7. Khong ho nao vuot du xa de bu lai chi phi cua he hai ho font. Ban sac nam o BIEU TUONG, BO CUC va CAU CHU, khong o viec mua them mot bo chu. Inter la font BIEN THIEN hai truc: opsz 14-32 va wght 100-900. Mot file lam ca hai vai — chu giao dien (opsz thap: khe chu rong ra, net day len, song duoc o 13px) va tieu de (opsz cao: khe chu khep lai, tuong phan tang). Cung mo hinh Apple dung cho SF Pro Text / SF Pro Display. JetBrains Mono CHI dung cho MA DINH DANH — ma don, MST, ma van don, khoa API — noi doc nham 0/O hay 1/l la mat tien. TIEN THI KHONG: cot tien dung Inter voi `font-variant-numeric: tabular-nums`, no da xep thang cot san va hep hon mono 11% o cung co chu. Ba ho font cu da BO (Sora, Space Grotesk, Be Vietnam Pro) cung IBM Plex Mono. Bon ten bien cu thi GIU LAI — hon 120 cho trong style.css/phap-ly.css dang goi chung; nay chung deu tro ve mot ho, doi ten la 120 co hoi bo sot mot cho. Hai font tu host trong /assets/fonts, 4 file 123KB — xem scripts/tai-font.js. */ :root{ --font-hieu: var(--gx-font-sans); /* chu ky thuong hieu "gauux" */ --font-tieu-de:var(--gx-font-sans); /* tieu de — khac o opsz, khong khac ho */ --font-than: var(--gx-font-sans); /* than chu */ --font-so: var(--gx-font-sans); /* SO LIEU: Inter + tabular-nums */ --font-ma: var(--gx-font-mono); /* MA DINH DANH: JetBrains Mono */ --qt-font: var(--gx-font-sans); --qt-mono: var(--gx-font-mono); } /* ---------------- Thang chu ---------------- Ty le 1.25 (major third), lam tron ve luoi 4px. Chep tu bang "Type scale" cua design/brand/gauux-brand-guidelines.html, co test doi chieu. DAU TIENG VIET QUYET DINH CHIEU CAO DONG. Tieng Viet xep hai dau tren mot nguyen am; chieu cao dong mac dinh cua Latin thi cham nhau. So do tu chinh file Inter, khong phai uoc luong: than chu can 1.35 de khong cham, 1.60 la muc de chiu; bang du lieu 13-14px khong duoc xuong duoi 1.45; tieu de tu 28px tro len dung 1.20 va phai kiem tung dong co O O U E xem co bi cat khong. VIET HOA TOAN BO BI CAM trong tieng Viet: chu hoa co dau chong (O A O E) cao toi 1.105 em, vuot chinh phan tren cua Inter 13,6% — tuc bi cat. Moi ho font duoc thu deu hong y het nhau. Dung chu thuong dau cau. */ :root{ /* co chu / chieu cao dong / can nang / gian chu — theo tung vai */ --tx-display:60px; --tx-display-lh:1.03; --tx-display-w:800; --tx-display-ls:-.035em; --tx-h1:36px; --tx-h1-lh:1.17; --tx-h1-w:800; --tx-h1-ls:-.025em; --tx-h2:28px; --tx-h2-lh:1.21; --tx-h2-w:700; --tx-h2-ls:-.02em; --tx-h3:20px; --tx-h3-lh:1.3; --tx-h3-w:700; --tx-h3-ls:-.01em; --tx-body-l:18px; --tx-body-l-lh:1.6; --tx-body:16px; --tx-body-lh:1.6; --tx-nho:14px; --tx-nho-lh:1.5; --tx-nho-w:500; --tx-nhan:12px; --tx-nhan-lh:1.42; --tx-nhan-w:600; --tx-ma:13px; --tx-ma-lh:1.54; --tx-ma-w:500; } /* Ba luat duoi day la LUAT CUA FONT, khong phai bo cuc — nen chung nam trong file token nay chu khong o style.css, dung nhu bo token goc khai chung. `font-optical-sizing:auto` bat truc opsz chay theo co chu. Tieu de thi dat TAY, vi trinh duyet chi tu suy opsz theo co chu chu khong theo VAI TRO: mot tieu de 20px de tu dong se lay ban ve chu giao dien (khe rong, net mem) — dung cho o bang, sai cho tieu de. */ body{ font-optical-sizing:auto; } h1, h2{ font-variation-settings:'opsz' 32; } h3, h4{ font-variation-settings:'opsz' 28; } /* MA DINH DANH — ma don, MST, ma van don, khoa API. `tabular-nums` cho chu so xep thang cot; `slashed-zero` de 0 khong bi doc nham thanh O. */ .ma{ font-family:var(--font-ma); font-variant-numeric:tabular-nums slashed-zero; } /* SO LIEU (tien, so luong, phan tram) — Inter, KHONG mono. Cot tien bang mono rong hon 11% o cung co chu ma khong duoc them gi: Inter da co chu so xep thang cot san. */ .so{ font-variant-numeric:tabular-nums; } /* ---------------- "chuan SaaS quoc te" — Tong quan + Hoi thoai ---------------- Rieng cho hai man nay, KHONG theo [data-th] toi/sang: ban mau tham khao khong co ban toi, va hai man nay la MOT san pham rieng (se tach sang chat.gauux.com), khong bat buoc dung chung banner mau voi phan con lai cua ung dung. Cac man khac (Dao tao AI, Cai dat, Khieu nai...) chua dong bo — se lam o dot sau, ghi trong CLAUDE.md. */ :root{ /* Xanh: lay thang tu thang brand-* cua bo token chinh thuc */ --qt-g900:var(--gx-brand-900); --qt-g800:var(--gx-brand-800); --qt-g700:var(--gx-brand-700); --qt-g600:var(--gx-brand-600); --qt-g500:var(--gx-brand-500); --qt-g100:var(--gx-brand-100); --qt-g200:var(--gx-brand-200); /* Nen the KPI noi bat o man Tong quan — slate dam cua bo token, khong phai mot ma mau rieng. Khai o day vi style.css la cau noi, khong phai nguon mau. */ --qt-hero:var(--gx-neutral-800); --qt-g50:var(--gx-brand-50); --qt-g100-tx:#CFE8DB; /* chu nhat tren nen gradient toi cua sb-ai */ --qt-g100-vien:#C7EAD5; /* vien nhat cho khoi mau xanh la */ --qt-amber:var(--gx-warning); --qt-amber-bg:#FEF3E2; --qt-amber-chu:var(--gx-warning-text); /* dung khi amber lam MAU CHU */ --qt-red:var(--gx-error); --qt-red-bg:#FDECEC; --qt-red-chu:var(--gx-error-text); /* dung khi do lam MAU CHU */ --qt-blue:#2563EB; --qt-blue-bg:#EAF1FE; --qt-violet:#7C3AED; --qt-violet-bg:#F2ECFE; /* MOI MAU CO HAI VAI, VA HAI VAI DOI NGUOC NHAU KHI LAT TONG. `--qt-g700` vua la NEN nut chinh (chu trang de len tren) vua la MAU CHU cua 58 cho khac. O tong sang mot gia tri phuc vu duoc ca hai; o tong toi thi khong: nen xanh dam van dung, nhung chu xanh dam #146C43 dat len be mat #1B1726 chi con 2,3:1 — khong doc duoc. Nen tach lam hai token. O tong SANG chung bang nhau, tuc khong doi mot pixel nao; o tong toi chi ban `-chu` duoc lat sang bac nhat hon. Day la cach duy nhat lat duoc chu ma khong keo theo nen. */ --qt-g700-chu:var(--qt-g700); --qt-g800-chu:var(--qt-g800); --qt-g600-chu:var(--qt-g600); --qt-blue-chu:var(--qt-blue); --qt-violet-chu:var(--qt-violet); /* Trung tinh: dung DUNG token NGU NGHIA cua bo brand, khong tu chon bac. `text-strong` cho chu chinh, `text` cho chu phu, `text-muted` cho chu mo. */ --qt-ink:var(--gx-text-strong); --qt-ink2:var(--gx-neutral-600); --qt-ink3:var(--gx-text-muted); /* Mau chu THAN. Ban thiet ke (/giaodien) dung --text = #334155 = neutral-700, con app dat than bang --qt-ink = neutral-900 — chu app dam va toi hon o MOI man, va do la khac biet toan cuc lam hai ban nhin khong giong nhau du bo cuc da trung. Tieu de van dung --qt-ink. */ --qt-than:var(--gx-neutral-700); --qt-paper:var(--gx-background); --qt-white:var(--gx-surface); --qt-line:var(--gx-border); --qt-line2:var(--gx-neutral-100); --qt-r:10px; --qt-rlg:14px; --qt-kinh:rgba(255,255,255,.94); /* nen thanh tren, co lop mo kinh */ --qt-tren-hero:#FFFFFF; /* chu dat tren the `hero` — nen toi o CA HAI tong */ /* Chu dat tren MANG XANH DAC (nut chinh, huy hieu trang thai). Trang o ca hai tong: mang nen la `--qt-g700`, no toi o tong nao cung vay. Truoc day cho nay dung `--qt-white` — ma do la mot BE MAT, o tong toi thanh #1B1726 va chu tren nut xanh chi con 2,72:1. */ --qt-tren-xanh:#FFFFFF; --qt-sh:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06); --qt-sh-md:0 2px 4px -2px rgba(16,24,40,.06),0 4px 12px -4px rgba(16,24,40,.08); --qt-sh-lg:0 4px 10px -4px rgba(16,24,40,.08),0 12px 28px -8px rgba(16,24,40,.14); } /* ================================================================ BỘ TOKEN CHÍNH THỨC — chép NGUYÊN từ design/brand/gauux-tokens.css (bản chủ shop đẩy lên 16/08/2026). ĐỪNG sửa giá trị ở đây: sửa trong design/brand/ rồi chạy lại, có test đối chiếu từng giá trị. Vì sao chép vào chứ không @import: nginx phục vụ file này độc lập từ /var/www/gauux/css/, thêm một request nữa là thêm một thứ có thể thiếu khi deploy — mà thiếu file token thì cả trang mất màu. ================================================================ */ :root{ /* gauux design tokens v1.0 — generated from gauux-design-tokens.json */ /* brand */ --gx-brand-50: #EFF9F4; --gx-brand-100: #DEF2E8; --gx-brand-200: #B8E2CE; --gx-brand-300: #8BD0B0; --gx-brand-400: #58BC8D; --gx-brand-500: #20A567; --gx-brand-600: #198653; --gx-brand-700: #146C43; --gx-brand-800: #105434; --gx-brand-900: #0B3B25; /* neutral */ --gx-neutral-0: #FFFFFF; --gx-neutral-50: #F8F9FF; --gx-neutral-100: #F1F5F9; --gx-neutral-200: #E2E8F0; --gx-neutral-300: #CBD5E1; --gx-neutral-400: #94A3B8; --gx-neutral-500: #64748B; --gx-neutral-600: #475569; --gx-neutral-700: #334155; --gx-neutral-800: #1E293B; --gx-neutral-900: #0F172A; /* functional */ --gx-success: #16A34A; --gx-warning: #F59E0B; /* MAU CHU cho canh bao. #F59E0B la mau NEN/VIEN, khong phai mau chu: do that 27/08/2026 no chi dat 2,15:1 tren trang, 1,96:1 tren nen amber, 2,04:1 tren paper — truot AA ca ba. #92400E dat 7,09:1 va 6,46:1. */ --gx-warning-text: #92400E; --gx-error: #DC2626; /* MAU CHU cho loi. #DC2626 tren nen do nhat (#FDECEC) chi dat 4,23:1 — truot AA. #B42318 dat 5,76:1. Mau ho van la --gx-error. */ --gx-error-text: #B42318; --gx-info: #2563EB; /* semantic */ --gx-primary: var(--gx-brand-700); --gx-primary-hover: var(--gx-brand-600); --gx-primary-pressed: var(--gx-brand-800); --gx-accent: var(--gx-brand-500); --gx-surface: var(--gx-neutral-0); --gx-background: var(--gx-neutral-50); --gx-border: var(--gx-neutral-200); --gx-text: var(--gx-neutral-700); --gx-text-strong: var(--gx-neutral-900); --gx-text-muted: var(--gx-neutral-500); /* type */ --gx-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', 'Noto Sans', sans-serif; --gx-font-display: var(--gx-font-sans); /* cung ho font, khac opsz */ --gx-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; --gx-opsz-ui: 14; --gx-opsz-body: 20; --gx-opsz-heading: 28; --gx-opsz-display: 32; --gx-leading-body: 1.6; /* min 1.5 for Vietnamese; Inter collides below 1.35 */ --gx-leading-table: 1.5; --gx-leading-heading: 1.2; /* space */ --gx-space-1: 4px; --gx-space-2: 8px; --gx-space-3: 12px; --gx-space-4: 16px; --gx-space-6: 24px; --gx-space-8: 32px; --gx-space-12: 48px; --gx-space-16: 64px; --gx-space-24: 96px; /* radius */ --gx-radius-sm: 8px; --gx-radius-md: 12px; --gx-radius-lg: 16px; --gx-radius-xl: 24px; --gx-radius-full: 999px; /* elevation */ --gx-elevation-1: 0 1px 2px rgba(15,23,42,.06); --gx-elevation-2: 0 4px 16px rgba(15,23,42,.08); --gx-elevation-3: 0 16px 40px rgba(15,23,42,.12); /* motion */ --gx-duration-micro: 120ms; --gx-duration-standard: 180ms; --gx-duration-layer: 240ms; --gx-ease: cubic-bezier(0.2, 0, 0, 1); } /* ================================================================ TÔNG TỐI — mặc định, đúng bộ nhận diện Dùng cho trang công khai: trang chủ, pháp lý, đăng nhập. ================================================================ */ :root, [data-th="toi"]{ /* Bảng màu lấy ĐÚNG `design/gauux-toan-bo.html` — bản đặc tả chính. `BAT-DAU-TU-DAY.md`: "dùng thẳng bộ nhận diện trong gauux-toan-bo.html ngay từ đầu — đừng dựng bằng màu cũ rồi sơn lại." Đã có một vòng sai: file này từng bị kéo về #0D0C0A (ám nâu ấm) cho khớp `public/index.html`. Nhưng trang chủ mới là cái lệch — cả ba file v3 (toan-bo, menu-v3, khung-chat) đều dùng #0F0D15 ám tím. Nên trang chủ được sửa theo đây, không phải ngược lại. VẪN CHỈ MỘT BẢNG, và nó ở file này. */ /* MOT bang mau toi, khong phai hai. Ba ma duoi day tung la bang cu (obsidian `#0F0D15` am tim / onyx `#1B1726` / moon `#F4F2F7`), va vi mot so thanh phan van doc `--be-mat` chu khong doc `--qt-white`, tong toi hien ra hai be mat khac nhau canh nhau. Do that 28/08/2026: chu xanh #8BD0B0 dat 8,18 tren be mat moi nhung chi 4,49 tren be mat cu — TRUOT AA dung 0,01, va no truot o dung nhung man con dung be mat cu. Nay ca hai deu la thang slate cua bo nhan dien. MAU BONG BONG CHAT o khoi duoi KHONG doi: do la cho duy nhat mau mang thong tin, va no co test khoa. */ --obsidian:#0F172A; /* neutral 900 — xem chu thich o khoi [data-th="toi"] */ --onyx:#1E293B; /* neutral 800 — "Dark surfaces" cua bo nhan dien */ --orange:#FF6A00; --ember:#FFA361; --iris:#7B61FF; --aqua:#22D3C5; /* Vai LAM CHU cua hai mau tren — xem ghi chu o bang sang. */ --ember-chu:#FBC169; --aqua-chu:#5FD9C4; --moon:#FFFFFF; /* "Reversed white only" */ /* Xám ĐẶC, không phải trắng pha alpha. rgba(moon,.60) chồng lên nền tím ra một màu xỉn và trôi theo từng lớp nền đặt dưới nó — chữ trong ô nổi lại nhạt hơn chữ trên nền chính. Bản đặc tả khai màu đặc chính vì vậy. */ --ash:#CBD5E1; /* neutral 300 */ /* `--ash2` la CHU CHU THICH MO cua tong toi (`--chu-3` -> `--t2`), va no duoc dung o 567 cho tren 9 man do thu. Ban cu #6E687C chi dat 3,29:1 tren be mat #1B1726 — truot AA, tuc phan lon chu phu cua ca ung dung khong doc duoc o tong toi. Do that 27/08/2026, sau khi vá thanh tren xong moi lo ra phan duoi nay. #8F8A9E dat 5,26 / 4,79 / 5,78 tren ba bac be mat toi. Van la chu MO — no van nhat hon `--ash` (#9A94A8) mot chut, giu dung vai. */ --ash2:#94A3B8; /* neutral 400 */ --line:rgba(255,255,255,.09); --grad:linear-gradient(135deg,#FF6A00 0%,#7B61FF 52%,#22D3C5 100%); /* Đỏ báo lỗi — bộ nhận diện không có, chủ shop chốt #FF4D5E. Bắt buộc phải phân biệt được "guardrail chặn" với "cần chú ý". */ --do:#FF4D5E; /* Token theo vai trò — thứ giao diện thật cần, brand.html chưa có */ --nen:var(--obsidian); --be-mat:var(--onyx); --be-mat-2:#2A3648; /* nổi hơn một bậc: ô nhập, hàng hover */ --be-mat-3:#334155; /* nổi hai bậc: nền khung chat */ --chu:var(--moon); --chu-2:var(--ash); --chu-3:var(--ash2); /* chú thích mờ, placeholder */ --vien:var(--line); --vien-2:rgba(255,255,255,.17); /* viền rõ hơn: ô nhập, thẻ được chọn */ --cam-hover:#FF8229; /* orange 400 */ --cam-mo:rgba(255,106,0,.10); /* nền nhạt cho nhãn, vùng nhấn */ --iris-mo:rgba(123,97,255,.16); --aqua-mo:rgba(34,211,197,.14); --do-mo:rgba(255,77,94,.14); --ember-mo:rgba(255,163,97,.14); /* Chữ đặt TRÊN nền cam hoặc gradient. Bắt buộc là obsidian, không được trắng: trắng trên #FF6A00 chỉ đạt 2.87:1, trượt chuẩn. Obsidian đạt 6.72:1. brand.html ghi rõ điều này. */ --tren-cam:var(--obsidian); --bong:0 1px 2px rgba(0,0,0,.4); --bong-lon:0 18px 50px rgba(0,0,0,.55); --bong-cam:0 0 0 1px rgba(255,106,0,.45), 0 18px 50px rgba(255,106,0,.22); --r:10px; --r-lon:16px; } /* ================================================================ TÔNG SÁNG — cho ỨNG DỤNG (hộp thư, đơn hàng, đào tạo) Vì sao có: nhân viên trực chat ngồi nhìn 8 tiếng. Nền tối bão hoà cả ngày gây mỏi mắt. Trang công khai giữ tông tối theo bộ nhận diện; ứng dụng mặc định nền sáng, đổi được. Cam và aqua phải ĐẬM LẠI trên nền sáng, nếu không không đủ tương phản: #FF6A00 trên trắng = 2.9:1 -> trượt #B24A00 trên trắng = 5.9:1 -> đạt AA #22D3C5 trên trắng = 1.9:1 -> trượt nặng #0E8478 trên trắng = 4.8:1 -> đạt AA Nền nút vẫn giữ #FF6A00 nguyên bản với chữ obsidian — cặp đó đạt 6.72:1. ================================================================ */ [data-th="sang"]{ /* ================================================================ NỀN SÁNG — dựng lại theo lối các sản phẩm quốc tế (Stripe, Linear, Shopify Polaris). Ba điều đổi so với bản trước: 1. XƯƠNG SỐNG LÀ THANG TRUNG TÍNH, không phải màu thương hiệu. Bản trước không có thang xám nào, nên mọi thứ phải tô màu mới được thấy — đó là lý do giao diện đọc ra "nhiều màu mà không có trọng tâm". 2. MỘT MÀU NHẤN DUY NHẤT. Cam chỉ dùng cho hành động chính và mục đang chọn. Aqua thôi kiêm vai "màu của AI" — AI nhận diện bằng nền trắng viền rõ kèm chấm cam, không phải bằng bong bóng xanh ngọc. 3. MÀU TRẠNG THÁI HẠ BÃO HOÀ, tách khỏi màu nhấn, để trạng thái không tranh chỗ với nút bấm. Trung tính lệch TÍM nhạt (#17131F chứ không phải #000 hay nâu ấm): xám thuần đọc ra "chưa ai chọn màu này", còn nâu ấm #F8F7F4 của bản trước là tông kem đang bị dùng tràn lan. ================================================================ */ /* thang trung tính — 8 bậc, lệch tím rất nhẹ */ --n00:#FFFFFF; --n05:#FAFAFB; --n10:#F3F2F5; --n20:#E7E5EA; --n30:#D3D0D8; --n50:#8B8694; --n70:#57525F; --n99:#191622; --obsidian:var(--n99); --onyx:var(--n00); --moon:var(--n99); --ash:var(--n50); /* Nút hành động màu THAN, không phải cam. Giao diện này không ai ngoài đội nhìn thấy — khách chỉ thấy Messenger — nên nó không cần biểu đạt thương hiệu, nó cần nhân viên ngồi 8 tiếng không mỏi. Cam ở mọi nút là thứ gây mệt mà không đổi lại được gì. Cam #FF6A00 đo được 2,9:1 trên nền trắng: không đạt chuẩn cho chữ, buộc phải để chữ tối trên nút. Than đo được 15:1. CAM KHÔNG BỎ — nó đổi vai: thứ gì do MÁY sinh ra thì có chấm cam. Vì cả màn hình gần như không màu, một chấm cam là đủ để mắt bắt được ngay. */ --nhan-nut:#191622; --nhan-nut-chu:#FFFFFF; --nhan-nut-hover:#2A2535; /* màu nhấn duy nhất */ --orange:#FF6A00; --cam-hover:#E85F00; --cam-mo:rgba(255,106,0,.10); --tren-cam:var(--n99); /* cam + chữ trắng không đạt tương phản */ /* màu ngữ nghĩa — hạ bão hoà so với màu nhấn */ --aqua:#0B7A66; /* xong, an toàn */ --ember:#A96A00; /* cần chú ý */ /* CÙNG MỘT MÀU, HAI VAI — và vai làm CHỮ cần bậc đậm hơn. Hai giá trị trên đủ tương phản trên nền trắng, nhưng nhãn `.lb` đặt chữ đó lên chính màu đó pha loãng (`--ember-mo`), tức nền không còn trắng. Đo thật 27/08/2026 trên 8 màn: 3,67:1 và 4,37:1 — trượt AA, mà đây là nhãn trạng thái, thứ người ta liếc chứ không đọc kỹ. Bậc đậm hơn: 5,11:1 và 5,95:1 trên chính nền pill đó. */ --ember-chu:#8A5600; --aqua-chu:#0A6355; --do:#C0392E; /* bị chặn */ --iris:#5B45D6; /* người, không phải AI */ --aqua-mo:rgba(11,122,102,.10); --ember-mo:rgba(169,106,0,.11); --do-mo:rgba(192,57,46,.10); --iris-mo:rgba(91,69,214,.10); /* Nen trang lay tu BO TOKEN, khong lay `--n05` (#FAFAFB) cua dai xam nga tim cu — do 27/08/2026 tren ban chay ra rgb(250,250,251) trong khi ban thiet ke cua phong UX/UI khai #F8F9FF (66/70 man). Lech nho nhung no la mat nen cua MOI man, va dat canh cac mang slate khac thi thay ngay. */ --nen:var(--gx-neutral-50); /* Tong SANG lay dai trung tinh SLATE cua bo nhan dien 16/08/2026, khong dung lai dai `--n*` cu (xam nga tim). Hai ly do, ca hai deu do duoc: 1. `--n50` la #8B8694 tren nen trang chi dat 3,54:1 — TRUOT AA (can 4,5). No dang to cho nhan `.lb.l-n` va moi chu chu thich mo. 2. Bo nhan dien moi da chuyen trung tinh sang slate; de mot mau nga tim canh cac mau slate khac la nhin ra ngay, va do la thu chu shop bao "mau chua chuan". */ --be-mat:var(--gx-neutral-0); --be-mat-2:var(--gx-neutral-50); --be-mat-3:var(--gx-neutral-50); /* CHU THAN LA neutral-700, khong phai neutral-900. Day khong phai mot lua chon tham my — `design/brand/gauux-design-tokens.json` khai tuong minh `color.semantic.text = {color.neutral.700}`, con neutral-900 la `text-strong`, danh cho TIEU DE. Chu shop chot 28/08/2026: chuan la file thuong hieu. Truoc do ca ung dung dat than bang neutral-900, tuc chu dam va toi hon ban thiet ke o MOI man — mot khac biet toan cuc lam hai ban nhin khong giong nhau du bo cuc da trung. Ghi chu o dong ~131 da chi ra dieu nay tu truoc. Van thua chuan: #334155 dat 9,85:1 tren nen trang va 10,35:1 tren the trang, trong khi AA can 4,5 va AAA can 7. Tieu de van dung `--qt-ink`. */ --chu:var(--gx-neutral-700); --chu-2:var(--gx-neutral-600); --chu-3:var(--gx-neutral-500); /* Vien la MAU DAC #E2E8F0 cua bo token, khong phai den pha alpha. Hai ly do: ban thiet ke khai `1px solid #E2E8F0` o 66 man; va mot vien alpha troi theo tung lop nen dat duoi no — vien trong mot the noi lai dam hon vien tren nen chinh, du ca hai deu goi cung mot bien. Cung ly do bo token khai `--ash` la mau dac chu khong phai `rgba(moon,.60)`. */ --line:var(--gx-border); --vien:var(--gx-border); --vien-2:var(--gx-neutral-300); /* Gradient CHỈ còn một chỗ: khoảnh khắc nói về AI. Không rải khắp nơi. */ --grad:linear-gradient(135deg,#FF6A00 0%,#5B45D6 60%,#0B7A66 100%); /* Bóng đổ mảnh — bóng dày là dấu hiệu giao diện chưa chỉnh. */ --bong:0 1px 2px rgba(25,22,34,.06); --bong-lon:0 1px 2px rgba(25,22,34,.06), 0 10px 28px rgba(25,22,34,.07); --bong-cam:0 0 0 1px rgba(255,106,0,.30), 0 8px 22px rgba(255,106,0,.14); } /* ================================================================ Ý NGHĨA MÀU — ánh xạ từ hệ cũ, giữ nguyên nghĩa Đây là phần quan trọng nhất khi áp cho hộp thư: nhìn màu bong bóng phải biết ngay ai viết câu đó. Không phải trang trí — nhân viên cần nó khi truy lại một câu trả lời sai. ================================================================ */ :root, [data-th="toi"], [data-th="sang"]{ --y-nguoi:var(--iris); /* tin do NGƯỜI gửi */ --y-ai:var(--aqua); /* thứ do AI sinh ra */ --y-xong:var(--aqua); /* đã xong, đã gửi, an toàn */ --y-chu-y:var(--ember); /* cần chú ý, ghi chú nội bộ */ --y-chan:var(--do); /* bị chặn, phải chuyển người */ --y-chinh:var(--orange); /* nút chính */ } @media (prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important} } /* ================================================================ BONG BONG HOI THOAI Ba ben phai phan biet duoc o khoang cach mot sai tay: khach, AI, va nguoi. Do bang `node scripts/kiem-tuong-phan.js`. AI gui phan lon tin nen mau cua AI phai DIU — no chiem dien tich lon nhat man hinh. Nguoi gui thi hiem, va la luc dang can chu y nhat (mot nhan vien vua nhay vao doan chat), nen de nen DAM cho no dap vao mat. ================================================================ */ [data-th="toi"], :root{ /* Độ sáng tăng dần khách -> AI -> người: 0.013 · 0.074 · 0.113. Cùng lúc khác cả sắc (trung tính · ngọc · tím) và khác màu chữ. */ --bb-khach:#241F30; /* nổi hơn nền khung chat một bậc */ --bb-khach-chu:var(--moon); --bb-khach-vien:rgba(255,255,255,.08); --bb-ai:#17564E; /* ngọc vừa: nằm GIỮA khách và người */ --bb-ai-chu:#E6FBF8; --bb-ai-vien:rgba(34,211,197,.34); --bb-nguoi:#5B45D6; /* tím đậm, đập vào mắt */ --bb-nguoi-chu:#F4F2F7; --bb-nguoi-vien:#6B57E0; --thr-nen:var(--nen); } /* Tong SANG di theo bo nhan dien XANH LA (design/ui-kit, doi 07/08/2026): mau nhan la xanh rung g-700 #146C43, khong con cam. Trang tren #146C43 dat ~6.4:1 (AA) — do bang scripts/kiem-tuong-phan.js truoc khi doi. Tong TOI van giu cam: cac cap tuong phan cua no do theo cam, va tong toi gio chi la lua chon phu (phim T), khong phai mac dinh. */ [data-th="sang"]{ --orange:#146C43; --y-chinh:#146C43; --cam-hover:#0F5132; --cam-mo:rgba(20,108,67,.10); --tren-cam:#FFFFFF; --bong-cam:0 0 0 1px rgba(20,108,67,.30), 0 8px 22px rgba(20,108,67,.14); /* Nut chinh cua cac man cu cung ve xanh kit — ban sang cu de nut den muc (#191622), dat canh cac man kit nut xanh la hai kieu nut trong mot app */ --nhan-nut:#146C43; --nhan-nut-chu:#FFFFFF; --nhan-nut-hover:#0F5132; } /* Tong TOI cung di theo bo nhan dien XANH LA. Truoc 28/08/2026 khoi tren ghi "Tong TOI van giu cam" — dung o thoi diem do (tong toi la lua chon phu, va bo nhan dien cu lay cam lam mau nhan). Nay bo nhan dien moi lay xanh la lam mau nhan o CA HAI tong, nen giu cam o tong toi la de ung dung mang hai thuong hieu: sang thi xanh la, toi thi cam. Bac mau lay tu chinh bo nhan dien: Emerald 500 `#20A567` la o "Accent on dark" trong bang tuong phan cua no (4,62 tren nen 800). CHU tren mang xanh do phai la INK chu khong phai trang: trang tren #20A567 chi dat 3,16 — bo nhan dien ghi ro "Large text only". Ink `#0F172A` dat 5,64. Chieu nguoc voi tong sang, va do la dung: o tong sang mang xanh la #146C43 dam hon nen trang moi doc duoc (6,45). */ [data-th="toi"]{ --orange:#20A567; --y-chinh:#20A567; --cam-hover:#58BC8D; /* brand 400 — tong toi thi hover SANG len */ --cam-mo:rgba(32,165,103,.16); --tren-cam:#0F172A; --bong-cam:0 0 0 1px rgba(32,165,103,.40), 0 8px 22px rgba(32,165,103,.16); --nhan-nut:#20A567; --nhan-nut-chu:#0F172A; --nhan-nut-hover:#58BC8D; } [data-th="sang"]{ /* Khách: nền xám nhạt. AI: nền TRẮNG viền rõ — phân biệt bằng ĐỘ ĐẬM NỀN chứ không bằng độ chói. Bong bóng bão hoà hai bên là dấu hiệu quen thuộc của giao diện chat tự làm; nhãn nhỏ kèm chấm cam mới là thứ nói ai viết. Người thật vẫn giữ tím — đây là chỗ duy nhất màu mang thông tin. */ --bb-khach:var(--n10); --bb-khach-chu:var(--chu); --bb-khach-vien:rgba(25,22,34,.09); --bb-ai:var(--n00); --bb-ai-chu:var(--chu); --bb-ai-vien:rgba(25,22,34,.16); --bb-nguoi:rgba(91,69,214,.11); --bb-nguoi-chu:#2E2270; --bb-nguoi-vien:rgba(91,69,214,.34); --thr-nen:var(--n05); } /* ================================================================ THANG ĐO — theo khung Shopify Polaris Vì sao mượn khung của Polaris: gauux đúng là một trang quản trị thương mại (đơn hàng, khách, sản phẩm, tồn kho) — cùng loại đối tượng và cùng loại thao tác mà Polaris sinh ra để phục vụ. Mượn khung nghĩa là mượn CÁCH ĐO: thang khoảng cách, bán kính, cỡ chữ, và bốn vai màu trạng thái. KHÔNG mượn màu của họ. Cam #FF6A00 giữ nguyên làm màu nhấn — lấy cả bảng màu thì gauux thành bản sao Shopify. Có thang sẵn thì mọi tranh luận "chỗ này thưa hay dày" đều có chỗ tra, thay vì phụ thuộc cảm tính từng lần. ================================================================ */ :root, [data-th="toi"], [data-th="sang"]{ /* khoảng cách — bội số của 4 */ --kc-1:4px; --kc-2:8px; --kc-3:12px; --kc-4:16px; --kc-5:20px; --kc-6:24px; --kc-8:32px; --kc-10:40px; --kc-12:48px; /* bán kính */ --bk-1:4px; --bk-2:8px; --bk-3:12px; --bk-4:16px; --bk-tron:99px; /* cỡ chữ */ --cc-1:11px; --cc-2:12px; --cc-3:13px; --cc-4:14px; --cc-5:16px; --cc-6:20px; --cc-7:24px; } /* ================================================================ TÔNG TỐI — BỘ `--qt-*` LẬT ĐỦ BA TẦNG Vì sao phải là một khối chứ không phải vài dòng: `--qt-*` được ánh xạ MỘT LẦN ở `:root` sang `--gx-*`, mà `--gx-*` chỉ có bản sáng. Nên trước khối này tông tối vẫn lấy chữ #0F172A đặt lên nền #1B1726 — 15 nhóm chữ trượt AA, chỗ tệ nhất 1,02:1. ĐÃ THỬ VÁ NỬA VỜI VÀ NÓ TỆ HƠN: lật riêng nhóm chữ thì số nhóm trượt tăng 15 → 34, vì các mảng nền nhạt (`--gx-brand-50`, `--qt-amber-bg`, các bề mặt trắng) vẫn là bản sáng — chữ sáng rơi lên nền sáng. Ba tầng phải lật CÙNG NHAU, đó là lý do khối này khai đủ cả ba chứ không chỉ phần chữ: 1. CHỮ — ink / ink2 / ink3 / than, và các `-chu` 2. BỀ MẶT — white / paper / line / line2 / hero 3. MẢNG NHẠT — g50 / g100 / g200 và bốn nền trạng thái *-bg `[data-th="toi"]` và `:root` cùng độ đặc hiệu (0,1,0) vì `data-th` đặt trên chính ``. Nên khối này BẮT BUỘC nằm SAU khối `:root` khai `--qt-*` (dòng ~96) — đổi thứ tự là nó thua và tông tối im lặng quay về màu sáng. Số đo: xem `scripts/quet-man.js --th toi`. ================================================================ */ [data-th="toi"]{ /* ==== TÔNG TỐI DỰNG TỪ CHÍNH BỘ NHẬN DIỆN MỚI ==================== Trước 28/08/2026 khối này chạy bảng màu của bộ nhận diện CŨ — nền obsidian `#0F0D15` ám tím, điểm nhấn cam `#FF6A00` · iris `#7B61FF` · aqua `#22D3C5`. Tức bật tông tối là ứng dụng đổi sang một thương hiệu khác hẳn: sáng thì trắng–slate–xanh lá, tối thì tím–cam–ngọc. Phòng thiết kế **chưa vẽ tông tối bao giờ** — cả 118 bản `.dc.html` đều chỉ có tông sáng. Nhưng `design/brand/gauux-brand-guidelines.html` thì nói rõ cách dùng nền tối, và đó là nguồn: · neutral 800 `#1E293B` — "Dark surfaces" · neutral 900 `#0F172A` — "Headings, figures" · Trắng trên neutral 800 = 14,63 (AAA) — "Reversed panels" · Emerald 500 trên neutral 800 = 4,62 (AA) — "Accent on dark" · Logo trên nền tối: "Reversed white only" Số 14,63 tính lại đúng tới hai chữ số, nên bảng của bộ nhận diện là bảng đang dùng ở đây, không phải một dải tự nghĩ. Đo bằng `node scripts/quet-man.js --th toi`. */ /* --- Tầng 1: CHỮ --- Trắng chứ không phải một xám sáng tự chọn: bộ nhận diện khai thẳng "Reversed white only" cho nền tối, và cặp trắng/neutral-800 là cặp DUY NHẤT nó đưa số. */ --qt-ink:#FFFFFF; --qt-than:#E2E8F0; /* neutral 200 — 11,87 trên bề mặt */ --qt-ink2:#CBD5E1; /* neutral 300 — 9,85 */ --qt-ink3:#94A3B8; /* neutral 400 — 5,71 / 4,76 trên bậc nổi */ /* Chữ mang màu — bậc NHẠT của cùng dải, không phải cùng mã với nền sáng. Xanh lá: bộ nhận diện cho Emerald 500 (#20A567) đạt 4,62 trên nền tối — đủ AA nhưng sát sàn, và chữ nhỏ thì không còn dư địa. Nên chữ dùng bậc 300 (#8BD0B0 = 8,18), còn 500 để cho MẢNG và viền. Đo trên #1E293B. */ --qt-g700-chu:#8BD0B0; --qt-g800-chu:#B8E2CE; --qt-g600-chu:#8BD0B0; --qt-amber-chu:#FCD34D; /* 10,15 */ --qt-red-chu:#FCA5A5; /* 7,71 */ --qt-blue-chu:#93C5FD; /* 8,11 */ --qt-violet-chu:#C4B5FD; /* 7,92 */ --qt-g100-tx:#B8E2CE; --qt-g200:#8BD0B0; /* --- Tầng 2: BỀ MẶT — ba bậc, tất cả trên thang slate của bộ nhận diện --- Bậc nổi là `#2A3648`, nằm giữa neutral 800 và 700 chứ không phải 700 đúng bằng. Lý do đo được: `--qt-ink3` (neutral 400) trên 700 chỉ đạt 4,04 — trượt AA, mà nó là màu chú thích dùng ở hàng trăm chỗ. Trên `#2A3648` nó đạt 4,76. Một bậc nền không được chọn cho đẹp rồi để chữ đứng trên nó trượt chuẩn. */ --qt-paper:#0F172A; /* neutral 900 — nền trang */ --qt-white:#1E293B; /* neutral 800 — "Dark surfaces" */ --qt-hero:#2A3648; /* bậc nổi: ô nhập, hàng hover, thẻ hero */ --qt-line:rgba(255,255,255,.11); --qt-line2:rgba(255,255,255,.07); --qt-kinh:rgba(30,41,59,.92); /* thanh trên mờ kính — nền 800 + alpha */ /* `--qt-tren-hero` KHONG khai lai o day: the hero toi o ca hai tong, nen chu tren no la trang o ca hai. Khai lai chi de tao co hoi lech. */ /* --- Tầng 3: MẢNG MÀU NHẠT --- Ở tông sáng chúng là màu pha rất nhạt trên trắng. Ở tông tối phải là màu pha rất nhạt trên TỐI — tức alpha thấp của chính màu đó, không phải cùng mã hex. Dùng alpha chứ không hex đặc để chúng chồng đúng lên bất kỳ bậc bề mặt nào nằm dưới. */ --qt-g50:rgba(32,165,103,.13); --qt-g100:rgba(32,165,103,.20); --qt-g100-vien:rgba(32,165,103,.34); --qt-amber-bg:rgba(245,158,11,.17); --qt-red-bg:rgba(220,38,38,.20); --qt-blue-bg:rgba(37,99,235,.22); --qt-violet-bg:rgba(124,58,237,.24); /* Bóng đổ ở tông tối phải ĐẬM hơn, không nhạt hơn: bóng xám nhạt trên nền tối không nhìn thấy gì, tức mọi thẻ mất luôn ranh giới nổi. */ --qt-sh:0 1px 2px rgba(0,0,0,.5); --qt-sh-md:0 2px 4px -2px rgba(0,0,0,.5),0 4px 12px -4px rgba(0,0,0,.55); --qt-sh-lg:0 4px 10px -4px rgba(0,0,0,.55),0 12px 28px -8px rgba(0,0,0,.6); }