/* ==========================================================================
   GHI ĐÈ SYNCFUSION — MỘT FILE DUY NHẤT (đợt 2 chuẩn hóa CSS, 08/09/2026)

   Mọi rule nhắm vào class `.e-*` của Syncfusion (grid, nút, ô nhập, dialog, toolbar, lịch…) trước
   đây rải trong 9 file global: smart-custom.css (106 rule), voucher.css, app.css, erp-chrome.css,
   toolbar-css.css, smart.default.css, smart-icon.css, erp-content.css, smart-button.css. Cùng một
   phần tử (.e-btn, .e-input, .e-headercell) bị 5–6 file đụng vào và kết quả phụ thuộc thứ tự <link>.

   Gom về đây theo đúng THỨ TỰ NẠP CŨ (file nạp trước đứng trước, trong file giữ nguyên thứ tự) và
   file này nạp CUỐI CÙNG trong index.html, nên cascade giữa các rule không đổi → giao diện không đổi
   pixel (đã so 8 baseline ảnh trong bộ smoke). Mỗi mục ghi tên file gốc để truy lịch sử bằng git blame
   trên file cũ.

   Quy tắc từ nay:
     - Rule mới nhắm .e-* thêm VÀO ĐÂY, đúng mục của vùng liên quan; không thêm vào file khác.
     - Ghi đè theme bằng tăng specificity (thêm .e-grid / .e-btn phía trước), không rải !important.
       Các !important còn lại bên dưới là di sản, đã ĐO TRÊN DOM THẬT (9 màn: /, /THU + popup,
       /require-payment + popup, /catalog-object, /BillOfLading, /ContractAppendix, /RuleFunction —
       script D:SourceSmartAccSmokemcpmeasure-important.js chạy qua browser_evaluate, 08/09/2026): 42 rule có !important →
       8 rule gỡ được (khớp phần tử, computed style không đổi), 9 rule gỡ là đổi kiểu dáng (thua rule
       theme/inline có specificity cao hơn) nên giữ, 25 rule chưa đo được vì chỉ khớp ở trạng thái
       hover/focus/màn chưa mở nên giữ nguyên. Muốn gỡ tiếp thì đo lại, đừng đoán.
     - Font chữ cho .e-control nằm ở erp-tokens.css (một nguồn cho cả app), không lặp ở đây. */

/* ======================== từ app.css ======================== */

.e-tab .e-content .e-item {
    height: 100%;
}

.e-custom-style {
    color: orangered;
}

.e-datepicker {
    font-size: 14px;
}

.e-grid.e-lib .e-rightfreeze.e-freezerightborder {
    background-color: #FFFFFF !important;
}

.e-multi-select-list-wrapper .e-list-item {
    display: flex;
    align-items: center;
    padding-left: 8px;
    padding-right: 8px;
}

.e-multi-select-list-wrapper .e-checkbox-wrapper {
    margin-right: 8px;
    flex-shrink: 0;
}

.e-multi-select-list-wrapper .e-tooltip {
    flex: 1;
    min-width: 0;
}

