/* ============================================================================ COMPONENT "ĐANG CHỌN / ACTIVE" DÙNG CHUNG — 1 nguồn, 4 kiểu ---------------------------------------------------------------------------- Trước file này: 28+ điểm khai active cho item danh sách + 38 biến thể tab/segment/chip, 5 tên class trạng thái, 18 cơ chế thị giác, 6 màu lạc họ (#FFC107, #0a8f7e, #dbeafe, #2563eb, #a7141c, #16a34a). Xem kiểm kê hiện trạng: docs/mocks/active-state-variants-mock.html BỐN KIỂU (khác nhau theo VAI TRÒ, không theo màn): N .cs-nav-item mục ĐIỀU HƯỚNG (menu, cây danh mục/module, phân loại). Luôn hiện diện -> nền NHẠT + vạch TRÁI 3px. T .cs-tab tab / sub-tab ngang. Nền NHẠT + vạch DƯỚI 2px (cùng "gia đình" với N). S .cs-seg > button chip / nút toggle / segmented loại trừ nhau. Nền ĐẶC brand + chữ trắng (phải thấy ngay cái đang bật). R hàng DỮ LIỆU bản ghi từ DB (bệnh nhân, phiếu, kho, ICD...). Lựa chọn TẠM -> nền ĐẬM + vạch TRÁI 4px. GIỮ NGUYÊN chuẩn đã chốt 2026-08-13 (có contract test). Chọn N hay R: mục do PHẦN MỀM định nghĩa (hữu hạn, không đổi theo dữ liệu) -> N. Bản ghi do DB sinh -> R. TRẠNG THÁI: nhận cả 6 tên class đang tồn tại trong repo (.active .on .sel .selected .is-active .is-selected) để markup cũ dùng được ngay; markup mới nên dùng .cs-* + .active. THỨ TỰ NẠP: file này nạp CUỐI (_MainLayout.cshtml) nên thắng CSS từng màn mà KHÔNG cần !important cho N/T/S. Riêng kiểu R giữ !important vì phải thắng style inline/inject của Tabulator và module-dark.css. THÊM MÀN MỚI: dùng class .cs-nav-item / .cs-tab / .cs-seg và KHÔNG khai lại nền/vạch/màu chữ active trong CSS màn. Danh sách "nhận chuẩn" dưới đây là cầu cho markup CŨ, sẽ rút dần khi từng màn đổi sang class .cs-*. ============================================================================ */ /* ============================================================================ KIỂU N — MỤC ĐIỀU HƯỚNG DỌC ============================================================================ */ :is( .cs-nav-item, .chh-item, /* Cấu hình hệ thống — menu trái */ .dmc-item, /* Danh mục chung — menu trái */ .ns-dm-item, /* Nhân sự — cây danh mục */ .vertical-menu li, /* menu dọc legacy (bỏ chữ vàng #FFC107) */ .wd-cat, /* Start menu — cột phân loại */ .wd-winlist-item, /* danh sách cửa sổ đang mở */ .wd-ct, /* Chat — hàng danh bạ/hội thoại */ .hc-menu-item, /* Danh mục nhóm Hành chính / Thu chi — menu trái */ .clsv-item /* CLS viewer — cây kết quả */ ):is(.active, .on, .sel, .selected, .is-active, .is-selected) { /* !important vì nhiều base của màn scope bằng #id (vd `#tkWin .hchip`, `#dmcCTTabs .dmcCTTab`) nên thắng mọi selector class. Đây là chủ đích: component SỞ HỮU diện mạo trạng thái chọn, màn không override. */ background: var(--sel-nav-bg) !important; border-left-color: transparent !important; /* nơi nào còn border-left thật thì không đẩy chữ */ box-shadow: inset var(--sel-nav-bar-w) 0 0 var(--sel-nav-bar) !important; color: var(--sel-nav-text) !important; font-weight: var(--sel-nav-weight); } /* Icon đi theo chữ để mục đang chọn đọc được thành một khối. */ :is(.cs-nav-item, .chh-item, .dmc-item, .ns-dm-item, .wd-cat, .wd-winlist-item, .wd-ct, .hc-menu-item, .clsv-item):is(.active, .on, .sel, .selected, .is-active, .is-selected) > i { color: var(--sel-nav-bar) !important; } :is(.cs-nav-item, .chh-item, .dmc-item, .ns-dm-item, .vertical-menu li, .wd-cat, .wd-winlist-item, .wd-ct, .hc-menu-item, .clsv-item):hover:not(.active):not(.on):not(.sel):not(.selected):not(.is-active):not(.is-selected) { background: var(--sel-hover-bg); } /* ============================================================================ KIỂU T — TAB / SUB-TAB NGANG ============================================================================ */ :is( .cs-tab, .dash-tab, /* Tổng quan báo cáo */ .pqm-tab, /* Phân quyền */ .kb-room-tab, /* Khám bệnh — tab phòng (gộp 2 ngữ cảnh, bỏ vạch đỏ) */ .kb-ck-tab, /* Khám bệnh — tab chuyên khoa */ .nh-form-tab, /* KB Nhi */ .sp-form-tab, /* KB Sản phụ */ .tck-kind, /* Thu/Chi khác — loại nghiệp vụ */ .tt-tab, /* Thu trước */ .dsct-tab, /* Đối soát chứng từ (bỏ vạch mép trên) */ .nth-tab, /* Danh mục — nơi thực hiện */ .nhom-tab, /* Danh mục — nhóm */ .tl-bot-tab, /* Danh mục — khoa phòng, tab dưới */ .dmc-nut.dkk-tab, /* Danh mục — khoa/kho */ .dmcCTTab, /* Danh mục — chi tiết */ .nv-tab, /* Nhân viên (DM) */ .nv-subtab, .ns-win-tab, /* Nhân sự — chuyển màn (bỏ vạch mép trên) */ .hc-nv-subtab, /* Nhân sự — 3 họ subtab gộp về 1 cơ chế */ .hc-nv-sstab, .hc-nv-ftab, .ltt-tab, /* Làm thủ thuật */ .rp-side-tab, /* Report designer */ .rp-props-tab, .ps-tab, .vd-tab, .mb-tab, .dd-tab, .rs-tab, /* Cấu hình mẫu in */ .clsv-tab, /* CLS viewer (trước đây không có vạch) */ .lh-tab, /* Lịch hẹn + Tiếp đón (2 màn trùng tên class) */ .module-tab, .queue-tab, .wd-set-tab, /* panel Cá nhân hóa */ .wd-task, /* taskbar — app đang mở */ .wd-taskpin, /* taskbar — app ghim */ .wd-winlist-btn, /* nút danh sách cửa sổ */ .tck-tabs > button /* Tổng hợp thu/chi khác */ ):is(.active, .on, .sel, .selected, .is-active, .is-selected) { /* !important: xem lý do ở kiểu N. */ background: var(--sel-nav-bg) !important; /* CHỈ inset shadow vẽ vạch: border thật làm tab dịch 2px, dùng cả hai sẽ chồng vạch. */ border-bottom-color: transparent !important; box-shadow: inset 0 calc(-1 * var(--sel-tab-bar-w)) 0 var(--sel-nav-bar) !important; color: var(--sel-nav-text) !important; font-weight: var(--sel-nav-weight); } :is(.cs-tab, .dash-tab, .pqm-tab, .kb-room-tab, .kb-ck-tab, .nh-form-tab, .sp-form-tab, .tck-kind, .tt-tab, .dsct-tab, .nth-tab, .nhom-tab, .tl-bot-tab, .dmcCTTab, .nv-tab, .nv-subtab, .ns-win-tab, .hc-nv-subtab, .hc-nv-sstab, .hc-nv-ftab, .ltt-tab, .rp-side-tab, .rp-props-tab, .ps-tab, .vd-tab, .mb-tab, .dd-tab, .rs-tab, .clsv-tab, .lh-tab, .module-tab, .queue-tab):is(.active, .on, .sel, .selected, .is-active, .is-selected) > i { color: var(--sel-nav-bar) !important; } /* Hover tab phải nhạt hơn active, nếu không hai tab trông như cùng được chọn. */ :is(.cs-tab, .dash-tab, .pqm-tab, .kb-ck-tab, .nh-form-tab, .sp-form-tab, .tck-kind, .tt-tab, .dsct-tab, .nth-tab, .nhom-tab, .tl-bot-tab, .dmcCTTab, .nv-subtab, .ns-win-tab, .hc-nv-subtab, .hc-nv-sstab, .hc-nv-ftab, .ltt-tab, .rp-side-tab, .rp-props-tab, .ps-tab, .vd-tab, .mb-tab, .dd-tab, .rs-tab, .clsv-tab, .lh-tab, .module-tab, .queue-tab):hover:not(.active):not(.on):not(.sel):not(.selected):not(.is-active):not(.is-selected) { background: var(--sel-hover-bg); color: var(--sel-nav-text); } /* ============================================================================ KIỂU S — CHIP / SEGMENT / NÚT TOGGLE ---------------------------------------------------------------------------- GIỮ NGUYÊN base/khổ/spacing/icon của từng màn. Component CHỈ sở hữu state: active = nền brand ĐẬM + chữ trắng + weight 600 (user chốt). Không định nghĩa base button, không sinh kiểu nút mới, không làm nút thành browser-default. ============================================================================ */ :is( .cs-seg > button, .tc-seg-btn, /* Thu/Chi tiền — Lập/Xem phiếu */ .hchip, /* Tồn kho — chip lọc */ .hc-nv-chip, /* Nhân sự — chip khoa */ .tl-chip, /* Nhãn khoa / Trả lại — chip phiếu */ .nh-metric-btn, /* KB Nhi — chỉ số */ .nk-condition-btn, /* Nha khoa — tình trạng */ .nk-surface-btn, /* Nha khoa — mặt răng (bỏ xanh dương) */ .rs-toggle, /* Cấu hình mẫu in — bật/tắt xem trước */ .cd-media-editor-tools .btn, /* CĐHA — công cụ ảnh (bỏ màu hàng dữ liệu) */ .th-segment > button, /* Tổng hợp thu chi — segmented Ngày/Ca */ .dmg-modeswitch > button, /* Lưới dùng chung — 3 chế độ nhập */ .dmc-lo-switch button, /* Danh mục — lọc lô */ .dkk-lo-switch button, /* Danh mục Khoa/Kho — lọc lô */ .dmc-ct-optbtn, /* Danh mục — tuỳ chọn chi tiết */ .goi-loaibar button, /* Danh mục Gói — loại gói */ .goi-seg button, /* Danh mục Gói — segment nội dung */ .rp-seg button, /* Hộp thoại IN — phạm vi ghi nhớ */ .his-toast-cfg .grid button, /* Cấu hình thông báo */ .cp-flag, /* Lưới chi phí — cờ ĐL/KQ/ĐT */ .wd-set-opt, /* Shell — tuỳ chọn cá nhân hoá */ .wd-ip-i, /* Shell — bộ chọn icon */ .wd-wg-add /* Shell — thêm widget */ ):is(.active, .on, .sel, .selected, .is-active, .is-selected) { /* !important: xem lý do ở kiểu N. Chỉ đổi STATE, không đụng base nút. */ background: var(--sel-solid-bg) !important; border-color: var(--sel-solid-bg) !important; color: var(--sel-solid-text) !important; font-weight: var(--sel-nav-weight); } /* Con bên trong chip đang bật đi theo màu trắng của state active. */ :is(.cs-seg > button, .tc-seg-btn, .hchip, .hc-nv-chip, .tl-chip, .nh-metric-btn, .nk-condition-btn, .nk-surface-btn, .rs-toggle, .cd-media-editor-tools .btn, .dmg-modeswitch > button, .dmc-lo-switch button, .dkk-lo-switch button, .dmc-ct-optbtn, .goi-loaibar button, .goi-seg button, .rp-seg button, .his-toast-cfg .grid button, .cp-flag, .wd-set-opt, .wd-ip-i, .wd-wg-add):is(.active, .on, .sel, .selected, .is-active, .is-selected) :is(i, b, em, small, span) { color: inherit; } /* ============================================================================ SCOPE NỀN TỐI — shell desktop và chat giữ họ màu riêng, KHÔNG đổi cơ chế ---------------------------------------------------------------------------- Taskbar/Start menu/titlebar nằm trên nền tối: brand-soft sẽ chói và brand-dark mất tương phản. Ở đây chỉ TRỎ LẠI token, cơ chế (nền + vạch + weight) vẫn là cơ chế chung ở trên. ============================================================================ */ .wd-taskbar, .wd-launcher-cats, .wd-winlist-panel, .wd-set-tabs, .wd-mi { /* Fallback bắt buộc: nhóm token --panel-… và --accent-color khai ở home-desktop.css. Nếu trang không nạp file đó thì var() rỗng làm cả khai báo INVALID và state biến mất. */ --sel-nav-bg: var(--panel-active, rgba(255, 255, 255, .18)); --sel-nav-bar: var(--accent-color, #2dd4bf); --sel-nav-text: inherit; --sel-hover-bg: var(--panel-hover, rgba(255, 255, 255, .10)); /* Vùng shell dùng accent riêng thay cho brand hệ nghiệp vụ. */ --sel-solid-bg: var(--accent-color, #2dd4bf); --sel-solid-text: #fff; } /* Các control shell chưa có parent chung ổn định: trỏ token trực tiếp trên chính control. */ :is(.wd-set-opt, .wd-ip-i, .wd-wg-add) { --sel-solid-bg: var(--accent-color, #2dd4bf); --sel-solid-text: #fff; } /* Menu titlebar đặt state ở cha (.wd-mi.active > .wd-mi-top) nên phải bắt riêng. */ .wd-mi:is(.active, .on) > .wd-mi-top { background: var(--sel-nav-bg) !important; box-shadow: inset 0 calc(-1 * var(--sel-tab-bar-w)) 0 var(--sel-nav-bar) !important; color: var(--sel-nav-bar) !important; font-weight: var(--sel-nav-weight); } .wd-mi:is(.active, .on) > .wd-mi-top i { color: var(--sel-nav-bar) !important; opacity: 1; } /* Chat dùng accent xanh dương riêng (--wd-accent) cho toàn bộ khối: hàng danh bạ (kiểu N) và tab tìm/media/emoji (kiểu S) đều chỉ TRỎ LẠI token, cơ chế vẫn là cơ chế chung. */ .wd-chat, .wd-chat-side, .wd-chat-emo, .wd-find, .wd-media { --sel-nav-bg: color-mix(in srgb, var(--wd-accent, #2563eb) 15%, transparent); --sel-nav-bar: var(--wd-accent, #2563eb); --sel-nav-text: inherit; --sel-solid-bg: var(--wd-accent, #2563eb); --sel-solid-text: #fff; } :is(.wd-find .sc .tab, .wd-media .tab, .wd-chat-emo .emo-tab):is(.active, .on) { background: var(--sel-solid-bg) !important; border-color: var(--sel-solid-bg) !important; color: var(--sel-solid-text) !important; font-weight: var(--sel-nav-weight); } /* ============================================================================ TẦNG FOCUS BÀN PHÍM — trước đây KHÔNG tồn tại ---------------------------------------------------------------------------- tokens.css có --focus-bd/--focus-ring nhưng không nơi nào áp lên item danh sách, trong khi item lại là