body[data-zoom="125"] {
    font-size: 14px;
}

    body[data-zoom="125"] label {
        font-size: 14px;
        font-weight: 400;
    }

    body[data-zoom="125"] .page-title-box h4 {
        font-weight: 600;
        font-size: 17px !important;
    }

    body[data-zoom="125"] .page-title-right ol li {
        font-size: 14px
    }

    body[data-zoom="125"] footer span {
        font-size: 13px;
        font-weight: 400;
    }

.text-primary {
    color: #1967B2 !important;
}
/* --Validated Phone/Email-- */
.validate-error {
    border: 1px solid #dc3545 !important;
}

.validate-success {
    border: 1px solid #28a745 !important;
}
/* ------------------ */
.box-canh-bao {
    position: relative;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    padding: 20px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer
}

    .box-canh-bao:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    }

/* Icon watermark cho từng ô */
.ht-canh-bao .col-xl-2:nth-child(1) .box-canh-bao::after {
    content: "\f00c"; /* file-alt */
}

.ht-canh-bao .col-xl-2:nth-child(2) .box-canh-bao::after {
    content: "\f274"; /* exclamation-triangle */
}

.ht-canh-bao .col-xl-2:nth-child(3) .box-canh-bao::after {
    content: "\f54e"; /* credit-card */
}

.ht-canh-bao .col-xl-2:nth-child(4) .box-canh-bao::after {
    content: "\f495"; /* boxes */
}

.ht-canh-bao .col-xl-2:nth-child(5) .box-canh-bao::after {
    content: "\f017"; /* clock */
}

.ht-canh-bao .col-xl-2:nth-child(6) .box-canh-bao::after {
    content: "\f53c";
}
/*Input Type=Date PlaceHolder*/
.date-wrapper {
    position: relative;
    display: inline-block;
    width: 165px;
}

    .date-wrapper input[type="date"] {
        position: relative;
        z-index: 2;
        background: transparent;
        color: transparent; /* Ẩn chữ mặc định */
    }

        /* Khi có giá trị hoặc focus thì hiện text bình thường */
        .date-wrapper input[type="date"]:valid,
        .date-wrapper input[type="date"]:focus {
            color: #000;
        }

    /* Placeholder tùy chỉnh */
    .date-wrapper .custom-placeholder {
        position: absolute;
        top: 50%;
        left: 12px;
        transform: translateY(-50%);
        color: #aaa;
        pointer-events: none;
        font-size: 14px;
        z-index: 1;
    }

    /* Khi input có giá trị hoặc focus, ẩn placeholder */
    .date-wrapper input[type="date"]:valid + .custom-placeholder,
    .date-wrapper input[type="date"]:focus + .custom-placeholder {
        display: none;
    }
/* Style chung cho icon watermark */
.box-canh-bao::after {
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    font-size: 40px;
    position: absolute;
    bottom: 10px;
    right: 10px;
    pointer-events: none;
    color: #1967B2;
}

.activity-span {
    font-size: 12px;
    color: #999;
    margin-top: 3px;
}
/* ------------------ */
.menu-first {
    padding-left: 0 !important;
}
/* Đặt counter cho danh sách trong #sidebarCanhBao */
.danhso-menu2 ul {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
    counter-reset: li; /* reset đếm từ 1 */
}

.danhso-menu2 li.nav-item {
    counter-increment: li; /* mỗi li +1 */
}

    /* Thêm số thứ tự trước nội dung link */
    .danhso-menu2 li.nav-item > .nav-link::before {
        content: counter(li) ". ";
        font-weight: 400; /* tùy chọn: làm đậm số */
        opacity: 0.8 !important; /* tùy chọn */
        padding-right: 5px;
    }

.navbar-menu .navbar-nav .nav-sm .nav-link:hover:before {
    background-color: transparent !important;
}

.customizer-setting {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1100;
}

.hidden {
    display: none;
}

.cb-header {
    height: 40px;
    line-height: 20px;
}

/* Hoạt động gần đây */
.activity-list {
    list-style: none;
    position: relative;
    padding-left: 0;
    margin: 0;
    height: 443px;
}

    .activity-list::before {
        content: "";
        position: absolute;
        top: 3px;
        left: 13px;
        bottom: 0;
        width: 1px;
        background: #e6e6e6;
        z-index: 0;
    }

.activity-item {
    position: relative;
    margin-bottom: 23px;
    z-index: 1;
}

.activity-icon {
    position: absolute;
    left: 0;
    top: 2px;
    background: #fff;
    border: 1px solid #1967B2;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #1967B2;
    z-index: 2;
}

    .activity-icon.check {
        color: #27ae60;
    }

.activity-content {
    margin-left: 40px;
}

    .activity-content a {
        color: #1967B2;
        text-decoration: none;
        font-weight: 500;
    }

        .activity-content a:hover {
            text-decoration: underline;
        }

.activity-time {
    display: block;
    font-size: 12px;
    color: #999;
    margin-top: 3px;
}

/* Đổi màu nền và màu chữ của header DataTable */
table.dataTable thead th {
    background-color: #0053a5; /* Màu nền */
    color: white; /* Màu chữ */
    text-align: center; /* Căn giữa nội dung */
    vertical-align: middle;
}

    /* Tùy chọn: đổi màu khi hover vào header */
    table.dataTable thead th:hover {
        background-color: #0053a5; /* Màu nền khi hover */
    }
/* Màu nền & chữ cho header */
#DataTable_wrapper .dataTables_scrollHead thead th,
#DataTable_wrapper div.DTFC_LeftWrapper thead th {
    background: #0053a5; /* tùy màu bạn thích */
    color: #fff;
}

