/* SINH TỰ ĐỘNG — ĐỪNG sửa file này trong repo. Sửa `claude-kit/core/static/css/theme.css` rồi chạy: cd d:\PapaSanIT\claude-kit && python sync.py File này giống hệt nhau ở cả 8 repo. Sửa lẻ một repo là cách hệ màu đã trôi khỏi nhau 3 lần. */ /* ═══════════════════════════════════════════════════════════════════════════ theme.css — HỆ MÀU QLPPS · CAM trên slate lạnh ─────────────────────────────────────────────────────────────────────────── Chốt 26/08/2026. Thay hệ hổ phách #9E5D09 (11/08) và hệ cam đỏ #D23C0E. NGUỒN SỰ THẬT: qlpps-marketing/docs/HE-MAU-ERP.md — phần :root là giá trị. Cuối file có thêm MỘT lớp component (@layer qlpps.table) — xem lý do tại chỗ. File này giống hệt nhau ở cả 8 repo vì `claude-kit/sync.py` rải ra. Bản gốc: claude-kit/core/static/css/theme.css. Sửa gốc rồi chạy sync, đừng sửa lẻ một repo — đó là cách hệ màu đã trôi khỏi nhau 3 lần. ── VÌ SAO GIÁ TRỊ NHƯ VẬY ────────────────────────────────────────────── Sắc cam rút từ 9 file PDF bản thiết kế khách đưa (đã trích xong màu, xoá 27/08 — bảng trích ghi ở qlpps-marketing/docs/HE-MAU-ERP.md). Thang xám và cấu trúc tương phản lấy từ module MKT của HSM. Mọi số dưới đây đo bằng WCAG 2.1. Điểm mấu chốt: `--brand` đang được gọi **763 lần làm màu CHỮ** trong template (chỉ 72 lần làm nền). Nên nó phải đạt 4.5:1 trên MỌI bề mặt, không chỉ trên thẻ trắng. Đó là lý do brand dừng ở #A84A03 chứ không sáng hơn: #CC4E05 the 4.51 · nen 4.11 ✗ · lom 4.31 ✗ · soft 3.83 ✗ #B85105 the 4.98 · nen 4.55 · lom 4.76 · soft 4.23 ✗ #A84A03 the 5.76 · nen 5.26 · lom 5.51 · soft 4.89 <- đạt hết Độ tươi mà mắt thấy rõ nhất nằm ở --brand-bright (#EA580C) trên SỐ LIỆU cỡ lớn — chữ ≥24px đậm chịu ngưỡng 3.0 nên đi được xa hơn nhiều. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ═══ 1. THƯƠNG HIỆU — bốn vai, KHÔNG dùng lẫn ═══════════════════════════ --brand : chữ nhấn, icon, viền nhấn. Cũng dùng làm nền đặc được (chữ trắng trên nó 5.76:1). --brand-hover : hover/active; chữ đặt trên --brand-soft (5.44:1). --brand-soft : NỀN nhấn — nay là XÁM TRUNG TÍNH, không còn là peach. Xem mục 3 dưới đây, đây là thay đổi lớn nhất. --brand-bright : CHỈ cho số liệu ≥24px đậm và icon lớn. KHÔNG cho chữ nhỏ. --brand-graph : CHỈ cho thanh biểu đồ (đồ hoạ, không mang chữ). */ --brand: #A84A03; /* 5.76 thẻ · 5.26 nền trang · 5.51 lõm · 4.89 soft */ --brand-hover: #9A4703; /* 5.44 trên --brand-soft */ --brand-soft: #E8EDF3; /* nổi 1.18 trên thẻ trắng · 1.07 trên nền trang */ --brand-bright: #EA580C; /* 3.56 trên thẻ — chỉ chữ ≥24px đậm */ --brand-graph: #F2610E; /* 3.09 trên mặt lõm */ --text-on-brand: #FFFFFF; /* 5.76 trên --brand */ /* ═══ 2. NỀN — 3 vai trò, KHÔNG phải 3 mức đậm nhạt ══════════════════════ */ --bg-card: #FFFFFF; /* thẻ, bảng, modal */ --bg-app: #F1F5F9; /* CHỈ dùng cho `body`. Không dùng cho gì khác */ --bg-page: #F8FAFC; /* mọi mặt lõm bên trong thẻ: sọc bảng, ô nhập, rãnh thanh, hover hàng */ /* ═══ 3. --brand-soft NAY LÀ XÁM — đọc kỹ trước khi "sửa lại" ════════════ Trước 26/08 đây là peach #FBE7C6 (hổ phách) / #FBE5D0 (cam đỏ), bão hoà 100%. Cả hệ nền nay bão hoà 0–13%, nên một mảng bão hoà 100% nằm giữa trông như dán đè — người dùng chê đúng chỗ này, đã đo và xác nhận. Luật mới: BỀ MẶT TRUNG TÍNH, CAM CHỈ LÀ MỰC. 540 chỗ đang dùng `background: var(--brand-soft)` sẽ tự thành nền xám nhạt, và 607 chỗ dùng `color: var(--brand-hover)` trên đó vẫn là chữ cam — đúng công thức mới mà KHÔNG phải sửa template. ĐỪNG nhuộm --brand-soft về lại họ cam. Muốn nhấn mạnh hơn thì dùng nền đặc var(--brand) + chữ trắng, không phải làm nền soft ấm lên. */ /* ═══ 4. VIỀN — 2 mức. Ở hệ này viền GÁNH việc tách khối ═════════════════ Nền trang so với thẻ trắng chỉ chênh 1.10, thấp hơn hệ kem cũ (1.28). Bù lại bằng viền thấy rõ. Đừng bỏ viền thẻ. */ --border: #E2E8F0; --border-soft: #EDF1F6; /* kẻ ngang giữa các dòng trong bảng */ --focus-ring: 0 0 0 3px rgba(168, 74, 3, .30); /* ═══ 5. CHỮ — ĐÚNG 3 MỨC. Không thêm mức thứ 4 ══════════════════════════ HSM có mức thứ 4 (#94A3B8) cho chú thích — đo được 2.56:1, TRƯỢT cả ngưỡng chữ lớn. Đừng chép. Chú thích dùng --text-3, phân biệt với nhãn bằng cỡ chữ và độ đậm, không bằng độ nhạt. */ --text-1: #0F172A; /* 17.85 thẻ · 16.30 nền — số, tiêu đề */ --text-2: #334155; /* 10.35 thẻ · 9.45 nền — nội dung */ --text-3: #5F6E80; /* 5.21 thẻ · 4.76 nền · 4.98 lõm — nhãn, chú thích */ /* ═══ 6. MÀU SỐ LIỆU — tô số KPI theo loại, 4 hue tách nhau ══════════════ Mắt phân loại được trước cả khi đọc chữ. Một hàng thẻ không quá 3 màu. Nhãn 11px IN HOA --text-3 (5.21) + số 29px đậm (17.85) = chênh 3.4 lần — đó mới là thứ làm giao diện "rõ ràng", không phải chọn hue nào. */ --kpi-neutral: #0F172A; /* 17.85 — số đếm, giá trị trung tính */ --kpi-brand: #EA580C; /* 3.56 — chỉ số thương hiệu, tỉ lệ chính */ --kpi-good: #15803D; /* 5.02 — kết quả tốt, đã hoàn thành */ --kpi-data: #1D4ED8; /* 6.70 — chi phí, số liệu kỹ thuật */ /* ═══ 7. TRẠNG THÁI — KHÔNG nhuộm theo thương hiệu ═══════════════════════ --warning nay TÁCH khỏi brand. Ở hệ hổ phách chúng cố ý trùng nhau vì hổ phách vốn nghĩa là "chú ý"; cam đỏ thì không, để trùng sẽ lẫn với nút thương hiệu. */ --danger: #B91C1C; --danger-soft: #FEE2E2; --danger-fg: #991B1B; /* 6.80 */ --success: #15803D; --success-soft: #DCFCE7; --success-fg: #166534; /* 6.49 */ --warning: #B45309; --warning-soft: #FEF3C7; --warning-fg: #92400E; /* 6.37 */ --info: #475569; --info-soft: #E9EEF4; --info-fg: #334155; /* 8.88 */ /* ═══ 8. THƯƠNG HIỆU BÊN THỨ BA — không đổi, đó là nhận diện của họ ══════ */ --facebook: #0084FF; --messenger: #1877F2; --zalo: #0068FF; /* ═══ 9. BO GÓC ════════════════════════════════════════════════════════ Giá trị chọn theo tần suất dùng thật trong 8 repo, không chọn theo lý thuyết: 8px (870 lần) · 10px (626) · 6px (616) · 12px (304). */ --r-xs: 4px; /* chip nhỏ, tag inline */ --r-sm: 6px; /* mục nav, hàng danh sách */ --r: 8px; /* nút, ô nhập — mặc định */ --r-md: 10px; /* thẻ nhỏ, khối lọc */ --r-lg: 12px; /* thẻ, modal, menu thả xuống */ --r-full: 999px; /* avatar, pill trạng thái */ --w-content: 1280px; /* ═══ 10. KHOẢNG CÁCH — thang ĐẶC, không phải thang thoáng ═══════════════ App nội bộ nhiều dữ liệu. Thang này bám 4 giá trị dùng nhiều nhất trong code thật: 8px (2 279 lần) · 6px (1 805) · 4px (1 213) · 12px (1 187). Thang của Notion (4/8/12/16/24/28/32) BỎ QUA 6px và 10px — hai giá trị đứng thứ 2 và thứ 3 ở đây. Đó là thang cho trang tài liệu thoáng, không dùng thẳng được cho ERP. Thang 10 nấc — nhiều hơn thang thường thấy, CÓ CHỦ ĐÍCH. Đã thử 5 thang trên 12 714 khai báo thật: thang 7 nấc (2/4/6/8/12/16/24) bắt 5 791 chỗ phải đổi, thang của Notion bắt 7 978; thang này chỉ 3 131. Bớt nấc nghe "sạch" hơn nhưng đổi bố cục nhiều hơn gấp đôi. Cần khoảng cách không có trong thang → dùng nấc GẦN NHẤT, đừng nội suy. */ --sp-1: 2px; /* khe giữa icon và chữ */ --sp-2: 4px; /* đệm chip, khe nav */ --sp-3: 6px; /* đệm dọc nút, khe nhỏ */ --sp-4: 8px; /* khe mặc định giữa phần tử */ --sp-5: 10px; /* đệm ô bảng hẹp */ --sp-6: 12px; /* đệm ô bảng, khe giữa thẻ */ --sp-7: 14px; /* đệm trong thẻ, hẹp */ --sp-8: 16px; /* đệm trong thẻ */ --sp-9: 20px; /* đệm khối lớn */ --sp-10: 24px; /* khe giữa khối lớn */ /* ═══ 11. CỠ CHỮ — ĐẶT TÊN THEO VAI TRÒ, không phải theo số ══════════════ Vì sao đặt tên: tài liệu cũ chỉ liệt kê px được phép, và thực tế đã trôi ra 13 cỡ lạ ở marketing, 12 ở congnghe — tới tận 56px. Có tên rồi thì "thêm một cỡ" trở thành "thêm một vai trò", tức phải giải thích được. Giá trị bám tần suất thật: 13px (2 168 lần) · 12px (2 125) · 14px (1 315) · 11px (1 120) · 15px (571). Các cỡ lẻ 12.5 / 11.5 / 13.5 / 10.5 là trôi, dồn về nấc gần nhất. Đã thử 5 thang trên 7 879 khai báo thật. Thang này bắt 1 200 chỗ phải đổi và tổng xê dịch 1 510px — ít nhất trong cả 5. Bản đầu tiên tôi đặt (…16/20…) bắt 1 301 chỗ và xê dịch 1 647px, vì nó chọn theo lý thuyết chứ không theo số đếm: 15px dùng 571 lần nhưng bị bỏ ra ngoài thang. */ --fs-micro: 10px; /* nhãn nhóm trong menu, chữ siêu nhỏ */ --fs-eyebrow: 11px; /* nhãn IN HOA: header bảng, nhãn thẻ số liệu */ --fs-meta: 12px; /* meta, tên người dùng, chú thích */ --fs-body: 13px; /* nội dung, nav, ô nhập — MẶC ĐỊNH */ --fs-body-lg: 14px; /* nội dung app mật độ thấp (ketoan đã duyệt 08/08) */ --fs-title: 15px; /* tiêu đề thẻ / khối */ --fs-h: 18px; /* tiêu đề trang */ --fs-glyph: 22px; /* icon glyph ☰ ✕ — KHÔNG dùng cho chữ người đọc */ --fs-kpi: 29px; /* số liệu lớn trong thẻ KPI */ --lh-tight: 1.2; /* tiêu đề, số liệu */ --lh-body: 1.5; /* nội dung đọc */ /* ═══ 12. ĐỔ BÓNG — nhiều lớp gần trong suốt ═════════════════════════════ Trước đây mỗi mức là MỘT lớp `0 1px 3px rgba(...)` — cho ra vệt bóng cứng, nhìn ra ngay là tự làm. Nay xếp nhiều lớp gần trong suốt để mặt phẳng "nhấc nhẹ khỏi giấy" thay vì "đổ bóng xuống". Kỹ thuật lấy từ Notion, giá trị tính lại theo slate #0F172A của hệ này. 194 chỗ đang gọi var(--shadow-*) sẽ tự đẹp lên, không phải sửa template. */ --shadow-sm: 0 1px 1px rgba(15,23,42,.02), 0 1px 2px rgba(15,23,42,.04); --shadow-md: 0 1px 1px rgba(15,23,42,.02), 0 2px 4px rgba(15,23,42,.03), 0 4px 8px rgba(15,23,42,.04); --shadow-lg: 0 1px 2px rgba(15,23,42,.02), 0 4px 8px rgba(15,23,42,.03), 0 10px 20px rgba(15,23,42,.05), 0 20px 40px rgba(15,23,42,.06); --shadow-pop: 0 1px 2px rgba(15,23,42,.03), 0 4px 10px rgba(15,23,42,.04), 0 12px 28px rgba(15,23,42,.06), 0 24px 56px rgba(15,23,42,.08); } /* ═══════════════════════════════════════════════════════════════════════════ LỚP BẢNG DÙNG CHUNG — @layer qlpps.table ─────────────────────────────────────────────────────────────────────────── Vì sao có: đếm được 440 thẻ trong 8 repo, mà chỉ 68 chỗ dùng tabular-nums, 10 chỗ có sọc, và 0 chỗ có header dính. Hệ quả: cột số không thẳng hàng, cuộn xuống là mất tên cột. Đó là chỗ app ERP lộ ra nghiệp dư nhanh nhất. ── VÌ SAO BỌC TRONG @layer ── 23 trang đã TỰ style `thead th` bằng selector trần, cùng độ đặc hiệu với khối này. Thứ tự nạp lại không đoán được: `_header.html` được include trong nên theme.css có khi đến SAU