.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: #fff !important;
}

input.form-control {
    font-size: 14px !important;
    line-height: 1.2 !important;
}

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

.tabulator .tabulator-row.tabulator-row-even {
    background: #babfbf33 !important;
}

.tabulator .tabulator-row.tabulator-selected {
    /* Dòng đang chọn phải thấy rõ: nền đậm hơn hover + vạch trái màu tương phản.
       (Trước đây background:none -> dòng chọn gần như vô hình, người dùng dễ xóa nhầm dòng.) */
    background: var(--grid-row-selected) !important;
    box-shadow: inset 3px 0 0 var(--constrast-color);
}

    .tabulator .tabulator-row.tabulator-selected:hover {
        cursor: pointer;
    }

.tabulator-row .tabulator-cell.tabulator-editing {
    border: 1px solid var(--main-color) !important;
    outline: none;
    padding: 0;
}

.tabulator-cell.tabulator-editing input {
    background: none !important;
    border: 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 #e2e8f0;
    background: #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 #e2e8f0;
    cursor: pointer;
}

/* Ngang 6px + lề trái 4px của nút (ml-1) = nút đầu cách mép 10px, thẳng chữ ô lưới bên dưới. */
.grid-toolbar {
    border-bottom: none !important;
    border-radius: 0px !important;
    padding: 4px 6px !important;
    margin-bottom: 0px !important;
    box-shadow: none !important;
}

.grid-tomselect-editor {
    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: #fff !important;
}

/* Lật danh sách TomSelect lên TRÊN khi ô sát đáy màn hình (class 'ts-flip-up' do JS thêm) */
.ts-wrapper.ts-flip-up .ts-dropdown {
    top: auto !important;
    bottom: 100% !important;
    margin: 0 0 2px 0 !important;
}

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

/* Nút thanh lưới cao bằng ô nhập (--ctl-h) như nút chân hộp thoại; trước là btn-sm ~34px. */
.grid-toolbar button {
    display: inline-flex;
    align-items: center;
    height: var(--ctl-h);
    padding: 0 10px 0 5px !important;
    font-size: 14px;
    line-height: 1;
}

.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 #cbd5e1;
    border-radius: 6px;
    background: #f8fafc;
    color: #64748b;
    font-size: 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: 14px;
    background: var(--main-color);
    color: #fff;
    font-size: 13px;
}

    .grid-group-chip button {
        border: 0;
        background: transparent;
        color: #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 #cbd5e1;
    border-radius: 6px;
    background: #f8fafc;
    color: #64748b;
    font-size: 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: 14px;
    background: var(--main-color);
    color: #fff;
    font-size: 13px;
}

    .grid-group-chip button {
        border: 0;
        background: transparent;
        color: #fff;
        cursor: pointer;
        font-weight: bold;
    }

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

/* ===== Hàng công cụ của lưới co theo bề ngang thật =====
   Vùng kéo-nhóm phải co được và cho phép xuống dòng: trước đây nó không co, nên trong hộp thoại
   hẹp (vd lưới «Chi tiết» mở trong panel Tổng quan) cụm nút bị đẩy tràn ra ngoài mép và đè lên nhau. */
.grid-group-droparea {
    flex-wrap: wrap;
}

    .grid-group-droparea > .grid-group-left {
        flex: 1 1 180px;
        min-width: 0;
    }

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

    .grid-toolbar > * {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .grid-toolbar .ml-auto {
        margin-left: auto;
    }

.grid-btn-text {
    margin-left: 5px;
}

/* Khung hẹp -> nút chỉ còn ICON. Trong panel «Tổng quan», iframe chính là khung nhìn nên
   media query này bám theo bề rộng panel người dùng kéo, không phải bề rộng cả màn hình. */
@media (max-width: 900px) {
    .grid-btn-text {
        display: none;
    }

    .grid-toolbar button i,
    .grid-group-actions button i {
        margin-left: 0;
        margin-right: 0;
    }

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

    .grid-group-actions button {
        border: 1px solid #cbd5e1;
        background: #fff;
        color: #334155;
        border-radius: 4px;
        padding: 3px 8px;
        font-size: 12px;
        cursor: pointer;
    }

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

.ts-wrapper .ts-control {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap !important;
    overflow: hidden;
}

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

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

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

/* Ô chọn nhiều hết chỗ: thẻ thừa ẩn đi, dồn thành thẻ "+N" (03-dropdown.js, gonTheChonNhieu).
   Thẻ "+N" nằm cuối ô, sau ô gõ; order đưa nó lên ngay sau thẻ cuối còn hiện, ô gõ xuống sau cùng. */
.ts-wrapper .ts-control > .item.ts-the-an,
.ts-wrapper:not(.ts-gon-the) .ts-control > .ts-the-them {
    display: none;
}

.ts-wrapper.ts-gon-the .ts-control > .ts-the-them {
    order: 1;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    margin: 2px;
    padding: 1px 7px;
    border-radius: 10px;
    background: var(--tranfer-color2, #05595233);
    color: var(--main-body-color, #055952);
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
    cursor: pointer;
}

.ts-wrapper.ts-gon-the .ts-control > input {
    order: 2;
}

.ts-wrapper .ts-control {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap !important;
    overflow: hidden;
    border: 1px solid #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 #d9d9d9 !important;
    outline: none !important;
    box-shadow: none !important;
}

    .form-control:focus, .ts-wrapper.focus .ts-control {
        border-color: var(--tranfer-color) !important;
        box-shadow: 0 0 3px 1px var(--tranfer-color) !important;
        outline: none !important;
    }

.form-control, .ts-wrapper.single .ts-control, .ts-wrapper.multi .ts-control {
    min-height: var(--ctl-h) !important;
    height: var(--ctl-h) !important;
    padding: 2px 8px !important;
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    background: #fff !important;
    font-size: 13px !important;
    line-height: 18px !important;
    box-shadow: none !important;
}

.ts-wrapper .ts-control {
    display: flex !important;
    align-items: center !important;
    flex-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(--ctl-h) !important;
}

    .ts-wrapper.focus .ts-control, .form-control:focus {
        border-color: var(--tranfer-color) !important;
        box-shadow: 0 0 2px 0 var(--tranfer-color) !important;
    }

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

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

.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%;
    display: flow-root; /* fix: chứa input float bên trong, tránh wrap cao 0px làm lệch icon lịch */
}

    .date-picker-wrap input {
        width: 100%;
        float: none; /* fix: bỏ float để input nằm gọn trong wrap, icon lịch canh giữa đúng */
    }

.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: #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);
}

.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: #fff;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(15,23,42,.18);
    padding: 6px;
    font-size: 13px;
}

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

    .grid-header-mode-menu-item:hover {
        background: #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;
    padding: 2px 8px !important;
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    background: #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(--tranfer-color) !important;
    box-shadow: 0 0 2px 0 var(--tranfer-color) !important;
}
.tabulator-cell.tabulator-editing .ts-wrapper.single .ts-control {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}
.ts-check-option.option {
    display:flex !important;
    align-items:center
}
.modal-body{
    padding:0px !important
}
/* Body của hộp thoại thông báo/ xác nhận dùng chung (alertToas/questionToas) cần padding cho dễ đọc */
#globalBootstrapModalBody{
    padding:16px !important
}
/* Hộp thoại Bootstrap (alertToas/questionToas/dialogDiv) theo theme sáng/tối bằng token grid
   (nền/chữ trung tính, đọc tốt cả 2 theme). Trước đây ép cứng nền trắng + chữ #212529 để chống
   "báo trắng" ở theme tối; giờ theme tối được nền tối + chữ sáng đúng nghĩa.
   Header tuỳ biến có inline color (vd modal dashboard) vẫn thắng nên không bị ảnh hưởng. */
