/* ==========================================================================
   LỚP GHI ĐÈ COMPONENT — gộp từ 7 file (đợt 4 chuẩn hóa CSS, 08/09/2026)

   Nạp SAU bundle CSS isolation nên rule ở đây thắng file .razor.css của component ở cùng mức
   specificity. Đó là lý do phải giữ nguyên ranh giới: đừng chuyển rule giữa file này và
   erp-base.css, vì đổi bên là đổi quan hệ với 31 file .razor.css đang có.

   Gộp nguyên văn theo ĐÚNG THỨ TỰ NẠP CŨ (smart-custom → scroll-bar → smart.default → popup →
   smart-icon → theme → erp-content), không sửa rule nào. Một chỗ hai file cũ cùng đặt một
   thuộc tính, thứ tự nối giữ nguyên bên thắng:
     .bg { background-color }  -> theme thắng (như cũ)

   erp-content.css trước đây nạp sau cms.css; đưa lên đây là an toàn vì hai file không dùng chung
   selector nào (cms.css chỉ chứa class utility .text-*/.font-*/.bg-* lấy từ cấu hình CMS).

   cms.css và erp-syncfusion.css cố ý KHÔNG gộp vào đây: cms.css phụ thuộc dữ liệu cấu hình cột
   trong DB nên còn phải thu gọn riêng, erp-syncfusion.css phải nạp cuối cùng. */


/* ======================== từ smart-custom.css ======================== */

/* Biến CSS (:root) của file này đã gom về erp-tokens.css (đợt 1 chuẩn hóa CSS, 08/09/2026).
   Thêm biến mới thì thêm ở đó, không mở lại :root ở đây. */

.row {
    --bs-gutter-x: 0.5rem;
}

/*==================== General Styles ====================*/
.modal-body {
    overflow-y: auto;
    max-height: calc(100vh - 200px);
}

.total-sum,
.validation-message {
    /*    color: red !important;*/
}

.validation-message {
    font-size: smaller;
    margin: 5px 0;
    padding-left: 10px;
}

.btn-css {
    width: 100px;
    zoom: 0.9;
    font-weight: 500;
}

.btn_paddding {
    margin: 0 3px;
}

.table-column-code {
    width: 150px;
    white-space: nowrap;
    overflow: hidden;
}

.table-column-name {
    width: calc(100% - 150px);
    white-space: nowrap;
    overflow: hidden;
}

.level-1 {
    font-weight: 600;
    color: #000;
    padding-left: 0.5rem;
}

.level-2 {
    font-weight: 500;
    color: #333;
    padding-left: 1.5rem;
}

.level-3 {
    font-weight: 400;
    font-style: italic;
    color: #555;
    padding-left: 2.5rem;
}

.level-4 {
    font-weight: 300;
    font-style: italic;
    color: #777;
    padding-left: 3.5rem;
}

/*==================== General Styles END ====================*/

/*==================== Grid Styles ====================*/

/*==================== Toolbar Styles ====================*/

/*.e-dialog .e-dlg-content {
    padding-top: 0;
}*/

/*    .e-tab .e-tab-header .e-toolbar-items {
        gap: 0.5rem
    }*/

        .tab-contract {
    background-color: #F5F7F8;
    border-radius: 5px;
    height: 700px;
    min-width: 750px;
}
/*==================== Button Styles ====================*/
/*.e-split-btn,*/
/*.e-dropdown-btn {*/
/*    background: #28a745;*/
/*    border: 1px solid #28a745;*/
/*    border-radius: 7px;*/
/*}*/
/*.e-dropdown-btn {*/
/*    border-left-color: white;*/
/*}*/
/*    .e-split-btn:hover,*/
/*    .e-dropdown-btn:hover,*/
/*    .e-dropdown-btn:active,*/
/*    .e-dropdown-btn.e-active {*/
/*        background: #1e7e34;*/
/*        border: 1px solid #28a745;*/
/*    }*/
/*    .e-dropdown-btn:hover,*/
/*    .e-dropdown-btn.e-active {*/
/*        border-left-color: white;*/
/*    }*/
/*!*.e-dropdown-btn.e-active {*!*/
/*!*    color: #fff !important;*!*/
/*!*}*!*/
/*.e-dropdown-popup ul .e-item:hover {*/
/*    background: #28a745;*/
/*    color: white;*/
/*}*/
/*    .e-dropdown-popup ul .e-item:hover .e-menu-icon {*/
/*        color: white;*/
/*    }*/

/*==================== Spinner Styles ====================*/
.spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
}

/*==================== Responsive Styles ====================*/
@media (max-width: 768px) {
    .e-grid *,
    .e-grid .e-headercelldiv {
        font-size: 12px !important;
    }

    .e-grid .e-headertext {
        font-size: 10px !important;
    }
}

/*.e-tooltip-wrap.e-popup {
    background-color: #c8c5c5;
    border: 1px solid #c8c5c5;
}*/

/*.menu-text {
    text-wrap: auto;
}*/

.below-30 {
    background-color: #ccffcc;
    /*    width: 30px;*/
    color: #007d00 !important;
}

.red-txt-grid {
    color: red !important;
}

.below-80 {
    background-color: yellow;
    /*    width: 30px;*/
}

.above-80 {
    background-color: #ffd7cc;
    /*    width: 30px;*/
    color: #c40000 !important;
}

/*set hight các cột được tạo strong grid smart*/
.smart-grid-cell-editor > * {
    height: 100% !important;
}

.smart-grid smart-grid-column {
    color: black;
    background-color: #ebe8e9;
}

/*Hiển thị nút ẩn/hiện Slipter*/
/*.e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-icon-hidden) {
    background-color: #dee2e6;
}
*/
.image-sign img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/*==================== File Styles class:file-upload ====================*/
.file-upload {
    max-width: 400px; /* đảm bảo không vượt container cha */
    display: block;
}

.file-name-info:hover {
    cursor: pointer;
    color: #ea8b1f;
    text-decoration: underline;
}
/* Style chung cho thẻ File */
.file-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-items: center; */
    /* height: 45px; */
    width: 100%;
    /* padding: 8px; */
    /* border-radius: 8px; */
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none !important;
    border: 1px solid #e0e0e0;
    box-sizing: border-box;
    background-color: #f8f9fa;
}

    /* Hiệu ứng khi di chuột */
    .file-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }

    /* Style cho tên file */
    .file-card .file-name {
        font-size: 12px;
        color: #333;
        margin-top: 5px;
        /* Tự động cắt chữ nếu tên file quá dài */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
        text-align: center;
    }

    /* Style riêng cho Icon */
    .file-card .file-icon {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 2px;
    }

    /* --- TÙY CHỈNH MÀU SẮC RIÊNG --- */

    /* Màu cho PDF (Tông đỏ/cam nhẹ) */
    .file-card.pdf-style {
        background-color: #fff5f5;
        border-color: #ffc9c9;
    }

        .file-card.pdf-style .file-icon {
            color: #e03131; /* Màu đỏ đậm */
        }

        .file-card.pdf-style:hover {
            background-color: #ffe3e3;
        }

    /* Màu cho Download/File khác (Tông xanh dương nhẹ) */
    .file-card.download-style {
        background-color: #e7f5ff;
        border-color: #a5d8ff;
    }

        .file-card.download-style .file-icon {
            color: #1971c2; /* Màu xanh đậm */
        }

        .file-card.download-style:hover {
            background-color: #d0ebff;
        }
