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

/* Vá theme bootstrap5.3 (Syncfusion 30.2.4): lịch e-small ở màn chọn tháng/năm chỉ thu bề rộng ô xuống 46px,
   chiều cao vẫn 56px của cỡ thường ⇒ ô kéo dài, ô đang chọn thành khối xanh cao. Trả chiều cao về 46px cho
   vuông. Gặp ở ô chọn tháng (Start/Depth = Year) của dashboard mua vật tư, 02/10/2026. */
.e-small.e-calendar .e-content.e-year td,
.e-small.e-calendar .e-content.e-decade td,
.e-small .e-calendar .e-content.e-year td,
.e-small .e-calendar .e-content.e-decade td {
    height: 46px;
}

.e-small.e-calendar .e-content.e-year td > span.e-day,
.e-small.e-calendar .e-content.e-decade td > span.e-day,
.e-small .e-calendar .e-content.e-year td > span.e-day,
.e-small .e-calendar .e-content.e-decade td > span.e-day {
    height: 46px;
    line-height: 46px;
}

.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 icons.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ề 16px (bản vẽ Fluent cỡ 16) để 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;
    --ic-art: var(--ic16);
    -webkit-mask-size: 16px;
            mask-size: 16px;
}

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

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

/* 02/10/2026: mọi SfSpinner dùng SpinnerCustom (Material3, 36px, không nhãn) — màu cung quay khớp
   spinner vỏ popup của PopupService (.smart-popup-pending-spinner, border-top #dc3545).
   Chỉ nhắm .e-spin-material3 nên spinner trong SfProgressButton (kiểu theme Bootstrap5) không bị ảnh hưởng. */
.e-spinner-pane .e-spinner-inner .e-spin-material3,
.e-grid .e-spinner-pane .e-spinner-inner .e-spin-bootstrap5 {
  /* dòng 2: spinner nội bộ của SfGrid khi tự nạp dữ liệu (kiểu theme Bootstrap5, không qua SpinnerCustom) */
  stroke: #dc3545;
}

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

/* Màu đường kẻ của SfGrid toàn repo: #e5e5e5 (22/09/2026, theo yêu cầu của Đạt).
   Theme bootstrap5.3 (30.2.4) vẽ MỌI đường kẻ trong lưới — kẻ ngang/dọc ô body (.e-rowcell), header,
   filterbar, summary, groupcaption, viền ngoài .e-grid — bằng đúng một biến --color-sf-border-light
   (đã tải theme về grep: ~50 selector, không selector nào hardcode màu). erp-tokens.css ghi đè biến
   đó toàn cục = #dbdbdb cho cả input/dialog, nên ở đây chỉ đổi trong phạm vi .e-grid để không lan
   sang component khác. Không viết rule border-color từng selector: vừa dài vừa phải đua độ ưu tiên. */
.e-grid {
    --color-sf-border-light: #e5e5e5;
}

.e-grid .e-rowcell {
    font-size: 13px;
    line-height: 31px;
    padding: 0px 10px;
}

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

/* font-size 13px: bằng nút thường (mục "Kích thước & chữ chung" bên dưới). Trước 21/09/2026
   là 12px nên "Xuất excel"/"Sắp xếp cột" nhỏ hơn "Thêm"/"Xóa" đứng cạnh trên cùng thanh công cụ. */