.e-multi-select-list-wrapper .e-tooltip span {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.e-small .e-checkbox-wrapper .e-label, .e-small.e-checkbox-wrapper .e-label, .e-small .e-css.e-checkbox-wrapper .e-label, .e-small.e-css.e-checkbox-wrapper .e-label {
    font-size: 14px;
    line-height: 14px;
}

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

/* — select đơn vị / năm (Syncfusion), bo 6px. Spec ghi 34px; để 26px theo yêu cầu. — */
.layout-header .e-input-group.e-control-wrapper,
.layout-header .e-ddl.e-input-group.e-control-wrapper {
    height: 26px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-size: var(--fs-13);
}

.layout-header .e-input-group.e-control-wrapper .e-input,
.layout-header .e-ddl.e-input-group.e-control-wrapper .e-input {
    color: var(--ink);
    font-size: var(--fs-13);
}

.layout-header .e-input-group.e-control-wrapper:not(.e-disabled):hover {
    border-color: var(--border-strong);
}

.layout-header .e-input-group.e-control-wrapper.e-input-focus {
    border-color: var(--brand);
    outline: 2px solid var(--brand-line);
    outline-offset: 0;
}

/* Syncfusion vẽ gạch chân "ripple" bằng ::before/::after của input-group — thừa với
   kiểu viền bao của thiết kế này. */
.layout-header .e-input-group.e-control-wrapper::before,
.layout-header .e-input-group.e-control-wrapper::after {
    display: none;
}

.layout-header .e-input-group .e-input-group-icon {
    color: var(--ink-2);
    border: none;
}

/* Icon Lucide gắn vào ô nhập bằng AddIconAsync("append", "lu-…") (mã số thuế, tìm kiếm,
   mắt mật khẩu…). Icon Lucide là CSS mask: hình = background-color nhìn qua mask. Theme
   Syncfusion lại đặt background: rgba(0,0,0,0) lên .e-input-group-icon với specificity cao hơn
   rule chung của lucide.css → mask che một nền trong suốt, icon biến mất (16/09/2026).
   Trả lại nền currentColor ở mọi trạng thái theme có đặt background (nghỉ, hover, active,
   readonly, disabled) và thu mask về cỡ chữ để không phình bằng cả ô 24/30px. */
.e-input-group .e-input-group-icon:is([class^="lu-"], [class*=" lu-"]),
.e-input-group.e-control-wrapper .e-input-group-icon:is([class^="lu-"], [class*=" lu-"]),
.e-input-group .e-input-group-icon:is([class^="lu-"], [class*=" lu-"]):hover,
.e-input-group.e-control-wrapper .e-input-group-icon:is([class^="lu-"], [class*=" lu-"]):hover,
.e-input-group .e-input-group-icon:is([class^="lu-"], [class*=" lu-"]):active,
.e-input-group.e-control-wrapper .e-input-group-icon:is([class^="lu-"], [class*=" lu-"]):active,
.e-input-group .e-input[readonly] ~ .e-input-group-icon:is([class^="lu-"], [class*=" lu-"]),
.e-input-group.e-control-wrapper .e-input[readonly] ~ .e-input-group-icon:is([class^="lu-"], [class*=" lu-"]),
.e-input-group.e-disabled .e-input-group-icon:is([class^="lu-"], [class*=" lu-"]),
.e-input-group.e-control-wrapper.e-disabled .e-input-group-icon:is([class^="lu-"], [class*=" lu-"]) {
    background-color: currentColor;
    -webkit-mask-size: 1.2em;
            mask-size: 1.2em;
}

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

/*===================SPINNER=================*/
.e-spinner-pane.e-custom-spinner.e-spin-overlay {
  background-color: transparent;
}

.e-grid .e-focused:not(.e-menu-item):not(.e-editedbatchcell) {
  box-shadow: none;
}

.timeline-warning .e-dot {
  background-color: orange;
}

.timeline-success .e-dot {
  background-color: green;
}

.timeline-danger .e-dot {
  background-color: red;
}

.timeline-default .e-dot {
  background-color: gray;
}

.timeline-warning.e-timeline-item.e-connector::after {
  border-color: orange !important;
}

.timeline-success.e-timeline-item.e-connector::after {
  border-color: green !important;
}

.timeline-danger.e-timeline-item.e-connector::after {
  border-color: red !important;
}

.timeline-default.e-timeline-item.e-connector::after {
  border-color: gray !important;
}

/* ======================== từ toolbar-css.css ======================== */

.refresh-button .e-btn {
    border: none;
}

.refresh-button .e-btn:hover {
        color: #7A7A73;
        border: none;
    }

.refresh-button .e-btn:active {
        color: black;
        background-color: transparent;
    }

.setting-button .e-btn {
    border: none;
}

.setting-button .e-btn:hover {
        color: #7A7A73;
        border: none;
    }

.setting-button .e-btn:active {
        color: black;
        background-color: transparent;
    }

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

.grid-custom.e-grid .e-content {
    height: calc(100vh - 280px);
}

.grid-custom-group.e-grid .e-content {
    height: calc(82vh - 150px) !important;
}

.grid-custom-salary.e-grid .e-content {
    height: calc(88vh - 190px) !important;
}

.grid-custom-split.e-grid .e-content {
    height: calc(88vh - 150px) !important;
}

.e-grid .e-dialog.e-ccdlg {
    /*top: 25% !important;*/
    left: 80% !important;
}

.e-grid .e-headercell,
.e-grid .e-detailheadercell {
    height: 30px;
    text-transform: none;
    font-size: 14px;
    font-weight: 500;
    color: black;
    background-color: #eeeeee;
    align-content: center;
    padding: 0 8px;
}

.e-headercelldiv,
.e-stackedheadercelldiv {
    text-align: center !important;
}

.e-headertext {
    text-transform: none;
    font-size: 12px;
    font-weight: 500;
    color: black;
}

.e-grid .e-rowcell {
    font-size: 13px;
    line-height: 19px;
    padding: 2px 4px;
}

.e-grid .e-groupcaption {
    position: sticky;
    left: 30px;
    background-color: #f8f9fa;
    z-index: 10 !important;
    overflow: visible;
    white-space: nowrap;
    font-weight: 600;
}

.e-grid .e-altrow {
    /*background-color: #F2F2F2;*/
}

.e-grid .e-row:hover .e-rowcell {
    cursor: pointer;
}

.e-grid .e-rowcell.e-selectionbackground {
    /*font-weight: 500;*/
    /*background: #F47920;*/
    background: #ffdede;
    /*color: #FFF;*/
}

.e-grid td.e-active {
    /*background:unset;*/
}

.e-pager .e-pagerexternalmsg {
    display: none;
}

.e-grid .e-pager {
    /* zoom: 0.9 đã bỏ — nó nhân vào MỌI kích thước khai báo bên dưới, đặt
       height: 40px mà vẫn ra 36px trên màn hình. Cỡ chữ nay hạ thẳng bằng
       font-size: 13px nên không cần zoom nữa. */
    color: black;
}

/* ===== Thanh phân trang của lưới Syncfusion =====
   Chuyển về đây từ VoucherView.razor.css (21/08/2026) để mọi lưới trong app
   dùng chung một kiểu, không riêng màn danh sách chứng từ.
   Số đo: thanh cao 40px, nút chuyển trang và ô chọn số bản ghi cao 28px. */
/* Bỏ khung, chỉ còn một đường phân cách phía trên, cao đúng 40px.
   zoom: 1 giữ lại làm chốt chặn — nếu ai đó đặt lại zoom cho .e-pager thì
   mọi kích thước dưới đây bị nhân theo và 40px sẽ không còn là 40px. */
.e-grid .e-gridpager {
    border: none;
    border-top: 1px solid #e4e7ec;
    background: transparent;
    font-size: 13px;
    zoom: 1;
    height: 40px;
    min-height: 40px;
    box-sizing: border-box;
    padding: 0 8px;
}

/* Căn giữa theo chiều dọc. Bố cục gốc của Syncfusion dựa vào float + margin
   âm, đổi chiều cao phần tử con là lệch ngay; flex + order giữ đúng thứ tự
   trái→phải cũ (nút trang | số dòng/trang | thông báo bên phải). */
.e-grid .e-gridpager {
    display: flex;
    align-items: center;
}

.e-grid .e-gridpager .e-pagesizes {
    order: 2;
    display: flex;
    align-items: center;
}

.e-grid .e-gridpager .e-parentmsgbar {
    order: 3;
    margin-left: auto;
    padding: 0;
}

.e-grid .e-gridpager .e-pagerconstant {
    margin: 0;
}

/* Nút chuyển trang: cao 28px, không viền */
.e-grid .e-gridpager .e-pagercontainer {
    border: none;
    margin: 0;
    height: 28px;
}

.e-grid .e-gridpager .e-pagercontainer .e-link,
.e-grid .e-gridpager .e-pagercontainer .e-numericitem,
.e-grid .e-gridpager .e-pagercontainer .e-first,
.e-grid .e-gridpager .e-pagercontainer .e-prev,
.e-grid .e-gridpager .e-pagercontainer .e-next,
.e-grid .e-gridpager .e-pagercontainer .e-last {
    height: 28px;
    min-height: 28px;
    line-height: 28px;
    padding: 0 10px;
    border: none;
    box-sizing: border-box;
}

/* Ô chọn số bản ghi mỗi trang: cao 28px, rộng 60px (Syncfusion để 90px — bớt 1/3).
   .e-input-group bên trong mang inline style width:100% nên tự co theo, không phải ép. */
.e-grid .e-gridpager .e-pagerdropdown {
    width: 60px;
    height: 28px;
    margin: 0 8px 0 10px;
}

.e-grid .e-gridpager .e-pagerdropdown .e-input-group {
    height: 28px;
    min-height: 28px;
}

.e-grid .e-gridpager .e-pagerdropdown input.e-input,
.e-grid .e-gridpager .e-pagerdropdown .e-input-group-icon {
    height: 26px;
    line-height: 26px;
}

/* Mũi tên co từ 30 → 24px: trong 60px còn lại phải đủ chỗ cho giá trị 3 chữ số (150)
   ở cỡ 13px, nếu để nguyên 30px thì số bị cắt. Giảm luôn padding trái của ô số. */
.e-grid .e-gridpager .e-pagerdropdown .e-input-group-icon.e-ddl-icon {
    width: 24px;
    min-width: 24px;
}

.e-grid .e-gridpager .e-pagerdropdown input.e-input {
    padding-left: 6px;
}

/* Mũi tên lật lên khi danh sách đang mở. Syncfusion gắn sẵn class .e-icon-anim vào
   .e-input-group lúc mở popup (kiểm trên DOM thật: wrapper còn nhận .e-input-focus,
   aria-expanded="true"), nhưng theme đang dùng không kèm rule xoay nào — icon giữ
   nguyên transform:none. Đây là chỗ móc sẵn có, không cần bám vào aria hay JS.

   Xoay ::before (glyph font e-icons) chứ KHÔNG xoay thẻ <span> bọc ngoài: hộp bao của
   một hình vuông 24px khi xoay qua 45° nở ra ~34px, đo được bằng rAF là 24 → 37.6 → 24
   trong ~200ms. Nó không đẩy layout (toạ độ các phần tử khác đứng yên) nhưng mắt vẫn
   thấy ô icon phình ra rồi co lại — chính là cái giật một nhịp. Glyph nằm gọn trong ô
   nên xoay nó không đụng tới hộp bao. */
.e-grid .e-gridpager .e-pagerdropdown .e-input-group-icon.e-ddl-icon::before {
    display: inline-block;
    transition: transform .2s ease;
}

.e-grid .e-gridpager .e-pagerdropdown .e-input-group.e-icon-anim .e-input-group-icon.e-ddl-icon::before {
    transform: rotate(180deg);
}

/* Nút chuyển trang: không tô nền — CHỈ trang đang đứng mới có nền.
   Cần !important cho trang đang đứng vì theme Syncfusion cũng tô nền cho
   .e-currentitem bằng selector đặc hiệu hơn. */
.e-grid .e-gridpager .e-pagercontainer .e-numericitem,
.e-grid .e-gridpager .e-pagercontainer .e-first,
.e-grid .e-gridpager .e-pagercontainer .e-prev,
.e-grid .e-gridpager .e-pagercontainer .e-next,
.e-grid .e-gridpager .e-pagercontainer .e-last {
    background: transparent;
    color: #3f4653;
    border-radius: 6px;
    margin: 0 2px;
}

.e-grid .e-gridpager .e-pagercontainer .e-numericitem.e-currentitem {
    /* Đỏ chủ đạo lấy từ token dùng chung --brand (wwwroot/css/erp-tokens.css) — đổi màu
       toàn app thì sửa ở đó. Fallback giữ đúng giá trị token phòng khi lưới nằm ngoài
       vùng khai token (popup render ra ngoài .tabs-body): var rỗng là mất cả khai báo. */
    background: var(--brand, #df3a1e);
    color: #fff;
    font-weight: 600;
}

/* nút đã hết đường đi (trang đầu/cuối): chỉ mờ đi */
.e-grid .e-gridpager .e-pagercontainer .e-firstpagedisabled,
.e-grid .e-gridpager .e-pagercontainer .e-prevpagedisabled,
.e-grid .e-gridpager .e-pagercontainer .e-nextpagedisabled,
.e-grid .e-gridpager .e-pagercontainer .e-lastpagedisabled {
    background: transparent;
    opacity: .55;
}

/* Cỡ chữ 13px cho mọi thành phần trong thanh phân trang.
   Nút số trang và ô chọn số bản ghi phải nhắm qua thẻ cha (.e-pagercontainer,
   .e-pagerdropdown .e-input-group) — theme Syncfusion đặt 14px cho chúng bằng
   selector đặc hiệu hơn, viết ngắn hơn là thua. */
.e-grid .e-gridpager .e-pagercontainer .e-link,
.e-grid .e-gridpager .e-pagercontainer .e-numericitem,
.e-grid .e-gridpager .e-pagerdropdown .e-input-group input.e-input,
.e-grid .e-gridpager .e-pagerconstant,
.e-grid .e-gridpager .e-parentmsgbar,
.e-grid .e-gridpager .e-pagenomsg,
.e-grid .e-gridpager .e-pagecountmsg,
.e-grid .e-gridpager .e-constant {
    font-size: 13px;
}

.e-grid .e-gridheader .e-sortfilter .e-rightalign .e-headercelldiv, .e-grid .e-gridheader .e-rightalign .e-stackedheadercelldiv {
    padding: 0 4px;
}

.e-toolbar {
}

.e-toolbar .e-toolbar-item .e-tbar-btn {
        border: 1px solid transparent;
    }

.e-toolbar .e-toolbar-item .e-tbar-btn:hover {
            border: 1px solid #ED1C24;
        }

.e-toolbar .e-toolbar-item .e-tbar-btn:hover span,
            .e-toolbar .e-toolbar-item .e-tbar-btn:hover .e-tbar-btn-text {
                color: #ED1C24;
            }

.e-toolbar .e-toolbar-item .e-tbar-btn:active {
            outline: none;
            background-color: unset;
        }

.e-toolbar .e-toolbar-item .e-tbar-btn:hover span,
        .e-toolbar .e-toolbar-item .e-tbar-btn:hover .e-tbar-btn-text {
            color: #ED1C24 !important;
        }

.e-toolbar .e-toolbar-item .e-tbar-btn:active .e-tbar-btn-text {
            background-color: none !important;
            color: #ED1C24 !important;
        }

.e-toolbar .e-toolbar-item .e-tbar-btn:active span {
            color: #ED1C24;
        }

.e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
            font-size: 0.8rem;
            padding: 0;
        }

.e-toolbar .e-toolbar-item .e-tbar-btn:focus {
            box-shadow: unset;
            border: 1px solid #ED1C24;
        }

.e-toolbar .e-toolbar-item .e-tbar-btn:focus span,
            .e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-tbar-btn-text {
                color: #ED1C24;
            }

/*==================== Dialog Styles ====================*/
.e-dialog {
    border-radius: 4px;
}

.e-dialog.e-ccdlg.e-device.e-popup.e-control.e-popup-open {
        top: 14vh !important;
    }

.e-dlg-center-center {
    z-index: 1065 !important;
}

.e-dialog .e-dlg-header-content {
    padding: 8px 16px;
    border-bottom: 0;
}

.e-dialog .e-dlg-header {
    font-size: 1.4rem;
    color: #111;
    font-weight: 600;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.e-dialog .e-footer-content {
    border-top: 0;
}

.e-dialog .e-icon-dlg-close {
    content: "\e7e7";
    position: relative;
    color: red;
    font-size: 26px;
    font-weight: 600;
}

.e-dialog .e-btn .e-btn-icon.e-icon-dlg-close:hover {
    color: white !important;
    background-color: #C82333;
    padding: 2px;
}

button.e-btn.e-dlg-closeicon-btn .e-btn-icon.e-icon-dlg-close {
    color: red !important;
}

.e-footer-content .e-btn:hover.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info) {
    background: #198754;
}

/*==================== Card Styles ====================*/
.e-card {
    justify-content: normal;
    height: 100%;
}

.e-card:hover {
        background-color: transparent;
    }

.e-card .e-card-header {
        padding: 3px 10px 7px 4px;
    }

.e-card .e-card-header .e-card-header-caption {
            flex-direction: row;
        }

.e-card .e-card-header .e-card-header-caption .e-card-header-title {
                font-weight: bold;
            }

.e-card .e-card-content {
        padding: 0 8px 5px 10px;
    }

/*==================== Checkbox Styles ====================*/
.e-checkbox-wrapper .e-frame.e-check,
.e-checkbox-wrapper.e-checkbox-disabled .e-frame.e-check,
.e-checkbox-wrapper:active .e-frame.e-check,
.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check {
    border-color: var(--smart-default-clr);
    color: var(--smart-default-clr);
    background-color: white;
}

.e-checkbox-wrapper .e-frame, .e-css.e-checkbox-wrapper .e-frame {
    border-radius: 5px;
    height: 20px;
    line-height: 18px;
    width: 20px;
}

.e-checkbox-wrapper .e-check, .e-css.e-checkbox-wrapper .e-check {
    font-size: 14px;
}

.e-checkbox-wrapper.e-checkbox-disabled .e-frame.e-check, .e-css.e-checkbox-wrapper.e-checkbox-disabled .e-frame.e-check {
    background-color: unset;
    border-color: var(--smart-default-clr);
    color: var(--smart-default-clr);
    /*    border-color: var(--color-sf-primary);
    color: var(--color-sf-content-bg-color-selected);*/
}

/*==================== Tab Styles ====================*/
.e-tab .e-tab-header .e-toolbar-item .e-tab-text {
    text-transform: none;
    color: black;
}

.sticky-header.e-tab .e-tab-header {
    background: white;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.e-tab .e-tab-header {
    background: #f1f3f4; /* Nền header tab giống Chrome */
    border-bottom: 1px solid #ccc;
}

.e-tab .e-tab-header .e-toolbar-item {
        /*        background: #e0e0e0;*/
        border-bottom: none;
        border-radius: 8px 8px 0 0;
        margin: 4px 4px 0 4px;
        padding: 8px 16px;
        transition: background 0.3s, border 0.3s;
        cursor: pointer;
    }

.e-tab .e-tab-header .e-toolbar-item:hover {
            background-color: transparent;
            border: solid 0 transparent;
            /*        border-color: transparent;*/
        }

.e-tab .e-tab-header .e-toolbar-item.e-active {
            background: #ffffff;
            border: 1px solid var(--smart-default-clr);
            border-bottom: 1px solid white; /* loại bỏ đường viền dưới tab đang chọn */
            border-radius: 8px 8px 0 0;
            font-weight: bold;
            color: black;
        }

.e-tab .e-tab-header .e-toolbar-item.e-active.e-ileft .e-tab-text {
                color: var(--smart-default-clr);
                font-weight: 500;
                /*            text-decoration: underline;*/
            }

.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:hover .e-tab-text,
            .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:active .e-tab-text {
                color: var(--smart-default-clr);
                font-weight: 500;
                /*            text-decoration: underline;*/
            }

.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-tab-text {
            color: var(--smart-default-clr);
        }

.e-tab .e-tab-content {
    border: 1px solid #aaa;
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 16px;
    background: white;
    height: calc(100% - 36px);
}

.e-split-btn.splitbtn-custom {
    padding: 5px 10px;
    font-size: 12px;
    color: #2481ff;
    background-color: transparent;
    border: solid 1px #cacaca;
    font-weight: 500;
}

.e-dropdown-btn.splitbtn-custom {
    line-height: 12px;
    padding: 0 4px;
    color: #2481ff;
    background-color: transparent;
    border: solid 1px #cacaca;
}

.e-split-btn.splitbtn-custom:hover,
    .e-dropdown-btn.splitbtn-custom:hover {
        background-color: unset;
    }

.e-split-btn.splitbtn-custom:focus,
    .e-dropdown-btn.splitbtn-custom:focus {
        box-shadow: none;
    }

.e-dropdown-btn.splitbtn-custom.e-active {
        border: solid 1px #ffa6a6;
        border-radius: 0 4px 4px 0;
    }

.e-btn.e-outline:hover {
    color: #aaaaaa;
    background-color: #efefef;
}

/*==================== Input Styles ====================*/
/* Ô nhập khi focus: CHỈ đổi viền, không quầng sáng.
   Quầng 2px trước đây đè lên ô bên cạnh và lên đường kẻ của lưới. */
.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error),
.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
    box-shadow: none !important;
    border-color: var(--smart-primary, #007bff) !important;
}

/*==================== Carousel Styles ====================*/
.e-carousel .e-carousel-indicators.e-default .e-indicator-bars {
    margin-top: 22px;
}

/*==================== Context Menu Styles ====================*/
.e-contextmenu-container {
    z-index: 2000;
}

.e-contextmenu-container ul .e-menu-item .e-menu-icon::before {
        font-size: 11px;
    }

/*==================== DateRange Styles ====================*/
.e-daterangepicker.e-popup.e-preset-wrapper {
    min-width: 625px;
    right: 10%;
    left: 10% !important;
}

.e-daterangepicker.e-popup .e-presets .e-list-parent {
    max-width: 200px;
}

/*==================== Tooltip Styles ====================*/
.e-tooltip-wrap .e-tip-content {
    /*color: black;*/
    font-size: 14px;
    font-weight: 400;
}

.e-tooltip-wrap .e-arrow-tip {
    display: none
}

.e-upload .e-file-select-wrap .e-btn, .e-upload .e-upload-actions .e-btn {
    background-color: #ea8b1f !important;
    color: #fff;
    border-color: #ea8b1f;
}

/* Option 1: Hover sáng hơn + border nổi bật */
.file-upload .e-upload-browse-btn:hover {
    background-color: #ff9a2b !important;
    border: 2px solid #fff;
    box-shadow: 0 0 0 3px rgba(234, 139, 31, 0.3);
}

/* Option 2: Hover với gradient */
.file-upload .e-upload-browse-btn:hover {
    background: linear-gradient(135deg, #ff9a2b 0%, #ea8b1f 100%) !important;
    box-shadow: 0 6px 12px rgba(234, 139, 31, 0.4);
}

/* Option 3: Scale lớn hơn + shadow đậm */
.file-upload .e-upload-browse-btn:hover {
    background-color: #d17a18 !important;
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(234, 139, 31, 0.5);
}

.file-upload .e-upload-files {
    max-height: 350px; /* tùy chỉnh: 150px, 300px... */
    overflow-y: auto; /* cuộn dọc khi quá dài */
    overflow-x: hidden; /* chặn cuộn ngang */
    margin: 8px 0 0 0;
    padding: 0;
    list-style: none;
}

.file-upload.e-upload .e-upload-files .e-upload-file-list {
    min-height: 40px;
    align-content: center;
}

/*==================== Dashboard Styles class====================*/
.e-panel.dashboard-custom {
    position: relative;
    z-index: 999 !important;
}

/*====================RadioBtn====================*/
.radio-green .e-label {
    color: #008BFF !important;
    font-weight: 600;
}

.radio-yellow .e-label {
    color: #d39e00 !important;
    font-weight: 600;
}

.radio-red .e-label {
    color: #dc3545 !important;
    font-weight: 600;
}

/* Nút chính của màn Phụ lục hợp đồng.

   Phải khai ở đây chứ không ở .razor.css: class truyền qua CssClass nằm trên <button> do
   SfButton render, mà component con không nhận attribute scope của CSS isolation.

   Theo 03-components.md §1, mỗi toolbar chỉ MỘT nút primary và nó mang màu brand (đỏ Rạng
   Đông). Các phiếu Lịch giao hàng / Vận đơn đang dùng e-success xanh của Syncfusion — sai lệch
   đó có trước, ở đây làm theo bộ thiết kế đã duyệt. */
.e-btn.pl-btn-primary,
.e-btn.pl-btn-primary:hover,
.e-btn.pl-btn-primary:focus {
    background: var(--brand, #df3a1e);
    border-color: var(--brand, #df3a1e);
    color: #fff;
    font-weight: 600;
}

.e-btn.pl-btn-primary:hover {
    background: var(--brand-hover, #bd2f16);
    border-color: var(--brand-hover, #bd2f16);
}

.e-btn.pl-btn-primary:disabled {
    opacity: .55;
}

/* Ô nhập số ở bước 2 của wizard Phụ lục: căn phải cho thẳng cột với giá trị "Trước" ngay bên
   cạnh (01-design-tokens.md §5 — mọi cột số căn phải + tabular-nums). Phải khai global vì
   input do SfNumericTextBox render, không nhận attribute scope của CSS isolation. */
.pl-lines .e-numerictextbox.e-input {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

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

.e-list-item .parent {
    font-weight: 700;
}

.e-split-btn.e-command {
    padding: 0 10px;
    font-size: 12px;
    color: #2481ff;
    background-color: transparent;
    border: none;
    font-weight: 500;
}

.e-dropdown-btn.e-command {
    line-height: 12px !important;
    padding: 0 4px;
    color: #2481ff;
    background-color: transparent;
    border: none;

}

.e-split-btn.e-command:hover,
.e-dropdown-btn.e-command:hover {
    background-color: unset;
}

.e-split-btn.e-command:focus,
.e-dropdown-btn.e-command:focus {
    box-shadow: none;
}

.e-dropdown-btn.e-command.e-active {
    border: solid 1px #2481ff;
    border-radius: 0;
}

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

/*đỏ PDF */
.sm-pdf .e-btn-icon::before {
    font-size: 20px;
    color: #d32f2f;
}

/*Xanh Eye */
.sm-eye .e-btn-icon::before {
    font-size: 20px;
    color: #03f;
}

.sm-cancel .e-btn-icon::before {
    font-size: 20px;
    color: #E93445;
}

/*🔴 PDF Loading (xoay đỏ)*/
.sm-pdf.is-loading .e-btn-icon::before {
    animation: spin 0.2s linear infinite;
    color: #d32f2f;
}

/*🔵 Eye Loading (xoay xanh)*/
.sm-eye.is-loading .e-btn-icon::before {
    animation: spin 0.2s linear infinite;
    color: #1565c0;
}

/*4️⃣ (OPTION PRO) Xoay + mờ nhẹ + nổi ✨*/
.is-loading .e-btn-icon::before {
    opacity: 0.85;
    text-shadow: 0 0 10px rgba(0,0,0,.2);
}

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

/* Header: dùng ĐÚNG màu nền vùng làm việc (--canvas) chứ không phải --surface-alt, để dải
   header của lưới liền màu với nền ngoài panel.
   smart-custom.css:114 đặt #eeeeee kèm !important nên phải !important mới thắng.
   Chỉ đổi MÀU — chiều cao 30px, cỡ chữ 14px/500 ở file đó giữ nguyên.

   GIÁ TRỊ DỰ PHÒNG #E6EBEE LÀ BẮT BUỘC, đừng rút gọn thành var(--canvas) (05/09/2026).
   Token khai ở erp-tokens.css cho .tabs-body và mấy vùng chrome, KHÔNG khai ở :root. Lưới
   mở trong popup Smart.Blazor nằm ngoài cây đó (PopupProvider là anh em của
   BootstrapBlazor.Layout, xem LookupLayout.razor.css §CHIỀU CAO), nên biến rỗng → cả khai
   báo thành không hợp lệ → background-color rơi về transparent. Vì có !important, nó còn
   đè mất nền đục mà theme Syncfusion vốn đã cấp cho ô header ghim, và cột ghim là
   position: sticky nên các cột cuộn phía dưới lộ chữ xuyên qua khi cuộn ngang.
   Đã dính đúng như vậy ở popup "Lấy các loại phí XNK" của Đề nghị thanh toán — lưới đó là
   màn duy nhất có cột ghim khi mở dạng popup (CustomsDeclaration.razor: cột checkbox
   IsFrozen chỉ render khi IsMulti). Mọi lưới khác trong popup cũng đang mất màu header,
   chỉ là không có cột ghim nên không ai nhận ra. */
.e-grid .e-gridheader,
.e-grid .e-headercell,
.e-grid .e-detailheadercell {
    background-color: var(--canvas, #E6EBEE) !important;
}

/* Dòng tính tổng nằm ở .e-gridfooter (kiểm trên DOM thật: không phải .e-summaryrow như
   tài liệu Syncfusion mô tả cho grid có GridAggregate lồng trong content). Cho cùng nền
   với header để hai dải mép trên/mép dưới của lưới đồng bộ.
   Giá trị dự phòng cũng bắt buộc, cùng lý do như khối header ngay trên. */
.e-grid .e-gridfooter,
.e-grid .e-summaryrow,
.e-grid .e-summarycell {
    background-color: var(--canvas, #E6EBEE) !important;
}

/* Dòng đang chọn: đổi từ #ffdede sang brand-soft của bộ token.
   Màu PHẢI đục — cột ghim là position: sticky, đè lên cột cuộn phía dưới; nền rgba() bán
   trong suốt làm chữ lộ xuyên qua (bẫy 10, docs/voucher-view-port-kit/README.md).

   Giá trị dự phòng #fdefec bắt buộc, cùng lý do như khối header ở trên — và ở đây hậu quả
   còn nặng hơn: theme Syncfusion cấp nền cho ô ghim bằng rule có
   :not(.e-selectionbackground), tức DÒNG ĐANG CHỌN cố tình bị loại ra để rule này lo. Biến
   rỗng trong popup thì không còn ai cấp nền cho ô ghim của dòng đó, nó thành trong suốt và
   lộ chữ cột cuộn. Lưới trong popup "Lấy các loại phí XNK" có PersistSelection + checkbox
   nên luôn có dòng được chọn. */
.e-grid .e-rowcell.e-selectionbackground,
.e-grid td.e-active,
.e-grid td.e-selectionbackground {
    background: var(--brand-soft, #fdefec) !important;
}

/* ============ Ô NHẬP SYNCFUSION — CỠ CHỮ 13px (07/09/2026) ============

   Bộ token đã duyệt đặt --fs-13 là "mặc định toàn hệ thống", áp cho cả input
   (.claude/references/design-layout/01-design-tokens.md §5). Trước khối này, cỡ chữ ô nhập
   hoàn toàn do theme Syncfusion quyết và repo chưa hề can thiệp: theme cho
   `input.e-input` 14px, biến thể `.e-small` 12px, mà repo khai CssClass="e-small" ở
   ~1.500 chỗ trong 194 file .razor ⇒ gần như mọi ô nhập đang là 12px, lệch spec 1px.

   VÌ SAO !important — ĐỪNG BỎ ĐI: theme Syncfusion nhắm ô nhập bằng selector chồng tới bốn
   class trên cùng một phần tử (`.e-small .e-input-group.e-control-wrapper input.e-input` và
   họ hàng của nó). Bản đầu của khối này viết `.e-input-group.e-small` (0,2,0) rồi
   `.e-input-group.e-small input.e-input` (0,3,1) — ĐO NGÀY 07/09/2026: cả hai đều THUA, ô
   vẫn 12px. Leo thang đặc tả để hơn thư viện là cuộc đua thua sẵn: mỗi lần nâng phiên bản
   CDN lại phải đo và viết lại selector. !important cắt đứt cuộc đua đó.
   Cái giá: form nào muốn cỡ chữ riêng cho ô nhập cũng phải dùng !important. Chấp nhận được
   — rà toàn repo 07/09/2026 không có file .razor.css nào đang đặt font-size cho .e-input.

   VÌ SAO CẢ WRAPPER LẪN INPUT: theme kết thúc bằng `.e-input-group input.e-input
   { font-size: inherit }`, nên input lấy cỡ từ wrapper — đặt wrapper là đủ cho phần lớn ca.
   Nhưng đặt thêm ở input để không phụ thuộc vào việc rule `inherit` kia còn đứng đó hay
   không ở bản Syncfusion sau.

   SfDatePicker là lý do khối này ra đời: nó bọc thêm `.e-date-wrapper.e-date-container`
   và CssClass="e-small" KHÔNG tới được `.e-input-group`, nên 5 ô ngày trên phiếu Vận đơn
   giữ nguyên 14px trong khi 13 ô cạnh nó 12px — lệch 2px, nhìn bằng mắt thấy ngay.
   Nhắm theo `.e-input-group` (mọi biến thể đều mang class này) thì cả ô ngày lẫn ô thường
   về cùng một cỡ, không phải liệt kê từng loại control.

   KHÔNG đụng tới chiều cao, padding hay cỡ chữ của .e-rowcell/.e-headercell — mật độ dòng
   lưới vẫn giữ nguyên đúng như ghi chú đầu file. */
.e-input-group,
.e-input-group.e-small,
.e-small .e-input-group,
.e-float-input,
.e-float-input.e-small,
.e-small .e-float-input {
    font-size: 13px !important;
}

.e-input-group input.e-input,
.e-input-group textarea.e-input,
.e-input-group.e-small input.e-input,
.e-input-group.e-small textarea.e-input,
.e-small .e-input-group input.e-input,
.e-small .e-input-group textarea.e-input {
    font-size: 13px !important;
}

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

/*==================== 1. Kích thước & chữ chung ====================*/
/* Áp cho nút Syncfusion CÓ CHỮ. Loại trừ nút chỉ có icon (e-icon-btn),
   nút đóng dialog, nút trên toolbar (e-tbar-btn), nút tròn và split-button
   đã có kích thước riêng — ép padding ngang vào các nút vuông đó sẽ làm méo.
   .vha-btn (VoucherIconButton) cũng là nút icon-only nhưng icon nằm trong
   ChildContent nên Syncfusion KHÔNG gắn e-icon-btn cho nó — phải tự loại. */
.e-btn:not(.e-icon-btn):not(.e-dlg-closeicon-btn):not(.e-tbar-btn):not(.e-round):not(.splitbtn-custom):not(.vha-btn) {
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 500;
    line-height: 17px;
}

/* Icon trong nút .e-small: theme Syncfusion co icon lại cho nút nhỏ, mà icon
   Lucide vẽ bằng CSS mask với cỡ 1.2em (css/lucide.css) nên co theo luôn và
   trông lép so với chữ. Đặt lại 15px -> icon 18px. Áp cho cả nút có chữ lẫn
   nút icon-only, vì đây là cỡ icon chứ không phải cỡ chữ của nút.
   File này nạp SAU theme Syncfusion trên CDN nên cùng specificity vẫn thắng. */
.e-small.e-btn .e-btn-icon,
.e-small .e-btn .e-btn-icon {
    font-size: 15px;
}

/* Menu của SfDropDownButton/SfSplitButton: icon lệch so với chữ.
   Theme Syncfusion đặt `.e-item{display:flex}` nhưng KHÔNG đặt align-items, rồi
   căn icon bằng `float:left; line-height:30px; vertical-align:middle` — cả ba
   đều là công cụ của bố cục dòng chữ và bị flex container vô hiệu hóa. Với icon
   font thì không lộ (glyph nằm trong hộp chữ), nhưng icon Lucide vẽ bằng CSS
   mask là KHỐI thật nên lệch ngay. Theme còn ép `width:1em` trong khi Lucide cao
   1.2em -> hộp icon méo, mask-size:contain vẽ hình nhỏ lại.
   Sửa: căn giữa theo trục ngang và trả icon về đúng ô vuông 1.2em. */
.e-dropdown-popup ul .e-item {
    align-items: center;
}

.e-dropdown-popup ul .e-item .e-menu-icon {
    float: none;
    width: 1.2em;
    height: 1.2em;
    line-height: 1;
    vertical-align: middle;
}

/*==================== 2. Nút outline không mang màu ====================*/
/* Chỉ nút outline trung tính; các biến thể mang màu (primary/success/info/
   warning/danger) giữ nguyên màu của theme. */
.e-btn.e-outline:not(.e-primary):not(.e-success):not(.e-info):not(.e-warning):not(.e-danger) {
    background: #fff;
    color: #10141b;
    border: 1px solid #e5e5e5;
}

/* Hover: chỉ đổi nền, giữ nguyên màu chữ. Phải lặp lại bộ :not ở đây vì khối
   trên có specificity cao hơn `.e-btn.e-outline:hover` của smart-custom.css. */
.e-btn.e-outline:not(.e-primary):not(.e-success):not(.e-info):not(.e-warning):not(.e-danger):not(:disabled):not(.e-disabled):hover {
    background-color: #f5f5f5;
}

/* Disabled: mờ đi, và không đổi nền khi rê chuột (bộ :not ở khối hover đã
   loại trạng thái này ra). */
.e-btn.e-outline:not(.e-primary):not(.e-success):not(.e-info):not(.e-warning):not(.e-danger):disabled,
.e-btn.e-outline:not(.e-primary):not(.e-success):not(.e-info):not(.e-warning):not(.e-danger).e-disabled {
    opacity: 0.6;
    background: #fff;
    color: #10141b;
}