/*==========================================================================*/
#popup-catalog-invoice, #e-footer-content {
    margin: 10px;
}

.menu .menu-text {
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 167px;
}

    .menu .menu-text:hover {
        white-space: normal; /* Cho phép xuống dòng */
        overflow: visible; /* Hiển thị đầy đủ */
        position: relative; /* Tránh đè lên bố cục */
        z-index: 1;
    }
/*====================Fancybox====================*/
.fancybox__container {
    z-index: 1067
}
/*====================Sweetalert====================*/
.swal2-container {
    z-index: 9999
}

/*====================Drawer====================*/
.header-drawer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Nút đóng của DrawerZone: SfButton e-small chỉ có icon vẫn mang padding 3px 7px của nút chữ
   nên ra hình chữ nhật 31×25 (đo 13/09/2026). Ép vuông và căn icon bằng flex — theme căn bằng
   line-height/vertical-align, hai thứ đó vô hiệu khi nút là flex. */
.header-drawer .e-btn.e-icon-btn {
    width: 26px;
    height: 26px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.header-drawer .e-btn.e-icon-btn .e-btn-icon {
    width: 16px;
    height: 16px;
    margin: 0;
    line-height: 1;
    vertical-align: 0;
}

/*==================Css luồng hải quan============*/
.row-blue {
    background-color: #86F1FF87 !important;
    color: #000000 !important;
}

/* Luồng Vàng */
.row-yellow {
    background-color: #FEDE7B6F !important;
    color: #000000 !important;
}

/* Luồng Đỏ */
.row-red {
    background-color: #FE6D7A66 !important;
    color: #000000 !important;
}

.highlight-row {
    background-color: #FFF3CD !important;
    font-weight: bold;
    color: red !important;
}

/* ------------------------------------------------------------------
   Phiếu Lịch giao hàng (VoucherModule/Pages/DeliverySchedule)

   Phải để ở CSS TOÀN CỤC, không để trong .razor.css: các class dưới đây được gắn vào ô/dòng của
   SfGrid bằng args.Cell.AddClass() / args.Row.AddClass() lúc chạy, nên CSS isolation sẽ chặn vì
   markup do Syncfusion sinh ra không mang attribute scope của component.
   ------------------------------------------------------------------ */

/* Badge trạng thái phiếu */
.lgh-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
}

.lgh-badge--draft {
    background-color: #E7F0FB;
    color: #17548C;
    border: 1px solid #BBD3EE;
}

.lgh-badge--saved {
    background-color: #E4F3EA;
    color: #12704A;
    border: 1px solid #B6DFC6;
}

.lgh-badge--locked {
    background-color: #F1EEEA;
    color: #6B5B4A;
    border: 1px solid #DCD2C6;
}

/* Trạng thái TỜ KHAI HẢI QUAN (tab "Tờ khai" của phiếu Vận đơn).
   Chỉ hai trạng thái được tô màu, theo yêu cầu ngày 10/09/2026: thông quan (mã TTTK = T) và
   phân luồng (P). Các trạng thái còn lại — huỷ, chưa khai, và sáu mã lịch sử D/K/N/E/S mà backend
   trả nguyên bản — cố ý để trung tính: tô màu tất cả thì không còn gì nổi bật.
   Màu KHÔNG đứng một mình, chữ trạng thái vẫn hiện đầy đủ bên trong badge.

   Tương phản chữ/nền đã đo, không áng chừng (10/09/2026): mint 8,57:1 và vàng 8,21:1 — đều vượt
   ngưỡng AAA 7:1 và cố ý để cân nhau, lệch nhau thì một badge trông "nặng" hơn badge kia dù cùng
   vai trò. Bản đầu dùng #12704A/#8A6100 chỉ đạt ~5,2:1, chữ 11px đọc bị mờ nên đã nâng.
   Hai NỀN cũng cách nhau deltaE ≈ 31 (bản cũ chỉ ≈ 11) nên liếc nhanh vẫn phân biệt được.
   Đổi màu ở đây thì đo lại cả hai chỉ số, đừng chỉ nhìn bằng mắt. */
/* Bo góc 6px = --radius-sm của bộ token, vuông hơn viên thuốc 10px của .lgh-badge. Chỉ đặt lại cho
   hai class này, KHÔNG sửa .lgh-badge: badge trạng thái phiếu (Đang soạn / Đã cất giữ / Đã khóa)
   dùng chung lớp đó và vẫn giữ dáng cũ. */
.lgh-badge--cleared {
    background-color: #CDF3E4;
    color: #024A3C;
    border: 1px solid #7CD9BC;
    border-radius: var(--radius-sm, 6px);
}

.lgh-badge--channeled {
    background-color: #FFE8B0;
    color: #5C3D00;
    border: 1px solid #EDC259;
    border-radius: var(--radius-sm, 6px);
}

/* Quy ước màu R-07 của phiếu Lịch giao hàng — dùng chung cho mọi màn theo dõi tiến độ vật tư.
   Màu KHÔNG bao giờ đứng một mình: mọi ô dùng các class này đều kèm nhãn chữ hoặc ký hiệu ▲▼. */
.lgh-row-changed td {
    background-color: #FFF6DF !important;
}

.lgh-early {
    color: #12704A !important;
    font-weight: 600;
}

.lgh-late {
    color: #C0392B !important;
    font-weight: 600;
}

.lgh-same {
    color: #1F2430 !important;
}

/* Ô readonly của lưới chi tiết: nền xám nhạt để phân biệt với ô nhập được */
.lgh-readonly-cell {
    background-color: #F7F7F8 !important;
}

/* Tooltip "trước → sau" của lưới Phiếu Lịch giao hàng (js/lgh-row-tooltip.js của VoucherModule).
   Phải để ở CSS TOÀN CỤC: thẻ div này do JS tạo và gắn thẳng vào <body> nên nằm ngoài tầm với của
   CSS isolation. Màu chữ trên nền tối sáng hơn cặp lgh-early/lgh-late dùng trên nền trắng. */
#lgh-tip {
    position: fixed;
    z-index: 100000;
    top: -9999px;
    left: -9999px;
    display: none;
    max-width: 340px;
    padding: 8px 10px;
    border-radius: 6px;
    background-color: #1F2430;
    color: #fff;
    font-size: 11.5px;
    line-height: 1.55;
    box-shadow: 0 6px 20px rgba(15, 20, 32, .28);
    pointer-events: none;
}

#lgh-tip.lgh-tip--on {
    display: block;
}

#lgh-tip b {
    color: #fff;
}

#lgh-tip .lgh-tip__old {
    text-decoration: line-through;
    opacity: .75;
}

#lgh-tip .lgh-tip__early {
    color: #7FD8AC;
    font-weight: 600;
}

#lgh-tip .lgh-tip__late {
    color: #FF9B8E;
    font-weight: 600;
}

#lgh-tip .lgh-tip__note {
    display: block;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, .18);
    opacity: .7;
}