/* Giữ chiều cao/giữa chữ đồng nhất */
#DataTable_wrapper .dataTables_scrollHead thead th,
#DataTable_wrapper div.DTFC_LeftWrapper thead th,
#DataTable_wrapper .dataTables_scrollBody tbody td {
    vertical-align: middle;
}

/* Tránh vỡ dòng khi có scroll ngang/fixed columns */
#DataTable_wrapper table.dataTable th,
#DataTable_wrapper table.dataTable td {
    white-space: nowrap;
}

/* (Tuỳ chọn) tạo đường viền/đổ bóng ngăn cách phần cột cố định */
#DataTable_wrapper .DTFC_LeftBodyLiner,
#DataTable_wrapper .DTFC_LeftHeadWrapper {
    box-shadow: 2px 0 0 rgba(0,0,0,.06);
    z-index: 2;
}

#DataTable td:last-child {
    white-space: nowrap;
    text-align: center;
}
/* căn giữa và gọn cột action cuối */
#DataTable td:last-child, #DataTable th:last-child {
    text-align: center;
}
/* Khóa cột cuối 90px cho cả header/body, kể cả bảng clone của FixedColumns */
/*#DataTable thead th:last-child,
#DataTable tbody td:last-child,
#DataTable_wrapper .dtfc-has-right thead th:last-child,
#DataTable_wrapper .dtfc-has-right tbody td:last-child {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
    text-align: center;
    padding-left: 6px;
    padding-right: 6px;
}*/

.dtfc-fixed-right .hstack {
    align-items: center;
    justify-content: center;
}

/* tô màu cho dòng đã chọn – áp vào CELLS để thắng Bootstrap */
#DataTable tbody tr.selected > td,
#DataTable_wrapper .dtfc-has-left tbody tr.selected > td,
#DataTable_wrapper .dtfc-has-left tbody tr.selected > td {
    background-color: #e6f2ff !important;
    /* (tuỳ chọn) */
    /* color: #0b5ed7; */
}

/* nếu dùng .table-striped: override luôn các rule nth-of-type của Bootstrap */
#DataTable.table.table-striped tbody tr.selected:nth-of-type(odd) > td,
#DataTable_wrapper .dtfc-has-left .table.table-striped tbody tr.selected:nth-of-type(odd) > td,
#DataTable_wrapper .dtfc-has-left .table.table-striped tbody tr.selected:nth-of-type(odd) > td {
    background-color: #e6f2ff !important;
}

/* (tuỳ chọn) đổi màu border cho rõ hơn */
#DataTable tbody tr.selected > td {
    box-shadow: inset 0 0 0 9999px rgba(13,110,253,0.06);
}
/* Áp dụng cho cả header và body */
#DataTable tbody td,
#DataTable thead th {
    padding-top: 5px; /* khoảng cách trên */
    padding-bottom: 5px; /* khoảng cách dưới */
    height: 30px; /* chiều cao tối thiểu */
}

/* Nếu dùng FixedColumns, áp cho cả bảng clone bên trái/phải */
.dtfc-has-left tbody td,
.dtfc-has-right tbody td,
.dtfc-has-left thead th,
.dtfc-has-right thead th {
    padding-top: 5px;
    padding-bottom: 5px;
    height: 23px;
}

.tabulator .tabulator-tableholder .tabulator-table.border-bottom {
    border-bottom: 1px solid #999;
}

.tabulator .tabulator-header, .tabulator .tabulator-header .tabulator-col {
    background-color: #0053a5;
    background: #0053a5 !important;
}

    .tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover {
        background-color: #1967B2;
    }

    .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
        color: #fff;
        font-weight: 400;
        font-size: 13px;
    }

    .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-col-sorter {
        color: #fff;
    }

        .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
            border-bottom: 6px solid #fff;
        }

    .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="descending"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
        border-top: 6px solid #fff;
        color: #fff;
    }

    .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="ascending"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
        border-bottom: 6px solid #fff;
    }

.table > tbody > tr:last-child td {
    border-bottom: 1px solid #dedede;
}

.tabulator .tabulator-tableholder .tabulator-table .tabulator-row:last-child .tabulator-cell {
    border-bottom: 1px solid #aaa;
}

.tabulator .tabulator-footer .tabulator-calcs-holder {
    border-bottom: none;
    border-top: none;
}

.tabulator-row.tabulator-row-even {
    background: #f4f4f4;
    background-color: #f4f4f4;
}

.tabulator .tabulator-tableholder {
    background: #fff;
}

.tabulator {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

    .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-right, .tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-right {
        border-left: none;
    }

.bod-left {
    border-left: none;
}

table.table-bordered.dataTable td {
    padding: .35rem .5rem;
    line-height: 20px;
    border-color: #ccc;
}

.dataTables_paginate .pagination {
    margin-bottom: 5px;
}

@media (hover: hover) and (pointer: fine) {
    .tabulator-row.tabulator-selectable:hover {
        background-color: #eee;
        cursor: pointer;
        color: #1967b2;
    }
}

.txtsearch {
    max-height: 30px;
    min-width: 305px;
}

.modal-dialog .modal-body .card-body {
    padding: 0 !important;
}

.dataTables_length label {
    margin-bottom: 0;
}

.dataTables_length select {
    max-height: 30px;
}

.tabulator-row.tabulator-group {
    background: #dbdef1 !important;
}

.form-row label {
    white-space: nowrap; /* Không cho xuống dòng */
}

.disabled-check {
    opacity: 0.5;
    pointer-events: none;
}

#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: none;
}

#loadingfont-spinner {
    color: aquamarine;
    font-size: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.btn-form {
    padding-top: 27px;
}

.frmInsertDataExcel .h-100vh {
    height: calc(100vh - 260px)
}

.frm-mappingCol .item-mapping {
    overflow-y: auto;
    height: calc(100vh - 315px);
}

