/* ================================================================ BỘ NHẬN DIỆN GAUUX — biến dùng chung Nguồn: design/brand.html. 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 ---------------- Sora KHÔNG có bộ ký tự tiếng Việt — không có dải U+1EA0-1EF9, tức là thiếu ạ ả ấ ầ ệ ộ ừ... Đặt Sora cho tiêu đề tiếng Việt thì chữ thường một font, dấu rơi sang font dự phòng, nhìn vỡ. Nên: Sora chỉ dùng cho chữ ký thương hiệu "GAUUX" (toàn chữ Latin). Tiêu đề tiếng Việt dùng Space Grotesk, có đủ dấu. Ba font tự host trong /assets/fonts — xem scripts/tai-font.js. */ :root{ --font-hieu: 'Sora', 'Space Grotesk', system-ui, sans-serif; --font-tieu-de:'Space Grotesk', 'Be Vietnam Pro', system-ui, sans-serif; --font-than: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-so: 'Space Grotesk', ui-monospace, SFMono-Regular, Menlo, monospace; /* Dung rieng cho man Tong quan va Hoi thoai (public/app/, xem TQ_/HT_* trong app.js) — mau tham khao tu file HTML that gauux.com.html/chat.gauux.com.html chu shop gui. Font khac han bo con lai (Inter/IBM Plex Mono thay vi Be Vietnam Pro/Space Grotesk), nen tach token rieng thay vi doi --font-than/--font-so va lam lech moi man khac chua dung toi bo nay. */ --qt-font: 'Inter', 'Be Vietnam Pro', system-ui, sans-serif; --qt-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } /* ---------------- "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{ --qt-g900:#0B3B2E; --qt-g800:#0F5132; --qt-g700:#146C43; --qt-g600:#198754; --qt-g500:#20A567; --qt-g100:#E7F6ED; --qt-g50:#F2FAF5; --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:#D97706; --qt-amber-bg:#FEF3E2; --qt-red:#DC2626; --qt-red-bg:#FDECEC; --qt-blue:#2563EB; --qt-blue-bg:#EAF1FE; --qt-violet:#7C3AED; --qt-violet-bg:#F2ECFE; --qt-ink:#16181D; --qt-ink2:#4B5361; --qt-ink3:#8A93A3; --qt-paper:#F5F6F8; --qt-white:#FFFFFF; --qt-line:#E7E9EE; --qt-line2:#EFF1F4; --qt-r:10px; --qt-rlg:14px; --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); } /* ================================================================ 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. */ --obsidian:#0F0D15; --onyx:#1B1726; --orange:#FF6A00; --ember:#FFA361; --iris:#7B61FF; --aqua:#22D3C5; --moon:#F4F2F7; /* 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:#9A94A8; --ash2:#6E687C; --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:#241F30; /* nổi hơn một bậc: ô nhập, hàng hover */ --be-mat-3:#2E2840; /* 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ú ý */ --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:var(--n05); --be-mat:var(--n00); --be-mat-2:var(--n10); --be-mat-3:var(--n10); --chu:var(--n99); --chu-2:var(--n70); --chu-3:var(--n50); --line:rgba(25,22,34,.09); --vien:rgba(25,22,34,.09); --vien-2:rgba(25,22,34,.16); /* 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); } [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; }