/* ------------------------------------------------------------------
   Phụ lục hợp đồng (Pages/PhuLucHopDong) — dòng lưới tô màu qua
   RowDataBound. Cùng lý do như cụm .lgh-* ở trên: markup do Syncfusion
   sinh ra không mang attribute scope nên CSS isolation không với tới.
   ------------------------------------------------------------------ */

/* Dòng có giá trị đến từ một phụ lục đã áp dụng: tô nền vàng nhạt cho cả dòng.

   #FFF6DF lấy đúng từ bản demo (--a-changed) chứ không phải bộ token của sản phẩm — token không
   có màu "đã thay đổi", và người dùng chốt ngày 06/09/2026 là dùng nền vàng thay cho vạch trái
   màu brand trước đó, vì vạch mảnh quá khó thấy trên bảng nhiều dòng. */
.pl-row-changed td {
    background: #fff6df !important;
}

/* Phần đã giao giữ giá cũ — phụ lục sau không sửa được dòng này */
.pl-row-kept td {
    background: var(--surface-alt, #f8f9fa) !important;
    color: var(--ink-3, #8b95a1) !important;
}


/* ======================== từ scroll-bar.css ======================== */

/* Width of the vertical scrollbar */
::-webkit-scrollbar {
    width: 10px; /* Chiều rộng của thanh cuộn dọc */
    height: 10px; /* Chiều cao của thanh cuộn ngang */
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px; /* Bo tròn các góc */
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #555;
        border-radius: 10px; /* Bo tròn các góc khi hover */
    }


/* ======================== từ smart.default.css ======================== */

/* Biến CSS (:root) của file này đã gom về erp-tokens.css (đợt 1 chuẩn hóa CSS, 08/09/2026).
   Thêm biến mới thì thêm ở đó, không mở lại :root ở đây. */

.mi {
    background: url(../assets/Sprites.svg) no-repeat;
    cursor: pointer;
}

.mi-24 {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
}

.mi-exclamation--warning {
    background-position: -592px -144px;
}

.mi-setting__list:hover {
    background-position: -88px -256px;
}

.mi-setting__list {
    background-position: -88px -200px;
}

.mi-excel__nav:hover {
    background-position: -704px -256px;
}

.mi-excel__nav {
    background-position: -704px -200px;
}

.mi-refresh:hover, .mi-refresh-bold {
    background-position: -1097px -88px;
}

.mi-refresh {
    background-position: -423px -201px;
}

.mi-arrow-check-all {
    background-position: -256px -143px;
}

.mi-recent-log {
    background-position: -648px -144px;
}

.mi-help {
    background-position: -89px -144px;
}

.mi-close {
    background-position: -144px -144px;
}

.ld {
    background-position: -481px -146px;
}

.ld2 {
    font-size: 13px;
    font-style: italic;
    color: #757575;
}

.note-icon {
    min-width: 24px;
    height: 32px;
    margin-right: 10px;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3e%3cg transform='translate(12761 4761)'%3e%3cg transform='translate(-13344 -4844)'%3e%3ccircle cx='12' cy='12' r='12' transform='translate(583 83)' fill='%232ca01c'/%3e%3crect width='2' height='8' rx='1' transform='translate(594 93.13)' fill='%23fff'/%3e%3crect width='2' height='2' rx='1' transform='translate(594 89.333)' fill='%23fff'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e") no-repeat center center;
}

.note-text {
    font-size: 12px;
    font-style: italic;
}

.smart-form-label {
    white-space: nowrap;
    display: flex;
    align-items: center;
    height: 24px;
    text-overflow: ellipsis;
    font-family: var(--smart-font-family);
    font-size: calc(.9 * var(--smart-font-size));
    font-weight: 500;
}

.smart-form-label[required]:after {
    content: "*";
    color: #ff0000;
    font-size: 14px;
    margin-left: 2px;
    margin-right: 2px;
}

smart-grid {
    width: 100%;
    height: auto
}

smart-list-box {
    width: 100%;
    height: auto;
}

.total-record-selected span {
    color: #94c9ce;
}

.smart-drop-down-button .smart-action-button {
    padding-left: 1rem;
}

.grid-control-item {
    width: 100%;
    background-color: #fff;
    position: sticky;
    z-index: 25;
    left: 0;
}

/*.grid-control-item .btn-grid-control {*/
/*    padding-bottom: 1rem;*/
/*}*/

.recent-log-btn {
    display: flex;
    align-items: center;
}

.header-detail-input {
    min-width: 240px !important;
}

@media only screen and (max-width: 1300px) {
    .header-detail-input {
        min-width: auto !important;
    }
}

.bg {
    background-color: var(--main-background-color);
}

.header-detail-btn {
    padding: 6px 8px;
    cursor: pointer;
    height: 100%;
    display: flex;
    display: -webkit-flex;
    align-items: center;
}

.con-sm-tooltip .tooltip-content {
    height: 100%;
}

.scroller {
    /*    scrollbar-color: #94c9ce #fee8d6;*/
    scrollbar-width: thin;
}

.left-0 {
    left: 0;
}

.sticky {
    position: sticky !important;
}

/*@media only screen and (max-width: 1300px) {
    .third-column {
        max-width: 358px;
    }
}*/

.smart-grid-icon.smart-icon-delete {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    background: url(../assets/Sprites.svg) no-repeat;
    background-position: -464px -312px;
    display: inline-block;
    cursor: pointer;
}

.smart-grid-icon.smart-icon-delete:before {
    content: "";
}

/*.smart-grid {
    --smart-primary: #fee8d6;
    --smart-primary-color: #ff6a00;
    --smart-primary-rgb: 254, 232, 222;
    --smart-border: #94c9ce;
    --smart-ui-state-focus: #fee8d6;
    --smart-ui-state-hover: #fee8d6;
    --smart-ui-state-color-focus: #fa884d;
    --smart-scroll-bar-button-color: #ffffff;
    --smart-scroll-bar-button-color-active: #ffffff;
    --smart-scroll-bar-button-color-hover: #ffffff;
    --smart-scroll-bar-thumb-background: #fda172;
    --smart-scroll-bar-thumb-background-active: #fa884d;
    --smart-scroll-bar-thumb-background-hover: #fa884d;
    --smart-scroll-bar-button-background: #fda172;
    --smart-scroll-bar-button-background-active: #fa884d;
    --smart-scroll-bar-button-background-hover: #fa884d;
}

.smart-grid .smart-action-button, .smart-grid smart-grid-cell[header] {
    --smart-surface-color: #fa884d;
    --smart-ui-state-color-hover: #fa884d;
}

    .smart-grid smart-grid-column {
        background: #fda172;
    }

        .smart-grid .smart-track {
        background: #fee8d6;
    }

    .smart-grid smart-scroll-bar:after, .smart-grid smart-scroll-bar:before {
        background: #fee8d6;
    }*/

smart-grid-cell:not(.smart-grid-column-border):not(.smart-grid-column-border-collapse):before {
    color: var(--smart-grid-cell-vertical-border, var(--smart-border));
    background: none;
    border-left: dotted 1px;
}

smart-grid-cell:not(.smart-grid-column-border):after, smart-grid-cell[header]:not(.smart-grid-column-border):after {
    color: var(--smart-grid-cell-horizontal-border, var(--smart-border));
    background: none;
    border-bottom: solid 1px;
}

.source-header {
    align-items: flex-end;
    padding: 0 20px 16px;
}

.source-header .source-note {
    height: 32px;
    margin-left: 12px;
}

.source-header .source-note .note-text {
    line-height: 32px;
}

.hidden-tab {
    height: 0;
    visibility: hidden;
}

.summary-info {
    text-align: right;
    margin-top: 50px;
}

.header-popup .title-popup {
    font-size: 24px;
    color: #111;
    font-weight: 700;
}

.sm-popup--header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    border-radius: 4px 4px 0 0;
    position: relative;
}

.sm-popup--content {
    transition: all .23s ease .1s;
    flex-direction: column;
    display: flex;
    overflow: auto;
    overflow-y: visible;
    padding-top: 1rem;
}

.main-container .container__left {
    border: 14px solid #f4f5f6;
    max-width: 500px;
    min-width: 450px;
    overflow: auto;
    padding: 1rem;
}

.main-container .container__right {
    border: 14px solid #f4f5f6;
    padding: 12px;
    border-left: 0px !important;
    flex-shrink: 1;
    flex-grow: 1;
    overflow: auto;
    padding: 1rem;
}

.stt {
    width: 40px;
    text-align: center
}

.fa-info {
    text-align: "left";
    flex: 1;
}

.fa-info:before {
    content: unset;
}

.current-value, .new-value {
    text-align: "right";
    width: 170px
}

.different {
    text-align: "right";
    width: 150px
}

.fa-head {
    color: #212121;
    font-size: 12px;
    font-family: Open Sans local;
    font-weight: 700;
    letter-spacing: .16px;
    line-height: 18px;
    text-decoration-style: solid;
    height: 28.19px !important;
    cursor: pointer;
    background: var(--grid-header-background-color)
}

.fa-head div {
    text-transform: uppercase;
    border-right: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    padding: 6px 10px
}

.fa-content {
    font-size: 13px;
    font-family: Open Sans local;
    font-weight: 400;
    letter-spacing: .16px;
    line-height: 19.5px;
    text-decoration-style: solid
}

.fa-content .stt, .fa-content .fa-info, .fa-content .new-value, .fa-content .current-value {
    border-right: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    padding: 2px 10px;
    height: 30.19px
}

.fa-content .different {
    border-bottom: 1px solid #e0e0e0;
    padding: 2px 10px;
    height: 30.19px
}

.fa-content .stt, .fa-content .fa-info, .fa-content .current-value, .fa-content .different, .fa-content .limit_depreciation_amount {
    padding: 5px 10px
}

.right-input {
    text-align-last: end;
    padding-right: 10px;
}

.list-item-level-1 {
    padding-left: 10px !important;
}

.list-item-level-2 {
    padding-left: 20px !important;
}

.smart-date-range {
    width: 100%;
}

.is-horizontal {
    display: flex;
}

.date-range-custom .period {
    width: 180px !important;
    min-width: 180px !important;
    flex: auto !important;
    flex-grow: unset !important;
}

.is-horizontal-item {
    width: 50%;
}

.date-range-custom .from-date, .date-range-custom .to-date {
    width: 180px !important;
    min-width: 180px !important;
}

.link {
    color: #0075c0;
    font-weight: bold;
}

.link:hover {
    text-decoration: underline;
}

smart-grid-row[selected="indeterminate"] smart-grid-cell .smart-label {
    background-color: var(--smart-ui-state-selected) !important;
}

smart-grid-row[selected="indeterminate"] smart-grid-cell:not(.smart-readonly) .smart-label {
    background-color: unset !important;
}

smart-grid-row[selected="indeterminate"] smart-grid-cell:not([editor])[selected] {
    border: 1px solid blue;
}

.here {
    color: #0075c0;
    text-decoration: underline;
    cursor: pointer;
}

.widget-view-arising {
    color: #0075c0;
    cursor: pointer;
    display: inline-block;
}

.flex-1 {
    flex: 1 1 0% !important;
}

.init-accounting-data {
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    overflow: auto
}

.init-accounting-data .header-container {
    height: 52px;
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 100%;
    background-color: #fff;
    z-index: 1
}

.init-accounting-data .header-container .header-main-contents {
    display: flex;
    justify-content: space-between;
    flex: 1
}

.init-accounting-data .header-container .header-main-contents .header-left {
    padding: 8px 0 8px 12px
}

.init-accounting-data .header-container .header-main-contents .header-left .header-logo {
    height: 100%;
    width: 96px;
    background-image: url(/images/LogoSmart/logo_head.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center
}

.init-accounting-data .header-container .header-main-contents .header-label {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    padding-right: 65px
}

.init-accounting-data .header-container .header-main-contents .header-label-title {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    position: absolute;
    left: 138px;
    padding-top: 7px;
    width: calc(50% - 300px)
}

.init-accounting-data .header-container .header-main-contents .header-label-title .title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.init-accounting-data .header-container .header-main-contents .header-right {
    display: flex;
    padding: 15px 24px 15px 0
}

.init-accounting-data .header-container .header-main-contents .header-right .header-steps {
    font-weight: 600;
    color: #757575
}

.init-accounting-data .header-container .header-progress-container {
    height: 4px;
    background-color: #f4f5f8
}

.init-accounting-data .header-container .header-progress-container .header-current-progress {
    height: 100%;
    background-color: #2ca01c
}

.init-accounting-data .header-container .header-progress-container .header-current-progress.step-1 {
    width: 50%
}

.init-accounting-data .header-container .header-progress-container .header-current-progress.step-2, .init-accounting-data .header-container .header-progress-container .header-current-progress.step-3, .init-accounting-data .header-container .header-progress-container .header-current-progress.step-4 {
    width: 100%
}

.init-accounting-data .flex-box {
    display: flex;
    justify-content: center;
    margin-top: 26px
}

.init-accounting-data .flex-box .main-contents-wrapper {
    margin-top: 52px;
    width: 800px;
    display: flex
}

.init-accounting-data .flex-box .main-contents-wrapper .step-no {
    font-size: 32px;
    font-weight: 700;
    margin: 24px
}

.init-accounting-data .flex-box .main-contents-wrapper .main-contents-box {
    flex: 1
}

.init-accounting-data .flex-box .main-contents-wrapper .main-contents-box .step-title {
    font-size: 32px;
    font-weight: 700;
    margin-top: 24px
}

.init-accounting-data .flex-box .main-contents-wrapper .main-contents-box .main-contents-container .step-description {
    padding-bottom: 32px;
    font-weight: 600;
    color: #757575
}

.init-accounting-data .flex-box .main-contents-wrapper .main-contents-box .main-contents-container .main-contents {
    max-width: 620px
}

.init-accounting-data .flex-box .main-contents-wrapper .main-contents-box .main-contents-container .main-contents .activity-field-title {
    font-weight: 700;
    font-size: 12px;
    padding-bottom: 16px
}

.init-accounting-data .flex-box .main-contents-wrapper .main-contents-box .main-contents-container .main-contents .menu-items {
    display: flex;
    justify-content: space-between
}

.init-accounting-data .flex-box .main-contents-wrapper .main-contents-box .main-contents-container .main-contents .combo-currency {
    width: 140px
}

.init-accounting-data .flex-box .main-contents-wrapper .main-contents-box .main-contents-container .main-contents .datepicker {
    width: 160px
}

.init-accounting-data .flex-box .main-contents-wrapper .main-contents-box .main-contents-actions {
    margin: 40px 0 64px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.init-accounting-data .flex-box .main-contents-wrapper .main-contents-box .main-contents-actions .left-actions .actions__next {
    position: relative;
    left: 130px
}

.init-accounting-data .flex-box .main-contents-wrapper .main-contents-box .main-contents-actions .left-actions .pre_step1 {
    left: 0
}

.init-accounting-data .flex-box .main-contents-wrapper .main-contents-box .main-contents-actions .left-actions .actions__back {
    position: relative;
    top: -28px;
    width: 118px
}

.init-accounting-data .flex-box .main-contents-wrapper .main-contents-box .main-contents-actions .left-actions .actions-btn {
    padding: 8px 32px
}

.init-accounting-data .row-input {
    padding-bottom: 24px
}

.init-accounting-data .row-input .existed-message {
    color: red;
    margin: auto auto 0 10px
}

.init-accounting-data .title-inline {
    font-weight: 700;
    font-size: 12px;
    margin-right: 16px
}

.init-accounting-data .title-block {
    display: flex;
    align-items: center;
    width: -moz-max-content;
    width: max-content;
    padding-bottom: 16px
}

.init-accounting-data .title-block .title__text {
    font-size: 12px;
    font-weight: 700;
    margin-right: 8px
}

.init-accounting-data .title-block .title__text_step3 {
    font-size: 12px;
    font-weight: 700;
    margin-right: 4px
}

.init-accounting-data .title-block .help-icon {
    cursor: pointer
}

.init-accounting-data .input-radio-group {
    padding-bottom: 12px
}

.init-accounting-data .row-currency {
    display: flex;
    align-items: flex-end
}

.init-accounting-data .w-150 {
    width: 150px
}

.init-accounting-data .required-title {
    color: red
}

.init-accounting-data .menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 36px;
    width: 140px;
    height: 140px;
    border: 1px solid #babec5;
    border-radius: 6px;
    cursor: pointer
}

.init-accounting-data .menu-item .item-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 12px
}

.init-accounting-data .menu-item .item-text {
    font-weight: 600
}

.init-accounting-data .other-feature-menu {
    justify-content: unset !important
}

.init-accounting-data .other-feature-item {
    padding-top: 18px;
    margin-right: 20px
}

.init-accounting-data .other-feature-item .item-text {
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    line-height: 16px
}

.init-accounting-data .activity-field-item:hover, .init-accounting-data .other-feature-item:hover {
    background-color: #e7f5e9
}

.init-accounting-data .item--selected {
    border: 2px solid #2ca01c;
    background-color: #e7f5e9
}

.init-accounting-data .activity-field-1 {
    background-position: -32px -1236px
}

.init-accounting-data .activity-field-2 {
    background-position: -112px -1236px
}

.init-accounting-data .activity-field-3 {
    background-position: -192px -1236px
}

.init-accounting-data .activity-field-4 {
    background-position: -272px -1236px
}

.init-accounting-data .mi-help-init-accounting-data {
    background-position: -704px -311px
}

.init-accounting-data .other-feature-1 {
    background-position: -432px -1236px
}

.init-accounting-data .other-feature-2 {
    background-position: -512px -1236px
}

.init-accounting-data .other-feature-3 {
    background-position: -592px -1236px
}

.init-accounting-data .item-selected {
    background-position: -672px -1236px
}

.init-accounting-data .icon-color {
    color: red;
    font-weight: 700;
    margin-right: 6px
}

.history-db {
    color: #0075c0;
    cursor: pointer
}

.history-db .history-icon {
    background-image: url(../assets/Sprites.svg);
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    background-position: -1888px -470px
}

.app-loader {
    overflow: hidden
}

.app-loader .grey-background {
    background: #000000b3;
    width: 100vw;
    height: 100vh
}

.app-loader .grey-background .loader-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%
}