.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 20px;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 16px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
    }

input:checked + .slider {
    background-color: green;
}

    input:checked + .slider:before {
        transform: translateX(20px);
    }

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    background-color: #0053a5;
    color: #fff;
    border: 1px solid #1967B2;
}

.dust-class {
    box-sizing: border-box;
    position: relative;
}

    .dust-class label {
        display: inline-block;
        position: absolute;
        top: -10px;
        left: 14px;
        padding: 0 6px;
        background: white;
        color: #666;
        z-index: 8;
        border-radius: 10px;
        font-size: 12px;
        margin: 0;
    }

/* ======= HOST: bật center thật sự cho modal ======= */
.modal-43-host {
    /* bỏ margin top/bottom mặc định và center dialog */
    --bs-modal-margin: 0;
    /*display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;*/
}

/* ===== Base 4:3, KHÔNG dùng transform ở .modal-dialog ===== */
.modal-43 {
    /* kích thước thiết kế mặc định */
    --design-w: 1200px;
    --design-h: calc(var(--design-w) * 0.75); /* 4:3 */
    --gutter: 24px; /* chừa mép với viewport */
    /* tính scale theo viewport */
    --scale-w: calc((100vw - var(--gutter)*2) / var(--design-w));
    --scale-h: calc((100vh - var(--gutter)*2) / var(--design-h));
    --scale: min(var(--scale-w), var(--scale-h), 1);
    /* quan trọng: dialog mang KÍCH THƯỚC đã scale -> Bootstrap căn giữa chính xác */
    width: calc(var(--design-w) * var(--scale));
    height: calc(var(--design-h) * var(--scale));
    max-width: none;
    margin: auto; /* căn giữa ngang */
}

    /* đảm bảo căn giữa dọc, không còn lệch top */
    .modal-43.modal-dialog-centered {
        min-height: 100vh;
        align-items: center;
    }

/* Hộp bên trong mới scale */
.modal-43__box {
    width: var(--design-w);
    height: var(--design-h);
    transform: scale(var(--scale));
    transform-origin: top left; /* khớp kích thước đã scale của .modal-dialog */
}

/* Nội dung 4:3 cố định; cho phép cuộn nếu cần */
.modal-43 .modal-content {
    width: 100%;
    height: 100%;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

/* ===== Kích thước giống Bootstrap ===== */
.modal-43--sm {
    --design-w: 400px;
    --design-h: calc(var(--design-w)*0.75);
    max-width: var(--design-w);
}

.modal-43--md {
    --design-w: 600px;
    --design-h: calc(var(--design-w)*0.75);
    max-width: var(--design-w);
}

.modal-43--lg {
    --design-w: 800px;
    --design-h: calc(var(--design-w)*0.75);
    max-width: var(--design-w);
}

.modal-43--xl {
    --design-w: 1200px;
    --design-h: calc(var(--design-w)*0.75);
}

.modal-43--xxl {
    --design-w: 1440px;
    --design-h: calc(var(--design-w)*0.75);
}

/* ===== Responsive tinh chỉnh ===== */
@media (max-width: 1536px) {
    .col-xl-3 {
        flex: 0 0 auto;
        width: 28%;
    }
}

@media (max-width: 1399.98px) {
    .modal-43--xl {
        --design-w: 1100px;
    }
}

@media (max-width: 1199.98px) {
    .modal-43--xl {
        --design-w: 1000px;
    }

    .modal-lg, .modal-xl {
        --design-h: calc(var(--in-modal-width)*0.75);
        max-height: calc(var(--in-modal-width) * 0.75);
        --in-modal-height: calc(var(--in-modal-width) * 0.75);
    }
}

@media (max-width: 991.98px) {
    .modal-43--xl {
        --design-w: 880px;
    }

    .modal-43--lg {
        --design-w: 820px;
    }

    .modal-lg, .modal-xl {
        --design-h: calc(var(--in-modal-width)*0.75);
        max-height: calc(var(--in-modal-width) * 0.75);
        --in-modal-height: calc(var(--in-modal-width) * 0.75);
    }
}

@media (max-width: 767.98px) {
    .modal-43--lg {
        --design-w: 680px;
    }

    .modal-43--sm {
        --design-w: 520px;
    }
}

@media (max-width: 575.98px) {
    .modal-43 {
        --gutter: 16px;
    }

    .modal-43--sm {
        --design-w: 90vw;
    }
}
/* Giữ hiệu ứng mượt */
.modal.fade .modal-dialog.modal-43 {
    will-change: transform;
    margin: 30px auto;
}


@media (min-width:576px) {
    .modal {
        --in-modal-margin: 1.75rem;
        --in-modal-box-shadow: 0 1px 2px rgba(56, 65, 74, 0.15)
    }

    .modal-md {
        --in-modal-width: 300px;
        --design-h: calc(var(--in-modal-width)*0.75);
    }
}

@media (min-width:992px) {
    .modal-md {
        --in-modal-width: 720px;
        --design-h: calc(var(--in-modal-width)*0.75);
    }

    .modal-dialog {
        --design-h: calc(var(--in-modal-width)*0.75);
        max-height: calc(var(--in-modal-width) * 0.75);
        --in-modal-height: calc(var(--in-modal-width) * 0.75);
    }
}

.erp-tabs {
    padding-left: 0;
}

    .erp-tabs li {
        display: inline-block;
        padding: 4px;
        background: #eee;
        cursor: pointer;
        font-size: 13px;
        font-weight: 400;
        margin-right: 3px;
    }

        .erp-tabs li span {
            padding: 4px;
        }

        .erp-tabs li.active {
            font-weight: bold;
        }


.erp-tabs {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 0;
    margin-bottom: 0;
}

    .erp-tabs li {
        background: #fff;
        /*border-radius: 6px 6px 0 0;*/
        cursor: pointer;
        position: relative;
        font-weight: 400;
        border: var(--in-border-width) solid var(--in-border-color);
        border-bottom: none;
    }

        .erp-tabs li.active {
            background: #1967B2;
            border: var(--in-border-width) solid var(--in-border-color);
            border-bottom: none;
            color: #fff;
        }

        .erp-tabs li .close-btn {
            margin-left: 8px;
            opacity: 0;
        }

        .erp-tabs li:hover .close-btn {
            opacity: 1;
        }

.tab-content {
    /* background-color: white;*/
}
/*Hóa Đơn Mua Hàng*/
/* ----- Nội dung ----- */
.erp-doc-content {
    padding: 16px;
    background: #fff;
    border: var(--in-border-width) solid var(--in-border-color);
    height: calc(100vh - 170px);
    overflow-y: auto;
}

/* Phần toolbar */
.hdmh-toolbar button {
    margin-right: 8px;
}

/* Box tổng tiền bên phải */
.hdmh-summary-box {
    background: #fafafa;
    border: 1px solid #e2e2e2;
    padding: 12px;
    border-radius: 4px;
}

    .hdmh-summary-box label {
        font-size: 13px;
    }

/* Thanh nút cuối */
.erp-btn-bar button {
    margin-right: 8px;
}

body[data-zoom="125"] .tab-body label {
    font-size: 13px;
    font-weight: 400;
}

.lbluser-form {
    color: #333;
}

.user-form {
    color: #0053a5;
}

body[data-zoom="125"] .tab-body .form-control {
    padding: .4rem .5rem !important;
    line-height: 1.3;
    font-size: 12px;
}

.form-select, .form-control {
    line-height: 1.1;
    font-size: 14px;
}

.btn-list {
    padding-top: 20px;
}

input.tnumber, input.tnumberDVT {
    text-align: right;
}

/* Style table nhật ký login   */
#loginTable th:nth-child(1) {
    width: 60px;
}

