/* ==========================================================================
   LỚP NỀN — gộp từ 5 file (đợt 4 chuẩn hóa CSS, 08/09/2026)

   Nạp TRƯỚC bundle CSS isolation (SmartAccCloud.WebWasm.styles.css) nên mọi rule ở đây là
   "nền": file .razor.css của component ghi đè được mà không cần tăng specificity.

   Gộp nguyên văn theo ĐÚNG THỨ TỰ NẠP CŨ (app → erp-chrome → loading → voucher → toolbar-css),
   không sửa một rule nào, nên cascade không đổi → giao diện không đổi pixel (đã so 8 ảnh baseline).
   Ba chỗ hai file cũ cùng đặt một thuộc tính, thứ tự nối giữ nguyên bên thắng:
     .erp-shell .layout-header { border-bottom }   -> erp-chrome thắng (như cũ)
     .tabs { --bb-tabs-item-height }            -> erp-chrome thắng (như cũ)

   Token màu/chữ nằm ở erp-tokens.css (nạp ngay trước file này), ghi đè Syncfusion nằm ở
   erp-syncfusion.css (nạp cuối cùng). Rule mới thêm vào đúng mục bên dưới. */


/* ======================== từ app.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-element: font lấy từ --font-app (erp-tokens.css) */

.erp-shell {
    --bb-layout-header-background: var(--bb-header-bg);
    --bb-layout-sidebar-banner-background: #FFFFFF;
    /*Màu backgroud title*/
    /* --bb-layout-sidebar-banner-background: var(--bb-header-bg);*/
    --bb-layout-header-color: var(--bb-header-color);
    /*Màu chữ title*/
    --bb-layout-title-color: black;
    --bb-layout-sidebar-width: 236px !important;
    --bb-layout-banner-font-size: 1.3rem !important;
    --bb-layout-headerbar-background: transparent !important;
    --bb-layout-banner-logo-width: 50px !important;
    --bb-layout-sidebar-collapse-width: 64px !important;
    --bb-layout-menu-item-hover-bg: none;
}

    .erp-shell .layout-header {
        z-index: 1000 !important;
    }


.layout-header {
    border-bottom: 1px solid var(--bs-border-color);
}

    .layout-header .widget {
        margin-right: 2rem;
    }

/* Topbar co theo bề ngang (21/09/2026): chỉ combobox đơn vị được co, ba cụm còn lại giữ nguyên.
   Đo ở 1024px (sidebar 236px, header còn 788px): menu 288 + combobox 420 + năm 76 + avatar 54
   = 838px > 788px, và vì mọi item đều flex-shrink mặc định nên menu .snav bị ép/tràn tới 1092px.
   Đặt ở đây (global) vì .snav và .user-menu là root của component khác, CSS cô lập của
   MainLayout không với tới. */
.layout-header > .topbar-unit {
    flex: 0 1 420px;
    min-width: 160px;
}

.layout-header > .snav,
.layout-header > .header-db,
.layout-header > .user-menu {
    flex-shrink: 0;
}

.layout-banner {
    border-bottom: 1px solid var(--bs-border-color);
    background-color: var(--bb-layout-sidebar-banner-background);
}

.tabs-chrome > .tabs-header, .tabs-capsule > .tabs-header {
    --bb-tabs-chrome-item-height: 30px;
    --bb-tabs-item-body-padding: 5px 5px;
}

/*.erp-shell .layout-main {
    padding: 0.5rem;
}*/

.btn {
    /*Khoảng cách buttton và icon*/
    --bb-btn-label-margin-left: 10px !important;
}

/* .layout-banner .layout-logo {
        border: 1px solid var(--bb-header-color);
    }*/

.layout-side {
    border-right: 1px solid var(--bs-border-color);
}

.layout-footer {
    border-top: 1px solid var(--bs-border-color);
}

.dropdown-menu {
    max-height: none;
}

.layout-drawer {
    padding: 6px;
    cursor: pointer;
}

.layout-header-bar {
    color: red !important;
}

.nav-link {
    padding: 4px;
    /*font-size:13px;*/
}

.widget {
    --bb-widget-toggle-color: var(--bb-header-color);
}

    .widget .dropdown-menu {
        --bs-dropdown-min-width: 16rem;
    }

    .widget .dropdown-body h3 {
        color: #666666;
        font-size: 14px;
        margin-bottom: 10px;
    }

    .widget .dropdown-body h4 {
        color: #444444;
        font-size: 15px;
        margin: 0;
    }

    .widget .dropdown-body small {
        color: #999999;
        font-size: 10px;
        position: absolute;
        top: 0;
        right: 0;
    }

    .widget .dropdown-item {
        padding: 0.5rem 1rem;
        min-width: 100px;
    }

        .widget .dropdown-item > div:not(.progress):last-child {
            width: calc(100% - 40px);
        }

        .widget .dropdown-item.active,
        .widget .dropdown-item:active {
            color: inherit;
        }

        .widget .dropdown-item:not(:nth-of-type(odd)):active {
            background-color: inherit;
        }

    .widget .progress {
        height: 7px;
    }

.table-cell img {
    width: 46px;
    border-radius: var(--bs-border-radius);
}

.table-cell .progress {
    height: 6px;
    margin-top: .5rem;
}

.user-demo-address {
    margin-top: .25rem;
    font-size: 86%;
    color: #N0c4cc;
}

.table-users {
    height: calc(100% - 93px);
}

.cell-label {
    line-height: 35px;
}

/*.tabs {
    --bb-tabs-item-height: 30px !important;
}*/

.tabs-item .tabs-item-close {
    top: 0px !important;
    right: 0px;
}

.bb-fs-on, .bb-fs-open .bb-fs-off {
    display: none;
}

.tabs {
    --bb-tabs-item-height: 33px;
}

.menu {
    --bb-menu-active-color: #ffdfdf;
    --bb-menu-bar-bg: #ffdfdf;
    --bb-menu-item-hover-bg: none;
    --bb-menu-item-hover-color: #000000;
}

    .menu .submenu .nav-link.active {
        color: var(--bb-color-smart);
        background-color: none;
    }

