/* ===================================================================
   VT BUTTON — MỘT bộ lớp cho NÚT HTML THUẦN (<button>, <a>), cặp với dxButton.
   Nạp toàn cục ở _Layout_Head.cshtml, NGAY SAU vtui-theme.css. (26/09/2026)

   ══ CHỌN CÁCH NÀO ═════════════════════════════════════════════════════════════════════
     · Nút dựng bằng JS / nằm trong widget DevExtreme (toolbar, popup, form, lưới)  → dxButton.
     · Nút HTML tĩnh trong .cshtml, hoặc nút nằm trong chuỗi HTML dựng bằng JS mà đổi sang
       widget sẽ phải viết lại cách gắn sự kiện / bật tắt                         → .vtui-btn.
     KHÔNG tạo tiền tố lớp nút riêng cho màn mới (`xx-btn`, `xx-btn-primary`…). Đo 26/09/2026
     có 409 thẻ <button> thuần / 79 tệp mang hơn 50 tiền tố lớp khác nhau, và CSS của chúng
     còn bị neo-brutalism.css vá lại TỪNG MÀN một (`body .sc-btn-submit`, `body .docs-btn-*`…).

   ══ LỚP ═══════════════════════════════════════════════════════════════════════════════
     Tương ứng dxButton  { type, stylingMode }:
       vtui-btn                                   type normal  · contained  (nút phụ, mặc định)
       vtui-btn vtui-btn--primary                 type default · contained  (nút chính)
       vtui-btn vtui-btn--danger                  type danger  · contained  (nút nguy hiểm)
       + vtui-btn--outlined                       stylingMode outlined (nền trong, có viền)
       + vtui-btn--text                           stylingMode text     (không nền, không viền)
     Theo NGHĨA (bổ sung 26/09/2026 — hướng dẫn: Docs/UI/HUONG_DAN_NUT_BAM.md):
       vtui-btn vtui-btn--success                 Duyệt · Xác nhận · Hoàn tất (lục của theme)
       vtui-btn vtui-btn--warning                 Thu hồi · Gửi lại · Tạm dừng — vàng, LUÔN chữ đậm
       vtui-btn vtui-btn--info                    Xem trước · Hướng dẫn · Chi tiết (xanh ngọc #0e7490)
       vtui-btn vtui-btn--secondary               nhấn vừa, KHÔNG mang nghĩa (Xem dạng bảng · Chuyển chế độ · Xuất)
       vtui-btn vtui-btn--white                   nền trắng CỐ ĐỊNH — nút đặt trên NỀN MÀU (tiêu đề modal tô màu, banner, thẻ)
         + --outlined / --text                    «trắng trong suốt» — CHỈ trên nền TỐI (trên dải màu chính của theme: cấm)
       + vtui-btn--soft                           nền nhạt cùng màu, ghép với primary/danger/success/warning/info
       vtui-btn vtui-btn--tone                    màu RIÊNG: style="--vtui-btn-tone:#6d3fc2" (VTUI tự chọn chữ + chỉnh nền ≥ 4,5)
                                                   hoặc khai cứng cặp --vtui-btn-tone-bg + --vtui-btn-tone-fg (VTUI giữ nguyên, chỉ đo + cảnh báo)
     Bổ trợ:
       vtui-btn--icon       nút CHỈ có icon: vuông, icon 16px — PHẢI có title / aria-label
       vtui-btn--lg         cao 32px, chữ 13px — cho khung có ô nhập cỡ lớn (modal tự dựng)
       vtui-btn--block      rộng hết khung (tương đương dxButton width: '100%')
       aria-pressed="true" hoặc lớp .active   nút bật/tắt, tab, bộ lọc đang chọn (tô như nút chính)
       (mặc định nút KHÔNG co trong hàng flex — muốn co thì khai flex-shrink / flex ở trang; nút --white có vòng focus 2 lớp)
       disabled / aria-disabled="true"        vô hiệu (TRỪ khi đang bận — xem VTUI.setButtonBusy)
     Ví dụ:
       <button type="button" class="vtui-btn vtui-btn--primary"><i class="fas fa-save"></i> Lưu</button>
       <button type="button" class="vtui-btn vtui-btn--outlined">Huỷ</button>
       <button type="button" class="vtui-btn vtui-btn--text vtui-btn--icon" title="Quay lại"><i class="fas fa-arrow-left"></i></button>

   ══ HỢP ĐỒNG THEME ═══════════════════════════════════════════════════════════════════
     Theme chỉ khai biến --vtui-btn-* ở SỔ THEME wwwroot/css/vtui-theme.css (bảng biến ở đầu
     sổ, mục «NÚT»). KHÔNG sửa tệp này, KHÔNG viết quy tắc nút theo tiền tố từng màn.
     Không khai gì thì nút ăn theo màu DevExtreme của theme (--dx-color-*), cỡ bằng dxButton
     Fluent (cao 24px, chữ 12px/500, đệm 4px 8px, bo 4px — đo thật 26/09/2026).

   ══ TƯƠNG PHẢN ≥ 4,5 (chữ 12px) ═══════════════════════════════════════════════════════
     · Nút chính / nguy hiểm tô đặc dùng CẶP MÀU vt-dialog.js đã tính cho nút hộp thoại
       (--vtd-bg-* / --vtd-fg-*): nền là màu theme đẩy đậm/nhạt tới khi chữ đạt 4,5, chữ đen
       hay trắng tuỳ bên nào tương phản cao hơn. KHÔNG viết bộ tính thứ hai ở đây.
       Chữ trắng hay đậm do theme chọn bằng --vtui-on-accent (sổ theme): «light» ⇒ chữ trắng, nền tự đậm
       tới 4,5 (Green, Yellow, Blue tối, Xám xanh tối, Neo — 26/09/2026). ⚠ dxButton chính NGOÀI hộp thoại
       vẫn giữ nền gốc của theme (chữ trắng trên nền sáng 2,4–4,4) ⇒ có thể nhạt hơn .vtui-btn cùng theme.
     · Chữ nút viền/chữ loại chính: màu chính pha 50% với màu chữ theme; loại nguy hiểm:
       --vtui-danger-safe (vt-dialog.js) pha 70% với màu chữ — số đo từng theme ghi ở quy tắc.
     · Rê chuột/focus: nút tô đặc pha nền về phía NGƯỢC màu chữ (như vt-dialog.css) ⇒ tương
       phản chỉ tăng; nút thường pha 6% màu chữ vào nền.
     ⚠ Nút viền / nút chữ lấy màu chữ của THEME — đặt trong khung nền trắng cứng (modal tự dựng
       không theo theme) thì ở theme tối chữ trắng trên nền trắng. Trong khung như vậy dùng nút
       TÔ ĐẶC (mặc định / --primary / --danger): nền đi kèm chữ nên đọc được trên mọi nền.

   ══ NÚT BẬN ═══════════════════════════════════════════════════════════════════════════
     VTUI.setButtonBusy(nút, 'Đang lưu…') chạy nguyên như nút thường: nút giữ màu (không mờ),
     vòng xoay theo màu chữ nút; khoảng cách do `gap` lo nên bỏ lề phải của vòng xoay.
   =================================================================== */