#loginTable th:nth-child(2) {
    width: 100px;
}

.form-control, .form-select {
    border: var(--in-border-width) solid #cecece;
    min-height: calc(1.1em + 1rem + calc(var(--in-border-width) * 2));
}

.select2-container .select2-selection--single {
    border: var(--in-border-width) solid #cecece;
    height: calc(1.1em + 1rem + calc(var(--in-border-width) * 2));
}

.no-wrap {
    white-space: nowrap;
}

.form-label {
    margin-bottom: 0;
}

.form-control:disabled {
    background-color: #fff;
}

.form-control:read-only {
    cursor: no-drop;
}

.form-control.form-select:read-only {
    cursor: pointer;
}
.form-select-control:read-only {
    cursor: pointer;
}
.input-group-text {
    border: var(--in-border-width) solid #cecece;
}

.fillter-login .btn-filter {
    /*padding: 7px 12px;*/
    margin-top: 6px;
}
/*button.dt-button {
    padding: .5em 1.2em;
    padding-top: .45rem;
    padding-bottom: .45rem;
}*/
#tblNKLogin .dt-buttons {
    position: absolute;
    top: -42px;
}

tr {
    cursor: pointer;
}

tbody tr.selected td {
    background-color: #e6f2ff;
}
/* mặc định */
:root {
    --nklogin-scroll: calc(100vh - 350px);
}
/* khi zoom 125% */
body[data-zoom="125"] {
    --nklogin-scroll: calc(100vh - 323px);
}

.select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 32px;
}
/*.table thead tr th {
    padding: .35rem .4rem;
}*/
body[data-zoom="125"] tr th {
    font-size: 13px;
    font-weight: 500;
    /*padding: 6px 4px;*/
}

body[data-zoom="125"] tr td {
    font-size: 13px;
    font-weight: 400;
}

body[data-zoom="125"] .form-select, body[data-zoom="125"] .form-control {
    line-height: 15px;
    font-size: 13px;
}

body[data-zoom="125"] .select2-container .select2-selection--single {
    font-size: 13px;
}

body[data-zoom="125"] .col-form-label {
    padding: 3px 5px 3px 5px;
    /*    top: -13px;*/
}
/* mặc định */
:root {
    --dmhanghoa-scroll: calc(100vh - 430px)
}
/* khi zoom 125% */
body[data-zoom="125"] {
    --dmhanghoa-scroll: calc(100vh - 419px);
}

.fillter-tophh {
    background-color: #fff;
}

.input-group-text {
    padding: .3rem .5rem !important;
    line-height: 1.3;
    font-size: 13px;
}

body[data-zoom="125"] .dust-class label {
    font-size: 11px;
}

.fillter-ch {
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(56, 65, 74, .15);
}

    .fillter-ch .fill-ch {
        padding-left: 20px;
        padding-right: 15px;
    }

    .fillter-ch .fill-date-dk {
        padding-left: 6px;
    }

.hanghoa-dauky .card {
    border-radius: 0 0 0.25rem 0.25rem;
}

body[data-zoom="125"] .btn {
    font-size: 12px;
}

.modalDanhSachHangHoa .breadcrumb-product {
    display: none;
}

.modalDanhSachHangHoa .card-body {
    padding: 0;
}

/* mặc định */
:root {
    --danhmuc-scroll: calc(100vh - 354px);
}
/* khi zoom 125% */
body[data-zoom="125"] {
    --danhmuc-scroll: calc(100vh - 348px);
}

    body[data-zoom="125"] .form-switch-lg .form-check-input {
        width: 36px;
        height: 17px;
    }