/* ==========================================================================
   MÀN BOOT WASM — markup ở index.html (#app > .boot-screen)
   - Chỉ animate transform/opacity: lúc tải + biên dịch WASM main thread bận liên tục,
     hai thuộc tính này chạy trên compositor nên logo vẫn mượt, không giật theo nhịp tải.
   - --blazor-load-percentage / --blazor-load-percentage-text do blazor.webassembly.js
     tự đặt lên :root; số nhảy theo bậc nên thanh tiến độ có transition để trượt êm.
   - Màu lấy từ logo (đỏ #ED1C24, cam #F47B20). Không dùng --brand vì token đó chỉ khai
     trong vùng chrome, màn boot nằm ngoài.
   ========================================================================== */
.boot-screen {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    background: radial-gradient(ellipse at 50% 38%, #fff6f2 0%, #ffffff 55%, #f7f8fa 100%);
    font-family: Inter, Arial, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    animation: boot-fade-in 0.4s ease-out both;
}

.boot-logo {
    width: 76px;
    height: 76px;
    overflow: visible;
    margin-bottom: 0.4rem;
}

.boot-piece {
    transform-box: fill-box;
    transform-origin: center;
    animation: boot-breathe 1.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.boot-piece--tl { fill: #ED1C24; --boot-dx: -2.6px; --boot-dy: -2.6px; animation-delay: 0s; }
.boot-piece--tr { fill: #F47B20; --boot-dx: 2.6px; --boot-dy: -2.6px; animation-delay: 0.15s; }
.boot-piece--br { fill: #ED1C24; --boot-dx: 2.6px; --boot-dy: 2.6px; animation-delay: 0.3s; }
.boot-piece--bl { fill: #F47B20; --boot-dx: -2.6px; --boot-dy: 2.6px; animation-delay: 0.45s; }

.boot-title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #1e2530;
}

.boot-bar {
    position: relative;
    width: 200px;
    height: 4px;
    border-radius: 999px;
    background: #eceef1;
    overflow: hidden;
}

.boot-bar-fill {
    position: relative;
    height: 100%;
    width: var(--blazor-load-percentage, 0%);
    border-radius: inherit;
    background: linear-gradient(90deg, #ED1C24, #F47B20);
    transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
}

    /* Vệt sáng chạy qua phần đã tải — cho cảm giác vẫn đang chạy khi % đứng yên lâu */
    .boot-bar-fill::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
        transform: translateX(-100%);
        animation: boot-shimmer 1.4s ease-in-out infinite;
    }

.boot-text {
    min-height: 1.2em;
    font-size: 12px;
    color: #8b95a1;
    font-variant-numeric: tabular-nums;
}

    .boot-text::after {
        content: "Đang tải ứng dụng " var(--blazor-load-percentage-text, "");
    }

@keyframes boot-breathe {
    0%, 100% { transform: translate(0, 0); opacity: 1; }
    50% { transform: translate(var(--boot-dx), var(--boot-dy)); opacity: 0.55; }
}

@keyframes boot-shimmer {
    to { transform: translateX(100%); }
}

@keyframes boot-fade-in {
    from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .boot-screen,
    .boot-piece,
    .boot-bar-fill::after {
        animation: none;
    }

    .boot-bar-fill {
        transition: none;
    }
}
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 2000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

@supports not selector(::-webkit-scrollbar) {
    .scroll {
        scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0);
        scrollbar-width: thin;
    }
}

/*Custom css*/
.valid-label {
    font-size: 0.7rem;
    color: red;
}

.box-button {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.btn-coupon {
    font-size: 0.8rem !important;
}

.lbl-custom-coupon {
    font-size: 0.8rem;
}

.lbl-custom-title-coupon {
    font-size: 0.83rem;
}

@media (max-width: 1280px) {
    .lbl-custom-coupon {
        font-size: 0.7rem;
    }
}

.default-tab {
    border: 1px solid #d7d7d7;
}

th {
    padding: 5px 10px;
}

/*td {
    padding: 0px 10px;
}*/

.header-combox-custom {
    padding: 5px 10px;
}

.content-combox-custom {
    padding: 0px 10px;
}

/* ĐÃ NGỪNG DÙNG (28/08/2026) — toàn bộ khối từ đây tới hết ".col-megamenu a" chỉ phục vụ
   bộ MegaMenu*.razor cũ (dropdown Bootstrap). Menu topbar giờ là SmartNavbar với tiền tố
   class .snav-*, style nằm ở Layout/Component/Navbar/SmartNavbar.razor.css.
   Giữ lại chứ không xoá: các component cũ vẫn còn trên đĩa để đối chiếu / quay lui. */

/*============ desktop view ============ */
@media all and (min-width: 992px) {

    .navbar .has-megamenu {
        position: static !important;
    }

    .navbar .megamenu {
        left: 0;
        right: 0;
        width: 75rem;
        margin-top: 2px;
        max-height: none;
    }
}

@media (max-width: 1280.98px) {
    .navbar .megamenu {
        left: 0;
        right: 0;
        width: 50rem;
        margin-top: 2px;
        max-height: 500px;
    }
}

/* ============ desktop view .end// ============ */

/* ============ mobile view ============ */
@media (max-width: 991px) {
    .navbar.fixed-top .navbar-collapse, .navbar.sticky-top .navbar-collapse {
        overflow-y: auto;
        max-height: 90vh;
        margin-top: 10px;
    }
}

/* ============ mobile view .end// ============ */

/*====CSS MEGA MENU====*/

.navbar-nav .nav-link.show {
    background-color: none;
    color: var(--bb-color-smart);
    border-radius: 5px;
}

.navbar-nav {
    font-weight: 600;
}

    .navbar-nav .nav-item {
        font-size: 14px;
        font-weight: 500;
        border-style: solid;
        border-width: 0.5px;
        margin: 0 5px;
        /*transition: background-color 1s, border-radius 2s;*/
    }

        .navbar-nav .nav-item:hover {
            border-style: solid;
            border-width: 0.5px;
            border-color: var(--bb-color-smart);
            border-radius: 5px;
        }

        .navbar-nav .nav-item > a {
            font-weight: 600;
        }

        .navbar-nav .nav-item a:hover {
            color: var(--bb-color-smart);
        }

/* ul.navbar-nav .nav-item:active {
		background-color: #f5bcbc;

	} */

.megamenu {
    padding: 1rem 1.5rem;
    background-color: #F8F9FA;
}

.dropdown-toggle::after {
    display: none !important
}

.col-megamenu .nav-link {
    padding: 4px;
    font-size: 13px;
}

.col-megamenu h6 {
    color: var(--bb-color-smart);
    font-weight: 600;
}

.col-megamenu li {
    border-radius: 6px;
    transition: background-color 0.5s linear;
}

    .col-megamenu li:hover {
        background-color: #d5e1ee;
    }

.col-megamenu a {
    text-decoration: none;
}

/*@media only screen and (min-width: 992px) {
    .dropdown:hover .dropdown-menu {
        display: flex;
    }

    .dropdown-menu.show {
        display: flex;
    }
}
*/
/*.dropdown-menu {
    display: block;
    transition: visibility .5s, opacity .5s;
    opacity: 0;
    visibility: hidden;
}

    .dropdown-menu.show {
        display: block;
        visibility: visible;
        opacity: 1;
    }

    .dropdown-menu li {
        line-height: 1.8;
    }*/

/*====END CSS MEGA MENU====*/

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* Ô nhập tách khỏi nhóm nút: khi focus chỉ đổi viền, không quầng sáng.
   Quầng 0.25rem trước đây đè lên ô bên cạnh và lên đường kẻ của lưới. */
.form-control:focus, .form-check-input:focus {
    box-shadow: none;
    border-color: var(--smart-primary, #007bff);
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    /* Phải cao hơn popup của Smart.Blazor (container 1050, dialog 1052): đo thực tế 30/08/2026,
       ở z-index 1000 banner lỗi bị popup chứng từ full-screen che kín. */
    z-index: 1100;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.card-body {
    height: auto;
}

.smart-drop-down-box .smart-action-button {
    display: flex;
    padding-left: inherit;
}

smart-form,
smart-tabs {
    width: 100%;
}

    smart-tabs.auto-height {
        width: 100%;
        height: auto;
        min-height: initial;
    }

        smart-tabs.auto-height smart-tab-item:not(.smart-visibility-hidden) {
            position: relative;
        }

/* Header cell */
/*smart-grid-column,
.smart-grid-column-header {
    font-weight: 600;
    font-size: 12px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.1;
    max-height: 4.4em;
    overflow: hidden;
    text-overflow: ellipsis !important;
}*/

/*    .smart-grid-column-header .smart-grid-column-label {
        padding: 2px 4px !important;
    }
*/

/* Header cell */
/*smart-grid-column, .smart-grid-column-header {
    
    white-space: normal !important;*/ /* cho xuống dòng */
/*word-break: break-word;*/
/*line-height: 1.25;*/
/*height: auto !important;*/ /* cho header tự giãn */
/*min-height: 42px;*/ /* đủ cho 2 dòng */
/*overflow: visible !important;*/ /* không cắt chữ */
/*}*/

/* Label bên trong */
/*smart-grid-column, .smart-grid-column-header .smart-grid-column-label {*/
/*padding: 4px 6px !important;*/ /* sát 2 bên */
/*text-align: center;*/ /* tùy chọn */
/*}*/

smart-grid-column, .smart-grid-column-header {
    font-weight: 600;
    font-size: 12px;
}

/*.smart-grid:not(.stacked-column) smart-grid-column,
.smart-grid:not(.stacked-column) .smart-grid-column-header {
    height: 25px !important;
    line-height: 30px !important;
}*/

smart-input,
smart-date-input,
smart-date-time-picker,
smart-number-input,
smart-text-box,
smart-check-box {
    width: 100%;
    height: 26px;
}

smart-drop-down-grid,
smart-drop-down-list,
smart-drop-down-input {
    width: 100%;
    height: 26px !important;
}

.smart-drop-down-box.outlined > .smart-container > .smart-content {
    padding: 0;
    height: 28px;
}

smart-text-area {
    width: 100% !important;
    height: auto !important;
}

    smart-text-area textarea {
        line-height: normal;
    }

label {
    font-size: 13px;
    text-overflow: ellipsis;
    font-weight: 500;
    white-space: nowrap;
}

.smart-drop-down-input .smart-drop-down {
    padding: 0 !important;
}

.smart-multi-split-button {
    height: 26px;
    margin: 0 2px;
}

.smart-button {
    height: 26px;
    display: flex;
    align-items: center;
    /*margin: 0 2px;*/
}

smart-button[focus] {
    box-shadow: none !important;
}

/*button.smart-button[type]:hover {
    box-shadow: none !important;
    background-color:transparent !important;
}*/

smart-button.flat[focus] {
    border-color: transparent;
}

.smart-button.outlined button {
    padding: 4px 8px;
    font-size: 12px;
}

.smart-button.active {
    color: var(--smart-default-clr);
    font-weight: 500;
    text-decoration: underline;
}

/* Icon lu-* (css/icons.css) trong nút Smart.Blazor: nút có chữ 16px, nút chỉ có icon (.smart-icon,
   26x26) 24px — thay cho Material Icons 16px/26px trước 30/09/2026. */
.smart-button :is([class^="lu-"], [class*=" lu-"]) {
    --ic-size: 16px;
    --ic-art: var(--ic16);
}

.smart-button.smart-icon > button {
    height: 26px;
    width: 26px;
    margin: 0;
    padding: 0;
}

.smart-button.smart-icon :is([class^="lu-"], [class*=" lu-"]) {
    --ic-size: 24px;
    --ic-art: var(--ic24);
}

.base-view {
    /*padding: 8px 8px 0 8px;*/
    max-width: calc(100vw - 16px);
}

.image-icon {
    width: 68px;
    height: 44px;
    border: 1px solid #c5c5c5;
    align-items: center;
    display: flex;
    justify-content: center;
    border-radius: 4px;
    margin-right: 8px;
    border-color: var(--smart-success);
    color: var(--smart-success);
}

/* Icon menu hướng dẫn (lu-video, lu-document-pdf…) 24px, bản vẽ Fluent cỡ 24. */
.image-icon :is([class^="lu-"], [class*=" lu-"]) {
    --ic-size: 24px;
    --ic-art: var(--ic24);
}

.smart-menu[checkboxes][checkable] smart-menu-item[level="1"][checked] > .smart-menu-item-label-container::after {
    content: var(--smart-icon-check) !important;
    color: var(--smart-primary);
}

.attach {
}

.smart-grid-icon.filtering:after {
    content: var(--smart-icon-visibility-off);
}

.smart-query-builder smart-drop-down-grid {
    box-shadow: unset;
    border: unset;
    max-height: 100%;
    max-width: 100%;
}

.smart-query-builder
.filter-builder-item.smart-filter-value
smart-drop-down-grid.smart-input {
    width: 100%;
    height: 100%;
    border-top-left-radius: var(--smart-border-top-left-radius) !important;
    border-top-right-radius: var(--smart-border-top-right-radius) !important;
    border-bottom-left-radius: var(--smart-border-bottom-left-radius) !important;
    border-bottom-right-radius: var(--smart-border-bottom-right-radius) !important;
}

smart-drop-down-grid.smart-input[focus] {
    --smart-border: #007bff;
    --smart-outline: #007bff;
    /* hai biến trên đã lo phần viền, không cần thêm quầng */
    box-shadow: none;
}

/* Cả họ input của Smart.Blazor: khi focus chỉ có viền/outline, không quầng sáng.
   Các control này vốn vẽ vòng focus bằng --smart-outline chứ không bằng
   box-shadow, nên khối này là chốt chặn cho các biến thể validation. */
smart-input[focus],
smart-text-box[focus],
smart-multiline-text-box[focus],
smart-drop-down-list[focus],
smart-combo-box[focus],
smart-date-time-picker[focus],
smart-numeric-text-box[focus],
smart-masked-text-box[focus],
smart-drop-down-grid[focus],
.smart-input[focus] {
    box-shadow: none !important;
}

smart-drop-down-grid.smart-input.smart-validation-error {
    margin-bottom: 0.75rem;
}

    smart-drop-down-grid.smart-input.smart-validation-success:not(smart-check-box) > div.smart-container:after,
    smart-drop-down-grid.smart-input.smart-validation-error:not(smart-check-box) > div.smart-container:after {
        display: none;
    }

    smart-drop-down-grid.smart-input.smart-validation-success .smart-input,
    smart-drop-down-grid.smart-input.smart-validation-error .smart-input {
        padding-right: calc(1.5em + 0.75rem);
        background-repeat: no-repeat;
        background-position: right calc(0.375em + 0.1875rem) center;
        background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    }

    smart-drop-down-grid.smart-input.smart-validation-success.underlined[focus],
    smart-drop-down-grid.smart-input.smart-validation-success.outlined[focus],
    smart-drop-down-grid.smart-input.smart-validation-error.underlined[focus],
    smart-drop-down-grid.smart-input.smart-validation-error.outlined[focus] {
        box-shadow: none;
    }

smart-drop-down-grid.smart-input.smart-validation-success {
    --smart-border: #28a745;
    --smart-outline: #28a745;
}

    smart-drop-down-grid.smart-input.smart-validation-success[focus] {
        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
    }

    smart-drop-down-grid.smart-input.smart-validation-success .smart-input {
        background-image: url("data:image/svg+xml,%3csvg xmlns= 'http://www.w3.org/2000/svg' width= '8' height= '8' viewBox= '0 0 8 8' %3e%3cpath fill= '%2328a745' d= 'M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z' /%3e%3c/svg%3e");
        border-color: #28a745;
    }

    smart-drop-down-grid.smart-input.smart-validation-success.underlined[focus]
    .smart-hint:after {
        background-color: #28a745;
    }

    smart-drop-down-grid.smart-input.smart-validation-success.underlined[focus],
    smart-drop-down-grid.smart-input.smart-validation-success.outlined[focus] {
        box-shadow: none;
    }

smart-drop-down-grid.smart-input.smart-validation-error {
    --smart-border: #dc3545;
    --smart-outline: #dc3545;
}

    smart-drop-down-grid.smart-input.smart-validation-error[focus] {
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
    }

    smart-drop-down-grid.smart-input.smart-validation-error .smart-input {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
        border-color: #dc3545;
    }

    smart-drop-down-grid.smart-input.smart-validation-error.underlined[focus]
    .smart-hint:after {
        background-color: #dc3545;
    }

    smart-drop-down-grid.smart-input.smart-validation-error.underlined[focus],
    smart-drop-down-grid.smart-input.smart-validation-error.outlined[focus] {
        box-shadow: none;
    }

smart-drop-down-grid.smart-input.underlined,
smart-drop-down-grid.smart-input.outlined {
    box-shadow: none;
}

.smart-grid-summary-row-cell .summary-value,
smart-grid-cell[addNewRow] {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 550;
    justify-content: end;
}

.toast-container {
    z-index: 99999;
}

.title-dialog {
    font-size: 1.4rem;
    color: #111;
    font-weight: 600;
}

.smart-grid smart-grid-cell .smart-grid-command-item {
    /*display: none*/
}

smart-grid .smart-grid-add-row-button.float,
smart-grid .smart-grid-add-row-button.show:hover {
    background: var(--smart-default-clr);
    border: 1px solid var(--smart-default-clr);
}

.smart-grid {
    width: 100%;
}

smart-scroll-viewer {
    position: relative;
    display: block;
}

    smart-scroll-viewer > smart-grid {
        max-height: 100%;
        overflow: auto;
    }

.f2-hint {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

.custom-input-dropdown {
    position: relative;
    width: 280px;
    font-family: Arial, sans-serif;
}

.custom-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid #ccc;
    padding: 10px;
    z-index: 9999;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: transform 0.4s ease;
}

    .custom-dropdown.show {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

.dropdown-item {
    /*display: flex;*/
    align-items: center;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
}

    /*.dropdown-item:hover {
background-color: #0078d4;
}*/

    .dropdown-item input[type="radio"] {
        margin-right: 8px;
        accent-color: #00bcd4;
        width: 16px;
        height: 16px;
        cursor: pointer;
    }

    .dropdown-item.selected {
        color: #00bcd4;
        font-weight: 500;
    }

.navbar-nav {
    --bs-nav-link-font-weight: 500;
}

[data-title]:hover:after {
    visibility: visible;
    opacity: 1;
    transition: all 0.2s ease 0.6s;
}

[data-title]:after {
    content: attr(data-title);
    background-color: #4b9c2c;
    color: #ffffff;
    font-size: 150%;
    position: absolute;
    padding: 4px 8px 4px 8px;
    visibility: hidden;
}

#gridContainer {
    display: flex;
    height: 100%;
}

#grid-left,
#grid-right {
    height: 100%;
}

.gutter {
    background-color: #ddd;
    background-repeat: no-repeat;
    background-position: 50%;
}

    .gutter.gutter-horizontal {
        cursor: col-resize;
        width: 4px;
    }

#watermark {
    visibility: hidden;
}

/*.e-numeric {*/
/*    height: 27px;*/
/*}*/

/*.e-numerictextbox {*/
/*    height: auto !important;*/
/*}*/

.smart-drop-down-grid .smart-drop-down-button .plus {
    display: flex;
    height: 100%;
    overflow: hidden;
    cursor: pointer;
    font-family: var(--smart-font-family-icon);
    justify-content: center;
    align-items: center;
    font-size: var(--smart-arrow-size);
    outline: 0;
}

    .smart-drop-down-grid .smart-drop-down-button .plus::after {
        content: var(--smart-icon-plus);
        font-size: x-small;
        color: #0069D9;
    }

[invisible] {
    visibility: hidden
}

.erp-shell .layout-header, .erp-shell .layout-banner {
    border-bottom: 1px solid #FF6363;
}

.tabs-chrome > .tabs-header .tabs-item-wrap.active .tabs-item {
    color: #FF6363;
    font-weight: 600;
}

.tabs-chrome > .tabs-header .tabs-item-wrap:not(.active) .tabs-item:not(.disabled) .tabs-item-body:hover {
    color: #FF6363;
}

.radio-row {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 8px 12px;
    border-radius: 8px;
}

.radio-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #111827;
}

    .radio-item input[type="radio"] {
        width: 16px;
        height: 16px;
        accent-color: #3b82f6;
    }

.label-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.smart-logo {
    max-width: 70%;
    height: auto;
}

img {
    vertical-align: middle;
    border-style: none;
}

.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.title-login {
    font-size: 24px;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.21;
    letter-spacing: normal;
    text-align: center;
    color: #333;
}

.mw-496 {
    max-width: 496px;
}

.padding-card-custom {
    padding-left: 48px !important;
    padding-right: 48px !important;
    border: 1px solid #dadce0;
    border-radius: 8px !important;
}

.mt-14px {
    margin-top: 22px;
}

.mb-65 {
    margin-bottom: 60px !important;
}

.text-wrap {
    text-wrap: inherit;
}

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

.center-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 100vh;
}

.center-screen-register {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.show-saler-button {
    color: #3779e8;
    margin-right: 8px;
    cursor: pointer;
}

.show-saler-note {
    color: #757575;
}

.wrap-register a {
    color: #3779e8;
    text-decoration: none;
}

.wrap-success {
    width: 100%;
    border-radius: 4px;
    padding: 40px;
    background: #fff;
    position: relative;
    max-width: 640px;
}

    .wrap-success .success-form-des {
        border-radius: 4px;
        color: #212121;
        line-height: 24px;
        font-size: 16px;
        width: 100%;
        text-align: left;
        margin-top: 24px;
    }

.success-form {
    text-align: center;
}

.success-bg {
    width: 116px;
    margin: 0 auto;
    height: 116px;
    margin-bottom: 24px;
    display: block;
}

.reg-icon-success {
    background-image: url(../assets/success.svg);
}

.reg-icon-warning {
    background-image: url(../assets/warning.svg);
}

.success-form-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 29px;
    text-align: center;
    display: block;
    margin-bottom: 8px;
}

.row-is-create td {
    background-color: #BBF7C1 !important;
    color: #b00000;
}

.row-is-cancel td {
    background-color: #FE6D7A66 !important;
    color: #b00000;
}

.success-account-info {
    text-align: center;
    padding: 15px;
    border-radius: 4px;
}


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

/* Áp bộ thiết kế ERP lên phần "chrome" do BootstrapBlazor Layout tự render
   (topbar, tabstrip) và lên các control Syncfusion đặt trong topbar.

   Vì sao phải là CSS global chứ không phải .razor.css: những phần tử này do thư viện
   sinh ra nên không mang attribute scope của MainLayout — CSS cô lập không với tới.

   Link SAU app.css trong index.html: file này cố ý ghi đè vài khối cũ ở app.css
   (tab active #FF6363, viền header #FF6363). Các khối đó được giữ nguyên tại chỗ. */

/* ============ TOPBAR (02-layout.md §1) ============ */

.erp-shell {
    /* 50px theo yêu cầu (mẫu vẽ 52px) — cũng đúng mặc định của BootstrapBlazor.
       SmartSidebar tính chiều cao bằng calc(100% - var(--bb-layout-header-height)) và
       mega menu bám top theo biến này, nên đổi ở đây là cả hai theo cùng. */
    --bb-layout-header-height: 50px;
}

.erp-shell .layout-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    color: var(--ink);
    font-size: var(--fs-13);
}

/* app.css:1123 tô viền dưới header và banner màu #FF6363 — bộ thiết kế chỉ dùng đỏ cho
   trạng thái, không cho viền trang trí. */
/* Ba mức (.erp-shell .layout-side .layout-banner) chứ không phải hai: thời còn BootstrapBlazor Layout, rule
   .layout .layout-banner (0,2,0) của bundle thư viện nạp SAU file này làm mất viền dưới của banner. Từ 20/10/2026
   khung tự dựng không còn .layout nên rule đó không khớp nữa; giữ ba mức cho chắc. */
.erp-shell .layout-side .layout-banner {
    /* Kẻ dưới logo phải liền mạch với kẻ dưới topbar bên phải. */
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

/* Kẻ dọc của sidebar phải bắt đầu TỪ DƯỚI topbar, không chạy lên tận đỉnh: trong mẫu dải
   trên cùng là một mảng trắng liền, còn ở đây .layout-side viền suốt chiều cao nên cắt đôi
   topbar thành ô logo + phần còn lại. SmartSidebar (.sb) đã tự vẽ viền phải của mình, nằm
   đúng dưới banner, nên bỏ viền của .layout-side đi là khớp mẫu.
   Riêng lúc thu gọn, .sb chuyển sang position:absolute nên trả viền lại cho .layout-side. */
.erp-shell .layout-side {
    border-right: none;
}

.erp-shell.is-collapsed .layout-side {
    border-right: 1px solid var(--border);
}

/* — cụm người dùng (Layout/Component/Account/UserMenu, thay <Logout> BootstrapBlazor 21/10/2026) — */
/* Avatar tròn mang chữ cái đầu của tên, theo mẫu thiết kế (02/09/2026). */
.user-menu {
    position: relative;
}

.user-menu-toggle {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

/* Avatar tự lo vòng tròn; viền focus bàn phím đặt quanh vòng tròn thay vì cả nút (rộng hơn vì margin). */
.user-menu-toggle:focus {
    outline: none;
}

.user-menu-toggle:focus-visible .custom-logout {
    outline: 2px solid var(--brand-line);
    outline-offset: 2px;
}

/* .erp-shell .layout-header thay vì .layout-header: CSS isolation của MainLayout
   (.custom-logout[b-xxx]) cùng specificity mà lại được nạp sau trong index.html. */
.erp-shell .layout-header .custom-logout {
    background: var(--brand-soft);
    border: 1px solid var(--brand-line);
    color: var(--brand);
    font-size: var(--fs-13);
    font-weight: 600;
    line-height: 1;
}

.erp-shell .layout-header .custom-logout:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

/* Trong suốt như dropdown cũ (không làm tối trang), chỉ để bắt cú bấm ra ngoài. */
.user-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
}

/* Popup theo bố cục mẫu 07/10/2026: header nền nhạt có avatar + tên + nhãn vai trò, danh sách chia nhóm bằng đường
   kẻ, "Đăng xuất" tách riêng màu brand ở cuối. Vị trí/cỡ đo lại từ bản BootstrapBlazor: căn phải với avatar, cách
   2px, rộng 260px, chữ nền 14px. Popup nằm TRONG .layout-header nên token erp-tokens.css kế thừa xuống. */
.user-menu-pop {
    position: absolute;
    top: calc(100% + 2px);
    right: 0;
    z-index: 1000;
    min-width: 260px;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-pop);
    color: var(--ink);
    font-size: var(--fs-14);
    line-height: 1.5;
    text-align: left;
    white-space: nowrap;
    /* Cùng hiệu ứng mở với menu của ErpDropdownMenu/ErpSplitButton (keyframe khai ở WebComponents/scss/_erpbutton.scss). */
    animation: erp-menu-rise 160ms cubic-bezier(.2, .8, .2, 1), erp-menu-fade 120ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .user-menu-pop {
        animation: none;
    }
}

.user-menu-pop:focus {
    outline: none;
}

.user-menu-head {
    padding: 14px 16px;
    background: linear-gradient(180deg, var(--brand-soft), var(--surface));
    border-bottom: 1px solid var(--border);
}

.erp-shell .layout-header .logout-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.erp-shell .layout-header .logout-head-avatar {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--brand), var(--accent));
    color: #fff;
    font-size: var(--fs-14);
    font-weight: 700;
}