.app-loader .grey-background .loader-container .header-title {
    color: #fff;
    text-align: center;
    margin-bottom: 16px
}

.app-loader .grey-background .loader-container .slider {
    width: 100%;
    max-width: 600px;
    height: 400px;
    background: #fff;
    overflow: hidden;
    border-radius: 10px;
    padding: 33px 0 20px
}

.app-loader .grey-background .loader-container .slider .slide-item .slide-img {
    height: 270px;
    width: 600px
}

.app-loader .grey-background .loader-container .slider .slide-item .description {
    text-align: center;
    padding-top: 24px
}

.img-0 {
    background: url(../assets/bg_Dashboard.svg) no-repeat center
}

.img-1 {
    background: url(../assets/bg_Custom_Report.svg) no-repeat center
}

.img-2 {
    background: url(../assets/bg_Import.svg) no-repeat center
}

.img-3 {
    background: url(../assets/bg_Favorite.svg) no-repeat center
}

.owl-dot .active span {
    background: #2ca01c !important
}

.owl-dot .active span:hover {
    background: #2ca01c
}

.w-1 {
    width: .25rem !important
}

.w-2 {
    width: .5rem !important
}

.w-3 {
    width: .75rem !important
}

.w-4 {
    width: 1rem !important
}

.w-5 {
    width: 1.25rem !important
}

