/* ==========================================================================
   Báo cáo admin — lớp responsive dùng chung (2026-07-31)
   --------------------------------------------------------------------------
   Chủ quán xem báo cáo trên điện thoại. Sidebar đã tự thu gọn dưới 992px và
   thanh lọc đã dùng col-md-* nên tự xuống dòng; chỗ hỏng thật là BẢNG:
   8–11 cột trên màn 375px thì hoặc bị nén nát chữ, hoặc phải kéo ngang từng
   dòng để đọc — không ai đối chiếu tiền kiểu đó được.

   Cách xử lý: dưới 768px mỗi <tr> biến thành một THẺ xếp dọc, mỗi <td> là một
   dòng "nhãn — giá trị". Nhãn lấy từ attribute data-label trên chính <td> đó,
   nên view chỉ cần thêm class .report-table-stack + data-label, KHÔNG phải
   viết lại markup thành hai phiên bản desktop/mobile (hai bản luôn lệch nhau
   sau vài lần sửa).
   ========================================================================== */

/* Khung biểu đồ Chart.js — thay cho style="height:280px" nội tuyến, để media
   query bên dưới hạ chiều cao được trên điện thoại. */
.chart-box {
    position: relative;
    height: 280px;
}

.chart-box-sm {
    position: relative;
    height: 200px;
}

/* Heatmap 7 cột × 16 hàng không thể co xuống 375px mà còn đọc được. Cho nó
   cuộn ngang TRONG khung của nó, thay vì để cả trang trôi ngang. */
.heatmap-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   Doanh thu tổng hợp (/admin/reports/revenue-summary)
   --------------------------------------------------------------------------
   Báo cáo này KHÔNG dùng bảng: ba tầng (hệ thống → chi nhánh → ca) lồng nhau,
   nhồi vào <table> thì trên điện thoại phải cuộn ngang mới đọc được con số,
   mà đây lại là báo cáo chủ quán xem trên điện thoại nhiều nhất. Thay bằng
   thẻ lồng thẻ: bố cục dọc chạy tốt từ 320px, lên desktop chỉ giãn ra.
   ========================================================================== */

/* Nút nhanh Hôm qua/Hôm nay/Tuần này/... — cuộn ngang trong hàng của nó thay vì
   xuống 3 dòng trên màn hẹp. */
