:root {
    --ex-input-radius: 2px;
    --ex-input-height: 32px;
    --ex-input-pad-y: 4px;
    --ex-input-pad-x: 8px;
}

html.ex-input-flat {
    --ex-input-radius: 0px;
}

/* Flat mode là lựa chọn người dùng nên phải thắng win8.css dù file đó nạp sau.
   Editor trong Tabulator giữ nguyên hình dáng riêng của lưới. */
html.ex-input-flat body input.form-control:not(.tabulator-cell input),
html.ex-input-flat body select.form-control:not(.tabulator-cell select),
html.ex-input-flat body select.form-select:not(.tabulator-cell select),
html.ex-input-flat body textarea.form-control:not(.tabulator-cell textarea),
html.ex-input-flat body .ts-wrapper:not(.grid-tomselect-editor):not(.tabulator-cell .ts-wrapper) .ts-control {
    border-radius: 0 !important;
}

.container-fluid {
    margin: 0px !important;
    padding: 0px !important;
    float: left;
    width: 100%;
}

.row {
    margin: 0px !important;
    padding: 0px !important;
}

.col-lg-1 {
    margin: 0px !important;
    padding: 0px !important;
}

.col-lg-2 {
    margin: 0px !important;
    padding: 0px !important;
}

.col-lg-3 {
    margin: 0px !important;
    padding: 0px !important;
}

.col-lg-4 {
    margin: 0px !important;
    padding: 0px !important;
}

.col-lg-6 {
    margin: 0px !important;
    padding: 0px !important;
}

.col-lg-12 {
    margin: 0px !important;
    padding: 0px !important;
}

.col-md-1 {
    margin: 0px !important;
    padding: 0px !important;
}

.col-md-2 {
    margin: 0px !important;
    padding: 0px !important;
}

.col-md-3 {
    margin: 0px !important;
    padding: 0px !important;
}

.col-md-4 {
    margin: 0px !important;
    padding: 0px !important;
}

.col-md-6 {
    margin: 0px !important;
    padding: 0px !important;
}

.col-md-12 {
    margin: 0px !important;
    padding: 0px !important;
}

.col-sm-1 {
    margin: 0px !important;
    padding: 0px !important;
}

.col-sm-2 {
    margin: 0px !important;
    padding: 0px !important;
}

.col-sm-3 {
    margin: 0px !important;
    padding: 0px !important;
}

.col-sm-4 {
    margin: 0px !important;
    padding: 0px !important;
}

.col-sm-6 {
    margin: 0px !important;
    padding: 0px !important;
}

.col-sm-12 {
    margin: 0px !important;
    padding: 0px !important;
}

.btn {
    color: var(--main-color) !important;
    border-color: var(--main-color) !important;
}

