/* ==========================================================================
   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:
     .layout .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. */

/* Font: xem --font-app trong erp-tokens.css (nguồn duy nhất) */
html, body, button {
    font-size: calc(.9 * var(--smart-font-size));
}

/* .smart-element: font lấy từ --font-app (erp-tokens.css) */

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

/* Sidebar do SmartSidebar tự vẽ trong <Side>. Tham số Menus của Layout vẫn được giữ
   (Tab tra tiêu đề tab qua Layout.Menus cho page không có [TabItemOption]) nên phải ẩn
   <Menu> mặc định ở đây — CSS cô lập của component không với tới element của thư viện. */
.layout .layout-menu {
    display: none;
}

/* Khi thu gọn, giữ nguyên 64px kể cả lúc hover: BootstrapBlazor mặc định nở aside ra và
   đẩy vùng nội dung. Phần mở tạm là lớp nổi do SmartSidebar tự làm. */
.layout.is-collapsed .layout-side:hover {
    --bb-layout-sidebar-width: var(--bb-layout-sidebar-collapse-width);
}

    .layout:not(.has-footer) {
        --bb-layout-footer-height: 0px;
    }

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

    .layout .layout-menu .menu {
        --bb-menu-item-hover-bg: none;
        --bb-menu-item-hover-color: var(--bb-color-smart);
    }

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

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

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

/*.layout .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-logout {
    --bb-logout-text-color: var(--bb-header-color);
    --bb-logout-text-max-width: 150px !important;
}

.logout-avatar {
    border-radius: 50%;
}

.dropdown-user img {
    border-radius: 50%;
}

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

.layout .layout-menu .menu {
}

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

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #EE4D2D;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Đang tải...");
    }

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

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

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

.smart-button .material-icons {
    font-size: 16px;
}

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

.smart-button.smart-icon .material-icons {
    font-size: 26px;
}

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

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

.layout .layout-header, .layout .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) ============ */

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

.layout .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 (.layout .layout-side .layout-banner) chứ không phải hai: có một rule khác cùng
   specificity 0,2,0 được nạp SAU file này làm mất viền dưới của banner — đo trên DOM thật,
   không grep ra trong wwwroot/css nên nhiều khả năng đến từ bundle của thư viện. */
.layout .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. */
.layout .layout-side {
    border-right: none;
}

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

/* — cụm đăng xuất — */
/* Avatar tròn mang chữ cái đầu của tên, theo mẫu thiết kế (02/09/2026). */
.layout-header .logout-avatar,
.layout-header .dropdown-user img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

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

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

/* Header của popup đăng xuất: bundle BootstrapBlazor tô nền #0078D4 — xanh này không có
   trong bộ token, và nằm ngay dưới avatar đỏ thì lệch hẳn. Đổi sang brand.
   .dropdown-menu nằm TRONG .layout-header (đã đo trên DOM) nên ba mức selector này với tới
   được và token của erp-tokens.css vẫn kế thừa xuống. */
.layout .layout-header .dropdown-menu .dropdown-user {
    background: var(--brand);
    color: #fff;
}

.layout .layout-header .dropdown-menu .dropdown-user:hover,
.layout .layout-header .dropdown-menu .dropdown-user:focus {
    background: var(--brand-hover);
    color: #fff;
}

/* Hover của các mục trong popup: nền mặc định của bundle quá nhạt, gần như không thấy con
   trỏ đang ở dòng nào. Dùng cặp brand-soft/brand cho rõ.
   Nhắm vào TỪNG thẻ <a> chứ không phải .dropdown-item: LinkTemplate dồn cả 7 link vào MỘT
   .dropdown-item duy nhất, tô nền ở mức đó là cả danh sách cùng sáng lên (đã đo trên DOM). */
/* Padding + bo góc đặt ở trạng thái thường để dải nền hover bao trọn dòng chứ không bó sát
   chữ, và để layout không nhảy khi rê chuột. Margin âm bù lại padding ngang của .dropdown-item
   (6px 12px) nên dải nền vẫn thẳng mép với header. */
.layout .layout-header .dropdown-menu .dropdown-item:not(.dropdown-user) > a {
    border-radius: var(--radius-sm);
    margin: 0 -6px;
    padding: 5px 6px;
}

.layout .layout-header .dropdown-menu .dropdown-item:not(.dropdown-user) > a:hover,
.layout .layout-header .dropdown-menu .dropdown-item:not(.dropdown-user) > a:focus {
    background: var(--brand-soft);
    color: var(--brand);
}

/* Tên đầy đủ ở trên, mã người dùng ở dưới cỡ nhỏ hơn và nhạt hơn. */
.layout .layout-header .logout-dn {
    font-size: var(--fs-13);
    font-weight: 600;
    line-height: 1.3;
}

.layout .layout-header .logout-code {
    font-size: var(--fs-11);
    line-height: 1.3;
    opacity: .75;
}

/* ============ TABSTRIP (02-layout.md §4) ============ */

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

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

.top-header .header-title .icon {
  width: 32px;
  height: 32px;
  font-size: 28px;
  color: gainsboro;
}

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