.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;
}

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

input.form-control {
    padding: 2px 8px !important;
    height: 30px !important;
    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;
}

.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%;
}

.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;
}

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

    .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;
    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;
}

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

.ts-wrapper .ts-control {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap !important;
    min-height: 32px;
    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: 32px !important;
    height: 32px !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: 32px !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;
    min-height: 32px !important;
    height: 32px !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);
}
.modal-content .modal-header {
    border-bottom-color: var(--grid-border);
}
/* Modal "Cài đặt mẫu kết quả": header quá cao -> giảm padding dọc + bỏ margin của h5.
   Scope theo id modal (divCaiDatMauKetQua_bs_modal) nên không đụng modal khác. */
#divCaiDatMauKetQua_bs_modal .modal-header {
    padding-top: .35rem;
    padding-bottom: .35rem;
    align-items: center;
}
#divCaiDatMauKetQua_bs_modal .modal-header .modal-title {
    margin-bottom: 0;
}
#divCaiDatMauKetQua_bs_modal .modal-header .close {
    padding-top: .35rem;
    padding-bottom: .35rem;
    margin-top: -.35rem;
    margin-bottom: -.35rem;
}
.modal-content .modal-footer {
    border-top-color: var(--grid-border);
}
/* 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;
        }

.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;
}

    .ts-dropdown .option {
        padding: 9px 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);
}
[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 {
    height: 100% !important;
    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;
}
/* 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;
}
#divDocKetQua .divBody .jodit-workplace {
    flex: 1 1 auto !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;
}
/* Ẩ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 {
    background-color: var(--grid-input-bg, #2b2d30) !important;
    border-color: var(--grid-input-border, #4a4d52) !important;
}
[data-theme='dark'] .jodit-workplace,
[data-theme='dark'] .jodit-wysiwyg,
[data-theme='dark'] .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-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-wysiwyg span,
[data-theme='dark'] .jodit-wysiwyg font {
    background-color: transparent !important;
    color: var(--grid-text, #e5e7eb) !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;
}

/* 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;
}