/* ══════════════════════════════════════════════════════════════════════════ TOKEN — nguồn duy nhất cho màu, chữ, khoảng cách, bo góc, bóng. Nạp TRƯỚC bao_cao.css và admin.css ở cả bốn template. Trước đây khối này nằm trong bao_cao.css còn admin.css ăn ké 65 chỗ var() — nghĩa là trang quản trị vỡ nếu ai đó đổi thứ tự nạp. Tên đặt bằng tiếng Việt không dấu cho khớp lối đặt tên đang dùng ở Python và JS trong dự án (nut, the, hang, chip, quy_tac...). ── LUẬT MÀU, ĐỌC TRƯỚC KHI SỬA ─────────────────────────────────────────── 1. Mọi màu dùng cho CHỮ phải >= 4.5:1 với nền nó nằm lên. Bậc nhạt nhất được phép dùng cho chữ là --muc-mo. KHÔNG đẻ bậc nhạt hơn. 2. Mọi bậc tên "-nhat" là MẢNG TÔ. Cấm dùng cho chữ, cấm để đứng một mình mang nghĩa — phải kèm chữ hoặc hình. 3. Viền của THÀNH PHẦN TƯƠNG TÁC (ô nhập, nút, chip bấm được) phải dùng --vien-tuong-tac, không được dùng --vien. WCAG 1.4.11 đòi >= 3:1 cho ranh giới nhận dạng control; ô nhập nền trắng trên thẻ trắng thì viền là ranh giới DUY NHẤT, không có chênh nền nào gánh đỡ. 4. Trạng thái phải nói bằng HÌNH + MÀU. Đo được: hai màu chuỗi sát nhau nhất khi mù màu đỏ-lục chỉ cách nhau ΔE 8,7 — màu một mình không đủ. 5. Từ --chuoi-3 trở đi, mỗi chuỗi bắt buộc có stroke-dasharray riêng và chấm mốc hình riêng. Lý do ở luật 4. Con số tương phản ghi kèm dưới đây đã đo lại bằng script, không phỏng đoán. ══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Nền: bốn mặt phẳng ────────────────────────────────────────────── */ --nen-trang:#EFF2F8; /* body cả 4 trang. Thẻ trắng trên nó 1,121:1 */ --nen-the:#FFFFFF; /* .card .kpi .the — mặt phẳng tham chiếu */ --nen-chim:#EFF2F8; /* khối LỒNG trong thẻ: .dstat, .ptable thead, tr.detail-row */ --nen-noi:#FFFFFF; /* .drawer #tt .hop — nổi trên cùng */ --van:#F6F8FC; /* sọc ngựa vằn hàng chẵn, nền .quy-tac. --muc-mo trên nó 5,86:1 */ --hang-hover:#E9F0FB; /* hover hàng bảng. --muc-mo trên nó 5,44:1 */ --phu-nen:rgba(17,21,40,.42); /* màn phủ sau hộp thoại và ngăn kéo */ /* Bóng mép khung cuộn ngang — dấu hiệu "còn cột bên phải". Nhạt hơn hẳn --phu-nen: đây là gợi ý ở rìa mắt, không phải một lớp phủ. */ --bong-cuon:rgba(17,21,40,.16); /* ── Chữ: ba bậc. Không đẻ bậc thứ tư ──────────────────────────────── */ --muc:#111528; /* chữ chính, số KPI · thẻ 18,08:1 · trang 16,12:1 */ --muc-2:#39405A; /* ô bảng, .card .desc · thẻ 10,22:1 */ --muc-mo:#5A6076; /* NHẠT NHẤT ĐƯỢC PHÉP · thẻ 6,23:1 · trang 5,56:1 */ /* ── Viền: BA mức, xem luật 3 ──────────────────────────────────────── */ --vien:#DFE4EE; /* viền thẻ, đường chia hàng — không tương tác, miễn 3:1 */ --vien-manh:#C7CEDC; /* mức giữa: viền khối trang trí, nút disabled */ --vien-tuong-tac:#7E88A0; /* MỌI ranh giới control · thẻ 3,55:1 · trang 3,17:1 */ /* ── Lưới và trục biểu đồ: trang trí thuần, miễn ngưỡng ────────────── */ --luoi:#E8ECF4; /* svg .grid-line, viền hàng lồng, .cap-chuoi */ --truc:#B9C1D2; /* svg .axis-line */ /* ── Màu thương hiệu ──────────────────────────────────────────────── Lam Smartlog, lấy từ chính file logo gốc (smartlog-blue.png) bằng cách đếm điểm ảnh đục — không phỏng đoán từ ảnh xem bằng mắt. CHỈ dùng cho logo. Không dùng làm màu nhấn của giao diện: --nhan-manh (#1B5FB0) tối hơn nên chữ trên nền trắng đọc dễ hơn, và một hệ hai màu lam gần nhau thì mắt đọc thành "có chỗ bị lỗi màu". Đo trên nền trắng: 6,22:1 — vẫn đạt sàn 4,5 dù logo là HÌNH, không phải chữ. */ --thuong-hieu:#3644FB; /* ── Nhấn mạnh ─────────────────────────────────────────────────────── */ --nhan-manh:#1B5FB0; /* link, tab chọn, nút chính, vòng focus · thẻ 6,34:1 */ --nhan-manh-nhat:#D6E6FB; /* nền tab/chip chọn, hàng chọn · tách khỏi --hang-hover ΔE 4,9 */ /* ── Trạng thái. Bậc -nhat là mảng tô, xem luật 2 ───────────────────── */ --tot:#0F6B41; --tot-nhat:#DDF2E6; /* 6,56:1 · trên nền nhạt 5,60:1 */ --canh-bao:#8A5A00; --canh-bao-nhat:#FBF1DD; /* 5,93:1 · trên nền nhạt 5,29:1 nền nhạt này chỉ 1,121:1 so thẻ — NHẠT NHẤT BỘ, bắt buộc kèm viền 1px */ --xau:#A5202A; --xau-nhat:#FBE0E2; /* 7,39:1 · trên nền nhạt 5,94:1 */ --nong:#C43C20; --nong-nhat:#FCEEE8; /* 5,23:1 · trên nền nhạt 4,62:1 KHÔNG được làm --nong-nhat tối thêm, chỉ còn 0,12 dư so sàn 4,5 */ --tren-dac:#FFFFFF; /* chữ trên nền đặc · trên --nhan-manh 6,34 · --xau 7,39 · --tot 6,56 */ /* ── Sáu màu chuỗi biểu đồ ────────────────────────────────────────── Thứ tự cấp phát KHÔNG được đổi. Tím phải nằm ở vị trí 5 chứ không phải 3: mất kênh đỏ thì tím sập về lam (ΔE 3,9 với --chuoi-1) — coi như một màu. Cặp yếu nhất còn lại là 2 hổ phách vs 6 chu sa (ΔE 8,7), nên luật 5 bắt buộc hoa văn từ chuỗi 3 trở đi. */ --chuoi-1:#0A6FB4; --chuoi-1-nhat:#E6F1FC; /* lam · 5,32:1 */ /* --chuoi-2 (nét đặc) để dành — hiện chỉ bậc -nhat của nó có người dùng. */ --chuoi-2:#8A5A00; --chuoi-2-nhat:#FBF1DD; /* hổ phách · 5,93:1 — trùng hex --canh-bao, nên chuỗi biểu đồ LUÔN phải có nhãn dán trực tiếp để không bị đọc nhầm thành "đường có vấn đề" */ /* Ba bậc 3 · 4 · 6 chưa có biểu đồ nào vẽ tới. ĐỪNG XOÁ như token thừa: luật 5 ở đầu file cấm đổi THỨ TỰ cấp phát, nên xoá một bậc giữa là dồn cả dãy lên và tím rơi khỏi vị trí 5 — chỗ duy nhất nó không sập về lam khi người xem mù màu đỏ-lục. */ --chuoi-3:#0B7A57; --chuoi-3-nhat:#DEF4EA; /* lục lam · 5,34:1 · để dành */ --chuoi-4:#A81A6E; --chuoi-4-nhat:#FADCEC; /* hồng sen · 6,91:1 · để dành */ --chuoi-5:#7A3FD8; --chuoi-5-nhat:#E8E2FB; /* tím · 5,95:1 */ --chuoi-6:#8F4014; --chuoi-6-nhat:#F7DED2; /* chu sa · 7,21:1 · để dành */ /* ── Khoảng cách ──────────────────────────────────────────────────── */ --kc-1:4px; /* khe icon–chữ, đệm dọc pill */ --kc-2:8px; /* gap nhóm nút, đệm dọc ô bảng hàng lồng */ --kc-3:12px; /* đệm dọc ô hàng cấp 1, gap .hang */ --kc-4:16px; /* đệm thẻ trên mobile */ --kc-5:20px; /* đệm trong .card/.kpi/.the (desktop) */ --kc-6:24px; /* lề ngang .wrap và .admin-than, đệm ngang .hop */ --kc-10:40px; /* padding-bottom cuối trang, cả hai trang */ --khe:16px; /* gap của mọi lưới bento */ /* ── Kích thước có cấu trúc ─────────────────────────────────────────── Hai bậc này trước nằm trong hai khối `:root` RIÊNG ở admin.css và bao_cao.css. token.css tự nhận là nguồn duy nhất mà thật ra có ba khối :root ở ba file — người sửa đọc file này sẽ không thấy chúng. */ /* Chiều cao thanh đầu trang dùng chung, để menu dọc của trang quản trị neo xuống dưới nó (`.admin-nav { top:var(--cao-dau-trang) }`). TÍNH RA, KHÔNG GÕ SỐ. Bản cũ viết thẳng 49px ở admin.css và nó khớp chỉ nhờ TRÙNG HỢP: chiều cao thật do bao_cao.css quyết định — đệm dọc `--kc-2` hai phía, cộng `min-height` của `.dau-hieu`, cộng 1px viền dưới. Ai sửa một trong ba thứ đó là menu dọc lệch khỏi thanh, hoặc chồm lên hoặc hở một dải, mà không test nào báo. Viết bằng calc thì ba thứ đó đổi là con số này đổi theo. */ --cao-dau-hieu:32px; --cao-dau-trang:calc(var(--kc-2) * 2 + var(--cao-dau-hieu) + 1px); /* = 49px */ /* Trần chiều cao khung cuộn của ba bảng lớn ở trang báo cáo. */ --cao-bang:420px; /* Bề rộng CỐ ĐỊNH của cột biểu tượng ở hàng đầu thẻ quản trị. Để `auto` thì cột co theo con của TỪNG thẻ — thẻ có nút 32px và thẻ có icon 18px cho ra hai mốc tiêu đề khác nhau (đo được 315px và 329px trong CÙNG một khu). Cố định rồi thì mọi tiêu đề thẳng hàng, và câu giải thích ở thân thẻ tính lề thụt từ chính con số này thay vì gõ một số riêng. */ --cot-icon-the:32px; /* ── Bán kính ─────────────────────────────────────────────────────── */ --bo-goc-the:16px; /* .card .kpi .the .hop .khung-hep */ --bo-goc-khoi:12px; /* khối lồng: .dstat .ptable .nhankhoi .note-box .dtl-item */ --bo-goc-nut:8px; /* mọi thứ bấm được có góc + ô nhập */ --bo-goc-tron:999px; /* .pill .tt .chip .chip-team .dem .info */ /* ── Bóng: năm cấp ────────────────────────────────────────────────── */ --bong-mau:222 26% 26%; --bong-1:0 1px 2px -1px hsl(var(--bong-mau)/.10), 0 2px 4px -2px hsl(var(--bong-mau)/.08), 0 4px 8px -4px hsl(var(--bong-mau)/.06); /* --bong-2 để dành: bậc bóng giữa, chưa mặt phẳng nào cần tới. */ --bong-2:0 1px 2px -1px hsl(var(--bong-mau)/.10), 0 4px 8px -3px hsl(var(--bong-mau)/.09), 0 8px 16px -6px hsl(var(--bong-mau)/.08), 0 16px 32px -12px hsl(var(--bong-mau)/.07); --bong-3:0 2px 4px -2px hsl(var(--bong-mau)/.10), 0 6px 12px -4px hsl(var(--bong-mau)/.10), 0 16px 28px -8px hsl(var(--bong-mau)/.10), 0 32px 56px -16px hsl(var(--bong-mau)/.12); /* Tooltip đi theo chuột: KHÔNG được dùng --bong-3. #tt gắn mousemove (bao_cao.js:177-186) và ghi lại vị trí mỗi frame — bóng 4 lớp blur 56px nghĩa là vẽ lại một phần tử fixed mỗi lần chuột nhúc nhích. */ --bong-tt:0 2px 6px -2px hsl(var(--bong-mau)/.14), 0 8px 16px -6px hsl(var(--bong-mau)/.12); /* NGOẠI LỆ DUY NHẤT được phép có x-offset. Ngăn kéo trượt từ phải bắt buộc hắt bóng sang TRÁI mới tách khỏi trang. ĐỪNG "sửa" về x=0. */ --bong-drawer:-2px 0 4px -2px hsl(var(--bong-mau)/.10), -8px 0 16px -6px hsl(var(--bong-mau)/.10), -24px 0 48px -12px hsl(var(--bong-mau)/.12); /* ── Cỡ chữ: 7 bậc ────────────────────────────────────────────────── */ --cx-micro:11px; /* .crange .edate .hotsub .hang-phu, nhãn trục SVG */ --cx-nhan:12px; /* nhãn KPI, tiêu đề cột, chữ trong pill/chip */ --cx-nho:13px; /* chữ trong nút, .nav-muc, .hotname */ --cx-than:14px; /* body và mọi ô dữ liệu bảng */ --cx-tieu-de:16px; /* .card h3, .the-ten, .hop h2, .nav-ten */ --cx-khu:20px; /* header h1, .khu-dau h1, .khung-hep h1 */ --cx-kpi:clamp(22px, 2.2vw, 28px); /* .kpi .value */ /* Chữ NẰM TRONG thanh gantt cao 16px. Dưới bậc --cx-micro có chủ ý, không phải số lạc: 11px trong một thanh 16px là chữ chạm cả trên lẫn dưới. Đây là bậc duy nhất được phép nhỏ hơn --cx-micro, và chỉ cho chữ nằm trong hình — không bao giờ cho chữ chạy trên nền trang. */ --cx-thanh:10px; /* DÒNG THỜI GIAN (25/08). Hai token này thay đổi lúc chạy nên phải khai ở đây, không phải nằm rải trong bao_cao.css: --tl-cot bề rộng cột tên. MỘT con số cho cả trục lẫn mọi hàng — hai con số là cột tên không thẳng với thanh của chính nó. --tl-rong bề rộng vùng thời gian, JS ghi đè theo px_ngay × số ngày. Giá trị ở đây chỉ là mức lùi khi JS chưa kịp chạy. --tl-du chỗ thừa bên PHẢI dải, cộng vào min-width của `.tl-noi`. Không phải trang trí: nhãn "Hôm nay" và nhãn vạch trục đặt `absolute; left:x` rồi chảy sang phải nên chúng tràn khỏi `.tl-noi` và tự nới vùng cuộn ra. Mà `.tl-noi` chính là khung giới hạn của `position:sticky`, nên hụt bao nhiêu thì cột tên dính bị đẩy ra ngoài mép trái bấy nhiêu lúc cuộn tới cuối. Đo ở cả 390px lẫn 1440px: hụt đúng 37px. 56 là số đó làm tròn lên có biên. */ --tl-cot:288px; --tl-rong:0px; --tl-du:56px; /* Nhãn IN HOA có dấu tiếng Việt (Ằ Ộ Ữ) cao hơn chữ hoa không dấu. line-height dưới 1.35 là CỤT DẤU. Đây là lý do biến này tồn tại. */ --lh-nhan-hoa:1.4; /* Khoá sáng: báo cáo nội bộ, không làm chế độ tối. Nếu sau này thêm thì phải TÍNH LẠI TỪ ĐẦU một thang riêng, không được lật ngược thang này — trên nền tối thì tầng "-nhat" thành nền và tầng đậm thành chữ không đọc nổi. */ color-scheme: light; }