.erp-shell .layout-header .logout-head-info {
    flex: 1 1 auto;
    min-width: 0;
}

.erp-shell .layout-header .logout-dn {
    font-size: var(--fs-14);
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.erp-shell .layout-header .logout-code {
    color: var(--ink-3);
    font-size: var(--fs-12);
    line-height: 1.3;
}

.erp-shell .layout-header .logout-role {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--brand-soft);
    border: 1px solid var(--brand-line);
    color: var(--brand);
    font-size: var(--fs-11);
    font-weight: 600;
}

/* Padding nhóm đặt ở .user-menu-links còn hover tô từng thẻ <a>. */
.user-menu-links {
    padding: 6px;
}

.user-menu-links > a {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-size: var(--fs-13);
    text-decoration: none;
    cursor: pointer;
}

.user-menu-links > a > i {
    margin: 0;
    color: var(--ink-3);
    font-size: 16px;
}

.user-menu-links > a:hover,
.user-menu-links > a:focus {
    background: var(--brand-soft);
    color: var(--brand);
}

.user-menu-links > a:hover > i,
.user-menu-links > a:focus > i {
    color: var(--brand);
}

/* Dòng phiên bản chỉ để xem, không bấm được: giữ màu nhạt, không hover. */
.user-menu-links > a.logout-version,
.user-menu-links > a.logout-version:hover {
    background: none;
    color: var(--ink-3);
    cursor: default;
}

