/* CLINIC-SCOPE: shared */
/* ============================================================================
   ex-component-sau.css — phần CSS component trước đây chèn LƯỜI (lúc component được dùng) nên rơi vào CUỐI
   <head>, sau selection.css. _MainLayout nạp tệp này sau selection.css để giữ đúng thứ tự cũ.
   ============================================================================ */

/* ==== 01-format.js — trước đây chèn bằng <style id="opensource-uppercase-style"> ==== */
[data-uppercase]{text-transform:uppercase}

/* ==== 04-grid.js — trước đây chèn bằng <style id="exgrid-tim-css"> ==== */
mark.exgrid-tim{background:var(--pal-amber-200, #fde68a);color:inherit;padding:0 1px;border-radius:2px;}

/* ==== wd-shell-popout — CSS thành phần host (trước là <style> JS chèn lúc chạy; gộp vào đây để nạp tĩnh, hết nháy) ==== */
/* Trước 30/09/2026 CSS này do wd-shell.js (ganCssNutTabMoi, <style id="wdPopoutCss">) chèn <style> lúc chạy;
   nay là tệp tĩnh (docs/design.md §2b) — JS chỉ gắn <link> một lần. Sửa CSS ở ĐÂY, không sửa chuỗi trong JS. */
.wd-titlebar .wd-tbtn.popout{border:0;padding:0;background:transparent;appearance:none;-webkit-appearance:none}
.wd-titlebar .wd-tbtn.popout:hover{background:var(--tbtn-hover)}
.wd-titlebar .wd-tbtn.popout:focus-visible{outline:0;background:var(--tbtn-hover);box-shadow:inset 0 -2px 0 var(--accent-color)}

/* ==== wd-shell-phien — CSS thành phần host (trước là <style> JS chèn lúc chạy; gộp vào đây để nạp tĩnh, hết nháy) ==== */
/* Trước 30/09/2026 CSS này do wd-shell.js (setupSessionTimeout, <style id="wdSsCss">) chèn <style> lúc chạy;
   nay là tệp tĩnh (docs/design.md §2b) — JS chỉ gắn <link> một lần. Sửa CSS ở ĐÂY, không sửa chuỗi trong JS. */
.wd-ss-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:100000;display:flex;align-items:center;justify-content:center;}
.wd-ss-box{background:var(--surface, #fff);border-radius:var(--radius, 2px);min-width:340px;max-width:92%;box-shadow:0 14px 44px rgba(0,0,0,.4);overflow:hidden;font-size:14px;}
.wd-ss-h{padding:12px 16px;background:#2563eb;color:var(--btn-on, #fff);font-weight:700;}
.wd-ss-note{padding:10px 16px 0;color:#666;font-size:12px;}
.wd-ss-opts{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px;}
.wd-ss-opt{padding:7px 12px;border:1px solid var(--line-2, #cfd8d6);border-radius:var(--radius, 2px);background:var(--surface-soft, #f6f9f8);cursor:pointer;}
.wd-ss-opt:hover{border-color:#2563eb;}
.wd-ss-opt.on{background:#2563eb;color:var(--btn-on, #fff);border-color:#2563eb;}
.wd-ss-foot{padding:0 16px 14px;text-align:right;}
.wd-ss-cancel{padding:6px 14px;border:1px solid var(--line-2, #cfd8d6);border-radius:var(--radius, 2px);background:var(--surface, #fff);cursor:pointer;}

/* ==== hop-muc — CSS thành phần host (trước là <style> JS chèn lúc chạy; gộp vào đây để nạp tĩnh, hết nháy) ==== */
/* Trước 30/09/2026 CSS này do exComponent/05-dialog-button.js (datCssHopMuc, <style id="wd-hop-muc-css">) chèn <style> lúc chạy;
   nay là tệp tĩnh (docs/design.md §2b) — JS chỉ gắn <link> một lần. Sửa CSS ở ĐÂY, không sửa chuỗi trong JS. */
#globalBootstrapModal .modal-content.wd-hop-muc{border-top:4px solid var(--wd-hop-c,#dc2626)}
#globalBootstrapModalTitle .wd-hop-ic{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:30px;height:30px;margin-right:10px;
  border-radius:var(--radius-noi-sm,3px);background:color-mix(in srgb,var(--wd-hop-c,#dc2626) 13%,transparent);color:var(--wd-hop-c,#dc2626);font-size:var(--fs-lg, 16px)}
#globalBootstrapModal .wd-hop-muc #globalBootstrapModalTitle{display:flex;align-items:center}
#globalBootstrapModalBody .wd-hop-nd{white-space:pre-line}
#globalBootstrapModalBody .wd-hop-cach h4{margin:12px 0 4px;font-size:var(--fs-sm,12px);font-weight:600;color:var(--muted,#475569)}
#globalBootstrapModalBody .wd-hop-cach ol{margin:0;padding-left:18px}
#globalBootstrapModalBody details.wd-hop-kt{margin-top:10px;border:1px solid var(--line,#e5e7eb);border-radius:var(--radius-sm,2px)}
#globalBootstrapModalBody details.wd-hop-kt summary{cursor:pointer;padding:5px 8px;font-size:var(--fs-sm,12px);font-weight:600;color:var(--muted,#475569)}
#globalBootstrapModalBody details.wd-hop-kt pre{margin:0;padding:8px;border-top:1px solid var(--line,#e5e7eb);font:11.5px/1.5 var(--font-mono,Consolas,monospace);
  white-space:pre-wrap;word-break:break-word;background:var(--surface-3,#eef1f5);color:var(--muted,#475569)}
#globalBootstrapModalFooter .wd-hop-trai{margin-right:auto}

/* ==== gen-an-nut-in — CSS thành phần host (trước là <style> JS chèn lúc chạy; gộp vào đây để nạp tĩnh, hết nháy) ==== */
/* Trước 30/09/2026 CSS này do genSupport.js (damBaoCssAnNutIn, <style id="wdCssAnNutIn">) chèn <style> lúc chạy;
   nay là tệp tĩnh (docs/design.md §2b) — JS chỉ gắn <link> một lần. Sửa CSS ở ĐÂY, không sửa chuỗi trong JS. */
.rp-wrap[data-wd-hidden="1"]{display:none!important}

/* ==== fsupport-cho — CSS thành phần host (trước là <style> JS chèn lúc chạy; gộp vào đây để nạp tĩnh, hết nháy) ==== */
/* Trước 30/09/2026 CSS này do fSupport.js (WaitDialog + _ensureGlobalLoadingOverlay, <style id="_wd_style">) chèn <style> lúc chạy;
   nay là tệp tĩnh (docs/design.md §2b) — JS chỉ gắn <link> một lần. Sửa CSS ở ĐÂY, không sửa chuỗi trong JS. */
@keyframes _wd_spin { to { transform: rotate(360deg); } }

/* ==== fsupport-trinhchieu — CSS thành phần host (trước là <style> JS chèn lúc chạy; gộp vào đây để nạp tĩnh, hết nháy) ==== */
/* Trước 30/09/2026 CSS này do fSupport.js (ShowImgDialogSlideShow, <style> không id) chèn <style> lúc chạy;
   nay là tệp tĩnh (docs/design.md §2b) — JS chỉ gắn <link> một lần. Sửa CSS ở ĐÂY, không sửa chuỗi trong JS. */
@keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes imgSlide { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.nav-btn-ds {
    position: absolute; top: 50%; transform: translateY(-50%);
    color: white; font-size: 50px; cursor: pointer; padding: 20px;
    user-select: none; transition: 0.3s; z-index: 10001;
}
.nav-btn-ds:hover { background: rgba(255,255,255,0.1); border-radius: var(--radius, 2px); }
.nav-left-ds { left: 10px; }
.nav-right-ds { right: 10px; }

/* ==== btnprint-modal — CSS thành phần host (trước là <style> JS chèn lúc chạy; gộp vào đây để nạp tĩnh, hết nháy) ==== */
/* Trước 30/09/2026 CSS này do btnPrint.js (ensurePrintModalStyle, <style id="btnprint-modal-style">) chèn <style> lúc chạy;
   nay là tệp tĩnh (docs/design.md §2b) — JS chỉ gắn <link> một lần. Sửa CSS ở ĐÂY, không sửa chuỗi trong JS. */
.print-modal.modal{overflow:hidden !important}
.print-modal .modal-dialog{margin:0 !important;width:100vw !important;max-width:100vw !important;height:100vh !important;max-height:100vh !important}
.print-modal .modal-content{width:100vw !important;height:100vh !important;overflow:hidden !important}
.print-modal .modal-body{padding:0 !important;height:100vh !important;overflow:hidden !important}
.print-modal .print-frame{display:block !important;width:100vw !important;height:100vh !important;border:0 !important}
body.modal-open{overflow:hidden !important;padding-right:0 !important}
/* Nút Đóng (×) của khung xem trước PDF: chip trắng-trên-nền-tối, thấy rõ ở CẢ giao diện */
/* sáng lẫn tối của PDF.js (trước đây color:#444 nên chìm hẳn trên nền tối). */
.print-modal .btnClose:hover{background:#c0392b !important;border-color:#c0392b !important;color:var(--btn-on, #fff) !important}
/* ── Panel Chọn mẫu in — giao diện mới theo Figma (GiaoDienMoi). Tiêm cả ở đây để */
/* ngữ cảnh nạp btnPrint.js ĐỘNG (vd Hội chẩn) — nơi KHÔNG có <style> của Partial — */
/* vẫn hiển thị đúng giao diện mới. ───────────────────────────────────────────── */
/* fb-…-419 (vòng 5): nút mũi tên RIÊNG bên phải nút In — nút In liền viền, nút mũi tên hẹp. */
.rp-main-btn{border-right:none}
.rp-arrow-btn{cursor:pointer;width:auto;padding:3px !important;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center}
/* Nút In / mũi tên / thêm mẫu là <div role="button" tabindex="0">: vòng focus rõ khi đi bằng bàn phím. */
.rp-main-btn:focus-visible,.rp-arrow-btn:focus-visible,.rp-add:focus-visible{outline:2px solid var(--pal-blue-600, #2563eb);outline-offset:2px}
/* Phạm vi Hệ thống: chờ đọc xong cờ "Ẩn mũi tên" mới hiện mũi tên (khỏi hiện rồi biến mất). */
.rp-wrap.rp-cho-cauhinh .rp-arrow-btn{visibility:hidden}
.rp-menu{width:680px;max-width:96vw;background:var(--surface, #fff) !important;border:1px solid var(--line-strong, #c9d3df) !important;box-shadow:0 8px 28px rgba(20,40,80,.18);padding:0 !important;color:#2d3748;font-size:13px}
.rp-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;background:var(--surface-hover, #f0f4f8);border-bottom:1px solid var(--line-strong, #c9d3df)}
.rp-head-l{display:flex;align-items:center;gap:8px}
.rp-head-l>i{color:var(--pal-blue-600, #2563eb);font-size:14px}
.rp-head-l .rp-head-title{font-weight:600;font-size:14px;color:#1a202c}
.rp-add{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;cursor:pointer;color:var(--pal-blue-600, #2563eb);background:var(--surface, #fff);border:1px solid var(--pal-blue-300, #93c5fd)}
.rp-add:hover{background:var(--st-progress-bg, #eff6ff)}
.rp-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 14px;background:var(--surface-soft, #f7f9fb);border-bottom:1px solid var(--line-strong, #c9d3df);font-size:12px;margin:0}
.rp-remember{display:inline-flex;align-items:center;gap:6px;cursor:pointer;user-select:none;color:var(--muted, #4a5568);margin:0 !important}
.rp-remember input{width:14px;height:14px;margin:0;accent-color:var(--pal-blue-600, #2563eb);cursor:pointer}
.rp-tools.rp-noremember .rp-seg{opacity:.45;pointer-events:none}
.rp-seg{display:inline-flex;border:1px solid var(--line-strong, #c9d3df);border-radius:0}
.rp-seg button{border:none;background:var(--surface, #fff);color:var(--muted, #4a5568);padding:4px 10px;font-size:12px;font-weight:500;cursor:pointer}
.rp-seg button+button{border-left:1px solid var(--line-strong, #c9d3df)}
/* State .on do /Css/partCss/selection.css (kiểu S) lo. */.rp-ptype-wrap{display:inline-flex;align-items:center;gap:2px;margin-left:auto}
.rp-ptype-wrap>span{color:var(--muted-soft, #718096);margin-right:2px}
.rp-ptype{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:var(--surface, #fff) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='9'%20height='9'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232563eb'%20stroke-width='2.5'%3E%3Cpath%20d='M6%209l6%206%206-6'/%3E%3C/svg%3E") no-repeat right 6px center;color:var(--pal-blue-600, #2563eb);font-weight:500;border:1px solid var(--pal-blue-300, #93c5fd);padding:3px 22px 3px 8px;font-size:12px;cursor:pointer;outline:none}
.rp-help{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:var(--surface-3, #edf2f7);border:1px solid transparent;color:var(--muted-soft, #718096);cursor:pointer;font-size:12px}
.rp-help:hover{background:var(--surface-3, #e2e8f0);color:var(--pal-blue-600, #2563eb)}
/* Nút ⚙ Máy in & trang in (backlog D10): cùng dáng nút "?"; chấm tím = nút In này đang có thiết lập riêng. */
.rp-cfg{position:relative;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;background:var(--surface-3, #edf2f7);border:1px solid transparent;color:var(--muted-soft, #718096);cursor:pointer;font-size:12px}
.rp-cfg:hover{background:var(--surface-3, #e2e8f0);color:var(--act-print,#6941c6)}
.rp-cfg:focus-visible{outline:2px solid var(--pal-blue-600, #2563eb);outline-offset:1px}
.rp-cfg.on{color:var(--act-print,#6941c6);border-color:var(--act-print,#6941c6)}
.rp-cfg.on::after{content:"";position:absolute;top:-3px;right:-3px;width:7px;height:7px;border-radius:50%;background:var(--act-print,#6941c6);box-shadow:0 0 0 1.5px var(--surface, #fff)}
.rp-list{max-height:340px;overflow:auto}
.rp-row{display:flex;gap:10px;align-items:center;padding:9px 14px;border-top:none;border-bottom:1px solid var(--line, #edf2f7);background:var(--surface, #fff)}
.rp-row:last-child{border-bottom:0}
.rp-row.rp-checked{background:var(--st-progress-bg, #eff6ff)}
.rp-row .rp-check{width:14px;height:14px;margin:0;flex:0 0 auto;accent-color:var(--pal-blue-600, #2563eb);cursor:pointer}
.rp-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;text-align:left;font-size:13px;color:#2d3748;cursor:pointer}
.rp-row.rp-checked .rp-name{color:var(--st-progress-text, #1d4ed8);font-weight:500}
/* fb-…-174: hàng nút CỐ ĐỊNH (không hiện/ẩn gây nhấp nháy & bấm nhầm); chỉ MỜ khi không rê/không focus */
.rp-actions{display:inline-flex;align-items:center;gap:2px;opacity:.35;transition:opacity .12s}
.rp-row:hover .rp-actions,.rp-row:focus-within .rp-actions{opacity:1}
.rp-act{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:transparent;border:none;color:var(--muted-soft, #718096);cursor:pointer;font-size:12px}
.rp-act:hover{background:var(--surface-3, #edf2f7);color:#2d3748}
.rp-act.rp-pdf{width:auto;gap:var(--sp-1);padding:var(--sp-1);font-size:var(--fs-xs);color:var(--brand);white-space:nowrap}
.rp-act.rp-star.on{color:var(--pal-amber-500, #f59e0b)}
.rp-act.rp-delete{color:#e53e3e}
.rp-act.rp-delete:hover{background:var(--surface-soft, #fff5f5);color:#c53030}
/* Ngôi sao phạm vi Hệ thống với người không phải quản trị: khoá, không cho bấm. */
.rp-act:disabled{opacity:.4;cursor:not-allowed}
/* fb-…-174 (vòng 2): 2 mẫu mặc định "nhìn khó phân biệt" vì dấu duy nhất là ngôi sao trong */
/* hàng nút đang MỜ (opacity .35). Gắn dấu hiệu CỐ ĐỊNH, KHÔNG phụ thuộc opacity: thanh vàng */
/* bên trái + nền vàng nhạt + nhãn "Mặc định" → nhận ra ngay dòng nào là mẫu mặc định. */
.rp-row.rp-default{box-shadow:inset 3px 0 0 var(--pal-amber-500, #f59e0b)}
.rp-row.rp-default:not(.rp-checked){background:var(--st-warn-bg, #fffbeb)}
.rp-def-badge{flex:0 0 auto;display:inline-flex;align-items:center;gap:3px;padding:1px 7px;font-size:11px;font-weight:600;color:var(--pal-amber-700, #b45309);background:var(--pal-amber-100, #fef3c7);border:1px solid var(--pal-amber-300, #fcd34d);border-radius:9px;white-space:nowrap}
.rp-def-badge>i{font-size:10px}
/* fb-…-174: hàng nút luôn hiện (nút sao đã thể hiện mẫu mặc định) → ẩn badge sao để khỏi hiện đôi */
.rp-star-badge{display:none}
.rp-empty{padding:16px 14px;color:var(--muted-2, #94a3b8);font-size:13px;text-align:center}
.rp-empty.rp-loi{color:var(--st-danger-text, #b91c1c)}
.rp-retry{margin-left:6px;padding:2px 10px;font-size:12px;border:1px solid var(--pal-blue-300, #93c5fd);background:var(--surface, #fff);color:var(--pal-blue-600, #2563eb);cursor:pointer}
.rp-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;background:var(--surface-hover, #f0f4f8);border-top:1px solid var(--line-strong, #c9d3df);margin:0}
.rp-foot-info{font-size:12px;color:var(--muted-soft, #718096)}
.rp-print-sel{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;font-size:12px;font-weight:600;border:none;background:var(--surface-3, #e2e8f0);color:var(--muted-2, #a0aec0);cursor:not-allowed}
.rp-print-sel.rp-ready{background:var(--pal-blue-600, #2563eb);color:var(--btn-on, #fff);cursor:pointer}
.rp-print-sel.rp-ready:hover{background:var(--pal-blue-700, #1d4ed8)}
/* ── (port HisSite 17/10/2026) Mẫu in CỨNG + Nhóm & sắp xếp mẫu in (btnPrint-nhom.js) ── */
/* Ổ khoá thay Sửa/Xoá ở dòng mẫu cứng: không bấm được, chỉ là dấu hiệu. */
.rp-act.rp-lock{cursor:default;color:var(--muted)}
.rp-act.rp-lock:hover{background:transparent;color:var(--muted)}
/* Phần «ID n · » trước tên mẫu — nút # ẩn/hiện (mặc định hiện). */
.rp-menu.rp-an-id .rp-idm{display:none}
/* 3 nút trên cụm công cụ, cùng dáng .rp-cfg / .rp-help. */
.rp-nhom-nut,.rp-thumo-nut,.rp-id-nut{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;background:var(--surface-3);border:1px solid transparent;color:var(--muted-soft);cursor:pointer;font-size:var(--fs-sm)}
.rp-nhom-nut:hover,.rp-thumo-nut:hover,.rp-id-nut:hover{color:var(--brand)}
.rp-nhom-nut.on,.rp-id-nut.on{background:var(--brand);border-color:var(--brand);color:var(--btn-on)}
.rp-nhom-nut:disabled{opacity:.45;cursor:not-allowed}
.rp-nhom-nut:focus-visible,.rp-thumo-nut:focus-visible,.rp-id-nut:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
/* Đầu nhóm: dính trên cùng khi cuộn; thu/mở có hiệu ứng (grid-template-rows 1fr ↔ 0fr). */
.rp-nhom-dau{display:flex;align-items:center;gap:6px;padding:var(--sp-1) 10px;background:var(--surface-hover);border-bottom:1px solid var(--line);font-size:var(--fs-sm);font-weight:600;color:var(--text);cursor:pointer;user-select:none;position:sticky;top:0;z-index:1}
.rp-nhom-dau:hover{background:var(--surface-3)}
.rp-nhom-dau:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.rp-nhom-mui{width:12px;color:var(--muted-soft);font-size:var(--fs-xs);transition:transform .2s ease}
.rp-nhom-thu .rp-nhom-mui{transform:rotate(-90deg)}
.rp-nhom-vo{display:grid;grid-template-rows:1fr;transition:grid-template-rows .2s ease}
.rp-nhom-thu>.rp-nhom-vo{grid-template-rows:0fr}
.rp-nhom-vo>.rp-nhom-than{min-height:0;overflow:hidden;transition:opacity .2s ease,visibility 0s}
.rp-nhom-thu>.rp-nhom-vo>.rp-nhom-than{opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s}
.rp-nhom-tm{display:inline-flex;align-items:center;justify-content:center;width:20px;height:22px;padding:0;border:0;background:transparent;cursor:pointer;flex:0 0 auto}
.rp-nhom-tm:hover .rp-nhom-mui{color:var(--brand)}
.rp-nhom-ten{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-nhom-dem{font-weight:500;color:var(--muted);background:var(--surface-3);padding:0 6px;font-size:var(--fs-xs)}
/* Thanh chế độ sắp xếp. */
.rp-nhom-bar{display:flex;align-items:center;gap:var(--sp-1);flex-wrap:wrap;padding:var(--sp-1) 10px;background:var(--st-progress-bg);border-bottom:1px solid var(--line-strong);font-size:var(--fs-sm);color:var(--st-progress-text);position:sticky;top:0;z-index:2}
.rp-nhom-bar .rp-nhom-goi{flex:1;min-width:150px}
.rp-nhom-bar button{height:24px;padding:0 var(--sp-2);border:1px solid var(--line-strong);background:var(--surface);color:var(--text);font-size:var(--fs-sm);cursor:pointer;display:inline-flex;align-items:center;gap:var(--sp-1)}
.rp-nhom-bar button:hover{border-color:var(--brand);color:var(--brand)}
.rp-nhom-bar button.rp-nhom-luu{background:var(--brand);border-color:var(--brand);color:var(--btn-on)}
.rp-nhom-sua .rp-nhom-dau{position:static;cursor:default}
.rp-nhom-sua .rp-nhom:not(.rp-nhom-thu) .rp-nhom-than{min-height:22px}
.rp-nhom-sua .rp-row .rp-actions,.rp-nhom-sua .rp-row .rp-def-badge{display:none}
.rp-nhom-keo{color:var(--muted-soft);cursor:grab;padding:0 2px;flex:0 0 auto}
.rp-nhom-keo:active{cursor:grabbing}
.rp-nhom-o{flex:1;min-width:0;height:24px;border:1px solid var(--line-strong);padding:0 6px;font-size:var(--fs-sm);font-weight:600;color:var(--text);background:var(--surface);outline:none}
.rp-nhom-o:focus{border-color:var(--brand)}
.rp-nhom-cot{display:inline-flex;gap:2px;flex:0 0 auto}
.rp-nhom-cot button{width:22px;height:22px;padding:0;border:1px solid var(--line);background:var(--surface);color:var(--muted-soft);font-size:var(--fs-xs);cursor:pointer}
.rp-nhom-cot button:hover{color:var(--brand);border-color:var(--brand)}
.rp-nhom-cot button.rp-nhom-xoa:hover{color:var(--st-danger-text);border-color:var(--st-danger-text)}
.rp-nhom-dang-keo{opacity:.4}
/* Tay nắm đổi cỡ panel ở góc XA nút In (data-rp-co-x/y do btnPrint-nhom.js đặt); cỡ nhớ theo máy + theo nút. */
.rp-co-keo{position:absolute;right:0;bottom:0;width:12px;height:12px;z-index:3;cursor:nwse-resize;touch-action:none;background:linear-gradient(135deg,transparent 0 50%,var(--line-strong) 50% 60%,transparent 60% 72%,var(--line-strong) 72% 82%,transparent 82%)}
.rp-co-keo:hover,.rp-co-dang>.rp-co-keo{background:linear-gradient(135deg,transparent 0 50%,var(--brand) 50% 60%,transparent 60% 72%,var(--brand) 72% 82%,transparent 82%)}
.rp-menu[data-rp-co-x="trai"]>.rp-co-keo{right:auto;left:0;cursor:nesw-resize;transform:scaleX(-1)}
.rp-menu[data-rp-co-y="len"]>.rp-co-keo{bottom:auto;top:0;cursor:nesw-resize;transform:scaleY(-1)}
.rp-menu[data-rp-co-x="trai"][data-rp-co-y="len"]>.rp-co-keo{cursor:nwse-resize;transform:scale(-1,-1)}
.rp-co-dang,.rp-co-dang *{user-select:none}
.rp-wrap .rp-menu.rp-co-tuy{width:var(--rp-co-w)}
.rp-wrap .rp-menu.rp-co-tuy>.rp-list{height:var(--rp-co-h);max-height:none}
.rp-help-mask{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000001;display:flex;align-items:center;justify-content:center}
.rp-help-box{background:var(--bg-body,#fff);color:var(--main-font-color,#222);width:560px;max-width:94vw;max-height:86vh;overflow:auto;border:1px solid var(--main-color,#055952);padding:16px 18px;box-shadow:0 6px 24px rgba(0,0,0,.4)}
.rp-help-box h3{margin:0 0 8px;font-size:16px}
.rp-help-box ol{padding-left:20px;margin:6px 0}
.rp-help-box li{margin:6px 0;line-height:1.5}
.rp-help-box .rp-help-close{float:right;cursor:pointer;color:#999}
/* (fb-20260808-143407-738) Nút Đóng "×" của modal THIẾT KẾ mẫu in: đồng bộ style với */
/* cụm nút icon trên thanh tiêu đề trang thiết kế (.titleActBtn) — hộp 32×32 viền bo góc, */
/* xanh chủ đạo, hover đảo màu. Chỉ áp cho modal thiết kế (.btnCloseBoxed), không đụng */
/* nút đóng của modal xem trước/in từ danh sách. */
.print-modal .btnCloseBoxed{position:absolute;right:7px;top:5px;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:1px solid var(--main-color,#055952);border-radius:var(--radius, 2px);cursor:pointer;color:var(--main-color,#055952);background:var(--surface, #fff);font-size:var(--fs-lg, 16px);line-height:1}
.print-modal .btnCloseBoxed:hover{background:var(--main-color,#055952);color:var(--btn-on, #fff)}
/* (fb-20260810-090211-404 vòng 4) Lớp CHỜ khi bấm In — con quay + chữ "Đang chuẩn bị bản */
/* in…". Bấm In là dựng tài liệu / gọi server (kiểu PDF phải chờ Playwright) nên có độ trễ; */
/* không báo gì thì người dùng tưởng "bấm không ăn". z-index trên cả print-modal (1000000). */
.rp-busy-mask{position:fixed;inset:0;z-index:1000002;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(15,23,42,.38)}
.rp-busy-card{display:flex;flex-direction:column;align-items:center;gap:12px;background:var(--surface, #fff);color:var(--pal-slate-800, #1e293b);padding:22px 30px;border-radius:var(--radius, 2px);box-shadow:0 10px 40px rgba(0,0,0,.28);min-width:210px}
.rp-busy-spin{width:38px;height:38px;border:4px solid var(--pal-blue-100, #dbeafe);border-top-color:var(--pal-blue-600, #2563eb);border-radius:50%;animation:rpspin .8s linear infinite}
@keyframes rpspin{to{transform:rotate(360deg)}
}
.rp-busy-text{font-size:14px;font-weight:600;letter-spacing:.2px}

/* ==== dokhucxa-modal — CSS thành phần host (trước là <style> JS chèn lúc chạy; gộp vào đây để nạp tĩnh, hết nháy) ==== */
/* Trước 30/09/2026 CSS này do dokhucxa-modal.js (tiemCss, <style> không id; HOST_ID = dkxModalHost) chèn <style> lúc chạy;
   nay là tệp tĩnh (docs/design.md §2b) — JS chỉ gắn <link> một lần. Sửa CSS ở ĐÂY, không sửa chuỗi trong JS. */
#dkxModalHost_bs_modal .modal-header{padding:0 10px;min-height:34px;height:34px;align-items:center;border-bottom:1px solid var(--line,#e5e7eb)}
#dkxModalHost_bs_modal .modal-title{font-size:var(--fs-sm,12px);font-weight:600;line-height:1;margin:0}
#dkxModalHost_bs_modal .modal-header .close{padding:0 4px;margin:0;line-height:1;font-size:20px;opacity:.65}
#dkxModalHost_bs_modal .modal-header .close:hover{opacity:1}
/* .modal-body mặc định padding 20px -> viền trắng thừa đều 4 phía quanh iframe, */
/* trong khi màn đo đã tự lo lề bên trong. Bỏ hẳn cho iframe sát viền modal. */
#dkxModalHost_bs_body{padding:0!important}
/* modal-dialog mặc định có margin .5rem-1.75rem -> thêm viền trắng trên/dưới. */
#dkxModalHost_bs_modal .modal-dialog{margin:6px auto}

/* ==== wd-print-host — CSS thành phần host (trước là <style> JS chèn lúc chạy; gộp vào đây để nạp tĩnh, hết nháy) ==== */
/* Trước 30/09/2026 CSS này do wdPrintHost.js (napCss, <style id="wdPrintModalCss">) chèn <style> lúc chạy;
   nay là tệp tĩnh (docs/design.md §2b) — JS chỉ gắn <link> một lần. Sửa CSS ở ĐÂY, không sửa chuỗi trong JS. */
.wd-print-ovl { position: fixed; inset: 0 0 48px 0; z-index: 99000; display: none; background: rgba(0,0,0,.45); }
.wd-print-ovl.open { display: block; }
.wd-print-box { position: absolute; inset: 24px; display: flex; flex-direction: column;
    background: var(--surface, #fff); border-radius: var(--radius, 2px); overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.45); }
.wd-print-ovl.max .wd-print-box { inset: 0; border-radius: 0; }
.wd-print-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 4px 0 12px;
    background: var(--title-bg, #1d6f5c); color: var(--title-text, #fff); user-select: none; }
.wd-print-bar .t { flex: 1; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd-print-bar .b { width: 40px; height: 34px; display: flex; align-items: center; justify-content: center;
    border: 0; padding: 0; background: transparent; color: inherit; font-size: 12px; cursor: pointer; }
.wd-print-bar .b:hover { background: rgba(255,255,255,.18); }
.wd-print-bar .b.x:hover { background: #e81123; color: var(--btn-on, #fff); }
.wd-print-frame { flex: 1; width: 100%; border: 0; display: block; background: var(--surface, #fff); min-height: 0; }

/* ==== cls-ketqua-viewer — CSS thành phần host (trước là <style> JS chèn lúc chạy; gộp vào đây để nạp tĩnh, hết nháy) ==== */
/* Trước 30/09/2026 CSS này do clsKetQuaViewer.js (injectCss, <style id="clsv2-css">) chèn <style> lúc chạy;
   nay là tệp tĩnh (docs/design.md §2b) — JS chỉ gắn <link> một lần. Sửa CSS ở ĐÂY, không sửa chuỗi trong JS. */
.clsv2{container-type:inline-size;display:flex;flex-direction:column;height:100%;min-height:0;color:var(--text);font-family:var(--font-ui);font-size:var(--fs-base);background:var(--surface)}
.clsv2 *{box-sizing:border-box}
.clsv2 button,.clsv2 input,.clsv2 select{font:inherit}
.clsv2-visit{flex:0 0 auto;display:flex;align-items:center;gap:8px;min-height:36px;padding:4px 10px;background:var(--surface-2);border-bottom:1px solid var(--line-brand)}
 .clsv2-current{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:var(--fs-sm)}
.clsv2-current b{color:var(--brand);font-weight:var(--fw-semibold)}
 .clsv2-visit-label{margin-left:auto;color:var(--muted);font-size:var(--fs-sm);white-space:nowrap}
.clsv2 .kb-ident{flex:0 0 auto;margin:0!important}
.clsv2 .kb-makcb{padding-right:30px}

.clsv2-main{flex:1 1 auto;display:flex;min-height:0}
.clsv2-left{position:relative;flex:0 0 320px;width:320px;display:flex;flex-direction:column;min-height:0;background:var(--surface-2);border-right:1px solid var(--line)}
.clsv2-left-title{display:flex;align-items:center;gap:6px;min-height:28px;padding:5px 8px;background:var(--brand-soft);border-bottom:1px solid var(--line-brand);color:var(--brand);font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.05em;text-transform:uppercase}
.clsv2-left-title .sp{flex:1}
.clsv2-iconbtn{width:24px;height:22px;padding:0;border:1px solid var(--line-brand);border-radius:var(--radius-sm);background:var(--surface);color:var(--brand);cursor:pointer}
.clsv2-iconbtn:hover{background:var(--surface-3)}
.clsv2-search{position:relative;display:flex;gap:6px;padding:7px 8px}
.clsv2-search-wrap{position:relative;flex:1;min-width:0}
.clsv2-search-wrap>i{position:absolute;left:8px;top:8px;color:var(--muted-2);font-size:var(--fs-sm)}
.clsv2-search input{width:100%;height:var(--h-input-sm);padding:0 8px 0 25px;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--surface);color:var(--text)}
.clsv2-search input:focus{outline:0;border-color:var(--focus-bd);box-shadow:var(--focus-ring)}
.clsv2-filter-btn{position:relative;width:var(--h-input-sm);height:var(--h-input-sm);border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--surface);color:var(--muted);cursor:pointer}
.clsv2-filter-btn:hover{background:var(--surface-3)}
.clsv2-filter-count{position:absolute;right:-5px;top:-5px;display:grid;place-items:center;min-width:15px;height:15px;padding:0 3px;border-radius:8px;background:var(--brand);color:var(--btn-on, #fff);font-size:9px;font-weight:var(--fw-bold)}
.clsv2-filter-pop{position:absolute;z-index:35;top:65px;left:8px;right:8px;padding:8px;background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow-lg)}
.clsv2-filter-actions{display:flex;justify-content:flex-end;gap:6px;padding-top:2px}
.clsv2-chips{display:flex;gap:6px;flex-wrap:wrap;padding:0 8px 7px}
.clsv2-chip{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--surface);color:var(--muted);font-size:var(--fs-sm);cursor:pointer}
.clsv2-chip:hover{background:var(--surface-3)}
.clsv2-chip.active{background:var(--sel-solid-bg);border-color:var(--sel-solid-bg);color:var(--btn-on, #fff)}
.clsv2-chip b{font-weight:var(--fw-bold);color:inherit}
.clsv2-dot-danger{width:7px;height:7px;border-radius:50%;background:var(--hi)}
.clsv2-selectall{display:flex;align-items:center;gap:7px;min-height:28px;padding:5px 10px;background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:var(--fs-sm);cursor:pointer}
.clsv2-selectall .count{margin-left:auto;color:var(--muted);font-family:var(--font-mono);font-size:var(--fs-xs)}
.clsv2 input[type=checkbox]{margin:0;accent-color:var(--brand)}
.clsv2-tree{flex:1 1 auto;min-height:0;overflow:auto}
.clsv2-group{display:flex;align-items:center;gap:7px;min-height:28px;padding:5px 9px;background:var(--brand-soft);border-top:1px solid var(--line-brand);border-bottom:1px solid var(--line-brand);color:var(--brand);font-size:var(--fs-sm);font-weight:var(--fw-bold)}
.clsv2-group-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.clsv2-group-count{color:var(--muted);font-family:var(--font-mono);font-size:var(--fs-xs)}
.clsv2-group-toggle{width:18px;height:18px;padding:0;border:0;background:transparent;color:var(--brand);cursor:pointer}
.clsv2-item{display:flex;align-items:flex-start;gap:7px;min-height:46px;padding:7px 9px 6px 13px;border-bottom:1px solid var(--line);background:var(--surface);cursor:pointer}
.clsv2-item:hover{background:var(--surface-2)}
.clsv2-item.active{background:var(--row-sel);box-shadow:inset 3px 0 0 var(--row-sel-bar);color:var(--row-sel-text)}
.clsv2-item-dot{flex:0 0 auto;width:7px;height:7px;margin-top:5px;border-radius:50%;background:var(--muted-2)}
.clsv2-item-dot.done{background:var(--brand-2)}
.clsv2-item-dot.abn{background:var(--hi)}
.clsv2-item-main{flex:1;min-width:0}
.clsv2-item-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:var(--fs-sm);font-weight:var(--fw-medium);line-height:1.35}
.clsv2-seen{color:var(--brand);font-weight:var(--fw-bold)}
.clsv2-item-meta{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:2px;color:var(--muted);font-size:var(--fs-xs)}
.clsv2-type{padding:0 4px;border:1px solid var(--line-2);border-radius:var(--radius-sm);font-size:9px;text-transform:uppercase}
.clsv2-abn-count{flex:0 0 auto;display:grid;place-items:center;min-width:17px;height:17px;padding:0 4px;border-radius:var(--radius-sm);background:var(--badge-danger-bg);color:var(--hi);font-size:var(--fs-xs);font-weight:var(--fw-bold)}
.clsv2-eye{flex:0 0 auto;width:17px;margin-top:1px;text-align:center;color:var(--muted-2);font-size:var(--fs-xs)}
.clsv2-eye.mine{color:var(--brand)}
.clsv2-right{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;min-height:0}
.clsv2-tabs{display:flex;align-items:flex-end;gap:2px;min-height:35px;padding:5px 10px 0;background:var(--surface-3);border-bottom:1px solid var(--line)}
.clsv2-tab{height:30px;padding:0 14px;border:1px solid var(--line);border-bottom:0;border-radius:var(--radius-sm) var(--radius-sm) 0 0;background:var(--surface-2);color:var(--muted);font-size:var(--fs-sm);font-weight:var(--fw-semibold);cursor:pointer}
.clsv2-tab.active{background:var(--surface);color:var(--sel-nav-text);box-shadow:inset 0 2px 0 var(--sel-nav-bar)}
.clsv2-tabs .sp{flex:1}
.clsv2-view-label{padding-bottom:7px;color:var(--muted-2);font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:.04em;text-transform:uppercase}
.clsv2-seg{display:flex;margin-bottom:5px;border:1px solid var(--line-2);border-radius:var(--radius-sm);overflow:hidden;background:var(--surface)}
.clsv2-seg button{height:24px;padding:0 10px;border:0;border-left:1px solid var(--line);background:transparent;color:var(--muted);font-size:var(--fs-sm);cursor:pointer}
.clsv2-seg button:first-child{border-left:0}
.clsv2-seg button.active{background:var(--sel-solid-bg);color:var(--btn-on, #fff);font-weight:var(--fw-semibold)}
.clsv2-abn-only{display:flex;align-items:center;gap:6px;padding:0 0 7px 5px;color:var(--muted);font-size:var(--fs-sm);white-space:nowrap}
.clsv2-viewing{display:flex;align-items:center;gap:7px;min-height:30px;padding:5px 11px;background:var(--surface);border-bottom:1px solid var(--line);color:var(--muted);font-size:var(--fs-sm)}
.clsv2-viewing b{color:var(--brand);font-weight:var(--fw-semibold)}
.clsv2-pane{flex:1 1 auto;min-height:0;overflow:auto;background:var(--surface)}
.clsv2-table{width:100%;border-collapse:collapse}
.clsv2-table thead th{position:sticky;z-index:3;top:0;padding:6px 9px;background:var(--surface-3);border-bottom:1px solid var(--line-2);color:var(--muted);font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.04em;text-align:left;text-transform:uppercase;white-space:nowrap}
.clsv2-table th.r,.clsv2-table td.r{text-align:right}
.clsv2-table td{padding:5px 9px;border-bottom:1px solid var(--line);vertical-align:top}
.clsv2-table tr.abn{background:var(--badge-danger-bg)}
.clsv2-table .service td{padding:6px 9px;background:var(--brand-soft);border-top:1px solid var(--line-brand);border-bottom:1px solid var(--line-brand);color:var(--brand);font-weight:var(--fw-bold)}
.clsv2-table .service.current td{background:var(--row-sel);box-shadow:inset 3px 0 0 var(--row-sel-bar);color:var(--row-sel-text)}
 .clsv2-service-meta{color:var(--muted);font-size:var(--fs-sm);font-weight:var(--fw-normal)}
.clsv2-normal,.clsv2-unit,.clsv2-time{color:var(--muted);white-space:nowrap}
.clsv2-result{display:inline-flex;justify-content:flex-end;align-items:center;gap:4px;min-width:100%;font-weight:var(--fw-bold);font-variant-numeric:tabular-nums}
.clsv2-result.hi{color:var(--hi)}
.clsv2-result.lo{color:var(--lo)}
.clsv2-result-flag{display:inline-block;width:10px;text-align:center}
 .clsv2-position{position:relative;display:block;width:112px;height:8px;border:1px solid var(--line);border-radius:var(--radius, 2px);background:linear-gradient(90deg,var(--badge-info-bg) 0 22%,var(--brand-soft) 22% 78%,var(--badge-danger-bg) 78% 100%)}
.clsv2-position i{position:absolute;top:-3px;width:2px;height:12px;transform:translateX(-1px);background:var(--text)}
.clsv2-position.hi i{background:var(--hi)}
.clsv2-position.lo i{background:var(--lo)}
 .clsv2-cdha-inline{display:flex;flex-direction:column;gap:4px;padding-left:4px;line-height:1.5}
.clsv2-cdha-inline b{color:var(--brand)}
.clsv2-wait{color:var(--btn-warn);font-weight:var(--fw-semibold)}
.clsv2-cards{display:flex;flex-direction:column;gap:12px;padding:12px}
.clsv2-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-sm)}
.clsv2-card.current{border-color:var(--brand);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 18%,transparent),var(--shadow-md)}
.clsv2-card-head{display:flex;align-items:flex-start;gap:9px;padding:8px 11px;background:var(--brand-soft);border-bottom:2px solid var(--brand)}
.clsv2-card-icon{flex:0 0 auto;display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--line-brand);border-radius:var(--radius-sm);background:var(--surface);color:var(--brand)}
.clsv2-card-title{color:var(--brand);font-size:var(--fs-md);font-weight:var(--fw-bold)}
.clsv2-card-meta{margin-top:2px;color:var(--muted);font-size:var(--fs-sm)}
.clsv2-card-actions{display:flex;align-items:center;gap:5px;margin-left:auto}
.clsv2-block{padding:8px 12px;border-bottom:1px solid var(--line)}
.clsv2-block:last-child{border-bottom:0}
.clsv2-block-label{margin-bottom:3px;color:var(--brand);font-weight:var(--fw-semibold)}
.clsv2-block-value{padding-left:13px;border-left:2px solid var(--line-brand);line-height:1.55;white-space:pre-wrap}
.clsv2-images{display:flex;gap:10px;flex-wrap:wrap;padding:10px 12px}
.clsv2-images img{width:220px;height:160px;padding:2px;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--surface-3);cursor:zoom-in;object-fit:contain}
.clsv2-card-foot{display:flex;gap:12px;flex-wrap:wrap;padding:6px 11px;background:var(--surface-2);border-top:1px solid var(--line);color:var(--muted);font-size:var(--fs-xs)}
.clsv2-status{display:inline-flex;align-items:center;gap:4px;height:18px;padding:0 6px;border-radius:var(--radius-sm);font-size:var(--fs-xs);font-weight:var(--fw-bold);text-transform:uppercase;white-space:nowrap}
.clsv2-status.wait{background:var(--badge-warning-bg);color:var(--btn-warn)}
.clsv2-status.result{background:var(--badge-danger-bg);color:var(--hi)}
.clsv2-status.approved{background:var(--brand-soft);color:var(--brand)}
.clsv2-footer{position:relative;flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;gap:8px;min-height:44px;padding:8px 12px;background:var(--surface-3);border-top:1px solid var(--line-2)}
.clsv2-footer-note{margin-right:auto;color:var(--muted);font-size:var(--fs-sm)}
.clsv2-footer-note b{color:var(--brand)}
.clsv2-print-arrow{padding-left:7px!important;padding-right:7px!important;margin-left:-6px}
.clsv2-menu{position:absolute;z-index:50;right:12px;bottom:42px;min-width:350px;max-width:min(32rem,92vw);max-height:min(62vh,28rem);overflow:auto;padding:8px;background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow-lg);color:var(--text)}
.clsv2-menu-title{display:flex;align-items:center;gap:8px;margin-bottom:6px;color:var(--brand);font-weight:var(--fw-bold)}
.clsv2-menu-new{display:inline-flex;align-items:center;gap:5px;height:23px;margin-left:auto;padding:0 9px;border:1px solid var(--btn-add-border,#86efac);border-radius:var(--radius-sm);background:var(--btn-add-bg,#f0fdf4);color:var(--btn-add-text,#166534);font-size:var(--fs-xs);font-weight:var(--fw-semibold);cursor:pointer}
.clsv2-menu-new i{color:var(--btn-add-icon,#15803d)}
.clsv2-menu-group{margin:8px 0 2px;color:var(--muted-2);font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.03em;text-transform:uppercase}
.clsv2-menu-row{display:flex;align-items:center;gap:6px;padding:5px 2px;border-top:1px solid var(--line);font-size:var(--fs-sm)}
.clsv2-menu-group+.clsv2-menu-row{border-top:0}
.clsv-mau-id{flex:0 0 auto;color:var(--muted);font:var(--fw-semibold) var(--fs-xs)/1 var(--font-mono);white-space:nowrap}
.clsv2-menu-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clsv2-menu-actions{display:flex;gap:4px;margin-left:auto}
.clsv2-menu-actions button{height:23px;padding:0 8px;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--surface-3);color:var(--text);font-size:var(--fs-xs);cursor:pointer}
.clsv2-chonin{flex:0 0 auto;display:inline-flex;align-items:center;margin:0 var(--sp-2) 0 0;cursor:pointer}
.clsv2-card-head .clsv2-chonin{margin:var(--sp-1) 0 0}
.clsv2-chonin input{width:16px;height:16px;margin:0;cursor:pointer}
.clsv2-chonin input:disabled{cursor:not-allowed}
.clsv2-menu-phieu{margin:var(--sp-2) 0 0;padding:var(--sp-1) var(--sp-2);background:var(--brand-soft);color:var(--brand);font-size:var(--fs-sm);font-weight:var(--fw-bold)}
.clsv2-menu-row input[data-mau-tich]{flex:0 0 auto;width:16px;height:16px;margin:0;cursor:pointer}
.clsv2-menu-chan{position:sticky;bottom:calc(var(--sp-2) * -1);display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-2);margin:var(--sp-2) calc(var(--sp-2) * -1) calc(var(--sp-2) * -1);padding:var(--sp-2);background:var(--surface-3);border-top:1px solid var(--line-2)}
.clsv2-menu-dem{margin-right:auto;color:var(--muted);font-size:var(--fs-sm)}
.clsv2-menu-dem b{color:var(--brand)}
.clsv2-nhap{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-3);padding:var(--sp-3)}
.clsv2-nhap.co-anh{grid-template-columns:minmax(0,1fr) minmax(14rem,24rem)}
.clsv2-nhap-form{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
.clsv2-nhap-tt{color:var(--muted);font-size:var(--fs-sm)}
.clsv2-nhap-hang{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:var(--sp-2)}
.clsv2-nhap-o{min-width:0}
.clsv2-nhap-o>label{display:block;margin:0 0 var(--sp-1);color:var(--text);font-weight:var(--fw-semibold)}
.clsv2-nhap-o textarea{display:block;width:100%;padding:var(--sp-1) var(--sp-2);border:1px solid var(--line-2);border-radius:var(--radius);background:var(--surface);color:var(--text);line-height:1.5;resize:vertical}
.clsv2-nhap-o textarea:focus{border-color:var(--focus-bd);outline:0}
.clsv2-nhap-nut{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-2)}
.clsv2-nhap-nut .btn-close{margin-right:auto}
.clsv2-card-ky{margin-left:auto}
.clsv2-card-ky+.clsv2-card-actions{margin-left:0}
.clsv2-ky{display:inline-flex;align-items:center;gap:var(--sp-1)}
.clsv2-ky[hidden]{display:none}
.clsv2-nhap-tiep{min-width:0;overflow:hidden;color:var(--muted);font-size:var(--fs-sm);text-overflow:ellipsis;white-space:nowrap}
.clsv2-nhap-anh{min-width:0;max-height:32rem;overflow:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2)}
.clsv2-nhap-anh .clsv2-images{flex-direction:column;flex-wrap:nowrap;padding:var(--sp-2)}
.clsv2-nhap-anh .clsv2-images img{width:100%;height:auto}
@media (max-width:1100px){.clsv2-nhap.co-anh{grid-template-columns:minmax(0,1fr)}}
.clsv2-map{width:min(450px,92vw);padding:10px}
.clsv2-map-note{margin-bottom:8px;color:var(--muted);font-size:var(--fs-sm);line-height:1.4}
.clsv2-map-row{display:grid;grid-template-columns:125px 1fr;gap:7px;align-items:center;margin-top:7px;font-size:var(--fs-sm)}
.clsv2-map-row select{height:29px;min-width:0;padding:0 5px;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--surface);color:var(--text)}
.clsv2-map-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:10px}
.clsv2-trend-filter{background:var(--surface-2);border-bottom:1px solid var(--line)}
.clsv2-trend-body{padding:0 11px 11px;overflow:auto}
.clsv2-empty{padding:24px;text-align:center;color:var(--muted)}
.clsv2-lightbox{position:fixed;z-index:3000;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.86);cursor:zoom-out}
.clsv2-lightbox img{max-width:94vw;max-height:94vh;box-shadow:0 8px 40px rgba(0,0,0,.6)}
.clsv2-help{flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;margin-left:6px;border:1px solid var(--line-2);border-radius:50%;background:var(--surface);color:var(--brand);cursor:pointer;font-size:14px}
.clsv2-help:hover{background:var(--brand-soft);border-color:var(--line-brand)}
.clsv2-helpbox{position:fixed;z-index:3200;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5)}
.clsv2-helpcard{width:min(560px,92vw);max-height:86vh;overflow:auto;background:var(--surface);color:var(--text);border:1px solid var(--line-2);border-radius:var(--radius);box-shadow:var(--shadow-lg)}
.clsv2-helphead{display:flex;align-items:center;gap:8px;padding:11px 14px;background:var(--brand-soft);border-bottom:2px solid var(--brand);color:var(--brand);font-weight:var(--fw-bold)}
.clsv2-helphead .sp{margin-left:auto}
.clsv2-helphead button{width:28px;height:28px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--brand);cursor:pointer;font-size:16px}
.clsv2-helpbody{padding:12px 16px;line-height:1.6}
.clsv2-helpbody h5{margin:10px 0 4px;color:var(--brand)}
.clsv2-helpbody ul{margin:2px 0 8px;padding-left:20px}
.clsv2-helpbody .tag{display:inline-block;padding:0 6px;border-radius:var(--radius-sm);font-size:var(--fs-xs);font-weight:var(--fw-bold)}
@container (max-width:1000px){.clsv2-left{flex-basis:285px;width:285px}
.clsv2-card-actions .btn-outline span{display:none}
}
@container (max-width:760px){.clsv2-left{flex-basis:250px;width:250px}
.clsv2-view-label{display:none}
.clsv2-tabs{gap:1px}
.clsv2-seg button{padding:0 7px}
.clsv2-footer-note{display:none}
}
/* Màn nhỏ: xếp dọc cây dịch vụ trên/kết quả dưới, footer + hàng "Lần khám" tự xuống dòng, nút thu gọn còn icon. */
@container (max-width:620px){
 .clsv2-main{flex-direction:column}
 .clsv2-left{flex:0 0 auto!important;width:100%!important;max-height:42vh;border-right:0;border-bottom:2px solid var(--line-brand)}
 .clsv2-right{flex:1 1 auto;min-height:240px}
 .clsv2-footer{flex-wrap:wrap;gap:6px;min-height:0}
 .clsv2-footer .btn-outline span,.clsv2-footer .btn-print span{display:none}
 .clsv2-footer .btn-outline,.clsv2-footer .btn-print{flex:1 1 auto;justify-content:center}
 .clsv2-print-arrow{flex:0 0 auto!important;margin-left:0}
 .clsv2-visit{flex-wrap:wrap;row-gap:4px}
 .clsv2-visit-label{margin-left:0}
 .clsv2-visit-select{flex:1 1 150px;min-width:0}
 .clsv2-tabs{flex-wrap:wrap;row-gap:4px;flex-shrink:0;padding-bottom:4px}
 .clsv2-tab{flex:0 0 auto}
 .clsv2-abn-only{padding-bottom:0}
}
@container (max-width:430px){
 .clsv2-images{padding:8px}
.clsv2-images img{width:100%;height:auto}
 .clsv2-tab{padding:0 9px}
 .clsv2-card-head{flex-wrap:wrap}
 .clsv2-card-actions{margin-left:0;width:100%}
 .clsv2-map-row{grid-template-columns:1fr}
 .clsv2-menu{left:8px;right:8px;min-width:0}
}

/* ==== wd-standalone-noti — CSS thành phần host (trước là <style> JS chèn lúc chạy; gộp vào đây để nạp tĩnh, hết nháy) ==== */
/* Trước 30/09/2026 CSS này do wd-standalone-noti.js (ganCss, <style id="wdsaCss">) chèn <style> lúc chạy;
   nay là tệp tĩnh (docs/design.md §2b) — JS chỉ gắn <link> một lần. Sửa CSS ở ĐÂY, không sửa chuỗi trong JS. */
.wdsa-tai{position:fixed;right:0;top:40%;z-index:2147481000;box-sizing:border-box;width:26px;min-height:40px;padding:9px 0 7px;margin:0;display:flex;flex-direction:column;align-items:center;gap:5px;border:1px solid var(--line-2,#cbd5d0);border-right:0;border-radius:var(--radius-sm,2px) 0 0 var(--radius-sm,2px);background:var(--surface,#fff);color:var(--brand,#055952);box-shadow:var(--shadow-md,0 2px 6px rgba(15,23,42,.07));cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;font:700 11px/1 var(--font-ui,'Segoe UI',Roboto,Arial,sans-serif);transition:width .12s ease,background-color .12s ease,color .12s ease}
.wdsa-tai:hover,.wdsa-tai[aria-expanded=true]{width:30px}
.wdsa-tai:focus-visible{outline:2px solid var(--brand,#055952);outline-offset:2px}
.wdsa-tai i{font-size:13px;pointer-events:none}
.wdsa-so{display:none;font-variant-numeric:tabular-nums;pointer-events:none}
.wdsa-tai.co{background:var(--brand,#055952);border-color:var(--brand,#055952);color:var(--btn-on, #fff)}
.wdsa-tai.khan{background:var(--st-danger-text,#b91c1c);border-color:var(--st-danger-text,#b91c1c);color:var(--btn-on, #fff)}
.wdsa-tai.co .wdsa-so,.wdsa-tai.khan .wdsa-so{display:block}
.wdsa-tai.keo{cursor:grabbing;width:30px}
.wdsa-tai.moi{animation:wdsaNhu .6s ease-out 1}
@keyframes wdsaNhu{0%,100%{transform:translateX(0)}
35%{transform:translateX(-7px)}
}
.wdsa-panel{position:fixed;right:34px;top:80px;z-index:2147481001;box-sizing:border-box;width:360px;max-width:calc(100vw - 44px);max-height:min(70vh,560px);display:flex;flex-direction:column;background:var(--surface,#fff);color:var(--text,#0f172a);border:1px solid var(--line-2,#cbd5d0);border-radius:var(--radius-lg,2px);box-shadow:var(--shadow-lg,0 12px 40px rgba(0,0,0,.24));font:400 var(--fs-base,13px)/1.4 var(--font-ui,'Segoe UI',Roboto,Arial,sans-serif);opacity:1;transform:none;transition:opacity .12s ease,transform .12s ease}
.wdsa-panel[hidden]{display:none}
.wdsa-panel.vao{opacity:0;transform:translateX(6px)}
.wdsa-h{display:flex;align-items:center;gap:4px;padding:6px 6px 6px 12px;border-bottom:1px solid var(--line,#e5e7eb)}
.wdsa-ti{flex:1;margin:0;display:flex;align-items:center;gap:7px;font:600 var(--fs-md,14px)/1.3 var(--font-ui,'Segoe UI',Roboto,Arial,sans-serif);color:var(--brand,#055952)}
.wdsa-nut{width:28px;height:28px;margin:0;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:var(--radius-sm,2px);background:transparent;color:var(--muted,#475569);font-size:13px;cursor:pointer}
.wdsa-nut:hover{background:var(--surface-3,#eef1f5);color:var(--text,#0f172a)}
.wdsa-nut:focus-visible,.wdsa-muc:focus-visible,.wdsa-hopthu:focus-visible{outline:2px solid var(--brand,#055952);outline-offset:-2px}
.wdsa-tom{padding:6px 12px;font-size:var(--fs-sm,12px);color:var(--muted,#475569);border-bottom:1px solid var(--line,#e5e7eb)}
.wdsa-tom b{color:var(--st-danger-text,#b91c1c);font-weight:600}
.wdsa-ds{flex:1 1 auto;min-height:0;overflow:auto;margin:0;padding:2px 0;list-style:none}
.wdsa-muc{display:flex;align-items:flex-start;gap:6px;padding:8px 6px 8px 9px;border-left:3px solid transparent;border-bottom:1px solid var(--line,#e5e7eb);cursor:pointer}
.wdsa-muc:hover{background:var(--row-hover,#e1f4e8)}
.wdsa-muc.chua{border-left-color:var(--brand,#055952)}
.wdsa-muc.khan.chua{border-left-color:var(--st-danger-text,#b91c1c)}
.wdsa-than{flex:1;min-width:0}
.wdsa-tieude{font-weight:600;overflow-wrap:anywhere}
.wdsa-muc.da .wdsa-tieude{font-weight:400;color:var(--muted,#475569)}
.wdsa-ct{margin-top:1px;font-size:var(--fs-sm,12px);color:var(--muted,#475569);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wdsa-meta{margin-top:3px;display:flex;flex-wrap:wrap;gap:10px;font-size:var(--fs-xs,11px);color:var(--muted,#475569)}
.wdsa-meta .khan{color:var(--st-danger-text,#b91c1c);font-weight:600}
.wdsa-rong{padding:28px 12px;text-align:center;color:var(--muted,#475569);font-size:var(--fs-sm,12px)}
.wdsa-chan{display:flex;justify-content:flex-end;padding:6px 8px}
.wdsa-hopthu{height:28px;padding:0 10px;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2,#cbd5d0);border-radius:var(--radius-sm,2px);background:var(--surface,#fff);color:var(--brand,#055952);font:600 var(--fs-sm,12px)/1 var(--font-ui,'Segoe UI',Roboto,Arial,sans-serif);cursor:pointer}
.wdsa-hopthu:hover{border-color:var(--brand,#055952);background:var(--brand-soft,#ecfdf3)}
@media (max-width:480px){.wdsa-panel{right:30px;width:calc(100vw - 38px)}
}
@media (prefers-reduced-motion:reduce){.wdsa-tai,.wdsa-panel{transition:none!important;animation:none!important}
}

/* ==== wdhelp — CSS thành phần host (trước là <style> JS chèn lúc chạy; gộp vào đây để nạp tĩnh, hết nháy) ==== */
/* Trước 30/09/2026 CSS này do wdhelp.js (injectStyle, <style id="wdHelpStyle">) chèn <style> lúc chạy;
   nay là tệp tĩnh (docs/design.md §2b) — JS chỉ gắn <link> một lần. Sửa CSS ở ĐÂY, không sửa chuỗi trong JS. */
/* FAB đã bỏ; giữ ẩn phòng bản cache cũ còn chèn #wdHelpFab. */
.wdh-fab{display:none!important;}
.wdh-ovl{display:none;position:fixed;inset:0;z-index:2147483500;background:rgba(8,18,30,.5);align-items:center;justify-content:center;}
.wdh-ovl.open{display:flex;}
.wdh-box{width:680px;max-width:94vw;max-height:86vh;background:var(--surface, #fff);border-radius:var(--radius, 2px);box-shadow:0 22px 60px rgba(0,0,0,.4);display:flex;flex-direction:column;overflow:hidden;}
.wdh-h{padding:13px 18px;background:var(--pal-blue-600, #2563eb);color:var(--btn-on, #fff);display:flex;align-items:center;gap:9px;font-weight:600;font-size:var(--fs-lg, 16px);}
.wdh-h .wdh-x{margin-left:auto;cursor:pointer;padding:2px 9px;border-radius:var(--radius, 2px);font-size:var(--fs-xl, 20px);line-height:1;}
.wdh-h .wdh-x:hover{background:rgba(255,255,255,.2);}
.wdh-b{padding:18px 22px;overflow:auto;font-size:var(--fs-base, 13px);color:#2a3942;line-height:1.65;}
.wdh-b h4{color:var(--st-progress-text, #1d4ed8);margin:15px 0 6px;font-size:14px;}
.wdh-b h4:first-child{margin-top:0;}
.wdh-b ol,.wdh-b ul{margin:4px 0 10px;padding-left:22px;}
.wdh-b li{margin-bottom:5px;}
.wdh-b b{color:#2563eb;}
.wdh-b kbd{background:var(--surface-3, #eef2f7);border:1px solid var(--line-strong, #cbd5e1);border-bottom-width:2px;border-radius:var(--radius, 2px);padding:1px 6px;font-size:12px;font-family:Consolas,monospace;color:var(--pal-slate-800, #1e293b);}
.wdh-b .tip{background:var(--st-progress-bg, #eff6ff);border-left:3px solid var(--pal-blue-600, #2563eb);padding:9px 13px;border-radius:0 var(--radius, 2px) var(--radius, 2px) 0;margin:10px 0;}
.wdh-b .warn{background:var(--st-wait-bg, #fff7ed);border-left:3px solid var(--pal-amber-500, #f59e0b);padding:9px 13px;border-radius:0 var(--radius, 2px) var(--radius, 2px) 0;margin:10px 0;}
.wdh-b img{max-width:100%;border:1px solid var(--grid-neutral-line, #e2e8f0);border-radius:var(--radius, 2px);margin:8px 0;display:block;}
.wdh-b figcaption{font-size:12px;color:var(--muted-soft, #64748b);text-align:center;margin:-2px 0 12px;}
.wd-help-title-btn{margin-left:auto;min-width:34px;height:30px;padding:0 9px;border:1px solid rgba(255,255,255,.7);background:transparent;color:inherit;cursor:pointer;font-weight:700;font-size:var(--fs-lg, 16px);line-height:1;border-radius:2px;}
.wd-help-title-btn:hover,.wd-help-title-btn:focus{background:rgba(255,255,255,.16);outline:2px solid rgba(255,255,255,.55);outline-offset:1px;}
.tkai-root>.wd-help-title-btn{position:absolute;top:9px;right:12px;z-index:5;color:var(--muted, #475569);border-color:var(--line-strong, #cbd5e1);background:var(--surface, #fff);}
.vp-toolbar>.wd-help-title-btn{color:var(--btn-on, #fff);}
.wd-help-title-fallback{position:fixed;top:7px;right:10px;z-index:98000;color:var(--btn-on, #fff)!important;background:var(--pal-teal-700, #0f766e)!important;border-color:var(--surface, #fff)!important;font-weight:800!important;font-size:var(--fs-lg, 16px)!important;box-shadow:0 1px 4px rgba(15,23,42,.25);}
/* theme tối */

/* ==== cls-tieuhao — CSS thành phần host (trước là <style> JS chèn lúc chạy; gộp vào đây để nạp tĩnh, hết nháy) ==== */
/* Trước 30/09/2026 CSS này do cls-tieuhao.js (ensureModal, <style id="thModalCss">) chèn <style> lúc chạy;
   nay là tệp tĩnh (docs/design.md §2b) — JS chỉ gắn <link> một lần. Sửa CSS ở ĐÂY, không sửa chuỗi trong JS. */
/* Từ 27/10/2026 hộp là modal dùng chung dialogDiv (#thModal_bs_modal): khung, tiêu đề, nút ×, nền mờ do host lo;
   #thModal chỉ còn là NỘI DUNG nằm trong modal-body (thân hộp không đệm — các dải tự có lề 16px). */
#thModal_bs_body{padding:0}
#thModal .th-box{width:100%;height:min(80vh,720px);display:flex;flex-direction:column;overflow:hidden;background:var(--surface,#fff);font-family:var(--font-ui,"Segoe UI",Roboto,Arial,sans-serif);font-size:var(--fs-base,13px);color:var(--text,#0f172a)}
#thModal *{box-sizing:border-box}
/* Khối bệnh nhân: dùng .kb-ident DÙNG CHUNG (benhnhan-head.css) — ở đây chỉ chỉnh KHUNG. */
/* Trước 18/08/2026 modal tự dựng lưới 4 cột "Nhãn: giá trị" (.th-bn), lệch 13 màn kia. */
#thModal .th-ident{flex:0 0 auto;margin:0;border-width:0 0 1px 4px;border-radius:0}
/* Dải bối cảnh DỊCH VỤ nằm riêng (không nhét vào header) vì ô Dịch vụ có thể là <select> */
/* khi 1 lượt có nhiều DV — vùng 3 của header chỉ nhận text. */
#thModal .th-dv{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:5px 22px;padding:8px 16px;background:var(--brand-soft,#ecfdf3);border-bottom:1px solid var(--line,#e5e7eb);font-size:var(--fs-sm,12px);color:var(--muted,#475569)}
#thModal .th-dv b{color:var(--text,#0f172a)}
#thModal .th-dv .code{font-family:var(--font-mono,ui-monospace,Consolas,monospace);color:var(--brand-dark,#13503f)}
#thModal .th-dv-chon{display:inline-flex;align-items:center;gap:6px}
#thModal .th-dv-chon .ts-wrapper{min-width:260px}
#thModal .th-cfg{flex:0 0 auto;display:grid;grid-template-columns:repeat(12,1fr);gap:8px 12px;padding:12px 16px;border-bottom:1px solid var(--line,#e5e7eb);background:var(--surface-2,#f6fefa)}
#thModal .fld{display:flex;flex-direction:column;gap:3px;min-width:0}
#thModal .fld.c3{grid-column:span 3}
#thModal .fld.c2{grid-column:span 2}
#thModal .fld label{font-size:var(--fs-xs,11px);color:var(--muted,#475569);font-weight:var(--fw-semibold,600);text-transform:uppercase;white-space:nowrap}
#thModal .ctrl{height:var(--h-input,32px);padding:0 8px;border:1px solid var(--line-2,#cbd5d0);border-radius:var(--radius-sm,2px);background:var(--surface,#fff);color:var(--text,#0f172a);font:inherit;font-size:var(--fs-base,13px);width:100%}
#thModal .ctrl:focus-visible{outline:2px solid var(--brand-2,#22a06b);outline-offset:1px}
#thModal .th-add{flex:0 0 auto;display:flex;gap:8px;align-items:flex-end;padding:12px 16px 0}
#thModal .th-add .fld{flex:1}
#thModal .btn{height:var(--h-input,32px);padding:0 14px;border:0 !important;border-radius:var(--radius-sm,2px);color:var(--btn-on, #fff) !important;font:inherit;font-weight:var(--fw-semibold,600);font-size:var(--fs-sm,12px);display:inline-flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap}
#thModal .btn i{font-style:normal;color:inherit}
#thModal .btn.add{background:var(--act-add,#079455) !important}
#thModal .btn.save{background:var(--act-save,#175cd3) !important}
#thModal .btn.print{background:var(--act-print,#079455) !important}
#thModal .btn.default{background:var(--act-default,#13503f) !important}
#thModal .btn.ghost{background:var(--surface,#fff) !important;color:var(--muted,#475569) !important;border:1px solid var(--line-2,#cbd5d0) !important}
#thModal .btn.th-help{margin-left:auto;height:24px;padding:0 9px}
#thModal .btn:disabled{opacity:.5;cursor:not-allowed}
#thModal .th-grid{flex:1 1 auto;min-height:0;margin:8px 16px;border:1px solid var(--line,#e5e7eb);border-radius:var(--radius-sm,2px);overflow:auto}
#thModal table{width:100%;border-collapse:collapse;font-size:var(--fs-sm,12px)}
#thModal thead th{position:sticky;top:0;background:var(--brand-soft,#ecfdf3);color:var(--brand-dark,#13503f);font-weight:var(--fw-semibold,600);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line-2,#cbd5d0);white-space:nowrap;font-size:var(--fs-xs,11px);text-transform:uppercase;z-index:1}
#thModal th.num,#thModal td.num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--font-mono,ui-monospace,Consolas,monospace)}
#thModal tbody td{padding:7px 10px;border-bottom:1px solid var(--line,#e5e7eb);white-space:nowrap}
#thModal tbody tr:hover{background:var(--row-hover,#e1f4e8)}
#thModal tbody .mono{font-family:var(--font-mono,ui-monospace,Consolas,monospace);color:var(--brand-dark,#13503f);font-size:var(--fs-xs,11px)}
/* (Đã bỏ rule `#thModal .chip{...border-radius:20px}` — KHÔNG dòng nào phát ra class đó, */
/* mà specificity id (1,1,0) lại ĐÈ chip dùng chung `.kb-chips .chip` (0,2,0) làm chip */
/* giới tính trong header biến thành pill bo tròn. Xem memory css-cuc-bo-de-component-chung.) */
#thModal .rowbtn{height:24px;padding:0 9px;border:0;border-radius:2px;color:var(--btn-on, #fff);font-size:var(--fs-xs,11px);font-weight:600;cursor:pointer;background:var(--act-delete,#dc2626)}
#thModal .empty{text-align:center;color:var(--muted-2,#94a3b8);padding:24px}
#thModal .th-foot{flex:0 0 auto;display:flex;gap:8px;align-items:center;padding:10px 16px;border-top:1px solid var(--line,#e5e7eb);background:var(--surface-2,#f6fefa)}
#thModal .legend{font-size:var(--fs-xs,11px);color:var(--muted,#475569)}
#thModal .total{font-size:var(--fs-md,14px);font-weight:700;color:var(--text,#0f172a);font-variant-numeric:tabular-nums}
#thModal .sp{flex:1}
/* Ô chọn vật tư #thPick là newDropDownSingleRemote (bảng gợi ý nhiều cột, định vị/lật panel do control lo). */

/* ==== his-loading — CSS thành phần host (trước là <style> JS chèn lúc chạy; gộp vào đây để nạp tĩnh, hết nháy) ==== */
/* Trước 30/09/2026 CSS này do Work/loading/his-loading.js (chenStyle, <style id="his-loading-style">) chèn <style> lúc chạy;
   nay là tệp tĩnh (docs/design.md §2b) — JS chỉ gắn <link> một lần. Sửa CSS ở ĐÂY, không sửa chuỗi trong JS. */
.his-loading{--hl-mat:var(--surface,#fff);--hl-chu:var(--text,#0f172a);--hl-vien:var(--line,#e5e7eb);--hl-nhan:var(--brand,#055952);--hl-phu:rgba(255,255,255,.66);position:absolute;top:0;left:0;width:100%;height:100%;box-sizing:border-box;margin:0;display:flex;align-items:center;justify-content:center;padding:var(--sp-3,12px);pointer-events:none;font:var(--fw-medium,500) var(--fs-base,13px)/1.3 var(--font-ui,'Segoe UI',Arial,sans-serif);color:var(--hl-chu);animation:hl-vao .14s ease-out var(--hl-tre,120ms) both}
.his-loading.hl-fixed{position:fixed;inset:0;width:auto;height:auto}
.his-loading.hl-overlay{pointer-events:auto;cursor:progress;background:var(--hl-phu)}
.his-loading .hl-card{display:inline-flex;align-items:center;gap:var(--sp-2,8px);max-width:100%;min-height:var(--h-input,32px);box-sizing:border-box;padding:0 var(--sp-3,12px);background:var(--hl-mat);border:1px solid var(--hl-vien);border-radius:var(--radius,2px);box-shadow:var(--shadow-md,0 2px 6px rgba(15,23,42,.07))}
/* border-radius:50% !important — win8.css ép radius 2px diện rộng; vòng quay phải luôn tròn. */
.his-loading .hl-spin{flex:0 0 auto;width:16px;height:16px;box-sizing:border-box;border-radius:50%!important;border:2px solid rgba(37,99,235,.18);border-top-color:var(--hl-nhan);animation:hl-quay .75s linear infinite}
.his-loading .hl-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Vùng quá nhỏ (dòng lưới, ô tiêu đề): bỏ thẻ, chỉ còn vòng quay. */
.his-loading.hl-nho{padding:2px}
.his-loading.hl-nho .hl-card{min-height:0;padding:0;border:0;background:transparent;box-shadow:none}
.his-loading.hl-nho .hl-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.his-loading.hl-top{align-items:flex-start}
.his-loading.hl-bottom{align-items:flex-end}
.his-loading.hl-left{justify-content:flex-start}
.his-loading.hl-right{justify-content:flex-end}
.his-loading.hl-top-left{align-items:flex-start;justify-content:flex-start}
.his-loading.hl-top-right{align-items:flex-start;justify-content:flex-end}
.his-loading.hl-bottom-left{align-items:flex-end;justify-content:flex-start}
.his-loading.hl-bottom-right{align-items:flex-end;justify-content:flex-end}
@keyframes hl-quay{to{transform:rotate(360deg)}
}
@keyframes hl-vao{from{opacity:0}
to{opacity:1}
}
@media (prefers-reduced-motion:reduce){.his-loading{animation-duration:.01ms}
.his-loading .hl-spin{animation-duration:1.8s}
}

/* ==== his-file-viewer — CSS thành phần host (trước là <style> JS chèn lúc chạy; gộp vào đây để nạp tĩnh, hết nháy) ==== */
/* Trước 30/09/2026 CSS này do Work/viewer/his-file-viewer.js (chenStyle, <style id="his-file-viewer-style">; ID = hisTepXem) chèn <style> lúc chạy;
   nay là tệp tĩnh (docs/design.md §2b) — JS chỉ gắn <link> một lần. Sửa CSS ở ĐÂY, không sửa chuỗi trong JS. */
#hisTepXem_bs_modal .modal-dialog{justify-content:center}
#hisTepXem_bs_modal .modal-content{display:flex;flex-direction:column;width:min(96vw,1280px);height:84vh}
#hisTepXem_bs_modal .modal-body{flex:1 1 auto;min-height:0;height:auto!important;padding:0!important;overflow:hidden!important}
/* WDModal tính «phóng to» theo KHUNG CHA của .modal-content → .modal-dialog phủ ngang cả khung, */
/* cỡ mặc định đặt ở .modal-content; thân hộp co giãn theo nó nên phóng to / kéo góc kéo theo cả sân khấu. */
.hfv-goc{height:100%}
.hfv{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--surface,#fff);color:var(--text,#0f172a);font-family:var(--font-ui);font-size:var(--fs-base,13px)}
/* Thanh công cụ: điều hướng · tên tệp · công cụ ảnh · ghi chú · tải/tab/hướng dẫn */
.hfv-cc{flex:0 0 auto;display:flex;align-items:center;gap:var(--sp-2,8px);min-height:40px;box-sizing:border-box;padding:5px var(--sp-2,8px);border-bottom:1px solid var(--line,#e5e7eb);background:var(--surface,#fff)}
.hfv-dh{flex:0 0 auto;display:flex;align-items:center;gap:2px}
.hfv-dem{min-width:54px;text-align:center;font-size:var(--fs-sm,12px);color:var(--muted,#475569);font-variant-numeric:tabular-nums}
.hfv-ten{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:var(--fw-semibold,600);color:var(--text-strong,#101828)}
.hfv-anhcc{flex:0 0 auto}
.hfv-tile{display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:29px;box-sizing:border-box;padding:0 4px;border:1px solid var(--btn-close-border,#cbd5e1);background:var(--surface,#fff);font-size:var(--fs-xs,11px);color:var(--muted,#475569);font-variant-numeric:tabular-nums}
.hfv-vach{flex:0 0 auto;width:1px;height:20px;background:var(--line,#e5e7eb)}
.hfv-cc [hidden]{display:none!important}
.hfv-cc button[aria-pressed='true']{background:var(--sel-nav-bg,#ecfdf3);border-color:var(--brand,#055952);color:var(--brand,#055952)}
.hfv-cc button[aria-pressed='true'] i{color:var(--brand,#055952)}
/* Sân khấu: tài liệu trên nền xám nhạt; ảnh trên «hộp đèn» tối cùng họ màu brand. */
.hfv-san{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:var(--surface-3,#eef1f5);outline:none}
.hfv-san.la-anh{background:radial-gradient(ellipse at 50% 45%,#2a3834 0%,#18221f 62%,#111916 100%)}
.hfv-noidung{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hfv-noidung.la-anh{touch-action:none;cursor:grab}
.hfv-noidung.la-tailieu{display:block}
.hfv-anh{max-width:100%;max-height:100%;object-fit:contain;transform-origin:center center;transition:transform .14s ease;user-select:none;-webkit-user-drag:none;box-shadow:0 6px 28px rgba(0,0,0,.45)}
.hfv-anh.dang-keo{transition:none;cursor:grabbing}
.hfv-khung{display:block;width:100%;height:100%;border:0;background:var(--surface, #fff)}
.hfv-pre{margin:0;box-sizing:border-box;width:100%;height:100%;overflow:auto;padding:var(--sp-3,12px) var(--sp-4,16px);white-space:pre-wrap;word-break:break-word;font:var(--fs-sm,12px)/1.55 var(--font-mono);background:var(--surface,#fff);color:var(--text,#0f172a)}
.hfv-bang{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;background:var(--surface,#fff)}
.hfv-docx{width:100%;height:100%;overflow:auto;background:var(--surface-3,#eef1f5)}
.hfv-docx .hfv-trang-wrapper{background:transparent!important;padding:var(--sp-4,16px) 0!important}
.hfv-docx .hfv-trang-wrapper>section.hfv-trang{box-shadow:var(--shadow-md,0 2px 6px rgba(15,23,42,.07)),0 0 0 1px var(--line,#e5e7eb);margin-bottom:var(--sp-4,16px)!important}
/* Mũi tên đảo tệp: hiện khi rê chuột lên sân khấu; máy cảm ứng thì luôn hiện. */
.hfv-nav{position:absolute;top:50%;z-index:4;width:40px;height:64px;margin-top:-32px;display:flex;align-items:center;justify-content:center;border:0;padding:0;background:rgba(15,23,42,.42);color:var(--btn-on, #fff);font-size:20px;cursor:pointer;opacity:0;transition:opacity .15s}
.hfv-nav.truoc{left:0}
.hfv-nav.sau{right:0}
.hfv-san:hover .hfv-nav,.hfv-nav:focus-visible{opacity:.9}
.hfv-nav:hover{background:rgba(15,23,42,.66)}
.hfv-nav[hidden]{display:none}
@media (hover:none){.hfv-nav{opacity:.8}
}
/* Hộp thông báo (lỗi / chưa hỗ trợ) */
.hfv-tb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2,8px);height:100%;padding:var(--sp-5,24px);box-sizing:border-box;text-align:center;background:var(--surface-3,#eef1f5);color:var(--text,#0f172a)}
.hfv-tb>i{font-size:36px;color:var(--muted-2,#94a3b8)}
.hfv-tb b{font-size:var(--fs-md,14px);font-weight:var(--fw-semibold,600)}
.hfv-tb p{margin:0 0 var(--sp-1,4px);max-width:36rem;font-size:var(--fs-sm,12px);line-height:1.5;color:var(--muted,#475569)}
/* Ngăn hướng dẫn bên phải (cùng mẫu HisPacs) */
.hfv-hd{position:absolute;top:0;right:0;bottom:0;z-index:40;width:min(380px,100%);overflow:auto;box-sizing:border-box;padding:var(--sp-3,12px) var(--sp-4,16px);background:var(--surface,#fff);color:var(--text,#0f172a);border-left:1px solid var(--line-2,#cbd5d0);box-shadow:var(--shadow-lg);font-size:var(--fs-base,13px);line-height:1.6}
.hfv-hd[hidden]{display:none}
.hfv-hd h3{margin:0 0 var(--sp-2,8px);font-size:var(--fs-md,14px);font-weight:var(--fw-semibold,600);color:var(--brand,#055952)}
.hfv-hd dl{margin:0}
.hfv-hd dt{font-weight:var(--fw-semibold,600);margin-top:var(--sp-2,8px)}
.hfv-hd dd{margin:0;color:var(--muted,#475569)}
.hfv-hd kbd{margin:0 1px}
/* Dải phim: ảnh nhỏ từng tệp; tệp đang xem nổi lên với vạch brand ở trên. */
.hfv-phim{flex:0 0 auto;display:flex;align-items:center;gap:var(--sp-2,8px);height:58px;box-sizing:border-box;padding:0 var(--sp-2,8px);background:var(--ft-bar-bg,#eef1f5);border-top:1px solid var(--ft-bar-line,#d8e3de)}
.hfv-phim[hidden]{display:none}
.hfv-phim-ds{flex:1 1 auto;min-width:0;display:flex;align-items:flex-end;gap:6px;height:100%;overflow-x:auto;overflow-y:hidden;padding:0 2px 7px;box-sizing:border-box;scrollbar-width:thin}
.hfv-thumb{position:relative;flex:0 0 auto;width:52px;height:38px;padding:0;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border:1px solid var(--line-2,#cbd5d0);border-radius:var(--radius-sm,2px);background:var(--surface,#fff);color:var(--muted,#475569);font:var(--fw-semibold,600) 9px/1 var(--font-ui);opacity:.78;transition:transform .12s,opacity .12s}
.hfv-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.hfv-thumb i{font-size:var(--fs-lg, 16px)}
.hfv-t-pdf i{color:var(--badge-danger-text,#b42318)}
.hfv-t-excel i{color:var(--chip-phone-text,#166534)}
.hfv-t-docx i{color:var(--badge-info-text,#1e40af)}
.hfv-thumb:hover{opacity:1}
.hfv-thumb[aria-current='true']{opacity:1;transform:translateY(-3px);border-color:var(--brand,#055952);box-shadow:inset 0 3px 0 var(--brand,#055952),var(--shadow-md)}
.hfv-thumb .hfv-dau{position:absolute;right:1px;bottom:1px;width:15px;height:15px;display:flex;align-items:center;justify-content:center;background:var(--brand,#055952);color:var(--btn-on, #fff);font-size:8px;border-radius:var(--radius-sm,2px)}
.hfv-thumb .hfv-dau i{font-size:8px;color:var(--btn-on, #fff)}
.hfv-cc button:focus-visible,.hfv-thumb:focus-visible,.hfv-nav:focus-visible{outline:2px solid var(--brand,#055952);outline-offset:1px}
@media (prefers-reduced-motion:reduce){.hfv-anh,.hfv-thumb,.hfv-nav{transition:none}
}
/* Điện thoại: tên tệp lên dòng riêng, nút ghi chú chỉ còn icon. */
@media (max-width:640px){.hfv-cc{flex-wrap:wrap;row-gap:4px}
.hfv-ten{order:-1;flex-basis:100%}
.hfv-nhan{display:none}
.hfv-phim{height:50px}
.hfv-thumb{width:44px;height:32px}
}

/* ==== his-pacs-viewer — CSS thành phần host (trước là <style> JS chèn lúc chạy; gộp vào đây để nạp tĩnh, hết nháy) ==== */
/* Trước 30/09/2026 CSS này do Work/viewer/his-pacs-viewer.js (chenStyle, <style id="his-pacs-style">; ID = hisPacsXem) chèn <style> lúc chạy;
   nay là tệp tĩnh (docs/design.md §2b) — JS chỉ gắn <link> một lần. Sửa CSS ở ĐÂY, không sửa chuỗi trong JS. */
#hisPacsXem_bs_modal .modal-body{padding:0!important;overflow:hidden!important}
.hpacs-goc{height:100%}
.hpacs{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--surface,#fff);color:var(--text,#0f172a);font-family:var(--font-ui)}
/* Nền ĐEN cho khung ảnh: trình xem PACS/DICOM đều nền đen — tránh chớp trắng lúc đang nạp. */
.hpacs-san{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:var(--pal-black, #000)}
.hpacs-fr{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;background:var(--pal-black, #000)}
.hpacs-chan{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-3,12px);padding:var(--sp-5,24px);background:var(--surface-3,#eef1f5);color:var(--text,#0f172a);font-size:var(--fs-md,14px);line-height:1.5;text-align:center}
.hpacs-chan[hidden],.hpacs-hd[hidden]{display:none}
.hpacs-chan p{max-width:36rem;margin:0}
.hpacs-chan .fa-solid{font-size:var(--fs-2xl,24px);color:var(--btn-warn,#d97706)}
/* HDSD: ngăn kéo BÊN PHẢI khung ảnh, không che toàn bộ ảnh. */
.hpacs-hd{position:absolute;top:0;right:0;bottom:0;width:min(360px,100%);overflow:auto;box-sizing:border-box;padding:var(--sp-3,12px) var(--sp-4,16px);background:var(--surface,#fff);color:var(--text,#0f172a);border-left:1px solid var(--line-2,#cbd5d0);box-shadow:var(--shadow-lg);font-size:var(--fs-base,13px);line-height:1.6}
.hpacs-hd h3{margin:0 0 var(--sp-2,8px);font-size:var(--fs-md,14px);font-weight:var(--fw-semibold,600);color:var(--brand,#055952)}
.hpacs-hd ol{margin:0;padding-left:18px}
.hpacs-hd li{margin-bottom:var(--sp-1,4px)}
/* Dải nút đáy theo chuẩn footer (--ft-bar-*): trái = nguồn + gợi ý, phải = nút. */
.hpacs-ft{flex:0 0 auto;display:flex;align-items:center;gap:var(--sp-2,8px);min-height:var(--ft-bar-h,34px);box-sizing:border-box;padding:0 var(--sp-1,4px) 0 var(--sp-2,8px);background:var(--ft-bar-bg,#eef1f5);border-top:1px solid var(--ft-bar-line,#d8e3de);font-size:var(--fs-sm,12px);color:var(--muted,#475569)}
.hpacs-nguon{flex:0 1 auto;min-width:0;max-width:40%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--text,#0f172a);font-weight:var(--fw-semibold,600)}
.hpacs-nguon .fa-solid{margin-right:6px;color:var(--muted-2,#94a3b8)}
.hpacs-goiy{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hpacs-nut{flex:0 0 auto;display:flex;align-items:center;gap:var(--sp-1,4px);margin-left:auto}
.hpacs-nut button[aria-pressed='true']{background:var(--sel-nav-bg,#ecfdf3);border-color:var(--brand,#055952);color:var(--brand,#055952)}
@media (max-width:640px){.hpacs-goiy{display:none}
.hpacs-nguon{max-width:none;flex:1 1 auto}
.hpacs-nhan{display:none}
}

/* ==== his-viewer-xls — CSS thành phần host (trước là <style> JS chèn lúc chạy; gộp vào đây để nạp tĩnh, hết nháy) ==== */
/* Trước 30/09/2026 CSS này do Work/viewer/his-viewer-xls.js (injectStyles, <style id="hv-xls-style">) chèn <style> lúc chạy;
   nay là tệp tĩnh (docs/design.md §2b) — JS chỉ gắn <link> một lần. Sửa CSS ở ĐÂY, không sửa chuỗi trong JS. */
/* ── Thanh trang tính ở ĐÁY (giống Excel) ───────────────────────── */
.hv-xls-tabs{flex:0 0 auto;order:2;display:flex;align-items:center;gap:4px;padding:4px 8px;box-sizing:border-box;max-width:100%;z-index:3;background:var(--ft-bar-bg,#eef1f5);border-top:1px solid var(--ft-bar-line,#d8e3de);font-family:var(--font-ui)}
.hv-xls-arrow,.hv-xls-tool,.hv-xls-more{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:5px;height:28px;box-sizing:border-box;border:1px solid var(--btn-close-border,#cbd5e1);background:var(--surface,#fff);color:var(--btn-close-text,#334155);cursor:pointer;border-radius:var(--radius-sm,2px);font-size:var(--fs-sm,12px);white-space:nowrap}
.hv-xls-arrow{width:26px;font-size:11px}
.hv-xls-tool{padding:0 10px}
.hv-xls-more{position:relative;padding:0 9px}
.hv-xls-arrow:hover,.hv-xls-tool:hover,.hv-xls-more:hover{background:var(--surface-hover,#f1f5f9);color:var(--text,#0f172a)}
.hv-xls-arrow.off,.hv-xls-tool.off{opacity:.35;cursor:default;pointer-events:none}
.hv-xls-tool.on{background:var(--sel-nav-bg,#ecfdf3);border-color:var(--brand,#055952);color:var(--brand,#055952)}
.hv-xls-tablist{display:flex;gap:2px;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;cursor:grab}
.hv-xls-tablist::-webkit-scrollbar{height:0}
.hv-xls-tablist.hv-drag{cursor:grabbing}
.hv-xls-tab{position:relative;flex:0 0 auto;white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis;padding:6px 14px;font-size:var(--fs-sm,12px);line-height:1.2;cursor:pointer;border:1px solid var(--line,#e5e7eb);border-top:0;background:var(--surface-3,#eef1f5);color:var(--muted,#475569);user-select:none;font-weight:var(--fw-medium,500)}
.hv-xls-tab:hover{background:var(--surface,#fff);color:var(--text,#0f172a)}
.hv-xls-tab.on{background:var(--surface,#fff);color:var(--sel-nav-text,#13503f);font-weight:var(--fw-semibold,600);box-shadow:inset 0 -2px 0 var(--brand,#055952);z-index:2}
.hv-xls-menu{position:absolute;bottom:100%;right:0;z-index:20;margin-bottom:4px;display:none;min-width:200px;max-height:340px;overflow-y:auto;background:var(--surface,#fff);border:1px solid var(--line-2,#cbd5d0);box-shadow:var(--shadow-lg)}
.hv-xls-menu.open{display:block}
.hv-xls-mi{padding:6px 14px;font-size:var(--fs-sm,12px);cursor:pointer;color:var(--text,#0f172a);white-space:nowrap}
.hv-xls-mi:hover{background:var(--row-hover,#e1f4e8)}
.hv-xls-mi.on{background:var(--sel-nav-bg,#ecfdf3);color:var(--sel-nav-text,#13503f);box-shadow:inset 3px 0 0 var(--brand,#055952)}
/* ── Vùng lưới (cuộn) + lớp loading ─────────────────────────────── */
.hv-xls-body{flex:1 1 auto;min-height:0;position:relative;background:var(--surface,#fff)}
.hv-xls-scroll{position:absolute;inset:0;overflow:auto;outline:none}
.hv-xls-scroll:focus-visible{box-shadow:inset 0 0 0 2px var(--brand,#055952)}
.hv-xls-loading{position:absolute;inset:0;display:none;align-items:center;justify-content:center;gap:12px;background:rgba(255,255,255,.75);z-index:9;font-size:var(--fs-base,13px);color:var(--muted,#475569)}
.hv-xls-loading.on{display:flex}
.hv-xls-spin{width:24px;height:24px;border:3px solid rgba(37,99,235,.18);border-top-color:var(--brand,#055952);border-radius:50%;animation:hvxls-spin .8s linear infinite}
@keyframes hvxls-spin{to{transform:rotate(360deg)}
}
@media (prefers-reduced-motion:reduce){.hv-xls-spin{animation-duration:2.4s}
}
/* ── Lưới ô + tiêu đề hàng/cột cố định ──────────────────────────── */
.hv-tbl{border-collapse:separate;border-spacing:0;font-size:var(--fs-sm,12px);font-family:var(--font-ui);background:var(--surface,#fff);color:var(--grid-neutral-text,#1f2937)}
.hv-tbl td,.hv-tbl th{border-right:1px solid var(--grid-neutral-line,#dce3ea);border-bottom:1px solid var(--grid-neutral-line,#dce3ea);padding:3px 8px;white-space:nowrap;background:var(--surface,#fff)}
.hv-tbl td{max-width:460px;overflow:hidden;text-overflow:ellipsis;cursor:cell}
.hv-tbl th.hv-colh,.hv-tbl th.hv-rowh,.hv-tbl th.hv-corner{background:var(--grid-neutral-header,#f6f8fb);color:var(--muted,#475569);font-weight:var(--fw-semibold,600);text-align:center;cursor:pointer;user-select:none}
.hv-tbl thead th{position:sticky;top:0;z-index:5}
.hv-tbl th.hv-rowh{position:sticky;left:0;z-index:4;min-width:46px}
.hv-tbl th.hv-corner{position:sticky;left:0;top:0;z-index:6}
.hv-tbl th.hv-colh:hover,.hv-tbl th.hv-rowh:hover{background:var(--row-hover,#e1f4e8);color:var(--brand,#055952)}
/* đóng băng theo Ô ĐANG CHỌN — JS gán position/top/left sticky, class chỉ tô nền vùng đóng băng */
.hv-tbl td.hv-fz-r,.hv-tbl td.hv-fz-c{background:var(--surface-2,#f6fefa)}
.hv-tbl td.hv-fz-r.hv-fz-c{background:var(--brand-soft,#ecfdf3)}
/* tô chọn hàng / cột / ô — cùng nguồn màu chọn của mọi lưới (--row-sel*) */
.hv-tbl td.hv-selc,.hv-tbl th.hv-selc{background:var(--row-hover,#e1f4e8) !important}
.hv-tbl th.hv-selhdr{background:var(--brand,#055952) !important;color:var(--btn-on, #fff) !important}
.hv-tbl td.hv-selcell{background:var(--row-sel,#8fdcb8) !important;color:var(--row-sel-text,#102a20);box-shadow:inset 0 0 0 1px var(--brand,#055952)}
.hv-tbl td.hv-selanchor{background:var(--row-sel,#8fdcb8) !important;color:var(--row-sel-text,#102a20);box-shadow:inset 0 0 0 2px var(--brand,#055952)}
.hv-xls-empty{padding:26px;text-align:center;color:var(--muted,#475569);font-size:var(--fs-base,13px)}