/* mặc định */
:root {
    --baocao2-scrollY: calc(100vh - 444px);
}
/* khi zoom 125% */
body[data-zoom="125"] {
    --baocao2-scrollY: calc(100vh - 432px);
}
/* mặc định */
:root {
    --bcchitietchi-scroll: calc(100vh - 346px);
}
/* khi zoom 125% */
body[data-zoom="125"] {
    --bcchitietchi-scroll: calc(100vh - 336px);
}
/* mặc định */
:root {
    --BCChitietthu-scroll: calc(100vh - 346px);
}
/* khi zoom 125% */
body[data-zoom="125"] {
    --BCChitietthu-scroll: calc(100vh - 336px);
}
:root {
    --Baocao-height-scroll: calc(100vh - 311px);
}
/* khi zoom 125% */
body[data-zoom="125"] {
    --Baocao-height-scroll: calc(100vh - 301px);
}
.btn-addnew {
    max-height: 30px;
}

/* mặc định DM KH */
:root {
    --dmkh-scroll: calc(100vh - 390px);
}
/* khi zoom 125% */
body[data-zoom="125"] {
    --dmkh-scroll: calc(100vh - 375px);
}

.setup-system {
    padding-top: 20px;
}

.tbQuyenKhoanMuc thead td {
    padding: .35rem .6rem;
}

.tbQuyenCanhBao, .frmQuyenChucNang {
    margin-top: 8px;
}

.date-field {
    position: relative;
    display: inline-block;
}

    .date-field input.form-control {
        position: relative;
        z-index: 2;
        background: transparent;
    }

    .date-field .fake-ph {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        color: #6c757d; /* màu placeholder */
    }
    /* Khi có giá trị hợp lệ thì ẩn “placeholder giả” */
    .date-field input:required:valid + .fake-ph {
        display: none;
    }

/*Style chỉnh form chứng từ*/
/* Toàn khung form chiếm trọn chiều cao màn hình */
.erp-doc-content {
    display: flex;
    flex-direction: column;
    max-height: 100vh; /* hoặc height:100vh nếu chắc chắn luôn full màn hình */
    /* height: calc(100vh - 168px); */
    background: #fff;
}

/* Header luôn ở trên khi phần thân cuộn */
.frmheader {
    position: sticky;
    top: 0;
    z-index: 9; /* cao hơn nội dung */
    background: #fff;
    /*border-bottom: 1px solid #dee2e6;*/
}

/* Thân co giãn và cuộn */
.frmbody {
    flex: 1 1 auto;
    overflow: auto;
    padding-bottom: .5rem;
}

/* Footer dính chân màn hình */
.frmfooter {
    position: relative; /* dính theo viewport vì container cao = 100vh */
    bottom: 0;
    z-index: 8;
    background: #fff;
    border-top: 1px solid #dee2e6;
    /*box-shadow: 0 -2px 8px rgba(0,0,0,.04);*/
}

    /* Tùy chọn: làm hàng nút cuối footer nổi bật, không tràn biên */
    .frmfooter .btn-datatable {
        white-space: nowrap;
    }

body[data-zoom="125"] .frmbody {
    overflow: visible;
}

