/* ============================================================
   etrans-ui.css — shared Pricing design system
   Ported from the demo (gia-van-chuyen.css) onto appv2.css tokens.
   Reused by Chứng từ + future Pricing pages (giá VC, duyệt giá, phụ phí…).
   Brand hardcodes were replaced with --primary-* tokens.
   ============================================================ */

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 13px;
    border-radius: var(--r);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all var(--tr);
    white-space: nowrap;
    font-family: inherit;
}
.btn i { font-size: 14px; }
.btn-sm { padding: 4px 9px; font-size: 12px; }

.btn-p { background: var(--p); color: #fff; border-color: var(--p); }
.btn-p:hover { background: var(--primary-active); }
.btn-p:active { transform: scale(.98); }

.btn-o { background: #fff; color: var(--t); border-color: var(--bs); }
.btn-o:hover { background: var(--bg); border-color: var(--p); color: var(--p); }

.btn-g { background: transparent; color: var(--tm); border-color: transparent; }
.btn-g:hover { background: var(--bg); color: var(--t); }

.btn-ok { background: var(--ok); color: #fff; border-color: var(--ok); }
.btn-ok:hover { filter: brightness(.92); }

.btn-err { background: var(--err); color: #fff; border-color: var(--err); }
.btn-err:hover { filter: brightness(.92); }
/* Hành động phá hủy / nhãn bắt buộc — dùng chung (trước đây copy trong từng *.razor.css scoped). */
.act-err { color: var(--err, #dc2626) !important; }
.act-err-btn { background: var(--err, #dc2626) !important; border-color: var(--err, #dc2626) !important; color: #fff !important; }
.act-warn { color: var(--warn, #d97706) !important; }
.act-warn-btn { background: var(--warn, #d97706) !important; border-color: var(--warn, #d97706) !important; color: #fff !important; }
.req { color: var(--err, #dc2626); }

.btn-warn { background: var(--warn); color: #fff; border-color: var(--warn); }
.btn-warn:hover { filter: brightness(.92); }

.btn:disabled { opacity: .6; cursor: not-allowed; }

/* ---------- Badges ---------- */
.bdg {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}
.bdg-ok    { background: var(--ok-bg);   color: #15803d; }
.bdg-warn  { background: var(--warn-bg); color: #92400e; }
.bdg-err   { background: var(--err-bg);  color: #991b1b; }
.bdg-info  { background: var(--info-bg); color: #0e7490; }
.bdg-vio   { background: var(--vio-bg);  color: #6d28d9; }
.bdg-gray  { background: #f1f5f9; color: #475569; }
.bdg-blue  { background: #eff6ff; color: #1d4ed8; }
.bdg-green { background: #f0fdf4; color: #15803d; }
.bdg-amber { background: #fef9ec; color: #a16207; }
.bdg-dot   { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* ---------- Filter bar ---------- */
.fbar {
    background: var(--s);
    border: 1px solid var(--b);
    border-radius: var(--rl);
    padding: 14px 18px;
    margin-bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}
/* ---------- Khung bộ lọc thu/mở — mockup BA 08/2026 (doc/HTML 0306/bang-ke-*.html: .filter-bar) ----------
   Dùng ở 4 trang bảng kê (Xe tải / CONT / Sà lan / Tàu chuột) + tab "Phụ phí quy đổi". Để TOÀN CỤC vì
   Blazor cô lập CSS theo component — tab Phụ phí quy đổi là component riêng, rule trong BangKe*.razor.css
   không với tới. Markup: .filter-bar > [.filter-bar-head (tiêu đề + nút mũi tên) , .fbar.filter-bar-body].
   Bấm cả dòng đầu để thu/mở (như mockup); thu gọn = ẩn THÂN, giữ khung + tiêu đề; mặc định MỞ. */
.filter-bar {
    background: var(--s); border: 1px solid var(--b); border-radius: var(--rl);
    padding: 10px 14px; margin-bottom: 12px;
    display: flex; flex-direction: column; gap: 10px;
}
.filter-bar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; user-select: none; }
.filter-bar-title { font-size: 11px; font-weight: 800; color: var(--tm); text-transform: uppercase; letter-spacing: .04em; }
.filter-bar-toggle-btn {
    border: none; background: transparent; color: var(--tm); cursor: pointer; padding: 0; font-size: 12px;
    display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 5px; flex: 0 0 auto;
}
.filter-bar-toggle-btn:hover { background: #eef2ff; color: var(--p); }
.filter-bar-toggle-btn i { transition: transform .15s; }
.filter-bar.collapsed .filter-bar-toggle-btn i { transform: rotate(-90deg); }
/* Thân nằm trong khung: bỏ viền/nền/padding của .fbar (kể cả bản scoped trong *.razor.css — 3 class để
   thắng `.fbar[b-…]`), tránh viền kép. Thu gọn chỉ ẩn thân. */
.filter-bar > .fbar.filter-bar-body { border: 0; border-radius: 0; background: transparent; padding: 0; margin: 0; }
.filter-bar.collapsed > .fbar.filter-bar-body { display: none; }

.fg { display: flex; flex-direction: column; gap: 4px; min-width: 130px; flex: 1; }
.flbl { font-size: 10.5px; font-weight: 600; color: var(--tm); text-transform: uppercase; letter-spacing: .5px; }

.fi, .fs {
    height: 32px;
    padding: 0 9px;
    border: 1px solid var(--b);
    border-radius: var(--r);
    font-size: 12.5px;
    font-family: inherit;
    color: var(--t);
    background: var(--bg);
    outline: none;
    transition: border-color var(--tr), box-shadow var(--tr);
    width: 100%;
}
.fi:focus, .fs:focus { border-color: var(--p); box-shadow: var(--focus-ring); background: #fff; }

.sw { position: relative; }
.sw svg, .sw i {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tl);
    pointer-events: none;
    font-size: 14px;
}
.sw .fi { padding-right: 32px; }

/* ---------- Multiselect (from demo chung-tu page-style) ---------- */
.ms-wrap { position: relative; flex: 1; min-width: 130px; }
.ms-box {
    height: 32px;
    padding: 0 28px 0 9px;
    border: 1px solid var(--b);
    border-radius: var(--r);
    font-size: 12.5px;
    color: var(--t);
    background: var(--bg);
    display: flex;
    align-items: center;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: border-color var(--tr), box-shadow var(--tr);
}
.ms-box:hover, .ms-box.open { border-color: var(--p); box-shadow: var(--focus-ring); background: #fff; }
.ms-arrow { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--tl); }
/* Nút ✕ bỏ chọn (SearchableSelect AllowClear) — nằm trái mũi tên; ô nới padding phải để chữ không chui xuống dưới nút. */
.ms-box.has-clear { padding-right: 48px; }
.ms-clear {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--tl);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
}
.ms-clear:hover { background: var(--pl); color: var(--p); }
.ms-clear:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* ⭐ Ô ĐANG MỞ POPOVER — nâng stacking của chính ô (31/08/2026).

   VÌ SAO CẦN: cột đóng băng khai `position: sticky; z-index: 2`, mà sticky + z-index SỐ thì TẠO
   STACKING CONTEXT. Panel của ETransPopover tuy `position: fixed; z-index: 1200` nhưng 1200 đó
   được giải quyết BÊN TRONG context mức 2 ⇒ cả panel bị vẽ dưới `thead th` (z-index 3) và dưới
   `th.col-freeze-l` (5). Triệu chứng: rê vào MÃ CHUYẾN thì popover "nằm dưới lưới" và trông như
   hiện thiếu chữ — thực ra chỉ còn thấy phần thò ra ngoài bảng.

   `position: fixed` thoát được CLIPPING của khung cuộn nhưng KHÔNG thoát THỨ TỰ VẼ. Hai chuyện
   khác nhau — đừng sửa bằng cách tăng z-index của `.epop-panel`: nó đã bị đóng khung, tăng vô ích.

   Ô ở cột thường không tạo context nên không dính; lỗi chỉ lộ khi popover nằm trong cột đóng băng.

   Toàn cục, KHÔNG để trong *.razor.css: lớp do JS gắn cho ô của BẤT KỲ trang nào (cùng lý do
   `.ms-backdrop` nằm ở đây). `!important` vì selector của trang (`.bkx-tbl thead th.col-freeze-l`)
   đặc thù hơn hẳn một lớp đơn. */
.epop-noi-bat { z-index: 1201 !important; }

/* Lớp trong suốt bắt click ngoài để đóng dropdown SearchableSelect (dùng toàn cục, mọi trang). */
.ms-backdrop { position: fixed; inset: 0; z-index: 499; background: transparent; }
.ms-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    background: #fff;
    border: 1px solid var(--b);
    border-radius: var(--r);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    z-index: 500;
    padding: 5px 0;
    max-height: 220px;
    overflow-y: auto;
}
.ms-option { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.ms-option:hover { background: var(--pl); }
.ms-option input[type=checkbox] { width: 14px; height: 14px; accent-color: var(--p); flex-shrink: 0; }
.ms-tag { display: inline-flex; align-items: center; gap: 3px; background: var(--pl); color: var(--p); border-radius: 4px; padding: 1px 6px; font-size: 11px; font-weight: 500; }

/* ---------- Carrier group header ---------- */
.gh {
    background: #f8f9fc;
    border: 1px solid var(--b);
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: background var(--tr);
    border-radius: var(--r) var(--r) 0 0;
    border-bottom: none;
}
.gh:hover { background: #f0f4ff; }
.gh-icon { width: 32px; height: 32px; border-radius: var(--r); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.gh-icon.carrier { background: var(--pl); color: var(--p); }
.gh-info { flex: 1; min-width: 0; }
.gh-name { font-weight: 600; font-size: 13px; }
.gh-meta { font-size: 11.5px; color: var(--tm); display: flex; gap: 10px; flex-wrap: wrap; }
.gh-stats { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }

/* ---------- Contract tree ---------- */
.cn { background: var(--s); border: 1px solid var(--b); border-radius: var(--rl); margin-bottom: 10px; overflow: hidden; transition: box-shadow var(--tr); }
.cn:hover { box-shadow: var(--sh); }
.ch { padding: 12px 16px; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: background var(--tr); }
.ch:hover { background: var(--bg); }
.ci { width: 34px; height: 34px; border-radius: var(--r); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.ci.hd { background: #eff6ff; color: var(--p); }
.ci.pl { background: var(--warn-bg); color: var(--warn); }
.cinfo { flex: 1; min-width: 0; }
.cname { font-weight: 600; font-size: 13px; margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccode { color: var(--tm); font-weight: 400; }
.cmeta { font-size: 11.5px; color: var(--tm); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cdates { text-align: right; font-size: 12px; white-space: nowrap; flex-shrink: 0; }
.cdates .to { font-weight: 600; }
.cactions { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
.ctoggle { font-size: 15px; color: var(--tl); transition: transform .2s; flex-shrink: 0; }
.ctoggle.open { transform: rotate(180deg); }
.cchildren { border-top: 1px solid var(--b); background: #fafbfc; display: none; }
.cchildren.open { display: block; }
.cchild { display: flex; align-items: center; gap: 8px; padding: 9px 16px 9px 46px; border-bottom: 1px solid var(--b); transition: background var(--tr); }
.cchild:last-child { border-bottom: none; }
.cchild:hover { background: #f0f4ff; }

/* date status colors (computed in C#) */
.dt-expired { color: var(--tl); }
.dt-soon { color: var(--err); }
.dt-caution { color: var(--warn); }
.dt-ok { color: var(--ok); }

/* ---------- Modal ---------- */
.mo {
    position: fixed;
    inset: 0;
    background: rgba(15, 20, 40, .45);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.md {
    background: var(--s);
    border-radius: var(--rl);
    width: 620px;
    max-width: 96vw;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;                 /* header/footer cố định; chỉ .mb cuộn → tiêu đề không cuộn mất khi modal cao */
    box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
}
.md-lg { width: 960px; }
/* Modal review import có bảng nhiều cột: dùng gần toàn bộ viewport.
   Class nằm trong ETransModal nên phải đặt ở stylesheet global, không dùng CSS isolation của page. */
.md.import-review-modal {
    width: min(96vw, 1800px);
    max-width: none;
    height: 92vh;
    height: 92dvh;
    max-height: 92vh;
    max-height: 92dvh;
}
.md.import-review-modal > .mb {
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* Popup Chi tiết chuyến — bám mockup doc/HTML 0306/bang-ke-xetai.html (openTripDetail):
   khung cao cố định, KHỐI TRÊN cuộn riêng, KHỐI DƯỚI chia 2 cột (lịch sử | phụ phí).
   Class nằm trên .md của ETransModal nên PHẢI đặt global — CSS isolation của page không với tới. */
.md.trip-detail-modal {
    width: 1100px;
    height: 92vh;
    height: 92dvh;
    max-height: 92vh;
    max-height: 92dvh;
}
.md.trip-detail-modal > .mb {
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Popup CHI TIẾT có cột bình luận (Phụ phí / Duyệt giá / Giá vận chuyển / Phí bồi thường /
   Phụ phí phát sinh). Trước đây .mb cuộn nguyên khối nên cột phải bị kéo dài bằng cột form,
   ô nhập (.pcp-compose, margin-top:auto) rơi khỏi tầm nhìn — phải cuộn xuống mới thấy.
   Ở đây .mb thành flex-column KHÔNG cuộn; cột form và danh sách bình luận cuộn RIÊNG →
   ô nhập luôn hiện ngay khi mở popup.
   Cố ý KHÔNG khoá height cố định như .trip-detail-modal: giữ max-height kế thừa từ .md để màn
   ít trường (Phụ phí phát sinh) vẫn co theo nội dung, không để khoảng trắng chết ở đáy.
   .md/.mb thuộc ETransModal còn .pcp-* thuộc PricingCommentPanel → PHẢI đặt global,
   CSS isolation của trang không với tới.
   CHỈ áp cho popup chi tiết (chỉ-đọc). Form thêm/sửa dùng chung .pp-detail-layout nhưng KHÔNG
   được cắt overflow: dropdown của SearchableSelect sẽ bị cột cuộn xén mất. */
.md.pp-detail-modal > .mb,
.md.dg-detail-modal > .mb,
.md.gia-detail-modal > .mb,
.md.pbt-detail-modal > .mb,
.md.afl-detail-modal > .mb {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
/* grid-template-rows:minmax(0,1fr) BẮT BUỘC: hàng grid mặc định là auto → nở theo nội dung cột
   form, khi đó overflow-y:auto ở cột con không còn gì để cắt và ô nhập lại tụt xuống như cũ. */
.md.pp-detail-modal .pp-detail-layout,
.md.dg-detail-modal .dg-detail-layout,
.md.gia-detail-modal .gia-detail-layout,
.md.pbt-detail-modal .pbt-detail-layout,
.md.afl-detail-modal .afl-detail-layout {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr);
}
.md.pp-detail-modal .pp-detail-form,
.md.dg-detail-modal .dg-detail-info,
.md.gia-detail-modal .gia-detail-info,
.md.pbt-detail-modal .pbt-detail-info,
.md.afl-detail-modal .afl-detail-info {
    min-height: 0;
    overflow-y: auto;
    padding-right: 6px;                /* chừa chỗ thanh cuộn, chữ không dính sát đường kẻ dọc */
}
/* Sàn chiều cao của danh sách (min-height 210px / 170px cho ô trống) là để panel trông cân khi
   .mb tự do cuộn. Ở chế độ 2 cột chiều cao đã bị khoá → cái sàn đó biến thành tràn: cửa sổ thấp
   (~<520px) sẽ đẩy chính ô nhập ra ngoài vùng overflow:hidden. Bỏ sàn, cho danh sách co hết cỡ. */
.md.pp-detail-modal .pcp-list,
.md.dg-detail-modal .pcp-list,
.md.gia-detail-modal .pcp-list,
.md.pbt-detail-modal .pcp-list,
.md.afl-detail-modal .pcp-list,
.md.pp-detail-modal .pcp-state,
.md.dg-detail-modal .pcp-state,
.md.gia-detail-modal .pcp-state,
.md.pbt-detail-modal .pcp-state,
.md.afl-detail-modal .pcp-state {
    flex: 1 1 auto;
    min-height: 0;
}
/* Lớp bảo hiểm cho MỌI popup có bình luận mà .mb vẫn cuộn nguyên khối: form thêm/sửa (.md-lg)
   và toàn bộ popup chi tiết ở màn hẹp. Vô hại ở chế độ 2 cột phía trên vì .mb khi đó không cuộn. */
.mb .pcp-compose {
    position: sticky;
    bottom: 0;
    z-index: 1;
    background: var(--s, #fff);
}

.mh { padding: 18px 22px 0; display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex: 0 0 auto; }
.mt { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.mb { padding: 0 22px 18px; flex: 1 1 auto; overflow-y: auto; }
.mf { padding: 14px 22px; border-top: 1px solid var(--b); display: flex; justify-content: flex-end; gap: 8px; flex: 0 0 auto; }
.fr { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.fr1 { grid-template-columns: 1fr; }
.fr3 { grid-template-columns: 1fr 1fr 1fr; }
/* Section divider trong modal (dùng chung mọi màn) */
.sdiv { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--tm); margin: 2px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--b); }
.ff { display: flex; flex-direction: column; gap: 4px; }
.ff label { font-size: 11px; font-weight: 600; color: var(--tm); text-transform: uppercase; letter-spacing: .4px; }
.ff input, .ff select, .ff textarea {
    height: 34px;
    padding: 0 9px;
    border: 1px solid var(--b);
    border-radius: var(--r);
    font-size: 12.5px;
    font-family: inherit;
    color: var(--t);
    background: var(--bg);
    outline: none;
    transition: border-color var(--tr), box-shadow var(--tr);
}
.ff input:focus, .ff select:focus, .ff textarea:focus { border-color: var(--p); box-shadow: var(--focus-ring); background: #fff; }
.ff .hint { font-size: 10.5px; color: var(--tm); font-weight: 400; text-transform: none; letter-spacing: 0; display: flex; align-items: center; gap: 4px; }

/* ===== Modal responsive (baseline cho mọi màn; .razor.css scoped vẫn override khi cần) ===== */
@media (max-width: 768px) {
    .mo { align-items: flex-end; }                       /* bottom-sheet */
    .md, .md-lg {
        width: 100vw;
        max-width: 100vw;
        max-height: 92vh;
        max-height: 92dvh;                               /* iOS: trừ thanh công cụ Safari */
        border-radius: 14px 14px 0 0;
        display: flex; flex-direction: column; overflow: hidden;   /* header/footer cố định, chỉ body cuộn */
    }
    .md.import-review-modal {
        width: 100vw;
        max-width: 100vw;
        height: 92dvh;
        border-radius: 14px 14px 0 0;
    }
    .fr, .fr3 { grid-template-columns: 1fr; gap: 10px; margin-bottom: 10px; }
    .mh, .mf { padding-left: 16px; padding-right: 16px; flex: 0 0 auto; }
    .mf { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }   /* iOS: chừa home-indicator */
    .mb { padding-left: 16px; padding-right: 16px; flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    /* Popup chi tiết ở màn hẹp: layout đã xếp dọc 1 cột, chia thêm 2 vùng cuộn là phản tác dụng
       → trả .mb về cuộn nguyên khối. Ô nhập bình luận vẫn trong tầm nhìn nhờ .mb .pcp-compose
       (position:sticky) khai ở trên. Phải khai lại vì rule desktop có độ ưu tiên cao hơn .mb trần. */
    .md.pp-detail-modal > .mb,
    .md.dg-detail-modal > .mb,
    .md.gia-detail-modal > .mb,
    .md.pbt-detail-modal > .mb,
    .md.afl-detail-modal > .mb {
        display: block;
        overflow-y: auto;
    }
    /* grid-template-rows phải gỡ: 1 cột dọc thì hàng đầu (cột form) sẽ bị minmax(0,1fr) ép bẹp. */
    .md.pp-detail-modal .pp-detail-layout,
    .md.dg-detail-modal .dg-detail-layout,
    .md.gia-detail-modal .gia-detail-layout,
    .md.pbt-detail-modal .pbt-detail-layout,
    .md.afl-detail-modal .afl-detail-layout {
        grid-template-rows: none;
    }
    .md.pp-detail-modal .pp-detail-form,
    .md.dg-detail-modal .dg-detail-info,
    .md.gia-detail-modal .gia-detail-info,
    .md.pbt-detail-modal .pbt-detail-info,
    .md.afl-detail-modal .afl-detail-info {
        overflow: visible;
        padding-right: 0;
    }
    /* Tap target: tăng khoảng cách giữa nút hành động (giảm bấm nhầm nút phá hủy). */
    .row-acts, .cactions, .ppc-acts, .pp-acts, .dgc-acts, .gc-acts, .hrc-acts { gap: 8px; }
    .ff input, .ff select, .ff textarea { font-size: 16px; }   /* chống iOS auto-zoom + dễ chạm */
    .mf { flex-wrap: wrap; }
    .mf .btn { flex: 1 1 auto; justify-content: center; }
    /* Touch target ≥40px: nút nhỏ (kể cả chỉ-icon) đủ lớn để chạm, giảm bấm nhầm nút phá hủy. */
    .btn-sm { min-height: 40px; min-width: 40px; justify-content: center; }
    /* iOS: input date dùng chiều cao tự nhiên (native picker cao hơn ô 32-34px) → tránh tràn/lệch hàng. */
    input[type="date"] { height: auto; min-height: 40px; }
}

/* Tablet (769–1024px): giảm mật độ bảng để bảng rộng đỡ chật/tràn ngang trên tablet dọc.
   KHÔNG đổi layout-mode (vẫn dạng bảng); !important để thắng padding scoped per-page. */
@media (min-width: 769px) and (max-width: 1024px) {
    .bt-table th, .bt-table td { padding: 6px 8px !important; font-size: 12px !important; }
    .bt-table .bdg { font-size: 10.5px; }
}

/* Focus ring nhận diện cho phần tử tương tác tùy biến (div/card role=button, hàng bảng focusable). */
[role="button"]:focus-visible { outline: 2px solid var(--p, #2563eb); outline-offset: 2px; }
.bt-table tbody tr[tabindex]:focus-visible { outline: 2px solid var(--p, #2563eb); outline-offset: -2px; }

/* ============================================================
   Lớp dùng chung bị KẸT trong *.razor.css scoped — đưa lên global.
   Trước đây `.ct-empty` chỉ có trong scoped css của 5 trang bảng kê/chứng từ và `.chk` chỉ có
   trong GiaVanChuyen ⇒ trang mới dùng lại thì KHÔNG có style nào (chữ trần, checkbox mất layout).
   Cùng loại bẫy đã ghi cho `.ms-backdrop` trong CLAUDE.md.
   Trang nào đã tự định nghĩa scoped thì vẫn thắng (scoped có attribute selector → specificity cao hơn),
   nên thêm ở đây KHÔNG đổi giao diện các trang cũ.
   ============================================================ */

/* Trạng thái rỗng / đang tải dùng chung. */
.ct-empty {
    background: var(--s, #fff); border: 1px dashed var(--b, #e4e8ef); border-radius: 8px;
    padding: 40px; text-align: center; color: var(--tm, #64748b);
}

/* Nhãn bọc checkbox (label + ô tick nằm ngang). */
.chk {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; cursor: pointer; user-select: none;
}
.chk input { width: 15px; height: 15px; accent-color: var(--p, #2563eb); }

/* Chữ chỉ dành cho screen reader. Cũng đang kẹt trong scoped css của 4 trang bảng kê —
   thiếu nó ở trang mới thì chữ "ẩn" HIỆN RA giữa giao diện. */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Thanh cuộn (scrollbar) ─────────────────────────────────────────────────────
   PHẢI đặt ở đây, KHÔNG phải trong *.razor.css: Blazor biên dịch scoped css
   `::-webkit-scrollbar` thành `[b-xxxxxxx]::-webkit-scrollbar` → chỉ áp cho markup
   của ĐÚNG component đó chứ không phải toàn app. MainLayoutV2 từng ôm khối này và
   tưởng là luật chung, thực tế phần lớn màn hình vẫn xài scrollbar mặc định trình duyệt.

   Mảnh 6px, xám trung tính: thanh cuộn là chi tiết phụ trợ — tô màu thương hiệu (trước
   đây thumb = var(--primary-light), đỏ cam) chỉ tổ kéo mắt khỏi nội dung.
   6px là chốt TOÀN APP ngày 21/08/2026, sau khi thử cả 8px (to) và 4px (mảnh quá, khó tóm
   bằng chuột). Muốn mảnh hơn 6px mà vẫn dễ kéo thì hướng đúng là thanh cuộn dạng overlay,
   không phải hạ tiếp con số này.

   Chỗ nào cần mảnh hơn thì override --scrollbar-size trên chính khung đó, đừng viết lại
   cả bộ ::-webkit-scrollbar. */
:root {
    --scrollbar-size: 6px;
    --scrollbar-thumb: #c1c1c1;
    --scrollbar-thumb-hover: #a8a8a8;
}

/* ⚠️ KHÔNG gộp `scrollbar-width`/`scrollbar-color` với `::-webkit-scrollbar` trên cùng phần tử:
   Chrome thấy thuộc tính CHUẨN là chuyển hẳn sang đường render chuẩn và BỎ QUA toàn bộ
   pseudo-element webkit → quay về thanh cuộn mặc định 12px có nút mũi tên. Đã đo được đúng lỗi này.
   Nên tách: WebKit đi lối pseudo-element (chỉnh được đúng 8px), Firefox đi lối thuộc tính chuẩn. */

/* WebKit (Chrome / Edge / Safari) — chỉnh được bề ngang chính xác. */
::-webkit-scrollbar {
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: calc(var(--scrollbar-size) / 2);
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--scrollbar-thumb-hover);
    }

/* Góc giao nhau của 2 thanh cuộn — để mặc định là ô trắng lệch tông với track trong suốt. */
::-webkit-scrollbar-corner {
    background: transparent;
}

/* Firefox: không hiểu ::-webkit-scrollbar nên @supports này CHỈ đúng ở đây, Chrome bỏ qua.
   Bề ngang chỉ chọn được `thin` (trình duyệt tự quyết px), màu thì đặt được. */
@supports not selector(::-webkit-scrollbar) {
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--scrollbar-thumb) transparent;
    }
}

/* ===== ETransMonthInput — ô chọn THÁNG ÁP DỤNG của phí bồi thường (lịch 13 tháng) =====
   Để GLOBAL chứ không scoped: component dùng ở nhiều trang, và .razor.css scoped chỉ áp cho
   đúng một trang (đã dính lỗi này với .ms-backdrop). */
.emi { display: flex; flex-direction: column; gap: 6px; }
.emi-row { display: flex; gap: 8px; }
.emi-thang { flex: 1 1 auto; min-width: 0; }
.emi-nam { flex: 0 0 96px; }
.emi-hint {
    display: flex; align-items: flex-start; gap: 6px;
    font-size: 12px; line-height: 1.45; color: var(--t2, #5b6472);
    background: var(--bg2, #f6f8fa); border: 1px solid var(--bd, #e3e8ef);
    border-radius: 6px; padding: 6px 8px;
}
.emi-hint i { margin-top: 2px; flex: 0 0 auto; opacity: .75; }
.emi-hint b { color: var(--t1, #1f2733); font-weight: 600; }

@media (max-width: 480px) {
    .emi-row { flex-wrap: wrap; }
    .emi-nam { flex: 1 1 100%; }
}