/* CLINIC-SCOPE: shared */ /* ============================================================================ design-tokens.css — DESIGN TOKENS dùng chung toàn hệ thống ClinicSolution ---------------------------------------------------------------------------- NGUỒN DUY NHẤT của biến giao diện toàn cục. File chỉ khai biến — không áp lên phần tử nào. Xem trực quan: /styleguide.html · tài liệu: docs/design.md. BA NHÓM (tìm theo tiêu đề «TẦNG …» trong file): TẦNG NGỮ NGHĨA brand, chữ, viền/nền, trạng thái, font, cỡ chữ, kích thước, bo góc, khoảng cách, bóng — màn dùng trực tiếp. TẦNG THÀNH PHẦN nút 8 nhóm, dải nút cuối màn, dòng đang chọn, điều hướng đang chọn, focus, chip/badge, lịch — component dùng chung đọc. BẢNG MÀU PHỤ --btn-primary/-ok/-warn/-danger, --act-*, --ico-*: tên cũ còn làm màu biểu đồ, nhãn, trạng thái. KHÔNG dùng để tô NÚT (nút tô qua class vai trò của button.css). QUY TẮC: module KHÔNG khai lại tên ở đây; biến riêng màn phải có tiền tố màn. --main-color là bí danh của --brand (nen-chung.css). Trước khi commit CSS: node _tools/css-scope/css-lint.js ============================================================================ */ :root { /* #################################################################### TẦNG NGỮ NGHĨA — màn dùng trực tiếp #################################################################### */ /* ---- MÀU BRAND (xanh dương — đổi 06/10/2026 theo HisSite, master.css --main-color #2563eb / #1d4ed8; thang Tailwind blue. Đoạn dưới là lịch sử thời còn teal-lá) ---- THỐNG NHẤT 2026-09-21: hệ thống từng có HAI sắc teal cùng làm màu thương hiệu — --brand #1d6f5c (đây) và --main-color #055952 (nen-chung.css, hệ cũ, 182 chỗ). Nay chốt lấy #055952 cho cả hai, --main-color trỏ về token này. Hệ quả: 515 chỗ dùng --brand sẫm lại một bậc; bù lại tương phản với chữ trắng tăng 6,03 -> 8,21 (WCAG AA cần 4,5). Đối chiếu hai màu: docs/mocks/giao-dien-chung/hai-mau-thuong-hieu.html */ --brand: #2563eb; /* header/workspace chủ đạo — xanh dương theo HisSite master.css --main-color (06/10/2026; trước là teal #055952) */ --brand-dark: #1d4ed8; /* nhấn đậm, gradient dưới */ --brand-2: #3b82f6; /* accent sáng (viền chọn, icon) */ --brand-soft: #eff6ff; /* nền nhạt brand (head bảng, panel) */ --brand-sel: #93c5fd; /* nền dòng đang chọn — đủ tách khỏi hover/zebra, chữ đen đạt tương phản tốt */ --row-sel: var(--brand-sel); /* dùng chung nguồn màu chọn cho mọi lưới */ --row-hover: #dbeafe; /* hover nhẹ hơn rõ ràng so với dòng đang chọn */ /* ---- MÀU TRẠNG THÁI ok / cảnh báo / nguy hiểm ---- Tên --btn-* là lịch sử: nay là màu NGỮ NGHĨA (toast, badge, viền lỗi, icon nhóm nút), KHÔNG dùng tô nền nút. --btn-on = chữ trắng trên nền màu đặc. */ --btn-ok: #16a34a; --btn-ok-hover: #15803d; /* xanh lá success */ --btn-warn: #d97706; --btn-warn-hover: #b45309; /* cam cảnh báo */ --btn-danger: #dc2626; --btn-danger-hover: #b91c1c; /* đỏ nguy hiểm */ --btn-on: #ffffff; /* CHỮ trên nút màu (luôn trắng) */ /* ---- CHỮ (slate scale) ---- */ --text: #0f172a; /* chữ chính */ --muted: #475569; /* chữ phụ / label */ --muted-2: #5f6f86; /* chữ mờ / placeholder / icon nhạt — #94a3b8 cũ chỉ 2.6:1 mà làm chữ ~2.400 chỗ; nay 5.1 trên trắng, 4.6 trên sọc lưới (WCAG AA, 01/10/2026) */ --muted-soft: #64748b; /* chữ phụ nhạt — giữa --muted và --muted-2 (gom #6b7280/#667085/#64748b, 01/10/2026) */ /* ---- VIỀN & NỀN (gom 5 xám viền + 3 nền surface trùng nhau) ---- */ --line: #e5e7eb; /* đường kẻ / viền nhạt (thay #cbd5e1/#e3e7ec/#d0d5dd/#d1d5db) */ --line-2: #cbd5d0; /* viền đậm hơn (input, khung) */ --line-strong: #cbd5e1; /* viền đậm trung tính lạnh — khung, ô, bảng (gom #d0d5dd/#cbd5e1/#c9d3df, 01/10/2026) */ --surface: #ffffff; /* nền thẻ/card */ --surface-2: #f5f9ff; /* nền phụ nhạt (sidebar, panel) — ngả brand */ --surface-3: #eef1f5; /* nền xám cực nhạt (nền workspace) */ /* Lưới trung tính theo HisSite; chỉ áp ở màn dùng các token này. */ --grid-neutral-header: #f6f8fb; --grid-neutral-line: #dce3ea; --grid-neutral-text: #1f2937; --h-grid-compact: 27px; /* ---- NỀN MỞ RỘNG (gom 7 màu nền trắng/nhạt trùng nhau) ---- */ --surface-hover: #f1f5f9; /* hover menu, dropdown (thay #f8fafc/#f8f9fa/#eef2f7) */ --surface-soft: #f8fafc; /* nền trắng ngà tách panel với thẻ trắng (gom #f8fafc/#f9fafb/#f4f7f6, 01/10/2026) */ --row-zebra: rgba(186,191,191,.2); /* nền hàng chẵn (zebra stripe) */ /* ---- CHỮ MỞ RỘNG ---- */ --text-strong: #101828; /* chữ đậm nhấn (thay #111827/#334155/#344054) */ --text-meta: #5b7168; /* chữ meta xanh xám (thay #52665f) */ /* ---- VIỀN MỞ RỘNG ---- */ --line-brand: #bfdbfe; /* viền xanh brand nhạt (kb-ident, panel brand) */ /* ---- TRẠNG THÁI (nền/chữ badge) ---- */ --hi: #dc2626; /* giá trị cao / bất thường (đỏ) */ --lo: #1e3a8a; /* giá trị thấp (xanh dương đậm) — màu thật lấy theo cấu hình sMauKetQuaXNThap */ /* ---- TRƯỜNG BẮT BUỘC ---- */ /* Dấu * cạnh nhãn. Trước đây mỗi màn tự khai một kiểu (#dc2626 / #b42318 / #d92d20 / #d33, rồi mượn --act-delete / --btn-danger / --hi) nên cùng một ký hiệu ra 4 sắc đỏ khác nhau. Dùng token này, đừng khai lại ở màn. */ --req: #dc2626; /* ================================================================ TRẠNG THÁI WORKLIST — 6 loại màu badge/chip (wait/progress/done/end/warn/danger) Dùng trong component 06-worklist.js, dropdown lọc trạng thái, và chip trạng thái. ================================================================ */ /* Chờ (cam — đang chờ hành động) */ --st-wait-bg: #fff7ed; --st-wait-text: #c2410c; /* Đang xử lý (xanh dương — đang tiến hành) */ --st-progress-bg: #eff6ff; --st-progress-text: #1d4ed8; /* Hoàn tất (xanh lá — đã xong bước chính) */ --st-done-bg: #ecfdf3; --st-done-text: #166534; /* Kết thúc (xám — đã đóng, không còn xử lý) */ --st-end-bg: #f3f4f6; --st-end-text: #4b5563; /* Cảnh báo (vàng cam — cần chú ý) */ --st-warn-bg: #fffbeb; --st-warn-text: #92400e; /* Nguy hiểm (đỏ — lỗi, hủy, cần can thiệp) */ --st-danger-bg: #fef2f2; --st-danger-text: #b91c1c; /* ---- FONT ---- */ --font-ui: 'Segoe UI', Roboto, Arial, sans-serif; /* chữ giao diện (gom 7 stack) */ --font-mono: ui-monospace, Consolas, 'Courier New', monospace; /* mã/số (gom 4 mono) */ /* ---- FONT-SIZE scale (7 bậc — bỏ toàn bộ nửa bậc 10.5/11.5/12.5/13.5/14.5) ---- */ --fs-xs: 11px; /* label nhỏ, badge, chú thích (thay 10.5/11/11.5) */ --fs-sm: 12px; /* text phụ, nút nhỏ, ô lưới (thay 12/12.5) */ --fs-base: 13px; /* BODY chuẩn — mặc định form/bảng (thay 13/13.5/14.5) */ --fs-md: 14px; /* text nhấn, nút thường */ --fs-lg: 16px; /* tiêu đề phụ / ws-title (thay 15/15.5/16/17) */ --fs-xl: 20px; /* heading (thay 18/19/20/21) */ --fs-2xl: 24px; /* heading lớn (thay 22-26) */ /* ---- FONT-WEIGHT (bỏ rác 550/650/680/750) ---- */ --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ---- KÍCH THƯỚC control (gom 7 chiều cao input về 1) ---- */ --h-input: 32px; /* chiều cao input/select/nút chuẩn (thay 28/30/33/35/38/40) */ --h-input-sm: 28px; /* biến thể nhỏ (toolbar, nút phụ) */ --h-input-compact: 30px; /* nhịp gọn cho workspace HIS nhiều dữ liệu */ --h-window-header: var(--h-input-compact); /* một dòng tiêu đề cửa sổ bật lên */ /* Độ rộng ô ngày trong FORM nghiệp vụ. Không dùng cho cặp Từ/Đến của bộ lọc. */ --w-date: 130px; /* dd/MM/yyyy */ --w-date-birth: 140px; /* dd/MM/yyyy hoặc mm/yyyy hoặc yyyy */ --w-datetime: 158px; /* dd/MM/yyyy HH:mm */ --w-filter-min: 240px; /* cột lọc trái khi layout còn chia ngang */ --fs-compact: 12px; /* chữ control gọn, vẫn giữ nhãn/tiêu đề riêng */ --h-bar: 46px; /* thanh header workspace */ /* ---- BO GÓC — WIN8 "Lai vừa phải": gần vuông (radius 2px) ---- */ /* Trước Win8: 6/8/12. Nay ép về 2px cho phong cách Metro cứng cáp mà không gắt. Avatar/icon tròn giữ border-radius:50% riêng (không qua token này). */ --radius-sm: 2px; /* input, ô nhỏ, lưới (NÚT dùng --radius-btn) */ --radius-btn: 4px; /* MỌI nút hành động — ép trong @layer clinic-buttons (button.css), duyệt 29/09/2026 */ --radius: 2px; /* thẻ/card, panel */ --radius-lg: 2px; /* modal, khối lớn */ /* LỚP NỔI thông báo/xác nhận (toast, hộp báo, hộp xác nhận chung) mềm hơn một bậc — duyệt 29/09/2026 (2px nhìn "cắt vuông" khi nổi trên nền). Nút, ô nhập, lưới BÊN TRONG vẫn theo --radius-sm. */ --radius-noi: 4px; /* khung toast / hộp báo / hộp xác nhận */ --radius-noi-sm: 3px; /* ô icon, bộ đếm ×n, nút × bên trong lớp nổi */ /* ---- KHOẢNG CÁCH (spacing scale 4px) ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; /* ---- ĐỔ BÓNG — WIN8: làm phẳng, bóng rất nhẹ (giữ shadow-lg cho modal) ---- */ --shadow-sm: 0 1px 1px rgba(15,23,42,.05); --shadow-md: 0 2px 6px rgba(15,23,42,.07); --shadow-lg: 0 12px 40px rgba(0,0,0,.24); /* #################################################################### TẦNG THÀNH PHẦN — component dùng chung đọc (button.css, lưới, selection.css…) #################################################################### */ /* ---- NÚT — 8 NHÓM MÀU THEO VAI TRÒ (button.css gán vào class, ép trong @layer clinic-buttons) ---- Chuyển từ :root của button.css (30/09/2026) để mọi token nằm một nơi. */ /* 1. THÊM MỚI / TẠO MỚI / KÊ ĐƠN (Solid Brand Teal Hero — CÙNG màu nhóm 3 "Lưu") User chốt 19/09/2026: Thêm là hành động chính của màn danh sách, và Thêm với Lưu gần như không bao giờ dùng cùng lúc (bấm Thêm/Sửa rồi mới có Lưu) nên hai nhóm dùng chung màu chủ đạo. Vài thanh có cả hai (Mẫu mô tả CĐHA, Phân quyền, Cấu hình cha-con) thì phân biệt bằng icon dấu + và icon đĩa mềm. */ --btn-add-bg: var(--brand); --btn-add-border: var(--brand-dark); --btn-add-text: var(--surface); --btn-add-icon: var(--surface); --btn-add-hover-bg: #1e40af; --btn-add-hover-border: #1e3a8a; --btn-add-hover-text: var(--surface); /* 2. SỬA ĐỔI / CẬP NHẬT / HIỆU CHỈNH (Amber Tint) */ --btn-edit-bg: #fffbeb; --btn-edit-border: #fcd34d; --btn-edit-text: var(--st-warn-text); --btn-edit-icon: var(--btn-warn); --btn-edit-hover-bg: #fef3c7; --btn-edit-hover-border: #f59e0b; --btn-edit-hover-text: #78350f; /* 3. LƯU / DUYỆT / XÁC NHẬN (Solid Brand Teal Hero) */ --btn-save-bg: var(--brand); --btn-save-border: var(--brand-dark); --btn-save-text: var(--surface); --btn-save-icon: var(--surface); --btn-save-hover-bg: #1e40af; --btn-save-hover-border: #1e3a8a; --btn-save-hover-text: var(--surface); /* 4. XÓA / HỦY / TỪ CHỐI (Red / Rose Warning Tint) */ --btn-del-bg: #fef2f2; --btn-del-border: #fca5a5; --btn-del-text: #991b1b; --btn-del-icon: var(--btn-danger); --btn-del-hover-bg: #fee2e2; --btn-del-hover-border: #f87171; --btn-del-hover-text: #7f1d1d; /* 5. IN ẤN / XUẤT BẢNG KÊ / XEM TRƯỚC (Blue Tint) */ --btn-print-bg: #eff6ff; --btn-print-border: #bfdbfe; --btn-print-text: #1e40af; --btn-print-icon: var(--btn-primary); --btn-print-hover-bg: #dbeafe; --btn-print-hover-border: #93c5fd; --btn-print-hover-text: #172554; /* 6. NẠP / LÀM MỚI / TIỆN ÍCH / TRA CỨU (Cyan Tint) */ --btn-refresh-bg: #f0fdfa; --btn-refresh-border: #99f6e4; --btn-refresh-text: #115e59; --btn-refresh-icon: #0d9488; --btn-refresh-hover-bg: #ccfbf1; --btn-refresh-hover-border: #5eead4; --btn-refresh-hover-text: #042f2e; /* 7. XỬ TRÍ / CHUYÊN KHOA / CHUYỂN VIỆN (Purple Tint) */ --btn-purple-bg: #faf5ff; --btn-purple-border: #e9d5ff; --btn-purple-text: #6b21a8; --btn-purple-icon: #9333ea; --btn-purple-hover-bg: #f3e8ff; --btn-purple-hover-border: #d8b4fe; --btn-purple-hover-text: #3b0764; /* 8. ĐÓNG / THOÁT / QUAY LẠI (Slate / Neutral Gray) — cũng là màu MẶC ĐỊNH */ --btn-close-bg: var(--surface); --btn-close-border: #cbd5e1; --btn-close-text: #334155; --btn-close-icon: #64748b; --btn-close-hover-bg: var(--surface-hover); --btn-close-hover-border: var(--muted-2); --btn-close-hover-text: var(--text); /* Nút thường trung tính; chỉ hành động chính dùng --btn-primary. Không đổi --act-* bên dưới: toast/badge cũ cũng đang tham chiếu chúng. */ --button-bg: var(--surface); --button-hover: var(--surface-hover); --button-active: var(--surface-3); --button-text: var(--text); --button-border: var(--line); /* ---- FOOTER BAR nút (dải hành động vùng nội dung phải) ---- */ --ft-bar-h: 34px; /* chiều cao dải footer */ --ft-btn-h: 30px; /* chiều cao nút trong footer */ /* THANG CỠ NÚT 3 bậc (duyệt 29/09/2026) — button.css ép trong @layer clinic-buttons. Nút chỉ có icon vuông theo chiều cao của cỡ. .btn-sm = Mặc định. */ --btn-h: var(--ft-btn-h); /* Mặc định: footer, toolbar, khối thao tác */ --btn-h-sm: 24px; /* Nhỏ (.btn-mini): dòng lưới, tiêu đề khối, panel nhỏ */ --btn-h-lg: 40px; /* Lớn (.btn-lg): kiosk, màn cảm ứng */ --btn-h-touch: 44px; /* Cảm ứng tối thiểu 44px (máy tính bảng) — đặt qua --b-h, vd màn Tư vấn KSCT (KSCT-BG-01) */ --btn-px: 14px; --btn-px-sm: 8px; --btn-px-lg: 18px; --ft-gap: 2px; /* nút cách lề DƯỚI 2px */ /* Nền + viền dải footer. Trước đây 2 giá trị này bị hardcode rải rác (#eef1f5 / #d8e3de ở lamviec.css, kedonthuoc.css, từng màn Dược...) nên đổi nhịp footer phải sửa nhiều file. Thêm token ở đây KHÔNG đổi hình màn cũ (biến không được var() gọi thì vô hại). */ --ft-bar-bg: var(--surface-3); /* nền dải footer */ --ft-bar-line: #d6e0ee; /* viền TRÊN dải footer */ /* ================================================================ VẠCH DÒNG ĐANG CHỌN — nguồn DUY NHẤT cho CẢ 4 lưới ---------------------------------------------------------------- Nền dòng chọn đã thống nhất sẵn qua --row-sel (khai ở trên). Còn VẠCH/INSET trái thì trước đây mỗi lưới lấy 1 nguồn khác nhau: wdGrid -> var(--brand) #1d6f5c dataTable -> var(--main-color) #055952 (master.css, hệ CŨ) worklist -> var(--main-color) #055952 newGrid -> var(--main-color) #055952 => 2 sắc teal cho cùng 1 ý nghĩa. Nay cả 4 trỏ vào token này. Đổi màu vạch chọn toàn hệ = sửa ĐÚNG 1 dòng dưới đây. ================================================================ */ --row-sel-bar: var(--brand); /* vạch/inset trái dòng đang chọn */ --row-sel-bar-width: 4px; /* phương án 04: vạch rõ, không phụ thuộc từng lưới */ --row-sel-text: #172554; /* chữ tối trên nền xanh dương, đạt tương phản ở cả light/dark */ --row-sel-weight: 600; /* nhấn hàng đang thao tác nhưng không nặng như heading */ /* ================================================================ ACTIVE ĐIỀU HƯỚNG (nav dọc / tab / segment) — dẫn xuất, KHÔNG màu mới ---------------------------------------------------------------- Trước đây mỗi màn tự ghép công thức active riêng: đếm được 28+ điểm khai cho item danh sách và 38 biến thể tab/segment/chip, dùng 5 tên class trạng thái và 18 cơ chế thị giác (nền đặc / nền nhạt / vạch trái / viền dưới / inset trên / inset dưới / ::before / ::after / opacity-dim / chỉ đổi chữ). Màu nguồn cũng lạc: #FFC107, #0a8f7e, #dbeafe, #2563eb, #a7141c, #16a34a. Nay 3 kiểu điều hướng dùng đúng cụm token dưới đây, thực thi ở partCss/selection.css. Đổi diện mạo active toàn hệ = sửa ở đây. PHÂN VAI (đừng lẫn với cụm --row-sel-* ở trên): --sel-* : mục ĐIỀU HƯỚNG (luôn hiện diện) -> nền NHẠT, vạch 3px. --row-sel-*: HÀNG DỮ LIỆU (lựa chọn tạm) -> nền ĐẬM, vạch 4px. ================================================================ */ --sel-nav-bg: var(--brand-soft); /* nền mục điều hướng đang chọn */ --sel-nav-bar: var(--brand); /* vạch chỉ báo (trái cho nav, dưới cho tab) */ --sel-nav-bar-w: 3px; /* nav dọc: 3px — tách khỏi 4px của hàng dữ liệu */ --sel-tab-bar-w: 2px; /* tab ngang: 2px, đúng mẫu đa số màn đang dùng */ --sel-nav-text: var(--brand-dark); /* chữ mục đang chọn */ --sel-nav-weight: var(--fw-semibold); /* 600 — nhấn nhưng không nặng như heading */ --sel-hover-bg: var(--surface-hover); /* hover PHẢI khác active (trước đây 2 nơi trùng nhau) */ /* ---- CHIP / SEGMENT / NÚT TOGGLE (kiểu S) ---- GIỮ NGUYÊN base/khổ/spacing/icon của từng màn. Chỉ state active dùng chung: nền brand ĐẬM + chữ trắng + weight 600. Đây là kiểu active user chốt; không tạo base nút mới và không biến nút thành browser-default. */ --sel-solid-bg: var(--brand); --sel-solid-text: var(--btn-on); /* ================================================================ QUẦNG FOCUS — dẫn xuất từ --brand ---------------------------------------------------------------- Trước đây focus của TOÀN hệ lấy --tranfer-color (#05595285) khai ở master.css: teal CŨ pha alpha 52% -> viền nhòe, tương phản yếu, và nằm ngoài tokens.css nên đổi brand không kéo theo focus. Nay: viền ĐẶC 1px + ring 3px không nhòe, cùng họ màu --brand. ================================================================ */ --focus-bd: var(--brand); /* viền ô đang focus */ --focus-ring: 0 0 0 3px rgba(37,99,235,.24); /* quầng ngoài = rgba của --brand #2563eb (trước 06/10 là teal #055952) */ --loi-o-ring: 0 0 0 2px rgba(220,38,38,.16); /* quầng ô nhập đang LỖI (= rgba của --btn-danger) */ /* ---- CHIP SỐ THỨ TỰ hàng đợi (worklistTable) ---- */ /* Trước đây worklist gọi var(--stt-bg)/var(--stt-bd) nhưng KHÔNG nơi nào khai -> rơi fallback #2fae5f/#1f8f49 (xanh lá lạc khỏi họ brand). Nay về họ brand để hàng đợi cùng một hệ màu với lưới/badge/nút. */ --stt-bg: var(--brand-2); /* #3b82f6 */ --stt-bd: var(--brand); /* #2563eb */ /* ================================================================ CHIP / BADGE — màu theo ngữ cảnh (giới tính, tuổi, phòng, trạng thái) Mỗi loại có 3 token: -bg (nền), -text (chữ), -border (viền) ================================================================ */ /* Chip mặc định */ --chip-default-bg: #eef3f1; --chip-default-text: #5b7168; --chip-default-border: #e3e7ec; /* Chip giới tính Nam (xanh dương nhạt) */ --chip-male-bg: #e6f0fb; --chip-male-text: #1456a0; --chip-male-border: #cfe0f5; /* Chip giới tính Nữ (hồng nhạt) */ --chip-female-bg: #fbe9f3; --chip-female-text: #a1266f; --chip-female-border: #f3cfe4; /* Chip tuổi (tím nhạt) */ --chip-age-bg: #eef2ff; --chip-age-text: #3730a3; --chip-age-border: #c7d2fe; /* Chip điện thoại (xanh lá nhạt) */ --chip-phone-bg: #ecfdf3; --chip-phone-text: #166534; --chip-phone-border: #bbf7d0; /* Chip phòng (cam nhạt) */ --chip-room-bg: #fff7ed; --chip-room-text: #9a3412; --chip-room-border: #fed7aa; /* Badge dị ứng / nguy hiểm (đỏ nhạt) */ --badge-danger-bg: #fef3f2; --badge-danger-text: #b42318; --badge-danger-border: #fecdc9; /* Badge thành công (xanh lá nhạt) */ --badge-success-bg: #ecfdf3; --badge-success-text: #166534; --badge-success-border: #bbf7d0; /* Badge cảnh báo (vàng nhạt) */ --badge-warn-bg: #fffbeb; --badge-warn-text: #92400e; --badge-warn-border: #fde68a; /* "Đề xuất chính" (phương án bác sĩ chọn) — tím nhánh Ortho-K của quy trình KSCT (đặc tả KSCT-BG-01 mục 10). Viền đậm + chữ: #7e22ce đạt 7,4:1 trên trắng, 7,0:1 trên nền tím nhạt. */ --de-xuat-chinh: #7e22ce; --de-xuat-chinh-bg: #faf5ff; /* Badge thông tin (xanh dương nhạt) */ --badge-info-bg: #eff6ff; --badge-info-text: #1e40af; --badge-info-border: #bfdbfe; /* ---- DATE PICKER ---- */ --date-today-border: #9aa4ad; /* viền ngày hôm nay */ --date-selected: #5b9deb; /* nền ngày được chọn */ /* ---- MENU ACCENT ---- */ --menu-active: #FFC107; /* màu vàng active menu */ /* #################################################################### BẢNG MÀU PHỤ / TÊN CŨ — màu biểu đồ, nhãn, trạng thái; KHÔNG dùng tô NÚT #################################################################### */ /* --btn-primary: xanh dương cũ của "nút chính" (nay nút chính = nhóm Lưu teal). Còn làm màu icon nhóm In, link, accent ở ~46 tệp — giữ giá trị. */ --btn-primary: #2563eb; --btn-primary-hover: #1d4ed8; /* xanh dương */ /* Chữ trong thẻ (thay hồng Bootstrap #e83e8c — 3.4:1, dưới AA) */ --code-text: #c2185b; /* Màu ngữ nghĩa cũ còn được toast/badge và CSS module tham chiếu. Nút hành động được button.css quản lý bằng --button-* / --btn-primary. */ /* Thêm (xanh lá) */ --act-add: #079455; --act-add-hover: #067a46; /* Sửa / Hủy chuyển (cam) */ --act-edit: #d97706; --act-edit-hover: #b45309; /* Xóa (đỏ) */ --act-delete: #dc2626; --act-delete-hover: #b91c1c; /* Lưu (xanh dương) */ --act-save: #175cd3; --act-save-hover: #1447a8; /* In (tím) — TÁCH khỏi Thêm */ --act-print: #6941c6; --act-print-hover: #53389e; /* Hủy / Đóng (xám) — TÁCH khỏi Mặc định */ --act-cancel: #475467; --act-cancel-hover: #344054; /* Mặc định (xanh dương đậm — theo brand) */ --act-default: #1d4ed8; --act-default-hover: #1e40af; /* Tìm / Làm mới (xanh dương — theo brand) */ --act-search: #2563eb; --act-search-hover: #1d4ed8; /* Gọi bệnh nhân (cyan) — TÁCH khỏi Thêm */ --act-call: #0891b2; --act-call-hover: #0e7490; /* OK / Xác nhận (xanh lá nhạt) */ --act-ok: #16a34a; --act-ok-hover: #15803d; /* Chữ trên nút (luôn trắng) */ --act-on: #ffffff; /* ================================================================ BẢNG MÀU GỐC — thang Tailwind (01/10/2026) Màu nhấn riêng từng màn (badge, biểu đồ, cảnh báo…) trước viết hex thẳng; nay gọi var(--pal-*, #cũ). Chỉ khai bậc ĐANG được dùng. Màn mới ưu tiên token ngữ nghĩa (--st-*, --badge-*, --line…); chỉ dùng --pal-* khi cần một sắc cụ thể không có vai trò ngữ nghĩa. KHÔNG đổi giá trị (là thang chuẩn). ================================================================ */ --pal-amber-100: #fef3c7; --pal-amber-200: #fde68a; --pal-amber-300: #fcd34d; --pal-amber-400: #fbbf24; --pal-amber-500: #f59e0b; --pal-amber-700: #b45309; --pal-amber-900: #78350f; --pal-black: #000000; --pal-blue-100: #dbeafe; --pal-blue-200: #bfdbfe; --pal-blue-300: #93c5fd; --pal-blue-600: #2563eb; --pal-blue-700: #1d4ed8; --pal-blue-800: #1e40af; --pal-cyan-600: #0891b2; --pal-cyan-700: #0e7490; --pal-emerald-200: #a7f3d0; --pal-emerald-400: #34d399; --pal-emerald-500: #10b981; --pal-emerald-600: #059669; --pal-emerald-700: #047857; --pal-gray-100: #f3f4f6; --pal-gray-200: #e5e7eb; --pal-gray-400: #9ca3af; --pal-gray-500: #6b7280; --pal-gray-700: #374151; --pal-gray-800: #1f2937; --pal-gray-900: #111827; --pal-green-100: #dcfce7; --pal-green-200: #bbf7d0; --pal-green-300: #86efac; --pal-green-400: #4ade80; --pal-green-500: #22c55e; --pal-green-700: #15803d; --pal-green-800: #166534; --pal-green-900: #14532d; --pal-indigo-50: #eef2ff; --pal-indigo-200: #c7d2fe; --pal-indigo-600: #4f46e5; --pal-neutral-300: #d4d4d4; --pal-neutral-500: #737373; --pal-orange-100: #ffedd5; --pal-orange-200: #fed7aa; --pal-orange-300: #fdba74; --pal-orange-600: #ea580c; --pal-orange-800: #9a3412; --pal-orange-900: #7c2d12; --pal-purple-100: #f3e8ff; --pal-purple-400: #c084fc; --pal-purple-500: #a855f7; --pal-red-100: #fee2e2; --pal-red-200: #fecaca; --pal-red-300: #fca5a5; --pal-red-400: #f87171; --pal-red-500: #ef4444; --pal-red-700: #b91c1c; --pal-red-800: #991b1b; --pal-red-900: #7f1d1d; --pal-rose-600: #e11d48; --pal-rose-700: #be123c; --pal-rose-800: #9f1239; --pal-sky-200: #bae6fd; --pal-sky-600: #0284c7; --pal-sky-700: #0369a1; --pal-slate-200: #e2e8f0; --pal-slate-300: #cbd5e1; --pal-slate-400: #94a3b8; --pal-slate-500: #64748b; --pal-slate-700: #334155; --pal-slate-800: #1e293b; --pal-slate-900: #0f172a; --pal-teal-600: #0d9488; --pal-teal-700: #0f766e; --pal-violet-200: #ddd6fe; --pal-violet-600: #7c3aed; --pal-violet-700: #6d28d9; --pal-white: #ffffff; --pal-yellow-700: #a16207; --pal-zinc-950: #09090b; /* ================================================================ ICON CHUẨN THEO VAI TRÒ (FontAwesome 6 solid) Dùng để tham chiếu, class icon trong HTML vẫn ghi trực tiếp. ================================================================ */ --ico-add: 'fa-plus'; /* Thêm */ --ico-edit: 'fa-pen'; /* Sửa */ --ico-delete: 'fa-trash'; /* Xóa (button) */ --ico-delete-x: 'fa-xmark'; /* Xóa inline */ --ico-save: 'fa-floppy-disk'; /* Lưu */ --ico-print: 'fa-print'; /* In */ --ico-cancel: 'fa-xmark'; /* Hủy / Đóng */ --ico-search: 'fa-rotate'; /* Làm mới / Refresh */ --ico-find: 'fa-magnifying-glass'; /* Tìm kiếm */ --ico-call: 'fa-bullhorn'; /* Gọi bệnh nhân */ --ico-ok: 'fa-check'; /* OK / Duyệt */ --ico-config: 'fa-gear'; /* Cấu hình */ --ico-filter: 'fa-sliders'; /* Lọc nâng cao */ --ico-excel: 'fa-file-excel'; /* Xuất Excel */ --ico-import: 'fa-file-import'; /* Nhập */ --ico-export: 'fa-file-export'; /* Xuất chung */ --ico-history: 'fa-clock-rotate-left'; /* Lịch sử */ --ico-undo: 'fa-rotate-left'; /* Hủy duyệt / Hoàn tác */ --ico-ban: 'fa-ban'; /* Cấm / Hủy gửi */ } /* Ô nhập đang LỖI (wdThongBao.loiO, 05-dialog-button.js): đổi token viền/quầng TẠI CHỖ. Các rule viền ô của bootStrapCustom/giao diện (đều !important) đọc var(--line)/var(--focus-bd)/var(--focus-ring) nên đổi token là thắng được mà không phải thêm !important. Đặt ở đây vì là khai lại token toàn cục. */ .wd-o-loi { --line: var(--btn-danger); --line-2: var(--btn-danger); --focus-bd: var(--btn-danger); --focus-ring: var(--loi-o-ring); } /* Thiết bị cảm ứng (máy bảng): nút nhỏ 24px khó chạm đúng bằng ngón tay. Nâng ngay ở token để mọi màn nhận theo, chuột không đổi. */ @media (pointer: coarse) { :root { --btn-h-sm: 30px; --h-input-sm: 32px; --ft-btn-h: 34px; --ft-bar-h: 38px; } }