.btn-primary {
    background: var(--main-color) !important;
    color: var(--btn-on, #fff) !important;
}

/* .btn ép color=main-color!important -> nút MÀU ĐẶC (danger/success/warning/info) phải trắng chữ */
.btn-danger,
.btn-success,
.btn-warning,
.btn-info {
    color: var(--btn-on, #fff) !important;
}

.form-control {
    padding: 0.375rem 0.75rem !important;
}

input.form-control {
    padding: var(--ex-input-pad-y) var(--ex-input-pad-x) !important;
    height: var(--ex-input-height) !important;
    border-radius: var(--ex-input-radius) !important;
    font-size: var(--fs-base, 13px) !important;
    line-height: 1.2 !important;
}

.tabulator .tabulator-header .tabulator-col {
    padding: 0 !important;
}

.tabulator .tabulator-row.tabulator-row-even {
    background: var(--row-zebra, rgba(186,191,191,.2)) !important;
}

/* Kéo HẸP cột: lưới làm như HisSite — không layout/vẽ lại gì khi thả chuột, nên tổng cột có thể hụt
   khung vài chục px. Khối dòng tối thiểu bằng khung để sọc nền / dòng chọn kéo tới mép phải, không
   lộ dải trống. Cột rộng hơn khung thì khối vẫn rộng đúng bằng tổng cột và cuộn ngang như cũ. */
.tabulator .tabulator-tableholder .tabulator-table {
    min-width: 100%;
}

/* Trạng thái chọn do partCss/selection.css (kiểu R) lo — không khai lại ở đây.
   Gồm cả nền, vạch trái, viền dọc của ô và màu chữ .g2l-code/.g2l-meta của dòng chọn. */

/* Cell editing KHÔNG viền — viền nằm ở control con (input dòng ~700 / .ts-control dòng ~680) là DUY NHẤT.
   Trước đây cell có viền --main-color + input/ts-control cũng có viền -> 2 viền lồng nhau. */
.tabulator-row .tabulator-cell.tabulator-editing {
    border: none !important;
    outline: none;
    padding: 0;
}

.tabulator-cell.tabulator-editing input {
    background: none !important;
    margin: auto !important;
}

.tabulator .tabulator-col-content {
    padding: 0 !important;
}

.grid-header-title {
    height: 34px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-weight: 600;
    white-space: nowrap;
}

.tabulator .tabulator-header-filter {
    padding: 7px 8px 8px 8px !important;
    border-top: 1px solid var(--line, #e2e8f0);
    background: var(--surface, #fff);
}

    .tabulator .tabulator-header-filter input, .tabulator .tabulator-header-filter select {
        width: 100%;
        height: 34px;
    }

.tabulator .tabulator-col-title {
    height: 34px;
    display: flex;
    align-items: center;
}

.tabulator-headers .grid-checkbox-col .tabulator-col-content {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--line, #e2e8f0);
    cursor: pointer;
}

.grid-toolbar {
    border-bottom: none !important;
    border-radius: 0px !important;
    padding: 5px !important;
    margin-bottom: 0px !important;
    box-shadow: none !important;
}

.grid-tomselect-editor {
    width: 100%;
}

/* Ô lưới của cột NHIỀU MÃ (multiSelectColumn): hiện chip tên, bấm để mở dropdown nhiều chọn */
.grid-mc { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; width: 100%; min-height: 18px; }
.grid-mc-trong { color: var(--muted-2, #94a3b8); font-size: var(--fs-sm, 12px); }
.grid-mc-chip {
    display: inline-block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    vertical-align: middle; margin: 1px 3px 1px 0; padding: 1px 7px; border-radius: var(--radius, 2px);
    font-size: var(--fs-sm, 12px); background: var(--brand-soft, #ecfdf3);
    color: var(--brand, #1d6f5c); border: 1px solid var(--brand-2, #22a06b);
}
.grid-mc-chip.them { background: var(--surface-3, #eef1f5); color: var(--muted, #475569); border-color: var(--line-2, #cbd5d0); }

/* Editor nhiều chọn trong ô: TomSelect multi cao bằng ô, chip không đẩy vỡ dòng lưới */
.tabulator-cell .ts-wrapper.ts-multi-check .ts-control { flex-wrap: nowrap; overflow-x: auto; }

/* Popup nhiều chọn neo tại nút/ô (openMultiSelectPopup) — cho lưới khoá editor hoặc cột lưu riêng */
.grid-mc-pop { background: var(--surface, #fff); border-radius: var(--radius-sm, 3px); box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.18)); }
.grid-mc-pop .ts-wrapper { width: 100%; }

.tabulator-cell .ts-wrapper {
    width: 100%;
    height: 100%;
}

.tabulator-cell .ts-control {
    min-height: 100%;
    height: 100%;
    border: 1px solid var(--main-color);
    border-radius: 0;
    padding: 4px 8px;
    box-shadow: none;
}

.ts-dropdown {
    z-index: 999999 !important;
    background: var(--surface, #fff) !important;
}

.grid-toolbar button i {
    margin-left: 5px;
    margin-right: 5px;
}

.grid-toolbar button {
    padding: 5px !important;
    padding-right: 10px !important;
}

.modal-dialog {
    margin: 0px auto !important;
}

.grid-group-droparea {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    margin-bottom: 4px;
    border: 1px dashed var(--line-2, #cbd5e1);
    border-radius: var(--radius, 2px);
    background: var(--surface-hover, #f8fafc);
    color: var(--muted, #64748b);
    font-size: var(--fs-base, 13px);
}

    .grid-group-droparea.drag {
        border-color: var(--main-color);
        background: var(--tranfer-color);
    }

.grid-group-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: var(--radius, 2px);
    background: var(--main-color);
    color: var(--btn-on, #fff);
    font-size: 13px;
}

    .grid-group-chip button {
        border: 0;
        background: transparent;
        color: var(--btn-on, #fff);
        cursor: pointer;
        font-weight: bold;
    }

.grid-group-droparea {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    margin-bottom: 4px;
    border: 1px dashed var(--line-2, #cbd5e1);
    border-radius: var(--radius, 2px);
    background: var(--surface-hover, #f8fafc);
    color: var(--muted, #64748b);
    font-size: var(--fs-base, 13px);
}

    .grid-group-droparea.drag {
        border-color: var(--main-color);
        background: var(--tranfer-color);
    }

.grid-group-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.grid-group-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: var(--radius, 2px);
    background: var(--main-color);
    color: var(--btn-on, #fff);
    font-size: 13px;
}

    .grid-group-chip button {
        border: 0;
        background: transparent;
        color: var(--btn-on, #fff);
        cursor: pointer;
        font-weight: bold;
    }

.grid-group-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .grid-group-actions button {
        border: 1px solid var(--line-2, #cbd5e1);
        background: var(--surface, #fff);
        color: var(--text, #334155);
        border-radius: 4px;
        padding: 3px 8px;
        font-size: var(--fs-sm, 12px);
        cursor: pointer;
    }

    .grid-group-actions .grid-group-act-btn {
        width: 28px;
        height: 28px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
    }

        .grid-group-actions .grid-group-act-btn:hover {
            border-color: var(--main-color);
            color: var(--main-color);
        }

.grid-load-more {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    padding: 8px;
    text-align: center;
    background: var(--surface, #fff);
    border-top: 1px solid var(--line, #ddd);
    color: var(--main-color);
    font-size: var(--fs-base, 13px);
}

.ts-wrapper .ts-control {
    display: flex !important;
    align-items: center;
    flex-wrap: var(--ex-select-wrap, nowrap) !important;
    min-height: 32px;
    overflow: hidden;
}

    .ts-wrapper .ts-control input {
        min-width: 80px !important;
        flex: 1;
    }

.ts-wrapper.multi .ts-control > div {
    white-space: nowrap;
    margin: 2px;
}

/* Item ĐÃ CHỌN của dropdown chọn-nhiều: theo token brand thay vì màu mặc định của
   tom-select.bootstrap5 (xám lạc khỏi design system). Dark theme chỉ đảo CHỮ ở cuối file
   nên đặt nền qua token là đủ cho cả 2 chế độ. */
.ts-wrapper.multi .ts-control > .item {
    background: var(--brand-soft, #ecfdf3);
    color: var(--brand-dark, #13503f);
    border-radius: var(--radius-sm, 2px);
    font-weight: var(--fw-semibold, 600);
}

.ts-wrapper .ts-control .item {
    display: flex;
    align-items: center;
}

.ts-wrapper .ts-control {
    display: flex !important;
    align-items: center;
    flex-wrap: var(--ex-select-wrap, nowrap) !important;
    min-height: 32px;
    overflow: hidden;
    border: 1px solid var(--line, #d9d9d9) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    outline: none !important;
}

.ts-control input {
    width: auto !important;
    min-width: 80px !important;
    background: transparent !important;
}

.form-control {
    border: 1px solid var(--line, #d9d9d9) !important;
    outline: none !important;
    box-shadow: none !important;
}

    /* Quầng focus: token --focus-bd/--focus-ring (tokens.css), dẫn xuất từ --brand.
       Trước 13/08/2026 dùng --tranfer-color #05595285 (teal CŨ pha alpha) -> viền nhòe,
       tương phản yếu, và nằm ngoài tokens.css nên đổi brand không kéo theo focus. */
    .form-control:focus, .ts-wrapper.focus .ts-control {
        border-color: var(--focus-bd, #1d6f5c) !important;
        box-shadow: var(--focus-ring, 0 0 0 3px rgba(29,111,92,.24)) !important;
        outline: none !important;
    }

.form-control, .ts-wrapper.single .ts-control, .ts-wrapper.multi .ts-control {
    min-height: var(--ex-input-height) !important;
    height: var(--ex-input-height) !important;
    padding: var(--ex-input-pad-y) var(--ex-input-pad-x) !important;
    border: 1px solid var(--line, #ced4da) !important;
    border-radius: var(--ex-input-radius) !important;
    background: var(--surface, #fff) !important;
    font-size: var(--fs-base, 13px) !important;
    line-height: 18px !important;
    box-shadow: none !important;
}

.ts-wrapper .ts-control {
    display: flex !important;
    align-items: center !important;
    flex-wrap: var(--ex-select-wrap, nowrap) !important;
}

.ts-wrapper.single .ts-control .item, .ts-wrapper.single .ts-control input {
    line-height: 18px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ts-wrapper {
    min-height: var(--h-input, 32px) !important;
}

    .ts-wrapper.focus .ts-control, .form-control:focus {
        border-color: var(--focus-bd, #1d6f5c) !important;
        box-shadow: var(--focus-ring, 0 0 0 3px rgba(29,111,92,.24)) !important;
    }

/* =====================================================================
   COMMON FILTER CONTROL HEIGHT
   Chuẩn chung cho ô lọc nghiệp vụ: input/select/button/TomSelect = --h-input.
   Scope vào các container filter phổ biến để không đụng editor trong lưới,
   nút mini 28px, hoặc control đặc thù trong bảng.
   ===================================================================== */
:where(.ws-filters, .kb-filter, .filter, .filterbar, .ws-left-filter .ws-filters)
    :where(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, .ctrl, .form-control, .ws-btn, button) {
    height: var(--h-input, 32px) !important;
    min-height: var(--h-input, 32px) !important;
    font-size: var(--fs-base, 13px) !important;
    box-sizing: border-box !important;
}

:where(.ws-filters, .kb-filter, .filter, .filterbar, .ws-left-filter .ws-filters)
    :where(.ts-wrapper, .ts-wrapper.single, .ts-wrapper.multi) {
    min-height: var(--h-input, 32px) !important;
}

:where(.ws-filters, .kb-filter, .filter, .filterbar, .ws-left-filter .ws-filters)
    :where(.ts-wrapper.single .ts-control, .ts-wrapper.multi .ts-control) {
    height: var(--h-input, 32px) !important;
    min-height: var(--h-input, 32px) !important;
    font-size: var(--fs-base, 13px) !important;
    box-sizing: border-box !important;
}

:where(.ws-filters, .filter, .filterbar) :where(.rp-main-btn, .rp-arrow-btn) {
    height: var(--h-input, 32px) !important;
    min-height: var(--h-input, 32px) !important;
}

/* =====================================================================
   TOMSELECT WRAPPER SANITIZER
   TomSelect copy class cua select goc sang wrapper. Neu select goc mang
   class skin nhu .ctrl / .form-select / .form-control thi wrapper ngoai
   bi ve them 1 lop input nua. Neutralize wrapper, chi de .ts-control ben
   trong giu visual field.
   ===================================================================== */
.ts-wrapper.ts-skinless,
.ts-wrapper.ctrl,
.ts-wrapper.inputStyle,
.ts-wrapper.form-control,
.ts-wrapper.form-select,
.ts-wrapper[class*="form-control-"],
.ts-wrapper[class*="form-select-"] {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.ts-check-option {
    display: flex !important;
    gap: 5px;
}

    .ts-check-option input[type="checkbox"] {
        width: auto !important;
    }

/* Multiselect chuẩn: ô đóng chỉ giữ MỘT dòng. 1-3 lựa chọn ngắn và đủ chỗ hiện tên;
   lựa chọn dài/nhiều hoặc panel hẹp tự chuyển thành "Đã chọn N <đơn vị>" bằng JS.
   Item thật bị ẩn về mặt trình bày nhưng TomSelect vẫn giữ nguyên giá trị và sự kiện. */
.ts-wrapper.ts-multi-summary .ts-control {
    display: flex !important;
    flex-wrap: nowrap !important;
    height: var(--h-input, 32px) !important;
    min-height: var(--h-input, 32px) !important;
    overflow: hidden !important;
}

    .ts-wrapper.ts-multi-summary .ts-control > .item {
        display: none !important;
    }

    .ts-wrapper.ts-multi-summary .ts-multi-summary-text {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--text, #0f172a);
        line-height: 18px;
        pointer-events: none;
    }

    .ts-wrapper.ts-multi-summary .ts-multi-summary-text:empty,
    .ts-wrapper.ts-multi-summary.dropdown-active .ts-multi-summary-text {
        display: none !important;
    }

    .ts-wrapper.ts-multi-summary.ts-multi-has-value:not(.dropdown-active) .ts-control > input {
        width: 1px !important;
        min-width: 1px !important;
        max-width: 1px !important;
        flex: 0 0 1px !important;
        padding: 0 !important;
        margin: 0 !important;
        opacity: 0;
    }

    .ts-wrapper.ts-multi-summary.dropdown-active .ts-control > input {
        min-width: 60px !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
        opacity: 1;
        cursor: text !important;
    }

.ts-check-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--line, #e2e8f0);
    background: var(--surface-hover, #f8fafc);
    font-size: var(--fs-sm, 12.5px);
    color: var(--muted, #475569);
    flex: 0 0 auto;
}

    .ts-check-header .ts-check-header-actions {
        display: flex;
        align-items: center;
        gap: 2px;
        min-width: 0;
    }

    .ts-check-header .ts-check-header-count {
        font-weight: 600;
    }

    .ts-check-header .ts-check-header-clear,
    .ts-check-header .ts-check-header-all {
        border: none;
        background: transparent;
        color: var(--brand-dark, #13503f);
        font-size: var(--fs-sm, 12px);
        cursor: pointer;
        padding: 2px 4px;
        white-space: nowrap;
    }

        .ts-check-header .ts-check-header-clear:hover:not(:disabled),
        .ts-check-header .ts-check-header-all:hover:not(:disabled) {
            background: var(--brand-soft, #ecfdf3);
        }

        .ts-check-header .ts-check-header-clear:disabled,
        .ts-check-header .ts-check-header-all:disabled {
            color: var(--muted-2, #94a3b8);
            cursor: not-allowed;
        }

.ts-dropdown.ts-multi-check-dropdown {
    display: flex;
    flex-direction: column;
}

.ts-dropdown.ts-multi-check-dropdown .ts-check-option {
    display: flex !important;
    align-items: center;
    gap: var(--sp-2, 8px);
    min-width: 0;
}

.ts-dropdown.ts-multi-check-dropdown .ts-check-option > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tabulator-cell.tabulator-editing {
    background-color: transparent !important;
    border: none !important;
    display: flex;
    align-items: center;
}

    .tabulator-cell.tabulator-editing input, .tabulator-cell.tabulator-editing select, .tabulator-cell.tabulator-editing .ts-wrapper {
        background-color: transparent !important;
        border: none !important;
        outline: none !important;
        width: 100%;
    }

.ts-wrapper.single .ts-control {
    background-color: transparent !important;
    border: none !important;
    text-align: center !important;
    box-shadow: none !important;
}

    .ts-wrapper.single .ts-control .item {
        width: 100%;
        text-align: center;
    }

.date-picker-wrap {
    position: relative;
    width: 100%;
    min-width: 0;
    container-type: inline-size;
    container-name: datepicker;
}

/* Kích thước ngữ nghĩa cho ngày trong FORM nghiệp vụ.
   Chỉ opt-in qua data-date-size; các ngày Từ/Đến của bộ lọc giữ layout riêng. */
.date-picker-wrap--date,
input[data-date-size="date"] {
    width: min(var(--w-date), 100%) !important;
    max-width: 100% !important;
    /* Không dùng kích thước làm flex-basis: trong flex-column nó sẽ thành chiều cao và đẩy icon xuống. */
    flex: 0 1 auto !important;
}

.date-picker-wrap--birth-date,
input[data-date-size="birth-date"] {
    width: min(var(--w-date-birth), 100%) !important;
    max-width: 100% !important;
    flex: 0 1 auto !important;
}

.date-picker-wrap--datetime,
input[data-date-size="datetime"] {
    width: min(var(--w-datetime), 100%) !important;
    max-width: 100% !important;
    flex: 0 1 auto !important;
}

    .date-picker-wrap input {
        width: 100%;
        min-width: 0;
    }

.date-picker-icon {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--muted-2, #999);
    z-index: 5;
    transition: .2s;
}

    .date-picker-icon:hover {
        color: var(--tranfer-color);
    }

.date-picker-wrap input:focus + .date-picker-icon {
    color: var(--tranfer-color);
}

@container datepicker (max-width: 112px) {
    .date-picker-wrap input {
        padding-right: 6px !important;
    }

    .date-picker-wrap input::-webkit-calendar-picker-indicator,
    .date-picker-icon {
        display: none;
    }
}

.ql-insertTable:after {
    content: "Table";
    font-size: 12px;
}

.ql-insertTable {
    width: 45px !important;
}

.grid-header-mode-menu {
    position: absolute;
    z-index: 100000;
    min-width: 190px;
    background: var(--surface, #fff);
    border: 1px solid var(--line, #d0d7de);
    border-radius: var(--radius, 2px);
    box-shadow: var(--shadow-md, 0 8px 24px rgba(15,23,42,.18));
    padding: 6px;
    font-size: var(--fs-base, 13px);
}

.grid-header-mode-menu-item {
    padding: 8px 10px;
    cursor: pointer;
    border-radius: 4px;
    white-space: nowrap;
}

    .grid-header-mode-menu-item:hover {
        background: var(--surface-hover, #f1f5f9);
    }

    .grid-header-mode-menu-item.active {
        font-weight: 700;
        color: var(--main-color);
    }

.ts-wrapper.single .ts-control {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    min-height: var(--ex-input-height) !important;
    height: var(--ex-input-height) !important;
    padding: var(--ex-input-pad-y) var(--ex-input-pad-x) !important;
    border: 1px solid var(--line, #ced4da) !important;
    border-radius: var(--ex-input-radius) !important;
    background: var(--surface, #fff) !important;
    box-shadow: none !important;
    text-align: left !important;
}

    .ts-wrapper.single .ts-control .item {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        text-align: left !important;
        padding: 0 !important;
        margin: 0 4px 0 0 !important;
        line-height: 18px !important;
        white-space: nowrap !important;
    }

    .ts-wrapper.single .ts-control input {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 20px !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
    }

.ts-wrapper.single.focus .ts-control {
    border-color: var(--focus-bd, #1d6f5c) !important;
    box-shadow: var(--focus-ring, 0 0 0 3px rgba(29,111,92,.24)) !important;
}
.tabulator-cell.tabulator-editing .ts-wrapper.single .ts-control {
    border: 1px solid var(--brand, #00897b) !important;   /* 1 viền DUY NHẤT của TomSelect (viền cell đã bỏ ở rule :has) */
    border-radius: 4px !important;
    background: var(--surface, #fff) !important;
    box-shadow: none !important;
}
.ts-check-option.option {
    display:flex !important;
    align-items:center
}
/* Chỉ bỏ padding khi modal-body chứa TRỰC TIẾP lưới (Tabulator) để lưới lấp đầy mép.
   Các popup alert/xác nhận/dialog thường vẫn giữ padding cân đối từ _MainLayout. */
.modal-body:has(> .tabulator) {
    padding: 0px !important;
}

.tabulator .tabulator-cell.tabulator-editing {
    padding: 3px 8px !important;
    overflow: visible !important;
    background: var(--surface, #fff) !important;
}

    .tabulator .tabulator-cell.tabulator-editing input,
    .tabulator .tabulator-cell.tabulator-editing select,
    .grid-inline-editor {
        width: 100% !important;
        height: 31px !important;
        min-height: 31px !important;
        border: 1px solid var(--brand, #00897b) !important;
        border-radius: 4px !important;
        padding: 4px 8px !important;
        font-size: var(--fs-md, 14px) !important;
        background: var(--surface, #fff) !important;
        color: var(--text-strong, #111827) !important;
        outline: none !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

        .tabulator .tabulator-cell.tabulator-editing input:focus,
        .grid-inline-editor:focus {
            border-color: var(--brand, #00897b) !important;
            box-shadow: 0 0 0 1px rgba(29,111,92,.25) !important;
        }

        .tabulator .tabulator-cell.tabulator-editing input[type=number] {
            text-align: right;
        }

.ts-wrapper.grid-tomselect-editor {
    width: 100% !important;
}

    .ts-wrapper.grid-tomselect-editor .ts-control {
        min-height: 31px !important;
        height: 31px !important;
        border: 1px solid var(--brand, #00897b) !important;
        border-radius: 4px !important;
        padding: 3px 8px !important;
        font-size: var(--fs-md, 14px) !important;
        box-shadow: 0 0 0 1px rgba(29,111,92,.15) !important;
    }

.ts-dropdown {
    border: 1px solid var(--line, #d0d7de) !important;
    border-radius: 4px !important;
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.18)) !important;
    font-size: var(--fs-md, 14px) !important;
}

    .ts-dropdown .option {
        padding: 9px 12px !important;
    }

    .ts-dropdown:not(.ts-grid) .active {
        background: var(--surface-hover, #eef2f7) !important;
        color: var(--text-strong, #111827) !important;
    }
.grid-toolbar {
    background: var(--surface-hover, #f8f9fa);
}
.grid-toolbar .btn{
    border:none !important
}

/* Input thuần / select / textarea (loại trừ checkbox/radio/nút) */

/* select option list (native) */

/* TomSelect: control (ô hiển thị) + input bên trong */

/* TomSelect: dropdown options */

/* FOCUS: viền + ring rõ cho mọi loại ô */

/* Khung lưới + nền chung */

/* Header: nền + chữ rõ, viền gọn */

/* HÀNG: nền sọc nhẹ, CHỮ SÁNG NHƯ NHAU cho lẻ & chẵn (đè color:#212529!important của vendor) */
/* Ô: chữ sáng cho MỌI hàng (kể cả vendor đặt color trên .tabulator-row) */

/* Hover: rõ ràng trên cả hàng lẻ/chẵn */

/* Trạng thái chọn (kể cả nền tối) do partCss/selection.css (kiểu R) lo — không khai lại ở đây.
   Biến --dk-grid-sel GIỮ LẠI vì master.css còn dùng cho ::selection của văn bản. */

/* Hàng nhóm (grouping) */

/* Thanh filter trong header + ô nhập filter */

/* Placeholder "Không có dữ liệu" */

/* Panel filter kiểu Excel (đang là nền trắng cứng) */
/* Nút nhấn chính (primary/teal) giữ màu nhấn nhưng chữ trắng cho dễ đọc */
/* Nút thao tác chính (Chốt) giữ màu nhấn teal + chữ trắng để nổi bật */

/* ============================================================================
   FIX component dùng chung "Chọn mẫu in" (_ReportPrintButton.cshtml / btnPrint.js)
   Bug fb-20260801-150316-125: ở các màn có CSS module ép rộng ô select
   (vd màn CĐHA có `#cdhaRoot input,#cdhaRoot select,#cdhaRoot textarea{width:100%}`),
   ô loại file (PDF/HTML) bị kéo 100% -> nuốt hết chỗ -> TÊN mẫu in (.rp-name) co về 0px,
   người dùng chỉ thấy chữ "HTML". Ép lại tại component gốc (áp cho MỌI màn):
   - .rp-name: luôn chiếm phần còn lại, giữ tối thiểu để hiện rõ tên mẫu.
   - .rp-page (select loại file): chỉ vừa nội dung, KHÔNG giãn 100%.
   Dùng !important để thắng rule ID module (module không đặt !important). */
.rp-wrap .rp-menu .rp-name {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 120px !important;
    font-weight: 600 !important;
}
.rp-wrap .rp-menu .rp-page {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 52px !important;
}

/* Caret chung cho TomSelect; chỉ hiển thị và để sự kiện xuyên xuống control. */
.ts-wrapper { position: relative; }
.ts-wrapper.single .ts-control:after,
.ts-wrapper.multi .ts-control:after { display: none !important; }
.ts-caret {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    width: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pal-gray-500, #6b7280);
    pointer-events: none;
    transition: transform .15s ease, color .15s ease;
}
.ts-wrapper.dropdown-active .ts-caret { transform: rotate(180deg); }
.ts-wrapper .ts-control,
.ts-wrapper .ts-control input { cursor: pointer !important; }
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control,
.ts-wrapper .ts-control { padding-right: 28px !important; }
.tabulator-cell .ts-caret,
.ts-wrapper.grid-tomselect-editor .ts-caret { display: none !important; }
.tabulator-cell .ts-control,
.tabulator-cell .ts-control input,
.ts-wrapper.grid-tomselect-editor .ts-control,
.ts-wrapper.grid-tomselect-editor .ts-control input { cursor: text !important; }
.tabulator-cell .ts-control,
.ts-wrapper.grid-tomselect-editor .ts-control { padding-right: 8px !important; }

/* =====================================================================
   Ô NEO (frozen) của Tabulator phải có nền ĐỤC.
   Vendor để ô neo `background-color: inherit` -> ăn theo nền dòng. Mà nền dòng chẵn là
   --row-zebra BÁN TRONG SUỐT, dòng chọn thì ô bị ép transparent (selection.css), dark thì
   mọi ô transparent (khối trên) -> cuộn ngang, chữ các cột trượt dưới lộ xuyên qua cột neo.
   Lớp gradient cùng màu token phủ trên nền --surface: giữ đúng sắc sọc nhưng đục.
   ===================================================================== */
html:not([data-theme='dark']) .tabulator .tabulator-row.tabulator-row-even:not(.tabulator-selected) .tabulator-cell.tabulator-frozen {
    background: linear-gradient(var(--row-zebra, rgba(186,191,191,.2)), var(--row-zebra, rgba(186,191,191,.2))), var(--surface, #fff) !important;
}
html:not([data-theme='dark']) .tabulator .tabulator-row.row-dirty:not(.tabulator-selected) .tabulator-cell.tabulator-frozen {
    background: linear-gradient(var(--row-dirty-bg, rgba(217,119,6,.09)), var(--row-dirty-bg, rgba(217,119,6,.09))), var(--surface, #fff) !important;
}
/* Dòng chọn: ô neo lấy nền chọn; ô neo đầu tự vẽ vạch trái vì nó che vạch inset của dòng. */
html body .tabulator .tabulator-row.tabulator-selected .tabulator-cell.tabulator-frozen {
    background: var(--row-sel, #8fdcb8) !important;
}
html body .tabulator .tabulator-row.tabulator-selected > .tabulator-cell.tabulator-frozen:first-child {
    box-shadow: inset var(--row-sel-bar-width, 4px) 0 0 var(--row-sel-bar, #1d6f5c) !important;
}

/* ============================================================
   BỔ SUNG 27/10 — TomSelect nhiều lựa chọn: thu gọn thành «N đã chọn», nút xoá hết, xổ lên trên.
   Chỉ dùng lớp MỚI (ts-ms-count / ts-ms-collapsed / ts-ms-clear) — hiện CHƯA file nào gắn, nối sau.
   Chưa lấy 2 rule cần !important: ẩn .ts-control>input khi thu gọn (thư viện ép display !important)
   và .ts-dropup top:auto (JS gán top inline) — màn dùng ts-dropup (Đăng ký, Lịch hẹn) đã có rule riêng.
   ============================================================ */
.ts-wrapper.multi .ts-ms-count {
    display: none;
    align-items: center;
    font-size: var(--fs-xs, 11px);
    line-height: 1.5;
    font-weight: var(--fw-semibold, 600);
    color: var(--btn-on, #fff);
    background: var(--brand, #2563eb);
    border-radius: var(--radius, 2px);
    white-space: nowrap;
    padding: 1px 7px;
    flex: 0 0 auto;
}
.ts-wrapper.multi.ts-ms-collapsed .ts-control > .item { display: none; }
.ts-wrapper.multi.ts-ms-collapsed .ts-ms-count { display: inline-flex; }
.ts-wrapper.multi .ts-ms-clear {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 22px;
    width: 16px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--muted-soft, #9aa0aa);
    font-size: var(--fs-md, 14px);
    line-height: 1;
    z-index: 4;
    pointer-events: auto;
}
.ts-wrapper.multi .ts-ms-clear:hover { color: var(--brand, #2563eb); }