.modal-content {
    background: var(--grid-bg);
    color: var(--grid-text);
    border: 1px solid var(--grid-border);
}
.modal-content .modal-title,
.modal-content .modal-body {
    color: var(--grid-text);
}
/* Thanh tiêu đề + chân của MỌI hộp thoại gọn: Bootstrap 4.0 đệm 16px + tiêu đề 20px (tiêu đề 63px, chân ~70px)
   -> tiêu đề ~39px, chân ~43px. Chỉ bớt đệm dọc: đệm ngang 16px giữ để tiêu đề thẳng mép chữ thân hộp. */
.modal-content .modal-header {
    padding-top: 7px;
    padding-bottom: 7px;
    align-items: center;
    gap: 6px;
    border-bottom-color: var(--grid-border);
}
.modal-content .modal-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
}
/* Nút thêm trên thanh tiêu đề (?, «Đồng bộ mẫu từ HIS»…) chèn trước ×: cả cụm dồn sang phải, cách nhau bằng gap. */
.modal-content .modal-title + :not(.close) {
    margin-left: auto;
}
.modal-content .modal-title + :not(.close) ~ .close {
    margin-left: 0;
}
.modal-content .modal-header .close {
    padding-top: 7px;
    padding-bottom: 7px;
    margin-top: -7px;
    margin-bottom: -7px;
}
.modal-content .modal-footer {
    padding-top: 7px;
    padding-bottom: 7px;
    border-top-color: var(--grid-border);
}
/* Nút ở chân hộp cao bằng ô nhập (--ctl-h) thay vì 38px của .btn */
.modal-content .modal-footer button {
    height: var(--ctl-h);
    padding: 0 14px;
    font-size: 14px;
    line-height: calc(var(--ctl-h) - 2px);
}
/* .btn ép chữ/viền = --main-color bằng !important (đầu tệp); ở nền tối màu đó trùng nền hộp nên nút có sẵn của
   alertToas / questionToas (btn-primary / secondary / danger) chìm. Chân hộp tô lại theo theme. */
.modal-content .modal-footer .btn-secondary {
    background: transparent !important;
    border-color: var(--grid-border) !important;
    color: var(--grid-text) !important;
}
    .modal-content .modal-footer .btn-secondary:hover {
        background: var(--grid-row-hover) !important;
    }
.modal-content .modal-footer .btn-primary,
.modal-content .modal-footer .btn-danger {
    color: #fff !important;
}
.modal-content .modal-footer .btn-primary {
    background: var(--constrast-color) !important;
    border-color: var(--constrast-color) !important;
}
.modal-content .modal-footer .btn-danger {
    background: #dc3545 !important;
    border-color: #dc3545 !important;
}
    .modal-content .modal-footer .btn-primary:hover,
    .modal-content .modal-footer .btn-danger:hover {
        filter: brightness(1.1);
    }
/* Hộp hỏi "làm A hay B" (hoiLuaChon, 05-dialog-button.js): dòng đầu + câu hỏi + mỗi lựa chọn một thẻ; thẻ gợi ý viền
   màu nhấn. Không dùng .btn: nó bị ép màu !important như trên. */
.hlc-dau {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    margin-bottom: 2px;
}
    .hlc-dau i {
        color: var(--constrast-color);
    }