.user-menu-links > a.logout-exit,
.user-menu-links > a.logout-exit > i {
    color: var(--brand);
}

.user-menu-links .logout-sep {
    height: 1px;
    margin: 6px 4px;
    background: var(--border);
}

/* ============ TABSTRIP (02-layout.md §4) ============ */
/* Từ 20/10/2026 thanh tab của KHUNG APP là Layout/Shell/ErpTabBar (CSS riêng ở ErpTabBar.razor.css, chép đúng các
   số dưới đây). Các rule .tabs > .tabs-header dưới đây chỉ còn áp cho <Tab> BootstrapBlazor đặt bên trong trang/popup. */

/* Chiều cao tab đi qua biến của thư viện (app.css:226 đang để 33px): thư viện dùng biến này
   cho cả .tabs-nav-wrap lẫn .tabs-item, đặt height cứng cho riêng .tabs-item không ăn. */
.tabs {
    --bb-tabs-item-height: 30px;
}

.tabs > .tabs-header {
    background: var(--surface);
    border: none;
    border-bottom: 1px solid var(--border);
}

.tabs > .tabs-header .tabs-nav-wrap::after {
    /* Thư viện vẽ sẵn một dải 2px xám dưới thanh tab — thiết kế chỉ có viền 1px của header. */
    display: none;
}