.w-6 {
    width: 1.5rem !important
}

.w-8 {
    width: 2rem !important
}

.w-10 {
    width: 2.5rem !important
}

.w-12 {
    width: 3rem !important
}

.w-16 {
    width: 4rem !important
}

.w-24 {
    width: 6rem !important
}

.w-32 {
    width: 8rem !important
}

.w-48 {
    width: 12rem !important
}

.w-64 {
    width: 16rem !important
}

.w-auto {
    width: auto !important
}

.w-px {
    width: 1px !important
}

.w-1\/2 {
    width: 50% !important
}

.w-1\/3 {
    width: 33.33333% !important
}

.w-2\/3 {
    width: 66.66667% !important
}

.w-1\/4 {
    width: 25% !important
}

.w-2\/4 {
    width: 50% !important
}

.w-3\/4 {
    width: 75% !important
}

.w-1\/5 {
    width: 20% !important
}

.w-2\/5 {
    width: 40% !important
}

.w-3\/5 {
    width: 60% !important
}

.w-4\/5 {
    width: 80% !important
}

.w-1\/6 {
    width: 16.66667% !important
}

.w-2\/6 {
    width: 33.33333% !important
}

.w-3\/6 {
    width: 50%% !important
}

.w-4\/6 {
    width: 66.66666% !important
}

.w-5\/6 {
    width: 83.33333% !important
}

.w-1\/7 {
    width: 14.2857142% !important
}

.w-2\/7 {
    width: 28.5714285% !important
}

.w-3\/7 {
    width: 42.8571428% !important
}

.w-4\/7 {
    width: 57.1428571% !important
}

.w-5\/7 {
    width: 71.4285714% !important
}

.w-6\/7 {
    width: 85.7142857% !important
}

.w-full {
    width: 100% !important
}

.w-screen {
    width: 100vw !important
}

.mark {
    display: flex;
    justify-content: flex-end;
    background-color: transparent;
}

.mark .mark-border {
    border: 2px solid #c00000;
    padding: 2px 16px;
}