.grow-area {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

    .grow-area > textarea {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
    }

.was-validated .form-control:valid,
.was-validated .form-select:valid {
    border-color: #0a930a !important;
    background-image: none !important;
}

.modal-suachua .erp-doc-content {
}

.tab-suachua .nav-link {
    padding: 5px 10px;
}

.icon-small-alert {
    transform: scale(0.7); /* thu nhỏ icon */
}

.swal2-container.swal2-center.swal2-backdrop-show {
    z-index: 20000 !important; /* backdrop */
}

.swal2-popup {
    z-index: 20001 !important; /* popup */
}

/*Style Report*/

/* CỘT CỐ ĐỊNH */
.col-fixed-80 {
    flex: 0 0 80px;
    max-width: 80px;
}

.col-fixed-130 {
    flex: 0 0 130px;
    max-width: 130px;
}

.col-fixed-150 {
    flex: 0 0 150px;
    max-width: 150px;
}

.col-fixed-140 {
    flex: 0 0 140px;
    max-width: 140px;
}

.col-fixed-160 {
    flex: 0 0 160px;
    max-width: 160px;
}

.col-fixed-170 {
    flex: 0 0 170px;
    max-width: 170px;
}

.col-fixed-180 {
    flex: 0 0 180px;
    max-width: 180px;
}

.col-fixed-200 {
    flex: 0 0 200px;
    max-width: 200px;
}

.col-fixed-215 {
    flex: 0 0 215px;
    max-width: 215px;
}

.col-fixed-220 {
    flex: 0 0 220px;
    max-width: 220px;
}

.col-fixed-230 {
    flex: 0 0 230px;
    max-width: 230px;
}

.col-fixed-234 {
    flex: 0 0 234px;
    max-width: 234px;
}

.col-fixed-250 {
    flex: 0 0 250px;
    max-width: 250px;
}

.col-fixed-265 {
    flex: 0 0 265px;
    max-width: 265px;
}

.col-fixed-280 {
    flex: 0 0 280px;
    max-width: 280px;
}

.col-fixed-300 {
    flex: 0 0 300px;
    max-width: 300px;
}

.col-fixed-320 {
    flex: 0 0 320px;
    max-width: 320px;
}

.col-fixed-400 {
    flex: 0 0 400px;
    max-width: 400px;
}

.col-fixed-420 {
    flex: 0 0 420px;
    max-width: 420px;
}

.pe-10 {
    padding-right: 10px;
}

.pe-35 {
    padding-right: 35px;
}

.pe-20 {
    padding-right: 20px;
}

.pe-7 {
    padding-right: 7px;
}

/* CỘT GIÃN (Cửa hàng, Nhà cung cấp) */
.col-grow {
    flex: 1 1 0;
    min-width: 360px;
}
/* có thể đổi 360px theo layout của bạn */

/* Control trong cột cố định phải fill 100% chiều rộng cột */
.col-fixed-160 .form-control, .col-fixed-160 .form-select {
    width: 100%;
}

.col-fixed-180 .form-control, .col-fixed-180 .form-select {
    width: 100%;
}

.col-fixed-215 .form-control, .col-fixed-215 .form-select {
    width: 100%;
}

.col-fixed-220 .form-control, .col-fixed-220 .form-select {
    width: 100%;
}

.col-fixed-234 .form-control, .col-fixed-234 .form-select {
    width: 100%;
}

/* Select2: luôn bám theo bề rộng cột */
.col-fixed-160 .select2-container,
.col-fixed-180 .select2-container,
.col-fixed-215 .select2-container,
.col-fixed-220 .select2-container,
.col-fixed-234 .select2-container,
.col-grow .select2-container {
    width: 100% !important;
}

/* Rút gọn nội dung dài trong Select2 */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Radio: vùng riêng, không kéo giãn cả hàng */
.radio-wrap {
    flex: 0 0 540px;
    max-width: 540px;
}

    .radio-wrap .options {
        display: flex;
        flex-wrap: nowrap;
        gap: 12px 18px;
    }

body[data-zoom="125"] .radio-wrap {
    flex: 0 0 520px;
    max-width: 520px;
}

.btninput {
    display: flex;
    gap: .5rem;
}

    .btninput > *:first-child {
        flex: 0 0 30%;
        max-width: 30%;
    }

    .btninput > *:last-child {
        flex: 1 1 auto;
    }

.col-grow-emp {
    flex: 1 1 0;
    min-width: 330px;
}

.col-grow-cuahang {
    flex: 1 1 0;
    min-width: 300px;
}
/* ===== Responsive ===== */
/* LG- (≤1199.98px): nới min-width, thu radio */
@media (max-width:1199.98px) {
    .col-grow {
        min-width: 300px;
    }

    .radio-wrap {
        flex: 0 0 420px;
        max-width: 420px;
    }
}

/* MD- (≤991.98px): ô cố định = 50%, ô giãn & radio = 100% */
@media (max-width:991.98px) {
    .col-fixed-160, .col-fixed-180, .col-fixed-215, .col-fixed-220, .col-fixed-234 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-grow {
        flex: 0 0 100%;
        max-width: 100%;
        min-width: 0;
    }

    .radio-wrap {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* SM- (≤767.98px): mỗi ô 1 hàng; label lên trên, control bên dưới */
@media (max-width:767.98px) {
    .col-fixed-160, .col-fixed-180, .col-fixed-215, .col-fixed-220, .col-fixed-234 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    /* xếp lại nội dung bên trong từng ô */
    .filters-bs .row .d-flex.align-items-center {
        flex-wrap: wrap;
    }

        .filters-bs .row .d-flex.align-items-center > label {
            flex: 0 0 100%;
            margin-bottom: .25rem;
        }

        .filters-bs .row .d-flex.align-items-center > .form-control,
        .filters-bs .row .d-flex.align-items-center > .form-select,
        .filters-bs .row .d-flex.align-items-center > .input-group,
        .filters-bs .row .d-flex.align-items-center > select {
            flex: 0 0 100%;
            max-width: 100%;
        }
}

/* XS- (≤575.98px): giữ cách xếp ở trên, khoảng cách dễ bấm hơn */
@media (max-width:575.98px) {
    .radio-wrap .options {
        gap: 10px 14px;
    }
}

@media (max-width:767.98px) {
    .filters-bs {
        overflow-x: auto;
    }
}
/*End Style Report*/

.tableTongHopCongNoNCC td.truncate > .ellipsis {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap !important;
    max-width: 100%;
}

.dataTables_scrollHeadInner table, .dataTables_scrollBody table {
    margin: 0 !important;
}

table.dataTable.fixedHeader-floating {
    z-index: 1003;
}

.head-group-1 {
    position: sticky;
    left: 0;
    z-index: 99;
}

.tableTongHopCongNoNCC th, .tableTongHopCongNoNCC td {
    white-space: nowrap;
}

.col-stt {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
}

.col-name {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
}

.col-address {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
}

.col-ct {
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
}

#modalDanhSachNCC .modal-header {
    display: none;
}

.pe-73 {
    padding-right: 73px;
}

#rdoTinhDonHang {
    margin-top: 0px;
}
/* mặc định */
:root {
    --baocao1-scrollY: calc(100vh - 422px);
}
/* khi zoom 125% */
body[data-zoom="125"] {
    --baocao1-scrollY: calc(100vh - 412px);
}
/* mặc định */
:root {
    --baocao4-scroll: calc(100vh - 355px);
}
/* khi zoom 125% */
body[data-zoom="125"] {
    --baocao4-scroll: calc(100vh - 335px);
}

/* mặc định */
:root {
    --tracuuct-scroll: calc(100vh - 325px);
}
/* khi zoom 125% */
body[data-zoom="125"] {
    --tracuuct-scroll: calc(100vh - 310px);
}
/* mặc định */
:root {
    --baocao3-scroll: calc(100vh - 302px);
}
/* khi zoom 125% */
body[data-zoom="125"] {
    --baocao3-scroll: calc(100vh - 295px);
}
/* mặc định */
:root {
    --bcluongthang-scroll: calc(100vh - 302px);
}
/* khi zoom 125% */
body[data-zoom="125"] {
    --bcluongthang-scroll: calc(100vh - 295px);
}
/* mặc định */
:root {
    --bccnkh-scroll: calc(100vh - 350px);
}
/* khi zoom 125% */
body[data-zoom="125"] {
    --bccnkh-scroll: calc(100vh - 340px);
}
/* mặc định */
:root {
    --bccskh-scroll: calc(100vh - 265px);
}
/* khi zoom 125% */
body[data-zoom="125"] {
    --bccskh-scroll: calc(100vh - 255px);
}
/* mặc định */
:root {
    --ctbc-scroll: calc(100vh - 205px);
}
/* khi zoom 125% */
body[data-zoom="125"] {
    --ctbc-scroll: calc(100vh - 185px);
}
/* mặc định */
:root {
    --baocaoQLGiaNet-scrollY: calc(100vh - 368px);
}
/* khi zoom 125% */
body[data-zoom="125"] {
    --baocaoQLGiaNet-scrollY: calc(100vh - 350px);
}
.dataTables_scrollHeadInner table, .dataTables_scrollBody table {
    margin: 0 !important;
}

.text-right {
    text-align: right;
}
/* Header căn giữa */
.tableTongHopCongNoNCC thead th {
    text-align: center;
    vertical-align: middle;
}

table.dataTable.fixedHeader-floating {
    z-index: 1003;
}

#modalDanhSachKhachHang .modal-header {
    display: none;
}

