/* CLINIC-SCOPE: shared */
/* =============================================================================
   HỆ NÚT DÙNG CHUNG — "Semantic Tinted Accents" (8 nhóm màu nhận diện)
   Nguồn thiết kế: /mock-buttons.html (bản mock đã chốt).
   Quy ước: Thêm cùng màu · Sửa cùng màu · Lưu cùng màu · Xóa cùng màu · In cùng màu.
   Tên class nghiệp vụ giữ nguyên để module tiếp tục bật/tắt quyền và trạng thái.

   LỆCH DUY NHẤT so với mock: chiều cao mặc định giữ --ft-btn-h (30px) thay vì 34px,
   vì .ft-bar của lamviec.css cao đúng 34px (nút 34px sẽ khít sát, không còn lề).
   Cần đúng cỡ mock thì thêm .btn-standard (34px) hoặc .btn-lg (40px).
   ============================================================================= */

/* Token màu 8 nhóm (--btn-add-* … --btn-close-*) đã chuyển về partCss/design-tokens.css
   (TẦNG THÀNH PHẦN) — 30/09/2026. Sửa màu nút ở đó, không khai lại ở đây. */

/* =============================================================================
   BASE — dùng chung cho mọi nút hành động
   ============================================================================= */
.btn-base,
.btn-add, .btn-create, .btn-new,
.btn-edit, .btn-modify, .btn-update,
.btn-save, .btn-pri, .btn-confirm, .btn-primary, .btn-ok,
.btn-delete, .btn-del, .btn-cancel, .btn-danger,
.btn-print, .btn-export, .btn-preview,
.btn-refresh, .btn-reload, .btn-default, .btn-search, .btn-call,
.btn-purple, .btn-process, .btn-transfer,
.btn-close, .btn-back,
.ft-btn, .ws-btn,
.nk-btn, .xk-btn, .kk-btn, .dc-btn, .dt-btn, .bl-btn, .tl-btn, .th-btn, .nv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: var(--btn-h, 30px);
  padding: 0 var(--btn-px, 14px);
  border: 1px solid var(--btn-close-border);
  border-radius: var(--radius-btn, 4px);
  font-size: var(--fs-sm, 12px);
  font-weight: var(--fw-semibold, 600);
  font-family: var(--font-ui);
  background: var(--btn-close-bg);
  color: var(--btn-close-text);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
  transition: background-color .15s ease-in-out, border-color .15s ease-in-out,
              color .15s ease-in-out, box-shadow .15s ease-in-out, transform .15s ease-in-out;
}

/* =============================================================================
   KÍCH THƯỚC — THANG 3 CỠ (duyệt 29/09/2026): Nhỏ 24 · Mặc định 30 · Lớn 40
   Mỗi cỡ chỉ ĐẶT BIẾN --b-*; giá trị thật do khối "BO GÓC + KÍCH THƯỚC" trong
   @layer clinic-buttons ép (thắng rule cỡ riêng của module). Khai thêm thuộc tính
   thường để nút ngoài bộ nhận diện vẫn đúng cỡ.
   .btn-sm/.btn-compact = Mặc định (trước 29px — lệch 1px vô nghĩa, 62 chỗ đang dùng).
   Nút chỉ có icon: .btn-icon hoặc [data-chi-icon] (footer-layout.js tự gắn) — vuông theo cỡ.
   ============================================================================= */
.btn-mini {
  --b-h: var(--btn-h-sm, 24px); --b-px: var(--btn-px-sm, 8px); --b-fs: 11px; --b-icfs: 11px; --b-gap: 4px;
  height: 24px; padding: 0 8px; font-size: 11px; gap: 4px;
}
.btn-lg {
  --b-h: var(--btn-h-lg, 40px); --b-px: var(--btn-px-lg, 18px); --b-fs: 14px; --b-icfs: 15px; --b-gap: 8px; --b-fw: 700;
  height: 40px; padding: 0 18px; font-size: 14px; gap: 8px; font-weight: 700;
}
.btn-lg i { font-size: 15px; }
.btn-icon { width: var(--b-h, var(--btn-h, 30px)); padding: 0; }