.mark .mark-border .mark-text {
    text-transform: uppercase;
    color: #c00000;
    font-weight: 800;
}

.header-current-db {
    display: flex;
    align-items: center;
    border: 1px solid #ebedf0;
    padding: 0 12px;
    border-radius: 40px;
    margin-left: 14px;
    font-size: 13px;
    cursor: pointer;
    height: 30px;
    margin-right: 10px;
}

.icon-header-current-db {
    width: 8px;
    height: 8px;
    background-color: var(--primary-btn-background-color);
    border-radius: 50%;
    border: 1px solid white;
}

.header-current-db-name {
    padding-left: 7px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: all ease .2s;
    color: #111;
}
/*Chang thêm để wrap text header, Bug thì xóa đi nhé*/
smart-grid-column .smart-label { 
    white-space: normal !important; 
    line-height: 1.2 !important; 
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center; 
    height: 100%; 
    text-overflow: unset !important;
}


/* ======================== từ popup.css ======================== */

/* Biến CSS (:root) của file này đã gom về erp-tokens.css (đợt 1 chuẩn hóa CSS, 08/09/2026).
   Thêm biến mới thì thêm ở đó, không mở lại :root ở đây. */

.header-layout-wrap .voucher-detail-content {
    margin: 8px 0 8px 8px;
    width: calc(100vw - 125px);
    height: calc(100vh - 100px)
}

.header-layout-wrap .top-header-wrap {
    top: 0;
    width: 100%;
    background-color: #eceef1;
    padding: 16px 0
}

.header-layout-wrap .top-header-wrap .top-header {
    padding: 9px 16px;
    display: flex;
    display: -webkit-flex;
    margin-bottom: 7px
}

.header-layout-wrap .top-header-wrap .top-header .header-detail-btn {
    padding-left: 16px;
    cursor: pointer
}

.header-layout-wrap .top-header-wrap .header-main-item {
    padding: 9px 24px
}