.vtui-btn {
    /* Màu nội bộ — tên có gạch dưới là riêng của tệp này, theme ĐỪNG khai. */
    --_b-bg: var(--vtui-btn-bg, var(--dx-component-color-bg, #fff));
    --_b-fg: var(--vtui-btn-fg, var(--dx-color-text, #242424));
    --_b-bd: var(--vtui-btn-border-color, transparent);
    --_b-mix: var(--_b-fg);            /* rê chuột: pha nền về phía này */
    --_b-mix-pct: 6%;
    --_b-mix-pct-active: 12%;
    --_b-image: none;
    --_b-image-hover: var(--_b-image);
    --_b-shadow: var(--vtui-btn-shadow, 0 1px 3px rgba(0, 0, 0, .24));
    --_b-shadow-hover: var(--vtui-btn-hover-shadow, var(--_b-shadow));
    --_b-shadow-active: var(--vtui-btn-active-shadow, var(--_b-shadow));
    --_b-transform: var(--vtui-btn-hover-transform, none);
    --_b-transform-active: var(--vtui-btn-active-transform, none);
    --_b-bw: var(--vtui-btn-border-width, 1px);

    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--vtui-btn-gap, 4px);
    box-sizing: border-box; vertical-align: middle;
    min-width: var(--vtui-btn-height, 24px); min-height: var(--vtui-btn-height, 24px); max-width: 100%;
    margin: 0;
    /* 4px trừ bề dày viền ⇒ viền 1px hay 2px (Neo) nút vẫn cao đúng 24px như dxButton. */
    padding: var(--vtui-btn-padding, calc(4px - var(--_b-bw)) 8px);
    border: var(--_b-bw) solid var(--_b-bd);
    border-radius: var(--vtui-btn-radius, var(--dx-border-radius, 4px));
    background-color: var(--_b-bg);
    background-image: var(--_b-image);
    color: var(--_b-fg);
    box-shadow: var(--_b-shadow);
    font-family: var(--vtui-btn-font-family, "segoe ui", -apple-system, BlinkMacSystemFont, "avenir next", avenir, "helvetica neue", roboto, noto, helvetica, arial, sans-serif);
    font-size: var(--vtui-btn-font-size, 12px);
    font-weight: var(--vtui-btn-font-weight, 500);
    line-height: 16px; letter-spacing: normal; text-transform: none; text-align: center;
    text-decoration: none; white-space: nowrap;
    cursor: pointer; user-select: none; -webkit-user-select: none;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
/* Không co nhỏ hơn bề rộng chữ khi nằm trong hàng flex chật (27/09/2026: min-width chỉ 24px nên «Xuất Excel» ở
   WeeklyOverview 390px co lại, chữ tràn đè lên tiêu đề mục). :where() ⇒ độ đặc hiệu 0: trang nào tự khai flex cho
   nút (vd .ap-btn{flex:1 1 140px} ở /Duyet) vẫn thắng dù tệp trang nạp TRƯỚC tệp này. Cần cho nút co ⇒ khai flex-shrink ở trang. */
:where(.vtui-btn) { flex-shrink: 0; }
/* Icon Font Awesome / svg đứng cạnh chữ: nhỏ hơn icon DevExtreme (16px) một nấc vì chữ FA đậm hơn. */
.vtui-btn > i, .vtui-btn > .fa, .vtui-btn > .fas, .vtui-btn > .far, .vtui-btn > .fab, .vtui-btn > svg {
    font-size: 14px; line-height: 1; flex: none;
}
.vtui-btn > svg { width: 14px; height: 14px; }
.vtui-btn > img.vtui-btn__img { width: 16px; height: 16px; flex: none; object-fit: contain; }   /* icon dạng ảnh (VTCore.button) */
/* ── Hình học y hệt dxButton — lớp bổ trợ do VTCore.button tự gắn (đo 14/10/2026, 10 theme) ─────────────────────────
   DevExtreme: icon luôn nằm trong ô 16×16; nút tô đặc/chữ KHÔNG có viền nên đệm ngang 8px (nút viền: viền 1px + đệm 8px);
   chữ 500 ở mọi theme; kiểu chữ phẳng, bo 4px. Nút .vtui-btn thường (HTML tĩnh) giữ thiết kế riêng của theme (Neo 700, Bamboo 600…). */
.vtui-btn.vtui-btn--dx { font-weight: 500; }
.vtui-btn.vtui-btn--dx > i, .vtui-btn.vtui-btn--dx > img.vtui-btn__img { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; }
.vtui-btn.vtui-btn--dx:not(.vtui-btn--outlined):not(.vtui-btn--icon) { padding-inline: var(--vtui-btn-dx-padx, calc(8px - var(--_b-bw))); }
.vtui-btn.vtui-btn--dx.vtui-btn--text { border-width: 0; border-radius: var(--vtui-btn-dx-text-radius, var(--vtui-btn-radius, var(--dx-border-radius, 4px))); }   /* chữ phẳng: không viền ở mọi theme (kể cả Neo) */
.vtui-btn.vtui-btn--dx.vtui-btn--text:not(.vtui-btn--icon) { padding-inline: 8px; }
.vtui-btn.vtui-btn--dx.vtui-btn--icon:not(.vtui-btn--text) { padding-inline: var(--vtui-btn-dx-icon-padx, calc(4px - var(--_b-bw))); }
.vtui-btn.vtui-btn--dx:not(.vtui-btn--primary):not(.vtui-btn--success):not(.vtui-btn--danger):not(.vtui-btn--outlined):not(.vtui-btn--text):not(.vtui-btn--icon) { padding-inline: var(--vtui-btn-dx-normal-padx, var(--vtui-btn-dx-padx, calc(8px - var(--_b-bw)))); }
/* Chữ trong <span> con không được tự đặt màu/cỡ riêng — nút là một khối. */
.vtui-btn > span { color: inherit; }
/* <a class="vtui-btn">: màu liên kết của theme KHÔNG được tô lại nút. ⚠ Bamboo khai
   `html.theme-bamboo.theme-dark a:hover` (độ đặc hiệu 0,3,2) và nạp SAU tệp này — không có
   !important thì nút chính dạng <a> ra chữ lục trên nền lục, đo được 2,11 (26/09/2026). */
a.vtui-btn, a.vtui-btn:link, a.vtui-btn:visited, a.vtui-btn:hover, a.vtui-btn:focus, a.vtui-btn:active {
    color: var(--_b-fg) !important;
    text-decoration: none !important;
}

.vtui-btn:hover {
    background-color: color-mix(in srgb, var(--_b-bg), var(--_b-mix) var(--_b-mix-pct));
    background-image: var(--_b-image-hover);
    color: var(--_b-fg);
    box-shadow: var(--_b-shadow-hover);
    transform: var(--_b-transform);
    text-decoration: none;
}
.vtui-btn:active {
    background-color: color-mix(in srgb, var(--_b-bg), var(--_b-mix) var(--_b-mix-pct-active));
    box-shadow: var(--_b-shadow-active);
    transform: var(--_b-transform-active);
}
.vtui-btn:focus { outline: none; }
.vtui-btn:focus-visible {
    outline: var(--vtui-btn-focus-outline, 2px solid var(--vtui-accent-safe, var(--dx-color-primary, #0f6cbd)));
    outline-offset: 2px;
}

/* ── Loại: chính / nguy hiểm (tô đặc) ─────────────────────────────── */
.vtui-btn.vtui-btn--primary {
    --_b-bg: var(--vtui-btn-primary-bg, var(--vtd-bg-primary, var(--dx-color-primary, #0f6cbd)));
    --_b-fg: var(--vtui-btn-primary-fg, var(--vtd-fg-primary, #fff));
    --_b-bd: var(--vtui-btn-primary-border-color, var(--vtui-btn-border-color, transparent));
    --_b-mix: var(--vtd-inverse-primary, #000);
    --_b-mix-pct: 12%;
    --_b-mix-pct-active: 20%;
    --_b-image: var(--vtui-btn-primary-image, none);
    --_b-image-hover: var(--vtui-btn-primary-image-hover, var(--_b-image));
    --_b-shadow: var(--vtui-btn-accent-shadow, none);
}
.vtui-btn.vtui-btn--danger {
    --_b-bg: var(--vtui-btn-danger-bg, var(--vtd-bg-danger, var(--dx-color-danger, #c50f1f)));
    --_b-fg: var(--vtui-btn-danger-fg, var(--vtd-fg-danger, #fff));
    --_b-bd: var(--vtui-btn-danger-border-color, var(--vtui-btn-border-color, transparent));
    --_b-mix: var(--vtd-inverse-danger, #000);
    --_b-mix-pct: 12%;
    --_b-mix-pct-active: 20%;
    --_b-image: none;
    --_b-shadow: var(--vtui-btn-accent-shadow, none);
}

/* ── Loại theo NGHĨA: success / warning / info / secondary (26/09/2026) ─ */
/* Cặp màu do vt-dialog.js ép ≥ 4,5 y như nút chính (--vtd-bg/fg-*). Màu gốc: success / warning =
   --dx-color-success / -warning của theme · info = #0e7490 (DevExtreme không có màu info riêng) ·
   secondary = chữ theme pha 62% vào nền. Theme đổi màu gốc bằng --vtui-btn-{loại}-base ở sổ theme.
   warning LUÔN chữ đậm (vt-dialog.js bỏ qua --vtui-on-accent): ép chữ trắng phải đậm nền 48% ⇒ nâu. */
.vtui-btn.vtui-btn--success,
.vtui-btn.vtui-btn--warning,
.vtui-btn.vtui-btn--info,
.vtui-btn.vtui-btn--secondary {
    --_b-mix-pct: 12%;
    --_b-mix-pct-active: 20%;
    --_b-image: none;
    --_b-shadow: var(--vtui-btn-accent-shadow, none);
}
.vtui-btn.vtui-btn--success {
    --_b-bg: var(--vtui-btn-success-bg, var(--vtd-bg-success, #107c10));
    --_b-fg: var(--vtui-btn-success-fg, var(--vtd-fg-success, #fff));
    --_b-bd: var(--vtui-btn-success-border-color, var(--vtui-btn-border-color, transparent));
    --_b-mix: var(--vtd-inverse-success, #000);
}
.vtui-btn.vtui-btn--warning {
    --_b-bg: var(--vtui-btn-warning-bg, var(--vtd-bg-warning, #fde300));
    --_b-fg: var(--vtui-btn-warning-fg, var(--vtd-fg-warning, #16202B));
    --_b-bd: var(--vtui-btn-warning-border-color, var(--vtui-btn-border-color, transparent));
    --_b-mix: var(--vtd-inverse-warning, #fff);
}
.vtui-btn.vtui-btn--info {
    --_b-bg: var(--vtui-btn-info-bg, var(--vtd-bg-info, #0e7490));
    --_b-fg: var(--vtui-btn-info-fg, var(--vtd-fg-info, #fff));
    --_b-bd: var(--vtui-btn-info-border-color, var(--vtui-btn-border-color, transparent));
    --_b-mix: var(--vtd-inverse-info, #000);
}
.vtui-btn.vtui-btn--secondary {
    --_b-bg: var(--vtui-btn-secondary-bg, var(--vtd-bg-secondary, #6b6f73));
    --_b-fg: var(--vtui-btn-secondary-fg, var(--vtd-fg-secondary, #fff));
    --_b-bd: var(--vtui-btn-secondary-border-color, var(--vtui-btn-border-color, transparent));
    --_b-mix: var(--vtd-inverse-secondary, #000);
}

/* ── NÚT TRẮNG: nền trắng CỐ ĐỊNH ở mọi theme (26/09/2026) ─────────── */
/* Cho nút nằm trên NỀN MÀU: tiêu đề modal tô màu, dải banner, thẻ tô màu, ảnh. Chữ #16202B trên
   trắng = 14,36 ở mọi theme, mọi nền (đo 10 theme × nền trang / dải màu chính / nền tối). */
.vtui-btn.vtui-btn--white {
    --_b-bg: var(--vtui-btn-white-bg, #ffffff);
    --_b-fg: var(--vtui-btn-white-fg, #16202B);
    --_b-bd: var(--vtui-btn-white-border, rgba(22, 32, 43, .16));
    --_b-mix: #16202B;
    --_b-mix-pct: 7%;
    --_b-mix-pct-active: 13%;
    --_b-image: none;
    --_b-shadow: var(--vtui-btn-white-shadow, 0 1px 2px rgba(0, 0, 0, .18));
}

/* ── Màu RIÊNG (--tone) ─────────────────────────────────────────────── */
/* VTUI (vt-dialog.js · applyButtonTones) tính --_tone-* cho TỪNG nút: khai --vtui-btn-tone thì tự chọn chữ
   + chỉnh nền ≥ 4,5 ở theme đang chọn; khai CẢ --vtui-btn-tone-bg + --vtui-btn-tone-fg thì giữ nguyên cặp
   đó, chỉ đo (dưới 4,5 ⇒ data-vtui-tuong-phan-truot + console.warn) và thêm viền khi nút lẫn vào nền trang.
   Giá trị lùi bên dưới chỉ để nút không trống trong tích tắc trước khi JS chạy. */
.vtui-btn.vtui-btn--tone {
    --_b-bg: var(--_tone-bg, var(--vtui-btn-tone-bg, var(--vtui-btn-tone, var(--dx-color-primary, #0f6cbd))));
    --_b-fg: var(--_tone-fg, var(--vtui-btn-tone-fg, #fff));
    --_b-bd: var(--_tone-bd, var(--vtui-btn-border-color, transparent));
    --_b-mix: var(--_tone-inverse, #000);
    --_b-mix-pct: 12%;
    --_b-mix-pct-active: 20%;
    --_b-image: none;
    --_b-shadow: var(--vtui-btn-accent-shadow, none);
}

/* ── Kiểu: viền / chữ ─────────────────────────────────────────────── */
.vtui-btn.vtui-btn--outlined,
.vtui-btn.vtui-btn--text {
    --_b-bg: var(--vtui-btn-outline-bg, transparent);
    --_b-fg: var(--vtui-btn-fg, var(--dx-color-text, #242424));
    --_b-mix: var(--_b-fg);
    --_b-mix-pct: 6%;
    --_b-image: none;
    --_b-image-hover: none;
}
.vtui-btn.vtui-btn--outlined {
    --_b-bd: var(--vtui-btn-outline-border, var(--dx-color-border, #e0e0e0));
    --_b-shadow: var(--vtui-btn-flat-shadow, none);
}
.vtui-btn.vtui-btn--text {
    --_b-bg: transparent;
    --_b-bd: transparent;
    --_b-shadow: none;
    --_b-shadow-hover: none;
    --_b-shadow-active: none;
    --_b-transform: none;
    --_b-transform-active: none;
}
/* Chữ màu chính trên nền trong: pha 50% với màu chữ theme. Đo 26/09/2026: công thức này tệ nhất 5,57
   lúc đứng yên / 5,15 lúc rê chuột (Fluent Yellow); 55% chỉ còn 4,56 khi rê — sát ngưỡng. Bamboo khai
   riêng --vtui-btn-accent-text (#157A45): 5,16 / 4,76. */
.vtui-btn.vtui-btn--primary.vtui-btn--outlined,
.vtui-btn.vtui-btn--primary.vtui-btn--text {
    --_b-fg: var(--vtui-btn-accent-text, color-mix(in srgb, var(--dx-color-primary, #0f6cbd) 50%, var(--dx-color-text, #242424)));
    --_b-mix: var(--_b-fg);
    --_b-mix-pct: 6%;
    --_b-mix-pct-active: 12%;
}
.vtui-btn.vtui-btn--primary.vtui-btn--outlined {
    --_b-bd: var(--_b-fg);
}
/* Chữ đỏ trên nền trong: --vtui-danger-safe chỉ được ép 4,5 so với --dx-color-main-bg — đứng trên
   nền khác (thẻ Neo #1E293B) thì tụt còn 3,98, rê chuột còn 4,21 (đo 26/09/2026). Pha thêm 30% màu
   chữ theme ⇒ đỏ đậm hơn ở theme sáng, sáng hơn ở theme tối: tệ nhất > 5 cả lúc rê chuột. */
.vtui-btn.vtui-btn--danger.vtui-btn--outlined,
.vtui-btn.vtui-btn--danger.vtui-btn--text {
    --_b-fg: var(--vtui-btn-danger-text, color-mix(in srgb, var(--vtui-danger-safe, var(--dx-color-danger, #c50f1f)) 70%, var(--dx-color-text, #242424)));
    --_b-mix: var(--_b-fg);
    --_b-mix-pct: 6%;
    --_b-mix-pct-active: 12%;
}
.vtui-btn.vtui-btn--danger.vtui-btn--outlined {
    --_b-bd: var(--_b-fg);
}
/* success / warning / info / secondary kiểu viền / chữ: màu loại đã ép 4,5 trên nền theme (--vtd-text-*,
   vt-dialog.js) pha 30% màu chữ theme — cùng lý do như nút nguy hiểm: đứng trên thẻ hơi khác nền vẫn đạt.
   Đo 26/09/2026 × 10 theme, cả lúc rê chuột: thấp nhất success 6,61 · warning 6,04 · info 6,42 · secondary 4,54. */
.vtui-btn.vtui-btn--success.vtui-btn--outlined, .vtui-btn.vtui-btn--success.vtui-btn--text {
    --_b-fg: var(--vtui-btn-success-text, color-mix(in srgb, var(--vtd-text-success, #107c10) 70%, var(--dx-color-text, #242424)));
}
.vtui-btn.vtui-btn--warning.vtui-btn--outlined, .vtui-btn.vtui-btn--warning.vtui-btn--text {
    --_b-fg: var(--vtui-btn-warning-text, color-mix(in srgb, var(--vtd-text-warning, #847600) 70%, var(--dx-color-text, #242424)));
}
.vtui-btn.vtui-btn--info.vtui-btn--outlined, .vtui-btn.vtui-btn--info.vtui-btn--text {
    --_b-fg: var(--vtui-btn-info-text, color-mix(in srgb, var(--vtd-text-info, #0e7490) 70%, var(--dx-color-text, #242424)));
}
.vtui-btn.vtui-btn--secondary.vtui-btn--outlined, .vtui-btn.vtui-btn--secondary.vtui-btn--text {
    --_b-fg: var(--vtui-btn-secondary-text, var(--vtd-text-secondary, #5f6368));
}
.vtui-btn.vtui-btn--success.vtui-btn--outlined, .vtui-btn.vtui-btn--success.vtui-btn--text,
.vtui-btn.vtui-btn--warning.vtui-btn--outlined, .vtui-btn.vtui-btn--warning.vtui-btn--text,
.vtui-btn.vtui-btn--info.vtui-btn--outlined, .vtui-btn.vtui-btn--info.vtui-btn--text,
.vtui-btn.vtui-btn--secondary.vtui-btn--outlined, .vtui-btn.vtui-btn--secondary.vtui-btn--text {
    --_b-mix: var(--_b-fg);
    --_b-mix-pct: 6%;
    --_b-mix-pct-active: 12%;
}
.vtui-btn.vtui-btn--success.vtui-btn--outlined, .vtui-btn.vtui-btn--warning.vtui-btn--outlined,
.vtui-btn.vtui-btn--info.vtui-btn--outlined, .vtui-btn.vtui-btn--secondary.vtui-btn--outlined {
    --_b-bd: var(--_b-fg);
}

/* Trắng trong suốt (chữ + viền trắng) — CHỈ trên nền TỐI: 8,79 trên #1f2937; trên dải màu chính của theme
   chỉ 2,1–4,0 (đo 26/09/2026) ⇒ ở đó dùng nút trắng tô đặc. */
.vtui-btn.vtui-btn--white.vtui-btn--outlined,
.vtui-btn.vtui-btn--white.vtui-btn--text {
    --_b-bg: transparent;
    --_b-fg: #ffffff;
    --_b-mix: #ffffff;
    --_b-mix-pct: 16%;
    --_b-mix-pct-active: 24%;
    --_b-shadow: none;
}
.vtui-btn.vtui-btn--white.vtui-btn--outlined { --_b-bd: rgba(255, 255, 255, .8); }
.vtui-btn.vtui-btn--white.vtui-btn--text { --_b-bd: transparent; }
/* Vòng focus bàn phím của nút TRẮNG: vòng màu nhấn mặc định trùng màu dải mà nút trắng đứng trên (tiêu đề chat, dải màu
   chính) ⇒ không thấy. Dùng vòng HAI LỚP: vành đậm #16202B sát nút (box-shadow lấp khe offset) + vòng trắng ngoài ⇒ thấy
   trên mọi nền — nền sáng thấy vành đậm, nền tối / nền màu thấy vòng trắng (27/09/2026). Biến riêng, KHÔNG dùng
   --vtui-btn-focus-outline: Bamboo khai biến đó màu lục cho cả trang ⇒ lại trùng dải lục. */
/* ⚠ !important CÓ CHỦ Ý: neo-brutalism.css khai `*:focus-visible { outline: 3px solid var(--nb-primary) !important }` ⇒ ở Neo
   vòng trắng bị đè thành màu chính = đúng màu dải tiêu đề chat, còn vành đậm lẫn vào viền đen dày của nút Neo ⇒ không thấy
   nút nào đang focus (đo 27/09/2026). Độ đặc hiệu 0,3,0 + !important thắng 0,1,0 + !important của Neo. */
.vtui-btn.vtui-btn--white:focus-visible {
    outline: var(--vtui-btn-white-focus-outline, 2px solid #ffffff) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px var(--vtui-btn-white-focus-ring, #16202B);
}

/* ── NÚT NHẠT CÙNG MÀU (--soft), ghép với một loại ──────────────────── */
/* Nền = màu loại pha 14% vào nền theme; chữ = màu chữ kiểu viền của loại đó pha thêm màu chữ theme.
   Bản đầu dùng nguyên màu chữ kiểu viền: Bamboo sáng rê chuột còn 4,12 ⇒ pha thêm; đo lại 10 theme,
   cả lúc rê chuột: thấp nhất 5,10 (26/09/2026). Không ghép --soft với --outlined / --text. */
.vtui-btn.vtui-btn--soft {
    --_b-bd: transparent;
    --_b-image: none;
    --_b-shadow: none;
    --_b-mix: var(--_b-fg);
    --_b-mix-pct: 8%;
    --_b-mix-pct-active: 14%;
}
.vtui-btn.vtui-btn--primary.vtui-btn--soft {
    --_b-bg: color-mix(in srgb, var(--dx-color-primary, #0f6cbd) 14%, var(--dx-color-main-bg, #fff));
    --_b-fg: color-mix(in srgb, var(--vtui-btn-accent-text, color-mix(in srgb, var(--vtd-text-primary, #0f6cbd) 70%, var(--dx-color-text, #242424))) 80%, var(--dx-color-text, #242424));
}
.vtui-btn.vtui-btn--danger.vtui-btn--soft {
    --_b-bg: color-mix(in srgb, var(--dx-color-danger, #c50f1f) 14%, var(--dx-color-main-bg, #fff));
    --_b-fg: color-mix(in srgb, var(--vtui-danger-safe, var(--dx-color-danger, #c50f1f)) 56%, var(--dx-color-text, #242424));
}
.vtui-btn.vtui-btn--success.vtui-btn--soft {
    --_b-bg: color-mix(in srgb, var(--vtd-base-success, #107c10) 14%, var(--dx-color-main-bg, #fff));
    --_b-fg: color-mix(in srgb, var(--vtd-text-success, #107c10) 56%, var(--dx-color-text, #242424));
}
.vtui-btn.vtui-btn--warning.vtui-btn--soft {
    --_b-bg: color-mix(in srgb, var(--vtd-base-warning, #fde300) 14%, var(--dx-color-main-bg, #fff));
    --_b-fg: color-mix(in srgb, var(--vtd-text-warning, #847600) 56%, var(--dx-color-text, #242424));
}
.vtui-btn.vtui-btn--info.vtui-btn--soft {
    --_b-bg: color-mix(in srgb, var(--vtd-base-info, #0e7490) 14%, var(--dx-color-main-bg, #fff));
    --_b-fg: color-mix(in srgb, var(--vtd-text-info, #0e7490) 56%, var(--dx-color-text, #242424));
}

/* ── Đang chọn: nút bật/tắt, tab, bộ lọc ─────────────────────────── */
/* Tô như nút chính tô đặc — kể cả khi nút mang --outlined / --text (độ đặc hiệu 0,3,0 và đứng SAU
   các tổ hợp kiểu). Nhận cả lớp .active vì các màn cũ bật/tắt bằng đúng lớp đó — đổi sang chuẩn
   không phải sửa JS. */
.vtui-btn.vtui-btn[aria-pressed="true"],
.vtui-btn.vtui-btn.active {
    --_b-bg: var(--vtui-btn-primary-bg, var(--vtd-bg-primary, var(--dx-color-primary, #0f6cbd)));
    --_b-fg: var(--vtui-btn-primary-fg, var(--vtd-fg-primary, #fff));
    --_b-bd: var(--vtui-btn-primary-border-color, var(--vtui-btn-border-color, transparent));
    --_b-mix: var(--vtd-inverse-primary, #000);
    --_b-mix-pct: 12%;
    --_b-mix-pct-active: 20%;
    --_b-image: var(--vtui-btn-primary-image, none);
    --_b-image-hover: var(--vtui-btn-primary-image-hover, var(--_b-image));
}

/* ── Cỡ / bố cục ──────────────────────────────────────────────────── */
.vtui-btn.vtui-btn--icon { padding: calc(4px - var(--_b-bw)); }
.vtui-btn.vtui-btn--icon > i, .vtui-btn.vtui-btn--icon > .fa, .vtui-btn.vtui-btn--icon > .fas,
.vtui-btn.vtui-btn--icon > .far, .vtui-btn.vtui-btn--icon > .fab { font-size: 16px; }
.vtui-btn.vtui-btn--icon > svg { width: 16px; height: 16px; }
.vtui-btn.vtui-btn--lg {
    min-height: var(--vtui-btn-height-lg, 32px); min-width: var(--vtui-btn-height-lg, 32px);
    padding: var(--vtui-btn-padding-lg, calc(8px - var(--_b-bw)) 14px);
    font-size: var(--vtui-btn-font-size-lg, 13px);
}
.vtui-btn.vtui-btn--lg.vtui-btn--icon { padding: calc(8px - var(--_b-bw)); }
.vtui-btn.vtui-btn--block { display: flex; width: 100%; }

/* ── Vô hiệu ──────────────────────────────────────────────────────── */
/* ⚠ TRỪ nút đang bận: VTUI.setButtonBusy gắn aria-disabled="true" + .vtui-busy nhưng cố ý GIỮ
   màu để đọc được chữ «Đang lưu…» (vt-dialog.css). Vô hiệu thật thì mờ đi như dxButton. */
.vtui-btn:disabled,
.vtui-btn.disabled,
.vtui-btn[aria-disabled="true"]:not(.vtui-busy) {
    cursor: default; opacity: .5; box-shadow: none; transform: none; pointer-events: none;
}

/* VTCore.button: dxButton vô hiệu = chữ xám + (nút đặc) nền xám, KHÔNG mờ và KHÔNG ăn màu theo loại. Giá trị mặc định là Fluent sáng;
   theme khác đặt --vtui-btn-dx-dis-{fg,bg,bg-flat,bd,opacity} (Neo: không đặt bg/bd ⇒ giữ nền/viền riêng). */
.vtui-btn.vtui-btn--dx:is(:disabled, .disabled, [aria-disabled="true"]:not(.vtui-busy)) {
    --_o-bg: var(--_b-bg); --_o-bd: var(--_b-bd);
    opacity: var(--vtui-btn-dx-dis-opacity, 1); color: var(--vtui-btn-dx-dis-fg, #bdbdbd); background-image: none;
    background-color: var(--vtui-btn-dx-dis-bg, var(--_o-bg)); border-color: var(--vtui-btn-dx-dis-bd, var(--_o-bd));
}
.vtui-btn.vtui-btn--dx.vtui-btn--outlined:is(:disabled, .disabled, [aria-disabled="true"]:not(.vtui-busy)),
.vtui-btn.vtui-btn--dx.vtui-btn--text:is(:disabled, .disabled, [aria-disabled="true"]:not(.vtui-busy)) { background-color: var(--vtui-btn-dx-dis-bg-flat, var(--_o-bg)); }

/* ── Nút bận (VTUI.setButtonBusy) ─────────────────────────────────── */
.vtui-btn > .vtui-spinner--inline { margin-right: 0; }

@media (prefers-reduced-motion: reduce) {
    .vtui-btn { transition: none; }
    .vtui-btn:hover, .vtui-btn:active { transform: none; }
}