/* CLINIC-SCOPE: shared */ /* ============================================================================ giao-dien-phang.css — LỚP GLOBAL OVERRIDE: bo góc vuông + phẳng bóng (trước 2026-09-21 tên là win8.css — "win8" chỉ là nguồn cảm hứng thiết kế Windows 8 "Lai vừa phải", không nói lên file này LÀM GÌ) ---------------------------------------------------------------------------- MỤC ĐÍCH: ép TOÀN HỆ THỐNG về gần vuông (radius ~2px) + phẳng bóng + header phẳng đặc, kể cả các màn HARDCODE radius (không dùng var(--radius)). NẠP CUỐI trong _MainLayout.cshtml (sau bootStrapCustom.css) để thắng specificity. NGUYÊN TẮC: - Giữ nguyên màu brand teal-lá, bố cục, nghiệp vụ. CHỈ đổi bo góc/bóng/header. - CHỪA border-radius:50% (avatar/icon/spinner tròn) — KHÔNG dùng '* { }'. - Dễ revert: gỡ 1 dòng này + trả token radius/shadow ở tokens.css. Tài liệu: docs/design.md · Spec: docs/superpowers/specs/2026-07-04-win8-lai-vua-phai-design.md ============================================================================ */ /* ---- Biến radius (phòng khi màn nào tham chiếu) đã về 2px ở tokens.css ---- */ /* ---- Tối ưu không gian workspace: bỏ thanh tiêu đề chung của từng màn ---- Tên màn đã có ở tab desktop; giữ lại toàn bộ header nghiệp vụ nằm trong nội dung. */ .ws > .ws-top { display:none !important; } /* ---- CÙNG MỤC ĐÍCH — các màn KHÔNG dựng theo khuôn `.ws > .ws-top` ---- Chúng tự đặt tên class riêng nên rule trên không với tới. Selector nào cũng neo vào phần tử GỐC của màn + dấu `>` để KHÔNG đụng class trùng tên ở modal / panel con (vd `.hd` của UIChat & Hóa đơn điện tử, `.tl-top` bố cục Khoa-Kho, `.th-top` modal Kê tiêu hao). ẨN chứ không xoá thẻ: nhiều header chứa element JS đang trỏ tới (#cdTieuDe, #dmcTitle) — xoá thẻ là vỡ JS. Muốn trả lại: gỡ khối này. */ /* Cận lâm sàng */ #nbpRoot > .hd, /* Nhận bệnh phẩm */ #lqxRoot > .hd, /* Lập KQ xét nghiệm */ #cdhaRoot > .ws-top, /* Lập kết quả CĐHA */ /* Dược */ .nk-ws > .nk-top, /* Nhập kho */ .xk-ws > .xk-top, /* Xuất kho */ .dc-ws > .dc-top, /* Cấp phát thuốc — quầy dược */ #tkWin > .tk-top, /* Tra cứu tồn kho */ .dt-ws > .dt-top, /* Duyệt dự trù tủ trực */ .bt-ws > .bt-top, /* Bù cơ số tủ trực */ .dtpk-ws > .dtpk-top, /* Duyệt dự trù phát kho (lọt lưới tới 2026-08-13) */ /* Nhà thuốc */ .bl-ws > .bl-top, /* Bán lẻ vãng lai + Bán lẻ giá danh mục */ .tl-ws > .tl-top, /* Trả lại nhà thuốc */ .th-ws > .th-top, /* Tổng hợp bán lẻ */ .nv-ws > .nv-top, /* Đơn ngoại viện */ .ls-ws > .ls-top, /* Lịch sử thuốc */ /* Danh mục */ .nhom-wrap > .nhom-top, /* 8 màn nhóm danh mục */ .dmc-wrap > .dmc-bar { /* Danh mục cha-con */ display: none !important; } /* Hub /DanhMuc: GIỮ thanh (có nút Về trang chủ + ô tìm) — chỉ bỏ chữ tiêu đề thừa. Chừa `.dmh-bar` trong dialog Quản lý nhóm (cần tiêu đề để biết đang ở hộp thoại). */ .dmh-top > .dmh-bar > .dmh-title { display: none !important; } /* ============================================================================ 1) ÉP BO GÓC ~2px cho MỌI khối chữ nhật phổ biến Liệt kê selector tường minh (KHÔNG dùng '*') để chừa avatar/icon/spinner tròn. NÚT: từ 29/09/2026 bo góc + kích thước nút lấy từ partCss/button.css (--radius-btn 4px, ép trong @layer clinic-buttons nên THẮNG các dòng 2px dưới đây). Giữ .btn/.button trong danh sách để .btn-link/.close không rơi về bo góc mặc định của Bootstrap. ============================================================================ */ .btn, .button, .card, .card-header, .card-footer, .card-body, .panel, .panel-heading, .panel-body, .modal-content, .modal-header, .modal-footer, .dropdown-menu, .dropdown-item, .alert, .toast, .popover, .tooltip-inner, .badge, .pill, .chip, .tag, .list-group, .list-group-item, .nav-tabs, .nav-pills, .nav-link, .tab, input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea, .form-control, .form-select, .input-group, .input-group-text, .ts-wrapper, .ts-control, .ts-dropdown, .flatpickr-calendar, .flatpickr-day, .tabulator, .tabulator .tabulator-header, .tabulator .tabulator-col, table, thead th, tbody td, .ws-btn, .ws-collapse-btn, .rp-main-btn, .rp-arrow-btn, .filt, .pcard, .divTitle, .ct-form, .ct-wrap, .ss-body, .ss-filter, .dm-detail, .dm-list, .dm-page, .qdt-pane, .ktd-card, .kb-ident, .kb-card, .kb-box { border-radius: 2px !important; } /* Ngoại lệ: hộp thông báo/xác nhận CHUNG là lớp nổi -> --radius-noi (4px). Id thắng luật ép 2px ở trên. */ #globalBootstrapModal .modal-content { border-radius: var(--radius-noi, 4px) !important; overflow: hidden; } /* Ô đầu/cuối trong nhóm bo góc kép (input-group, split-button) — giữ mép 2px 2 đầu */ .input-group > :first-child, .rp-main-btn { border-top-left-radius: 2px !important; border-bottom-left-radius: 2px !important; } .input-group > :last-child, .rp-arrow-btn { border-top-right-radius: 2px !important; border-bottom-right-radius: 2px !important; } /* ---- CHỪA TRÒN: KHÔNG ép các phần cố ý tròn ---- */ .rounded-circle, .avatar, .kb-ava, .spinner-border, .ws-body::after, [style*="border-radius:50%"], [style*="border-radius: 50%"] { border-radius: 50% !important; } /* ============================================================================ 1b) PHỦ RỘNG — quét mọi khối chữ nhật hardcode radius ở CÁC MODULE (314 chỗ rải rác 30+ file). Dùng [class*=] cho từ khóa KHỐI phổ biến, kèm :not(...) CHỪA phần tròn cố ý (avatar/dot/badge-pill/switch/scrollbar). AN TOÀN: chỉ ÉP VUÔNG (2px), KHÔNG ép ngược 50% (ép 50% lên khối chữ nhật → elip méo). Phần vốn tròn nằm trong :not() nên rule này không đụng tới, các khai báo 50%/999px trong CSS module giữ nguyên hiệu lực. Không nhắm scrollbar, avatar, dot, switch, toggle, count/cnt (badge viên thuốc). ============================================================================ */ :where( [class*="card"], [class*="box"], [class*="panel"], [class*="wrap"], [class*="tile"], [class*="head"], [class*="filter"], [class*="detail"], [class*="-list"], [class*="pane"], [class*="-form"], [class*="-cell"], [class*="-item"], [class*="-btn"], [class*="-tab"], [class*="chip"], [class*="thumb"], [class*="field"], [class*="input"], [class*="select"], [class*="modal"], [class*="menu"], [class*="alert"], [class*="note"], [class*="section"], /* Tiền tố phân hệ (class tên riêng, không chứa từ khóa chung) */ [class^="kb-"], [class^="kedv-"], [class^="pt-"], [class^="td-"], [class^="tn-"], [class^="tt-"], [class^="duoc-"], [class^="nt-"], [class^="pq-"], [class^="pqm-"], [class^="tkai-"], [class^="lh-"], [class^="dm-"], [class^="ct-"], [class^="ss-"], [class^="qdt-"], [class^="ktd-"], [class^="xn-"], [class^="cls-"], [class^="db-"], [class^="rp-"], [class^="vp-"] ):not( .rounded-circle, .rounded-pill, .avatar, [class*="ava"], [class*="dot"], [class*="switch"], [class*="toggle"], [class*="cdel"], [class*="scrollbar"], [class*="cnt"], [class*="count"], [class*="spinner"], [class*="online"], [class*="circle"], [class*="badge-pill"] ) { border-radius: 2px !important; } /* ============================================================================ 2) LÀM PHẲNG — giảm/bỏ bóng đổ mềm (giữ bóng modal cho tách lớp) ============================================================================ */ .card, .panel, .pcard, .kb-ident, .kb-card, .divTitle, .ct-form, .ct-wrap, .ss-body, .ss-filter, .dm-detail, .dm-list, .qdt-pane, .ktd-card, .dropdown-menu, .btn, .button, .ws-btn { box-shadow: none !important; } /* Modal vẫn cần bóng nhẹ để nổi trên overlay (không phẳng hẳn) */ .modal-content { box-shadow: 0 12px 40px rgba(0,0,0,.24) !important; } /* ============================================================================ 3) HEADER PHẲNG ĐẶC — bỏ gradient teal→dark, dùng 1 màu brand đặc (.ws-top trong lamviec.css đã đặc sẵn; rule này bao các header còn gradient) ============================================================================ */ .ws-top, .bar, .app-bar, .page-header, .head-bar, .divTitle { background-image: none !important; } /* ============================================================================ 4) TINH CHỈNH nhỏ theo chất Metro (đường viền sắc, đầu bảng cứng cáp) ============================================================================ */ /* Card viền mảnh sắc thay vì mờ */ .card, .panel, .pcard { border: 1px solid var(--line, #e5e7eb) !important; } /* Đầu bảng: gạch chân brand mảnh cho cảm giác Metro (không đổi màu nền có sẵn) */ .tabulator .tabulator-header { border-bottom: 2px solid var(--brand, #1d6f5c) !important; } /* ============================================================================ 5) CONTROL RHYTHM - dong bo chieu cao label/input/button/row tren cac man HIS Chi chuan hoa height/line-height, khong can thiep width de giu bo cuc hien tai. ============================================================================ */ :root { --cs-label-h: 16px; --cs-control-h: var(--h-input-compact, var(--h-input, 32px)); --cs-control-line: calc(var(--cs-control-h) - 2px); --cs-table-row-h: 34px; --cs-list-row-h: 40px; } textarea { resize: none !important; } /* VẾ TỔ TIÊN = CLASS TƯỜNG MINH, KHÔNG dùng [class^="kb-"]… (2026-09-28): khớp tổ tiên theo attribute `class` làm MỌI lần thêm/bỏ class ở bất kỳ đâu tính lại style cả cây con (~46ms mỗi lần, kéo cột / chọn dòng đều khựng). Danh sách = class ĐẦU của phần tử mang tiền tố phân hệ, sinh bằng `node _tools/css-scope/sinh-danh-sach-class.js` — màn mới thêm class tiền tố thì chạy lại. */ :where( .ws, .rxk, .dc-ws, .nk-ws, .xk-ws, .tk-ws, .bl-ws, .nv-ws, .pqm-root, #nbpRoot, #lkqRoot, #cdhaRoot, #divFormDK, /**/ .dm-empty, .dm-rowdetail, .kb-addr, .kb-admin-chip, .kb-admin-contact, .kb-admin-meta, .kb-badge, .kb-cd-row, .kb-cds-chips, .kb-cds-tim, .kb-cds-x, .kb-chip, .kb-chips, .kb-chuyenphong, .kb-chuyenphong-actions, .kb-ck-gon, .kb-ck-right, .kb-ck-setting, .kb-ck-tab, .kb-ck-tabs, .kb-ck-ten, .kb-ckcfg, .kb-cockpit, .kb-config-actions, .kb-config-effective, .kb-config-priority, .kb-config-table, .kb-context-row, .kb-cp-save, .kb-ctx-i, .kb-detail-wide, .kb-details, .kb-details-body, .kb-details-close, .kb-details-diagnosis, .kb-details-head, .kb-dx, .kb-dx-body, .kb-dx-h, .kb-dx-tbl, .kb-expand, .kb-expand-btn, .kb-field, .kb-filter, .kb-gp, .kb-gp-cat, .kb-gp-hd, .kb-gp-menu, .kb-gp-menu-ds, .kb-gp-menu-ghi, .kb-gp-menu-h, .kb-gp-noi, .kb-gp-nut, .kb-gp-ten, .kb-gp-than, .kb-gp-tt, .kb-ha-sep, .kb-hd-ctx, .kb-hd-row, .kb-hd-status, .kb-header-alert, .kb-id-contact, .kb-id-l1, .kb-id-main, .kb-id-meta, .kb-id-name, .kb-id-side, .kb-idbox, .kb-ident, .kb-ident-alert, .kb-ident-allergy, .kb-ident-note, .kb-info-button, .kb-kbcard, .kb-kbcard-b, .kb-kbcard-h, .kb-kbcard-links, .kb-list-head-tools, .kb-makcb, .kb-makcb-ico, .kb-makcb-wrap, .kb-mau, .kb-mau-them, .kb-mnd, .kb-mnd-act, .kb-mnd-chk, .kb-mnd-ds, .kb-mnd-form, .kb-mnd-ghi, .kb-mnd-item, .kb-mnd-lay, .kb-mnd-ndh, .kb-mnd-ten, .kb-mnd-trai, .kb-mnd-trai-h, .kb-mnd-trong, .kb-mnd-xem, .kb-o, .kb-o-ghi, .kb-o-hd, .kb-prescription, .kb-queue-capcuu, .kb-queue-priority, .kb-queue-search, .kb-queue-search-trigger, .kb-queue-wait, .kb-registered, .kb-room-state, .kb-room-tabs, .kb-row, .kb-row-actions, .kb-screen-config, .kb-screen-order, .kb-screen-order-act, .kb-screen-order-empty, .kb-screen-order-item, .kb-screen-order-label, .kb-screen-order-lock, .kb-screen-order-name, .kb-screen-order-no, .kb-screen-order-tag, .kb-screen-state, .kb-scroll, .kb-search-btn, .kb-tb-group, .kb-toolbar, .kb-toprow, .kb-tt, .kb-tt-im, .kb-tt-line1, .kb-tt-main, .kb-tt-side, .kb-unit, .kb-vbox, .kb-vcard, .kb-vcard-b, .kb-vcard-hd, .kb-vcard-ten, .kb-vcopy, .kb-vexpand, .kb-vital-trend, .kb-vmore, .kb-vnhom, .kb-vr, .kb-vtools, .kedv-col, .kedv-cols, .kedv-phieu, .kedv-phieu-head, .kedv-phieu-list, .lh-action, .lh-b-center, .lh-b-create, .lh-b-filter-row, .lh-b-layout, .lh-b-period-filter, .lh-b-period-separator, .lh-b-person, .lh-b-priority-head, .lh-b-priority-list, .lh-b-priority-row, .lh-b-priority-shell, .lh-b-rail, .lh-b-rail-head, .lh-b-rank, .lh-b-room, .lh-b-room-card, .lh-b-side, .lh-b-source-card, .lh-b-source-date, .lh-b-source-head, .lh-b-source-name, .lh-b-source-panel, .lh-b-source-row, .lh-b-source-tabs, .lh-b-states, .lh-b-time, .lh-b-total, .lh-b-wait, .lh-b-work, .lh-cal-locked, .lh-calendar-grid, .lh-calendar-nav, .lh-calendar-picker, .lh-calendar-toolbar, .lh-calendar-week, .lh-cancel-back, .lh-cancel-confirm, .lh-cancel-form, .lh-config-actions, .lh-config-footer, .lh-config-preview-head, .lh-config-scope, .lh-config-slot, .lh-config-table, .lh-config-table-wrap, .lh-create-calendar, .lh-create-layout, .lh-datungkham-doi, .lh-datungkham-msg, .lh-day-bar, .lh-day-no, .lh-day-ok, .lh-day-row, .lh-day-title, .lh-day-toggle, .lh-day-track, .lh-dvhen-act, .lh-dvhen-btn, .lh-dvhen-ct, .lh-dvhen-ctnote, .lh-dvhen-empty, .lh-dvhen-gia, .lh-dvhen-giam, .lh-dvhen-list, .lh-dvhen-note, .lh-dvhen-pick, .lh-dvhen-row, .lh-dvhen-tag, .lh-dvhen-ten, .lh-dvhen-tong, .lh-dvhen-warn, .lh-editor-fields, .lh-field-error, .lh-field-invalid, .lh-followup-actions, .lh-followup-number, .lh-group-toolbar, .lh-hidden-datetime, .lh-identity-name, .lh-kind, .lh-mini-btn, .lh-overview-nav, .lh-referrer-actions, .lh-referrer-form, .lh-repeat-count, .lh-repeat-row, .lh-room-fill, .lh-room-label, .lh-room-list, .lh-room-row, .lh-room-track, .lh-row-actions, .lh-row-kind, .lh-screen, .lh-section-head, .lh-side-meta, .lh-side-name, .lh-slot-grid, .lh-slot-note, .lh-slot-picker, .lh-source-select, .lh-stat, .lh-stat-copy, .lh-stat-mark, .lh-stat-value, .lh-status, .lh-suggest, .lh-suggest-empty, .lh-suggest-meta, .lh-suggest-name, .lh-tab, .lh-tab-actions, .lh-tab-context, .lh-tab-filter, .lh-tab-group, .lh-tab-search, .lh-table, .lh-table-actions, .lh-table-empty, .lh-tabs, .lh-tk-time-bar, .lh-tk-time-field, .lh-tk-time-fields, .lh-workflow, .nt-foot, .nt-grid, .nt-gridwrap, .nt-in, .nt-sum, .nt-warn, .pqm-avatar, .pqm-body, .pqm-empty, .pqm-form, .pqm-form-actions, .pqm-form-check, .pqm-lookup, .pqm-lookup-body, .pqm-lookup-columns, .pqm-lookup-empty, .pqm-lookup-group, .pqm-lookup-person, .pqm-lookup-summary, .pqm-lookup-tabs, .pqm-main, .pqm-matrix-wrap, .pqm-pane, .pqm-pane-toolbar, .pqm-role-act, .pqm-role-acts, .pqm-role-chips, .pqm-role-list, .pqm-role-meta, .pqm-root, .pqm-side, .pqm-tab, .pqm-tabs, .pqm-title, .pqm-topbar, .pqm-unit, .pqm-user-check, .pqm-user-head, .pqm-user-list, .pqm-user-name, .pqm-user-row, .pqm-user-state, .pqm-user-toolbar, .pqm-user-wrap, .pqm-username, .pt-bar, .pt-cd, .pt-cd-nhan, .pt-gap, .pt-giua, .pt-nhay, .pt-so, .qdt-duoi-body, .qdt-fld, .qdt-form, .qdt-tat, .qdt-them, .qdt-them-ds, .qdt-them-nhan, .rp-act, .rp-actions, .rp-add, .rp-appr, .rp-arrow-btn, .rp-busy-card, .rp-busy-mask, .rp-busy-spin, .rp-busy-text, .rp-cancel, .rp-caret-off, .rp-check, .rp-checked, .rp-cho-cauhinh, .rp-cnt, .rp-cond-ctrl, .rp-cond-label, .rp-cond-row, .rp-def-badge, .rp-default, .rp-defparam-list, .rp-dp-close, .rp-dp-title, .rp-empty, .rp-field-search, .rp-foot, .rp-foot-actions, .rp-foot-file, .rp-foot-info, .rp-format-badge, .rp-format-empty, .rp-format-item, .rp-format-open, .rp-format-remove, .rp-hd, .rp-head, .rp-head-l, .rp-head-title, .rp-help-box, .rp-help-mask, .rp-hidecaret-cb, .rp-host, .rp-ins-chk, .rp-ins-unit, .rp-left-collapsed, .rp-link-hd, .rp-link-it, .rp-link-menu, .rp-list, .rp-loi, .rp-loi-noidung, .rp-loi-nut, .rp-loi-tieude, .rp-main-btn, .rp-map-add, .rp-map-fallback, .rp-map-preset-dialog, .rp-map-preset-foot, .rp-map-preset-list, .rp-map-preset-row, .rp-map-row, .rp-map-tools, .rp-menu, .rp-name, .rp-nm, .rp-noremember, .rp-panel-toggle, .rp-paper-cb, .rp-pg, .rp-pg-btns, .rp-pg-chk, .rp-pg-color, .rp-pg-group-body, .rp-pg-group-head, .rp-pg-key, .rp-pg-row, .rp-pg-unit, .rp-pg-val, .rp-preview-close, .rp-preview-frame, .rp-preview-overlay, .rp-print-sel, .rp-proc-row, .rp-props, .rp-props-del, .rp-props-empty, .rp-props-head, .rp-props-head-main, .rp-props-panel, .rp-props-resizer, .rp-props-tab, .rp-props-tabs, .rp-props-titlebar, .rp-props-view, .rp-ptype, .rp-ptype-wrap, .rp-ready, .rp-remember, .rp-remember-cb, .rp-retry, .rp-right-collapsed, .rp-row, .rp-runtime-actions, .rp-runtime-empty, .rp-runtime-head, .rp-runtime-info, .rp-runtime-item, .rp-runtime-list, .rp-runtime-no-value, .rp-runtime-param, .rp-runtime-split, .rp-runtime-title, .rp-seg, .rp-send, .rp-settings-heading, .rp-settings-section, .rp-side-pane, .rp-side-panes, .rp-side-tab, .rp-side-tabs, .rp-source, .rp-source-field, .rp-splitter, .rp-st, .rp-store-fields, .rp-template-state, .rp-template-switch, .rp-tools, .rp-trong-modal, .rp-undo, .rp-wrap, .rp-x, .ss-act, .ss-actrow, .ss-actsql, .ss-actsql-hd, .ss-an-hep, .ss-banner, .ss-blocked, .ss-brand, .ss-btn, .ss-caret, .ss-cd, .ss-chan, .ss-children, .ss-clip, .ss-col-t, .ss-ctx, .ss-ctx-i, .ss-ctx-sep, .ss-dadd, .ss-dbadge, .ss-dc, .ss-design-pane, .ss-dhead, .ss-dhead-hint, .ss-dlbl, .ss-dlegend, .ss-dname, .ss-dtbl-wrap, .ss-dwrap, .ss-editor-wrap, .ss-empty, .ss-err, .ss-fcount, .ss-fld, .ss-gate, .ss-gate-box, .ss-gate-desc, .ss-gate-err, .ss-gate-head, .ss-gate-who, .ss-grid, .ss-grow, .ss-helpdlg, .ss-hint, .ss-inl-find, .ss-khoa, .ss-lbl, .ss-lbl2, .ss-link, .ss-log, .ss-log-totp, .ss-ma, .ss-main, .ss-messages, .ss-mk, .ss-mode, .ss-mode-pill, .ss-modebar, .ss-msg, .ss-muted, .ss-node, .ss-node-row, .ss-note, .ss-nowrap, .ss-null, .ss-obj-name, .ss-ok, .ss-pane, .ss-pheu, .ss-pheu-all, .ss-pheu-find, .ss-pheu-ft, .ss-pheu-i, .ss-pheu-list, .ss-pheu-tools, .ss-qr, .ss-qr-row, .ss-qtab, .ss-qtab-add, .ss-qtab-n, .ss-qtab-x, .ss-qtabs, .ss-res-bar, .ss-res-body, .ss-res-find, .ss-res-split, .ss-res-tabs, .ss-restab, .ss-results, .ss-rn, .ss-root, .ss-rz, .ss-sel, .ss-selcol, .ss-select, .ss-selrow, .ss-sep, .ss-snip, .ss-snip-body, .ss-snip-cols, .ss-snip-ft, .ss-snip-go, .ss-snip-noi, .ss-snip-row, .ss-split, .ss-steps, .ss-tabbtn, .ss-tabs, .ss-tbl, .ss-th-f, .ss-th-t, .ss-topbar, .ss-tree, .ss-tree-body, .ss-tree-filter, .ss-tree-head, .ss-view, .ss-view-head, .ss-warn, .ss-warn-inline, .ss-who, .ss-work, .tn-direct-view, .tn-due-extra, .tn-due-main, .tn-due-note, .tn-filterbar, .tn-form-actions, .tn-grid, .tn-gridwrap, .tn-grp, .tn-line, .tn-sl, .tn-thuoc-ck, .tn-total-due, .tn-total-group, .tn-total-title, .tn-totals, .tn-tt-chk, .tn-tt-menu, .tn-tt-note, .tn-tt-split, .tn-worklist-grid, .tt-badge, .tt-card, .tt-card-h, .tt-chip, .tt-frm, .tt-grp, .tt-in, .tt-note, .tt-scroll, .tt-scrollbox, .tt-sum, .tt-tbl, .xn-al, .xn-drop, .xn-fk, .xn-lbl, .xn-lnk, .xn-mut, .xn-n, .xn-note, .xn-pi, .xn-pick, .xn-pill, .xn-rc, .xn-rcx, .xn-req, .xn-row, .xn-sc, .xn-steps, .xn-strong, .xn-tb, .xn-vd, .xn-warn /**/ ) :where( input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]), select, .form-control, .form-select, .ts-wrapper, .ts-control ) { height: var(--cs-control-h) !important; min-height: var(--cs-control-h) !important; line-height: var(--cs-control-line) !important; font-size: var(--fs-compact, var(--fs-base, 13px)) !important; box-sizing: border-box !important; } :where( .ws, .rxk, .dc-ws, .nk-ws, .xk-ws, .tk-ws, .bl-ws, .nv-ws, .pqm-root, #nbpRoot, #lkqRoot, #cdhaRoot, #divFormDK ) :where(textarea:not(.wtd-o)) { /* .wtd-o = ô soạn khung trao đổi (wd-traodoi.js): 1 dòng, tự cao theo nội dung — không ép tối thiểu 2 dòng. */ min-height: calc(var(--cs-control-h) * 2 + 6px) !important; line-height: 1.35 !important; box-sizing: border-box !important; } :where(.ts-control) > input { height: auto !important; min-height: 0 !important; line-height: normal !important; } /* Vế tổ tiên sinh tự động — xem chú thích luật nhịp ô nhập phía trên. */ :where( .ws, .rxk, .dc-ws, .nk-ws, .xk-ws, .tk-ws, .bl-ws, .nv-ws, .pqm-root, #nbpRoot, #lkqRoot, #cdhaRoot, #divFormDK, /**/ .dm-empty, .dm-rowdetail, .kb-addr, .kb-admin-chip, .kb-admin-contact, .kb-admin-meta, .kb-badge, .kb-cd-row, .kb-cds-chips, .kb-cds-tim, .kb-cds-x, .kb-chip, .kb-chips, .kb-chuyenphong, .kb-chuyenphong-actions, .kb-ck-gon, .kb-ck-right, .kb-ck-setting, .kb-ck-tab, .kb-ck-tabs, .kb-ck-ten, .kb-ckcfg, .kb-cockpit, .kb-config-actions, .kb-config-effective, .kb-config-priority, .kb-config-table, .kb-context-row, .kb-cp-save, .kb-ctx-i, .kb-detail-wide, .kb-details, .kb-details-body, .kb-details-close, .kb-details-diagnosis, .kb-details-head, .kb-dx, .kb-dx-body, .kb-dx-h, .kb-dx-tbl, .kb-expand, .kb-expand-btn, .kb-field, .kb-filter, .kb-gp, .kb-gp-cat, .kb-gp-hd, .kb-gp-menu, .kb-gp-menu-ds, .kb-gp-menu-ghi, .kb-gp-menu-h, .kb-gp-noi, .kb-gp-nut, .kb-gp-ten, .kb-gp-than, .kb-gp-tt, .kb-ha-sep, .kb-hd-ctx, .kb-hd-row, .kb-hd-status, .kb-header-alert, .kb-id-contact, .kb-id-l1, .kb-id-main, .kb-id-meta, .kb-id-name, .kb-id-side, .kb-idbox, .kb-ident, .kb-ident-alert, .kb-ident-allergy, .kb-ident-note, .kb-info-button, .kb-kbcard, .kb-kbcard-b, .kb-kbcard-h, .kb-kbcard-links, .kb-list-head-tools, .kb-makcb, .kb-makcb-ico, .kb-makcb-wrap, .kb-mau, .kb-mau-them, .kb-mnd, .kb-mnd-act, .kb-mnd-chk, .kb-mnd-ds, .kb-mnd-form, .kb-mnd-ghi, .kb-mnd-item, .kb-mnd-lay, .kb-mnd-ndh, .kb-mnd-ten, .kb-mnd-trai, .kb-mnd-trai-h, .kb-mnd-trong, .kb-mnd-xem, .kb-o, .kb-o-ghi, .kb-o-hd, .kb-prescription, .kb-queue-capcuu, .kb-queue-priority, .kb-queue-search, .kb-queue-search-trigger, .kb-queue-wait, .kb-registered, .kb-room-state, .kb-room-tabs, .kb-row, .kb-row-actions, .kb-screen-config, .kb-screen-order, .kb-screen-order-act, .kb-screen-order-empty, .kb-screen-order-item, .kb-screen-order-label, .kb-screen-order-lock, .kb-screen-order-name, .kb-screen-order-no, .kb-screen-order-tag, .kb-screen-state, .kb-scroll, .kb-search-btn, .kb-tb-group, .kb-toolbar, .kb-toprow, .kb-tt, .kb-tt-im, .kb-tt-line1, .kb-tt-main, .kb-tt-side, .kb-unit, .kb-vbox, .kb-vcard, .kb-vcard-b, .kb-vcard-hd, .kb-vcard-ten, .kb-vcopy, .kb-vexpand, .kb-vital-trend, .kb-vmore, .kb-vnhom, .kb-vr, .kb-vtools, .lh-action, .lh-b-center, .lh-b-create, .lh-b-filter-row, .lh-b-layout, .lh-b-period-filter, .lh-b-period-separator, .lh-b-person, .lh-b-priority-head, .lh-b-priority-list, .lh-b-priority-row, .lh-b-priority-shell, .lh-b-rail, .lh-b-rail-head, .lh-b-rank, .lh-b-room, .lh-b-room-card, .lh-b-side, .lh-b-source-card, .lh-b-source-date, .lh-b-source-head, .lh-b-source-name, .lh-b-source-panel, .lh-b-source-row, .lh-b-source-tabs, .lh-b-states, .lh-b-time, .lh-b-total, .lh-b-wait, .lh-b-work, .lh-cal-locked, .lh-calendar-grid, .lh-calendar-nav, .lh-calendar-picker, .lh-calendar-toolbar, .lh-calendar-week, .lh-cancel-back, .lh-cancel-confirm, .lh-cancel-form, .lh-config-actions, .lh-config-footer, .lh-config-preview-head, .lh-config-scope, .lh-config-slot, .lh-config-table, .lh-config-table-wrap, .lh-create-calendar, .lh-create-layout, .lh-datungkham-doi, .lh-datungkham-msg, .lh-day-bar, .lh-day-no, .lh-day-ok, .lh-day-row, .lh-day-title, .lh-day-toggle, .lh-day-track, .lh-dvhen-act, .lh-dvhen-btn, .lh-dvhen-ct, .lh-dvhen-ctnote, .lh-dvhen-empty, .lh-dvhen-gia, .lh-dvhen-giam, .lh-dvhen-list, .lh-dvhen-note, .lh-dvhen-pick, .lh-dvhen-row, .lh-dvhen-tag, .lh-dvhen-ten, .lh-dvhen-tong, .lh-dvhen-warn, .lh-editor-fields, .lh-field-error, .lh-field-invalid, .lh-followup-actions, .lh-followup-number, .lh-group-toolbar, .lh-hidden-datetime, .lh-identity-name, .lh-kind, .lh-mini-btn, .lh-overview-nav, .lh-referrer-actions, .lh-referrer-form, .lh-repeat-count, .lh-repeat-row, .lh-room-fill, .lh-room-label, .lh-room-list, .lh-room-row, .lh-room-track, .lh-row-actions, .lh-row-kind, .lh-screen, .lh-section-head, .lh-side-meta, .lh-side-name, .lh-slot-grid, .lh-slot-note, .lh-slot-picker, .lh-source-select, .lh-stat, .lh-stat-copy, .lh-stat-mark, .lh-stat-value, .lh-status, .lh-suggest, .lh-suggest-empty, .lh-suggest-meta, .lh-suggest-name, .lh-tab, .lh-tab-actions, .lh-tab-context, .lh-tab-filter, .lh-tab-group, .lh-tab-search, .lh-table, .lh-table-actions, .lh-table-empty, .lh-tabs, .lh-tk-time-bar, .lh-tk-time-field, .lh-tk-time-fields, .lh-workflow, .nt-foot, .nt-grid, .nt-gridwrap, .nt-in, .nt-sum, .nt-warn, .pqm-avatar, .pqm-body, .pqm-empty, .pqm-form, .pqm-form-actions, .pqm-form-check, .pqm-lookup, .pqm-lookup-body, .pqm-lookup-columns, .pqm-lookup-empty, .pqm-lookup-group, .pqm-lookup-person, .pqm-lookup-summary, .pqm-lookup-tabs, .pqm-main, .pqm-matrix-wrap, .pqm-pane, .pqm-pane-toolbar, .pqm-role-act, .pqm-role-acts, .pqm-role-chips, .pqm-role-list, .pqm-role-meta, .pqm-root, .pqm-side, .pqm-tab, .pqm-tabs, .pqm-title, .pqm-topbar, .pqm-unit, .pqm-user-check, .pqm-user-head, .pqm-user-list, .pqm-user-name, .pqm-user-row, .pqm-user-state, .pqm-user-toolbar, .pqm-user-wrap, .pqm-username, .pt-bar, .pt-cd, .pt-cd-nhan, .pt-gap, .pt-giua, .pt-nhay, .pt-so, .qdt-duoi-body, .qdt-fld, .qdt-form, .qdt-tat, .qdt-them, .qdt-them-ds, .qdt-them-nhan, .rp-act, .rp-actions, .rp-add, .rp-appr, .rp-arrow-btn, .rp-busy-card, .rp-busy-mask, .rp-busy-spin, .rp-busy-text, .rp-cancel, .rp-caret-off, .rp-check, .rp-checked, .rp-cho-cauhinh, .rp-cnt, .rp-cond-ctrl, .rp-cond-label, .rp-cond-row, .rp-def-badge, .rp-default, .rp-defparam-list, .rp-dp-close, .rp-dp-title, .rp-empty, .rp-field-search, .rp-foot, .rp-foot-actions, .rp-foot-file, .rp-foot-info, .rp-format-badge, .rp-format-empty, .rp-format-item, .rp-format-open, .rp-format-remove, .rp-hd, .rp-head, .rp-head-l, .rp-head-title, .rp-help-box, .rp-help-mask, .rp-hidecaret-cb, .rp-host, .rp-ins-chk, .rp-ins-unit, .rp-left-collapsed, .rp-link-hd, .rp-link-it, .rp-link-menu, .rp-list, .rp-loi, .rp-loi-noidung, .rp-loi-nut, .rp-loi-tieude, .rp-main-btn, .rp-map-add, .rp-map-fallback, .rp-map-preset-dialog, .rp-map-preset-foot, .rp-map-preset-list, .rp-map-preset-row, .rp-map-row, .rp-map-tools, .rp-menu, .rp-name, .rp-nm, .rp-noremember, .rp-panel-toggle, .rp-paper-cb, .rp-pg, .rp-pg-btns, .rp-pg-chk, .rp-pg-color, .rp-pg-group-body, .rp-pg-group-head, .rp-pg-key, .rp-pg-row, .rp-pg-unit, .rp-pg-val, .rp-preview-close, .rp-preview-frame, .rp-preview-overlay, .rp-print-sel, .rp-proc-row, .rp-props, .rp-props-del, .rp-props-empty, .rp-props-head, .rp-props-head-main, .rp-props-panel, .rp-props-resizer, .rp-props-tab, .rp-props-tabs, .rp-props-titlebar, .rp-props-view, .rp-ptype, .rp-ptype-wrap, .rp-ready, .rp-remember, .rp-remember-cb, .rp-retry, .rp-right-collapsed, .rp-row, .rp-runtime-actions, .rp-runtime-empty, .rp-runtime-head, .rp-runtime-info, .rp-runtime-item, .rp-runtime-list, .rp-runtime-no-value, .rp-runtime-param, .rp-runtime-split, .rp-runtime-title, .rp-seg, .rp-send, .rp-settings-heading, .rp-settings-section, .rp-side-pane, .rp-side-panes, .rp-side-tab, .rp-side-tabs, .rp-source, .rp-source-field, .rp-splitter, .rp-st, .rp-store-fields, .rp-template-state, .rp-template-switch, .rp-tools, .rp-trong-modal, .rp-undo, .rp-wrap, .rp-x, .ss-act, .ss-actrow, .ss-actsql, .ss-actsql-hd, .ss-an-hep, .ss-banner, .ss-blocked, .ss-brand, .ss-btn, .ss-caret, .ss-cd, .ss-chan, .ss-children, .ss-clip, .ss-col-t, .ss-ctx, .ss-ctx-i, .ss-ctx-sep, .ss-dadd, .ss-dbadge, .ss-dc, .ss-design-pane, .ss-dhead, .ss-dhead-hint, .ss-dlbl, .ss-dlegend, .ss-dname, .ss-dtbl-wrap, .ss-dwrap, .ss-editor-wrap, .ss-empty, .ss-err, .ss-fcount, .ss-fld, .ss-gate, .ss-gate-box, .ss-gate-desc, .ss-gate-err, .ss-gate-head, .ss-gate-who, .ss-grid, .ss-grow, .ss-helpdlg, .ss-hint, .ss-inl-find, .ss-khoa, .ss-lbl, .ss-lbl2, .ss-link, .ss-log, .ss-log-totp, .ss-ma, .ss-main, .ss-messages, .ss-mk, .ss-mode, .ss-mode-pill, .ss-modebar, .ss-msg, .ss-muted, .ss-node, .ss-node-row, .ss-note, .ss-nowrap, .ss-null, .ss-obj-name, .ss-ok, .ss-pane, .ss-pheu, .ss-pheu-all, .ss-pheu-find, .ss-pheu-ft, .ss-pheu-i, .ss-pheu-list, .ss-pheu-tools, .ss-qr, .ss-qr-row, .ss-qtab, .ss-qtab-add, .ss-qtab-n, .ss-qtab-x, .ss-qtabs, .ss-res-bar, .ss-res-body, .ss-res-find, .ss-res-split, .ss-res-tabs, .ss-restab, .ss-results, .ss-rn, .ss-root, .ss-rz, .ss-sel, .ss-selcol, .ss-select, .ss-selrow, .ss-sep, .ss-snip, .ss-snip-body, .ss-snip-cols, .ss-snip-ft, .ss-snip-go, .ss-snip-noi, .ss-snip-row, .ss-split, .ss-steps, .ss-tabbtn, .ss-tabs, .ss-tbl, .ss-th-f, .ss-th-t, .ss-topbar, .ss-tree, .ss-tree-body, .ss-tree-filter, .ss-tree-head, .ss-view, .ss-view-head, .ss-warn, .ss-warn-inline, .ss-who, .ss-work, .tn-direct-view, .tn-due-extra, .tn-due-main, .tn-due-note, .tn-filterbar, .tn-form-actions, .tn-grid, .tn-gridwrap, .tn-grp, .tn-line, .tn-sl, .tn-thuoc-ck, .tn-total-due, .tn-total-group, .tn-total-title, .tn-totals, .tn-tt-chk, .tn-tt-menu, .tn-tt-note, .tn-tt-split, .tn-worklist-grid, .tt-badge, .tt-card, .tt-card-h, .tt-chip, .tt-frm, .tt-grp, .tt-in, .tt-note, .tt-scroll, .tt-scrollbox, .tt-sum, .tt-tbl, .xn-al, .xn-drop, .xn-fk, .xn-lbl, .xn-lnk, .xn-mut, .xn-n, .xn-note, .xn-pi, .xn-pick, .xn-pill, .xn-rc, .xn-rcx, .xn-req, .xn-row, .xn-sc, .xn-steps, .xn-strong, .xn-tb, .xn-vd, .xn-warn /**/ ) :where( button, input[type=button], input[type=submit], input[type=reset], .btn, .button, .ws-btn, .rp-main-btn, .rp-arrow-btn, [class*="-btn"] ):not( .filter-btn, /* Phễu thuộc lưới: giữ display và kích thước do exComponent quản lý. */ .card-toggle-btn, .x, [class$="-x"], [class*="close"], [class*="toggle"], [class*="switch"], [style*="display:none"], [style*="display: none"] ) { height: var(--cs-control-h) !important; min-height: var(--cs-control-h) !important; line-height: var(--cs-control-line) !important; font-size: var(--fs-compact, var(--fs-base, 13px)) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } :where( .ws, .rxk, .dc-ws, .nk-ws, .xk-ws, .tk-ws, .bl-ws, .nv-ws, .pqm-root, #nbpRoot, #lkqRoot, #cdhaRoot, #divFormDK ) :where( label, .ws-flabel, .form-label, [class*="-label"], [class*="-lbl"] ):where(:not(.jodit-wysiwyg *, .rpt-page *)) { /* Chừa NỘI DUNG mẫu in (khung soạn Jodit + tờ in): nhịp control của màn nghiệp vụ không được áp vào mẫu, nếu không màn Thiết kế vẽ khác bản in. :where giữ độ ưu tiên 0 như cũ. */ min-height: var(--cs-label-h) !important; line-height: var(--cs-label-h) !important; display: flex !important; align-items: center !important; margin-top: 0 !important; margin-bottom: 4px !important; box-sizing: border-box !important; } :where( .ws, .rxk, .dc-ws, .nk-ws, .xk-ws, .tk-ws, .bl-ws, .nv-ws, .pqm-root, #nbpRoot, #lkqRoot, #cdhaRoot, #divFormDK ) :where( table th, table td, .tabulator-row, .tabulator-cell ):where(:not(.jodit-wysiwyg *, .rpt-page *)) { /* Chừa bảng TRONG mẫu in: ép 34px/hàng làm màn Thiết kế vẽ mẫu dài hơn bản in ~50% (Phiếu tạm thu A5 ngang: in hết trong 120mm nhưng Thiết kế tràn khỏi tờ 148mm, người dùng tưởng mẫu bị cắt). */ min-height: var(--cs-table-row-h) !important; height: var(--cs-table-row-h) !important; vertical-align: middle !important; box-sizing: border-box !important; } :where( .ws, .rxk, .dc-ws, .nk-ws, .xk-ws, .tk-ws, .bl-ws, .nv-ws, .pqm-root, #nbpRoot, #lkqRoot, #cdhaRoot, #divFormDK ) :where( .cho-item, .rxk-wrow, .dc-row, .nk-row, .xk-row, .tk-row, .bl-row, .nv-row, .pqm-role ) { min-height: var(--cs-list-row-h) !important; box-sizing: border-box !important; } /* ══ THANH ĐÁY LÀM VIỆC (dùng chung) ══════════════════════════════════════ Quy ước đã chốt: mọi nút thao tác + tổng tiền nằm ở ĐÁY màn, không trôi lên giữa khi lưới ít dòng. Trước đây 18 màn Dược/Nhà thuốc đều để thanh đáy là div thường nằm sau lưới -> lưới ngắn thì thanh nằm lửng giữa màn. Cách dùng ở view (KHÔNG phải sửa CSS từng module):
<- vùng cuộn của phần nội dung ...
<- thanh đáy margin-top:auto đẩy thanh xuống đáy khi nội dung ngắn; sticky giữ nó dính đáy khi nội dung dài phải cuộn. Selector lặp 2 lần để nâng specificity lên (0,2,0): CSS của module khai ".nk-bottombar{margin-top:0}" ở (0,1,0) và nạp SAU win8.css nên nếu chỉ viết [data-wd-footer] thì margin-top:auto bị đè, thanh vẫn trôi giữa màn. */ [data-wd-scroll][data-wd-scroll] { display: flex; flex-direction: column; } [data-wd-footer][data-wd-footer] { margin-top: auto; position: sticky; bottom: 0; z-index: 5; background: var(--surface); box-shadow: 0 -1px 0 var(--chip-default-border), 0 -6px 12px -8px rgba(15,23,42,.18); } /* Màn đã opt-in theme token không giữ nền trắng cố định ở footer. */ body[data-clinic-theme] [data-wd-footer] { background: var(--ft-bar-bg); box-shadow: none; }