.breadcrumb {
    margin-bottom: 0;
}

.modalListNhanSu .breadcrumb {
    display: none;
}

@media (width: 1920px) and (height: 1080px) {
    .illustration {
        max-height: 306px;
        margin-left: 178px;
    }
}

/* Khi người dùng zoom 125% (trình duyệt sẽ báo width < 1920) */
@media (max-width: 1536px) {
    .illustration {
        max-height: 306px;
        margin-left: 0;
    }
}

.is-disabled {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: auto; /* quan trọng: vẫn cho phép click */
}

.report-table .th-60 {
    width: 60px !important;
    max-width: 60px;
}

.report-table .th-40 {
    width: 40px !important;
    max-width: 40px;
}

.report-table .th-80 {
    width: 80px !important;
    max-width: 80px;
}

.report-table .th-200 {
    width: 200px !important;
    max-width: 200px;
}

.report-table .th-250 {
    width: 250px !important;
    max-width: 250px;
}

.tblCongNoHoaDon thead th,
.tblCongNoHoaDon tfoot th {
    padding-left: 4px !important;
    padding-right: 12px !important;
    font-size: inherit;
    line-height: 1.5;
}

.report-table tfoot th {
    background: #dadada;
    font-weight: 600;
}

.tblCongNoChungTu thead th,
.tblCongNoChungTu tfoot th {
    padding-right: 14px !important;
}

.tblReportTH thead th, .tblReportTH tfoot th {
    padding-right: 14px !important;
}

.dropdownMenuBL li {
    cursor: pointer;
}

#tab-body-_TinhLuong_BangLuong {
    background: #fff;
}

.tblbangluong .card {
    box-shadow: none;
}
/*các popup display 100%*/
@media (min-resolution: 96dpi), (-webkit-min-device-pixel-ratio: 1) {
    .maginHH .dataTables_filter input[type="search"] {
        margin-left: 38px;
        min-width: 301px;
    }

    .marginNCC .dataTables_filter input[type="search"] {
        margin-left: 45px;
    }

    .marginKH .dataTables_filter input[type="search"] {
        margin-left: 33px;
        min-width: 318px;
    }

    .marginNCC .dataTables_filter input[type="search"] {
        margin-left: 45px;
    }

    .marginNS .dataTables_filter input[type="search"] {
        margin-left: 4px;
    }
    .magn-btn-KHSC {
        margin-right: 19px;
    }
    .mg-thubank {
        margin-left: 151px!important;
    }
}

/*các popup display 125%*/
@media screen and (max-width: 1600px) {
    .maginHH .dataTables_filter input[type="search"] {
        margin-left: 19px;
        min-width: 231px;
    }
    
    .marginNCC .dataTables_filter input[type="search"] {
        margin-left: 40px;
    }

    .marginKH .dataTables_filter input[type="search"] {
        margin-left: 24px;
        min-width: 282px;
    }

    .marginNCC .dataTables_filter input[type="search"] {
        margin-left: 39px;
    }

    .marginNS .dataTables_filter input[type="search"] {
        margin-left: 14px;
    }
   
    .magn-btn-KHSC {
        margin-right: 12px;
    }

    .mgin-loc {
        margin-left: 43px;
    }
    .txtsearch {
        max-height: 30px;
        min-width: 267px;
    }
    .mg-thubank {
        margin-left: 0px!important;
    }
}
.tab-suachua .btn-step1 {
    background-color: #50b0f3;
    color: #fff;
    border: #50b0f3;
}

.tab-suachua .btn-step2 {
    background-color: #F5A623;
    color: #fff;
    border: #F5A623;
}

.tab-suachua .btn-step3 {
    background-color: #438a7a;
    color: #fff;
    border: #438a7a;
}

.tab-suachua .btn-step4 {
    background-color: #934fb0;
    color: #fff;
    border: #934fb0;
}

.btn-suachua .btn-datatable {
    padding-top: .35rem;
    padding-bottom: .35rem;
}

.quantity[type=number] {
    position: relative;
    padding-right: 28px;
}
    /* Bật lại nút mũi tên trong Bootstrap form-control */
    .quantity[type=number]::-webkit-inner-spin-button,
    .quantity[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: inner-spin-button !important;
        display: inline-block;
        opacity: 1 !important;
        height: 22px !important;
        font-size: 10px;
        margin-right: 0;
        padding-right: 0;
        position: absolute;
        right: 0;
        top: 6px;
        padding-left: 5px;
        line-height: 10px;
    }

.quantity[type=number] {
    -moz-appearance: number-input;
}