/* Kẻ dọc giữa các tab: thư viện đặt border-right ở một rule sâu hơn nên phải nhắm qua
   .tabs-nav mới thắng — thiết kế không có kẻ dọc giữa tab. */
.tabs > .tabs-header .tabs-nav .tabs-item {
    padding: 0 10px;
    justify-content: center;
    text-align: center;
    border: none;
    background: transparent;
    color: var(--ink-2);
    font-size: var(--fs-13);
    font-weight: 600;
}

.tabs > .tabs-header .tabs-nav .tabs-item:hover {
    color: var(--ink);
}

/* Lớp .active nằm ở .tabs-item-wrap chứ không ở .tabs-item (kiểm bằng DOM thật). */
.tabs > .tabs-header .tabs-nav .tabs-item-wrap.active .tabs-item {
    color: var(--brand);
    background: transparent;
    box-shadow: inset 0 -2px 0 0 var(--brand);
}

/* Nút đóng chỉ chiếm chỗ khi rê chuột vào tab.
   Thư viện ẩn nút bằng `visibility: hidden` nhưng giữ nguyên ô 21px trong flex, nên chữ
   luôn lệch trái ~10px so với tâm tab kể cả lúc không hover (đo trên DOM thật: .tabs-item-body
   rộng 81px = chữ 60 + nút 21, x của chữ không đổi giữa hai trạng thái). Co bề ngang về 0 để
   chữ căn giữa thật, hover thì nở lại — chữ tự trượt sang trái, đó là hiệu ứng di chuyển.

   KHÔNG đụng tới `visibility`: thư viện dùng nó để biết tab nào được phép đóng. Vì vậy phần
   chừa chỗ cũng nhắm qua `.is-closeable` — tab không đóng được thì không tạo khoảng trống
   thừa lúc hover. */