.header-layout-wrap .top-header-wrap .title {
    font-weight: 700;
    font-size: 24px;
    top: -7px;
    left: 20px;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.header-layout-wrap .top-header-wrap .header-detail-buttons {
    align-items: center;
    right: 0;
    position: relative
}

.header-layout-wrap .top-header-wrap .header-detail-buttons .header-button-detail {
    padding: 0 8px
}

.header-layout-wrap .top-header-wrap .header-detail-input {
    display: flex;
    display: -webkit-flex;
    justify-content: left;
    align-items: center;
    padding-left: 24px;
    flex: 1;
    min-width: 600px
}

.header-layout-wrap .top-header-wrap .header-detail-input .combo-editor {
    margin-right: 12px;
    min-width: 100px;
    width: 300px
}

.header-layout-wrap .top-header-wrap .header-detail-input .price-input {
    align-items: center
}

.header-layout-wrap .top-header-wrap .header-detail-input .price-input .combo-editor {
    width: 200px
}

.header-layout-wrap .top-header-wrap .header-detail-input .price-input .setting-input-button {
    background: #fff;
    border: 1px solid #babec5;
    border-right: none;
    height: 32px;
    padding: 4px 10px;
    cursor: pointer
}

.header-layout-wrap .top-header-wrap .header-button-group {
    display: flex;
    display: -webkit-flex;
    align-items: center
}

.base-view-detail {
    display: flex;
    flex-direction: column;
    background: #fff;
    height: 100vh
}

.base-view-detail .header {
    top: 0;
    width: 100%;
    background-color: var(--main-background-color)
}

.base-view-detail .header .top-header {
    padding: var(--popup-right__title-padding);
    display: flex;
    display: -webkit-flex
}

.base-view-detail .header .top-header .header-detail-buttons {
    align-items: center;
    right: 0;
    position: relative
}

.base-view-detail .header .top-header .header-detail-buttons .guide-tour {
    display: flex;
    display: -webkit-flex;
    margin: 0 12px
}

.base-view-detail .header .top-header .header-detail-buttons .guide-tour .tour-label {
    white-space: nowrap;
    padding-left: 5px;
    color: #0075c0;
    font-size: 13px
}

.base-view-detail .header .top-header .header-detail-buttons .guide-tour .tour-label:hover {
    text-decoration: underline;
    cursor: pointer
}

.base-view-detail .header .recent-log-btn {
    padding-right: 10px
}

.base-view-detail .header .title {
    font-weight: 700;
    font-size: 24px;
    top: -7px;
    left: 20px;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.base-view-detail .header .header-detail-input {
    display: flex;
    display: -webkit-flex;
    justify-content: left;
    align-items: center;
    padding-left: 24px;
    flex: 1;
    min-width: 600px
}

.base-view-detail .header .header-detail-input .combo-editor {
    margin-right: 12px;
    min-width: 100px;
    width: 300px
}

.base-view-detail .header .header-detail-input .price-input {
    align-items: center
}

.base-view-detail .header .header-detail-input .price-input .combo-editor {
    width: 200px
}

.base-view-detail .header .header-detail-input .price-input .setting-input-button {
    background: #fff;
    border: 1px solid #babec5;
    border-right: none;
    height: 32px;
    padding: 4px 10px;
    cursor: pointer
}

.base-view-detail .body {
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow: auto;
    position: relative;
    scroll-behavior: smooth
}

.base-view-detail .body .header-main-item {
    padding: 0 16px;
    background-color: var(--main-background-color);
    position: sticky;
    left: 0
}

.base-view-detail .body .header-main-item .header-button-group {
    display: flex;
    display: -webkit-flex;
    align-items: center
}

.footer-container {
    z-index: 99;
}

.body-no-padding .body {
    padding-bottom: 0
}

.clear {
    height: 26px;
    width: 100%
}

[data-v-af40552c] tfoot th {
    border-color: transparent !important;
    padding-right: 9px !important
}

.smart-notification .base-view-detail[data-v-af40552c] {
    height: calc(100vh - 36px)
}

.recentVoucher[data-v-40e77600] {
    z-index: 999;
    position: absolute;
    background-color: #fff;
    border: 1px solid #babec5;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 -8px 34px #0000000d;
    padding: 16px;
    top: 64px;
    left: 10px
}

.recentVoucher-title[data-v-40e77600] {
    margin-bottom: 16px
}

.recentVoucher-table[data-v-40e77600] {
    border-collapse: collapse
}

.recentVoucher-table tr[data-v-40e77600] {
    line-height: 32px;
    height: 32px
}

.recentVoucher-table tr[data-v-40e77600]:hover {
    cursor: pointer
}

.recentVoucher-table tr:hover td[data-v-40e77600] {
    background-color: #e3e5e8;
    color: var(--primary-btn-background-color)
}

.recentVoucher-table tr td[data-v-40e77600] {
    padding-left: 16px;
    padding-right: 16px;
    border: none !important
}

.recentVoucher-table tr td[data-v-40e77600]:nth-child(1) {
    text-align: center
}

.recentVoucher-table tr td[data-v-40e77600]:nth-child(2) {
    text-align: center
}

.recentVoucher-table tr td[data-v-40e77600]:nth-child(3) {
    text-align: right
}

.recentVoucher-table tr td[data-v-40e77600]:nth-child(4) {
    text-align: left
}

.recent-log-btn[data-v-40e77600] {
    display: flex;
    align-items: center
}

.demo-view[data-v-82d12200] {
    background-color: #d2691e;
    color: #fff;
    text-align: center
}

.layout-master-detail {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-right: 20px
}

.layout-master-detail.isOpeningRemindLicense {
    height: calc(100vh - 75px - var(--tab-router-margin-top) - var(--remind-license-height))
}

.layout-master-detail .master-section, .layout-master-detail .detail-section {
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--main-background-color);
    transition: all ease .1s;
    z-index: 0
}

.layout-master-detail .master-detail-section {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 0
}

.layout-master-detail .master-detail-section .master-section {
    height: 60%
}

.layout-master-detail .master-detail-section .master-section.fullsize {
    height: calc(100% - 20px) !important
}

.layout-master-detail .master-detail-section .detail-section {
    height: 0;
    flex: 1;
    margin-bottom: 8px
}

.layout-master-detail .master-detail-section .detail-section.minisize {
    max-height: 20px !important;
    min-height: 20px !important;
    margin-bottom: 0
}

.layout-master-detail .master-detail-section .detail-section .divider-section {
    position: absolute;
    width: 100%;
    height: 20px;
    left: 0
}

.layout-master-detail .master-detail-section .detail-section .divider-section .slide-line {
    height: 13px;
    position: absolute;
    width: 100%;
    top: 2px;
    background: transparent;
    border-radius: 2px
}

.layout-master-detail .master-detail-section .detail-section .divider-section .slide-line .resize-icon {
    width: 30px;
    height: 7px;
    border: 1px solid #a8a8a8;
    border-left: none;
    border-right: none;
    position: absolute;
    top: 3px;
    right: calc(66% - 15px);
    visibility: hidden
}

.layout-master-detail .master-detail-section .detail-section .divider-section .slide-line .resize-icon:before {
    content: "";
    height: 1px;
    width: 12px;
    background: #a8a8a8;
    position: absolute;
    top: 50%;
    left: 9px
}

.layout-master-detail .master-detail-section .detail-section .divider-section .slide-line .second {
    right: calc(33% + 15px)
}

.layout-master-detail .master-detail-section .detail-section .divider-section .slide-line:hover, .layout-master-detail .master-detail-section .detail-section .divider-section .slide-line:active {
    background: #e0e0e0;
    cursor: row-resize
}

.layout-master-detail .master-detail-section .detail-section .divider-section .slide-line:hover .resize-icon, .layout-master-detail .master-detail-section .detail-section .divider-section .slide-line:active .resize-icon {
    visibility: visible
}

.layout-master-detail .master-detail-section .detail-section .divider-section .collapse-btn {
    position: absolute;
    left: calc(50% - 30px);
    width: 48px;
    height: 13px;
    background: #d4d7dc;
    margin-top: 2px;
    border: 1px solid #d4d7dc;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    z-index: 9
}

.layout-master-detail .master-detail-section .detail-section .divider-section .collapse-btn:hover {
    cursor: pointer
}

.layout-master-detail .master-detail-section .detail-section .divider-section .collapse-btn .detail-collapse {
    transform: rotate(180deg)
}

.layout-master-detail .master-detail-section .detail-section .tab-title {
    position: absolute;
    top: 8px
}

.layout-master-detail .master-detail-section .detail-section .tab-title .tab-item {
    padding: 4px 16px;
    display: inline-block;
    border: 1px solid #e0e0e0;
    background: #f2ebbf;
    border-radius: 5px 5px 0 0;
    border-bottom: 2px solid var(--tab__border-color);
    box-shadow: 0 -1px 3px #00000029;
    font-weight: 700;
    z-index: 5
}

.layout-master-detail .master-detail-section .detail-section .grid-model-control, .layout-master-detail .master-detail-section .detail-section .empty-detail-container {
    margin-top: 37px
}

.layout-master-detail .master-detail-section .detail-section .empty-detail-container {
    height: 0;
    flex: 1;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center
}

.layout-master-detail .master-detail-section .detail-section .empty-detail-container .empty-detail-wrapper {
    text-align: center
}

.layout-master-detail .master-detail-section .detail-section .empty-detail-container .empty-detail-wrapper .nodata-img {
    margin-bottom: 12px
}

.layout-master-detail .divider-section {
    position: relative;
    width: 100%
}

.layout-master-detail .divider-section .collapse-overview {
    left: calc(50% - 30px);
    width: 48px;
    height: 13px;
    background: #d4d7dc;
    border: 1px solid #d4d7dc;
    display: flex;
    justify-content: center;
    z-index: 9;
    margin: auto
}

.layout-master-detail .divider-section .collapse-overview .mi-arrow-dropdown-8px.hide-overview {
    transform: rotate(180deg)
}

.smart-notification .layout-master-detail {
    height: calc(100vh - 75px - var(--tab-router-margin-top) - 40px)
}

.smart-notification .layout-master-detail .master-detail-section .master-section.fullsize {
    height: calc(100% - 50px) !important
}

.footer {
    width: 100%;
    background-color: var(--footer-background-color);
    display: flex;
    align-items: center
}

.footer .footer-button-group {
    background-color: var(--footer-background-color);
    padding: 0 16px;
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    height: var(--footer-height)
}

.footer .footer-button-group .sm-input {
    padding: 0 12px
}

.footer .footer-button-group .left-group-button {
    z-index: 1
}

.footer .footer-button-group .center-group-button {
    width: 100%;
    position: absolute;
    left: 0;
    height: 100%;
    top: 0;
    z-index: 0
}

.footer .footer-button-group .center-group-button .inner-center-group-button {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%
}

.footer .footer-button-group .center-group-button .inner-center-group-button .footer-separate-line {
    width: 1px;
    height: var(--primary-button-height);
    background-color: #646464;
    margin: 0 9px
}

.footer .footer-button-group .center-group-button .inner-center-group-button .switch-button .show-account-switch {
    color: #d4d7dc;
    line-height: 20px
}

.footer .footer-button-group .right-group-button {
    text-align: right;
    justify-content: flex-end;
    align-items: center;
    z-index: 1
}

.footer .footer-button-group .right-group-button .first-right-button-footer, .footer .footer-button-group .right-group-button .footer-main-button, .footer .footer-button-group .right-group-button .sm-button-primary {
    margin-left: 10px
}

.footer .footer-button-group .right-group-button .first-right-button-footer-disabled {
    opacity: .5;
    border: 1px solid transparent;
    color: #fff;
    background-color: #2ca01c !important
}

.footer .footer-button-group .right-group-button .right-label-footer {
    margin-right: 5px;
    color: #fff;
    background-color: transparent;
    position: relative;
    font-weight: 600
}

.footer .footer-button-group .right-group-button-reverse {
    align-items: center
}

.footer .footer-button-group .reason-cannot-action-wrap {
    border-radius: 5px;
    margin-left: 12px
}

.footer .footer-button-group .reason-cannot-action {
    height: 34px;
    padding: 7px 12px;
    background-color: #ffe1ce;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px
}

.footer .footer-button-group .reason-cannot-action .icon-help {
    background-position: -1435px -473px;
    margin-right: 7px
}

.footer .footer-button-group .reason-cannot-action .text-reason {
    color: #ed1c24
}

.footer .footer-button-group .reason-cannot-action .uncloseddate {
    margin-left: 8px;
    color: #0075c0
}

.footer .footer-button-group .reason-cannot-action .uncloseddate:hover {
    cursor: pointer
}

.status-bar {
    border-top: 1px solid #ddd;
    padding: 2px 12px;
    position: absolute;
    width: 100%;
    bottom: var(--footer-height);
    background: #fff
}

.branch-detail {
    font-size: 12px;
    padding: 2px 12px;
    position: absolute;
    bottom: var(--footer-height);
    background: #ebedf0;
    border-radius: 0 8px 0 0
}

.reference {
    padding-top: var(--reference-padding-top);
}

.sm-reference {
    display: flex;
    position: relative;
    align-items: center;
    width: fit-content;
}

.sm-reference .reference-title {
    margin-right: 20px;
    min-width: 75px;
}

.sm-reference .sm-reference-list .sm-reference-item {
    text-decoration: underline;
    margin-right: 12px;
}

.sm-reference .sm-reference-show-more {
    cursor: pointer;
    color: #0075c0;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    font-size: 12px;
}

.c-pointer {
    cursor: pointer;
}

.reference-link {
    color: #0075c0 !important;
}

.reference-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90px;
}