/* Nhóm nút dính liền */
.btn-group { display: inline-flex; border-radius: var(--radius-btn, 4px); overflow: hidden; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
.btn-group > * { border-radius: 0 !important; border-right-width: 0 !important; box-shadow: none !important; }
.btn-group > *:last-child { border-right-width: 1px !important; }

/* Phím tắt in trên nút */
kbd {
  display: inline-block;
  padding: 1.5px 5px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: var(--muted);
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 3px;
  margin-left: 3px;
}
.btn-save kbd, .btn-pri kbd, .btn-confirm kbd, .btn-primary kbd, .btn-ok kbd {
  background: rgba(0, 0, 0, .25);
  color: var(--surface);
  border-color: rgba(255, 255, 255, .3);
}

/* Nút đang chạy (spinner) */
.btn-loading i.fa-spinner { animation: btnSpin 1s linear infinite; }
@keyframes btnSpin { 100% { transform: rotate(360deg); } }

/* =============================================================================
   NÚT IN SPLIT (thân + mũi tên xổ mẫu in)
   .btn-split-group = markup mới của mock · .rp-wrap = partial _ReportPrintButton sẵn có
   ============================================================================= */
.btn-split-group, .rp-wrap {
  display: inline-flex;
  position: relative;
  border-radius: var(--radius-btn, 4px);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
  vertical-align: middle;
}

/* Dropdown chọn mẫu in (markup mock) */
.dropdown-menu-print {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: var(--surface);
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  box-shadow: 0 10px 25px rgba(15, 23, 42, .16);
  min-width: 240px;
  z-index: 9999;
  display: none;
  overflow: hidden;
  animation: dropMenuAnim .15s ease-out;
}
.dropdown-menu-print.show { display: block; }
@keyframes dropMenuAnim { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.dropdown-header-custom {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: #64748b;
  padding: 6px 12px 3px; background: #f8fafc; letter-spacing: .5px; border-bottom: 1px solid var(--surface-hover);
}
.dropdown-item-print {
  display: flex; align-items: center; gap: 9px; padding: 8px 14px;
  font-size: 12.5px; font-weight: 500; color: #334155; cursor: pointer;
  transition: background-color .1s ease, color .1s ease;
  border-bottom: 1px solid #f8fafc; text-decoration: none;
}
.dropdown-item-print:last-child { border-bottom: none; }
.dropdown-item-print:hover { background: var(--btn-print-bg); color: var(--lo); }
.dropdown-item-print i { width: 14px; font-size: 12px; color: var(--btn-print-icon); text-align: center; }
.dropdown-item-print .item-hotkey { margin-left: auto; font-size: 10px; color: var(--muted-2); font-weight: 600; }

/* =============================================================================
   GÁN 8 NHÓM MÀU
   !important trong layer thắng !important KHÔNG có layer ở CSS module, kể cả module
   nạp sau / dùng selector ID. Không ép display, size hay quyền.
   Chỉ nhận diện nút hành động, không phủ lên tab, chọn trạng thái, điều hướng,
   nút đóng/phóng to cửa sổ, switch hay toolbar của thư viện soạn thảo.
   ============================================================================= */
@layer clinic-buttons {
  :is(
    .btn, .button, .btn-base, .btn-add, .btn-edit, .btn-delete, .btn-save,
    .btn-print, .btn-cancel, .btn-default, .btn-search, .btn-call, .btn-ok,
    .btn-del, .btn-create, .btn-new, .btn-modify, .btn-update, .btn-pri,
    .btn-confirm, .btn-danger, .btn-export, .btn-preview, .btn-refresh,
    .btn-reload, .btn-purple, .btn-process, .btn-transfer, .btn-close, .btn-back,
    .ft-btn, .ws-btn, .nk-btn, .xk-btn, .kk-btn, .dc-btn, .dt-btn,
    .bl-btn, .tl-btn, .th-btn, .nv-btn, .pqx-btn, .report-btn, .mat-btn,
    .kb-search-btn, .tbtn, .qbtn, .iconbtn, .dmh-primary, .dmh-ghost,
    button.save, button.primary,
    .rp-main-btn, .rp-arrow-btn,
    /* .his-toast-b-* (nút trên toast) KHÔNG còn trong hệ màu nút: từ 29/09 là LIÊN KẾT, engine HisToast tự vẽ. */
    /* Nút nhận theo ĐUÔI tên class (-btn, btn-, -save, -primary, -search, -reload, -icon-action):
       DANH SÁCH TƯỜNG MINH, không còn [class$="-btn"]… (2026-09-28). Khớp theo attribute `class` ở
       đây + ở :not() dưới làm MỌI lần thêm/bỏ class tính lại style cả cây con (~46ms, kéo cột / chọn
       dòng khựng). Sinh bằng `node _tools/css-scope/sinh-danh-sach-class.js` — thêm nút có tên class
       theo các đuôi trên thì chạy lại, không thì nút đó rơi khỏi hệ màu. */
    :is(button, a, input):is(/*<sinh-class nut-theo-duoi>*/
      .bk-btn, .bl-btn, .bl-btn-add, .bl-btn-danger, .bl-btn-primary, .bl-ic-btn, .blv-act-btn, .blv-act-btn-phu,
      .blv-act-primary, .blv-cost-search, .blv-db-btn, .blv-dlg-btn, .blv-flt-search, .blv-gmr-btn, .blv-help-btn, .blv-icon-btn,
      .blv-khoi-save, .blv-panc-btn, .blv-td-btn, .bqc-btn-nho, .bqc-btn-top, .bqc-media-btn, .btn-act, .btn-add,
      .btn-apply-filter, .btn-back, .btn-base, .btn-bo-mau, .btn-call, .btn-cancel, .btn-clear-filter, .btn-close,
      .btn-close-filter, .btn-compact, .btn-danger, .btn-default, .btn-del, .btn-delete, .btn-dock, .btn-dungfinal,
      .btn-edit, .btn-export, .btn-fold, .btn-group, .btn-h, .btn-huy-sua, .btn-icon, .btn-l,
      .btn-lg, .btn-loading, .btn-login, .btn-ls, .btn-mini, .btn-ok, .btn-outline, .btn-outline-secondary,
      .btn-preview, .btn-primary, .btn-print, .btn-purple, .btn-refresh, .btn-s, .btn-save, .btn-search,
      .btn-sm, .btn-split-group, .btn-split-main, .btn-split-toggle, .btn-standard, .btn-wd, .cai-btn, .card-toggle-btn,
      .cat-btn, .cbt-search, .cd-btn-ghost, .cgd-btn, .cgd-btn-danger, .cgd-btn-primary, .cgd-search, .chh-empty-search,
      .chh-search, .chk-act-btn, .chk-icon-btn, .ckh-act-btn, .ckh-btn-disabled, .ckh-collapse-btn, .ckh-icon-btn, .ckh-khoi-btn,
      .ckh-nvp-search, .ckh-subtab-btn, .clsv2-filter-btn, .clsv2-search, .dash-btn-load, .dash-primary, .dc-btn, .dc-btn-duyet,
      .dc-btn-phat, .dc-btn-primary, .dc-ic-btn, .dhd-act-btn, .dhd-act-primary, .dhd-bell-btn, .dhd-btn-huy-luot, .dhd-btn-luu-luot,
      .dhd-btn-sua-luot, .dhd-btn-sua-ns, .dhd-btn-xoa-ns, .dhd-headtool-btn, .dhd-help-btn, .dhd-icon-btn, .dhd-tool-btn, .dk-patient-primary,
      .dkk-btn, .dmg-btn, .dmh-primary, .dmh-search, .dmk-save, .dnk-btn, .dt-btn, .dt-lo-btn,
      .exgrid-cellpop-btn, .exgrid-colchooser-btn, .fa-save, .filter-btn, .filter-search, .ft-btn, .goi-btn-ok, .goi-search,
      .grid-group-act-btn, .gt-btn-ok, .gt-search, .hddt-popup-actions-primary, .htc-btn, .icon-btn, .kb-cp-save, .kb-expand-btn,
      .kb-queue-search, .kb-search-btn, .kcn-btn, .kdk-ov-btn, .kdv-btn, .kk-btn, .kk-btn-add, .kk-btn-cam,
      .kk-btn-danger, .kk-btn-ghost, .kk-btn-go, .kk-btn-next, .kk-btn-primary, .kk-ic-btn, .kp-btn, .kp-primary,
      .kp-search, .ksk-act-btn, .ksk-gt-btn, .ksk-icon-btn, .ksv-act-btn, .ksv-icon-btn, .ksv-search, .kx-ou-btn,
      .kx-sec-btn, .lh-dvhen-btn, .lh-mini-btn, .lh-tab-search, .loc-search, .ltt-btn, .ltt-btn-danger-ghost, .ltt-btn-secondary,
      .mat-collapse-aside-btn, .mat-collapse-btn, .mau-config-btn, .mk-pick-btn, .nav-btn-ds, .nav-tab-btn, .nh-add-btn, .nh-check-btn,
      .nh-metric-btn, .nk-btn, .nk-btn-add, .nk-btn-danger, .nk-btn-primary, .nk-icon-action, .ns-hs-search, .nv-btn,
      .nv-btn-danger, .nv-btn-primary, .opt-tab-btn, .pqm-link-btn, .pqm-user-search, .qr-hdr-btn, .qr-icon-btn, .report-btn,
      .rgc-btn, .rgc-search, .ri-btn, .ric-save, .rp-arrow-btn, .rp-field-search, .rp-load-btn, .rp-main-btn,
      .rp-runtime-search, .rp-undo-btn, .rpmi-btn, .rpmi-btn-luu, .rpmi-btn-phu, .rpt-page-add-btn, .rpt-page-btn, .rs-save,
      .rxk-add-btn, .rxk-cancel-btn, .search-btn, .ss-btn, .ss-btn-lg, .switch-btn, .sys-dm-search, .tab-sub-btn,
      .tb-help-btn, .tb-ib-search, .tc-btn-dc, .tc-seg-btn, .th-btn, .th-btn-danger, .th-btn-primary, .th-search,
      .tl-btn, .tl-btn-add, .tl-btn-danger, .tl-btn-primary, .tld-btn, .tlh-btn, .tlht-save, .tlp-btn,
      .tq-btn, .tvt-bulk-search, .up-search, .variant-btn, .vd-search, .wd-aidock-btn, .wd-bell-btn, .wd-btn-tip,
      .wd-call-btn, .wd-chat-search, .wd-footer-icon-action, .wd-footer-primary, .wd-gcc-btn, .wd-gcp-search, .wd-help-title-btn, .wd-launcher-search,
      .wd-lenh-search, .wd-pick-search, .wd-tray-btn, .wd-winlist-btn, .wd-wp-btn, .wd-wsfld-btn, .ws-btn, .ws-lf-add-btn,
      .xk-btn, .xk-btn-add, .xk-btn-danger, .xk-btn-primary, .xk-detail-search, .xk-ic-btn, .xk-icon-action
    /*</sinh-class>*/)
  ):not(
    .btn-link, .close, [role="tab"], [aria-pressed], [aria-selected],
    /* tab / công tắc / thu gọn / nút cửa sổ: class chứa toggle|switch|collapse|tab-btn|nav-btn|win-btn */
    :is(/*<sinh-class nut-loai-tru>*/
      .blv-ann-toggle, .blv-fq-toggle, .blv-khoi-collapsed, .blv-ncblk-collapsed, .blv-qcollapse, .blv-ql-collapsed, .blv-qt-toggle, .blv-sec-collapsed,
      .btn-split-toggle, .card-toggle-btn, .chh-nav-toggle, .ckh-collapse-btn, .ckh-subtab-btn, .clsv2-group-toggle, .collapsed, .dk-layout-toggle,
      .dk-subswitch, .dk-switch, .dkk-lo-switch, .dmc-lo-switch, .dmg-modeswitch, .dt-grp-toggle, .fa-toggle-on, .hisw-menu-collapsed,
      .is-collapsed, .js-cnct-toggle, .kb-gp-toggle, .kdv-collapse, .lfilt-collapsed, .lh-day-toggle, .mat-aside-collapsed, .mat-collapse-aside-btn,
      .mat-collapse-body, .mat-collapse-btn, .mcrm-switch, .nav-btn-ds, .nav-tab-btn, .nk-note-toggle, .nth-dv-collapse, .nv-queue-toggle,
      .opt-switcher, .opt-tab-btn, .prototype-switcher, .room-toggle, .rp-left-collapsed, .rp-panel-toggle, .rp-right-collapsed, .rp-template-switch,
      .rs-toggle, .sinh-ton-collapse, .sinh-ton-toggle, .switch-btn, .switch-label, .tlp-sec-htoggle, .wd-dashboard-toggle, .wd-fcollapse,
      .wd-noti-toggle, .wd-winswitch-box, .wd-winswitch-dots, .wd-winswitch-grid, .wd-winswitch-hint, .wd-winswitch-name, .wd-winswitch-preview, .wdn-switch,
      .xk-note-toggle
    /*</sinh-class>*/),
    /* class chứa "close" (trừ nút hành động .btn-close / .btn-back) */
    :is(/*<sinh-class nut-loai-tru-dong>*/
      .blv-panc-close, .btn-close, .btn-close-filter, .close, .closed, .dk-context-close, .dmh-fpclose, .dmh-mini-close,
      .dmh-ovl-close, .drawer-close, .fa-close, .hist-closed, .kb-details-close, .kdv-close, .nv-queue-closed, .rp-dp-close,
      .rp-help-close, .rp-preview-close, .wd-dashboard-close, .wl-close
    /*</sinh-class>*/):not(.btn-close, .btn-back),
    /* Tab/chip CHỌN TRẠNG THÁI có đuôi "-btn" -> vô tình khớp [class$="-btn"] và bị nhuộm
       nhóm 8 (Slate, nền trắng). Vì !important trong @layer THẮNG !important không layer,
       state kiểu S/T của partCss/selection.css (nền brand + chữ trắng) bị nuốt -> nhìn như
       "thiếu hiệu ứng active" (fb: Lập/Xem phiếu màn Thu tiền). Cả 8 nút đều có base màu
       riêng ở CSS màn nên trả về cho màn + selection.css lo, đúng chú thích đầu khối này. */
    .filter-btn,          /* Phễu của lưới — nhóm 8 biến thành ô trắng 30px, biểu tượng lệch góc; cỡ/màu do ex-component.css */
    .tc-seg-btn,          /* Thu/Chi tiền — Lập phiếu / Xem phiếu */
    .nh-metric-btn,       /* Khám Nhi — chip chỉ số */
    .nh-check-btn,        /* Khám Nhi — chip khám thường/bất thường (state .selected đỏ) */
    .nk-condition-btn,    /* Nha khoa — tình trạng răng */
    .nk-surface-btn,      /* Nha khoa — mặt răng */
    .blv-gmr-btn,         /* KSK Bàn làm việc — nút lọc mở rộng (state .on) */
    .ckh-icon-btn,        /* KSK Cổng khách hàng — nút icon (state .active) */
    .wd-winlist-btn       /* Shell — nút danh sách cửa sổ trên taskbar */
  ) {
    /* Mặc định = nhóm 8 (Slate trung tính) */
    --b-bg:   var(--btn-close-bg);
    --b-bd:   var(--btn-close-border);
    --b-fg:   var(--btn-close-text);
    --b-ic:   var(--btn-close-icon);
    --b-hbg:  var(--btn-close-hover-bg);
    --b-hbd:  var(--btn-close-hover-border);
    --b-hfg:  var(--btn-close-hover-text);
    --b-sh:   0 1px 2px rgba(15, 23, 42, .06);
    --b-hsh:  0 2px 5px rgba(15, 23, 42, .1);

    /* 3b. SUY VAI TRÒ THEO ĐUÔI TÊN CLASS — ưu tiên THẤP NHẤT, đặt trước mọi nhóm khác.
       Lý do: shell desktop tự gắn .wd-footer-primary lên nút chính của footer, nút In
       (.rp-main-btn.print) cũng dính đuôi "-primary" nên sẽ bị nhuộm màu Lưu.
       Đặt ở đây để class vai trò tường minh (.print/.edit/.add/.delete...) luôn thắng. */
    &:is(
      [class$="-save"], [class*="-save "], [class$="-primary"], [class*="-primary "],
      [class$="-ok"], [class$="-confirm"]
    ) {
      --b-bg: var(--btn-save-bg);   --b-bd: var(--btn-save-border);
      --b-fg: var(--btn-save-text); --b-ic: var(--btn-save-icon);
      --b-hbg: var(--btn-save-hover-bg); --b-hbd: var(--btn-save-hover-border);
      --b-hfg: var(--btn-save-hover-text);
      --b-sh:  0 2px 6px rgba(37,99,235, .35);
      --b-hsh: 0 3px 8px rgba(37,99,235, .45);
    }

    /* 6. NẠP / LÀM MỚI / TIỆN ÍCH / TRA CỨU / ĐIỀU HƯỚNG (Cyan) */
    &:is(
      .btn-refresh, .btn-reload, .btn-default, .btn-search, .btn-call,
      .refresh, .reload, .search, .default, .kb-search-btn,
      [class$="-search"], [class*="-search "], [class$="-reload"], [class$="-refresh"]
    ) {
      --b-bg: var(--btn-refresh-bg);   --b-bd: var(--btn-refresh-border);
      --b-fg: var(--btn-refresh-text); --b-ic: var(--btn-refresh-icon);
      --b-hbg: var(--btn-refresh-hover-bg); --b-hbd: var(--btn-refresh-hover-border);
      --b-hfg: var(--btn-refresh-hover-text);
    }

    /* 7. XỬ TRÍ / CHUYÊN KHOA / CHUYỂN VIỆN (Purple) */
    &:is(.btn-purple, .btn-process, .btn-transfer, .process, .transfer) {
      --b-bg: var(--btn-purple-bg);   --b-bd: var(--btn-purple-border);
      --b-fg: var(--btn-purple-text); --b-ic: var(--btn-purple-icon);
      --b-hbg: var(--btn-purple-hover-bg); --b-hbd: var(--btn-purple-hover-border);
      --b-hfg: var(--btn-purple-hover-text);
    }

    /* 5. IN ẤN / XUẤT FILE / XEM TRƯỚC (Blue) */
    &:is(
      .btn-print, .btn-export, .btn-preview, .print, .export, .preview,
      .rp-main-btn, .rp-arrow-btn, [class$="-print"], [class*="-print "]
    ) {
      --b-bg: var(--btn-print-bg);   --b-bd: var(--btn-print-border);
      --b-fg: var(--btn-print-text); --b-ic: var(--btn-print-icon);
      --b-hbg: var(--btn-print-hover-bg); --b-hbd: var(--btn-print-hover-border);
      --b-hfg: var(--btn-print-hover-text);
    }

    /* 2. SỬA ĐỔI / CẬP NHẬT / HIỆU CHỈNH (Amber) */
    &:is(
      .btn-edit, .btn-modify, .btn-update, .edit, .modify, .update,
      [class$="-edit"], [class*="-edit "], [class$="-modify"], [class$="-update"]
    ) {
      --b-bg: var(--btn-edit-bg);   --b-bd: var(--btn-edit-border);
      --b-fg: var(--btn-edit-text); --b-ic: var(--btn-edit-icon);
      --b-hbg: var(--btn-edit-hover-bg); --b-hbd: var(--btn-edit-hover-border);
      --b-hfg: var(--btn-edit-hover-text);
    }

    /* 1. THÊM MỚI / TẠO MỚI / KÊ ĐƠN (teal brand đặc, cùng nhóm 3) */
    &:is(
      .btn-add, .btn-create, .btn-new, .add, .create, .new, .success,
      [class$="-add"], [class*="-add "], [class$="-create"], [class$="-new"]
    ) {
      --b-bg: var(--btn-add-bg);   --b-bd: var(--btn-add-border);
      --b-fg: var(--btn-add-text); --b-ic: var(--btn-add-icon);
      --b-hbg: var(--btn-add-hover-bg); --b-hbd: var(--btn-add-hover-border);
      --b-hfg: var(--btn-add-hover-text);
    }

    /* 4. XÓA / HỦY / TỪ CHỐI (Red) */
    &:is(
      .btn-del, .btn-delete, .btn-cancel, .btn-danger, .delete, .danger, .cancel,
      [class$="-delete"], [class*="-delete "], [class$="-del"], [class$="-cancel"],
      [class$="-danger"]
    ),
    &#globalConfirmCancel {
      --b-bg: var(--btn-del-bg);   --b-bd: var(--btn-del-border);
      --b-fg: var(--btn-del-text); --b-ic: var(--btn-del-icon);
      --b-hbg: var(--btn-del-hover-bg); --b-hbd: var(--btn-del-hover-border);
      --b-hfg: var(--btn-del-hover-text);
    }

    /* 3. LƯU / DUYỆT / XÁC NHẬN / KÝ SỐ (Solid Brand Teal — nút chủ đạo) */
    &:is(
      .btn-save, .btn-pri, .btn-confirm, .btn-primary, .btn-ok,
      .save, .primary, .ok, .confirm, .approve
    ):not(.danger, .delete, .cancel, .btn-delete, .btn-cancel, .btn-danger, .btn-del),
    &#globalConfirmOk:not(.btn-danger) {
      --b-bg: var(--btn-save-bg);   --b-bd: var(--btn-save-border);
      --b-fg: var(--btn-save-text); --b-ic: var(--btn-save-icon);
      --b-hbg: var(--btn-save-hover-bg); --b-hbd: var(--btn-save-hover-border);
      --b-hfg: var(--btn-save-hover-text);
      --b-sh:  0 2px 6px rgba(37,99,235, .35);
      --b-hsh: 0 3px 8px rgba(37,99,235, .45);
    }

    /* 3d. NÚT CHÍNH NGUY HIỂM của hộp xác nhận (questionToas tuỳ chọn danger: Xóa, Thoát bỏ thay đổi…): đỏ ĐẶC.
       Nhóm đỏ (4) là kiểu viền nhạt — y hệt nút Hủy đứng cạnh, người dùng không phân biệt được nút nào phá huỷ. */
    &#globalConfirmOk.btn-danger {
      --b-bg: var(--btn-danger, #dc2626);  --b-bd: var(--btn-danger, #dc2626);
      --b-fg: #fff; --b-ic: #fff;
      --b-hbg: var(--btn-danger-hover, #b91c1c); --b-hbd: var(--btn-danger-hover, #b91c1c);
      --b-hfg: #fff;
      --b-sh:  0 2px 6px rgba(220, 38, 38, .35);
      --b-hsh: 0 3px 8px rgba(220, 38, 38, .45);
    }

    /* 3c. CÔNG CỤ mượn màu hệ nút nhưng CÓ trạng thái chọn (công cụ ảnh CĐHA dùng class
       trần .btn nên không tách ra được như 5 nút ở :not() trên): trỏ thẳng token --sel-*
       của selection.css để state vẫn là nền brand đặc + chữ trắng. */
    .cd-media-editor-tools &:is(.active, .on, .sel, .selected, .is-active, .is-selected) {
      --b-bg: var(--sel-solid-bg);  --b-bd: var(--sel-solid-bg);
      --b-fg: var(--sel-solid-text); --b-ic: var(--sel-solid-text);
      --b-hbg: var(--sel-solid-bg); --b-hbd: var(--sel-solid-bg);
      --b-hfg: var(--sel-solid-text);
    }

    background: var(--b-bg) !important;
    color: var(--b-fg) !important;
    border: 1px solid var(--b-bd) !important;
    box-shadow: var(--b-sh) !important;
    text-shadow: none !important;
    filter: none !important;

    /* BO GÓC + KÍCH THƯỚC (duyệt 29/09/2026) — ép trong layer như màu, thắng rule cỡ riêng của
       module và lớp 2px của giao-dien-phang.css. Cỡ đọc từ biến --b-* (thang cỡ + ngữ cảnh ở cuối
       file); ngoại lệ chỉ đặt biến (--b-r cho nút tách/nhóm dính), không viết rule ghi đè.
       GIỮ NGUYÊN: shell desktop, Chat, trợ lý AI, nút tròn cố ý, nút thu/mở (khối .btn-fold). */
    &:not(:where(
      .wd-tray-btn, .wd-bell-btn, .wd-call-btn, .wd-wp-btn, .wd-launcher-search, .wd-lenh-search,
      .wd-help-title-btn, .wd-wsfld-btn, .wd-gcc-btn, .wd-gcp-search, .wd-pick-search, .wd-chat-search, .wd-aidock-btn,
      #wdChat *, .wd-aidock *, #tlpRoot *, #caiRoot *,
      .rounded-circle, [style*="border-radius:50%"], [style*="border-radius: 50%"],
      .btn-fold, [data-group-expand-all], [data-group-collapse-all], [data-history-groups], .clsv2-iconbtn[data-left],
      #dmcMoRongTat, #dmcThuGonTat, .wd-fgroup-all, .kb-expand-btn, .nk-note-toggle, .xk-note-toggle, .mat-collapse-btn
    )) {
      border-radius: var(--b-r, var(--radius-btn, 4px)) !important;
      /* Mũi tên nút tách, kính lúp nằm trong ô nhập: chỉ bo góc, giữ cỡ riêng. */
      &:not(:where(.rp-arrow-btn, .btn-split-toggle, .tn-tt-caret, .loc-search > button)) {
        height: var(--b-h, var(--btn-h, 30px)) !important;
        min-height: 0 !important;
        padding: 0 var(--b-px, var(--btn-px, 14px)) !important;
        font-size: var(--b-fs, var(--fs-sm, 12px)) !important;
        font-weight: var(--b-fw, var(--fw-semibold, 600)) !important;
        gap: var(--b-gap, 7px) !important;
        & > i { font-size: var(--b-icfs, 12px) !important; }
        /* Nút chỉ có icon: vuông theo chiều cao của cỡ */
        &:is(.btn-icon, [data-chi-icon], .wd-ailam) {
          width: var(--b-h, var(--btn-h, 30px)) !important;
          min-width: 0 !important;
          flex: 0 0 auto !important;   /* flex-basis/co của màn không được bóp méo ô vuông */
          padding: 0 !important;
        }
      }
    }

    & :is(i, svg) { color: var(--b-ic) !important; }
    & span { color: inherit !important; }

    &:hover:not(:disabled, .disabled, [aria-disabled="true"], .buttondeactive) {
      background: var(--b-hbg) !important;
      border-color: var(--b-hbd) !important;
      color: var(--b-hfg) !important;
      box-shadow: var(--b-hsh) !important;
      transform: translateY(-1px);
    }

    &:active:not(:disabled, .disabled, [aria-disabled="true"], .buttondeactive) {
      transform: translateY(0);
      box-shadow: 0 1px 1px rgba(15, 23, 42, .05) !important;
    }

    &:focus-visible {
      outline: 2px solid var(--brand, #1d6f5c) !important;
      outline-offset: 2px !important;
    }

    &:is(:disabled, .disabled, [aria-disabled="true"], .buttondeactive) {
      opacity: .45 !important;
      cursor: not-allowed !important;
      transform: none !important;
      box-shadow: none !important;
      filter: grayscale(40%) !important;
    }
  }

  /* --- Nút In split: thân + mũi tên dính liền, viền chỉ 1 nét ở khớp nối --- */
  /* Góc đặt qua biến --b-r: longhand radius ở đây kém độ ưu tiên hơn khối bo góc của bộ nhận diện. */
  :is(.btn-split-group, .rp-wrap) > :is(.btn-split-main, .rp-main-btn) {
    --b-r: var(--radius-btn, 4px) 0 0 var(--radius-btn, 4px);
    border-right: none !important;
    box-shadow: none !important;
  }
  :is(.btn-split-group, .rp-wrap) > :is(.btn-split-toggle, .rp-arrow-btn) {
    --b-r: 0 var(--radius-btn, 4px) var(--radius-btn, 4px) 0;
    width: 26px !important;
    min-width: 26px !important;
    padding: 0 !important;
    border-left: 1px solid var(--btn-print-border) !important;
    box-shadow: none !important;
    cursor: pointer;
  }
  :is(.btn-split-group, .rp-wrap) > :is(.btn-split-toggle, .rp-arrow-btn) i {
    font-size: 10px !important;
    transition: transform .15s ease;
  }
  .btn-split-group.active > .btn-split-toggle i { transform: rotate(180deg); }
  /* Nút split không nhấc lên lệch khớp khi rê chuột */
  :is(.btn-split-group, .rp-wrap) > :is(.btn-split-main, .btn-split-toggle, .rp-main-btn, .rp-arrow-btn):hover {
    transform: none !important;
  }

  /* Kính lúp trong .loc-search là phần nằm bên trong viền input, không phải nút hành động độc lập. */
  .loc-filter .loc-input.loc-search > button {
    background: transparent !important;
    color: var(--muted) !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .loc-filter .loc-input.loc-search > button:hover {
    background: transparent !important;   /* trong suốt là trong suốt: rê chuột chỉ đổi màu icon (29/09/2026) */
    color: var(--brand) !important;
    transform: none !important;
  }
  .loc-filter .loc-input.loc-search > button :is(i, svg) { color: inherit !important; }

  /* Nhóm dính liền: mọi nút con vuông góc, khung ngoài .btn-group lo bo góc. */
  .btn-group > * { --b-r: 0; }

  /* =============================================================================
     NGỮ CẢNH CỠ (duyệt 29/09/2026) — chỉ ĐẶT BIẾN, giá trị do khối bo góc + kích thước ép.
     ============================================================================= */
  /* Cùng hàng ô nhập: cao bằng ô nhập (--h-input 32) cho thẳng hàng. */
  :is(.loc-filter, .filter-dates, .input-group) :is(button, a, input[type="button"]) { --b-h: var(--h-input, 32px); }
  /* Nhỏ 24: trên dòng lưới, tiêu đề khối, panel nhỏ. */
  :is(.wg-e, .wg-d, .pqm-role-act, .dmc-hbtn, .chc-mini, .gp-nut, .kb-gp-nut, .kb-vcopy, .kb-vexpand, .kb-mau-nut,
      .dk-context-close, .card-toggle-btn, .rp-panel-toggle, .blv-qbtn, .blv-qcollapse,
      .kk-sec-h > .kk-btn, .dc-sec-h .ft-btn, .wd-ailam) {
    --b-h: var(--btn-h-sm, 24px); --b-px: var(--btn-px-sm, 8px); --b-fs: 11px; --b-icfs: 11px; --b-gap: 4px;
  }
  /* Lớn 40: kiosk KSK (màn cảm ứng). */
  :is(.kk-btn-go, .kk-btn-cam) {
    --b-h: var(--btn-h-lg, 40px); --b-px: var(--btn-px-lg, 18px); --b-fs: 14px; --b-icfs: 15px; --b-gap: 8px; --b-fw: 700;
  }

  /* =============================================================================
     NÚT NGOÀI BỘ NHẬN DIỆN MÀU (duyệt 29/09/2026): chỉ đồng bộ bo góc + kích thước, KHÔNG đụng
     màu/viền — nút giữ kiểu riêng của màn. Danh sách lấy từ lần đo 122 màn (docs/mockups/
     phuong-an-bo-goc-nut-4px.html, nhóm B và C).
     ============================================================================= */
  :is(
    /* B · có viền */
    .kb-info-button, .tb-ib-act, .chc-mini, .dmcl-nut, .dmc-hbtn, .kb-vcopy, .kb-vexpand, .lh-action,
    .tk-cfgbtn, .tk-refresh, .tk-abtn, .tk-cols, .ltt-iconbtn, .card-toggle-btn, .ks-nut, .rp-panel-toggle,
    .blv-qload, .blv-qbtn, .blv-qcollapse, .blv-qnew, .blv-bell, .blv-htool,
    .kb-mau-nut, .th-reset, .th-column-button, .lh-b-create, .ric-refresh,
    #blTimMabn, #blTimMakcb, #chhPin,
    /* C · trong suốt */
    .wg-e, .wg-d, .pqm-role-act, .gp-nut, .kb-gp-nut, .bl-hdr-tog, .dmb-tt-thu, .kb-ck-setting,
    .rpt-fs-arrow, .dk-context-close
  ) {
    border-radius: var(--b-r, var(--radius-btn, 4px)) !important;
    height: var(--b-h, var(--btn-h, 30px)) !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: var(--b-fs, var(--fs-sm, 12px)) !important;
    font-weight: var(--b-fw, var(--fw-semibold, 600)) !important;
    &:not(.btn-icon, [data-chi-icon], .wd-ailam) {
      padding-left: var(--b-px, var(--btn-px, 14px)) !important;
      padding-right: var(--b-px, var(--btn-px, 14px)) !important;
    }
    &:is(.btn-icon, [data-chi-icon], .wd-ailam) {
      width: var(--b-h, var(--btn-h, 30px)) !important;
      min-width: 0 !important;
      flex: 0 0 auto !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }
  /* Nằm bên trong ô nhập: chỉ bo góc, giữ cỡ theo ô. */
  :is(.rxk-cd-caret, .rxk-dx-caret, .th-search-submit, .kb-makcb-ico, .kb-queue-search-trigger) {
    border-radius: var(--radius-btn, 4px) !important;
  }

  /* TRONG SUỐT LÀ TRONG SUỐT (user chốt 29/09/2026): nút không nền không viền thì rê chuột /
     bấm cũng KHÔNG hiện nền, viền hay bóng. Phản hồi chỉ bằng màu icon; nút đã có màu hover
     riêng theo vai trò (Sửa cam, Xóa đỏ trên dòng lưới) giữ nguyên màu đó. */
  :is(.wg-e, .wg-d, .pqm-role-act, .gp-nut, .kb-gp-nut, .bl-hdr-tog, .dmb-tt-thu, .kb-ck-setting,
      .rpt-fs-arrow, .dk-context-close, .rxk-dx-caret, .kb-makcb-ico) {
    &, &:hover, &:focus, &:active, &[aria-expanded="true"] {
      background: transparent !important;
      border-color: transparent !important;
      box-shadow: none !important;
      transform: none !important;
    }
    &:hover:not(:disabled, .wg-e, .wg-d, .del, .dk-context-close) { color: var(--brand) !important; }
  }
}

/* Thu/mở nhóm: chevron đơn, không khung; không áp cho phóng to cửa sổ hoặc dropdown. */
.btn-fold{display:inline-flex;align-items:center;justify-content:center;width:var(--h-input-sm);height:var(--h-input-sm);padding:0;cursor:pointer;color:var(--muted)}
@layer clinic-buttons {
  :is(.btn-fold, [data-group-expand-all], [data-group-collapse-all], [data-history-groups],
      .clsv2-iconbtn[data-left="expand"], .clsv2-iconbtn[data-left="collapse"],
      #dmcMoRongTat, #dmcThuGonTat, .wd-fgroup-all, #wdChatDeptAll,
      .kb-expand-btn, .nk-note-toggle, .xk-note-toggle, .mat-collapse-btn) {
    border:0!important;background:transparent!important;box-shadow:none!important;transform:none!important;
    /* Trong suốt là trong suốt (29/09/2026): rê chuột không hiện nền, chỉ đổi màu icon. */
    &:hover{background:transparent!important;color:var(--brand)!important;transform:none!important}
    &:focus-visible{outline:2px solid var(--focus-bd)!important;outline-offset:1px}
  }
  .btn-fold.btn-fold{width:var(--h-input-sm)!important;min-width:var(--h-input-sm)!important;height:var(--h-input-sm)!important;padding:0!important}
}

/* «Ai làm?» toàn hệ (user chốt 24/10/2026): chỉ icon, vuông cỡ Nhỏ 24 (cỡ + ô vuông khai trong layer ở trên).
   Chữ trong <span> ẩn khỏi mắt nhưng giữ làm tên cho trình đọc màn hình; tooltip do fSupport.js gắn khi
   nút thiếu title. Để NGOÀI layer + button.wd-ailam cho thắng rule span của module mà không cần !important. */
button.wd-ailam > span {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}