.tabs > .tabs-header .tabs-nav .tabs-item .tabs-item-close {
    width: 0;
    opacity: 0;
    overflow: hidden;
    font-weight: 400;
    transition: width .15s ease, opacity .15s ease;
}

.tabs > .tabs-header .tabs-nav .tabs-item.is-closeable:hover .tabs-item-close {
    width: 21px;
    opacity: .45;
}

/* Rê thẳng vào nút thì đậm hẳn. Phải lồng trong `:hover` của tab để thắng rule nở ở trên
   (0,4,0) — để riêng `.tabs-item-close:hover` là 0,3,0, thua và không có tác dụng. */
.tabs > .tabs-header .tabs-nav .tabs-item.is-closeable:hover .tabs-item-close:hover {
    opacity: 1;
    background: var(--surface-alt);
    border-radius: 4px;
}

/* Thanh trượt màu xanh mặc định chạy dưới tab đang chọn: thiết kế dùng viền đỏ 2px của
   chính tab (rule .active ở trên) nên tắt hẳn thanh này. */
.tabs > .tabs-header .tabs-active-bar {
    display: none;
}

/* Các ô của thanh tab tự vẽ viền riêng (dưới + dọc), chồng lên viền 1px của cả tabstrip.
   Phải nhắm qua cả .tabs-nav / .tabs-nav-wrap: rule của thư viện ở mức 0,3,0 và nạp sau
   file này, nên selector 3 mức không thắng (đo trên DOM thật). */