/* ======================== từ smart-icon.css ======================== */

/*Các thay đổi về toàn bộ ICON trên Ứng dụng*/

/*PDF*/

/* FLY OUT */
.sm-pdf, .sm-eye {
    overflow: visible;
}
    .sm-pdf:hover, .sm-eye:hover {
        zoom: 1;
        text-shadow: 0 6px 6px rgb(154, 34, 34);
    }

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/*3️⃣ UX PRO – Khi loading thì:
✔ Không hover
✔ Không click tiếp
✔ Không zoom */

.is-loading:hover {
    zoom: 1 !important;
    text-shadow: none !important;
    cursor: wait;
}

/* 🔴 Force Danger Button Background */
/*.btn-danger.e-control, .btn-danger.e-control.e-btn {
    background-color: #dc3545 !important;
}*/

/* 🟧 Force Warning Button Background */
/*.btn-warning.e-control, .btn-warning.e-control.e-btn {
    background-color: #fd7e14 !important;
}*/

/* ✅ Force Success Button Background */
/*.btn-success.e-control, .btn-success.e-control.e-btn {
    background-color: #28a745 !important;
}*/

/* ❌ Force Danger Status Button Background */
/*.btn-danger-status.e-control, .btn-danger-status.e-control.e-btn {
    background-color: #dc3545 !important;
}*/

/* 🔹 Ensure buttons are not overridden by Syncfusion */
/*.e-btn {
    background-color: transparent !important;
}*/

/* 🔹 Force white text and icon colors */
/*.btn i, .btn span, .e-btn i {
        color: white !important;
    }*/


/* ======================== từ theme.css ======================== */

/* Biến CSS (:root) của file này đã gom về erp-tokens.css (đợt 1 chuẩn hóa CSS, 08/09/2026).
   Thêm biến mới thì thêm ở đó, không mở lại :root ở đây. */

.smart-content .main-information {
    padding: 8px 20px var(--zone-padding) 20px;
    background-color: inherit;
}

.bg {
    background-color: var(--main-background-color);
}

.right-separate {
    padding-right: 16px;
}

.footer {
    padding: 0 !important;
}

.ms-button-footer {
    color: #fff !important;
    background-color: transparent !important;
    position: relative;
    border: 1px solid var(--button__footer-border-color);
}

.sm-button-size-default {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.smart-grid smart-grid-column {
    background: var(--main-background-color);
}

.smart-grid .smart-action-button, .smart-grid smart-grid-cell[header] {
    --smart-ui-state-hover: var(--main-background-color);
}

smart-grid-row[alternation-index="1"] smart-grid-cell:not([selected]):not([header]):not([update]):not([delete]):not([add]):not([freeze]):not([focus]):not([sort]):not([filter]) .smart-label {
    --smart-alternation-index0-background: var(--main-background-color);
}


/* ======================== từ erp-content.css ======================== */

/* Áp bộ thiết kế ERP cho VÙNG LÀM VIỆC và LƯỚI (SfGrid).
   Token khai ở erp-tokens.css (.tabs-body nằm trong danh sách selector).

   PHẠM VI CỐ Ý HẸP — chỉ đổi màu nền, màu dòng chọn và font chữ:
   - KHÔNG đổi mật độ dòng (padding, font-size của .e-rowcell / .e-headercell). Độ rộng cột
     do CMS cấu hình, đổi mật độ là lệch bố cục cột — xem chú thích đầu
     Modules/VoucherModule/Layout/VoucherView/VoucherView.razor.css.
   - KHÔNG đổi màu nút (e-success / e-danger còn nguyên, 244 + 75 chỗ trong .razor).
   Hai việc đó để lần sau, theo quyết định của người dùng 28/08/2026. */

/* ============ VÙNG LÀM VIỆC ============ */

/* Nền xám để hai panel trắng của VoucherView nổi lên và khe giữa chúng thành ranh giới
   (02-layout.md §5). Khe đó là thanh kéo của SfSplitter, nền trong suốt nên tự lấy màu này. */
.tabs > .tabs-body {
    background: var(--canvas);
}

/* Bắt buộc đi kèm: .tabs-body-content tự vẽ nền trắng phủ kín, không cho trong suốt thì
   màu canvas chỉ hiện ra ở dải padding — bẫy phụ mục 5, docs/voucher-view-port-kit/README.md. */
.tabs > .tabs-body .tabs-body-content {
    background: transparent;
}

/* ============ LƯỚI ============ */
/* Toàn bộ rule .e-grid của file này (màu header, dòng chọn, footer tổng) đã chuyển sang
   erp-syncfusion.css, mục "từ erp-content.css" (đợt 2 chuẩn hóa CSS, 08/09/2026). Font của
   .e-grid lấy từ --font-app ở erp-tokens.css. */

/* ======================== TOOLTIP HOVER TOÀN APP ======================== */
/* Một phần tử duy nhất, js/erp-tooltip.js tạo lúc cần và gắn vào <body>; token ở erp-tokens.css.
   position: fixed để không bị vùng cuộn (bảng, sidebar) cắt; z-index trên popup Smart.Blazor
   (--smart-zindex-popup 1050) và popup Syncfusion (~1000).
   white-space: pre-line — nội dung data-tooltip xuống dòng bằng 
 thật trong attribute.
   pointer-events: none — tooltip không bao giờ chắn con trỏ khỏi phần tử bên dưới. */
.erp-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    max-width: var(--tip-max-w, 320px);
    padding: var(--tip-pad, 5px 10px);
    border-radius: var(--tip-radius, 6px);
    background: var(--tip-bg, #1f2329);
    color: var(--tip-fg, #fff);
    font-family: var(--font-app, Inter, Arial, system-ui, sans-serif);
    font-size: var(--tip-fs, 12px);
    font-weight: 400;
    line-height: var(--tip-lh, 1.4);
    text-align: left;
    white-space: pre-line;
    box-shadow: var(--tip-shadow, 0 4px 12px rgba(0, 0, 0, .18));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .12s ease;
}

.erp-tooltip.is-on {
    opacity: 1;
    visibility: visible;
}