.hlc-hoi {
    opacity: .8;
    margin-bottom: 12px;
}
.hlc-chon {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.hlc-the {
    flex: 1 1 200px;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 2px 12px;
    padding: 12px 14px;
    border: 1px solid var(--grid-border);
    border-radius: 8px;
    background: transparent;
    color: var(--grid-text);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}
    .hlc-the i {
        grid-row: span 2;
        font-size: 20px;
        opacity: .7;
    }
    .hlc-the span {
        font-size: 12.5px;
        opacity: .75;
    }
    .hlc-the.goi-y {
        border-color: var(--constrast-color);
    }
        .hlc-the.goi-y i {
            color: var(--constrast-color);
            opacity: 1;
        }
    .hlc-the:hover,
    .hlc-the:focus-visible {
        border-color: var(--constrast-color);
        background: color-mix(in srgb, var(--constrast-color) 10%, transparent);
        outline: none;
    }
/* Nút X đóng modal: bootstrap mặc định chữ đen -> chìm trên nền tối */
.modal-content .close {
    color: var(--grid-text);
    text-shadow: none;
    opacity: .7;
}
/* Input trong modal (vd Hệ thống > Cấu hình kết nối) theo token input của theme */
.modal-content .form-control {
    background: var(--grid-input-bg);
    color: var(--grid-text);
    border-color: var(--grid-input-border);
}
.modal-content .form-control:focus {
    background: var(--grid-input-bg);
    color: var(--grid-text);
    border-color: var(--constrast-color);
    box-shadow: none;
}
/* Bảng trong modal (vd kết quả đồng bộ danh mục từ HIS) */
.modal-content .table {
    color: var(--grid-text);
}
.modal-content .table th,
.modal-content .table td {
    border-color: var(--grid-border);
}
/* Nút viền (vd Kiểm tra ở Cấu hình kết nối): bootstrap outline-secondary xám chìm trên nền tối
   -> lấy màu chữ/viền theo token, hover đảo nền nhẹ */
.modal-content .btn-outline-secondary {
    color: var(--grid-text);
    border-color: var(--grid-input-border);
    background: transparent;
}
.modal-content .btn-outline-secondary:hover,
.modal-content .btn-outline-secondary:focus,
.modal-content .btn-outline-secondary:active {
    color: var(--grid-text);
    background: var(--grid-row-hover);
    border-color: var(--constrast-color);
    box-shadow: none;
}
/* Option của select trong modal: theme tối cho danh sách xổ xuống (Database) */
.modal-content select.form-control option {
    background: var(--grid-input-bg);
    color: var(--grid-text);
}

.tabulator .tabulator-cell.tabulator-editing {
    padding: 3px 8px !important;
    overflow: visible !important;
    background: #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 #00897b !important;
        border-radius: 4px !important;
        padding: 4px 8px !important;
        font-size: 14px !important;
        background: #fff !important;
        color: #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: #00897b !important;
            box-shadow: 0 0 0 1px rgba(0,137,123,.25) !important;
        }

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

/* Giao diện tối: ô đang sửa trong lưới theo nền tối — hai luật trên ép #fff !important nên luật tối chung
   ([data-theme='dark'] input) không thắng nổi, ô sửa hiện thành khối trắng lóa. */
[data-theme='dark'] .tabulator .tabulator-cell.tabulator-editing {
    background: var(--grid-input-bg, #2b2d30) !important;
}

[data-theme='dark'] .tabulator .tabulator-cell.tabulator-editing input,
[data-theme='dark'] .tabulator .tabulator-cell.tabulator-editing select,
[data-theme='dark'] .grid-inline-editor {
    background: var(--grid-input-bg, #2b2d30) !important;
    color: var(--grid-text, #e5e7eb) !important;
}

/* Ô chọn (TomSelect) trong ô lưới: ô gõ tìm nằm lọt trong khung chọn, không nhận khung / nền / cao 31px của ô nhập lưới. */
.tabulator .tabulator-cell.tabulator-editing .ts-control input {
    height: auto !important;
    min-height: 0 !important;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
}

/* Danh sách của ô chọn trong lưới: TomSelect đặt cứng bề rộng bằng ô, cột hẹp là chữ gãy dòng. Cho rộng theo nội dung. */
.ts-dropdown.grid-ts-dropdown {
    width: max-content !important;
    min-width: 220px;
    max-width: min(420px, 90vw);
}

    .ts-dropdown.grid-ts-dropdown .option {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.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 #00897b !important;
        border-radius: 4px !important;
        padding: 3px 8px !important;
        font-size: 14px !important;
        box-shadow: 0 0 0 1px rgba(0,137,123,.15) !important;
    }

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

    /* Dòng ~29px, cùng nhịp các menu xổ của RIS (trước 9px → 39px/dòng, thưa). */
    .ts-dropdown .option {
        padding: 4px 12px !important;
    }

    .ts-dropdown .active {
        background: #eef2f7 !important;
        color: #111827 !important;
    }
.grid-toolbar {
    /* Nền/chữ thanh action bám biến grid nên tự đổi theo theme (sáng #fff / tối #26282b),
       không còn hardcode trắng gây "thanh trắng" ở giao diện tối. */
    background: var(--grid-header-bg);
    color: var(--grid-text);
    border-bottom: 1px solid var(--grid-border) !important;
}
.grid-toolbar .btn{
    border:none !important;
    color: var(--grid-text);
}
/* Giao diện sáng: viền cho nút phẳng/nền trong suốt ở toolbar lưới (theo màu chữ) cho rõ nét & đồng bộ với toolbar trang Phân quyền. Nút icon nhỏ (lọc/sort) và nút nền màu đặc giữ nguyên. */
:root:not([data-theme='dark']) .grid-toolbar .btn,
:root:not([data-theme='dark']) .grid-toolbar button {
    border: 1px solid currentColor !important;
    border-radius: 6px !important;
}
/* Giao diện tối: nút toolbar là btn-outline-secondary (nền trong suốt, DỰA VÀO VIỀN để thấy).
   .grid-toolbar .btn ở trên đã gỡ viền -> ở theme tối nút mất cả viền lẫn nền => trơ, chìm vào
   nền tối, phải hover mới hiện. Trả lại viền + nền cho nút luôn rõ. Nền nút phải SÁNG HƠN nền
   thanh action một bậc (--grid-row-hover #3a3d42 vs thanh #2b2d30) để nút nổi lên, không dùng
   --grid-input-bg vì trùng đúng màu nền thanh -> lại chìm. Hover đảo sang màu nhấn. */
:root[data-theme='dark'] .grid-toolbar .btn,
:root[data-theme='dark'] .grid-toolbar button {
    border: 1px solid var(--grid-border) !important;
    border-radius: 6px !important;
    background: var(--grid-row-hover) !important;
    /* !important để thắng '.btn { color: var(--main-color) !important }' (dòng ~104) — nếu không
       chữ/icon nút sẽ = --main-color (#2b2d30, tối) trùng nền thanh -> chìm, không đọc được. */
    color: var(--grid-text) !important;
}
:root[data-theme='dark'] .grid-toolbar .btn:hover,
:root[data-theme='dark'] .grid-toolbar button:hover {
    background: var(--constrast-color) !important;
    border-color: var(--constrast-color) !important;
    color: #fff !important;
}

/* ════════════════════════════════════════════════════════════════════
   THEME TỐI — CHỐNG "LÓA" CHO Ô NHẬP / DROPDOWN / TEXTAREA
   Các control ở trên hard-code nền trắng #fff !important (.form-control,
   .ts-control, .ts-dropdown, ô datetime, textarea Kết luận/Đề nghị...).
   Trong giao diện tối chúng chói mắt ("trang đọc kết quả siêu lỗi, lóa").
   Selector có tiền tố [data-theme='dark'] nên specificity cao hơn bản gốc
   → thắng kể cả khi bản gốc dùng !important.
   ════════════════════════════════════════════════════════════════════ */
[data-theme='dark'] .form-control,
[data-theme='dark'] .ts-wrapper.single .ts-control,
[data-theme='dark'] .ts-wrapper.multi .ts-control {
    background: var(--grid-input-bg, #2b2d30) !important;
    border-color: var(--grid-input-border, #4a4d52) !important;
    color: var(--grid-text, #e5e7eb) !important;
}
[data-theme='dark'] .ts-wrapper.single .ts-control .item,
[data-theme='dark'] .ts-wrapper.multi .ts-control .item,
[data-theme='dark'] .ts-control .item,
[data-theme='dark'] .ts-control input {
    color: var(--grid-text, #e5e7eb) !important;
}
/* Chip (item đã chọn) của multi-select "Trạng thái" — mặc định TomSelect nền
   trắng/xám sáng nên CHÓI ("Mục trạng thái lóa"). Ép nền chip theo theme tối. */
[data-theme='dark'] .ts-wrapper.multi .ts-control .item {
    background: var(--grid-row-hover, #3a3d42) !important;
    border-color: var(--grid-input-border, #4a4d52) !important;
}
[data-theme='dark'] .ts-wrapper.multi .ts-control .item.active {
    background: var(--grid-row-even, #2f3134) !important;
}
[data-theme='dark'] .ts-dropdown {
    background: var(--grid-input-bg, #2b2d30) !important;
    border-color: var(--grid-input-border, #4a4d52) !important;
    color: var(--grid-text, #e5e7eb) !important;
}
[data-theme='dark'] .ts-dropdown .option {
    color: var(--grid-text, #e5e7eb) !important;
}
[data-theme='dark'] .ts-dropdown .active,
[data-theme='dark'] .ts-dropdown .option:hover {
    background: var(--grid-row-hover, #3a3d42) !important;
    color: var(--grid-text, #e5e7eb) !important;
}
/* Ô nhập text/datetime + textarea Kết luận/Đề nghị (trừ checkbox/radio để
   không phá toggle/switch). */
[data-theme='dark'] input:not([type='checkbox']):not([type='radio']):not([type='range']),
[data-theme='dark'] textarea,
[data-theme='dark'] select {
    background-color: var(--grid-input-bg, #2b2d30);
    color: var(--grid-text, #e5e7eb);
    border-color: var(--grid-input-border, #4a4d52);
}
/* Ô trình duyệt đã tự điền: Chrome tô nền xanh nhạt (#e8f0fe) + chữ đen bằng !important nội bộ, không đè bằng
   background được -> phủ bóng trong cùng màu nền ô và ép màu chữ, nền tối không còn ô trắng lạc. */
[data-theme='dark'] input:-webkit-autofill,
[data-theme='dark'] input:-webkit-autofill:hover,
[data-theme='dark'] input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--grid-input-bg, #2b2d30) inset !important;
    -webkit-text-fill-color: var(--grid-text, #e5e7eb) !important;
    caret-color: var(--grid-text, #e5e7eb);
}
[data-theme='dark'] input::placeholder,
[data-theme='dark'] textarea::placeholder {
    color: #9aa0a6;
}
/* ════════════════════════════════════════════════════════════════════
   GÓP Ý fb-...879 (lần 3) — "vẫn chưa có html editor (mục Đọc kết quả)".
   NGUYÊN NHÂN GỐC (không phải màu/theme): file vendor jodit.min.css (v4.2)
   có rule nền BỊ LỖI: `.jodit-toolbar-editor-collection{flex-direction:column}`
   và KHÔNG có rule nào override về `row` cho chế độ ngang (_mode_horizontal
   chỉ set background/position, thiếu flex-direction:row). ⇒ 26 nút thanh
   công cụ XẾP DỌC, mỗi nút width:0 → thanh công cụ rộng 0px cao 979px =
   VÔ HÌNH, kéo theo vùng soạn thảo (workplace) co lại 50px ⇒ cả editor
   trông như TRỐNG (lỗi này có ở CẢ light & dark, không liên quan màu).
   → Khôi phục layout NGANG cho thanh công cụ (độc lập theme).
   Tham chiếu DOM (kiểm bằng Playwright): .jodit-toolbar-editor-collection
   computed flex-direction=column (sai) + .jodit-toolbar__box width=0. */
.jodit-toolbar-editor-collection,
.jodit-toolbar-editor-collection_mode_horizontal {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
}
.jodit-toolbar-editor-collection_mode_vertical {
    flex-direction: column !important; /* giữ đúng chế độ dọc khi jodit chủ động bật */
}
/* Cho editor "Đọc kết quả" LẤP ĐẦY vùng ĐỌC KẾT QUẢ (jodit không nhận
   height từ textarea rỗng → mặc định 50px). Biến container thành flex-cột:
   thanh công cụ (auto) + vùng soạn thảo (flex:1) lấp hết chiều cao. */
#divDocKetQua .divBody .jodit-container {
    min-height: 0 !important; /* huỷ minHeight ~200px mặc định của Jodit để editor CO được khi panel nhỏ */
    display: flex !important;
    flex-direction: column !important;
}
/* Trừ lúc toàn màn hình (nút ⛶): Jodit đưa html/body về cao 0 rồi tự đặt height = cửa sổ cho container — ép 100% ở
   đây là 100% của 0, vùng soạn thảo cao 0 và chữ biến mất. */
#divDocKetQua .divBody .jodit-container:not(.jodit_fullsize) {
    height: 100% !important;
}
/* ⛶ trong hộp thoại (vd Cài đặt mẫu kết quả): .modal-dialog của Bootstrap có transform ⇒ nó thành khung chứa của
   editor position:absolute, toàn màn hình chỉ phủ trong hộp. Lúc phóng to Jodit gắn .jodit_fullsize-box_true lên MỌI
   tổ tiên (đã ép position:static, overflow:visible) — gỡ nốt transform ở đó. */
.jodit_fullsize-box_true {
    transform: none !important;
}
/* Lưới chặn cuối: panel "Đọc kết quả" tự cắt mọi nội dung tràn nên dù editor có
   cao hơn cũng KHÔNG đè xuống "Kết luận". (Popup toolbar chỉ bị cắt khi panel bị
   kéo cực nhỏ — lúc đó không ai đang soạn thảo nên chấp nhận được.) */
#divDocKetQua {
    overflow: hidden;
}
/* Kéo thanh chia cho khung co lại (hoặc đổi bố cục 2 cột → 3 hàng) thì thanh công cụ bị ép mất nửa: plugin size
   của Jodit ghi cứng workplace.style.height = chiều cao khung lúc đo trước (px, không đo lại khi khung co), và hộp
   thanh công cụ có overflow:hidden nên flex được bóp nó tới 0. Nên: thanh công cụ không co, workplace tính từ 0
   (bỏ qua height px cũ) rồi nhận đúng phần còn lại. */
#divDocKetQua .divBody .jodit-toolbar__box {
    flex: 0 0 auto !important;
}
#divDocKetQua .divBody .jodit-workplace {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important; /* clip ở workplace (không phải toàn panel) nên KHÔNG cắt popup toolbar */
}
/* GỐC của lỗi "kéo lên": Jodit chạy auto-height (height='' → cao theo nội dung,
   không cuộn) nên khi panel "Đọc kết quả" bị thu nhỏ, editor vẫn cao bằng nội
   dung và TRÀN xuống đè panel "Kết luận". Ép vùng soạn thảo lấp đầy workplace và
   tự cuộn bên trong, huỷ minHeight 200px mặc định của Jodit. */
#divDocKetQua .divBody .jodit-wysiwyg {
    height: 100% !important;
    min-height: 0 !important;
    overflow: auto !important;
    box-sizing: border-box;
}
/* Sửa lỗi gõ tiếng Việt (Telex) nuốt khoảng trắng trước chữ "đ": "đ" = gõ d+d, IME
   gửi Backspace xoá 'd' rồi chèn 'đ'; lúc đó khoảng trắng thành trailing space và bị
   contenteditable (white-space:normal) collapse -> dính chữ ("màu đen" -> "màuđen").
   pre-wrap giữ nguyên mọi khoảng trắng, không bao giờ collapse -> hết nuốt space.
   Áp cho MỌI editor Jodit (Đọc kết quả, Kết luận, Đề nghị, <richtext>). */
.jodit-wysiwyg {
    white-space: pre-wrap;
}
/* Enter mặc định của Jodit (enter:'p') tạo <p> mới, mà <p> có lề trên/dưới ~1em ->
   mỗi lần xuống dòng chừa nguyên một dòng trống ("cách xa"). Bóp lề <p> còn ~5px để
   các đoạn cách nhẹ, dễ đọc; giữ <p> (không đổi sang <br>) nên không phá nội dung cũ
   và vẫn căn lề/justify theo đoạn được. Áp cho MỌI editor Jodit. */
.jodit-wysiwyg p {
    margin: 0 0 5px;
}
/* Ẩn thanh status bar của Jodit ("CHARS/WORDS/POWERED BY JODIT"): nó là phần tử
   dưới cùng của editor, tràn khỏi đáy panel 50% và ĐÈ lên tiêu đề "Kết luận" của
   panel dưới. Không cần thiết cho form báo cáo; ẩn đi để editor kết thúc gọn trong
   panel và trả lại phần chiều cao đó cho vùng soạn thảo. */
#divMainLapKetQua .jodit-status-bar {
    display: none !important;
}
/* Hai panel textarea (Kết luận/Đề nghị) cũng tự cắt nội dung tràn khi panel thu nhỏ. */
#divKetLuan,
#divDeNghi {
    overflow: hidden;
}

/* Trình soạn thảo richtext (Jodit) — "Đọc kết quả/Kết luận/Đề nghị".
   GÓP Ý fb-...879 (lần 2): trước đó ép vùng soạn thảo sang nền "giấy" sáng
   cố định (#f4f5f7) → KHÔNG đổi màu theo theme sáng/tối (user phản hồi:
   "text area chưa đổi màu theo sáng tối, HtmlEdit chưa được").
   → Cho TOÀN BỘ editor (cả vùng soạn thảo "html edit" lẫn textarea) đi
     ĐÚNG theo theme tối như các control khác: nền tối + chữ sáng. Khi bật
     theme sáng thì rule [data-theme='dark'] không áp dụng → tự về nền sáng
     chữ đậm (view dùng var(--main-body-color)). Đồng bộ light/dark thật sự. */
[data-theme='dark'] .jodit-container:not(.jodit-giay) {
    background-color: var(--grid-input-bg, #2b2d30) !important;
    border-color: var(--grid-input-border, #4a4d52) !important;
}
[data-theme='dark'] .jodit-container:not(.jodit-giay) .jodit-workplace,
[data-theme='dark'] .jodit-container:not(.jodit-giay) .jodit-wysiwyg,
[data-theme='dark'] .jodit-container:not(.jodit-giay) .jodit-wysiwyg_iframe {
    background-color: var(--grid-input-bg, #2b2d30) !important; /* nền tối theo theme */
    color: var(--grid-text, #e5e7eb) !important;              /* chữ sáng dễ đọc */
}
[data-theme='dark'] .jodit-container:not(.jodit-giay) .jodit-wysiwyg a { color: #7aa2ff !important; }
/* Nội dung cũ soạn ở theme SÁNG bị "nướng cứng" style nội tuyến vào từng <span>
   (color: rgb(5,89,82) + background-color: rgb(255,255,255) trắng) do paste/normalize.
   Ở theme TỐI, nền trắng đó nổi thành các băng/ô sáng trên nền editor tối, còn chữ teal
   thì tương phản kém. Ép span/font trong editor về nền trong suốt + chữ sáng theo theme
   để đọc được và đồng bộ giao diện. CHỈ tác động hiển thị lúc soạn ở theme tối — KHÔNG
   đổi nội dung lưu, nên in ấn và theme sáng vẫn giữ nguyên định dạng gốc. */
[data-theme='dark'] .jodit-container:not(.jodit-giay) .jodit-wysiwyg span,
[data-theme='dark'] .jodit-container:not(.jodit-giay) .jodit-wysiwyg font {
    background-color: transparent !important;
    color: var(--grid-text, #e5e7eb) !important;
}
/* Trình soạn MẪU IN (Thiết kế mẫu in, UIReport designprint.js — Jodit mang lớp .jodit-giay): vùng soạn là TỜ GIẤY,
   nền trắng chữ đen như bản in ra ở MỌI giao diện, và giữ nguyên màu chữ / nền người thiết kế đặt cho từng đoạn —
   các luật nền tối ở trên chừa nó ra. Thiếu dòng color thì chữ ăn màu sáng của trang tối, trắng trên giấy trắng. */
.jodit-giay .jodit-workplace,
.jodit-giay .jodit-wysiwyg {
    background-color: #fff !important;
    color: #000 !important;
}
/* Tiêu đề ba khung Đọc kết quả / Kết luận / Đề nghị. Nền tối: tiêu đề nằm trên nền trang, ô nhập sáng hơn nên tự
   tách. Nền sáng: tiêu đề và ô nhập cùng trắng, không phân biệt -> dải xám nhạt + vạch dưới (chỉ nền sáng). */
:root:not([data-theme='dark']) #divMainLapKetQua .divTitle {
    background: var(--grid-row-even);
    border-bottom: 1px solid var(--grid-border) !important;
}
/* "Kết luận" / "Đề nghị" là textarea thường — cũng theo theme tối:
   nền tối + chữ sáng (không còn ép "giấy" sáng cố định). */
[data-theme='dark'] #divMainLapKetQua .divBody textarea {
    background-color: var(--grid-input-bg, #2b2d30) !important;
    color: var(--grid-text, #e5e7eb) !important;
    border-color: var(--grid-input-border, #4a4d52) !important;
}
[data-theme='dark'] .jodit-toolbar__box,
[data-theme='dark'] .jodit-status-bar,
[data-theme='dark'] .jodit-toolbar-editor-collection {
    background-color: var(--grid-header-bg, #2b2d30) !important;
    border-color: var(--grid-input-border, #4a4d52) !important;
    color: var(--grid-text, #e5e7eb) !important;
}
[data-theme='dark'] .jodit-toolbar-button__button,
[data-theme='dark'] .jodit-toolbar-button__trigger,
[data-theme='dark'] .jodit-ui-group,
[data-theme='dark'] .jodit-status-bar a {
    color: var(--grid-text, #e5e7eb) !important;
}
[data-theme='dark'] .jodit-toolbar-button__button:hover,
[data-theme='dark'] .jodit-toolbar-button__trigger:hover {
    background-color: var(--grid-row-hover, #3a3d42) !important;
}
[data-theme='dark'] .jodit-icon { fill: var(--grid-text, #e5e7eb) !important; }
/* Hộp thoại popup của Jodit (vd dialog Paste: "Keep / Insert as Text / Insert only Text / Cancel")
   mặc định nền trắng (.jodit-dialog__panel background:#fff) -> ở theme tối thành hộp trắng lóa,
   các nút chữ đậm trên nền tối cũng vô hình. Cho toàn hộp thoại đi theo theme tối. */
[data-theme='dark'] .jodit-dialog__panel,
[data-theme='dark'] .jodit-dialog__header,
[data-theme='dark'] .jodit-dialog__content,
[data-theme='dark'] .jodit-dialog__footer {
    background-color: var(--grid-input-bg, #2b2d30) !important;
    color: var(--grid-text, #e5e7eb) !important;
    border-color: var(--grid-input-border, #4a4d52) !important;
}
[data-theme='dark'] .jodit-dialog__panel {
    border: 1px solid var(--grid-input-border, #4a4d52) !important;
}
[data-theme='dark'] .jodit-dialog__header-title,
[data-theme='dark'] .jodit-dialog__content * {
    color: var(--grid-text, #e5e7eb) !important;
}
/* Nút text (Insert as Text / Insert only Text / Cancel): chữ sáng, nền trong suốt, hover tối. */
[data-theme='dark'] .jodit-dialog .jodit-ui-button {
    color: var(--grid-text, #e5e7eb) !important;
    background-color: transparent !important;
}
[data-theme='dark'] .jodit-dialog .jodit-ui-button:hover:not(.jodit-ui-button_variant_primary) {
    background-color: var(--grid-row-hover, #3a3d42) !important;
}
/* Giữ nút chính (Keep) xanh nổi bật, chỉ ép chữ trắng cho chắc. */
[data-theme='dark'] .jodit-dialog .jodit-ui-button_variant_primary,
[data-theme='dark'] .jodit-dialog .jodit-ui-button_variant_primary .jodit-ui-button__text {
    color: #fff !important;
}
/* Ô nhập trong bảng xổ / hộp thoại của Jodit (chèn liên kết, ảnh…): luật chung `input` của master.css tô chữ
   --main-font-color (#fff) -> nền sáng gõ vào không thấy chữ. Trả về màu chữ của Jodit; nền tối đã có luật riêng mạnh hơn. */
.jodit-popup input,
.jodit-popup textarea,
.jodit-dialog input,
.jodit-dialog textarea {
    color: var(--jd-color-text, #222);
}
/* Bảng xổ của Jodit (gắn thẳng vào body) mặc định nền trắng: ở nền tối thành hộp trắng lóa, còn nhãn ô đánh dấu và danh
   sách phông / cỡ chữ ăn chữ sáng của trang nên mất hẳn. Cho nó theo nền tối qua biến của chính Jodit. */
[data-theme='dark'] .jodit-popup {
    --jd-color-background-default: var(--grid-input-bg, #2b2d30);
    --jd-color-border: var(--grid-input-border, #4a4d52);
    --jd-color-text: var(--grid-text, #e5e7eb);
}
[data-theme='dark'] .jodit-popup__content {
    color: var(--grid-text, #e5e7eb);
    border: 1px solid var(--grid-input-border, #4a4d52);
}

/* Popup lọc kiểu Excel của grid (.excel-filter-panel) hardcode nền trắng -> ở theme tối
   thành hộp trắng, chữ tiêu đề "Filter:" + danh sách giá trị (trắng) vô hình. Cho popup
   đi theo theme tối: nền tối + chữ sáng + viền tối, đồng bộ các control khác. */
[data-theme='dark'] .excel-filter-panel {
    background: var(--grid-input-bg, #2b2d30) !important;
    border-color: var(--grid-input-border, #4a4d52) !important;
    color: var(--grid-text, #e5e7eb) !important;
}
[data-theme='dark'] .excel-filter-panel .filter-values {
    border-color: var(--grid-input-border, #4a4d52) !important;
}
[data-theme='dark'] .excel-filter-panel input,
[data-theme='dark'] .excel-filter-panel select {
    background: var(--grid-input-bg, #2b2d30) !important;
    color: var(--grid-text, #e5e7eb) !important;
    border-color: var(--grid-input-border, #4a4d52) !important;
}
/* Lịch chọn ngày (flatpickr) — popup trắng khi mở ô ngày trong theme tối. */
[data-theme='dark'] .flatpickr-calendar {
    background: var(--grid-input-bg, #2b2d30) !important;
    color: var(--grid-text, #e5e7eb) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.6) !important;
    border: 1px solid var(--grid-input-border, #4a4d52) !important;
}
[data-theme='dark'] .flatpickr-months .flatpickr-month,
[data-theme='dark'] .flatpickr-current-month,
[data-theme='dark'] .flatpickr-weekday,
[data-theme='dark'] .flatpickr-day,
[data-theme='dark'] .flatpickr-time input,
[data-theme='dark'] .flatpickr-time .flatpickr-am-pm {
    color: var(--grid-text, #e5e7eb) !important;
    background: transparent !important;
}
[data-theme='dark'] .flatpickr-day:hover,
[data-theme='dark'] .flatpickr-day.today {
    background: var(--grid-row-hover, #3a3d42) !important;
    border-color: var(--grid-input-border, #4a4d52) !important;
}
[data-theme='dark'] .flatpickr-day.selected {
    background: var(--constrast-color, #ff9a5c) !important;
    border-color: var(--constrast-color, #ff9a5c) !important;
    color: #1f2022 !important;
}
[data-theme='dark'] .flatpickr-day.flatpickr-disabled,
[data-theme='dark'] .flatpickr-day.prevMonthDay,
[data-theme='dark'] .flatpickr-day.nextMonthDay { color: #6b7075 !important; }
[data-theme='dark'] .flatpickr-monthDropdown-months,
[data-theme='dark'] .flatpickr-monthDropdown-month { background: var(--grid-input-bg, #2b2d30) !important; color: var(--grid-text, #e5e7eb) !important; }
[data-theme='dark'] .flatpickr-months .flatpickr-prev-month svg,
[data-theme='dark'] .flatpickr-months .flatpickr-next-month svg { fill: var(--grid-text, #e5e7eb) !important; }

/* Tab chưa chọn (.buttondeactive) hard-code nền #fff -> lóa trong theme tối. */
[data-theme='dark'] .buttondeactive {
    background: var(--grid-header-bg, #2b2d30) !important;
    color: var(--main-font-color, #fff) !important;
}

/* ════════════════════════════════════════════════════════════════════
   BẢNG (Tabulator) — NGUỒN GỐC "LÓA" CHÍNH CÒN SÓT.
   tabulator_bootstrap5.min.css hard-code:  .tabulator-row{background:#fff!important}
   + .tabulator-header/.tabulator-col nền trắng → trong theme tối các DÒNG
   bảng (vd TEST001/TEST002 ở góp ý) trắng chói. Khối dưới phủ TOÀN BỘ bề
   mặt bảng theo biến --grid-* của theme tối. Tiền tố [data-theme='dark']
   + !important nên thắng cả !important của bản gốc.
   ════════════════════════════════════════════════════════════════════ */
[data-theme='dark'] .tabulator,
[data-theme='dark'] .tabulator-tableholder,
[data-theme='dark'] .tabulator-table {
    background-color: var(--grid-bg, #26282b) !important;
    color: var(--grid-text, #e5e7eb) !important;
    border-color: var(--grid-border, #3a3d42) !important;
}
/* Dòng dữ liệu (kể cả bản gốc dùng background:#fff!important) */
[data-theme='dark'] .tabulator-row,
[data-theme='dark'] .tabulator .tabulator-row {
    background-color: var(--grid-bg, #26282b) !important;
    color: var(--grid-text, #e5e7eb) !important;
    border-color: var(--grid-border, #3a3d42) !important;
}
[data-theme='dark'] .tabulator-row.tabulator-row-even,
[data-theme='dark'] .tabulator .tabulator-row.tabulator-row-even {
    background-color: var(--grid-row-even, #2f3134) !important;
}
[data-theme='dark'] .tabulator-row.tabulator-selectable:hover,
[data-theme='dark'] .tabulator .tabulator-row.tabulator-selectable:hover {
    background-color: var(--grid-row-hover, #3a3d42) !important;
}
[data-theme='dark'] .tabulator-row.tabulator-selected,
[data-theme='dark'] .tabulator .tabulator-row.tabulator-selected,
[data-theme='dark'] .tabulator-row.tabulator-selected:hover {
    /* Dòng chọn tối: nền riêng đậm hơn hover để phân biệt rõ (không trùng màu hover). */
    background-color: var(--grid-row-selected, #143f3c) !important;
}
/* Ô (cell) + ô đông cứng (frozen) thừa kế nền nên cũng phải tối */
[data-theme='dark'] .tabulator-cell,
[data-theme='dark'] .tabulator-row .tabulator-cell {
    color: var(--grid-text, #e5e7eb) !important;
    border-color: var(--grid-border, #3a3d42) !important;
}
[data-theme='dark'] .tabulator-row .tabulator-cell.tabulator-frozen {
    background-color: inherit !important;
}
/* Tiêu đề cột + filter (bản gốc nền trắng) */
[data-theme='dark'] .tabulator .tabulator-header,
[data-theme='dark'] .tabulator .tabulator-header .tabulator-col,
[data-theme='dark'] .tabulator .tabulator-col-content,
[data-theme='dark'] .tabulator .tabulator-header-filter {
    background-color: var(--grid-header-bg, #2b2d30) !important;
    color: var(--grid-text, #e5e7eb) !important;
    border-color: var(--grid-border, #3a3d42) !important;
}
[data-theme='dark'] .tabulator .tabulator-col-title,
[data-theme='dark'] .tabulator .tabulator-header .tabulator-col .tabulator-col-title {
    color: var(--grid-text, #e5e7eb) !important;
}
/* Ô input filter trên header */
[data-theme='dark'] .tabulator .tabulator-header-filter input,
[data-theme='dark'] .tabulator .tabulator-header-filter select {
    background-color: var(--grid-input-bg, #2b2d30) !important;
    color: var(--grid-text, #e5e7eb) !important;
    border-color: var(--grid-input-border, #4a4d52) !important;
}
/* Menu chuột phải dựng tay (.grid-ctx-menu) — đồng bộ theme tối */
[data-theme='dark'] .grid-ctx-menu {
    background-color: var(--grid-header-bg, #2b2d30) !important;
    color: var(--grid-text, #e5e7eb) !important;
    border: 1px solid var(--grid-border, #3a3d42) !important;
}
[data-theme='dark'] .grid-ctx-menu .grid-ctx-item:hover {
    background-color: var(--grid-row-hover, #3a3d42) !important;
}