.rs-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rs-preset-btn {
    border: 1px solid var(--border-color, #3D3D3D);
    color: var(--text-muted, #AAAAAA);
    background: transparent;
    border-radius: 999px;
    padding: 6px 16px;
    /* Ngón tay, không phải chuột: giữ vùng chạm đủ cao (spec phase 2 Android). */
    min-height: 40px;
    display: inline-flex;
    align-items: center;
}

.rs-preset-btn:hover {
    color: #fff;
    border-color: var(--primary-color, #FF6B35);
}

.btn-check:checked + .rs-preset-btn {
    background: var(--primary-color, #FF6B35);
    border-color: var(--primary-color, #FF6B35);
    color: #fff;
    font-weight: 600;
}

/* Tầng 1 — tổng toàn hệ thống */
.rs-hero {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.18) 0%, rgba(255, 107, 53, 0.04) 100%);
    border: 1px solid rgba(255, 107, 53, 0.35);
    border-radius: 20px;
    padding: 18px 20px;
    margin-bottom: 16px;
}

.rs-hero-label {
    color: var(--text-muted, #AAAAAA);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.rs-hero-range {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 2px 10px;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 500;
}

/* Con số lớn nhất trang phải có nhãn đi kèm, nếu không người xem không biết 2.4rem kia
   là doanh thu hay tiền mặt. Nhãn trái — số phải, xuống dòng khi màn hẹp. */
.rs-hero-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2px 16px;
    margin: 10px 0 2px;
}

.rs-hero-total-label {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.rs-hero-value {
    color: #fff;
    font-size: clamp(1.6rem, 7vw, 2.4rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    font-variant-numeric: tabular-nums;
}

/* Ghi chú dưới khối tổng — giải thích khoản chi, tránh có người trừ nó vào doanh thu. */
.rs-note {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-muted, #AAAAAA);
    font-size: 0.78rem;
    line-height: 1.45;
}

/* ==========================================================================
   Khối "nhãn trái — số phải", dùng chung cho CẢ BA TẦNG.
   --------------------------------------------------------------------------
   Trước đây mỗi tầng trình bày một kiểu: tầng 1 là hàng ngang cách nhau bằng
   khoảng trắng, tầng 2 là một dòng "3 đơn · TM ... · CK ...", tầng 3 là lưới 3
   cột nhãn-trên-số-dưới. Ba cách đọc khác nhau trên cùng một màn hình, và không
   cột số nào dóng thẳng với cột số nào nên so ca này với ca kia phải dò từng chữ.
   Giờ tất cả chung một khối: nhãn sát mép trái, số sát mép phải, chữ số cùng bề
   ngang (tabular-nums) nên các con số tự xếp thành một cột dọc.
   ========================================================================== */
.rs-stats {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 12px;
}

.rs-stat {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.rs-stats-tight .rs-stat {
    padding: 5px 0;
}

.rs-stat-label {
    color: var(--text-muted, #AAAAAA);
    font-size: 0.82rem;
    font-weight: 500;
}

.rs-stat-value {
    color: #fff;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
    /* Chữ số cùng bề ngang: đổi kỳ xem thì cột số đứng yên, không nhảy qua nhảy lại. */
    font-variant-numeric: tabular-nums;
}

/* Dòng chốt lại (tiền mặt còn lại) — đậm hơn hẳn để mắt bắt được ngay giữa các dòng phụ. */
.rs-stat-strong .rs-stat-label { color: rgba(255, 255, 255, 0.85); font-weight: 600; }
.rs-stat-strong .rs-stat-value { font-weight: 700; font-size: 1.02rem; }

/* Từ 576px trở lên xếp 2 cột: bớt chiều cao mà vẫn giữ nguyên cách đọc trái—phải.
   Trên màn rộng mà để một cột thì nhãn nằm mép trái còn số nằm mép phải cách nhau cả
   nghìn pixel, mắt không nối được nhãn với số.

   Chia cột CÓ CHỦ Ý chứ không thả cho lưới tự rót: chuỗi tiền mặt (tiền mặt → chi trong
   ca → còn lại) phải nằm dọc trong CÙNG một cột thì mới đọc ra phép trừ. Rót tự động thì
   "Tiền mặt" rơi cột phải còn "Chi trong ca" rơi cột trái, thành ra ba con số của một
   phép tính nằm rải ba chỗ.
   grid-auto-flow: dense để ô đầu cột trái được lấp ngược, không thì dòng đầu thủng một lỗ. */
@media (min-width: 576px) {
    .rs-stats {
        grid-template-columns: 1fr 1fr;
        column-gap: 32px;
        grid-auto-flow: dense;
    }

    .rs-stat-money { grid-column: 1; }
    .rs-stat-meta  { grid-column: 2; }
}

/* Tầng 2 — chi nhánh (thẻ gập/mở bằng <details>) */
.rs-branch {
    background: var(--card-bg, #2D2D2D);
    border: 1px solid var(--border-color, #3D3D3D);
    border-radius: 16px;
    margin-bottom: 12px;
    overflow: hidden;
}

.rs-branch-head {
    list-style: none;
    cursor: pointer;
    padding: 14px 16px;
    min-height: 44px;
}

/* Bỏ mũi tên mặc định của <details> (mỗi trình duyệt một kiểu) — đã có chevron riêng. */
.rs-branch-head::-webkit-details-marker { display: none; }
.rs-branch-head::marker { content: ""; }

.rs-branch-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.rs-branch-name {
    color: #fff;
    font-weight: 600;
    font-size: 1.02rem;
}

.rs-branch-total {
    color: #fff;
    font-weight: 700;
    font-size: 1.2rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.rs-chevron {
    display: inline-block;
    transition: transform 0.15s ease;
    color: var(--primary-color, #FF6B35);
    margin-right: 2px;
}

.rs-branch[open] .rs-chevron {
    transform: rotate(90deg);
}

/* Tầng 3 — ca nhân viên */
.rs-shifts {
    padding: 0 12px 12px;
}

.rs-shift {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 12px 14px;
    margin-top: 8px;
}

.rs-shift-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.rs-shift-name {
    color: #fff;
    font-weight: 600;
}

.rs-shift-total {
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.rs-shift-meta {
    color: var(--text-muted, #AAAAAA);
    font-size: 0.78rem;
    margin-top: 2px;
}

.rs-badge {
    font-size: 0.68rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 2px 8px;
    margin-left: 6px;
    white-space: nowrap;
}

.rs-badge-open {
    background: rgba(74, 222, 128, 0.15);
    color: #4ade80;
}

.rs-badge-orphan {
    background: rgba(250, 204, 21, 0.15);
    color: #facc15;
}

.rs-cash { color: #4ade80; }
.rs-transfer { color: #22d3ee; }
/* Cam, không đỏ: tiền chi trong ca là khoản HỢP LỆ (mua đá, trả ship), không phải
   khoản hụt. Đỏ ở báo cáo tiền mặc định được hiểu là "có vấn đề". */
.rs-expense { color: #fb923c; }

/* Lệch két. Hụt (âm) là chuyện phải xử lý → đỏ. Thừa (dương) chỉ là đếm dư → vàng, KHÔNG
   dùng màu tiền mặt (xanh) vì thừa két không phải tin vui, cũng là đếm sai. */
.rs-short { color: #f87171; }
.rs-over { color: #facc15; }

/* Chỗ đáng lẽ là số nhưng chưa có số ("Chưa kết ca") — nhạt đi để mắt không đọc nhầm
   thành một giá trị tiền. */
.rs-muted-value { color: var(--text-muted, #AAAAAA); font-weight: 500; }

.rs-empty {
    color: var(--text-muted, #AAAAAA);
    font-size: 0.85rem;
    padding: 10px 4px 2px;
}

@media (max-width: 767.98px) {
    .chart-box { height: 240px; }
    .chart-box-sm { height: 180px; }

    .heatmap-scroll .heatmap-grid-container {
        min-width: 640px;
    }

    /* --- Bảng → thẻ xếp dọc --- */
    .report-table-stack thead {
        /* clip chứ không display:none — trình đọc màn hình vẫn thấy tiêu đề,
           mà mắt thường thì không, vì nhãn đã lặp lại ở từng ô qua data-label. */
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .report-table-stack,
    .report-table-stack tbody,
    .report-table-stack tr,
    .report-table-stack td {
        display: block;
        width: 100%;
    }

    .report-table-stack tr {
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        padding: 10px 14px;
        margin-bottom: 12px;
        background: rgba(255, 255, 255, 0.02);
    }

    .report-table-stack td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        text-align: right !important;
        border: 0 !important;
        padding: 6px 0 !important;
        /* Nhiều ô đang bị chặn bề ngang bằng style nội tuyến (max-width:150px)
           để cắt bớt trên desktop. Ở dạng thẻ thì cả bề ngang màn hình là của
           nó, chặn lại chỉ làm chữ bị "..." vô cớ. */
        max-width: none !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .report-table-stack td::before {
        content: attr(data-label);
        flex: 0 0 42%;
        text-align: left;
        color: var(--text-muted, #9ca3af);
        font-size: 0.78rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    /* Ô không khai data-label (vd dòng "không có dữ liệu" dùng colspan) thì
       không vẽ nhãn và chiếm trọn bề ngang. */
    .report-table-stack td:not([data-label])::before {
        content: none;
    }

    .report-table-stack td[colspan] {
        display: block;
        text-align: center !important;
    }

    /* Dòng trống chỉ có một ô — bỏ luôn khung thẻ cho đỡ rối. */
    .report-table-stack tr:has(td[colspan]) {
        border: 0;
        background: none;
        padding: 0;
    }

    /* .table-responsive bọc ngoài vẫn còn overflow-x; ở dạng thẻ thì không còn
       gì tràn ngang nữa, tắt để không hiện thanh cuộn thừa. */
    .report-table-stack-wrap {
        overflow-x: visible !important;
    }
}

/* ==========================================================================
   Biểu đồ doanh thu theo khung giờ (trong /admin/reports/revenue-summary)
   ========================================================================== */
.rs-chart {
    background: var(--card-bg, #2D2D2D);
    border: 1px solid var(--border-color, #3D3D3D);
    border-radius: 18px;
    padding: 16px;
    margin-bottom: 16px;
}

.rs-chart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.rs-chart-title {
    color: #fff;
    font-weight: 600;
    font-size: 0.98rem;
}

.rs-chart-sub {
    color: var(--text-muted, #AAAAAA);
    font-size: 0.76rem;
}

/* Chart.js cần khung có chiều cao thật (canvas responsive co theo phần tử cha). */
.rs-chart-box {
    position: relative;
    height: 260px;
}

/* Chú thích màu: mỗi chi nhánh một dòng nhãn-trái/số-phải, cùng luật với .rs-stats —
   thả lưới tự rót thì cột tiền giữa các chi nhánh không thẳng hàng. */
.rs-chart-legend {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rs-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
}

.rs-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex: 0 0 auto;
}

.rs-legend-name {
    color: var(--text-muted, #AAAAAA);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rs-legend-value {
    margin-left: auto;
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Nút mở danh sách hoá đơn, nằm giữa tên chi nhánh và con số tổng. */
.rs-bills-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 6px 12px;
    border: 1px solid var(--border-color, #3D3D3D);
    border-radius: 999px;
    color: var(--text-muted, #AAAAAA);
    text-decoration: none;
    font-size: 0.78rem;
    /* Ngón tay, không phải chuột (spec phase 2 Android): giữ vùng chạm >= 40px. */
    min-height: 40px;
    white-space: nowrap;
}

.rs-bills-btn:hover,
.rs-bills-btn:focus {
    color: #fff;
    border-color: var(--primary-color, #FF6B35);
}

/* ==========================================================================
   Danh sách hoá đơn + chi tiết hoá đơn (/admin/reports/bills)
   ========================================================================== */
.bl-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.bl-back,
.bd-share-btn {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid var(--border-color, #3D3D3D);
    background: transparent;
    color: #fff;
    text-decoration: none;
    font-size: 1.1rem;
}

.bd-share-btn { margin-left: auto; }

.bl-back:hover,
.bd-share-btn:hover {
    border-color: var(--primary-color, #FF6B35);
    color: var(--primary-color, #FF6B35);
}

.bl-head-text { min-width: 0; }

.bl-title {
    color: #fff;
    font-weight: 700;
    font-size: 1.15rem;
    margin: 0;
    text-shadow: 0 0 10px rgba(255, 107, 53, 0.6);
}

.bl-subtitle {
    color: var(--text-muted, #AAAAAA);
    font-size: 0.82rem;
}

.bl-dot { opacity: 0.5; margin: 0 4px; }

.bl-search { position: relative; }

.bl-search > i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted, #AAAAAA);
    pointer-events: none;
}

.bl-search input { padding-left: 36px; }

.bl-summary {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.bl-summary-item {
    flex: 1;
    background: var(--card-bg, #2D2D2D);
    border: 1px solid var(--border-color, #3D3D3D);
    border-radius: 14px;
    padding: 10px 14px;
}

.bl-summary-label {
    display: block;
    color: var(--text-muted, #AAAAAA);
    font-size: 0.75rem;
}

.bl-summary-value {
    display: block;
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

.bl-money { color: #4ade80; }

.bl-filter-note,
.bl-empty {
    color: var(--text-muted, #AAAAAA);
    font-size: 0.85rem;
    margin-bottom: 12px;
}

.bl-empty {
    text-align: center;
    padding: 40px 12px;
}

.bl-empty i {
    display: block;
    font-size: 2rem;
    margin-bottom: 8px;
    opacity: 0.4;
}

.bl-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.bl-row {
    position: relative;
    display: block;
    padding: 12px 34px 12px 14px;
    background: var(--card-bg, #2D2D2D);
    border: 1px solid var(--border-color, #3D3D3D);
    border-radius: 14px;
    text-decoration: none;
}

.bl-row:hover { border-color: var(--primary-color, #FF6B35); }

.bl-row-main {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.bl-row-code {
    color: #fff;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.bl-row-total {
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.bl-row-meta {
    color: var(--text-muted, #AAAAAA);
    font-size: 0.78rem;
    margin-top: 2px;
}

.bl-row-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted, #AAAAAA);
}

.bl-chip {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    background: rgba(255, 107, 53, 0.15);
    color: var(--primary-color, #FF6B35);
}

.bl-more {
    width: 100%;
    min-height: 44px;
    border-radius: 14px;
    border: 1px dashed var(--border-color, #3D3D3D);
    background: transparent;
    color: var(--text-muted, #AAAAAA);
    font-size: 0.85rem;
}

.bl-more:hover {
    color: #fff;
    border-color: var(--primary-color, #FF6B35);
}

/* --- Chi tiết hoá đơn --- */
.bd-card { margin-bottom: 16px; }

.bd-code-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.bd-code {
    color: #fff;
    font-weight: 700;
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
}

.bd-status {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    background: rgba(74, 222, 128, 0.15);
    color: #4ade80;
}

.bd-status-cancelled,
.bd-status-refunded {
    background: rgba(248, 113, 113, 0.15);
    color: #f87171;
}

.bd-status-submitted,
.bd-status-draft {
    background: rgba(250, 204, 21, 0.15);
    color: #facc15;
}

.bd-meta { display: flex; flex-direction: column; gap: 8px; }

.bd-meta-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.bd-meta-label {
    color: var(--text-muted, #AAAAAA);
    font-size: 0.82rem;
    flex: 0 0 auto;
}

.bd-meta-value {
    color: #fff;
    font-size: 0.88rem;
    text-align: right;
}

.bd-meta-sub {
    display: block;
    color: var(--text-muted, #AAAAAA);
    font-size: 0.76rem;
}

.bd-section-head {
    display: flex;
    justify-content: space-between;
    color: var(--text-muted, #AAAAAA);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color, #3D3D3D);
    margin-bottom: 10px;
}

.bd-item {
    padding: 8px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}

.bd-item-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.bd-item-name { color: #fff; font-weight: 600; font-size: 0.92rem; }

.bd-item-total {
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.bd-item-sub,
.bd-item-extra {
    color: var(--text-muted, #AAAAAA);
    font-size: 0.78rem;
    margin-top: 2px;
}

.bd-item-extra { padding-left: 10px; }

.bd-totals {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bd-total-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-muted, #AAAAAA);
    font-size: 0.86rem;
}

.bd-total-row > span:last-child {
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.bd-total-strong {
    padding-top: 8px;
    border-top: 1px solid var(--border-color, #3D3D3D);
    font-size: 1rem;
}

.bd-total-strong > span:last-child { font-weight: 700; font-size: 1.1rem; }

.bd-total-paid > span:last-child {
    color: var(--primary-color, #FF6B35);
    font-weight: 700;
}

.bd-minus { color: #fb923c !important; }

/* --- Hộp xem trước ảnh chia sẻ --- */
.bd-share-sheet {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.bd-share-sheet[hidden] { display: none; }

body.bd-share-open { overflow: hidden; }

.bd-share-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
}

.bd-share-panel {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: var(--card-bg, #2D2D2D);
    border: 1px solid var(--border-color, #3D3D3D);
    border-radius: 20px;
    padding: 14px;
}

.bd-share-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    font-weight: 600;
    margin-bottom: 10px;
}

.bd-share-close {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted, #AAAAAA);
}

/* Ảnh hoá đơn dài hơn màn hình là chuyện thường — cho cuộn TRONG khung xem trước,
   không để cả trang trôi ngang/dọc theo. */
.bd-share-preview {
    flex: 1 1 auto;
    overflow-y: auto;
    background: #fff;
    border-radius: 12px;
    min-height: 160px;
}

.bd-share-preview img { width: 100%; display: block; }

.bd-share-loading {
    color: #555;
    text-align: center;
    padding: 40px 12px;
    font-size: 0.85rem;
}

.bd-share-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.bd-share-hint {
    color: var(--text-muted, #AAAAAA);
    font-size: 0.78rem;
    margin-top: 8px;
}

@media (max-width: 767.98px) {
    .rs-chart-box { height: 220px; }

    /* Nút "Hoá đơn" trên màn hẹp: bỏ chữ, giữ icon để tên chi nhánh không bị ép
       xuống dòng giữa chừng. */
    .rs-bills-btn span { display: none; }
    .rs-bills-btn { padding: 6px 10px; }
}