.tabs > .tabs-header .tabs-nav .tabs-item-fix,
.tabs > .tabs-header .tabs-nav-wrap .tabs-nav-toolbar,
.tabs > .tabs-header .tabs-nav-wrap .nav-link-bar {
    border-width: 0;
}

/* Cụm nút ‹ › ⟳ ⛶ ⌄: icon-button 30x30 (03-components.md §2). */
.tabs > .tabs-header .nav-link-bar-button,
.tabs > .tabs-header .tabs-nav-toolbar-button {
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: var(--radius-sm);
    color: var(--ink-2);
}

.tabs > .tabs-header .nav-link-bar-button:hover,
.tabs > .tabs-header .tabs-nav-toolbar-button:hover {
    background: var(--surface-alt);
    color: var(--ink);
}

/* Icon của thanh tab (‹ › ⟳ ⛶ ⌄ và nút đóng tab rộng 21px): 16px, bản vẽ Fluent cỡ 16
   (css/icons.css) — cỡ mặc định 20px quá to cho dải tab. */
.tabs > .tabs-header :is(.nav-link-bar-button, .tabs-nav-toolbar-button, .tabs-item-close) :is([class^="lu-"], [class*=" lu-"]) {
    --ic-size: 16px;
    --ic-art: var(--ic16);
}

/* ============ Điều hướng bàn phím (03-components.md §9) ============ */

.layout-header :focus-visible,
.tabs-header :focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}


/* ======================== từ loading.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. */

/*Logo Loading*/

.logo-container {
    z-index: 100;
    width: 100vw;
    height: 100vh;
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;
    opacity: 0.8;
    user-select: none;
}

@keyframes moveInCircle {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes moveVertical {
    0% {
        transform: translateY(-50%);
    }

    50% {
        transform: translateY(50%);
    }

    100% {
        transform: translateY(-50%);
    }
}

@keyframes moveHorizontal {
    0% {
        transform: translateX(-50%) translateY(-10%);
    }

    50% {
        transform: translateX(50%) translateY(10%);
    }

    100% {
        transform: translateX(-50%) translateY(-10%);
    }
}

.gradient-bg {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
    background: linear-gradient(40deg, var(--color-bg1), var(--color-bg2));
    top: 0;
    left: 0;
}

    .gradient-bg svg {
        position: fixed;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
    }

    .gradient-bg .gradients-container {
        filter: url(#goo) blur(40px);
        width: 100%;
        height: 100%;
    }

    .gradient-bg .g1 {
        position: absolute;
        background: radial-gradient(circle at center, rgba(var(--color1), 0.8) 0, rgba(var(--color1), 0) 50%) no-repeat;
        mix-blend-mode: var(--blending);
        width: var(--circle-size);
        height: var(--circle-size);
        top: calc(50% - var(--circle-size) / 2);
        left: calc(50% - var(--circle-size) / 2);
        transform-origin: center center;
        animation: moveVertical 30s ease infinite;
        opacity: 1;
    }

    .gradient-bg .g2 {
        position: absolute;
        background: radial-gradient(circle at center, rgba(var(--color2), 0.8) 0, rgba(var(--color2), 0) 50%) no-repeat;
        mix-blend-mode: var(--blending);
        width: var(--circle-size);
        height: var(--circle-size);
        top: calc(50% - var(--circle-size) / 2);
        left: calc(50% - var(--circle-size) / 2);
        transform-origin: calc(50% - 400px);
        animation: moveInCircle 20s reverse infinite;
        opacity: 1;
    }

    .gradient-bg .g3 {
        position: absolute;
        background: radial-gradient(circle at center, rgba(100, 220, 255, 0.8) 0, rgba(100, 220, 255, 0) 50%) no-repeat;
        mix-blend-mode: hard-light;
        width: 80%;
        height: 80%;
        top: calc(50% - 80% / 2 + 200px);
        left: calc(50% - 80% / 2 - 500px);
        transform-origin: calc(50% + 400px);
        animation: moveInCircle 40s linear infinite;
        opacity: 1;
    }

    .gradient-bg .g4 {
        position: absolute;
        background: radial-gradient(circle at center, rgba(var(--color4), 0.8) 0, rgba(var(--color4), 0) 50%) no-repeat;
        mix-blend-mode: var(--blending);
        width: var(--circle-size);
        height: var(--circle-size);
        top: calc(50% - var(--circle-size) / 2);
        left: calc(50% - var(--circle-size) / 2);
        transform-origin: calc(50% - 200px);
        animation: moveHorizontal 40s ease infinite;
        opacity: 0.7;
    }

    .gradient-bg .g5 {
        position: absolute;
        background: radial-gradient(circle at center, rgba(var(--color5), 0.8) 0, rgba(var(--color5), 0) 50%) no-repeat;
        mix-blend-mode: var(--blending);
        width: calc(var(--circle-size) * 2);
        height: calc(var(--circle-size) * 2);
        top: calc(50% - var(--circle-size));
        left: calc(50% - var(--circle-size));
        transform-origin: calc(50% - 800px) calc(50% + 200px);
        animation: moveInCircle 20s ease infinite;
        opacity: 1;
    }
    .gradient-bg .interactive {
        position: absolute;
        background: radial-gradient(circle at center, rgba(var(--color-interactive), 0.8) 0, rgba(var(--color-interactive), 0) 50%) no-repeat;
        mix-blend-mode: var(--blending);
        width: 100%;
        height: 100%;
        top: -50%;
        left: -50%;
        opacity: 0.7;
    }


/* ======================== từ voucher.css ======================== */

#poup-voucher-detail {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
}

.body-container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow-y: auto;
}