.e-split-btn.splitbtn-custom {
    padding: 5px 10px;
    font-size: 13px;
    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: cùng màu nền vùng làm việc (.tabs > .tabs-body, #F3F4F6 ở erp-components.css — Đạt chốt
   10/10/2026) 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.
   Đổi nền vùng làm việc thì đổi cả hai khối dưới.
   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.

   Màu ghi thẳng, KHÔNG dùng var(--canvas) trần (05/09/2026): token chỉ khai cho .tabs-body và mấy
   vùng chrome, không ở :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 → khai
   báo không hợp lệ → nền transparent, mà có !important nên đè mất nền đục của ô header ghim
   (position: sticky) → cột cuộn phía dưới lộ chữ xuyên qua khi cuộn ngang. Đã dính ở popup "Lấy
   các loại phí XNK" của Đề nghị thanh toán (CustomsDeclaration.razor, cột IsFrozen khi IsMulti). */
.e-grid .e-gridheader,
.e-grid .e-headercell,
.e-grid .e-detailheadercell {
    background-color: #F3F4F6 !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ộ.
   Màu ghi thẳng, 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: #F3F4F6 !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;
}

/* Chiều cao nút: ép 28px, một số CHẴN.

   ĐO NGÀY 18/09/2026 (/Invoice, DPR = 1): để nút tự tính chiều cao thì nút
   thường ra 29.453px còn SfSplitButton ra 28.719px — đều LẺ. Cạnh trên vì thế
   rơi vào giữa hàng pixel: viền 1px bị trải lên hai hàng với ~45%/55% độ đậm nên
   trông gợn/răng cưa, trong khi cạnh dưới (toạ độ tròn) lại sắc; hai nhóm nút
   còn lệch nhau 0.73px nên không thẳng hàng cạnh trên.
   Thủ phạm là icon Lucide: `.e-btn-icon` cao 1.2em = 18px và là KHỐI thật (vẽ
   bằng CSS mask), nên `vertical-align: middle` của nó phình line box từ
   `line-height: 17px` lên 17.453px — giấu icon đi thì chiều cao về đúng 29px.
   Cùng họ với các lỗi Lucide khác trong file này: icon mask không chịu sự điều
   khiển của float/line-height/vertical-align mà theme Syncfusion dựa vào.
   height + inline-flex cho ra đúng 28px ở mọi nút, chiều rộng KHÔNG đổi (đã đo
   từng nút trước/sau). Ở 28px vùng nội dung còn 16px (28 − 2 viền − 10 padding)
   trong khi icon cao 18px, tức icon tràn 1px vào padding mỗi bên — đo được vẫn
   cách viền 5px, chữ không bị cắt. Muốn thấp hơn 28px thì phải giảm padding dọc
   trước, không thì icon bắt đầu chạm viền.
   `.e-split-btn-wrapper > .e-btn` phải liệt kê riêng: nửa phải của SfSplitButton
   mang .e-icon-btn nên bị bộ loại trừ gạt ra, mà hai nửa lệch chiều cao thì lộ
   ngay. */
.e-btn:not(.e-icon-btn):not(.e-dlg-closeicon-btn):not(.e-tbar-btn):not(.e-round):not(.vha-btn),
.e-split-btn-wrapper > .e-btn {
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Theme đặt `margin-top: -2px` cho `.e-btn-icon` để bù baseline ở chế độ inline.
   Các nút đã chuyển sang flex bên trên không cần nữa — để lại thì icon lệch lên
   1px (đo: cách mép trên 5px, mép dưới 7px). Chỉ gỡ đúng ở những nút đó; nút
   icon-only và nút toolbar vẫn còn inline nên vẫn cần margin âm của theme. */
.e-btn:not(.e-icon-btn):not(.e-dlg-closeicon-btn):not(.e-tbar-btn):not(.e-round):not(.vha-btn) .e-btn-icon,
.e-split-btn-wrapper > .e-btn .e-btn-icon {
    margin-top: 0;
}

/* Bo góc 6px — rule chung PHẢI loại .e-split-btn/.e-dropdown-btn ra.
   SfSplitButton ("Xuất excel", "Sắp xếp cột") là HAI nút ghép sát nhau: theme
   Syncfusion bo `4px 0 0 4px` cho nửa trái và `0 4px 4px 0` cho nửa phải, cộng
   `margin-left: -1px` để hai nửa dùng chung một đường viền. Bo cả 4 góc cho từng
   nửa là tách chúng thành hai viên thuốc rời — đúng lỗi đã gặp ngày 21/08/2026,
   và thử lại ngày 18/09/2026 thì rule chung THẮNG rule riêng của hai nửa nếu
   không loại trừ, tái hiện y nguyên lỗi cũ.
   Hệ quả đã biết: SfDropDownButton ĐỨNG MỘT MÌNH (không ghép) cũng bị loại nên
   giữ bo 4px của theme. Đổi được, nhưng phải tách nó khỏi nửa phải của split
   button trước — chưa cần nên chưa làm. */
.e-btn:not(.e-icon-btn):not(.e-dlg-closeicon-btn):not(.e-tbar-btn):not(.e-round):not(.vha-btn):not(.e-split-btn):not(.e-dropdown-btn) {
    border-radius: 6px;
}

/* Hai nửa split button: nâng 4px -> 6px mà giữ nguyên kiểu ghép. Ghi kèm `.e-btn`
   để thắng cả `.e-dropdown-btn.splitbtn-custom.e-active` ở trên (nó bo lại 4px
   khi menu đang mở). */
.e-split-btn-wrapper > .e-btn.e-split-btn {
    border-radius: 6px 0 0 6px;
}

.e-split-btn-wrapper > .e-btn.e-dropdown-btn {
    border-radius: 0 6px 6px 0;
}

/* Nút trên SfToolbar (.e-tbar-btn) — màn Hợp đồng và các màn danh mục dùng nhóm này.
   Nó nằm ngoài bộ loại trừ của rule chiều cao bên trên vì SfToolbar tự quản kích
   thước, và đo ngày 18/09/2026 thì nhóm này vốn đã tròn (cao 32px, y = 102) nên
   không dính răng cưa. Ở đây CHỈ đồng bộ bo góc 4px -> 6px, không đụng kích thước.
   Phải ghi kèm `.e-btn`: đo thì `.e-toolbar .e-tbar-btn` (0,2,0) THUA rule của
   theme và nút vẫn 4px, `.e-toolbar .e-btn.e-tbar-btn` (0,3,0) mới ăn.
   Vì sao selector dài tới (0,5,0): nút đổi trạng thái thì theme có rule mạnh hơn.
   Đo 18/09/2026 trên màn Hợp đồng — nút "Thêm mới" khi form đang mở được gắn
   `.e-btn-custom.e-outline` ở thẻ `.e-toolbar-item` và tụt về 4px trong khi 6 nút
   cùng hàng đã 6px; (0,3,0) không đủ, chuỗi đầy đủ dưới đây mới ăn. Dòng thứ hai
   phòng toolbar dựng không có lớp `.e-toolbar-items`. */
.e-toolbar .e-toolbar-items .e-toolbar-item .e-btn.e-tbar-btn,
.e-toolbar .e-toolbar-item .e-btn.e-tbar-btn {
    border-radius: 6px;
}

/* Nút Syncfusion CHỈ CÓ ICON (.e-icon-btn): rule bo góc chung ở trên loại nhóm này
   ra vì nửa phải của SfSplitButton cũng mang .e-icon-btn và phải giữ kiểu ghép.
   Bo riêng ở đây để nút icon đứng một mình (nút xoá đỏ trên drawer chọn cột…) không
   còn là chỗ duy nhất giữ 4px. Vẫn chừa .e-round (nút tròn, bo 50%) và nút đóng
   hộp thoại. */
.e-btn.e-icon-btn:not(.e-dropdown-btn):not(.e-split-btn):not(.e-round):not(.e-tbar-btn):not(.e-dlg-closeicon-btn) {
    border-radius: 6px;
}

/* Hộp thoại Syncfusion: bo 6px cho cả khung lẫn ba mảng con.
   Theme đang để khung 4px, header 0, content 8px, footer 0 — mỗi mảng một kiểu.
   Phải bo từng mảng chứ KHÔNG dùng `overflow: hidden` trên .e-dialog để cắt cho
   gọn: dialog nào có combobox/lịch thì popup của chúng bị cắt theo. */
.e-dialog {
    border-radius: 6px;
}

.e-dialog .e-dlg-header-content {
    border-radius: 6px 6px 0 0;
}

.e-dialog .e-dlg-content {
    border-radius: 6px;
}

.e-dialog .e-footer-content {
    border-radius: 0 0 6px 6px;
}

/* 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. Icon lu-* (css/icons.css)
   thì ô vuông 16px chẵn pixel + bản vẽ Fluent cỡ 16 cho sắc nét. */
.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;
}

.e-dropdown-popup ul .e-item .e-menu-icon:is([class^="lu-"], [class*=" lu-"]) {
    --ic-size: 16px;
    --ic-art: var(--ic16);
    width: var(--ic-size);
    height: var(--ic-size);
}

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


/* ==========================================================================
   MŨI TÊN ĐÓNG/MỞ CỦA DROPDOWN SYNCFUSION — dùng chung glyph với SearchDropDownGrid
   ==========================================================================
   Hai loại ô chọn danh mục đứng cạnh nhau trên cùng một form (SfComboBox/SfDropDownList
   và SearchDropDownGrid) nhưng vẽ mũi tên bằng hai bộ icon khác nhau: theme Syncfusion
   dùng "e-icons" U+E729, còn .sdg-btn-arrow dùng "smart-icons" U+E901 (biến
   --smart-icon-arrow-down). Nét và độ đậm khác nhau thấy rõ khi đặt sát nhau.

   Lấy mũi tên của SearchDropDownGrid làm chuẩn, kèm luôn hiệu ứng xoay 180° lúc mở mà
   theme Syncfusion không có (nó chỉ đổi màu). Lớp .e-icon-anim do chính Syncfusion gắn
   lên wrapper khi popup mở. Từ 14/10/2026 SearchDropDownGrid vẽ chevron SVG 16px (bỏ icon font
   Smart) nên ở đây vẽ cùng hình bằng mask (màu theo currentColor qua background).

   Specificity: theme khai ::before ở mức (0,3,0) nên rule ở đây phải đủ bốn class
   (.e-input-group + .e-input-group-icon.e-ddl-icon.e-icons) mới thắng — đo trên DOM thật
   18/09/2026, KHÔNG cần !important. */
.e-input-group .e-input-group-icon.e-ddl-icon.e-icons::before,
.e-input-group.e-control-wrapper .e-input-group-icon.e-ddl-icon.e-icons::before {
    content: "";
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    color: var(--ink-3, #8b95a1);
    display: inline-block;
    transition: transform .2s ease-out;
}

/* Trạng thái mở. Hai selector phải soi gương đúng bộ class của khối trên rồi CỘNG THÊM
   .e-icon-anim: viết ngắn hơn (chỉ ".e-icon-anim .e-…") thì thua chính vế
   ".e-input-group.e-control-wrapper …" ở trên — (0,4,0) so với (0,5,0) — và mũi tên đứng im.
   Đo trên DOM thật 18/09/2026, không cần !important. */
.e-input-group.e-icon-anim .e-input-group-icon.e-ddl-icon.e-icons::before,
.e-input-group.e-control-wrapper.e-icon-anim .e-input-group-icon.e-ddl-icon.e-icons::before {
    transform: rotate(180deg);
}