body[data-zoom="125"] .quantity[type=number] {
    padding-right: 30px !important;
}

    body[data-zoom="125"] .quantity[type=number]::-webkit-inner-spin-button,
    body[data-zoom="125"] .quantity[type=number]::-webkit-outer-spin-button {
        top: 6px;
        padding-left: 3px;
        height: 20px !important;
    }

.max-1-row {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/*btn index sửa chữa*/
.col-fixed-220 a,
.col-fixed-220 button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
}

    .col-fixed-220 a span.btn-text,
    .col-fixed-220 button span.btn-text {
        color: #333 !important;
    }
/*btn-bg-color QL.net*/
.btn-color-cc {
    background-color: #f3e353;
}

.btn-disabled {
    pointer-events: auto; /* vẫn cho click */
    opacity: 0.6; /* mờ giống disable */
    cursor: not-allowed; /* chuột hiện dấu cấm */
}

.tabulator-cell.as-link {
    color: #0d6efd;
    text-decoration: blink;
    cursor: pointer;
}

.tinhtrang-duyet a {
    transition: all 0.25s ease;
    border-radius: 20px !important;
}

    .tinhtrang-duyet a.disabled {
        cursor: not-allowed;
        opacity: 0.7;
    }

#modalEditYeuCau {
    z-index: 1740 !important; /* modal cao hơn mặc định */
}


.fillter-token, .top-nav-search {
    position: relative;
}

    .fillter-token span.input-group-btn {
        position: absolute;
        right: 0;
        top: 0px;
        height: 33px;
    }

        .fillter-token span.input-group-btn .btn-search {
            padding: 5px
        }

.pagination-container {
    position: fixed;
    bottom: 20px;
    z-index: 9;
}

    .pagination-container .justify-content-between {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

.top-nav-search .input-group-btn {
    position: absolute;
    right: 8px;
    top: 6px;
}

    .top-nav-search .input-group-btn .btn-search {
        padding: 0;
    }

/* mặc định */
:root {
    --tbldmThongBao-scrollY: calc(100vh - 240px);
}
/* khi zoom 125% */
body[data-zoom="125"] {
    --tbldmThongBao-scrollY: calc(100vh - 235px);
}

.count-highlight {
    color: olivedrab !important;
    font-style: italic;
}

.tabulator-row.tabulator-group span {
    margin-left: 2px !important;
}

.carbodyKH {
    padding-left: 0px !important;
    padding-top: 0px !important;
}

@media (min-resolution: 96dpi), (-webkit-min-device-pixel-ratio: 1) {
    .background-white {
        width: 100%;
        height: 86vh;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    .text-size {
        font-size: 22px;
    }
    .notice-section {
        text-align: center;
        margin-top: 30px;
    }
    .custom-card {
        background: transparent;
        border: none;
        box-shadow: none;
        padding-left: 88px;
    }
    .notice-list span {
        color: #444;
        font-size: 18px !important;
        line-height: 1.6;
    }
    .notice-icon {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }
    .gopma-wrapper {
        display: flex;
        align-items: center;
        gap: 75px;
        padding-top: 22px;
        padding-left: 45px;
    }
    .gopma-image {
        flex: 0 0 auto;
        text-align: right;
    }
    .illustration {
        max-width: 410px;
        height: auto;
    }
    .gopma-card {
        background: #fff;
        border: 2px solid #0965d3;
        border-radius: 30px;
        padding: 40px 60px;
        width: 700px;
        height: 331px;
        box-shadow: 8px 8px 16px rgba(0,0,0,0.1);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .btn-gopma {
        background-color: #0053a5;
        color: #fff;
        font-weight: 600;
        padding: 12px 36px;
        border-radius: 10px;
        transition: 0.3s;
    }
        .btn-gopma:hover {
            background-color: #003f7d;
        }
    .notice-section h5 {
        text-align: left !important;
    }
    .pd-th-xh {
        padding-right: 8px;
    }
}
@media only screen and (min-resolution: 120dpi) and (max-resolution: 125dpi), only screen and (-webkit-min-device-pixel-ratio: 1.25) and (-webkit-max-device-pixel-ratio: 1.3) {
    .gopma-wrapper {
        display: flex;
        align-items: center;
        gap: 15px;
        padding-top: 22px;
        padding-left: 0px !important;
    }
    .notice-section {
        margin-top: 15px;
    }
    .notice-list span {
        color: #444;
        font-size: 14px !important;
        line-height: 1.6;
    }
    .gopma-image {
        flex: 0 0 auto;
        text-align: right;
    }
    .illustration {
        max-width: 410px;
        height: auto;
    }
    .gopma-card {
        background: #fff;
        border: 2px solid #0965d3;
        border-radius: 30px;
        padding: 40px 60px;
        width: 700px;
        height: 306px;
        box-shadow: 8px 8px 16px rgba(0,0,0,0.1);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .notice-section h5 {
        text-align: left !important;
    }

    .pd-th-xh {
        padding-right: 66px;
    }
}
.tblNhomkhoanmuc .filter-loai {
    display: block !important;
}

#frmCT_PhieuSC_Form .erp-doc-content {
    padding-top: 0;
}
    #frmCT_PhieuSC_Form .erp-doc-content .frmheader {
        padding-top: 1rem !important;
    }

.swal2-icon-show {
    font-size: 10px;
}
.btn-xml {
    background: #e2e8f0;
    border: 1px solid;
    color: #2b6cb0;
}
.btn-excel {
    background: #38c172;
    border: 1px solid #38c172;
}
#sidebarLock .nav-sm {
    flex-wrap: nowrap !important;
}
.item-tamluu:hover {
    background-color: #f0f8ff;
    border-radius: 8px;
    transition: background-color 0.2s;
}

.dropdown-header {
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

.badge.bg-success {
    font-size: 0.8rem;
    padding: 0.35em 0.6em;
}