.main-information,
.tab-detail,
.summary {
  /*    height:100%;*/
  width: 100%;
  min-width: 0;
}

/*==============SUMMARY=============*/
.summary {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  bottom: 0;
  padding: 8px 8px 10px 8px;
  background: #b9dbff42;
}

.summaryimp {
  display: grid;
  grid-template-columns: 33% 33% 34%;
  bottom: 0;
  padding: 8px 8px 10px 8px;
  background: #b9dbff42;
}

.summary label {
  display: flex;
  align-items: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 700;
}

.summary .smart-form-row {
  display: grid;
  grid-template-columns: 110px 1fr 1fr;
  gap: 6px;
}

.summary-value,
.summary-foreign-currency-value {
  display: flex;
  flex-direction: row-reverse;
  font-weight: 500;
  /*width: 160px;*/
}

/*==============MAIN-INFO=============*/
.main-information {
  background-color: aliceblue;
  padding: 0px 8px 8px 8px;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  border-bottom: 1px solid #ccc;
}

.main-information .row {
  margin-right: 0px;
  margin-left: 0px;
}

.main-information label,
.tab-header-extend label {
  display: flex;
  align-items: center;
  height: 26px;
  font-weight: 400;
}

.main-information .smart-form-row,
.tab-header-extend .smart-form-row {
  display: grid;
  padding: 4px 2px;
  grid-template-columns: 130px auto;
  align-items: center;
}

.main-information .smart-form-row-defaul {
  display: grid;
  padding: 2px;
  grid-template-columns: auto;
}

.main-information .smart-form-button-row {
  display: grid;
  padding: 2px;
  /*    grid-template-columns: 125px auto;*/
  grid-template-columns: auto 1fr;
}

.main-information .smart-form-row-long {
  display: grid;
  padding: 2px;
  grid-template-columns: 150px auto;
  align-items: center;
}

.main-infomation__right {
  flex-basis: 35%;
}

.main-infomation__left {
  flex-basis: 65%;
}

.tab-header-extend {
  align-items: center;
  gap: 5px;
}

/*==============TAB-CONTENT=============*/

.tab-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 0 0 auto;
  padding: 6px 6px 0 6px;
}

.tab-header-button {
  gap: 4px;
}

.tab-content {
  flex: 1 1 450px;
  width: 100%;
  min-height: 0;
}

.tab-content .smart-grid {
  height: 100%;
  width: 100%;
}

.top-header {
  display: flex;
  padding: 10px 0;
  justify-content: space-between;
}

.top-header.top-header--voucher {
  border-bottom: 1px solid #ccc;
}

.top-header .header-title,
.top-header .header-action,
.top-header .header-button {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Tiêu đề popup không còn icon đứng trước (bỏ icon giỏ hàng/danh sách theo yêu cầu của Đạt
   30/09/2026): lùi 10px cho thẳng mép nhãn trường bên dưới, không thì chữ dính sát mép popup. */
.top-header .header-title > .title:first-child {
  padding-left: 10px;
}

.top-header .header-title .title {
  font-weight: 700;
  font-size: 1.2rem;
  top: -7px;
  left: 20px;
  color: #111;
  white-space: nowrap;
  /*overflow: hidden;*/
  text-overflow: ellipsis;
}

.content-voucher__container {
  height: 100%;
}

.content-voucher__detail {
  height: calc(100% - 48px);
}

.content-voucher__detail div:first-child {
  height: 100%;
}

.toggle-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.arrow-expand > i {
  transition: all ease 0.3s;
}

.arrow-expand.expanded > i {
  transform: rotate(90deg);
}

.toggle-box {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0;
  gap: 16px;
}

.toggle-box__item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px;
}

.toggle-box__highlight {
  color: #ffaaaa;
}

.filter-voucher {
  padding: 16px;
}

.filter-voucher__title {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
  display: inline-block;
}

.filter-voucher__action {
  display: flex;
  justify-content: space-between;
}


/* ======================== từ toolbar-css.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. */

.toolbar-layout {
    background: #fff;
    padding: var(--horizontal-control-padding-y) 12px;
    position: relative;
}

.flex {
    display: flex;
}

.flex-grow {
    flex-grow: 1;
    gap: 1rem;
}

.inline {
    display: flex;
}

.arrow-all {
    display: inline-block;
    padding: 4px 12px 0px 0px;
}

.filter-item {
    display: inline-block;
    position: relative;
    margin-right: 10px;
    color: #0075c0;
    padding-right: 20px;
    white-space: normal;
    line-height: 20px;
}

.ultility-buttons {
    justify-content: flex-end;
    display: flex;
    align-items: center;
}
/*
.list-button {
    padding: 0 6px;
}*/