/* ============================================================================ TOKEN BAN THIET KE — gauux, goi ban giao 83 man (v1.0 · 29/09/2026). ==================== TEP NAY LA GI ==================== Khoi `:root` thu nhat duoi day la BAN CHEP NGUYEN VAN cua `/opt/gauux-handoff/tokens.css`. Khong sua mot gia tri nao trong do. Muon doi mau thi doi o goi ban giao roi chep lai, khong sua tay o day — sua tay la kho nay va ban ve lech nhau, va khong ai biet ben nao dung. Khoi `:root` thu hai la LOP BAC CAU: nhung ten cu (`--gx-neutral-500`, `--gx-primary`…) duoc tro sang gia tri moi. Nho no, `nen.css` va `v2.css` dang goi ten cu VAN CHAY va tu ăn bang mau moi — khong phai sua 300 cho. ==================== VI SAO KHONG SUA `thuong-hieu.css` ==================== `thuong-hieu.css` dung chung cho CA ban cu (`/app/index.html`) lan ban moi (`/app/v2.html`). Tam ten bien trung nhau nhung KHAC GIA TRI (do 29/09/2026): --gx-brand-100 #DEF2E8 -> #DCEFE5 --gx-text #334155 -> #0F172A --gx-brand-300 #8BD0B0 -> #9FD4B9 --gx-info #2563EB -> #1D4ED8 --gx-brand-900 #0B3B25 -> #0F2A1D --gx-radius-sm 8px -> 6px --gx-radius-md 12px -> 10px --gx-radius-lg 16px -> 12px Ghi de thang vao `thuong-hieu.css` la doi mau ca ban cu — rieng `--gx-brand-100` di qua bi danh `--qt-g100` toi 41 cho, va `--gx-neutral-500` di qua `--qt-ink3` toi 241 cho. Tep nay CHI duoc nap boi `v2.html`. `index.html` khong nap no, nen ban cu khong doi mot pixel — chan bang VIEC TACH TRANG chu khong bang giao uoc. Co phep kiem khoa dieu do (`test/nen-giao-dien.test.js`). ========================================================================== */ /* ----------------------------------------------------------------------- 1. BAN CHEP NGUYEN VAN — /opt/gauux-handoff/tokens.css ----------------------------------------------------------------------- */ /* gauux design tokens — nguồn duy nhất. Mọi màn chỉ dùng các biến này. Tương phản đã kiểm (WCAG 2.1 AA): --gx-text-2 trên mọi nền sáng ≥ 4,5:1. */ :root { /* Thương hiệu */ --gx-brand: #146C43; /* nút chính, liên kết, mục đang chọn — trắng trên nền này 6,45:1 */ --gx-brand-hover: #0E5233; --gx-brand-50: #EFF9F4; /* nền mục đang chọn, hàng đang chọn */ --gx-brand-100: #DCEFE5; --gx-brand-300: #9FD4B9; /* chỉ cho biểu đồ / trang trí, KHÔNG làm nền chữ #5B6B80 */ --gx-brand-900: #0F2A1D; /* thẻ tối (doanh thu AI, gói cước) */ --gx-on-dark-2: #BFE3CF; /* chữ phụ trên nền tối */ --gx-dot: #58BC8D; /* Chữ & nền */ --gx-text: #0F172A; --gx-text-strong-2: #334155; --gx-text-3: #475569; --gx-text-2: #5B6B80; /* chữ phụ — tối thiểu. KHÔNG dùng #94A3B8 cho chữ */ --gx-icon-muted: #94A3B8; /* chỉ icon/viền trang trí */ --gx-border: #E2E8F0; --gx-border-subtle: #F1F5F9; --gx-fill: #EEF2F6; /* khung xương, nền vô hiệu */ --gx-bg: #F8F9FF; --gx-surface: #FFFFFF; /* Trạng thái */ --gx-warn-bg: #FEF3E2; --gx-warn-border: #F5C58A; --gx-warn: #9A3F0A; --gx-warn-strong: #7A2E05; --gx-danger: #B42318; --gx-danger-bg: #FDECEA; --gx-danger-border: #F4B4AD; --gx-info: #1D4ED8; --gx-info-bg: #EFF4FF; --gx-info-border: #C7D7FE; /* dùng cho Kiểm thử (chat thử) */ /* Chữ */ --gx-font: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; --gx-font-mono: "JetBrains Mono", ui-monospace, monospace; /* mã đơn, SKU, phiên bản */ --gx-fs-page: 24px; --gx-fw-page: 700; --gx-fs-card: 15px; --gx-fw-card: 600; --gx-fs-body: 14px; --gx-fs-table: 13px; --gx-fs-min: 12px; /* tối thiểu mọi nơi */ --gx-fs-input-mobile: 16px; /* dưới mức này iOS tự phóng to */ /* Khoảng cách, bo góc, bóng */ --gx-space-1: 4px; --gx-space-2: 8px; --gx-space-3: 12px; --gx-space-4: 16px; --gx-space-5: 20px; --gx-space-6: 24px; --gx-space-7: 28px; --gx-radius-sm: 6px; --gx-radius: 8px; --gx-radius-md: 10px; --gx-radius-lg: 12px; --gx-radius-pill: 999px; --gx-shadow-1: 0 1px 2px rgba(15,23,42,.04); --gx-shadow-2: 0 2px 6px rgba(15,23,42,.06); --gx-shadow-3: 0 6px 16px rgba(15,23,42,.08); --gx-shadow-4: 0 12px 32px rgba(15,23,42,.18); --gx-shadow-5: 0 24px 48px rgba(15,23,42,.24); /* Bố cục */ --gx-breakpoint: 900px; /* < 900: vỏ VÀ nội dung đều sang chế độ điện thoại */ --gx-sidebar-w: 236px; --gx-topbar-h: 60px; --gx-thanh-duoi-h: 76px; /* thanh 5 tab dien thoai — ban ve TabBar.dc.html */ --gx-control-h: 36px; /* máy tính */ --gx-target-mobile: 44px; /* vùng bấm tối thiểu điện thoại/máy tính bảng */ --gx-focus: 0 0 0 2px #FFFFFF, 0 0 0 4px #146C43; /* vòng focus: 2px brand, cách 2px */ } /* ----------------------------------------------------------------------- 2. LOP BAC CAU — ten cu tro sang gia tri moi Moi dong duoi day la MOT phep doi ten, khong phai mot mau moi. Khong khai mot ma mau nao o khoi nay: neu can mau thi no da co ten o khoi tren. Cot phai ghi mau CU de nguoi doc thay minh dang doi cai gi. ----------------------------------------------------------------------- */ :root { /* Thang xam cu -> vai tro moi. `--gx-neutral-500` la cho quan trong nhat trong tep nay: no di qua `--gx-text-muted` toi khap cac man, va mau cu #64748B chi dat 4,76:1 tren nen trang — duoi nguong AA 4,5:1 khi chu duoi 18px dam. Ban thiet ke doi sang #5B6B80 (5,18:1) chinh vi vay. Doi MOT dong o day la ca ban moi dat. */ --gx-neutral-0: var(--gx-surface); /* #FFFFFF — khong doi */ --gx-neutral-50: var(--gx-bg); /* #F8F9FF — khong doi */ --gx-neutral-100: var(--gx-border-subtle);/* #F1F5F9 — khong doi */ --gx-neutral-200: var(--gx-border); /* #E2E8F0 — khong doi */ --gx-neutral-300: var(--gx-icon-muted); /* #CBD5E1 -> #94A3B8 (ngoai bang mau) */ --gx-neutral-400: var(--gx-icon-muted); /* #94A3B8 — khong doi. CHI icon/vien */ --gx-neutral-500: var(--gx-text-2); /* #64748B -> #5B6B80 (dat 4,5:1) */ --gx-neutral-600: var(--gx-text-3); /* #475569 — khong doi */ --gx-neutral-700: var(--gx-text-strong-2);/* #334155 — khong doi */ --gx-neutral-800: var(--gx-text); /* #1E293B -> #0F172A (ngoai bang mau) */ --gx-neutral-900: var(--gx-text); /* #0F172A — khong doi */ /* Thang brand cu. Ban ve chi giu 5 bac; cac bac con lai quy ve bac gan nhat CO TRONG BANG MAU — mot mau ngoai bang la mot lan `off` cua cong cu do. */ --gx-brand-200: var(--gx-brand-100); /* #B8E2CE -> #DCEFE5 */ --gx-brand-400: var(--gx-dot); /* #58BC8D — khong doi */ --gx-brand-500: var(--gx-brand); /* #20A567 -> #146C43 */ --gx-brand-600: var(--gx-brand); /* #198653 -> #146C43 */ --gx-brand-700: var(--gx-brand); /* #146C43 — khong doi */ --gx-brand-800: var(--gx-brand-hover); /* #105434 -> #0E5233 */ /* Vai tro cu */ --gx-primary: var(--gx-brand); --gx-primary-hover: var(--gx-brand-hover); --gx-primary-pressed: var(--gx-brand-900); --gx-accent: var(--gx-brand); --gx-background: var(--gx-bg); --gx-text-strong: var(--gx-text); --gx-text-muted: var(--gx-text-2); /* Trang thai cu -> bo moi. Luu y `--gx-warning`/`--gx-error` cu la mau TUOI (#F59E0B, #DC2626) dung lam nen; ban ve khong co hai mau do, va ca hai deu truot tuong phan khi lam chu. Quy ve ban DAM, dung duoc ca hai vai. */ --gx-success: var(--gx-brand); --gx-warning: var(--gx-warn); --gx-warning-text: var(--gx-warn); --gx-error: var(--gx-danger); --gx-error-text: var(--gx-danger); /* Chip trung tinh + ba cap nen/vien nhat: `nen.css` truoc day tu khai sau ma mau vi `thuong-hieu.css` khong co. Nay ban ve co du, nen chung thanh bi danh va `nen.css` khong con khai mau nao nua. */ --gx-chip-nen: var(--gx-fill); /* #EEF0EF -> #EEF2F6 */ --gx-chip-chu: var(--gx-text-3); /* #3A413D -> #475569 */ --gx-cho-nen: var(--gx-warn-bg); /* #FDF1E1 -> #FEF3E2 */ --gx-cho-vien: var(--gx-warn-border); /* #F5D9B0 -> #F5C58A */ --gx-tin-nen: var(--gx-info-bg); /* #E8EFF8 -> #EFF4FF */ --gx-tin-vien: var(--gx-info-border); /* #C3D5EA -> #C7D7FE */ --gx-hong-nen: var(--gx-danger-bg); /* #FDECEA — khong doi */ --gx-hong-vien: var(--gx-danger-border); /* #F5C6C0 -> #F4B4AD */ /* Chu */ --gx-font-sans: var(--gx-font); --gx-font-display: var(--gx-font); /* Bo goc cu. Ban ve dung thang nho hon mot bac — the 12 chu khong phai 16. */ --gx-radius-xl: var(--gx-radius-lg); /* 24px -> 12px */ --gx-radius-full: var(--gx-radius-pill); /* Bong */ --gx-elevation-1: var(--gx-shadow-1); --gx-elevation-2: var(--gx-shadow-2); --gx-elevation-3: var(--gx-shadow-3); --gx-elevation-4: var(--gx-shadow-4); --gx-elevation-5: var(--gx-shadow-5); /* Khoang cach: ban ve them bac 5 va 7, bo bac 8/12/16/24 (khong man nao dung toi). Giu lai ba bac cu con duoc goi. */ --gx-space-8: 32px; --gx-space-12: 48px; --gx-space-16: 64px; --gx-space-24: 96px; /* Nhip chuyen dong — ban ve khong khai, giu nguyen bo cu. */ --gx-duration-micro: 120ms; --gx-duration-standard: 180ms; --gx-duration-layer: 240ms; --gx-ease: cubic-bezier(0.2, 0, 0, 1); --gx-leading-body: 1.6; --gx-leading-table: 1.5; --gx-leading-heading: 1.2; --gx-opsz-ui: 14; --gx-opsz-body: 20; --gx-opsz-heading: 28; --gx-opsz-display: 32; } /* ----------------------------------------------------------------------- 3. MOT LUAT NEN — be rong tinh theo VIEN NGOAI Do that 29/09/2026: trang thanh phan o kho 390px bi CUON NGANG 7px. Thu pham la hai o nhap trong `.n-o-khoa` — `width: 100%` cong them dem 12+34 va vien 2px, vi ca kho KHONG CO MOT CHO NAO khai `box-sizing`, tuc moi thu dang o mac dinh `content-box`: `width: 100%` nghia la "phan RUOT rong bang ca khung", con dem va vien thi cong THEM ra ngoai. Kieu hong nay khong bao gio bao loi. No chi lam trang thua vai pixel be ngang, va tren dien thoai thi thanh mot cu vuot ngang khong ai co y lam ra. Dat o day — tep chi `v2.html` va `nen.html` nap — nen ban cu (`/app/index.html`) khong doi mot pixel, dung nhu ca tep nay cam ket. ----------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; }