/* ══════════════════════════════════════════════════════════
   pos/pos-app.css — lớp giao diện ứng dụng
   Nạp SAU pos.css và sau cả <style> nội tuyến của từng trang.

   1. Thanh điều hướng dưới đáy (điện thoại/tablet)
   2. Bảng trên mobile: GIỮ hàng–cột, chỉ bỏ bớt cột phụ
   3. Trang bán hàng mobile: danh sách hàng dạng dòng
   4. Vùng chạm đủ lớn + chặn iOS tự phóng to khi bấm ô nhập
   5. Safe-area cho máy có tai thỏ / thanh home
   6. Thanh báo mạng, báo cập nhật, nút cài app
══════════════════════════════════════════════════════════ */

:root {
    --bn-h: 60px;
    --sab:  env(safe-area-inset-bottom, 0px);
    --sat:  env(safe-area-inset-top, 0px);
}

html { -webkit-text-size-adjust: 100%; }

body {
    overscroll-behavior-y: contain;
    -webkit-tap-highlight-color: transparent;
}

/* Chỉ chặn bôi đen ở nút, không chặn toàn trang —
   nhân viên vẫn cần copy số hóa đơn, số điện thoại */
button, .btn, .nav-link, .bn-item, .badge {
    -webkit-user-select: none;
    user-select: none;
}

:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Thuộc tính `hidden` của HTML phải LUÔN thắng.
   Mặc định nó chỉ là `display: none` ở mức user-agent, nên bất kỳ luật
   nào của mình đặt display (flex, grid, inline-flex…) đều đè lên nó —
   phần tử vẫn hiện dù JS đã set hidden. Lỗi này đã phải vá lẻ bảy chỗ
   khác nhau trong file (ảnh vỡ ở modal khách, thanh chọn ở trang hàng
   hóa, nút Xóa hiện lúc đang tạo mới…), nên gom về một luật. */
[hidden] { display: none !important; }

* { scrollbar-width: thin; scrollbar-color: var(--gray-200) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 99px; }
*::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

.install-btn { align-items: center; gap: 6px; white-space: nowrap; }

.standalone .topbar { height: calc(56px + var(--sat)); padding-top: var(--sat); }

/* ══════════════════════════════════════
   1. THANH ĐIỀU HƯỚNG DƯỚI ĐÁY
══════════════════════════════════════ */
.bottom-nav { display: none; }

@media (max-width: 900px) {
    .topbar-nav { display: none; }

    .bottom-nav {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        position: fixed;
        left: 0; right: 0; bottom: 0;
        /* 202 — trên bảng "Nhiều hơn" (201). Bảng dừng ngay trên thanh nên
           phần thanh không bị che, nhưng nút quét tròn nhô lên khỏi thanh
           20px: để thanh ở 200 thì nửa trên nút bị bảng cắt ngang, nhìn
           thành một hình bán nguyệt. */
        z-index: 202;
        background: rgba(255,255,255,.94);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        backdrop-filter: saturate(180%) blur(14px);
        border-top: 1px solid var(--gray-200);
        padding-bottom: var(--sab);
        box-shadow: 0 -2px 16px rgba(15,23,42,.06);
    }

    .bn-item {
        height: var(--bn-h);
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        gap: 3px;
        text-decoration: none;
        color: var(--gray-400);
        font-size: 10.5px; font-weight: 600;
        position: relative;
        transition: color .15s;
    }
    .bn-item i    { font-size: 17px; }
    .bn-item span { letter-spacing: -.2px; }
    .bn-item:active { background: var(--gray-50); }
    .bn-item.active { color: var(--blue); }
    .bn-item.active::before {
        content: '';
        position: absolute; top: 0; left: 50%;
        transform: translateX(-50%);
        width: 26px; height: 3px;
        background: var(--blue);
        border-radius: 0 0 3px 3px;
    }

    body { padding-bottom: calc(var(--bn-h) + var(--sab)); }
}

/* ══════════════════════════════════════
   VÙNG CHẠM + CHẶN iOS PHÓNG TO
   iOS Safari tự zoom khi focus ô có cỡ chữ < 16px
══════════════════════════════════════ */
@media (max-width: 900px) {
    input[type="text"], input[type="number"], input[type="search"],
    input[type="tel"], input[type="date"], input[type="password"],
    select, textarea {
        font-size: 16px;
        height: 46px;
    }

    .btn, button.btn { min-height: 44px; }
    .icon-btn, .remove-variant-btn, .modal-close { min-width: 40px; min-height: 40px; }
    .scan-btn { width: 40px; height: 40px; }
}

/* ══════════════════════════════════════
   2. DANH SÁCH TRÊN MOBILE

   Dùng đúng ngôn ngữ của trang bán hàng: khung bo tròn, mỗi
   bản ghi một dòng, thông tin bên trái — số tiền/trạng thái
   bên phải, nút thao tác ngoài cùng. Vẫn là hàng và cột,
   nhưng thoáng và bấm được bằng ngón tay.
══════════════════════════════════════ */
@media (max-width: 760px) {

    /* ── Thanh tìm kiếm dính trên, giống trang bán hàng ── */
    /* Thanh tìm nằm TRONG thẻ trắng nên nền phải trắng theo. Trước đây
       để var(--bg) (tím nhạt của trang) nên hiện thành một dải màu lạ
       cắt ngang thẻ. */
    .toolbar, .search-bar {
        position: sticky;
        top: 56px;
        z-index: 60;
        background: #fff;
        padding: 10px 0 !important;
        margin-bottom: 8px !important;
    }
    .toolbar input[type="search"],
    .search-bar input[type="search"] {
        height: 48px !important;
        border-radius: 12px !important;
        font-size: 16px !important;
        border: 1.5px solid var(--gray-200) !important;
        background: #fff;
    }

    /* Bộ lọc trạng thái: cuộn ngang thay vì xuống dòng lộn xộn */
    .filter-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
        margin-bottom: 12px;
    }
    .filter-tabs::-webkit-scrollbar { display: none; }
    .filter-tab { flex-shrink: 0; }

    /* ── Khung danh sách ── */
    .table-cols {
        border: 1px solid var(--gray-200) !important;
        border-radius: 14px;
        background: #fff;
        overflow: hidden !important;
    }

    .table-cols table {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
    }
    .table-cols thead { display: none; }
    .table-cols tbody { display: block; }

    .table-cols tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 4px 10px;
        padding: 12px 13px !important;
        border-bottom: 1px solid var(--gray-100);
        background: #fff;
    }
    .table-cols tbody tr:last-child { border-bottom: none; }
    .table-cols tbody tr:hover      { background: #fff; }

    .table-cols tbody td {
        display: block;
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
        border: none !important;
        font-size: 13px !important;
        white-space: normal !important;
        text-align: left !important;
    }
    .table-cols tbody td::before { content: none !important; }

    /* Dòng tiêu đề của mỗi bản ghi */
    .table-cols td.td-name {
        font-size: 15px !important;
        font-weight: 700;
        color: var(--gray-900);
        line-height: 1.35;
    }

    /* Số tiền — luôn nằm bên phải, không xuống dòng */
    .table-cols td.td-money {
        font-size: 15.5px !important;
        font-weight: 800;
        color: var(--blue-h);
        text-align: right !important;
        white-space: nowrap !important;
    }

    .table-cols td.td-date {
        font-size: 11.5px !important;
        color: var(--gray-400);
    }

    .table-cols td.td-barcode {
        font-size: 11.5px !important;
        font-family: 'Courier New', monospace;
        color: var(--gray-500);
    }

    /* Nút thao tác */
    .table-cols td.td-actions { justify-self: end; }
    .table-cols .action-btns  { display: flex !important; gap: 6px !important; flex-wrap: nowrap; }
    .table-cols .icon-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 13.5px !important;
    }

    /* Trạng thái căn phải */
    .table-cols .payment-badge,
    .table-cols .pickup-badge,
    .table-cols .status-badge { margin: 0; }

    /* Trạng thái rỗng */
    .table-cols td.empty-cell {
        grid-column: 1 / -1;
        text-align: center !important;
        padding: 44px 16px !important;
    }
    .table-cols tbody tr:has(td.empty-cell) { grid-template-columns: 1fr; padding: 0 !important; }

    /* ══ Bố cục riêng từng trang ══ */

    /* SẢN PHẨM — #, Tên, Barcode, Đơn vị&Giá, Ngày, Thao tác
       Đơn vị + giá nằm CÙNG HÀNG với tên cho gọn, tên dài thì cắt
       bớt bằng dấu ba chấm chứ không đẩy đơn vị xuống dòng. */
    .tc-products tbody tr {
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas: "nm up act" "bc bc bc";
    }
    .tc-products td:nth-child(1),
    .tc-products td:nth-child(5) { display: none; }
    .tc-products td:nth-child(2) { grid-area: nm; }
    .tc-products td:nth-child(4) { grid-area: up; }
    .tc-products td:nth-child(3) { grid-area: bc; }
    .tc-products td:nth-child(6) { grid-area: act; }

    /* Có thêm ảnh rồi nên ở 390px không đủ chỗ cắt một dòng — cho tên
       xuống tối đa 2 dòng thay vì cụt thành "Coc…", đơn vị vẫn nằm
       cùng hàng bên phải. */
    .tc-products td.td-name {
        white-space: normal !important;
        overflow: visible;
        min-width: 0;
        align-items: center;
    }
    .tc-products td.td-unit {
        justify-self: end;
        text-align: right !important;
        /* Chữ nhỏ lại để ô này bớt chiếm chỗ — thêm ảnh vào ô tên rồi
           thì ở 390px không đủ bề ngang cho cả ba, tên bị cắt còn "C…". */
        font-size: 11.5px !important;
        white-space: nowrap !important;
        color: var(--gray-600);
        min-width: 0;
    }
    /* Nút thao tác gọn lại, nhường thêm chỗ cho tên hàng */
    .tc-products .icon-btn { width: 32px !important; height: 32px !important; }
    .tc-products td.td-actions { padding-left: 4px !important; }
    /* Nhãn "Mặc định" thừa chỗ trên điện thoại — dòng này vốn đã là
       đơn vị mặc định rồi, nên ẩn đi lấy chỗ cho tên hàng. */
    .tc-products td.td-unit .primary-badge,
    .tc-products td.td-unit .unit-toggle { display: none !important; }
    .tc-products .unit-variants { display: none !important; }

    /* ĐƠN HÀNG — thẻ HAI dòng:
           #1 số thứ tự · #2 số hóa đơn · #3 khách · #4 tổng tiền
           #5 khách đã trả · #6 còn nợ · #7 thanh toán · #8 thời gian

           HD-260813-002  13/08 23:44             40.000
           Chị Ba Tư                  nợ 15.000   Đã trả

       Ngày giờ in kèm sau mã hóa đơn qua data-ngay, khỏi tốn một dòng.
       Ẩn: số thứ tự (đếm bằng mắt), khách đã trả (mở đơn ra là có),
       thời gian (đã ghép vào ô mã). */
    .tc-history tbody tr {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "ma ien" "khach tt";
        gap: 4px 10px;
        align-items: center;
        padding: 10px 12px !important;
    }
    /* Giấu: số thứ tự (đếm bằng mắt được), khách đã trả và cột thao tác
       (mở đơn ra là có đủ). Còn nợ vẫn hiện — xem bên dưới. */
    .tc-history td:nth-child(1),
    .tc-history td:nth-child(5),
    .tc-history td:nth-child(8) { display: none; }
    .tc-history td:nth-child(2) { grid-area: ma; }
    .tc-history td:nth-child(4) { grid-area: ien; justify-self: end; }
    .tc-history td:nth-child(3) {
        grid-area: khach; font-size: 12.5px !important; color: var(--gray-600);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    /* Số món nối ngay sau tên khách: "Khách lẻ · 2 món". Một dòng chỉ có
       mỗi "Khách lẻ" vẫn còn trống quá nửa bề ngang, mà số món là thứ hay
       phải đối chiếu nhất khi soi lại một đơn cũ. */
    .tc-history .hd-khach::after {
        content: " · " attr(data-mon);
        color: var(--gray-400);
    }
    /* Cột "Còn nợ" bỏ hẳn khỏi thẻ: cái huy hiệu bên cạnh đã ghi
       "Thiếu 775.000" rồi, in tiếp con số đó thêm một lần nữa ngay cạnh
       chỉ tốn chỗ. Đặt cả hai vào cùng một ô lưới thì chúng đè lên nhau. */
    .tc-history td:nth-child(6) { display: none; }
    .tc-history td:nth-child(7) { grid-area: tt; justify-self: end; }
    /* Mã hóa đơn và giờ trên cùng một dòng, giờ nhạt hơn để mã nổi lên */
    .tc-history td:nth-child(2)::after {
        content: attr(data-ngay);
        margin-left: 8px;
        font-size: 11px; font-weight: 500; color: var(--gray-400);
        white-space: nowrap;
    }
    .tc-history .td-trong { display: none; }

    /* GHI NỢ — #, Khách, SĐT, Món nợ, Tổng, Trạng thái, Ngày, Thao tác */
    .tc-debt tbody tr {
        grid-template-areas: "cust money" "items items" "stat act";
    }
    .tc-debt td:nth-child(1),
    .tc-debt td:nth-child(3),
    .tc-debt td:nth-child(7) { display: none; }
    .tc-debt td:nth-child(2) { grid-area: cust; }
    .tc-debt td:nth-child(5) { grid-area: money; }
    .tc-debt td:nth-child(4) { grid-area: items; }
    .tc-debt td:nth-child(6) { grid-area: stat; }
    .tc-debt td:nth-child(8) { grid-area: act; }

    /* GIỮ HÀNG — #, Khách, SĐT, Mặt hàng, Trạng thái, Ngày, Thao tác */
    .tc-hold tbody tr {
        grid-template-areas: "cust stat" "items items" "date act";
    }
    .tc-hold td:nth-child(1),
    .tc-hold td:nth-child(3) { display: none; }
    .tc-hold td:nth-child(2) { grid-area: cust; }
    .tc-hold td:nth-child(5) { grid-area: stat; justify-self: end; }
    .tc-hold td:nth-child(4) { grid-area: items; }
    .tc-hold td:nth-child(6) { grid-area: date; }
    .tc-hold td:nth-child(7) { grid-area: act; }

    /* Phần mô tả dài của Ghi nợ / Giữ hàng */
    .tc-debt .debt-items,
    .tc-hold .hold-items {
        max-width: none !important;
        padding: 7px 10px !important;
        margin: 3px 0;
        background: var(--gray-50);
        border-radius: 9px;
    }
    .tc-debt .debt-items-preview,
    .tc-hold .hold-items-preview {
        max-width: none !important;
        font-size: 12.5px !important;
        line-height: 1.5;
        color: var(--gray-600);
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .tc-debt .debt-items-btn,
    .tc-hold .hold-items-btn { font-size: 11.5px; margin-top: 4px; display: inline-block; }

    /* HÓA ĐƠN đang tạo (chỉ hiện ở máy tính, giữ để in) */
    .tc-invoice td:nth-child(1) { display: none; }
}

/* ══════════════════════════════════════
   3. TRANG BÁN HÀNG TRÊN MOBILE
══════════════════════════════════════ */
.pos-m, .pos-m-cartbar, .pos-sheet-bg, .pos-unit-bg { display: none; }

@media (max-width: 760px) {
    /* CHỈ trang bán hàng mới ẩn bố cục cũ, vì nó có giao diện POS
       riêng (.pos-m) thay thế. Không giới hạn bằng .sell-page thì
       luật này ẩn luôn nội dung của Đơn hàng / Sản phẩm / Ghi nợ —
       ba trang đó cũng bọc nội dung trong .container. */
    .sell-page .container { display: none; }
    .checkout-bar         { display: none !important; }
    body.has-checkout { padding-bottom: calc(var(--bn-h) + var(--sab) + 62px); }

    .pos-m { display: block; padding: 10px 12px 4px; }

    /* Tìm hàng + quét */
    .pos-m-top {
        position: sticky;
        top: 56px;
        z-index: 60;
        display: flex;
        gap: 9px;
        margin: -10px -12px 0;
        padding: 8px 12px 10px;
        background: var(--bg);
    }

    .pm-search { position: relative; flex: 1; display: flex; align-items: center; }
    .pm-search > i {
        position: absolute; left: 14px;
        font-size: 14px; color: var(--gray-400);
        pointer-events: none;
    }
    .pm-search input {
        width: 100%; height: 48px;
        padding: 0 40px 0 38px;
        border: 1.5px solid var(--gray-200);
        border-radius: 12px;
        background: #fff;
        font-size: 16px; font-family: inherit;
        outline: none;
    }
    .pm-search input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
    .pm-search input::-webkit-search-cancel-button { display: none; }

    .pm-x {
        position: absolute; right: 6px;
        width: 32px; height: 32px;
        border: none; background: none;
        color: var(--gray-400); font-size: 15px;
        cursor: pointer; display: none;
    }
    .pm-x.show { display: block; }

    .pm-scan {
        flex-shrink: 0;
        width: 48px; height: 48px;
        border: none; border-radius: 12px;
        background: linear-gradient(135deg, var(--blue), var(--blue-h));
        color: #fff; font-size: 21px; cursor: pointer;
        box-shadow: 0 4px 14px rgba(37,99,235,.34);
    }
    .pm-scan:active { transform: translateY(1px); }

    /* ── Danh sách hàng: DÒNG có cột, không phải thẻ ── */
    .pos-m-list {
        border: 1px solid var(--gray-200);
        border-radius: 12px;
        background: #fff;
        overflow: hidden;
    }

    .pm-row {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr auto auto;
        align-items: center;
        gap: 10px;
        padding: 11px 12px;
        border: none;
        border-bottom: 1px solid var(--gray-100);
        background: #fff;
        font-family: inherit;
        text-align: left;
        cursor: pointer;
    }
    .pm-row:last-of-type { border-bottom: none; }
    .pm-row:active { background: var(--blue-lt); }

    .pm-main { min-width: 0; }
    .pm-name {
        display: block;
        font-size: 14.5px; font-weight: 700; color: var(--gray-900);
        line-height: 1.35;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .pm-unit {
        display: inline-block;
        margin-top: 3px;
        font-size: 11.5px; font-weight: 600; color: var(--gray-500);
        background: var(--gray-100);
        padding: 2px 8px; border-radius: 999px;
    }
    .pm-unit i { font-size: 9.5px; color: var(--orange); margin-left: 2px; }

    .pm-price {
        font-size: 15.5px; font-weight: 800; color: var(--blue-h);
        letter-spacing: -.3px; white-space: nowrap;
    }
    .pm-price small { font-size: 11.5px; font-weight: 700; margin-left: 1px; }

    .pm-add {
        width: 36px; height: 36px;
        border-radius: 10px;
        background: var(--blue-lt); color: var(--blue);
        display: flex; align-items: center; justify-content: center;
        font-size: 15px; flex-shrink: 0;
    }

    .pm-more {
        width: 100%; height: 46px;
        border: none; border-top: 1px solid var(--gray-200);
        background: var(--gray-50); color: var(--blue);
        font-family: inherit; font-size: 13.5px; font-weight: 700;
        cursor: pointer;
    }

    .pm-empty {
        display: flex; flex-direction: column;
        align-items: center; gap: 10px;
        padding: 46px 20px;
        color: var(--gray-400); font-size: 13.5px; text-align: center;
    }
    .pm-empty i { font-size: 30px; opacity: .35; }

    /* ── Thanh giỏ hàng cố định ── */
    .pos-m-cartbar {
        display: flex; align-items: center; gap: 12px;
        position: fixed;
        left: 10px; right: 10px;
        bottom: calc(var(--bn-h) + var(--sab) + 8px);
        z-index: 195;
        height: 58px;
        padding: 0 8px 0 14px;
        border: none; border-radius: 15px;
        background: var(--gray-900); color: #fff;
        font-family: inherit; cursor: pointer;
        box-shadow: 0 8px 28px rgba(15,23,42,.34);
        opacity: .55; pointer-events: none;
        transition: opacity .2s, transform .2s;
    }
    .pos-m-cartbar.has  { opacity: 1; pointer-events: auto; }
    .pos-m-cartbar.bump { transform: scale(1.035); }

    .cb-ico { position: relative; font-size: 18px; flex-shrink: 0; }
    .cb-ico b {
        position: absolute; top: -7px; right: -10px;
        min-width: 19px; height: 19px; padding: 0 5px;
        border-radius: 999px;
        background: var(--orange); color: #fff;
        font-size: 11px; font-weight: 800; line-height: 19px; text-align: center;
    }
    .cb-mid { flex: 1; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
    .cb-mid small { font-size: 10.5px; opacity: .62; line-height: 1.2; }
    .cb-mid span  { font-size: 17px; font-weight: 800; letter-spacing: -.3px; }
    .cb-go {
        flex-shrink: 0; display: flex; align-items: center; gap: 6px;
        height: 42px; padding: 0 15px;
        border-radius: 11px; background: var(--blue);
        font-size: 13.5px; font-weight: 700;
    }

    /* ── Sheet giỏ hàng ── */
    .pos-sheet-bg {
        display: block;
        position: fixed; inset: 0; z-index: 400;
        background: rgba(15,23,42,.45);
        opacity: 0; pointer-events: none;
        transition: opacity .24s;
    }
    .pos-sheet-bg.open { opacity: 1; pointer-events: auto; }

    .pos-sheet {
        position: absolute; left: 0; right: 0; bottom: 0;
        max-height: 92vh;
        display: flex; flex-direction: column;
        background: var(--bg);
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
        transition: transform .28s cubic-bezier(.2,.85,.3,1);
    }
    .pos-sheet-bg.open .pos-sheet { transform: translateY(0); }

    .sheet-head {
        position: relative; flex-shrink: 0;
        display: flex; align-items: center;
        padding: 16px 16px 12px;
        background: #fff;
        border-radius: 20px 20px 0 0;
        border-bottom: 1px solid var(--gray-200);
    }
    .sheet-grab {
        position: absolute; top: 7px; left: 50%;
        transform: translateX(-50%);
        width: 38px; height: 4px; border-radius: 99px;
        background: var(--gray-200);
    }
    .sheet-head h3 { flex: 1; font-size: 16px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
    .sheet-close {
        width: 36px; height: 36px;
        border: none; border-radius: 10px;
        background: var(--gray-100); color: var(--gray-600);
        font-size: 16px; cursor: pointer;
    }

    .sheet-body {
        flex: 1; overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 12px;
        overscroll-behavior: contain;
    }

    /* Giỏ hàng: cũng là dòng có cột */
    .mc-list {
        border: 1px solid var(--gray-200);
        border-radius: 12px;
        background: #fff;
        overflow: hidden;
    }
    .mc-row {
        display: grid;
        grid-template-columns: 1fr auto auto auto;
        align-items: center;
        gap: 9px;
        padding: 10px 11px;
        border-bottom: 1px solid var(--gray-100);
    }
    .mc-row:last-child { border-bottom: none; }

    .mc-info { min-width: 0; }
    .mc-name {
        font-size: 14px; font-weight: 700; color: var(--gray-900);
        line-height: 1.3;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .mc-sub { font-size: 11.5px; color: var(--gray-500); margin-top: 2px; }

    .mc-qty {
        display: flex; align-items: center;
        border: 1.5px solid var(--gray-200);
        border-radius: 9px; overflow: hidden;
    }
    .mc-qty button {
        width: 32px; height: 34px;
        border: none; background: var(--gray-50);
        color: var(--gray-700); font-size: 17px; font-weight: 700;
        cursor: pointer;
    }
    .mc-qty button:active { background: var(--gray-200); }
    .mc-qty input {
        width: 38px; height: 34px;
        border: none;
        border-left: 1.5px solid var(--gray-200);
        border-right: 1.5px solid var(--gray-200);
        text-align: center;
        font-family: inherit; font-size: 14px; font-weight: 700;
        outline: none;
        -moz-appearance: textfield;
    }
    .mc-qty input::-webkit-outer-spin-button,
    .mc-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

    .mc-line { font-size: 13.5px; font-weight: 800; color: var(--blue-h); white-space: nowrap; }
    .mc-del {
        width: 32px; height: 34px;
        border: none; border-radius: 9px;
        background: var(--red-lt); color: var(--red);
        font-size: 14px; cursor: pointer;
    }

    #mSheetCust .card,
    .sheet-form .product-form {
        margin-bottom: 0;
        box-shadow: none;
        border: 1px solid var(--gray-200);
    }
    #mSheetCust .card { margin-top: 10px; }

    .sheet-toggle {
        width: 100%;
        display: flex; align-items: center; gap: 9px;
        height: 48px; margin-top: 10px; padding: 0 14px;
        border: 1.5px dashed var(--gray-200);
        border-radius: 12px; background: #fff;
        color: var(--gray-600);
        font-family: inherit; font-size: 13.5px; font-weight: 700;
        cursor: pointer;
    }
    .sheet-toggle .caret { margin-left: auto; transition: transform .2s; font-size: 12px; }
    .sheet-toggle.open .caret { transform: rotate(180deg); }

    .sheet-form { display: none; margin-top: 10px; }
    .sheet-form.open { display: block; }
    .sheet-form .product-form {
        grid-template-columns: 1fr 1fr !important;
        padding: 13px; background: #fff; border-radius: 12px;
    }

    .sheet-foot {
        flex-shrink: 0;
        display: flex; align-items: center; gap: 9px;
        padding: 12px 14px calc(12px + var(--sab));
        background: #fff;
        border-top: 1px solid var(--gray-200);
        box-shadow: 0 -6px 22px rgba(15,23,42,.08);
    }
    .sf-total { display: flex; flex-direction: column; min-width: 0; }
    .sf-total small { font-size: 10.5px; color: var(--gray-500); }
    .sf-total b     { font-size: 19px; font-weight: 800; color: var(--blue-h); letter-spacing: -.3px; }
    .sf-clear { width: 48px; min-width: 48px; padding: 0; justify-content: center; margin-left: auto; }
    .sf-pay   { height: 48px; padding: 0 20px; font-size: 15px; font-weight: 700; white-space: nowrap; }

    /* ── Chọn đơn vị ── */
    .pos-unit-bg {
        display: block;
        position: fixed; inset: 0; z-index: 500;
        background: rgba(15,23,42,.45);
        opacity: 0; pointer-events: none;
        transition: opacity .2s;
    }
    .pos-unit-bg.open { opacity: 1; pointer-events: auto; }

    .pos-unit {
        position: absolute; left: 12px; right: 12px;
        bottom: calc(12px + var(--sab));
        background: #fff; border-radius: 18px; overflow: hidden;
        transform: translateY(16px);
        transition: transform .22s;
    }
    .pos-unit-bg.open .pos-unit { transform: translateY(0); }

    .mu-head {
        display: flex; align-items: center; gap: 10px;
        padding: 15px 14px;
        border-bottom: 1px solid var(--gray-200);
        font-size: 15px; font-weight: 800;
    }
    .mu-head span   { flex: 1; }
    .mu-head button {
        width: 34px; height: 34px;
        border: none; border-radius: 9px;
        background: var(--gray-100); color: var(--gray-600);
        font-size: 15px; cursor: pointer;
    }
    .mu-item {
        width: 100%;
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: 15px 16px;
        border: none; border-bottom: 1px solid var(--gray-100);
        background: #fff; font-family: inherit; cursor: pointer;
    }
    .mu-item:last-child { border-bottom: none; }
    .mu-item:active     { background: var(--blue-lt); }
    .mu-item span { font-size: 14.5px; font-weight: 600; color: var(--gray-900); }
    .mu-item b    { font-size: 15px; font-weight: 800; color: var(--blue-h); }
}

@media (min-width: 761px) {
    /* .pos-unit-bg KHONG nam trong danh sach nay: bang chon don vi
       can dung ca tren may tinh, xem muc rieng o cuoi file. */
    .pos-m, .pos-m-cartbar, .pos-sheet-bg { display: none !important; }
}

/* ══════════════════════════════════════
   THANH QUÉT MÃ (máy tính)
══════════════════════════════════════ */
.scan-bar {
    display: flex; align-items: center; gap: 16px;
    margin-bottom: 18px; padding: 14px 16px;
    background: linear-gradient(135deg, #eff6ff, #f5f9ff);
    border: 1.5px solid var(--blue-bd);
    border-radius: var(--rsm);
}

.btn-scan {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    flex-shrink: 0; height: 52px; padding: 0 26px;
    border: none; border-radius: var(--rsm);
    background: linear-gradient(135deg, var(--blue), var(--blue-h));
    color: #fff; font-family: inherit;
    font-size: 15.5px; font-weight: 700; letter-spacing: -.2px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(37,99,235,.32);
    transition: transform .12s, box-shadow .18s, filter .18s;
}
.btn-scan i      { font-size: 20px; }
.btn-scan:hover  { filter: brightness(1.07); box-shadow: 0 6px 20px rgba(37,99,235,.42); }
.btn-scan:active { transform: translateY(1px); }

.scan-status { display: flex; align-items: center; gap: 10px; min-width: 0; }
.scan-status .dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--green); flex-shrink: 0;
    animation: scan-pulse 2.2s ease-out infinite;
}
@keyframes scan-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(22,163,74,.55); }
    70%  { box-shadow: 0 0 0 8px rgba(22,163,74,0); }
    100% { box-shadow: 0 0 0 0   rgba(22,163,74,0); }
}
.scan-status-txt       { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.scan-status-txt b     { font-size: 13px; font-weight: 700; color: var(--gray-700); }
.scan-status-txt small { font-size: 11.5px; color: var(--gray-500); line-height: 1.4; }
.scan-status.off .dot  { background: var(--red); animation: none; }
.scan-status.off .scan-status-txt b { color: var(--red); }

/* ══════════════════════════════════════
   THANH BÁO MẠNG / CẬP NHẬT
══════════════════════════════════════ */
.app-bar-net, .app-bar-update {
    position: fixed; left: 50%;
    transform: translateX(-50%) translateY(140%);
    bottom: calc(var(--bn-h) + var(--sab) + 14px);
    z-index: 99500;
    display: flex; align-items: center; gap: 10px;
    max-width: calc(100vw - 28px);
    padding: 11px 16px; border-radius: 999px;
    font-size: 13px; font-weight: 600; color: #fff;
    background: var(--gray-900);
    box-shadow: 0 10px 34px rgba(0,0,0,.28);
    transition: transform .28s cubic-bezier(.2,.8,.3,1);
}
.app-bar-net.show, .app-bar-update.show { transform: translateX(-50%) translateY(0); }
.app-bar-net     { background: var(--green); }
.app-bar-net.off { background: var(--red); }
.app-bar-update button {
    border: none; background: #fff; color: var(--gray-900);
    font-family: inherit; font-size: 12.5px; font-weight: 700;
    padding: 6px 13px; border-radius: 999px; cursor: pointer;
}
@media (min-width: 901px) {
    .app-bar-net, .app-bar-update { bottom: 22px; }
}

/* ══════════════════════════════════════
   HƯỚNG DẪN CÀI ĐẶT TRÊN iPHONE
══════════════════════════════════════ */
.ios-steps { margin: 4px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 11px; }
.ios-steps li { font-size: 13.5px; line-height: 1.55; color: var(--gray-700); }
.ios-steps b  { color: var(--gray-900); }
.ios-note {
    margin-top: 16px; padding: 11px 13px;
    background: var(--gray-50); border-radius: var(--rsm);
    font-size: 12.5px; color: var(--gray-500); line-height: 1.5;
}

/* ══════════════════════════════════════
   Ô BARCODE Ở FORM SẢN PHẨM
══════════════════════════════════════ */
.bc-input-wrap { position: relative; }

/* Nút quét nằm TRONG ô mã vạch nên phải chìm theo ô, không được nổi
   hơn chính ô nhập. Bản trước là khối gradient xanh có đổ bóng — chọi
   hẳn với ô text xung quanh. Giờ để phẳng, màu xám, ngăn bằng một vạch
   mảnh; chạm vào mới đổi sang xanh. Icon dùng mã vạch cho khớp với nút
   quét ở thanh dưới và nút "Quét mã vạch" bên máy tính. */
.barcode-field .scan-btn,
.bc-input-wrap .scan-btn {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    bottom: auto !important;
    width: 38px !important;
    height: 34px !important;
    border: none !important;
    border-left: 1px solid var(--gray-200) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--gray-400) !important;
    font-size: 16px !important;
    box-shadow: none !important;
    transition: color .15s, background .15s;
}
.barcode-field .scan-btn:hover {
    color: var(--blue) !important;
    background: var(--blue-lt) !important;
    border-radius: 0 8px 8px 0 !important;
}
.barcode-field .scan-btn:active { color: var(--blue-h) !important; }
.barcode-field input { padding-right: 50px !important; }

.gen-bc-btn {
    margin-left: 8px;
    border: 1px solid var(--gray-200);
    background: var(--gray-50); color: var(--gray-600);
    font-family: inherit; font-size: 11px; font-weight: 600;
    padding: 2px 8px; border-radius: 999px; cursor: pointer;
    transition: all .15s;
}
.gen-bc-btn:hover { background: var(--orange-lt); border-color: #fed7aa; color: var(--orange); }

/* ══════════════════════════════════════
   IN ẤN — bỏ hết phần vỏ ứng dụng
══════════════════════════════════════ */
@media print {
    .bottom-nav, .checkout-bar, .app-bar-net, .app-bar-update,
    .install-btn, .topbar, .pos-m, .pos-m-cartbar,
    .pos-sheet-bg, .pos-unit-bg, .scan-bar { display: none !important; }
    body { padding-bottom: 0 !important; }
    .container { display: block !important; }
}

/* ══════════════════════════════════════
   QUÉT RA MÃ LẠ — tạo hàng mới ngay tại chỗ
══════════════════════════════════════ */
.assign-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin: 14px 0 16px;
    padding: 4px;
    background: var(--gray-100);
    border-radius: var(--rsm);
}
.at-btn {
    height: 38px;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--gray-500);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s;
}
.at-btn.active {
    background: #fff;
    color: var(--blue);
    box-shadow: var(--shadow-sm);
}

.at-pane[hidden] { display: none; }
.at-pane .field  { margin-bottom: 12px; }

.np-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.np-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: -2px 0 14px;
}
.np-chip {
    border: 1px solid var(--gray-200);
    background: #fff;
    color: var(--gray-600);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 999px;
    cursor: pointer;
    transition: all .13s;
}
.np-chip:hover  { border-color: var(--blue); color: var(--blue); background: var(--blue-lt); }
.np-chip.on     { border-color: var(--blue); color: #fff; background: var(--blue); }

.np-save {
    width: 100%;
    height: 48px;
    justify-content: center;
    font-size: 15px;
}

@media (max-width: 480px) {
    .np-row { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   NÚT TRÒN QUÉT MÃ Ở GIỮA THANH DƯỚI

   Quét mã là thao tác lặp nhiều nhất cả ca bán hàng nên đặt
   đúng chỗ ngón cái với tới dễ nhất. "Giữ hàng" nhường chỗ,
   chuyển lên thanh trên.
══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .bottom-nav { grid-template-columns: 1fr 1fr 78px 1fr 1fr; }

    .bn-fab {
        justify-self: center;
        align-self: start;
        margin-top: -20px;
        width: 60px; height: 60px;
        border: 4px solid #fff;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--blue), var(--blue-h));
        color: #fff;
        font-size: 23px;
        cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 6px 20px rgba(37,99,235,.45);
        transition: transform .12s, box-shadow .18s;
    }
    .bn-fab:active { transform: scale(.93); box-shadow: 0 3px 12px rgba(37,99,235,.4); }

    /* Thanh trên: chỉ chừa đúng link Giữ hàng */
    .topbar-nav { display: flex !important; }
    .topbar-nav .nav-link { display: none !important; }
    .topbar-nav .nav-link[href="hold.php"] {
        display: inline-flex !important;
        background: var(--gray-100);
        color: var(--gray-600);
    }
    .topbar-nav .nav-link[href="hold.php"].active {
        background: var(--blue-lt);
        color: var(--blue);
    }
    .topbar-nav .nav-link[href="hold.php"] span { display: inline !important; }
}

/* ══════════════════════════════════════════════════════════
   FORM THÊM / SỬA HÀNG HÓA — bố cục theo mục như KiotViet
══════════════════════════════════════════════════════════ */
.prod-modal {
    max-width: 720px;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    max-height: 92vh;
}
.prod-modal .modal-head {
    padding: 20px 24px 16px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--gray-200);
}
.prod-modal .modal-footer {
    padding: 14px 24px;
    margin-top: 0;
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
    border-radius: 0 0 var(--radius) var(--radius);
}

.pf-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px 6px;
}

.pf-sec { margin-bottom: 22px; }
.pf-sec:last-child { margin-bottom: 8px; }

.pf-sec-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.pf-num {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    font-size: 12px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pf-sec-head h4 { font-size: 14.5px; font-weight: 800; color: var(--gray-900); }
.pf-sec-head small { width: 100%; font-size: 12px; color: var(--gray-500); padding-left: 33px; }

.pf-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.pf-col-2 { grid-column: span 1; }

/* Bảng đơn vị: có dòng tiêu đề cột như bảng thật */
.pf-units {
    border: 1px solid var(--gray-200);
    border-radius: var(--rsm);
    overflow: hidden;
}
.pf-units-head {
    display: grid;
    grid-template-columns: 1.3fr 1fr 92px 44px;
    gap: 10px;
    padding: 10px 12px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}
.pf-units-head span {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: .4px;
}

/* Mỗi dòng đơn vị khớp đúng cột với tiêu đề ở trên */
.pf-units .unit-variant-row {
    display: grid;
    grid-template-columns: 1.3fr 1fr 92px 44px;
    gap: 10px;
    align-items: center;
    padding: 10px 12px !important;
    margin: 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--gray-100) !important;
    border-radius: 0 !important;
    background: #fff;
    box-shadow: none !important;
}
.pf-units .unit-variant-row:last-of-type { border-bottom: 1px solid var(--gray-200) !important; }

/* Nhãn trong từng dòng đã có ở tiêu đề cột → ẩn đi cho gọn */
.pf-units .unit-variant-row .field label { display: none !important; }
.pf-units .unit-variant-row .field { margin: 0 !important; }
.pf-units .unit-variant-row input[type="text"],
.pf-units .unit-variant-row input[type="number"] { height: 42px; }

.pf-units .default-checkbox {
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 !important;
    align-self: center !important;
}
.pf-units .default-checkbox label {
    display: none !important;
}
.pf-units .default-checkbox input[type="checkbox"] {
    width: 20px; height: 20px;
}
.pf-units .remove-variant-btn {
    width: 40px !important; height: 40px !important;
    align-self: center !important;
}

.pf-units .add-variant-btn {
    width: 100%;
    border: none !important;
    border-radius: 0 !important;
    background: var(--gray-50);
    justify-content: center;
    height: 46px;
}
.pf-units .add-variant-btn:hover { background: var(--blue-lt); }

@media (max-width: 640px) {
    .prod-modal { max-width: calc(100vw - 20px); max-height: 94vh; }
    .prod-modal .modal-head,
    .prod-modal .modal-footer { padding-left: 16px; padding-right: 16px; }
    .pf-scroll { padding: 16px 16px 4px; }

    .pf-grid { grid-template-columns: 1fr; }

    /* Trên điện thoại xếp dọc, nhưng vẫn hiện lại nhãn để khỏi đoán mò */
    .pf-units-head { display: none; }
    .pf-units .unit-variant-row {
        grid-template-columns: 1fr auto;
        grid-template-areas: "unit del" "price del" "def def";
        gap: 10px;
        padding: 13px 12px !important;
    }
    .pf-units .unit-variant-row .field:nth-of-type(1) { grid-area: unit; }
    .pf-units .unit-variant-row .field:nth-of-type(2) { grid-area: price; }
    .pf-units .default-checkbox { grid-area: def; justify-content: flex-start !important; }
    .pf-units .default-checkbox label { display: inline !important; font-size: 13px; }
    .pf-units .remove-variant-btn { grid-area: del; }
    .pf-units .unit-variant-row .field label {
        display: block !important;
        font-size: 11.5px !important;
        margin-bottom: 4px;
    }
}

/* ══════════════════════════════════════════════════════════
   SỬA 3 LỖI BỐ CỤC ĐO ĐƯỢC Ở MÀN HÌNH 390px
══════════════════════════════════════════════════════════ */
@media (max-width: 760px) {


    /* ── LỖI 2: ô tìm ở trang Sản phẩm bị min-width 300px ép nút xuống dòng ── */
    .toolbar input[type="search"] {
        min-width: 0 !important;
        max-width: none !important;
    }

    /* ── LỖI 3: danh sách rỗng bị biến mất ──
       Luật ẩn cột phụ dùng td:nth-child(1), mà khi bảng rỗng thì ô
       "Chưa có dữ liệu" CHÍNH LÀ td đầu tiên nên bị ẩn theo.
       Luật này phải đứng sau và thắng lại.                            */
    .table-cols td.empty-cell {
        display: block !important;
        grid-column: 1 / -1 !important;
        text-align: center !important;
        padding: 46px 16px !important;
        color: var(--gray-400);
    }
    .table-cols tbody tr:has(td.empty-cell) {
        grid-template-columns: 1fr !important;
        grid-template-areas: none !important;
        padding: 0 !important;
    }

    /* KHÔNG được ẩn ô barcode trống bằng display:none.
       Luật này viết hồi bảng còn ở dạng thẻ; nay bảng đã trở lại dạng
       cột thì ẩn một ô làm dòng dữ liệu thiếu một cell so với tiêu đề,
       khiến Đơn vị & Giá trượt sang nằm dưới cột Barcode. */
    .tc-products td.td-barcode:empty::after { content: '—'; color: var(--gray-200); }
}

/* ══════════════════════════════════════════════════════════
   BỐ CỤC 7/3 CHO TRANG BÁN HÀNG (máy tính & tablet ngang)

   Trái 7: hàng hóa có ảnh, bấm để thêm vào hóa đơn.
   Phải 3: hóa đơn + hình thức thanh toán, dính theo màn hình
           để lúc nào cũng thấy tổng tiền và nút thanh toán.
══════════════════════════════════════════════════════════ */
@media (min-width: 761px) {
    /* Bố cục KiotViet: HÓA ĐƠN là vùng lớn nhất, nằm bên trái. Cột phải chỉ
       lo khách hàng và tiền. Trước đây ngược lại — lưới ảnh hàng hóa chiếm
       7 phần, hóa đơn bị nhét vào 3 phần bên phải, mà lúc bán thì thứ phải
       nhìn nhiều nhất chính là hóa đơn. */
    .pos-desk {
        display: grid;
        grid-template-columns: minmax(0, 6.5fr) minmax(0, 3.5fr);
        gap: 18px;
        align-items: start;
    }

    .pd-left .card, .pd-right .card { margin-bottom: 0; }

    /* ── Cột hàng hóa cuộn TRONG KHUNG của nó ──
       Trước đây chỉ cột phải (hóa đơn) bị ghim, còn cột trái thả tự do —
       nên lăn chuột trong lưới hàng là cả trang trôi theo, thanh trên biến
       mất, và cột hóa đơn bên phải cũng trượt lên. Ở màn bán hàng thì đó là
       hỏng: người bán cần lưới hàng và tổng tiền LUÔN ở nguyên chỗ.

       Ghim luôn cột trái bằng đúng chiều cao màn hình, rồi cho phần LƯỚI
       cuộn bên trong. Ô tìm kiếm nằm ngoài vùng cuộn nên gõ tìm lúc nào
       cũng thấy. */
    .pd-left {
        position: sticky;
        top: 74px;
        /* height chứ không phải max-height: thẻ phải CAO BẰNG MÀN HÌNH.
           Để max-height thì thẻ co theo nội dung — bán một món là thẻ chỉ
           cao 300px, dưới nó là một mảng trắng chạy hết trang. */
        height: calc(100vh - 92px);
        display: flex;
        flex-direction: column;
    }
    .pd-left .pd-pick {
        flex: 1 1 auto;          /* thẻ ăn hết chiều cao cột */
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }
    /* #pdList là chỗ JS chuyển khối hàng hóa vào — nó chứa ô tìm kiếm và lưới */
    /* Cao vừa đúng ô tìm kiếm. Lưới ảnh bên trong đã ẩn trên máy tính nên
       khối này không còn gì để cuộn — để nó co giãn thì nó nuốt hết chỗ
       trống, bảng hóa đơn bị ép lại còn mấy dòng. */
    .pd-left #pdList {
        display: flex;
        flex-direction: column;
        flex: 0 0 auto;
    }
    /* MẮT XÍCH Ở GIỮA — thiếu cái này là cả chuỗi đứt.

       JS không chuyển thẳng lưới vào #pdList, nó chuyển nguyên khối .pos-m
       (gồm ô tìm kiếm + lưới). Mà .pos-m ở khổ máy tính bị đặt display:block,
       nên nó là một hộp cao theo nội dung — ràng buộc chiều cao từ trên
       dừng lại ở đây, không xuống tới lưới. Kết quả đo được: lưới cao
       1932px trong khung 615px, tràn ra rồi bị .pd-pick cắt cụt — nhìn thì
       như cuộn hỏng.

       Phải dùng !important vì luật .pos-m { display: block !important } ở
       ngay dưới; !important chỉ thua !important. */
    .pd-left .pos-m {
        display: flex !important;
        flex-direction: column;
        flex: 0 0 auto;
    }
    /* Lưới hàng hóa trên máy tính: ẨN khi ô tìm còn trống, để hóa đơn được
       nguyên nửa màn hình. Gõ vào ô tìm thì nó XỔ XUỐNG như danh sách gợi ý.

       Trước đây ẩn thẳng bằng display:none — gõ tìm không thấy gì, vì kết quả
       tìm đổ vào đúng cái lưới đang bị ẩn.

       Xổ theo kiểu ĐÈ LÊN (position:absolute) chứ không chen vào giữa: chen
       vào thì mỗi lần gõ một chữ là bảng hóa đơn bị đẩy tụt xuống, dòng hàng
       vừa thêm chạy khỏi tầm mắt. */
    .pd-left .pos-m { position: relative; z-index: 50; }
    .pd-left .pos-m-list { display: none; }
    .pd-left .pos-m.co-tim .pos-m-list {
        display: block;
        position: absolute;
        left: 0; right: 0;
        top: 100%;
        z-index: 40;
        max-height: min(520px, 58vh);
        overflow-y: auto;
        margin-top: 6px;
        padding: 6px;
        background: #fff !important;
        border: 1px solid var(--gray-200) !important;
        border-radius: var(--rmd);
        box-shadow: 0 14px 38px rgba(15, 23, 42, .16);
    }

    /* Bảng hóa đơn là phần cuộn của cột trái */
    .pd-left .tc-invoice {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        margin: 12px 0 0;
    }
    /* table-layout:fixed — bắt buộc.
       Kiểu mặc định (auto) vẫn nới cột theo nội dung: một cái tên dài như
       "Dầu gội Head & Shoulders bạc hà 650ml" kéo bảng rộng 897px trong khung
       781px, đẩy cột Thao tác ra ngoài và đẻ ra thanh cuộn ngang. Fixed thì
       phần trăm là phần trăm, tên dài tự cắt bằng ba chấm. */
    .pd-left .tc-invoice table { min-width: 0; width: 100%; table-layout: fixed; }

    /* ── Bề rộng và căn lề của bảng hóa đơn trên máy tính ──

       Mấy con số width dán thẳng trong thẻ <th> là của thời bảng còn nằm ở
       cột phải hẹp 380px. Sang cột trái 870px thì chúng thành ra bé so với
       chỗ có, mà nội dung lại căn trái hết — khoảng trống dồn cả về mép phải
       từng ô, năm cột cuối nhìn ra như một cụm dính vào nhau.

       Sửa hai thứ cùng lúc: chia lại bề rộng theo thứ cột đó thật sự chứa,
       và căn nội dung vào ĐÚNG chỗ mắt tìm nó — số lượng và đơn vị vào
       giữa, tiền về bên phải để các hàng số thẳng cột với nhau, nút xóa vào
       giữa. Có căn lề rồi thì mỗi cột tự thành một khối riêng, không cần
       kẻ vạch dọc. */
    .pd-left .tc-invoice th:nth-child(1),
    .pd-left .tc-invoice td:nth-child(1) { width: 40px  !important; }
    /* Bề rộng tính theo PHẦN TRĂM, không phải pixel.
       Để pixel thì trên màn 1366 (cột trái chỉ 780px) năm cột cố định ăn hết
       640px, cột tên hàng còn 140px — tên dài gãy làm hai dòng. Theo phần
       trăm thì màn hẹp mọi cột cùng co lại, tên hàng vẫn giữ phần lớn nhất.

       Năm cột này đã bóp về đúng bề rộng nội dung của chúng (cụm − số + là
       96px, ô đơn giá 108px, nút xóa 30px) — chỗ dôi ra dồn hết cho cột tên
       hàng, vì tên hàng mới là thứ dài ngắn không đoán trước được. */
    .pd-left .tc-invoice th:nth-child(3),
    .pd-left .tc-invoice td:nth-child(3) { width: 15% !important; text-align: center; }
    .pd-left .tc-invoice th:nth-child(4),
    .pd-left .tc-invoice td:nth-child(4) { width: 11% !important; text-align: center; }
    .pd-left .tc-invoice th:nth-child(5) { padding-left: 8px !important; padding-right: 8px !important; }
    .pd-left .tc-invoice th:nth-child(5),
    /* Lề 8px thay vì 16px: cột 15% trên màn 1366 chỉ còn 117px, trừ hai lề
       16px là ô nhập chỉ được 85px — "152000" bị cắt mất chữ số cuối. */
    .pd-left .tc-invoice td:nth-child(5) {
        width: 15% !important; text-align: center;
        padding-left: 8px !important; padding-right: 8px !important;
    }
    /* Thành tiền cũng căn giữa cho đồng bộ với bốn cột kia. Sổ sách thì
       tiền hay căn phải để hàng đơn vị thẳng cột, nhưng ở đây mỗi hóa đơn
       chỉ vài dòng và cả bảng đang căn giữa — một cột lệch ra bên phải nhìn
       như bị sót. */
    .pd-left .tc-invoice th:nth-child(6),
    .pd-left .tc-invoice td:nth-child(6) { width: 15% !important; text-align: center; }
    /* Cột nút xóa: 10% và bóp lề còn 6px. Để 8% với lề 16px thì trong ô chỉ
       còn 30px, chữ "THAO TÁC" ở đầu cột tràn ra ngoài rồi bị cắt mất. */
    .pd-left .tc-invoice th:nth-child(7),
    .pd-left .tc-invoice td:nth-child(7) {
        width: 10% !important; text-align: center;
        padding-left: 6px !important; padding-right: 6px !important;
    }
    /* Tên hàng một dòng, dài quá thì cắt bằng ba chấm — thà cắt còn hơn để
       hàng cao gấp đôi làm lệch nhịp cả bảng. Cột này và cột # vẫn căn trái:
       đó là chỗ mắt bắt đầu đọc mỗi dòng, căn giữa thì mỗi dòng một điểm
       xuất phát khác nhau, đọc dọc xuống rất mỏi. */
    .pd-left .tc-invoice td:nth-child(2) {
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    /* Đầu cột không được xuống dòng: "THAO TÁC" gãy làm hai dòng thì cả hàng
       tiêu đề cao gấp đôi mà chẳng để làm gì. */
    /* overflow:hidden để chữ đầu cột có tràn thì cắt gọn trong ô, không đội
       bảng rộng ra ngoài khung mà sinh thanh cuộn ngang. */
    .pd-left .tc-invoice th { white-space: nowrap; overflow: hidden; }

    /* Thở ra hai bên: 16px mỗi mép, cộng lại giữa hai cột là 32px — đủ để
       mắt tách được cột mà không phải kẻ vạch. */
    .pd-left .tc-invoice th,
    .pd-left .tc-invoice td { padding-left: 16px !important; padding-right: 16px !important; }

    /* Hai ô nhập trong bảng: bề rộng CỐ ĐỊNH và thả vào giữa cột.

       Cho chúng ăn hết bề ngang cột thì ô đơn giá dài lê thê — một ô nhập
       160px để gõ năm chữ số. Mà kéo dài ra cũng không thẳng hàng được với
       đầu cột, vì chữ trong ô căn một kiểu còn cái khung lại rộng kiểu khác.

       Để bề rộng vừa đủ nội dung rồi căn giữa: đầu cột căn giữa, ô nhập căn
       giữa, số bên trong căn giữa — cả ba cùng nằm trên một trục dọc. */
    .pd-left .tc-invoice td:nth-child(5) .inp-md {
        width: 100%; max-width: 108px; min-width: 0; margin: 0 auto;
        text-align: center;
    }
    /* max-width giữ cho ô không dài lê thê ở màn rộng, width:100% giữ cho nó
       co lại thay vì tràn ra ngoài cột ở màn hẹp. */
    .pd-left .tc-invoice .gio-sl {
        display: flex; width: 100%; max-width: 104px; margin: 0 auto;
    }
    .pd-left .tc-invoice .gio-sl input  { flex: 1 1 auto; width: auto; min-width: 0; }
    .pd-left .tc-invoice .gio-sl button { flex: 0 0 auto; }
    .pd-left .tc-invoice td:nth-child(6) { font-variant-numeric: tabular-nums; }
    /* Khối "Thêm hàng thủ công" nằm dưới cùng, không cuộn theo lưới; mở ra
       thì tự cuộn trong chính nó nếu dài. */
    .pd-left .pd-manual-toggle { flex: 0 0 auto; }
    .pd-left .pd-manual { flex: 0 1 auto; min-height: 0; overflow-y: auto; max-height: 46vh; }

    .pd-right {
        position: sticky;
        top: 74px;
        height: calc(100vh - 92px);
        display: flex;
        flex-direction: column;
    }
    .pd-bill {
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding: 18px 18px 0;
        overflow: hidden;
    }

    /* ── Lưới hàng hóa trong cột trái ── */
    .pos-m      { display: block !important; padding: 0 !important; }
    .pos-m-top  { position: static !important; margin: 0 0 14px !important;
                  padding: 0 !important; background: none !important; }
    .pos-m-list { border: none !important; background: transparent !important;
                  display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
                  gap: 12px; }

    /* Mỗi mặt hàng là một thẻ có ảnh */
    .pm-row {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: 0 !important;
        padding: 0 !important;
        border: 1px solid var(--gray-200) !important;
        border-radius: 14px;
        background: #fff;
        overflow: hidden;
        box-shadow: var(--shadow-sm);
        transition: transform .12s, box-shadow .18s, border-color .18s;
    }
    .pm-row:hover {
        transform: translateY(-2px);
        border-color: var(--blue-bd) !important;
        box-shadow: 0 6px 18px rgba(37,99,235,.14);
    }
    .pm-row:active { transform: translateY(0); }

    .pm-thumb {
        width: 100%;
        aspect-ratio: 1 / 1;
        background: var(--gray-50);
        display: flex; align-items: center; justify-content: center;
        color: var(--gray-200);
        font-size: 34px;
        overflow: hidden;
    }
    .pm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

    /* Tên bên trái, đơn vị bên phải — cùng một hàng */
    .pm-main  {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
        padding: 10px 11px 0;
        min-height: 46px;
    }
    .pm-name  { flex: 1 1 auto; min-width: 0;
                font-size: 13.5px; line-height: 1.35;
                display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
                overflow: hidden; white-space: normal !important; }
    .pm-unit  { flex: 0 0 auto; margin-top: 1px; }
    .pm-price { padding: 6px 11px 11px; font-size: 15px; }
    .pm-add   { display: none; }

    /* ── Kết quả tìm trong cột trái: DÒNG DANH SÁCH, không phải thẻ ảnh ──
       Mấy luật thẻ ở ngay trên dựng cho lưới hàng của điện thoại: ảnh vuông
       to bằng cả ô, tên xuống hai dòng. Nhét nguyên thẻ đó vào ô gợi ý thì
       một kết quả chiếm gần nửa màn hình, xem được ba món là hết chỗ.
       Ở đây cần liếc một cái thấy sáu bảy món, nên bóp lại thành dòng:
       ảnh nhỏ 38px, tên một dòng, giá nằm cuối dòng. */
    .pd-left .pos-m-list .pm-row {
        display: grid !important;
        /* <button> co theo chữ dù đã là grid — không ép rộng thì cả dòng
           dồn về bên trái, giá dính ngay sau tên thay vì nằm cuối dòng.
           Và <button> mặc định căn giữa chữ, phải trả về trái không thì tên
           hàng với mấy nhãn phụ đứng chụm giữa dòng như thơ. */
        width: 100%;
        text-align: left;
        /* Bốn ô: ảnh · tên+nhãn · giá · nút thêm */
        grid-template-columns: 42px minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 10px !important;
        padding: 7px 9px !important;
        border: none !important;
        border-radius: 9px;
        box-shadow: none;
        transform: none !important;
    }
    .pd-left .pos-m-list .pm-row:hover {
        background: var(--blue-lt);
        box-shadow: none;
    }
    .pd-left .pos-m-list .pm-thumb {
        width: 38px; height: 38px;
        aspect-ratio: auto;
        border-radius: 8px;
        font-size: 15px;
    }
    .pd-left .pos-m-list .pm-main {
        display: flex; flex-direction: column; align-items: flex-start;
        gap: 1px; padding: 0; min-height: 0;
    }
    .pd-left .pos-m-list .pm-name {
        display: block;
        font-size: 13.5px;
        white-space: nowrap !important;
        overflow: hidden; text-overflow: ellipsis;
        max-width: 100%;
    }
    .pd-left .pos-m-list .pm-price {
        padding: 0; font-size: 14px; white-space: nowrap;
        justify-self: end;
    }
    /* Vạch mảnh giữa các dòng cho mắt bắt được ranh giới, dòng cuối bỏ vạch */
    .pd-left .pos-m-list .pm-row + .pm-row {
        border-top: 1px solid var(--gray-100) !important;
        border-radius: 0;
    }
    .pd-left .pos-m-list .pm-empty { padding: 30px 10px; }

    /* ── Dải đầu danh sách: đếm món + nhắc phím tắt ── */
    .pd-left .pos-m-list .pm-dd-head {
        display: flex; align-items: center; justify-content: space-between;
        gap: 12px; flex-wrap: wrap;
        padding: 7px 10px 9px; margin-bottom: 4px;
        border-bottom: 1px solid var(--gray-100);
        font-size: 11.5px; font-weight: 700; color: var(--gray-500);
        text-transform: uppercase; letter-spacing: .3px;
    }
    .pd-left .pm-dd-phim {
        display: flex; align-items: center; gap: 4px;
        font-weight: 600; text-transform: none; letter-spacing: 0;
        color: var(--gray-400);
    }
    .pd-left .pm-dd-phim kbd {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 18px; height: 18px; padding: 0 4px;
        border: 1px solid var(--gray-200); border-bottom-width: 2px;
        border-radius: 5px; background: #fff;
        font-family: inherit; font-size: 10.5px; font-weight: 700; color: var(--gray-500);
    }

    /* ── Dòng kết quả ── */
    .pd-left .pos-m-list .pm-row {
        gap: 12px !important;
        padding: 9px 10px !important;
        align-items: center;
    }
    .pd-left .pos-m-list .pm-name,
    .pd-left .pos-m-list .pm-sub { text-align: left; }
    .pd-left .pos-m-list .pm-thumb {
        width: 42px; height: 42px;
        border: 1px solid var(--gray-100);
    }
    /* Tên chiếm trọn dòng đầu, đơn vị và mấy nhãn phụ dồn xuống dòng dưới */
    .pd-left .pos-m-list .pm-main {
        display: block !important;
        padding: 0 !important;
        min-height: 0 !important;
        text-align: left;
    }
    .pd-left .pos-m-list .pm-name {
        display: block !important;
        font-size: 14px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        -webkit-line-clamp: unset;
    }
    /* Nhãn đơn vị và mấy nhãn phụ nằm chung dòng thứ hai */
    .pd-left .pos-m-list .pm-unit {
        display: inline-block; vertical-align: middle;
        margin: 3px 7px 0 0 !important;
    }
    /* Đoạn chữ khớp với từ vừa gõ */
    .pd-left .pos-m-list .pm-name mark {
        background: #fef08a; color: inherit;
        padding: 0 1px; border-radius: 3px;
    }
    .pd-left .pos-m-list .pm-sub {
        display: inline-flex; align-items: center; gap: 7px;
        vertical-align: middle; margin-top: 3px;
        min-width: 0; overflow: hidden;
    }
    .pd-left .pm-ton, .pd-left .pm-dv, .pd-left .pm-hieu {
        font-size: 11px; font-weight: 700; white-space: nowrap;
    }
    /* Tồn kho: xanh là bán được, cam là hết, đỏ là sổ sách sai */
    .pd-left .pm-ton.co  { color: var(--green); }
    .pd-left .pm-ton.het { color: var(--orange); }
    .pd-left .pm-ton.am  { color: var(--red); }
    .pd-left .pm-dv      { color: var(--blue); }
    .pd-left .pm-hieu {
        font-weight: 600; color: var(--gray-400);
        overflow: hidden; text-overflow: ellipsis;
    }
    .pd-left .pos-m-list .pm-price { font-size: 15px; align-self: center; }
    .pd-left .pos-m-list .pm-price small { font-size: 11px; margin-left: 1px; }

    /* Nút + chỉ hiện khi rê chuột vào dòng, hoặc khi dòng đang được chọn bằng
       bàn phím. Bày sẵn ở mọi dòng thì mười cái dấu cộng làm rối cả bảng. */
    .pd-left .pos-m-list .pm-add {
        display: flex; align-items: center; justify-content: center;
        width: 28px; height: 28px; border-radius: 8px;
        background: var(--blue); color: #fff; font-size: 12px;
        opacity: 0; transition: opacity .12s;
    }
    .pd-left .pos-m-list .pm-row:hover .pm-add,
    .pd-left .pos-m-list .pm-row.sel  .pm-add,
    /* Món đã có trong giỏ thì ô này KHÔNG còn là dấu cộng nữa mà là số lượng
       đang có — phải hiện luôn, ẩn đi thì mất hẳn thông tin. */
    .pd-left .pos-m-list .pm-row.co   .pm-add { opacity: 1; }

    /* ── Đã có trong giỏ ──
       Luật nền vẽ nguyên khung viền 2px quanh dòng, vì nó dựng cho THẺ ẢNH
       trên điện thoại — mỗi thẻ vốn đã là một ô riêng. Đem xuống danh sách
       dòng ở đây thì bảy dòng thành bảy cái hộp lồng nhau, rối hơn là giúp.
       Ở đây chỉ cần một vệt nền nhạt và con số bên phải là đủ. */
    .pd-left .pos-m-list .pm-row.co {
        outline: none;
        border-radius: 9px;
        background: #f0f7ff !important;
    }
    .pd-left .pos-m-list .pm-row.co .pm-name { color: inherit; }

    /* Dòng đang chọn bằng bàn phím — phải rõ hơn cả hover lẫn "đã có trong
       giỏ", vì lúc gõ phím thì con chuột vẫn đang nằm đâu đó bôi sáng một
       dòng khác, mà món đang chọn có thể cũng đã nằm trong giỏ rồi. */
    .pd-left .pos-m-list .pm-row.sel,
    .pd-left .pos-m-list .pm-row.co.sel {
        background: #dbeafe !important;
        box-shadow: inset 3px 0 0 var(--blue);
    }

    .pd-left .pos-m-list .pm-more {
        width: 100%; margin-top: 4px; padding: 10px;
        border: none; border-top: 1px solid var(--gray-100);
        background: none; cursor: pointer;
        font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--blue);
    }
    .pd-left .pos-m-list .pm-more:hover { background: var(--blue-lt); }

    .pm-more  { grid-column: 1 / -1; border: 1.5px dashed var(--blue-bd) !important;
                border-radius: 12px; background: #fff !important; height: 46px; }
    .pm-empty { grid-column: 1 / -1; }

    .pm-search input { height: 46px; border-radius: 11px; font-size: 14.5px; }
    .pm-scan { width: 46px; height: 46px; border-radius: 11px; }

    /* ── Cột phải: hóa đơn ── */
    .pd-bill-head { align-items: center; gap: 9px; margin-bottom: 14px; }
    .pd-count {
        margin-left: auto; font-size: 11.5px; font-weight: 700;
        color: var(--blue); background: var(--blue-lt);
        padding: 3px 9px; border-radius: 999px;
    }
    .pd-clear {
        width: 32px; height: 32px; flex-shrink: 0;
        border: 1px solid var(--gray-200); border-radius: 8px;
        background: #fff; color: var(--gray-500);
        font-size: 13px; cursor: pointer;
    }
    .pd-clear:hover { background: var(--red-lt); color: var(--red); border-color: #fecaca; }

    /* Khách hàng thu gọn */
    .pd-cust {
        padding: 0 !important; margin: 0 0 12px !important;
        box-shadow: none !important; border: none !important;
        background: transparent !important;
    }
    .pd-cust .customer-grid { grid-template-columns: 1fr; gap: 8px; }
    .pd-cust label { font-size: 11.5px; }
    .pd-cust input { height: 38px; font-size: 13px; }

    /* Bảng hàng trong hóa đơn — vùng cuộn riêng */
    .pd-bill .table-wrap {
        flex: 1; min-height: 90px; max-height: 34vh;
        overflow-y: auto; margin: 0 0 12px;
    }
    .pd-bill table { min-width: 0 !important; font-size: 12.5px; }
    .pd-bill th, .pd-bill td { padding: 7px 6px !important; }
    .pd-bill .inp-sm   { width: 52px; height: 32px; font-size: 13px; padding: 0 4px; text-align: center; }
    .pd-bill .inp-md   { width: 100%; min-width: 62px; height: 32px; font-size: 12.5px; padding: 0 5px; }
    .pd-bill .inp-unit { width: 100%; min-width: 52px; height: 32px; font-size: 12px; padding: 0 5px; }
    .pd-bill .icon-btn { width: 30px; height: 30px; font-size: 12px; }

    /* Cột hẹp nên bỏ số thứ tự và đơn giá — vẫn sửa được giá ở máy rộng hơn */
    .pd-bill th:nth-child(1), .pd-bill td:nth-child(1),
    .pd-bill th:nth-child(5), .pd-bill td:nth-child(5) { display: none; }

    /* ── Khối thanh toán ── */
    .pd-pay {
        flex-shrink: 0;
        margin: 0 -18px;
        padding: 14px 18px 18px;
        border-top: 1px solid var(--gray-200);
        background: var(--gray-50);
    }

    .pay-sum {
        display: flex; align-items: baseline; justify-content: space-between;
        gap: 12px; margin-bottom: 12px;
    }
    .pay-sum span { font-size: 13px; color: var(--gray-600); font-weight: 600; }
    .pay-sum .amt { font-size: 24px; font-weight: 800; color: var(--blue-h); letter-spacing: -.5px; }
    .pay-sum.change { margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--gray-200); }
    .pay-sum.change b { font-size: 17px; font-weight: 800; color: var(--green); }
    .pay-sum.change b.warn { color: var(--red); }

    .pay-label {
        font-size: 11px; font-weight: 700; text-transform: uppercase;
        letter-spacing: .4px; color: var(--gray-500); margin-bottom: 8px;
    }
    /* Ba hình thức thay vì hai. Cột hẹp nên nhãn phải ngắn lại một chút,
       nhưng vẫn để nguyên chữ — biểu tượng không thôi thì "kết hợp" với
       "chuyển khoản" nhìn na ná nhau. */
    .pay-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
    .pay-m {
        display: flex; flex-direction: column; align-items: center; gap: 5px;
        padding: 10px 4px;
        border: 1.5px solid var(--gray-200); border-radius: 11px;
        background: #fff; color: var(--gray-600);
        font-family: inherit; font-size: 11px; font-weight: 600;
        cursor: pointer; transition: all .15s;
    }
    .pay-m i { font-size: 16px; }
    .pay-m:hover  { border-color: var(--blue-bd); color: var(--blue); }
    .pay-m.active { border-color: var(--blue); background: var(--blue); color: #fff; }

    /* Hai ô của kiểu kết hợp, nằm cạnh nhau cho thấy rõ là một phép cộng */
    .pay-mix {
        display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
        margin-bottom: 12px;
    }
    .pay-mix .field  { margin-bottom: 0; }
    .pay-mix label   { font-size: 11.5px; }
    .pay-mix input   { height: 44px; font-size: 15px; font-weight: 700; text-align: right; }
    .pay-mix .pay-quick { grid-column: 1 / -1; margin: 0; }
    .pay-mix .pay-sum   { grid-column: 1 / -1; margin-bottom: 0; }

    .pay-cash .field { margin-bottom: 9px; }
    .pay-cash label  { font-size: 11.5px; }
    .pay-cash input  { height: 44px; font-size: 16px; font-weight: 700; text-align: right; }

    .pay-quick { display: flex; flex-wrap: wrap; gap: 6px; }
    .pq {
        flex: 1 1 auto; min-width: 62px; padding: 7px 6px;
        border: 1px solid var(--gray-200); border-radius: 8px;
        background: #fff; color: var(--gray-700);
        font-family: inherit; font-size: 12px; font-weight: 700;
        cursor: pointer; transition: all .13s;
    }
    .pq:hover { border-color: var(--blue); background: var(--blue-lt); color: var(--blue); }

    .pd-confirm {
        width: 100%; height: 52px; margin-top: 14px;
        justify-content: center; font-size: 15.5px; font-weight: 700;
    }

    /* Nhập tay: gập lại, mở khi cần */
    .pd-manual-toggle {
        width: 100%; display: flex; align-items: center; gap: 9px;
        height: 44px; margin-top: 14px; padding: 0 14px;
        border: 1.5px dashed var(--gray-200); border-radius: 11px;
        background: #fff; color: var(--gray-600);
        font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
    }
    .pd-manual-toggle:hover  { border-color: var(--blue-bd); color: var(--blue); }
    .pd-manual-toggle .caret { margin-left: auto; font-size: 11px; transition: transform .2s; }
    .pd-manual-toggle.open .caret { transform: rotate(180deg); }
    .pd-manual { display: none; margin-top: 12px; }
    .pd-manual.open { display: block; }
}

/* Màn hình vừa: 6/4 cho cột hóa đơn đỡ chật */
@media (min-width: 761px) and (max-width: 1100px) {
    .pos-desk   { grid-template-columns: 6fr 4fr; gap: 14px; }
    .pos-m-list { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
    .pay-m span { font-size: 10px; }
}

/* Điện thoại: lưới hàng vẫn là dòng, thêm ô ảnh nhỏ bên trái */
@media (max-width: 760px) {
    .pd-manual-toggle, .pd-count, .pd-clear { display: none; }
    .pm-row { grid-template-columns: auto 1fr auto auto; }
    .pm-thumb {
        width: 42px; height: 42px; border-radius: 9px;
        background: var(--gray-50); color: var(--gray-200);
        display: flex; align-items: center; justify-content: center;
        font-size: 16px; overflow: hidden; flex-shrink: 0;
    }
    .pm-thumb img { width: 100%; height: 100%; object-fit: cover; }
}

/* ══════════════════════════════════════════════════════════
   BỔ SUNG CHO MÁY TÍNH

   Khối tìm-kiếm/lưới hàng vốn chỉ được viết style trong media
   query của điện thoại, nên khi mang sang cột trái của bố cục
   7/3 thì mất hết: icon, ô nhập và nút quét rơi thành 3 dòng.
   Dưới đây là phần cấu trúc còn thiếu, đóng khung trong
   min-width:761px nên không đụng gì tới điện thoại.
══════════════════════════════════════════════════════════ */
@media (min-width: 761px) {

    .pos-m-top {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .pm-search {
        position: relative;
        flex: 1;
        display: flex;
        align-items: center;
        min-width: 0;
    }
    .pm-search > i {
        position: absolute;
        left: 15px;
        font-size: 14px;
        color: var(--gray-400);
        pointer-events: none;
        z-index: 1;
    }
    .pm-search input {
        width: 100%;
        padding: 0 42px 0 40px;
        border: 1.5px solid var(--gray-200);
        background: #fff;
        font-family: inherit;
        color: var(--gray-900);
        outline: none;
        transition: border-color .18s, box-shadow .18s;
    }
    .pm-search input:focus {
        border-color: var(--blue);
        box-shadow: 0 0 0 3px rgba(37,99,235,.1);
    }
    .pm-search input::-webkit-search-cancel-button { display: none; }

    .pm-x {
        position: absolute;
        right: 7px;
        width: 30px; height: 30px;
        border: none;
        background: none;
        color: var(--gray-400);
        font-size: 14px;
        cursor: pointer;
        display: none;
        border-radius: 7px;
    }
    .pm-x.show  { display: block; }
    .pm-x:hover { background: var(--gray-100); color: var(--gray-700); }

    .pm-scan {
        flex-shrink: 0;
        border: none;
        background: linear-gradient(135deg, var(--blue), var(--blue-h));
        color: #fff;
        font-size: 19px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(37,99,235,.3);
        transition: filter .15s, transform .1s;
    }
    .pm-scan:hover  { filter: brightness(1.08); }
    .pm-scan:active { transform: translateY(1px); }

    /* Thẻ hàng hóa: chữ căn trái như mọi danh mục sản phẩm */
    .pm-row   { text-align: left; font-family: inherit; cursor: pointer; }
    .pm-name  { display: block; font-weight: 700; color: var(--gray-900); }
    .pm-unit  {
        display: inline-block;
        font-size: 11.5px; font-weight: 600;
        color: var(--gray-500);
        background: var(--gray-100);
        padding: 2px 8px;
        border-radius: 999px;
    }
    .pm-unit i { font-size: 9.5px; color: var(--orange); margin-left: 2px; }
    .pm-price {
        display: block;
        font-weight: 800;
        color: var(--blue-h);
        letter-spacing: -.3px;
    }
    .pm-price small { font-size: 11.5px; font-weight: 700; margin-left: 1px; }

    .pm-more {
        font-family: inherit; font-size: 13.5px; font-weight: 700;
        color: var(--blue); cursor: pointer;
    }
    .pm-empty {
        display: flex; flex-direction: column; align-items: center; gap: 10px;
        padding: 60px 20px;
        color: var(--gray-400); font-size: 14px; text-align: center;
    }
    .pm-empty i { font-size: 34px; opacity: .35; }

    /* Bảng hóa đơn trống: vẫn phải thấy dòng nhắc */
    .pd-bill .empty-cell {
        text-align: center;
        padding: 26px 12px !important;
        color: var(--gray-400);
        font-size: 12.5px;
    }
    .pd-bill .empty-cell i { display: block; font-size: 22px; opacity: .4; margin-bottom: 7px; }

    /* Tiêu đề bảng trong cột hẹp: gọn lại, không viết hoa cho đỡ vỡ dòng */
    .pd-bill th {
        font-size: 10px !important;
        text-transform: none;
        letter-spacing: 0;
        white-space: nowrap;
    }
}

/* ══════════════════════════════════════════════════════════
   ẢNH SẢN PHẨM TRONG FORM HÀNG HÓA
══════════════════════════════════════════════════════════ */
.pf-img {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px dashed var(--gray-200);
}

.pf-img-box {
    position: relative;
    flex-shrink: 0;
    width: 104px;
    height: 104px;
    padding: 0;
    border: 1.5px dashed var(--gray-200);
    border-radius: 14px;
    background: var(--gray-50);
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .15s, background .15s;
}
.pf-img-box:hover { border-color: var(--blue); background: var(--blue-lt); }
.pf-img-box.has   { border-style: solid; background: #fff; }

.pf-img-box img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pf-img-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--gray-400);
    pointer-events: none;
}
.pf-img-empty i     { font-size: 24px; opacity: .55; }
.pf-img-empty small { font-size: 11.5px; font-weight: 600; }
.pf-img-box.has .pf-img-empty { display: none; }

/* Đang tải lên */
.pf-img-box.loading::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(255,255,255,.72)
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 50 50'><path fill='%232563eb' d='M25 5a20 20 0 1 0 20 20h-5A15 15 0 1 1 25 10z'><animateTransform attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='.8s' repeatCount='indefinite'/></path></svg>")
        center/28px no-repeat;
}

.pf-img-side { flex: 1; min-width: 0; }
.pf-img-hint {
    font-size: 12px;
    color: var(--gray-500);
    line-height: 1.55;
    margin-bottom: 10px;
}
.pf-img-act { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 640px) {
    /* Trên điện thoại khối ảnh phải gọn thành MỘT hàng: ô ảnh nhỏ bên
       trái, hai nút bên phải. Bản trước ô 84px cộng dòng giải thích hai
       dòng và hai nút xếp bên dưới làm cả khối cao gần 190px, chiếm hết
       phần đầu form — phải cuộn mới thấy ô nhập tên hàng. */
    .pf-img {
        gap: 10px;
        align-items: center;
        margin-bottom: 14px;
        padding-bottom: 14px;
    }
    .pf-img-box {
        width: 72px;
        height: 72px;
        border-radius: 12px;
    }
    .pf-img-empty i     { font-size: 19px; }
    .pf-img-empty small { display: none; }   /* 72px không đủ chỗ cho chữ */

    /* Dòng giải thích chỉ cần trên máy tính; sai định dạng hay quá nặng
       thì đã có thông báo lỗi lúc tải lên rồi. */
    .pf-img-hint { display: none; }

    .pf-img-act { gap: 8px; }
    .pf-img-act .btn {
        flex: 1 1 0;
        justify-content: center;
        padding: 0 10px;
        font-size: 12.5px;
        white-space: nowrap;
    }
}

/* ══════════════════════════════════════════════════════════
   DÙNG TRỌN BỀ NGANG MÀN HÌNH

   pos.css giới hạn .container ở 1300px — hợp với trang tin,
   nhưng phần mềm bán hàng thì mọi centimet màn hình đều đáng
   giá: nhiều mặt hàng hơn mỗi hàng, bảng đỡ phải cuộn.
══════════════════════════════════════════════════════════ */
@media (min-width: 761px) {
    .container {
        max-width: none !important;
        padding: 0 22px !important;
        margin: 18px auto !important;
    }

    /* Màn thật rộng thì mỗi thẻ hàng to thêm một chút cho dễ nhìn */
    @media (min-width: 1700px) {
        .pos-m-list { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
    }
}

/* ══════════════════════════════════════════════════════════
   BẢNG HÓA ĐƠN CAO HẾT CỘT + NÚT QUÉT CÓ NHÃN

   Bỏ khối "Máy quét USB đang sẵn sàng" ở đầu trang, nên nút
   quét chuyển hẳn xuống cạnh ô tìm hàng và có chữ cho rõ.
   Bảng hóa đơn bỏ trần 34vh, để nó ăn hết chiều cao còn lại
   của cột phải — nhìn cân và chứa được nhiều dòng hơn.
══════════════════════════════════════════════════════════ */
@media (min-width: 761px) {

    /* Nút quét cạnh ô tìm: thêm chữ, không còn chỉ mỗi icon */
    .pm-scan {
        width: auto;
        min-width: 120px;
        padding: 0 18px;
        gap: 9px;
        font-family: inherit;
        font-size: 14px;
        font-weight: 700;
        border-radius: 11px;
    }
    .pm-scan::after {
        content: 'Quét mã';
        white-space: nowrap;
    }

    /* Khoảng trống trên cùng của cột trái sau khi bỏ thanh trạng thái */
    .pd-pick { padding-top: 16px; }

    /* Bảng hóa đơn ăn hết chiều cao còn lại */
    .pd-bill .table-wrap {
        flex: 1 1 auto;
        min-height: 140px;
        max-height: none;
        display: flex;
        flex-direction: column;
    }
    .pd-bill .table-wrap table { flex-shrink: 0; }

    /* Cột phải cao trọn màn hình như cột trái. Nội dung nó ít hơn nhiều
       nên bên dưới dư ra một khoảng — khoảng ấy đẩy xuống DƯỚI cùng bằng
       margin-top:auto ở hàng nút, thành ra nút Thanh toán nằm sát đáy thẻ
       đúng kiểu máy bán hàng, chứ không phải một mảng trắng trơ dưới nút. */
    .pd-bill { flex: 1 1 auto; min-height: 0; }
    /* Ghi đè flex-shrink:0 ở khối "Khối thanh toán" bên trên: ở đó nó chỉ
       cần KHÔNG BỊ CO, còn ở đây nó phải NỞ ra hết đáy thẻ thì hàng nút mới
       có chỗ mà tụt xuống. */
    .pd-pay {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        /* Màn thấp (1366x768 trở xuống, hoặc cửa sổ không phóng to) thì khối
           tiền cao hơn chỗ còn lại. Không cho cuộn thì .pd-bill overflow:hidden
           cắt cụt mất nút Thanh toán — người bán mất luôn nút bấm chính. */
        overflow-y: auto;
    }
    /* margin-top:auto  → màn cao: cả khối chân tụt xuống sát đáy thẻ.
       position:sticky  → màn thấp: khối chân DÍNH ở đáy vùng cuộn, phần tiền
                          phía trên cuộn qua bên dưới nó. Kiểu nào thì dòng
                          công nợ và hai nút cũng luôn nhìn thấy và luôn nằm
                          cạnh nhau. */
    .pd-pay .pd-chan {
        margin-top: auto;
        position: sticky;
        bottom: 0;
        padding-top: 12px;
        background: var(--gray-50);
    }
    .pd-pay .pd-chan .pd-actions { margin-top: 10px; }

    /* Dòng nhắc khi hóa đơn còn trống — căn giữa vùng trống cho đỡ trơ */
    .pd-bill tbody:has(.empty-cell) {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 150px;
    }
}

/* ══════════════════════════════════════════════════════════
   BẢNG CHỌN ĐƠN VỊ TRÊN MÁY TÍNH

   LỖI ĐÃ SỬA: khối này vốn chỉ được viết style trong media
   query của điện thoại, còn bên máy tính lại bị "display:none
   !important" chung với thanh giỏ hàng và sheet. Hậu quả: bấm
   vào mặt hàng có NHIỀU ĐƠN VỊ (Lon/Thùng…) thì bảng chọn
   không hiện, coi như bấm không ăn — không thêm được vào
   hóa đơn. Ở đây bật lại và dựng thành hộp thoại giữa màn hình.
══════════════════════════════════════════════════════════ */
@media (min-width: 761px) {

    .pos-unit-bg {
        display: block !important;
        position: fixed;
        inset: 0;
        z-index: 500;
        background: rgba(15, 23, 42, .45);
        opacity: 0;
        pointer-events: none;
        transition: opacity .18s;
    }
    .pos-unit-bg.open { opacity: 1; pointer-events: auto; }

    /* Máy tính: hộp thoại giữa màn hình thay vì trượt từ đáy lên */
    .pos-unit {
        position: absolute;
        left: 50%;
        top: 50%;
        right: auto;
        bottom: auto;
        width: min(92vw, 380px);
        transform: translate(-50%, -50%) scale(.96);
        background: #fff;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 24px 60px rgba(15, 23, 42, .3);
        transition: transform .18s;
    }
    .pos-unit-bg.open .pos-unit { transform: translate(-50%, -50%) scale(1); }

    .mu-head {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 15px 16px;
        border-bottom: 1px solid var(--gray-200);
        font-size: 15px;
        font-weight: 800;
        color: var(--gray-900);
    }
    .mu-head span { flex: 1; min-width: 0; }
    .mu-head button {
        width: 34px; height: 34px;
        flex-shrink: 0;
        border: none;
        border-radius: 9px;
        background: var(--gray-100);
        color: var(--gray-600);
        font-size: 15px;
        cursor: pointer;
    }
    .mu-head button:hover { background: var(--gray-200); color: var(--gray-900); }

    .mu-item {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 16px;
        border: none;
        border-bottom: 1px solid var(--gray-100);
        background: #fff;
        font-family: inherit;
        cursor: pointer;
        transition: background .12s;
    }
    .mu-item:last-child { border-bottom: none; }
    .mu-item:hover      { background: var(--blue-lt); }
    .mu-item span { font-size: 14.5px; font-weight: 600; color: var(--gray-900); }
    .mu-item b    { font-size: 15px; font-weight: 800; color: var(--blue-h); }
}

/* ══════════════════════════════════════════════════════════
   THANH TÌM KIẾM — dọn lại cho cân

   Trước đây: pos.css khoá ô tìm ở max-width 300px, nên trên
   màn rộng ô tìm bé tí còn nút và dòng "N kết quả" trôi lung
   tung. Ở trang Ghi nợ, nút "Ghi nợ mới" lại nằm BÊN TRONG
   thẻ <form> nên bị bó theo nhịp của form.

   Giờ: ô tìm giãn hết chỗ trống, nút Tìm ngay cạnh, nút hành
   động tách hẳn ra ngoài form và đẩy sang phải.
══════════════════════════════════════════════════════════ */

/* Hàng chứa cả form tìm kiếm lẫn nút hành động */
.search-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.search-row .search-bar { flex: 1; margin-bottom: 0; min-width: 0; }
.sr-action { flex-shrink: 0; white-space: nowrap; }

/* Ô tìm giãn hết bề ngang còn lại, không còn trần 300px.
   Phải dùng flex-basis 0 và width:auto — pos.css đặt input{width:100%},
   nếu để basis auto thì ô tìm chiếm trọn dòng và đẩy nút Tìm xuống dưới. */
.search-bar input[type="search"],
.toolbar  input[type="search"] {
    flex: 1 1 0%;
    width: auto;
    max-width: none;
    min-width: 0;
}

@media (min-width: 761px) {
    /* Máy tính: ô tìm và nút nằm cùng một hàng, không xuống dòng */
    .search-bar { flex-wrap: nowrap; }
}
.search-bar button[type="submit"],
.search-bar > .btn { flex-shrink: 0; }

@media (max-width: 760px) {
    /* Điện thoại: ô tìm chiếm trọn dòng đầu, nút xuống dòng dưới */
    .search-row {
        flex-wrap: wrap;
        gap: 8px;
    }
    .search-row .search-bar { flex: 1 1 100%; }

    .search-bar {
        flex-wrap: wrap !important;
        gap: 8px !important;
        align-items: center;
    }
    .search-bar input[type="search"] {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }
    .search-bar button[type="submit"],
    .search-bar > .btn {
        flex: 1 1 auto;
        justify-content: center;
        padding: 0 18px;
    }
    .sr-action {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* ══════════════════════════════════════════════════════════
   THANH TOÁN TRÊN ĐIỆN THOẠI

   Trước đây khối .pd-pay bị ẩn hẳn ở màn hình nhỏ, nên trên
   điện thoại KHÔNG có chỗ nào chọn hình thức thanh toán, nhập
   tiền khách đưa hay xem tiền thối. Giờ nó được chuyển vào
   sheet giỏ hàng và thay luôn phần chân sheet cũ.
══════════════════════════════════════════════════════════ */
@media (max-width: 760px) {

    /* .pd-pay KHÔNG còn nằm trong danh sách bị ẩn */
    .pd-manual-toggle, .pd-count, .pd-clear { display: none; }

    /* Chân sheet cũ (tổng + nút) nay do .pd-pay đảm nhiệm */
    .sheet-foot { display: none; }

    #mSheetPay { margin-top: 12px; }

    #mSheetPay .pd-pay {
        margin: 0;
        padding: 14px;
        background: #fff;
        border: 1px solid var(--gray-200);
        border-radius: 14px;
    }

    .pd-pay .pay-sum {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
    }
    .pd-pay .pay-sum span { font-size: 13px; font-weight: 600; color: var(--gray-600); }
    .pd-pay .pay-sum .amt {
        font-size: 23px; font-weight: 800;
        color: var(--blue-h); letter-spacing: -.5px;
    }
    .pd-pay .pay-sum.change {
        margin: 12px 0 0; padding-top: 12px;
        border-top: 1px dashed var(--gray-200);
    }
    .pd-pay .pay-sum.change b { font-size: 18px; font-weight: 800; color: var(--green); }
    .pd-pay .pay-sum.change b.warn { color: var(--red); }

    .pd-pay .pay-label {
        font-size: 11px; font-weight: 700; text-transform: uppercase;
        letter-spacing: .4px; color: var(--gray-500); margin-bottom: 8px;
    }

    .pd-pay .pay-methods {
        display: grid; grid-template-columns: repeat(3, 1fr);
        gap: 8px; margin-bottom: 14px;
    }
    .pd-pay .pay-m {
        display: flex; flex-direction: column; align-items: center; gap: 6px;
        padding: 12px 4px;
        border: 1.5px solid var(--gray-200); border-radius: 12px;
        background: #fff; color: var(--gray-600);
        font-family: inherit; font-size: 11.5px; font-weight: 600;
        cursor: pointer; transition: all .15s;
    }
    .pd-pay .pay-m i      { font-size: 18px; }
    .pd-pay .pay-m.active { border-color: var(--blue); background: var(--blue); color: #fff; }

    .pd-pay .pay-cash .field { margin-bottom: 10px; }
    .pd-pay .pay-cash label  { font-size: 12px; }
    .pd-pay .pay-cash input  {
        height: 50px; font-size: 18px; font-weight: 700; text-align: right;
    }

    .pd-pay .pay-quick { display: flex; flex-wrap: wrap; gap: 7px; }
    .pd-pay .pq {
        flex: 1 1 auto; min-width: 72px; padding: 10px 6px;
        border: 1px solid var(--gray-200); border-radius: 9px;
        background: #fff; color: var(--gray-700);
        font-family: inherit; font-size: 13px; font-weight: 700;
        cursor: pointer;
    }
    .pd-pay .pq:active { border-color: var(--blue); background: var(--blue-lt); color: var(--blue); }

    .pd-pay .pd-confirm {
        width: 100%; height: 54px; margin-top: 16px;
        justify-content: center; font-size: 16px; font-weight: 700;
    }
}

/* ══════════════════════════════════════════════════════════
   BẢNG XÁC NHẬN THANH TOÁN

   Nhịp dọc thống nhất 14px, mọi khối cùng bo góc và cùng viền
   nên nhìn thành một mạch. Ảnh mã dùng khung ngân hàng của
   VietQR (vuông 1:1, đã có logo + số tài khoản + tên chủ tk).
══════════════════════════════════════════════════════════ */
.pc-modal {
    max-width: 430px;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    max-height: 92vh;
}
.pc-modal .modal-head {
    padding: 18px 20px 15px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--gray-200);
}
.pc-modal .modal-head h3 { display: flex; align-items: center; gap: 9px; }
.pc-modal .modal-head h3 i { color: var(--green); }

.pc-body { flex: 1; overflow-y: auto; padding: 16px 20px; }

/* ── Danh sách mặt hàng ── */
/* Lưới đặt Ở ĐÂY, không đặt trên từng dòng.

   Trước đây mỗi .pc-line là một lưới riêng, nên cột `auto` tự co theo nội
   dung của CHÍNH dòng đó: "1 Can" rộng 32px, "1 Chai" rộng 36px, "215.000
   VNĐ" rộng 87px còn "5.000 VNĐ" rộng 82px. Kết quả là ba dòng lệch nhau
   vài pixel — đủ để mắt thấy ngay là bảng không thẳng hàng.

   Gom lên .pc-lines thì ba dòng dùng chung một bộ cột, rộng bằng ô rộng
   nhất. Muốn thế thì từng dòng phải `display: contents` để nhường ô con
   lên lưới cha — đổi lại cái hộp của dòng biến mất, nên viền, nền kẻ sọc
   và đệm phải chuyển xuống cho các ô con. */
.pc-lines {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    border: 1px solid var(--gray-200);
    border-radius: var(--rsm);
    overflow: hidden;
    margin-bottom: 14px;
}
.pc-line { display: contents; }
.pc-line > * {
    padding: 10px 0;
    border-bottom: 1px solid var(--gray-100);
    font-size: 13px;
}
/* Khoảng cách giữa các cột làm bằng ĐỆM chứ không bằng gap: gap để lại
   rãnh không sơn nền, mà dòng chẵn có nền xám thì rãnh đó cắt sọc làm ba
   khúc. */
.pc-line > * + *         { padding-left: 12px; }
.pc-line > *:first-child { padding-left: 13px; }
.pc-line > *:last-child  { padding-right: 13px; }
.pc-line:last-child      > * { border-bottom: none; }
.pc-line:nth-child(even) > * { background: var(--gray-50); }

.pl-name  { font-weight: 600; color: var(--gray-900); line-height: 1.35;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-qty   { font-size: 12px; font-weight: 600; color: var(--gray-500);
            white-space: nowrap; text-align: right; }
.pl-money { font-weight: 700; color: var(--gray-900); white-space: nowrap;
            min-width: 82px; text-align: right; }

/* ── Tổng cộng ── */
.pc-sum {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px;
    padding: 13px 15px;
    background: var(--blue-lt);
    border: 1px solid var(--blue-bd);
    border-radius: var(--rsm);
    margin-bottom: 14px;
}
.pc-sum span { font-size: 13px; font-weight: 600; color: var(--gray-600); }
.pc-sum b    { font-size: 25px; font-weight: 800; color: var(--blue-h);
               letter-spacing: -.6px; line-height: 1.1; }

/* ── Hình thức ── */
.pc-method {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px;
    margin-bottom: 14px;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--rsm);
    font-size: 13.5px; font-weight: 700; color: var(--gray-700);
}
.pc-method i { color: var(--blue); font-size: 16px; width: 18px; text-align: center; }

/* ── Tiền mặt ── */
.pc-cash[hidden] { display: none; }
.pc-cash {
    padding: 12px 15px;
    border: 1px solid var(--gray-200);
    border-radius: var(--rsm);
    background: var(--gray-50);
}
.pc-row {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px; padding: 5px 0; font-size: 13.5px;
}
.pc-row span { color: var(--gray-600); font-weight: 600; }
.pc-row b    { font-weight: 700; color: var(--gray-900); }
.pc-row.big  { margin-top: 8px; padding-top: 11px;
               border-top: 1px dashed var(--gray-200); }
.pc-row.big b { font-size: 20px; font-weight: 800; color: var(--green); }

.pc-warn {
    margin-top: 11px; padding: 10px 12px;
    background: var(--orange-lt); border: 1px solid #fed7aa;
    border-radius: var(--rsm);
    font-size: 12.5px; font-weight: 600; color: var(--orange);
    line-height: 1.5;
}
.pc-warn[hidden] { display: none; }

/* ── Chuyển khoản: khung ngân hàng VietQR ── */
.pc-qr[hidden] { display: none; }
.pc-qr {
    display: flex;
    justify-content: center;
    padding: 14px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--rsm);
}
.vq-box {
    width: 100%;
    max-width: 268px;
    aspect-ratio: 1 / 1;              /* ảnh khung compact là hình vuông */
    display: flex; align-items: center; justify-content: center;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.vq-box.ready { padding: 0; }
.vq-box img, .vq-box svg { width: 100%; height: 100%; object-fit: contain; display: block; }

.vq-loading, .vq-err {
    font-size: 12.5px; color: var(--gray-500);
    text-align: center; padding: 14px; line-height: 1.5;
}
.vq-err { color: var(--red); }

/* ── Chân bảng ── */
.pc-foot {
    display: flex; gap: 10px;
    padding: 14px 20px;
    margin-top: 0;
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
    border-radius: 0 0 var(--radius) var(--radius);
}
.pc-foot .btn   { height: 48px; }
.pc-foot .pc-ok { font-size: 15px; font-weight: 700; }

/* Hai hàng ở MỌI bề rộng, không riêng màn hẹp.

   Ba nút rộng 112 + 128 + 173 = 413px, cộng hai khoảng cách 10px là 433.
   Lòng hộp chỉ 390px (430 trừ hai đệm 20px). Thiếu 43px ở mọi cỡ màn —
   kể cả 1366px.

   Lần trước tưởng đã xong vì chỉ so mép phải: .modal-footer có
   `justify-content: flex-end`, nên phần thừa lòi ra bên TRÁI chứ không
   phải bên phải, và scrollWidth cũng không tăng. Nút "Quay lại" nằm hẳn
   ngoài hộp 43px — đúng thứ nhìn thấy trong ảnh chụp.

   Hai nút phụ chia đôi hàng trên, nút chốt trải trọn hàng dưới: hết tràn,
   đúng tầm ngón cái, và nhìn là biết nút nào mới là nút bấm.

   Phải viết kèm .pc-modal ở đầu cho đủ điểm ưu tiên: dưới 900px còn luật
   chung `.modal-footer .btn { flex: 1 }`. Nó ngang điểm với `.pc-foot
   .pc-ok` mà nằm sau trong tệp nên thắng — viết gọn thì máy tính xuống
   hai hàng còn điện thoại lại dồn một hàng, tức là ngược đúng chỗ cần. */
.pc-modal .pc-foot { flex-wrap: wrap; }
/* Bề rộng cơ sở theo NỘI DUNG, không phải 0.

   Đặt `flex: 1 1 0` thì hai nút phụ tự nhận là chúng rộng 0 và co lại vừa
   bất cứ chỗ nào — ba nút cứ thế dính một hàng, không bao giờ xuống dòng.
   Để `auto` thì chúng đòi đúng bề rộng chữ, hết chỗ là nút chốt rớt xuống
   hàng dưới rồi giãn ra full.

   Nhờ vậy luật này tự chỉnh theo SỐ NÚT: hộp Xác nhận thanh toán có ba
   nút nên xuống hai hàng, hộp Ghi nợ chỉ hai nút thì vẫn gọn một hàng —
   không phải viết riêng cho từng hộp. */
.pc-modal .pc-foot .btn:not(.pc-ok) { flex: 1 1 auto; justify-content: center; }
.pc-modal .pc-foot .pc-ok           { flex: 1 1 200px; justify-content: center; }

@media (max-width: 640px) {
    .pc-modal { max-width: calc(100vw - 16px); max-height: 94vh; }
    .pc-modal .modal-head, .pc-body, .pc-foot { padding-left: 15px; padding-right: 15px; }

    .pc-sum b { font-size: 22px; }
    .vq-box   { max-width: 240px; }
    .pl-money { min-width: 74px; }
}

/* ══════════════════════════════════════════════════════════
   GHI NỢ — CHỌN HÀNG CÓ SẴN TRONG DANH MỤC
══════════════════════════════════════════════════════════ */
.dp-wrap { margin-bottom: 16px; }

.dp-search { position: relative; }
.dp-search > i {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    font-size: 13.5px; color: var(--gray-400); pointer-events: none; z-index: 1;
}
.dp-search input { padding-left: 38px !important; }

/* Danh sách gợi ý */
.dp-dd {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    z-index: 60;
    max-height: 260px; overflow-y: auto;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--rsm);
    box-shadow: 0 8px 26px rgba(15,23,42,.14);
    display: none;
}
.dp-dd.show { display: block; }

.dp-opt {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 10px 13px;
    border-bottom: 1px solid var(--gray-100);
    cursor: pointer;
    transition: background .12s;
}
.dp-opt:last-child { border-bottom: none; }
.dp-opt:hover      { background: var(--blue-lt); }
.do-name { font-size: 13.5px; font-weight: 600; color: var(--gray-900);
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.do-unit { font-size: 11.5px; font-weight: 600; color: var(--gray-500);
           background: var(--gray-100); padding: 2px 8px; border-radius: 999px; }
.dp-opt b { font-size: 13.5px; font-weight: 800; color: var(--blue-h); white-space: nowrap; }

.dp-none { padding: 14px 13px; font-size: 12.5px; color: var(--gray-500); line-height: 1.5; }

/* Hàng đã chọn */
.dp-list {
    margin-top: 10px;
    border: 1px solid var(--gray-200);
    border-radius: var(--rsm);
    overflow: hidden;
}
.dp-empty {
    padding: 18px 13px; text-align: center;
    font-size: 12.5px; color: var(--gray-400);
}
.dp-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--gray-100);
    background: #fff;
}
.dp-row:last-child { border-bottom: none; }

.dp-info { min-width: 0; }
.dp-name { font-size: 13.5px; font-weight: 700; color: var(--gray-900);
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-sub  { font-size: 11.5px; color: var(--gray-500); margin-top: 2px; }

.dp-qty { display: flex; align-items: center;
          border: 1.5px solid var(--gray-200); border-radius: 9px; overflow: hidden; }
.dp-qty button {
    width: 30px; height: 32px; border: none;
    background: var(--gray-50); color: var(--gray-700);
    font-size: 16px; font-weight: 700; cursor: pointer;
}
.dp-qty button:hover { background: var(--gray-200); }
.dp-qty input {
    width: 40px; height: 32px; border: none;
    border-left: 1.5px solid var(--gray-200); border-right: 1.5px solid var(--gray-200);
    text-align: center; font-family: inherit; font-size: 13.5px; font-weight: 700;
    outline: none; -moz-appearance: textfield;
}
.dp-qty input::-webkit-outer-spin-button,
.dp-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.dp-line { font-size: 13.5px; font-weight: 800; color: var(--blue-h);
           white-space: nowrap; min-width: 74px; text-align: right; }
.dp-del  { width: 30px; height: 32px; border: none; border-radius: 8px;
           background: var(--red-lt); color: var(--red); font-size: 13px; cursor: pointer; }
.dp-del:hover { background: var(--red); color: #fff; }

/* Tổng tiền nợ */
.dp-total {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px;
    margin-top: 4px; padding: 13px 15px;
    background: var(--blue-lt);
    border: 1px solid var(--blue-bd);
    border-radius: var(--rsm);
}
.dp-total-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dp-total-l span  { font-size: 13px; font-weight: 700; color: var(--gray-700); }
.dp-total-l small { font-size: 11.5px; color: var(--gray-500); }
.dp-total-l small b { color: var(--blue-h); }
.dp-total input {
    width: 160px; height: 46px;
    text-align: right;
    font-size: 18px !important; font-weight: 800;
    color: var(--blue-h);
    border-color: var(--blue-bd) !important;
    background: #fff;
}

@media (max-width: 640px) {
    .dp-row  { grid-template-columns: 1fr auto auto; grid-template-areas: "info qty del" "line line line"; }
    .dp-info { grid-area: info; }
    .dp-qty  { grid-area: qty; }
    .dp-del  { grid-area: del; }
    .dp-line { grid-area: line; text-align: left; min-width: 0; padding-top: 2px; }

    .dp-total { flex-direction: column; align-items: stretch; gap: 10px; }
    .dp-total input { width: 100%; }
}

/* ══════════════════════════════════════════════════════════
   HÀNG NÚT: GHI NỢ + THANH TOÁN
══════════════════════════════════════════════════════════ */
.pd-actions { display: flex; gap: 9px; margin-top: 14px; }
.pd-actions .pd-in {
    flex: 0 0 auto;
    padding: 0 16px;
    white-space: nowrap;
    justify-content: center;
}
.pd-actions .pd-confirm { flex: 1; margin-top: 0 !important; }

/* Hai cột trong bảng ghi nợ */
.pc-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pc-body .field { margin-top: 12px; }
.pc-sum.debt { background: var(--orange-lt); border-color: #fed7aa; }
.pc-sum.debt b { color: var(--orange); }

@media (max-width: 640px) {
    .pc-two { grid-template-columns: 1fr; }
    /* Ba nút một hàng trên màn hẹp thì nút Thanh toán bị bóp còn một mẩu.
       Hai nút phụ bỏ chữ, giữ biểu tượng — chỗ trống dồn hết cho nút chính
       vì đó mới là nút bấm mấy trăm lần một ngày. */
    .pd-actions .pd-in span { display: none; }
    /* Bỏ chữ rồi thì nút còn mỗi cái biểu tượng — để lề 15px thì nó thành
       một thanh cao lêu nghêu (52px cao, 44px rộng). aspect-ratio:1 cho bề
       ngang bằng đúng bề cao, ra ô vuông, mà ngón cái cũng dễ trúng hơn. */
    .pd-actions .pd-in {
        flex: 0 0 auto;
        padding: 0; width: auto; aspect-ratio: 1;
        justify-content: center;
    }
}
@media (max-width: 760px) {
    .pd-pay .pd-actions { margin-top: 16px; }
    .pd-pay .pd-actions .btn { height: 54px; }
}

/* ══════════════════════════════════════════════════════════
   MOBILE: LƯỚI HÀNG 2 CỘT KIỂU THẺ (giống máy tính)
   Đặt sau khối dạng-dòng nên ghi đè lại.
══════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
    .pos-m-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        border: none !important;
        background: transparent !important;
        overflow: visible !important;
    }

    .pm-row {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: 0 !important;
        padding: 0 !important;
        border: 1px solid var(--gray-200) !important;
        border-radius: 14px;
        background: #fff;
        overflow: hidden;
        box-shadow: var(--shadow-sm);
        text-align: left;
    }
    .pm-row:active { transform: scale(.97); border-color: var(--blue) !important; }

    .pm-thumb {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        border-radius: 0;
        font-size: 28px;
        flex-shrink: 1;
    }

    .pm-main  {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 7px;
        padding: 9px 10px 0;
        min-height: 42px;
    }
    .pm-name  {
        flex: 1 1 auto; min-width: 0;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden; white-space: normal;
        font-size: 13px; line-height: 1.35; font-weight: 700;
    }
    .pm-unit  { flex: 0 0 auto; display: inline-block; margin-top: 1px; }
    .pm-price { display: block; padding: 5px 10px 10px; font-size: 14.5px; }
    .pm-add   { display: none; }

    .pm-more, .pm-empty { grid-column: 1 / -1; }
    .pm-more {
        border: 1.5px dashed var(--blue-bd) !important;
        border-radius: 12px;
        background: #fff !important;
        height: 46px;
    }
}

/* ══════════════════════════════════════════════════════════
   TRANG TỔNG QUAN
══════════════════════════════════════════════════════════ */
.db-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}
.db-card {
    display: flex; align-items: center; gap: 13px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.05);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.dc-ico {
    width: 46px; height: 46px; flex-shrink: 0;
    border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}
.dc-ico.blue   { background: var(--blue-lt);   color: var(--blue); }
.dc-ico.green  { background: var(--green-lt);  color: var(--green); }
.dc-ico.orange { background: var(--orange-lt); color: var(--orange); }
.dc-ico.red    { background: var(--red-lt);    color: var(--red); }

.dc-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dc-body span  { font-size: 12px; font-weight: 600; color: var(--gray-500); }
.dc-body b     { font-size: 19px; font-weight: 800; color: var(--gray-900); letter-spacing: -.4px; }
.dc-body small { font-size: 11.5px; color: var(--gray-400); }

.db-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 18px;
    align-items: start;
}
.db-chart  { grid-column: 1; }
.db-pm     { grid-column: 2; }
.db-top    { grid-column: 1; }
.db-recent { grid-column: 2; }

.db-more {
    margin-left: auto;
    font-size: 12px; font-weight: 700;
    color: var(--blue); text-decoration: none;
    display: inline-flex; align-items: center; gap: 5px;
}
.db-more:hover { text-decoration: underline; }

.db-empty {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 46px 20px;
    color: var(--gray-400); font-size: 13px; text-align: center;
}
.db-empty i { font-size: 30px; opacity: .35; }

/* ── Biểu đồ cột ── */
/* Thấp hơn bản cũ (230px): tiệm tạp hóa xem theo tháng thì phần lớn ngày
   có doanh thu xấp xỉ nhau, cao thêm chỉ kéo dài mấy cột chứ không cho biết
   thêm điều gì, mà lại đẩy mấy khối bên dưới xuống dưới tầm nhìn. */
.bar-wrap {
    display: flex; align-items: flex-end; gap: 6px;
    height: 176px; padding-top: 8px;
}
.bar-col {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    height: 100%;
}
.bar-val {
    font-size: 10px; font-weight: 700; color: var(--gray-500);
    height: 14px; white-space: nowrap;
}
/* Rãnh của cột chỉ còn một vệt rất nhạt.

   Trước đây rãnh tô xám đậy kín từ đáy lên đỉnh khung. Ngày chưa bán
   được gì cũng thành một cột xám cao bằng cả biểu đồ, nên nguyên khung
   nhìn ra một hàng rào chứ không ra biểu đồ — mà đầu tháng thì lúc nào
   cũng nhiều ngày chưa tới. */
.bar-track {
    flex: 1; width: 100%;
    display: flex; align-items: flex-end;
    background: linear-gradient(180deg, transparent 55%, var(--gray-50) 100%);
    border-radius: 7px 7px 0 0;
    overflow: hidden;
}
.bar-fill {
    width: 100%;
    background: linear-gradient(180deg, #60a5fa, var(--blue));
    border-radius: 7px 7px 0 0;
    transition: height .3s;
}
.bar-fill.today { background: linear-gradient(180deg, #fbbf24, var(--orange)); }
.bar-lbl { font-size: 10px; font-weight: 600; color: var(--gray-400); white-space: nowrap; }
.bar-lbl.today { color: var(--orange); font-weight: 800; }

/* ── Vòng tròn hình thức thanh toán ── */
.pm-chart { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.pm-donut { width: 150px; height: 150px; flex-shrink: 0; }
.pm-legend { width: 100%; display: flex; flex-direction: column; gap: 11px; }
.pm-item { display: flex; align-items: flex-start; gap: 9px; }
.pm-dot { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; margin-top: 3px; }
.pm-item b     { display: block; font-size: 13px; font-weight: 700; color: var(--gray-900); }
.pm-item small { display: block; font-size: 11.5px; color: var(--gray-500); margin-top: 1px; }

/* ── Hàng bán chạy ── */
.top-list { display: flex; flex-direction: column; gap: 11px; }
.top-row  { display: flex; align-items: center; gap: 11px; }
.tr-rank {
    width: 24px; height: 24px; flex-shrink: 0;
    border-radius: 7px;
    background: var(--gray-100); color: var(--gray-600);
    font-size: 11.5px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.top-row:nth-child(1) .tr-rank { background: var(--orange); color: #fff; }
.top-row:nth-child(2) .tr-rank { background: var(--blue);   color: #fff; }
.top-row:nth-child(3) .tr-rank { background: var(--green);  color: #fff; }

.tr-main { flex: 1; min-width: 0; }
.tr-name {
    font-size: 13.5px; font-weight: 600; color: var(--gray-900);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tr-name small { font-size: 11px; color: var(--gray-400); font-weight: 500; margin-left: 4px; }
.tr-bar { height: 6px; background: var(--gray-100); border-radius: 99px; margin-top: 5px; overflow: hidden; }
.tr-bar div { height: 100%; background: var(--blue); border-radius: 99px; }

.tr-num { text-align: right; flex-shrink: 0; }
.tr-num b     { display: block; font-size: 13px; font-weight: 800; color: var(--gray-900); white-space: nowrap; }
.tr-num small { display: block; font-size: 11px; color: var(--gray-400); }

/* ── Hóa đơn gần đây ── */
.rc-list { display: flex; flex-direction: column; }
.rc-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 10px 0;
    border-bottom: 1px solid var(--gray-100);
}
.rc-row:last-child { border-bottom: none; }
.rc-l small { display: block; font-size: 11.5px; color: var(--gray-500); margin-top: 3px; }
.rc-r { text-align: right; flex-shrink: 0; }
.rc-r b { display: block; font-size: 13.5px; font-weight: 800; color: var(--gray-900); white-space: nowrap; }
.rc-r .payment-badge { margin-top: 3px; }

@media (max-width: 1100px) {
    .db-cards { grid-template-columns: repeat(2, 1fr); }
    .db-grid  { grid-template-columns: 1fr; }
    .db-chart, .db-pm, .db-top, .db-recent { grid-column: 1; }
    .pm-chart { flex-direction: row; align-items: center; }
    .pm-legend { flex: 1; }
}

@media (max-width: 640px) {
    .db-cards { gap: 10px; }
    .db-card  { padding: 13px 14px; gap: 10px; }
    .dc-ico   { width: 40px; height: 40px; font-size: 16px; border-radius: 11px; }
    .dc-body b { font-size: 16px; }
    .dc-body span { font-size: 11px; }

    .bar-wrap { height: 190px; gap: 3px; }
    .bar-val  { font-size: 8.5px; }
    .bar-lbl  { font-size: 8.5px; }

    .pm-chart { flex-direction: column; }
    .pm-donut { width: 130px; height: 130px; }
}

/* ══════════════════════════════════════════════════════════
   NÚT GHI NỢ — nằm BÊN TRÁI nút thanh toán, kiểu kính trắng

   Ghi nợ là thao tác phụ nên không được rực hơn nút thanh toán.
   Ép width:auto vì luật mobile cũ đặt .pd-confirm{width:100%}
   khiến hai nút bị đẩy thành hai dòng.
══════════════════════════════════════════════════════════ */
.pd-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 9px;
    margin-top: 14px;
}
.pd-actions .pd-in { order: 0; }
.pd-actions .pd-in {
    flex: 0 0 auto;              /* vừa đủ chữ, không chia đôi hàng */
    width: auto !important;
    margin-top: 0 !important;
    padding: 0 12px;
    white-space: nowrap;
    justify-content: center;

    background: rgba(255,255,255,.85) !important;
    color: var(--gray-700) !important;
    border: 1.5px solid var(--gray-200) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 1px 3px rgba(15,23,42,.05);
    transition: all .15s;
}
/* Tạm tính chỉ là in một tờ giấy, không đụng gì tới sổ — viền xanh cho
   khác hẳn nút Thanh toán. */
.pd-actions .pd-in:hover {
    background: #fff !important;
    border-color: var(--blue) !important;
    color: var(--blue) !important;
}
.pd-actions .pd-in i { color: inherit; }

/* ── Ghi nợ: DÒNG CHỮ, không phải nút ──
   Ba nút bằng nhau ở chân thẻ thì nút nào cũng như nút nào, mà bán chịu là
   việc thỉnh thoảng mới làm còn thanh toán là việc làm cả ngày. Hạ nó xuống
   thành một dòng chữ kèm sẵn số tiền sẽ ghi nợ: vẫn bấm được, vẫn thấy rõ,
   nhưng không còn tranh chỗ với nút chính. */
.pay-no {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; padding-top: 4px;
}
.pay-no-lk {
    border: none; background: none; padding: 0; cursor: pointer;
    font-family: inherit; font-size: 13.5px; font-weight: 700;
    color: var(--orange);
    display: inline-flex; align-items: center; gap: 7px;
}
.pay-no-lk:hover { text-decoration: underline; }
.pay-no-lk i { font-size: 12.5px; }
.pay-no b { font-size: 14.5px; font-weight: 800; color: var(--orange); }
/* Không còn gì để ghi nợ thì làm mờ cả dòng — vẫn bấm được, nhưng không
   còn là thứ đập vào mắt giữa lúc khách đang trả đủ tiền. */
.pay-no.trong .pay-no-lk,
.pay-no.trong b { color: var(--gray-300); }

.pd-actions .pd-confirm {
    order: 2;
    flex: 1 1 0;
    width: auto !important;
    margin-top: 0 !important;
}

/* Hai nút cùng chiều cao — .pd-confirm vốn có height riêng nên phải
   đặt lại cho cả hàng, không thì nút Ghi nợ thấp hơn một chút. */
.pd-actions .btn { height: 52px; }
@media (max-width: 760px) {
    .pd-actions .btn { height: 54px; }
}

/* ══════════════════════════════════════════════════════════
   ĐIỆN THOẠI: HAI NÚT DÍNH Ở CHÂN SHEET

   .pd-actions được JS chuyển xuống .sheet-foot nên luôn nhìn
   thấy, không phải cuộn hết danh sách hàng mới bấm được.
══════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
    .sheet-foot { display: flex !important; }

    /* Ba phần tử cũ của chân sheet không dùng nữa */
    .sheet-foot > .sf-total,
    .sheet-foot > .sf-clear,
    .sheet-foot > .sf-pay { display: none !important; }

    .sheet-foot .pd-actions {
        width: 100%;
        margin-top: 0 !important;
        gap: 10px;
    }
    .sheet-foot .pd-actions .btn { height: 52px; }

    /* Trong sheet thì bỏ hàng nút ra khỏi khối thanh toán */
    #mSheetPay .pd-pay { padding-bottom: 14px; }
}

/* ══════════════════════════════════════════════════════════
   TRANG SẢN PHẨM — ẢNH TRONG Ô TÊN

   Đặt ảnh vào chính ô tên thay vì thêm cột mới, để số thứ tự
   cột không đổi — CSS mobile đang sắp xếp bằng nth-child, thêm
   cột là mọi thứ nhảy chỗ hết.
══════════════════════════════════════════════════════════ */
.tc-products td.td-name {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.pl-thumb {
    /* Kích thước ảnh chỉ khai ở ĐÂY. Trước có 5 luật .pl-thumb chồng
       nhau ở nhiều khối, luật cuối thắng nên sửa chỗ này chỗ kia đều
       không ăn. */
    width: 36px; height: 36px;
    flex-shrink: 0;
    border-radius: 9px;
    background: var(--gray-50);
    display: flex; align-items: center; justify-content: center;
    color: var(--gray-200);
    font-size: 15px;
    overflow: hidden;
}
.pl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-nm {
    min-width: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    line-height: 1.3;
}

@media (max-width: 760px) {
    .tc-products td.td-name { gap: 8px; }
    .pl-nm    { font-size: 13px; }
}

/* ══════════════════════════════════════════════════════════
   TRANG SẢN PHẨM TRÊN MOBILE — GIỮ NGUYÊN DẠNG BẢNG

   Các trang khác vẫn dùng bố cục gọn theo hàng, riêng trang
   Sản phẩm giữ đúng bảng như máy tính và vuốt ngang để đọc:
   ở đây cần nhìn đủ Barcode, Đơn vị & Giá, Ngày thêm cùng lúc,
   ép vào 390px là mất thông tin.

   Khối này đặt CUỐI để thắng lại các luật dạng-hàng phía trên.
══════════════════════════════════════════════════════════ */
@media (max-width: 760px) {

    .tc-products {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        /* Nói rõ cho trình duyệt di động biết vùng này được vuốt ngang.
           Thiếu dòng này một số máy Android nuốt cử chỉ vuốt ngang và
           coi đó là thao tác cuộn trang. */
        touch-action: pan-x pan-y;
        overscroll-behavior-x: contain;
        border-radius: 12px;
    }

    .tc-products table {
        display: table !important;
        width: auto !important;
        min-width: 660px !important;
        font-size: 13px !important;
    }
    .tc-products thead { display: table-header-group !important; }
    .tc-products tbody { display: table-row-group !important; }

    .tc-products tbody tr {
        display: table-row !important;
        grid-template-columns: none !important;
        grid-template-areas: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .tc-products thead th,
    .tc-products tbody td {
        display: table-cell !important;
        width: auto !important;
        padding: 10px 12px !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
        border-bottom: 1px solid var(--gray-100) !important;
        text-align: left !important;
    }
    .tc-products thead th {
        font-size: 10px !important;
        border-bottom: 1px solid var(--gray-200) !important;
    }

    /* Hiện lại những cột đã ẩn ở bố cục gọn */
    .tc-products thead th:nth-child(1), .tc-products tbody td:nth-child(1),
    .tc-products thead th:nth-child(5), .tc-products tbody td:nth-child(5) {
        display: table-cell !important;
    }

    /* Ô tên: ảnh và chữ nằm ngang trong ô bảng (không dùng flex được
       vì ô phải giữ display:table-cell) */
    .tc-products tbody td.td-name {
        display: table-cell !important;
        font-size: 13.5px !important;
        font-weight: 700;
        /* Phải ghi rõ ở đây: luật của bố cục gọn phía trên là
           `.tc-products td.td-name{white-space:normal!important}` — hai
           lớp nên đặc hiệu hơn `.tc-products tbody td`, không ghi lại
           thì ảnh và tên bị tách thành hai dòng. */
        white-space: nowrap !important;
        overflow: visible !important;
    }
    .tc-products .pl-thumb {
        display: inline-flex !important;
        vertical-align: middle;
    }
    .tc-products .pl-nm {
        display: inline !important;
        vertical-align: middle;
        white-space: nowrap !important;
        -webkit-line-clamp: unset !important;
    }

    /* Trả lại đầy đủ thông tin đơn vị */
    .tc-products tbody td.td-unit {
        justify-self: auto !important;
        text-align: left !important;
        font-size: 13px !important;
        color: var(--gray-900);
    }
    .tc-products td.td-unit .primary-badge,
    .tc-products td.td-unit .unit-toggle { display: inline-block !important; }
    .tc-products .unit-variants { display: none !important; }
    .tc-products .unit-variants.show { display: block !important; }

    .tc-products tbody td.td-barcode {
        font-family: 'Courier New', monospace;
        font-size: 12px !important;
        color: var(--gray-500);
    }
    .tc-products tbody td.td-date { font-size: 11.5px !important; color: var(--gray-400); }

    .tc-products tbody td.td-actions { text-align: right !important; }
    .tc-products .action-btns { display: flex !important; gap: 6px !important; }
    .tc-products .icon-btn { width: 34px !important; height: 34px !important; }

    /* Dòng "chưa có sản phẩm" trải hết bảng */
    .tc-products tbody td.empty-cell {
        display: table-cell !important;
        text-align: center !important;
        white-space: normal !important;
        padding: 40px 16px !important;
    }
}

/* ══════════════════════════════════════════════════════════
   TRANG SẢN PHẨM — CỘT ẢNH RIÊNG + THANH TÌM CÓ ICON

   Bảng nay có 7 cột: #, Ảnh, Tên, Barcode, Đơn vị & Giá,
   Ngày thêm, Thao tác. Ảnh tách khỏi ô tên nên tên không còn
   bị đẩy xuống dòng.
══════════════════════════════════════════════════════════ */

/* Ô tên trở lại là ô chữ bình thường */
.tc-products td.td-name {
    display: table-cell;
    align-items: initial;
    gap: 0;
}

.tc-products td.td-img { width: 50px; text-align: center; padding: 5px 6px !important; }
.tc-products .pl-thumb { display: inline-flex; vertical-align: middle; margin: 0; }

/* Thanh tìm ở trang Sản phẩm — cùng kiểu với ô tìm bên trang Bán hàng */
.toolbar .tb-search {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
}
.toolbar .tb-search > i {
    position: absolute;
    left: 15px;
    font-size: 14px;
    color: var(--gray-400);
    pointer-events: none;
    z-index: 1;
}
.toolbar .tb-search input[type="search"] {
    width: 100%;
    height: 46px;
    padding: 0 14px 0 40px;
    border: 1.5px solid var(--gray-200);
    border-radius: 12px;
    background: #fff;
    font-family: inherit;
    font-size: 14.5px;
    outline: none;
    transition: border-color .18s, box-shadow .18s;
}
.toolbar .tb-search input[type="search"]:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.toolbar .tb-search input::-webkit-search-cancel-button { display: none; }

@media (max-width: 760px) {
    .toolbar .tb-search input[type="search"] { height: 48px; font-size: 16px; }

    /* Cột ảnh trong bảng cuộn ngang */
    .tc-products tbody td.td-img {
        display: table-cell !important;
        width: 50px;
        padding: 5px 6px !important;
        text-align: center !important;
    }
    .tc-products thead th:nth-child(2) { text-align: center !important; }

    /* Ô tên nay chỉ còn chữ */
    .tc-products tbody td.td-name {
        white-space: nowrap !important;
        overflow: visible !important;
    }
}

/* ══════════════════════════════════════════════════════════
   CHẶN iOS TỰ PHÓNG TO KHI BẤM VÀO Ô NHẬP  — ĐẶT CUỐI FILE

   Safari trên iPhone tự zoom mỗi khi focus vào ô có cỡ chữ
   DƯỚI 16px, và thường không thu lại được — người dùng kẹt ở
   trạng thái phóng to.

   Luật 16px ở phần trên bị mấy khối viết sau ghi đè xuống
   13–14.5px (ô số lượng trong giỏ, ô số lượng phiếu nợ, hai ô
   tìm kiếm). Khối này đặt CUỐI và dùng !important để không
   khối nào ghi đè được nữa — đây là ràng buộc của hệ điều
   hành, không phải lựa chọn thẩm mỹ.
══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ══════════════════════════════════════════════════════════
   THANH TRÊN — khung mỗi mục to lên cho cân với phần thân

   pos.css để .nav-link đệm 6px/13px, chữ 13px — nhỏ so với các
   thẻ và nút bên dưới. Chỉ áp cho máy tính vì dưới 901px thanh
   này đã ẩn, nhường chỗ cho thanh điều hướng dưới đáy.
══════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
    .topbar {
        height: 62px;
        padding: 0 22px;
    }
    .topbar-logo { font-size: 17.5px; gap: 9px; }
    .topbar-nav  { gap: 5px; margin-left: 10px; }

    .nav-link {
        padding: 10px 17px;
        border-radius: 11px;
        font-size: 14px;
        gap: 8px;
    }
    .nav-link i { font-size: 14.5px; }

    .user-badge { font-size: 13.5px; gap: 7px; }
    .topbar-right { gap: 10px; }
    .topbar-right .btn-sm { height: 40px; padding: 0 14px; font-size: 13.5px; }

    /* Thanh cao thêm 6px nên các mốc dính phải dời theo,
       không thì cột hóa đơn bị lệch lên dưới thanh. */
    .pd-right {
        top: 80px;
        height: calc(100vh - 98px);
        max-height: none;
    }
}

/* Chạy dạng app: cộng thêm phần tai thỏ */
@media (min-width: 901px) {
    .standalone .topbar { height: calc(62px + var(--sat)); }
}

/* ══════════════════════════════════════════════════════════
   TỒN KHO
══════════════════════════════════════════════════════════ */
.td-stock { text-align: center !important; white-space: nowrap; }
.st {
    display: inline-block;
    min-width: 46px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 800;
}
.st-ok  { background: var(--green-lt);  color: var(--green); }
.st-low { background: var(--orange-lt); color: var(--orange); }
.st-out { background: var(--red-lt);    color: var(--red); }
.st-off { color: var(--gray-300, #d1d5db); font-weight: 600; }

/* Khối kho trong form sản phẩm */
.pf-track {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 4px 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--rsm);
    background: var(--gray-50);
    cursor: pointer;
}
.pf-track input { width: 20px; height: 20px; accent-color: var(--blue); margin: 0; }
.pf-track > span  { font-size: 13.5px; font-weight: 700; color: var(--gray-800, #1f2937); }
.pf-track > small { grid-column: 2; font-size: 12px; color: var(--gray-500); }

.pf-stock { grid-template-columns: repeat(3, 1fr); }

/* Bảng đơn vị nay có thêm cột Quy đổi */
.pf-units-head,
.pf-units .unit-variant-row { grid-template-columns: 1.2fr 1fr 82px 82px 44px; }

@media (max-width: 640px) {
    .pf-stock { grid-template-columns: 1fr; }
    .pf-units .unit-variant-row {
        grid-template-columns: 1fr auto;
        grid-template-areas: "unit del" "price del" "ratio del" "def def";
    }
    .pf-units .unit-variant-row .field:nth-of-type(3) { grid-area: ratio; }
}

/* ── Thẻ kho & lãi trên Tổng quan ── */
.dc-ico.purple { background: #f3e8ff; color: #7c3aed; }

a.db-card { text-decoration: none; transition: transform .12s, box-shadow .12s; }
a.db-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,.09)); }
.db-card.dc-warn { border-color: #fecaca; background: linear-gradient(180deg, #fff 0%, #fff7f7 100%); }

/* Danh sách hàng cần nhập */
.low-list { list-style: none; margin: 0; padding: 0; }
.low-list li {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 2px;
    border-bottom: 1px dashed var(--gray-200);
}
.low-list li:last-child { border-bottom: none; }
.lw-name {
    font-size: 13.5px; font-weight: 600; color: var(--gray-800, #1f2937);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lw-qty {
    flex-shrink: 0;
    padding: 3px 10px; border-radius: 999px;
    font-size: 11.5px; font-weight: 800; white-space: nowrap;
}
.lw-qty.low { background: var(--orange-lt); color: var(--orange); }
.lw-qty.out { background: var(--red-lt);    color: var(--red); }
.low-more {
    padding-top: 10px; text-align: center;
    font-size: 12px; color: var(--gray-400);
}

/* Xếp chỗ: hàng cần nhập nằm cạnh hàng bán chạy, hóa đơn gần đây trải hết bề ngang */
.db-low    { grid-column: 2; }
.db-recent { grid-column: 1 / -1; }

@media (max-width: 1100px) {
    .db-low, .db-recent { grid-column: 1; }
}

/* ══════════════════════════════════════════════════════════
   TRANG NHẬP HÀNG
══════════════════════════════════════════════════════════ */
.si-stat {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px;
    margin-bottom: 16px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.05);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.si-stat-ico {
    width: 44px; height: 44px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px; font-size: 17px;
    background: var(--green-lt); color: var(--green);
}
.si-stat > div { display: flex; flex-direction: column; gap: 2px; }
.si-stat span  { font-size: 12px; font-weight: 600; color: var(--gray-500); }
.si-stat b     { font-size: 19px; font-weight: 800; color: var(--gray-900); letter-spacing: -.4px; }
.si-stat small { margin-left: auto; font-size: 12px; color: var(--gray-400); }

.si-code { color: var(--blue); font-weight: 800; letter-spacing: .2px; }

/* ── Dòng hàng trong phiếu nhập ── */
.si-top { grid-template-columns: 1fr 1fr; margin-bottom: 14px; }

.si-list {
    margin-top: 10px;
    max-height: 340px;
    overflow-y: auto;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--rsm);
}
.si-list:empty { display: none; }

.si-row {
    display: grid;
    grid-template-columns: minmax(120px, 1.6fr) 92px 110px 130px 110px 34px;
    align-items: end;
    gap: 10px;
    padding: 11px 12px;
    border-bottom: 1px solid var(--gray-100, #f3f4f6);
}
.si-row:last-child { border-bottom: none; }
.si-row:nth-child(even) { background: var(--gray-50); }

.si-name {
    align-self: center;
    font-size: 13.5px; font-weight: 700; color: var(--gray-900);
    line-height: 1.35;
}
.si-name small {
    display: block;
    font-size: 11px; font-weight: 600; color: var(--gray-400);
    margin-top: 2px;
}

.si-f { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.si-f label { font-size: 10.5px; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: .3px; }
.si-f input,
.si-f select {
    width: 100%;
    padding: 7px 9px;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    font-size: 13.5px; font-weight: 600;
    background: #fff;
    color: var(--gray-900);
}
.si-f input:focus,
.si-f select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-lt); }

.si-line {
    align-self: center;
    text-align: right;
    font-size: 13.5px; font-weight: 800; color: var(--green);
    white-space: nowrap;
}

.si-total { margin-top: 14px; }
.si-total b { color: var(--green); }

/* ── Chi tiết phiếu ── */
.si-meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
    background: var(--gray-50);
    border-radius: var(--rsm);
}
.si-meta > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.si-meta span { font-size: 11px; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: .3px; }
.si-meta b    { font-size: 13.5px; font-weight: 700; color: var(--gray-900); overflow: hidden; text-overflow: ellipsis; }

.si-note {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
    background: var(--orange-lt);
    border: 1px solid #fed7aa;
    border-radius: var(--rsm);
    font-size: 13px; color: #9a3412;
}

@media (max-width: 820px) {
    .si-top  { grid-template-columns: 1fr; }
    .si-meta { grid-template-columns: repeat(2, 1fr); }

    /* Trên điện thoại xếp thành khối: tên trên cùng, 3 ô nhập một hàng */
    .si-row {
        grid-template-columns: 1fr 1fr 1fr 34px;
        grid-template-areas:
            "name  name  name  del"
            "qty   unit  cost  del"
            "line  line  line  del";
        gap: 8px 9px;
    }
    .si-name { grid-area: name; }
    .si-f:nth-of-type(1) { grid-area: qty; }
    .si-f:nth-of-type(2) { grid-area: unit; }
    .si-f:nth-of-type(3) { grid-area: cost; }
    .si-line { grid-area: line; text-align: left; }
    .si-row .dp-del { grid-area: del; align-self: center; }

    .si-stat small { margin-left: 0; }
}

/* Thân modal nhập hàng — pos.css chỉ có .modal-head / .modal-footer */
.si-modal { max-width: 880px; width: calc(100vw - 40px); }
.si-body  { padding: 4px 0 2px; }
.si-label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px; font-weight: 700; color: var(--gray-700, #374151);
}
.si-new { margin-left: auto; }

/* Cột của bảng phiếu nhập */
.tc-stockin table { min-width: 720px; }
.tc-stockin th:nth-child(1), .tc-stockin td:nth-child(1) { width: 158px; white-space: nowrap; }
.tc-stockin th:nth-child(3), .tc-stockin td:nth-child(3) { width: 110px; text-align: center; }
.tc-stockin th:nth-child(4), .tc-stockin td:nth-child(4) { width: 130px; text-align: right; }
.tc-stockin th:nth-child(5), .tc-stockin td:nth-child(5) { width: 150px; }
.tc-stockin th:nth-child(6), .tc-stockin td:nth-child(6) { width: 100px; text-align: center; }

@media (max-width: 640px) {
    .si-modal { width: calc(100vw - 20px); }
    .si-new span { display: none; }
}

/* ══════════════════════════════════════════════════════════
   TRANG "NHIỀU HƠN" — pages/nhieu-hon.php

   Trước đây đây là một bảng trượt lên đè lên trang đang mở. Nay là
   trang riêng nên không còn lớp nền mờ, không còn xếp thứ tự chồng
   lấn với thanh trên và thanh dưới — chỉ còn cách bày nội dung.

   Không bọc trong @media: trang này mở bằng địa chỉ /nhieu-hon nên
   trên máy tính cũng vào được, và vào thì phải đọc được.
══════════════════════════════════════════════════════════ */
.nh-trang { background: var(--bg, #f4f5fb); }
.nh-boc   { max-width: 760px; padding-bottom: 28px; }
/* Thanh dưới là thanh CỐ ĐỊNH, nó đè lên cuối trang. Không chừa chỗ thì
   nút Đăng xuất — thứ nằm cuối cùng — bị che mất một nửa. */
@media (max-width: 900px) {
    .nh-boc { padding-bottom: calc(var(--bn-h) + var(--sab) + 24px); }
}

/* ── Đầu trang: ảnh + tên cửa hàng ── */
.nh-dau {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 4px; padding: 14px 16px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.05);
    border-radius: var(--radius, 14px);
    box-shadow: var(--shadow-sm);
}
.nh-dau-anh {
    width: 52px; height: 52px; flex-shrink: 0;
    border-radius: 14px; object-fit: cover;
    background: var(--blue-lt);
}
.nh-dau-chu { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nh-dau-chu b {
    font-size: 16.5px; font-weight: 800; color: var(--gray-900);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nh-dau-chu span { font-size: 12.5px; color: var(--gray-500); }

/* ── Mỗi nhóm việc là một khung riêng ── */
.nh-nhom {
    margin-top: 12px;
    padding: 12px 10px 10px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.05);
    border-radius: var(--radius, 14px);
    box-shadow: var(--shadow-sm);
}
.nh-nhom h4 {
    margin: 0 4px 8px;
    font-size: 11.5px; font-weight: 800; color: var(--gray-400);
    text-transform: uppercase; letter-spacing: .5px;
}
/* Hai cột: vừa đủ để tên dài như "Nhà cung cấp" không bị bẻ dòng. Màn
   rộng thì lên bốn cột, không thì hai cột kéo dài ngoằng trên máy tính. */
.nh-luoi { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
@media (min-width: 620px) { .nh-luoi { grid-template-columns: repeat(4, 1fr); } }

.nh-o {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 10px;
    border-radius: 12px;
    color: var(--gray-800, #1f2937); text-decoration: none;
    font-size: 14px; font-weight: 600;
}
.nh-o-ico {
    width: 34px; height: 34px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; color: var(--gray-500);
    background: var(--gray-50); border-radius: 10px;
}
.nh-o-ten { min-width: 0; }
.nh-o:hover, .nh-o:active { background: var(--gray-50); }

/* Đăng xuất tách hẳn xuống cuối — nó không phải một trang để mở */
.nh-thoat {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid var(--red-lt); border-radius: 12px;
    color: var(--red); background: var(--red-lt);
    font-size: 14px; font-weight: 700; text-decoration: none;
}
.nh-thoat:hover { background: var(--red); color: #fff; border-color: var(--red); }

/* ══════════════════════════════════════════════════════════
   TỔNG QUAN TRÊN ĐIỆN THOẠI — chặn tràn ngang
   Ô lưới mặc định không co nhỏ hơn nội dung, nên số tiền dài
   đẩy cả trang rộng hơn màn hình. Phải cho phép co lại.
══════════════════════════════════════════════════════════ */
.db-card { min-width: 0; }
.db-card > .dc-body { flex: 1; min-width: 0; }
.dc-body b, .dc-body span, .dc-body small { overflow-wrap: anywhere; }

@media (max-width: 560px) {
    /* Dưới 560px thì 2 cột làm số tiền vỡ dòng xấu — về 1 cột cho dễ đọc */
    .db-cards { grid-template-columns: 1fr; gap: 9px; }
    .db-card  { padding: 12px 14px; }
    .dc-body b { font-size: 17px; }

    .si-stat { padding: 12px 14px; gap: 11px; flex-wrap: wrap; }
    .si-stat-ico { width: 40px; height: 40px; font-size: 15px; }
    .si-stat b { font-size: 17px; }
}

/* Ô lưới `1fr` không co nhỏ hơn nội dung của nó, nên một dòng chữ dài
   trong thẻ nào đó kéo cả lưới rộng ra và làm tràn ngang cả trang.
   `minmax(0, …)` cho phép ô co lại, chữ bên trong tự cắt/xuống dòng. */
.db-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.db-grid > .card { min-width: 0; overflow: hidden; }
.top-list, .pm-legend, .recent-list { min-width: 0; }
.tr-main, .pm-item, .rc-l { min-width: 0; }

@media (max-width: 1100px) {
    .db-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ══════════════════════════════════════════════════════════
   BẢNG ĐỀ NGHỊ GIÁ BÁN (sau khi nhập hàng)
══════════════════════════════════════════════════════════ */
.gia-dan {
    margin: 0 0 16px;
    padding: 11px 14px;
    border-radius: var(--rsm);
    background: var(--blue-lt);
    border: 1px solid #bfdbfe;
    font-size: 13.5px;
    color: #1e3a8a;
    line-height: 1.5;
}

.gia-sp {
    border: 1.5px solid var(--gray-200);
    border-radius: var(--rsm);
    margin-bottom: 12px;
    overflow: hidden;
}
.gia-sp:last-child { margin-bottom: 0; }

.gia-sp-dau {
    padding: 11px 14px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}
.gia-sp-dau b    { font-size: 14.5px; font-weight: 750; color: var(--gray-900); }
.gia-sp-dau span { font-size: 12px; color: var(--gray-500); }

/* Một đơn vị: tick chọn · tên · giá cũ → giá mới */
.gia-dong {
    display: grid;
    grid-template-columns: 22px minmax(56px, auto) 1fr 16px 1fr;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--gray-100, #f3f4f6);
    cursor: pointer;
}
.gia-dong:last-child { border-bottom: none; }
.gia-dong:hover      { background: var(--gray-50); }
.gia-dong.lo         { background: var(--red-lt); }
.gia-dong.lo:hover   { background: #fde0e0; }

.gia-dong input { width: 19px; height: 19px; accent-color: var(--blue); margin: 0; cursor: pointer; }
.gia-dv  { font-size: 13.5px; font-weight: 700; color: var(--gray-700, #374151); }
.gia-cu  { font-size: 14px; color: var(--gray-400); text-decoration: line-through; text-align: right; }
.gia-dong > i { font-size: 11px; color: var(--gray-300, #d1d5db); text-align: center; }
.gia-moi { font-size: 15px; font-weight: 800; color: var(--green); }

.gia-canh {
    grid-column: 2 / -1;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--red);
}

/* Gợi ý dưới ô "Lãi mong muốn" trong form sản phẩm */
.pf-hint {
    display: block;
    margin-top: 5px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--gray-400);
}

@media (max-width: 560px) {
    .gia-dong {
        grid-template-columns: 22px 1fr auto;
        gap: 8px;
    }
    .gia-dv  { grid-column: 2; }
    .gia-cu  { grid-column: 3; text-align: right; }
    .gia-dong > i { display: none; }
    .gia-moi { grid-column: 2 / -1; text-align: right; }
    .gia-canh { grid-column: 2 / -1; text-align: right; }
}

/* Trên điện thoại thanh dưới che mất chân modal — nút "Lưu" nằm khuất
   sau nó. Chừa đúng chiều cao thanh dưới rồi mới canh giữa phần còn lại. */
@media (max-width: 900px) {
    .modal-bg {
        padding: 10px 10px calc(var(--bn-h) + var(--sab) + 10px);
    }
    .modal {
        max-height: calc(100vh - var(--bn-h) - var(--sab) - 20px);
        max-height: calc(100dvh - var(--bn-h) - var(--sab) - 20px);
    }
}

/* Chân modal dính đáy trên điện thoại: nội dung dài thì nút "Lưu" vẫn
   luôn nhìn thấy, không phải cuộn xuống đáy mới bấm được.
   `bottom` âm bằng padding của modal để nút nằm sát mép dưới. */
@media (max-width: 900px) {
    .modal-footer {
        position: sticky;
        bottom: -18px;
        z-index: 2;
        margin-top: 16px;
        padding: 12px 14px calc(12px + var(--sab));
        margin-left: -14px;
        margin-right: -14px;
        background: #fff;
        border-top: 1px solid var(--gray-200);
        box-shadow: 0 -6px 18px rgba(15,23,42,.07);
    }
    .modal-footer .btn { flex: 1; justify-content: center; }

    /* ── Chân hộp XÁC NHẬN THANH TOÁN ──
       Luật ngay trên kéo chân mọi hộp thoại rộng ra hai bên 14px (margin
       âm) để dải nền trắng chạy sát mép hộp. Hộp này tự đặt đệm riêng cho
       cả đầu, thân và chân, nên margin âm ấy chỉ làm chân rộng hơn thân
       đúng 28px — và 28px đó tràn ra ngoài mép hộp, cắt mất nút "Quay lại".

       Trước đây chỉ chữa ở mốc 640px, nên từ 641 đến 900 vẫn tràn: đó là
       cỡ cửa sổ trình duyệt trên máy tính hay dùng nhất, chứ không phải
       cỡ hiếm gặp.

       Xếp lại luôn thành hai hàng: ba nút cộng khoảng cách là 433px, mà
       lòng hộp chỉ 390px — kể cả bỏ margin âm thì vẫn không đủ chỗ. Hai
       nút phụ chia đôi hàng trên, nút chốt trải trọn hàng dưới: vừa không
       tràn, vừa đúng tầm ngón cái, và nhìn là biết nút nào mới là nút bấm.

       Phải viết kèm .pc-modal ở đầu: `.modal-footer .btn { flex: 1 }` ngay
       trên ngang điểm ưu tiên mà nằm trước — viết gọn `.pc-foot .pc-ok`
       thì thua, ba nút lại dính một hàng như cũ. */
    .pc-modal .pc-foot { margin-left: 0; margin-right: 0; }
}

/* ══════════════════════════════════════════════════════════
   TỔNG QUAN — CÂN KÍCH THƯỚC KHUNG
══════════════════════════════════════════════════════════ */

/* 8 thẻ số liệu nay nằm chung MỘT lưới nên hàng nào cũng cao bằng nhau.
   Trước đây tách hai lưới, mỗi lưới tự canh chiều cao nên nhìn lệch. */
.db-cards { grid-auto-rows: 1fr; }
.db-card  { align-items: center; }

/* Khung cùng hàng phải cao bằng nhau. `align-items: start` làm khung
   ngắn (hàng cần nhập) hụt hẳn so với khung dài bên cạnh. */
.db-grid { align-items: stretch; }
.db-grid > .card { display: flex; flex-direction: column; }

/* Trạng thái rỗng nở ra cho đầy khung thay vì dồn lên trên */
.db-grid > .card > .db-empty { flex: 1; justify-content: center; }

/* Danh sách trong khung: dài thì cuộn riêng, không kéo khung cao mãi */
.db-low .low-list,
.db-top .top-list { flex: 1; }

/* ══════════════════════════════════════════════════════════
   TRANG DỮ LIỆU — sao lưu, xuất/nhập file
══════════════════════════════════════════════════════════ */
.dl-trangthai {
    display: flex; align-items: center; gap: 15px;
    padding: 16px 20px;
    margin-bottom: 12px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.05);
    border-left: 4px solid var(--green);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.dl-trangthai.cu   { border-left-color: var(--orange); }
.dl-trangthai.chua { border-left-color: var(--red); }

.dl-tt-ico {
    width: 46px; height: 46px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 13px; font-size: 19px;
    background: var(--green-lt); color: var(--green);
}
.dl-trangthai.cu   .dl-tt-ico { background: var(--orange-lt); color: var(--orange); }
.dl-trangthai.chua .dl-tt-ico { background: var(--red-lt);    color: var(--red); }

.dl-tt-noi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dl-tt-noi b    { font-size: 15px; font-weight: 750; color: var(--gray-900); }
.dl-tt-noi span { font-size: 12.5px; color: var(--gray-500); }

.dl-canh {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 13px 17px;
    margin-bottom: 18px;
    background: var(--orange-lt);
    border: 1px solid #fed7aa;
    border-radius: var(--radius);
    font-size: 13.5px; line-height: 1.55; color: #7c2d12;
}
.dl-canh > i { font-size: 15px; color: var(--orange); padding-top: 2px; }

.dl-luoi {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
    align-items: start;
}

.dl-mota {
    margin: -4px 0 15px;
    font-size: 13.5px; line-height: 1.55; color: var(--gray-500);
}
.dl-ghi { margin-left: auto; font-size: 11.5px; font-weight: 500; color: var(--gray-400); }

/* Từng mục xuất file */
.dl-nut { display: flex; flex-direction: column; gap: 9px; }
.dl-mon {
    display: flex; align-items: center; gap: 13px;
    padding: 13px 15px;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--rsm);
    text-decoration: none;
    transition: border-color .14s, background .14s;
}
.dl-mon:hover { border-color: var(--blue); background: var(--blue-lt); }
.dl-mon > i:first-child {
    width: 36px; height: 36px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px; font-size: 15px;
    background: var(--gray-50); color: var(--gray-500);
}
.dl-mon:hover > i:first-child { background: #fff; color: var(--blue); }
.dl-mon > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dl-mon b     { font-size: 14px; font-weight: 700; color: var(--gray-900); }
.dl-mon span  { font-size: 12px; color: var(--gray-500); }
.dl-mui       { font-size: 13px; color: var(--gray-300, #d1d5db); }
.dl-mon:hover .dl-mui { color: var(--blue); }

/* Khung thả file */
.dl-tha {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 28px 20px;
    border: 2px dashed var(--gray-200);
    border-radius: var(--rsm);
    background: var(--gray-50);
    text-align: center;
    cursor: pointer;
    transition: border-color .14s, background .14s;
}
.dl-tha:hover, .dl-tha.keo { border-color: var(--blue); background: var(--blue-lt); }
.dl-tha.co { border-style: solid; border-color: var(--green); background: var(--green-lt); }
.dl-tha > i    { font-size: 26px; color: var(--gray-400); margin-bottom: 3px; }
.dl-tha.co > i { color: var(--green); }
.dl-tha b      { font-size: 14.5px; font-weight: 700; color: var(--gray-900); word-break: break-all; }
.dl-tha span   { font-size: 12px; color: var(--gray-500); max-width: 44ch; line-height: 1.5; }

/* Kết quả xem trước */
.dl-dang, .dl-loi, .dl-xong {
    display: flex; align-items: center; gap: 10px;
    margin-top: 13px; padding: 13px 15px;
    border-radius: var(--rsm);
    font-size: 13.5px; line-height: 1.5;
}
.dl-dang { background: var(--gray-50);   color: var(--gray-500); }
.dl-loi  { background: var(--red-lt);    color: #991b1b; align-items: flex-start; }
.dl-xong { background: var(--green-lt);  color: #14532d; }
.dl-loi > i  { color: var(--red);   font-size: 15px; padding-top: 2px; }
.dl-xong > i { color: var(--green); font-size: 15px; }

.dl-xem {
    margin-top: 13px;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--rsm);
    overflow: hidden;
}
.dl-xem-so {
    display: grid; grid-template-columns: repeat(3, 1fr);
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}
.dl-xem-so > div {
    padding: 13px 10px; text-align: center;
    border-right: 1px solid var(--gray-200);
    display: flex; flex-direction: column; gap: 2px;
}
.dl-xem-so > div:last-child { border-right: none; }
.dl-xem-so b    { font-size: 21px; font-weight: 800; color: var(--gray-900); }
.dl-xem-so span { font-size: 11.5px; font-weight: 600; color: var(--gray-500); }
.dl-xem-so .xau b { color: var(--orange); }

.dl-vidu { display: flex; flex-wrap: wrap; gap: 6px; padding: 13px 15px; }
.dl-vidu span {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    background: var(--gray-50); border: 1px solid var(--gray-200);
    font-size: 12.5px; font-weight: 600; color: var(--gray-700, #374151);
}
.dl-vidu span.moi  { background: var(--green-lt); border-color: #bbf7d0; color: #14532d; }
.dl-vidu span.them { background: none; border-style: dashed; color: var(--gray-400); }
.dl-vidu i { font-style: normal; font-size: 11px; font-weight: 500; color: var(--gray-400); }

.dl-dslo {
    margin: 0; padding: 0 15px 13px 32px;
    font-size: 12.5px; color: var(--orange); line-height: 1.7;
}
.dl-xem-nut {
    display: flex; gap: 9px; justify-content: flex-end;
    padding: 13px 15px;
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
}

/* Phần hướng dẫn gập lại */
.dl-huong {
    margin-top: 15px;
    border: 1px solid var(--gray-200);
    border-radius: var(--rsm);
    background: var(--gray-50);
    font-size: 13px; line-height: 1.65; color: var(--gray-600, #4b5563);
}
.dl-huong summary {
    padding: 11px 15px;
    font-size: 13px; font-weight: 700; color: var(--gray-700, #374151);
    cursor: pointer;
}
.dl-huong ul, .dl-huong ol { margin: 0; padding: 0 18px 14px 34px; }
.dl-huong li { margin-bottom: 5px; }
.dl-huong p  { margin: 0; padding: 0 15px 14px; }
.dl-huong-rong { margin-top: 18px; background: #fff; }

.dl-canh-nho {
    display: flex; align-items: flex-start; gap: 9px;
    color: #991b1b;
}
.dl-canh-nho > i { color: var(--red); padding-top: 3px; }

/* Cột bảng sao lưu */
.tc-backup table { min-width: 560px; }
.tc-backup td small { display: block; font-size: 11.5px; }
.tc-backup th:nth-child(3), .tc-backup td:nth-child(3) { width: 120px; text-align: right; }
.tc-backup th:nth-child(4), .tc-backup td:nth-child(4) { width: 100px; text-align: center; }

/* Nút xuất/nhập trên thanh công cụ */
.tb-file { gap: 7px; }

@media (max-width: 900px) {
    .dl-luoi { grid-template-columns: minmax(0, 1fr); }
    .dl-trangthai { flex-wrap: wrap; }
    .dl-trangthai .btn { width: 100%; justify-content: center; }
}
@media (max-width: 560px) {
    .tb-file span { display: none; }
    .dl-ghi { display: none; }
}

/* ══════════════════════════════════════════════════════════
   SỔ KHÁCH HÀNG
══════════════════════════════════════════════════════════ */
/* ── Bộ lọc bên trái sổ khách hàng ──
   Thay cho hai thẻ tổng cũ nằm vắt ngang đầu trang: chỗ đó chỉ in ra
   hai con số đọc một lần rồi thôi, còn cột này vừa cho xem số vừa bấm
   vào lọc được. */
.kh-layout {
    display: grid;
    grid-template-columns: 238px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}
/* `min-width: 0` bắt buộc. Ô lưới mặc định không co nhỏ hơn nội dung,
   nên bảng rộng 980px bên trong đẩy cả thẻ ra quá khổ và làm TRANG
   trượt ngang — thay vì bảng tự cuộn gọn trong khung của nó. */
.kh-layout > .card { margin-bottom: 0; min-width: 0; }
.kh-bang-card .table-wrap { max-width: 100%; }

.kh-loc {
    position: sticky;
    top: 74px;
    padding: 14px 14px 16px;
}
.kh-loc-dau {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 12px;
}

/* Trên máy tính đây chỉ là dòng tiêu đề, không bấm được. Nó vẫn là thẻ
   <button> để trên điện thoại biến thành nút gập/mở mà không phải đổi
   HTML hai lần. */
.kh-loc-mo {
    flex: 1;
    display: flex; align-items: center; gap: 8px;
    padding: 0; border: none; background: none;
    font-family: inherit; font-size: 13px; font-weight: 800;
    color: var(--gray-900); text-align: left;
    pointer-events: none;
}
.kh-loc-mo > i:first-child { color: var(--gray-400); font-size: 12px; }
.kh-loc-mo .caret   { display: none; }
.kh-loc-so {
    padding: 1px 7px; border-radius: 999px;
    background: var(--blue); color: #fff;
    font-size: 10.5px; font-weight: 800;
}
.kh-loc-xoa {
    margin-left: auto;
    border: none; background: none;
    color: var(--blue); font-family: inherit;
    font-size: 11.5px; font-weight: 700; cursor: pointer;
    padding: 2px 4px;
}
.kh-loc-xoa:hover { text-decoration: underline; }

.kh-loc-nhom { display: flex; flex-direction: column; gap: 2px; }
.kh-loc-nhom + .kh-loc-nhom { margin-top: 14px; }
.kh-loc-nhom h5 {
    margin-bottom: 6px;
    font-size: 10.5px; font-weight: 700;
    color: var(--gray-400);
    text-transform: uppercase; letter-spacing: .5px;
}

.kh-loc-mot {
    display: flex; align-items: center; gap: 9px;
    width: 100%; padding: 8px 10px;
    border: none; border-radius: 9px;
    background: none; color: var(--gray-600);
    font-family: inherit; font-size: 12.5px; font-weight: 600;
    text-align: left; cursor: pointer;
    transition: background .13s, color .13s;
}
.kh-loc-mot i    { width: 15px; flex-shrink: 0; font-size: 12px; color: var(--gray-400); }
.kh-loc-mot span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kh-loc-mot b {
    flex-shrink: 0;
    min-width: 22px; padding: 1px 6px;
    border-radius: 999px;
    background: var(--gray-100); color: var(--gray-500);
    font-size: 11px; font-weight: 800; text-align: center;
}
.kh-loc-mot:hover { background: var(--gray-50); color: var(--gray-900); }
.kh-loc-mot.active {
    background: var(--blue-lt);
    color: var(--blue);
}
.kh-loc-mot.active i { color: var(--blue); }
.kh-loc-mot.active b { background: var(--blue); color: #fff; }

.kh-loc-sap select { width: 100%; }

.tc-khach table { min-width: 860px; }
.tc-khach th:nth-child(4), .tc-khach td:nth-child(4) { width: 140px; text-align: center; }
.tc-khach th:nth-child(5), .tc-khach td:nth-child(5) { width: 130px; text-align: right; }
.tc-khach th:nth-child(6), .tc-khach td:nth-child(6) { width: 120px; text-align: center; }
.tc-khach td small { display: block; font-size: 11.5px; font-weight: 500; }

.kh-sdt { color: var(--blue); text-decoration: none; font-weight: 600; }
.kh-sdt:hover { text-decoration: underline; }
.kh-no {
    display: inline-block;
    padding: 3px 10px; border-radius: 999px;
    background: var(--red-lt); color: var(--red);
    font-size: 12.5px; font-weight: 800;
}

/* Hồ sơ khách */
.kh-ho {
    padding: 15px 17px;
    margin-bottom: 16px;
    background: var(--gray-50);
    border-radius: var(--rsm);
    display: flex; flex-direction: column; gap: 6px;
}
.kh-ho-ten { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.kh-ho-ten b { font-size: 18px; font-weight: 800; color: var(--gray-900); }
.kh-ho-ten a { font-size: 13.5px; font-weight: 600; color: var(--blue); text-decoration: none; }
.kh-ho-dc, .kh-ho-gc { font-size: 13px; color: var(--gray-500); }
.kh-ho-dc i, .kh-ho-gc i { width: 15px; color: var(--gray-400); }
.kh-ho-no {
    margin-top: 3px; padding: 7px 12px;
    background: var(--red-lt); border-radius: 8px;
    font-size: 13px; color: #991b1b; align-self: flex-start;
}
.kh-ho-no b { font-weight: 800; }

.kh-doi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.kh-doi h4 {
    margin: 0 0 10px;
    font-size: 13px; font-weight: 700; color: var(--gray-500);
    display: flex; align-items: center; gap: 7px;
}
.kh-doi h4 i { color: var(--gray-400); }

.kh-ds { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
.kh-ds li {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 2px;
    border-bottom: 1px dashed var(--gray-200);
}
.kh-ds li:last-child { border-bottom: none; }
.kh-ds li.xong { opacity: .55; }
.kh-ds-t {
    min-width: 0; flex: 1;
    font-size: 13px; font-weight: 600; color: var(--gray-800, #1f2937);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kh-ds-t small { display: block; font-size: 11px; font-weight: 500; color: var(--gray-400); }
.kh-ds b { flex-shrink: 0; font-size: 13.5px; font-weight: 800; color: var(--gray-900); }
.kh-trong { margin: 0; padding: 14px 0; font-size: 13px; color: var(--gray-400); }

/* Nút Dữ liệu ở góc phải thanh trên */
.tb-data.active { background: var(--blue-lt); border-color: var(--blue); color: var(--blue); }

@media (max-width: 1200px) { .tb-data span { display: none; } }
@media (max-width: 700px)  { .kh-doi { grid-template-columns: minmax(0, 1fr); } }

/* Màn hẹp: cột lọc nằm TRÊN bảng và các mục trải ngang thành chip, thay
   vì ép cả bảng xuống còn một gang tay bề rộng.

   Và phải GẬP LẠI mặc định. Để trải sẵn thì trên máy 390px cả bảng lọc
   chiếm trọn màn hình đầu — mở trang ra không thấy nổi một khách nào,
   phải cuộn qua hết mới tới danh sách. Trong khi việc thường làm nhất ở
   trang này là tìm một người, không phải lọc. */
@media (max-width: 1000px) {
    .kh-layout { grid-template-columns: minmax(0, 1fr); }
    .kh-loc { position: static; padding: 12px 14px; }
    .kh-loc-nhom { flex-direction: row; gap: 6px; flex-wrap: wrap; }
    .kh-loc-nhom + .kh-loc-nhom { margin-top: 10px; }
    .kh-loc-nhom h5 { width: 100%; margin-bottom: 2px; }
    .kh-loc-mot {
        width: auto;
        border: 1px solid var(--gray-200);
        border-radius: 999px;
        padding: 7px 12px;
    }
    .kh-loc-mot.active { border-color: var(--blue); }
    .kh-loc-sap select { max-width: 220px; }

    .kh-loc-mo { pointer-events: auto; cursor: pointer; }
    .kh-loc-mo .caret {
        display: inline-block;
        margin-left: auto;
        font-size: 11px; color: var(--gray-400);
        transition: transform .2s;
    }
    .kh-loc.mo .kh-loc-mo .caret { transform: rotate(180deg); }

    .kh-loc-dau  { margin-bottom: 0; }
    .kh-loc-than { display: none; padding-top: 12px; }
    .kh-loc.mo .kh-loc-than { display: block; }

    /* Nút "Bỏ lọc" chỉ có nghĩa khi đang thấy bảng lọc; lúc gập thì con
       số trên nút Bộ lọc đã nói đủ rồi. */
    .kh-loc:not(.mo) .kh-loc-xoa { display: none; }
}

/* ══════════════════════════════════════════════════════════
   Ô CHỌN KHÁCH HÀNG (trang bán hàng + ghi nợ)
══════════════════════════════════════════════════════════ */
.kh-chon { position: relative; }

.kh-o {
    position: relative;
    display: flex; align-items: center; gap: 10px;
    padding: 0 14px;
    height: 46px;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--rsm);
    background: #fff;
    transition: border-color .14s, box-shadow .14s;
}
.kh-o:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-lt); }
.kh-o > i:first-child { font-size: 14px; color: var(--gray-400); flex-shrink: 0; }
.kh-o input {
    flex: 1; min-width: 0;
    border: none; outline: none; background: none;
    font-size: 14.5px; font-weight: 500; color: var(--gray-900);
    padding: 0;
}
.kh-o input::placeholder { color: var(--gray-400); font-weight: 400; }

/* Đã chọn được khách */
.kh-da {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 12px 10px 14px;
    border: 1.5px solid var(--blue);
    border-radius: var(--rsm);
    background: var(--blue-lt);
}
.kh-da[hidden], .kh-o[hidden] { display: none; }

.kh-da-ten { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.kh-da-ten b {
    font-size: 14.5px; font-weight: 750; color: var(--gray-900);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kh-da-ten span {
    font-size: 12px; color: var(--gray-500);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.kh-bo {
    width: 30px; height: 30px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 8px;
    background: rgba(255,255,255,.7); color: var(--gray-500);
    font-size: 14px; cursor: pointer;
    transition: background .14s, color .14s;
}
.kh-bo:hover { background: #fff; color: var(--red); }

/* Cảnh báo nợ trong danh sách gợi ý */
.kh-canh { color: var(--red); font-weight: 800; }

@media (max-width: 640px) {
    .kh-o { height: 44px; }
    .kh-o input { font-size: 16px; }  /* dưới 16px là iPhone tự phóng to trang */
}

/* ══════════════════════════════════════════════════════════
   Ô TÌM KHÁCH — bỏ khung lồng trong khung
   pos.css cho MỌI <input> một viền + bo góc + đổ bóng khi focus.
   Ô tìm khách đã tự vẽ viền ngoài rồi, nên input bên trong vẽ thêm
   một khung nữa — bấm vào là thấy hai lớp lồng nhau. Xoá sạch phần
   trang trí của input, để khung ngoài lo hết.
══════════════════════════════════════════════════════════ */
.kh-o input,
.kh-o input:focus,
.kh-o input:hover {
    height: auto;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    background: none !important;
    padding: 0 !important;
}

/* Nút + ở góc phải trong ô */
.kh-them {
    width: 30px; height: 30px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 8px;
    background: var(--blue-lt); color: var(--blue);
    font-size: 13px; cursor: pointer;
    transition: background .14s, color .14s, transform .1s;
}
.kh-them:hover  { background: var(--blue); color: #fff; }
.kh-them:active { transform: scale(.93); }

/* ══════════════════════════════════════════════════════════
   MODAL KHÁCH HÀNG MỚI
══════════════════════════════════════════════════════════ */
/* Một cột. Kiểu cũ là ảnh 120px một bên, các ô một bên — nhưng dưới
   ảnh là một khoảng trống dài, và ô cuối cùng nằm ngoài lưới nên lệch
   hẳn sang trái so với các ô trên. */
.km-than { display: flex; flex-direction: column; gap: 13px; }
.km-o    { display: flex; flex-direction: column; gap: 13px; min-width: 0; }

.km-anh-hang {
    display: flex; align-items: center; gap: 14px;
    padding-bottom: 13px;
    border-bottom: 1px dashed var(--gray-200);
}
.km-anh-hang .km-anh { width: 76px; aspect-ratio: 1; flex-shrink: 0; border-radius: 12px; }
.km-anh-hang .km-anh-trong i { font-size: 19px; margin: 0; }
.km-anh-chu { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.km-anh-chu b    { font-size: 13.5px; font-weight: 700; color: var(--gray-900); }
.km-anh-chu span { font-size: 12px; color: var(--gray-500); line-height: 1.5; }

.km-doi { display: grid; grid-template-columns: 150px 1fr; gap: 12px; }
.km-doi:nth-of-type(3) { grid-template-columns: 1fr 1fr; }

/* Ô ảnh khách */
.km-anh {
    position: relative;
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    border: 2px dashed var(--gray-200);
    border-radius: 14px;
    background: var(--gray-50);
    cursor: pointer;
    overflow: hidden;
    transition: border-color .14s, background .14s;
}
.km-anh:hover { border-color: var(--blue); background: var(--blue-lt); }
.km-anh.dang  { opacity: .55; pointer-events: none; }

.km-anh img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.km-anh-trong {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    color: var(--gray-400);
}
.km-anh-trong i     { font-size: 22px; }
.km-anh-trong small { font-size: 11.5px; font-weight: 600; }
.km-anh:hover .km-anh-trong { color: var(--blue); }

.km-anh-xoa {
    position: absolute; top: 6px; right: 6px;
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 7px;
    background: rgba(15,23,42,.6); color: #fff;
    font-size: 12px; cursor: pointer;
}
.km-anh-xoa:hover { background: var(--red); }

/* Ảnh khách trong danh sách gợi ý và trong thẻ đã chọn */
.kh-ava {
    width: 30px; height: 30px; flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    background: var(--gray-100, #f3f4f6);
}

@media (max-width: 560px) {
    .km-doi { grid-template-columns: 1fr !important; }
}

/* pos.css chỉ tạo kiểu cho input text/number/search. Ô điện thoại dùng
   type="tel" (để điện thoại bật bàn phím số) nên bị bỏ sót, hiện ra
   trơ trụi giữa các ô khác. Bổ sung cho đủ các kiểu đang dùng. */
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="date"] {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--rsm);
    font-size: 13.5px;
    font-family: inherit;
    color: var(--gray-900);
    background: #fff;
    transition: border-color .18s, box-shadow .18s;
    outline: none;
}
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}

/* Ô MẬT KHẨU chưa từng có kiểu dáng nào — không ở pos.css, cũng không ở
   khối trên. Nó rơi về ô mặc định của trình duyệt: viền đen mảnh lõm
   vào, cao chừng 19px, đứng ngay dưới ô "Tên đăng nhập" là thấy lệch
   hẳn. Sót từ hồi trang đăng nhập chỉ có đúng một ô nên không ai để ý;
   giờ trang Tài khoản có tới bốn ô thì lộ ra.

   Chấm tròn che mật khẩu giãn nhẹ cho dễ đếm ký tự lúc gõ, nhưng chữ
   gợi ý thì để nguyên — giãn cả nó thì đọc rời rạc. */
input[type="password"] { letter-spacing: .1em; }
input[type="password"]::placeholder { letter-spacing: normal; }

/* `hidden` phải luôn thắng. Các rule bên dưới đặt display cho ảnh và nút
   xóa, mà class thì mạnh hơn thuộc tính hidden của trình duyệt — nên khi
   chưa chọn ảnh, ô vẫn vẽ ra một ảnh vỡ kèm nút xóa. */
.km-anh img[hidden],
.km-anh-xoa[hidden],
.km-anh-trong[hidden] { display: none !important; }

/* ── Cột mã khách hàng ── */
.kh-ma {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 6px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
    font-size: 12px;
    font-weight: 700;
    color: var(--gray-600, #4b5563);
    letter-spacing: .3px;
    white-space: nowrap;
}

/* Tên khách kèm ảnh — vẫn nằm trong cột Tên, không thêm cột mới */
.kh-ten { display: flex; align-items: center; gap: 10px; min-width: 0; }
.kh-ten > div { min-width: 0; }

.kh-ava {
    width: 34px; height: 34px; flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    background: var(--gray-100, #f3f4f6);
}
/* Chưa có ảnh thì lấy chữ cái đầu của tên — nhìn vẫn ra hàng lối,
   không để một ô trống lỗ chỗ giữa bảng */
.kh-ava-chu {
    display: flex; align-items: center; justify-content: center;
    background: var(--blue-lt);
    color: var(--blue);
    font-size: 14px; font-weight: 800;
}

/* Bảng khách hàng: 7 cột */
.tc-khach table { min-width: 980px; }
.tc-khach th:nth-child(1), .tc-khach td:nth-child(1) { width: 130px; }
.tc-khach th:nth-child(3), .tc-khach td:nth-child(3) { width: 140px; }
.tc-khach th:nth-child(5), .tc-khach td:nth-child(5) { width: 140px; text-align: center; }
.tc-khach th:nth-child(6), .tc-khach td:nth-child(6) { width: 130px; text-align: right; }
.tc-khach th:nth-child(7), .tc-khach td:nth-child(7) { width: 120px; text-align: center; }

@media (max-width: 900px) {
    /* Xếp khối trên điện thoại: mã nằm cạnh tên cho gọn một hàng */
    .tc-khach td.td-ma { order: -1; }
}

/* ══════════════════════════════════════════════════════════
   BẢNG KHÁCH HÀNG — chia lại bề rộng cột

   Trước đây chỉ cột Tên là không đặt bề rộng, nên nó nuốt hết chỗ
   thừa: Tên 528px trong khi Địa chỉ chỉ 140px và phải xuống dòng.
   Chuyển sang `fixed` rồi chia theo phần trăm, cột nào cần bao nhiêu
   thì được đúng bấy nhiêu, và bề rộng không đổi theo nội dung.
══════════════════════════════════════════════════════════ */
.tc-khach table {
    min-width: 940px;
    table-layout: fixed;
}

.tc-khach th:nth-child(1), .tc-khach td:nth-child(1) { width: 11%; }  /* Mã khách hàng */
.tc-khach th:nth-child(2), .tc-khach td:nth-child(2) { width: 24%; }  /* Tên khách hàng */
.tc-khach th:nth-child(3), .tc-khach td:nth-child(3) { width: 12%; }  /* Số điện thoại */
.tc-khach th:nth-child(4), .tc-khach td:nth-child(4) { width: 21%; }  /* Địa chỉ */
.tc-khach th:nth-child(5), .tc-khach td:nth-child(5) { width: 11%; text-align: center; }
.tc-khach th:nth-child(6), .tc-khach td:nth-child(6) { width: 10%; text-align: right; }
.tc-khach th:nth-child(7), .tc-khach td:nth-child(7) { width: 11%; text-align: center; }

/* Bảng `fixed` không tự nới ra được nữa, nên chữ dài phải cắt bằng dấu …
   thay vì tràn đè sang cột bên cạnh. Rê chuột vào vẫn xem được đủ. */
.tc-khach td:nth-child(3),
.tc-khach td:nth-child(4),
.tc-khach .kh-ten b,
.tc-khach .kh-ten small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tc-khach .kh-ten b,
.tc-khach .kh-ten small { display: block; }

/* Ô số liệu bám sát nhau hơn, đỡ phải đưa mắt đi xa */
.tc-khach th, .tc-khach td { padding-left: 11px; padding-right: 11px; }

/* Tiêu đề ĐƯỢC phép xuống dòng. `nowrap` viết hồi bảng còn chiếm trọn
   bề ngang trang; từ khi thêm cột lọc bên trái, bảng hụt mất 238px nên
   ô "Mã khách hàng" không đủ chỗ cho một dòng — chữ tràn ra đè lên
   tiêu đề kế bên, đọc thành "MÃ KHÁCH HÀNGÊN KHÁCH HÀNG". */
.tc-khach thead th {
    white-space: normal;
    line-height: 1.3;
    vertical-align: bottom;
}

@media (max-width: 900px) {
    /* Trên điện thoại bảng xếp thành khối, bề rộng cột không còn ý nghĩa */
    .tc-khach table { table-layout: auto; }
    .tc-khach td { width: auto !important; }
}

/* ══════════════════════════════════════════════════════════
   HỒ SƠ KHÁCH HÀNG — 3 TAB
   Dùng lại tên lớp .detail-tabs / .detail-tab của trang Đơn hàng
   để hai chỗ nhìn giống nhau; trước đây bộ này chỉ nằm trong
   <style> riêng của history.php nên trang khác không dùng được.
══════════════════════════════════════════════════════════ */
.detail-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--gray-200);
    margin-bottom: 16px;
    overflow-x: auto;
    scrollbar-width: none;
}
.detail-tabs::-webkit-scrollbar { display: none; }

.detail-tab {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 14px;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    background: none;
    font-family: inherit;
    font-size: 13.5px; font-weight: 700;
    color: var(--gray-500);
    white-space: nowrap;
    cursor: pointer;
    transition: color .14s, background .14s;
}
.detail-tab:hover  { color: var(--blue); background: var(--blue-lt); }
.detail-tab.active { color: var(--blue); border-bottom-color: var(--blue); }
.detail-tab i      { font-size: 13px; }

.kh-dem {
    min-width: 19px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--gray-100, #f3f4f6);
    font-size: 11px; font-weight: 800;
    color: var(--gray-600, #4b5563);
}
.detail-tab.active .kh-dem { background: var(--blue); color: #fff; }

.kh-modal   { max-width: 860px; width: calc(100vw - 40px); }
.kh-tab-noi { min-height: 220px; }

/* Bấm cả dòng để mở hồ sơ */
.kh-dong { cursor: pointer; }
.kh-dong:hover { background: var(--blue-lt) !important; }

/* ── Tab 1: Thông tin ── */
.kh-tt { display: grid; grid-template-columns: 116px 1fr; gap: 20px; margin-bottom: 18px; }

.kh-tt-anh {
    aspect-ratio: 1;
    border-radius: 16px;
    overflow: hidden;
    background: var(--blue-lt);
    display: flex; align-items: center; justify-content: center;
}
.kh-tt-anh img { width: 100%; height: 100%; object-fit: cover; }
.kh-tt-chu { font-size: 44px; font-weight: 800; color: var(--blue); }

.kh-tt-bang { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.kh-tt-bang > div {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 12px;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px dashed var(--gray-200);
}
.kh-tt-bang > div:last-child { border-bottom: none; }
.kh-tt-bang span { font-size: 12.5px; font-weight: 600; color: var(--gray-500); }
.kh-tt-bang b    { font-size: 14px; font-weight: 700; color: var(--gray-900); min-width: 0; overflow-wrap: anywhere; }
.kh-tt-bang b.muted { color: var(--gray-400); font-weight: 500; }

.kh-so {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--gray-200);
    border-radius: var(--rsm);
    overflow: hidden;
}
.kh-so > div {
    display: flex; flex-direction: column; gap: 2px;
    padding: 13px 12px;
    text-align: center;
    border-right: 1px solid var(--gray-200);
    background: var(--gray-50);
}
.kh-so > div:last-child { border-right: none; }
.kh-so b     { font-size: 16px; font-weight: 800; color: var(--gray-900); }
.kh-so span  { font-size: 11.5px; font-weight: 600; color: var(--gray-500); }
.kh-so .xau b { color: var(--red); }

.kh-tt-nut { display: flex; justify-content: flex-end; margin-top: 16px; }

/* ── Tab 2: Lịch sử bán/trả hàng ── */
.kh-bang { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 640px; }
.kh-bang th {
    text-align: left;
    padding: 9px 11px;
    background: var(--gray-50);
    border-bottom: 1.5px solid var(--gray-200);
    font-size: 11px; font-weight: 700; letter-spacing: .3px;
    text-transform: uppercase; color: var(--gray-500);
    white-space: nowrap;
}
.kh-bang td { padding: 10px 11px; border-bottom: 1px solid var(--gray-100, #f3f4f6); }
.kh-bang tbody tr:last-child td { border-bottom: none; }
.kh-bang tbody tr:hover { background: var(--gray-50); }
.kh-bang .center { text-align: center; }
.kh-bang .right  { text-align: right; }
.kh-sohd { color: var(--blue); font-weight: 800; white-space: nowrap; }

.kh-xong, .kh-cho {
    display: inline-block;
    padding: 3px 9px; border-radius: 999px;
    font-size: 11.5px; font-weight: 800; white-space: nowrap;
}
.kh-xong { background: var(--green-lt); color: var(--green); }
.kh-cho  { background: var(--orange-lt); color: var(--orange); }

/* KHÔNG dùng flex ở đây. Nội dung là một câu văn có lẫn <b>: để flex thì
   mỗi mẩu chữ và mỗi thẻ <b> thành một ô riêng, câu bị xé thành mấy cột
   đứng cạnh nhau. Cho chữ chảy bình thường, còn biểu tượng treo ra lề
   bằng position: absolute. */
.kh-luu-y {
    position: relative;
    margin: 14px 0 0;
    padding: 10px 13px 10px 34px;
    border-radius: var(--rsm);
    background: var(--gray-50);
    font-size: 12.5px; line-height: 1.55; color: var(--gray-500);
}
.kh-luu-y i { position: absolute; left: 13px; top: 12px; color: var(--gray-400); }

/* ── Tab 3: Nợ cần thu ── */
.kh-no-tong {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 17px;
    margin-bottom: 14px;
    border-radius: var(--rsm);
    background: var(--red-lt);
    border: 1px solid #fecaca;
}
.kh-no-tong > div { display: flex; flex-direction: column; gap: 2px; }
.kh-no-tong span  { font-size: 12px; font-weight: 600; color: #991b1b; }
.kh-no-tong b     { font-size: 21px; font-weight: 800; color: var(--red); }
.kh-no-tong small { font-size: 12px; color: #991b1b; }

.kh-no-ds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.kh-no-ds li {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 14px;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--rsm);
}
.kh-no-ds li.xong { opacity: .6; }
.kh-no-noi { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kh-no-noi b     { font-size: 15px; font-weight: 800; color: var(--gray-900); }
.kh-no-noi small { font-size: 11.5px; color: var(--gray-400); }
.kh-no-noi p     { margin: 3px 0 0; font-size: 13px; color: var(--gray-600, #4b5563); overflow-wrap: anywhere; }

.kh-no-cu { margin-top: 14px; }
.kh-no-cu summary {
    padding: 9px 0;
    font-size: 12.5px; font-weight: 700; color: var(--gray-500);
    cursor: pointer;
}

.kh-sach {
    display: flex; flex-direction: column; align-items: center; gap: 9px;
    padding: 40px 20px;
}
.kh-sach i { font-size: 30px; color: var(--green); }

@media (max-width: 700px) {
    .kh-modal { width: calc(100vw - 20px); }
    .kh-tt    { grid-template-columns: 1fr; gap: 14px; }
    .kh-tt-anh { width: 110px; }
    .kh-tt-bang > div { grid-template-columns: 1fr; gap: 2px; padding: 7px 0; }
    .kh-so { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kh-so > div:nth-child(2) { border-right: none; }
    .kh-so > div:nth-child(-n+2) { border-bottom: 1px solid var(--gray-200); }
    .kh-no-ds li { flex-direction: column; align-items: stretch; }
    .kh-no-ds .btn { width: 100%; justify-content: center; }
    .detail-tab { padding: 10px 11px; font-size: 12.5px; }
}

/* Ô mã trong hồ sơ là con của lưới 2 cột nên bị kéo giãn hết bề ngang.
   Chip mã phải ôm sát nội dung mới ra dáng cái tem. */
.kh-tt-bang b.kh-ma { justify-self: start; }

/* ══════════════════════════════════════════════════════════
   MÀN THANH TOÁN NỢ — TẠO PHIẾU THU
══════════════════════════════════════════════════════════ */

/* Modal hồ sơ rộng hơn: bảng phân bổ có 7 cột, chật là phải kéo ngang
   suốt trong lúc đang đếm tiền với khách. */
.kh-modal { max-width: 1080px; }

.tt-dau {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
    padding: 15px 16px;
    margin-bottom: 15px;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--rsm);
    background: var(--gray-50);
}
.tt-dau .field label { font-size: 12px; }
.tt-dau input, .tt-dau select { background-color: #fff; }   /* KHÔNG dùng shorthand: sẽ xoá mất mũi tên SVG của select */

/* Ô số tiền khách trả là ô quan trọng nhất màn này */
.tt-dau .field:last-child input {
    font-size: 16px;
    font-weight: 800;
    color: var(--green);
    border-color: var(--green);
}
.tt-dau .field:last-child input:focus {
    box-shadow: 0 0 0 3px var(--green-lt);
}

.tt-bang-bao { border: 1.5px solid var(--gray-200); border-radius: var(--rsm); }
.tt-bang { min-width: 820px; }
.tt-bang th:first-child, .tt-bang td:first-child { width: 44px; }
.tt-bang td small { display: block; font-size: 11px; }
.tt-bang input[type="checkbox"] {
    width: 17px; height: 17px; accent-color: var(--blue); cursor: pointer; margin: 0;
}
.tt-bo { opacity: .45; }

/* Ô nhập tiền thu trên từng dòng */
.tt-o {
    width: 100%;
    max-width: 130px;
    height: 34px !important;
    padding: 0 9px !important;
    text-align: right;
    font-size: 13.5px !important;
    font-weight: 700;
    color: var(--green) !important;
}
.tt-o:disabled { background: var(--gray-50) !important; color: var(--gray-400) !important; }

.tt-tong {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-top: 14px;
    border: 1px solid var(--gray-200);
    border-radius: var(--rsm);
    overflow: hidden;
    background: var(--gray-200);
}
.tt-tong > div {
    display: flex; flex-direction: column; gap: 2px;
    padding: 12px 14px;
    background: var(--gray-50);
    text-align: center;
}
.tt-tong span { font-size: 11.5px; font-weight: 600; color: var(--gray-500); }
.tt-tong b    { font-size: 17px; font-weight: 800; color: var(--gray-900); }
.tt-tong b.tot { color: var(--green); }
.tt-tong b.xau { color: var(--orange); }

.tt-nut {
    display: flex; gap: 9px; justify-content: flex-end;
    margin-top: 16px;
}

/* Hai nút trong tab Thông tin nằm cạnh nhau */
.kh-tt-nut { gap: 9px; }
.kh-tt-nut .btn[disabled] { opacity: .45; pointer-events: none; }

@media (max-width: 900px) {
    .tt-dau { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .tt-dau  { grid-template-columns: 1fr; }
    .tt-tong { grid-template-columns: 1fr; }
    .tt-nut  { flex-direction: column-reverse; }
    .tt-nut .btn { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════
   Ô CHỌN VÀ Ô NGÀY GIỜ

   pos.css tạo kiểu cho input text/number/search, sau đó tôi thêm
   tel/email/date. Nhưng `select` thì chưa từng có kiểu nào, và
   `datetime-local` cũng bị bỏ sót — cả hai rơi về giao diện mặc
   định của trình duyệt: viền đen mỏng, chiều cao khác hẳn, đứng
   cạnh các ô khác là thấy lệch ngay.
══════════════════════════════════════════════════════════ */
select,
input[type="datetime-local"],
input[type="time"],
input[type="month"] {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--rsm);
    font-size: 13.5px;
    font-family: inherit;
    color: var(--gray-900);
    background-color: #fff;
    transition: border-color .18s, box-shadow .18s;
    outline: none;
}
select:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus,
input[type="month"]:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}

/* Mũi tên riêng cho select — mũi tên mặc định của Windows to và thô,
   đứng cạnh các ô bo góc mềm thì lạc lõng. Vẽ bằng SVG nhúng thẳng
   để không phải tải thêm tệp nào. */
select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
}

/* Ô ngày giờ: nút lịch của trình duyệt canh cho khớp chiều cao ô */
input[type="datetime-local"],
input[type="date"],
input[type="time"] { padding-right: 8px; }
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    padding: 3px;
    border-radius: 5px;
    cursor: pointer;
    opacity: .55;
}
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
    background: var(--gray-100, #f3f4f6);
    opacity: 1;
}

@media (max-width: 900px) {
    /* Dưới 16px là iPhone tự phóng to cả trang khi bấm vào ô */
    select,
    input[type="datetime-local"],
    input[type="time"],
    input[type="month"] { font-size: 16px; height: 46px; }
}

/* Chọn loại dữ liệu muốn nhập */
.dl-loai { display: flex; gap: 8px; margin-bottom: 14px; }
.dl-loai-nut {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 15px;
    border: 1.5px solid var(--gray-200);
    border-radius: 999px;
    background: #fff;
    font-family: inherit; font-size: 13px; font-weight: 700;
    color: var(--gray-500);
    cursor: pointer;
    transition: border-color .14s, background .14s, color .14s;
}
.dl-loai-nut:hover  { border-color: var(--blue); color: var(--blue); }
.dl-loai-nut.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.dl-huong[hidden] { display: none !important; }

/* ══════════════════════════════════════════════════════════
   THANG CHIỀU CAO CHO Ô ĐIỀU KHIỂN

   Trước đây mỗi chỗ một số: 34, 38, 40, 42, 46, 48px. Đứng riêng
   thì không ai để ý, nhưng xếp cạnh nhau trên cùng một hàng là
   thấy so le ngay. Đo được 4 chỗ lệch thật:

     .toolbar    ô tìm 46  vs  nút 40  vs  nút Tìm 34
     .search-bar ô nhập 40 vs  nút 34

   Từ đây chỉ còn HAI con số: 40px trên máy tính, 46px trên điện
   thoại (ngón tay cần vùng bấm to hơn con trỏ chuột).
══════════════════════════════════════════════════════════ */

/* ── Thanh công cụ: ô tìm cao bằng nút ── */
.toolbar .tb-search input[type="search"] {
    height: 40px;
    border-radius: var(--rsm);   /* trước là 12px, lệch với nút 10px */
}

/* Nút nhỏ đứng chung hàng với nút thường thì phải cao bằng.
   Chỉ ép trong hai thanh này, không đụng .btn-sm ở thanh trên
   hay trong bảng — chỗ đó nhỏ là cố ý. */
.toolbar .btn-sm,
.search-bar .btn,
.search-bar .btn-sm {
    height: 40px;
    padding: 0 16px;
    font-size: 13.5px;
}

/* Ô nhập trong .search-bar cũng về đúng 40 cho chắc */
.search-bar input[type="text"],
.search-bar input[type="search"] { height: 40px; }

/* ── Điện thoại: mọi thứ 46px ── */
@media (max-width: 900px) {
    /* .btn đang min-height 44 trong khi input là 46 — lệch 2px */
    .btn, button.btn, a.btn { min-height: 46px; }

    /* `!important` ở đây là để thắng luật cũ trên đầu file
       (`.toolbar input[type="search"] { height: 48px !important }`).
       Không có nó thì trên điện thoại ô tìm cao 48 còn mấy cái nút cạnh
       nó cao 46 — lệch 2px, đứng riêng không ai thấy nhưng xếp cạnh nhau
       trên một hàng thì nhìn ra ngay. */
    .toolbar .tb-search input[type="search"] { height: 46px !important; }

    .toolbar .btn,
    .toolbar .btn-sm,
    .search-bar .btn,
    .search-bar .btn-sm { height: 46px; }
}

@media (max-width: 640px) {
    /* Trước đây riêng ô tìm là 48, lệch với mọi thứ còn lại */
    .toolbar .tb-search input[type="search"] { height: 46px; }
}

/* ══════════════════════════════════════════════════════════
   CHI TIẾT PHIẾU NỢ — dòng hàng thành bảng
══════════════════════════════════════════════════════════ */
.ct-modal { max-width: 900px; width: calc(100vw - 40px); }

.ct-dau {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
    background: var(--gray-50);
    border-radius: var(--rsm);
}
.ct-dau > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ct-dau span {
    font-size: 11px; font-weight: 700; letter-spacing: .3px;
    text-transform: uppercase; color: var(--gray-400);
}
.ct-dau b {
    font-size: 13.5px; font-weight: 700; color: var(--gray-900);
    overflow-wrap: anywhere;
}
.ct-dau a { color: var(--blue); text-decoration: none; }

.ct-bang { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 660px; }
.ct-bang th {
    text-align: left;
    padding: 9px 11px;
    background: var(--gray-50);
    border-bottom: 1.5px solid var(--gray-200);
    font-size: 11px; font-weight: 700; letter-spacing: .3px;
    text-transform: uppercase; color: var(--gray-500);
    white-space: nowrap;
}
.ct-bang td { padding: 10px 11px; border-bottom: 1px solid var(--gray-100, #f3f4f6); }
.ct-bang tbody tr:last-child td { border-bottom: none; }
.ct-bang tbody tr:hover { background: var(--gray-50); }
.ct-bang .center { text-align: center; }
.ct-bang .right  { text-align: right; }

.ct-chu {
    margin-top: 13px;
    padding: 12px 15px;
    border-radius: var(--rsm);
    background: var(--orange-lt);
    border: 1px solid #fed7aa;
    font-size: 13.5px; line-height: 1.6; color: #7c2d12;
}
.ct-chu-nhan {
    font-size: 11px; font-weight: 700; letter-spacing: .3px;
    text-transform: uppercase; color: var(--orange);
    margin-bottom: 5px;
}

.ct-tong {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-top: 15px;
    border: 1px solid var(--gray-200);
    border-radius: var(--rsm);
    overflow: hidden;
    background: var(--gray-200);
}
.ct-tong > div {
    display: flex; flex-direction: column; gap: 2px;
    padding: 13px 14px;
    background: var(--gray-50);
    text-align: center;
}
.ct-tong span { font-size: 11.5px; font-weight: 600; color: var(--gray-500); }
.ct-tong b    { font-size: 17px; font-weight: 800; color: var(--gray-900); }
.ct-tong b.tot { color: var(--green); }
.ct-tong b.xau { color: var(--red); }

.ct-thu { margin-top: 15px; }
.ct-thu ul { list-style: none; margin: 6px 0 0; padding: 0; }
.ct-thu li {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 2px;
    border-bottom: 1px dashed var(--gray-200);
    font-size: 13px;
}
.ct-thu li:last-child { border-bottom: none; }
.ct-thu li span { color: var(--gray-500); }
.ct-thu li b    { font-weight: 800; color: var(--green); white-space: nowrap; }
.ct-thu .ct-chu-nhan { color: var(--gray-400); }

/* ── Sổ sửa số tiền nợ ──
   Mượn nguyên khung của "Các lần đã thu" — hai khối này đứng cạnh nhau,
   trông khác kiểu là mắt phải học lại cách đọc lần nữa. */
.ct-dc { margin-top: 15px; }
.ct-dc ul { list-style: none; margin: 6px 0 0; padding: 0; }
.ct-dc li {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 2px;
    border-bottom: 1px dashed var(--gray-200);
    font-size: 13px;
}
.ct-dc li:last-child { border-bottom: none; }
.ct-dc li span { color: var(--gray-500); min-width: 0; }
.ct-dc li b { font-weight: 700; white-space: nowrap; color: var(--gray-500); }
/* Số cũ gạch ngang, số mới nổi lên: đọc một cái là biết đã đổi từ đâu
   sang đâu mà không cần chữ "từ"/"thành" chen vào. */
.ct-dc li i { font-style: normal; text-decoration: line-through; }
.ct-dc li u { text-decoration: none; font-weight: 800; }
.ct-dc li u.tot { color: var(--green); }
.ct-dc li u.xau { color: var(--red); }
.ct-dc .ct-chu-nhan { color: var(--gray-400); }

@media (max-width: 700px) {
    .ct-modal { width: calc(100vw - 20px); }
    .ct-dau   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ct-tong  { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   MODAL GHI NỢ — bố cục 2 cột

   Cũ: 7 khối xếp dọc trong một cột 600px, phải cuộn mới thấy nút
   Lưu, và mọi nhãn cách nhau đúng một khoảng nên không phân biệt
   được đâu là hết nhóm này sang nhóm khác.
   Mới: trái là AI nợ, phải là nợ CÁI GÌ, dưới cùng là tiền.
══════════════════════════════════════════════════════════ */
.no-modal { max-width: 940px; width: calc(100vw - 40px); }

/* Một cột. Hai cột bắt mắt phải nhảy trái phải, mà thứ tự làm việc
   vốn là dọc: chọn khách → chọn hàng → xem tiền. */
.no-than {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.no-khoi {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 15px 16px;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--rsm);
    background: var(--gray-50);
}
.no-khoi-dau { display: flex; align-items: center; gap: 9px; }
.no-khoi-dau h4 {
    margin: 0;
    font-size: 14px; font-weight: 750; color: var(--gray-900);
}
.no-so {
    width: 22px; height: 22px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 7px;
    background: var(--blue); color: #fff;
    font-size: 11.5px; font-weight: 800;
}

/* Ô bên trong khối phải là nền trắng để nổi trên nền xám của khối */
.no-khoi input[type="text"],
.no-khoi textarea,
.no-khoi .kh-o,
.no-khoi .dp-search input { background: #fff; }

.no-doi { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.no-doi[hidden] { display: none; }

.no-mach {
    display: flex; align-items: flex-start; gap: 8px;
    margin: 0;
    font-size: 12px; line-height: 1.55; color: var(--gray-500);
}
.no-mach i { color: var(--gray-400); padding-top: 2px; flex-shrink: 0; }

/* Món ghi tay gập lại — phần lớn lần ghi nợ không cần tới */
.no-tay {
    border: 1.5px dashed var(--gray-200);
    border-radius: var(--rsm);
    background: #fff;
}
.no-tay summary {
    padding: 10px 13px;
    font-size: 12.5px; font-weight: 700; color: var(--gray-600, #4b5563);
    cursor: pointer;
}
.no-tay[open] summary { border-bottom: 1px solid var(--gray-100, #f3f4f6); }
.no-tay textarea {
    width: 100%;
    min-height: 84px;
    margin: 11px 13px 0;
    width: calc(100% - 26px);
    padding: 10px 12px;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    font-family: inherit; font-size: 13.5px;
    resize: vertical;
    outline: none;
}
.no-tay textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-lt); }
.no-tay .field { padding: 11px 13px 13px; }

/* ── Khối tiền: nhìn là hiểu cộng ra sao ── */
/* Modal một cột nên khối tiền cũng xếp dọc: hai dòng cộng vào,
   rồi dòng tổng. Xếp ngang ở bề rộng này là vỡ dòng lung tung. */
.no-tien {
    margin-top: 16px;
    padding: 6px 16px 14px;
    border: 1.5px solid var(--blue);
    border-radius: var(--rsm);
    background: var(--blue-lt);
}
.no-tien-cong { display: flex; flex-direction: column; }
.no-tien-cong > div {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(37,99,235,.22);
}
.no-tien-cong span { font-size: 12.5px; font-weight: 600; color: var(--gray-600, #4b5563); }
.no-tien-cong b {
    font-size: 15px; font-weight: 800; color: var(--gray-900);
    font-variant-numeric: tabular-nums;
}
/* Dấu + và = chỉ để trang trí, ở bố cục dọc thì thừa */
.no-tien-cong > i { display: none; }

.no-tien-tong {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding-top: 12px;
}
.no-tien-tong-nhan {
    font-size: 14px; font-weight: 750; color: var(--gray-900);
    white-space: nowrap;
}
/* Tổng nay là con số hiện ra, không còn là ô nhập — cho to và đậm hơn
   hai dòng cộng ở trên để mắt bắt được ngay đâu là số cuối cùng. */
#noTienTong {
    font-size: 22px;
    font-weight: 800;
    color: var(--blue);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.no-mach-tong { margin-top: 8px; justify-content: flex-end; }

@media (max-width: 820px) {
    .no-modal { width: calc(100vw - 20px); }
    .no-than  { grid-template-columns: minmax(0, 1fr); }
}

/* Ô ghi tay hiện sẵn, không gập nữa */
.no-tay { padding: 12px 13px 4px; }
.no-tay-nhan {
    margin-bottom: 9px;
    font-size: 12.5px; font-weight: 700; color: var(--gray-600, #4b5563);
}
.no-tay textarea { margin: 0 0 11px; width: 100%; min-height: 76px; }
.no-tay .field { padding: 0 0 12px; }

/* Modal một cột thì không cần rộng nữa */
.no-modal { max-width: 640px; }

/* ══ Modal ghi nợ trên điện thoại ══
   Bốn chỗ vỡ ở bề ngang 360–430px:
   • hàng "Tổng tiền nợ" xếp ngang — nhãn không cho xuống dòng cộng ô
     nhập 200px là rộng hơn lòng modal, chữ bị bóp và ô lệch ra mép;
   • ô đếm số lượng: luật chặn iOS phóng to ở đầu file ép MỌI input cao
     46px trên mobile, mà hai nút −/+ vẫn 32px nên trong cùng một khung
     viền có ba mảnh cao thấp khác nhau;
   • nút xóa dòng hàng 30×32 — dưới tầm chạm 40px của ngón tay;
   • gợi ý khách/hàng chưa cắt tên dài nên đẩy giá tràn khỏi khung.
   Viết kèm .no-modal để không đụng .dp-* bên trang Bán hàng, Nhập hàng. */
@media (max-width: 640px) {
    /* Khối viền bớt đệm — modal đã chỉ còn 14px lề mỗi bên */
    .no-modal .no-khoi { padding: 12px; gap: 10px; }
    .no-modal .no-than { gap: 11px; }
    .no-modal .no-tay  { padding: 11px 11px 2px; }
    .no-modal .dp-wrap { margin-bottom: 0; }

    /* Tên dài phải cắt, không được đẩy số điện thoại/giá ra ngoài */
    .no-modal .dp-opt   { gap: 8px; padding: 11px 12px; }
    .no-modal .dp-opt-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .no-modal .dp-opt-p { font-size: 12px; color: var(--gray-500); white-space: nowrap; }

    /* Ba mảnh của ô đếm cao bằng nhau và đủ tầm chạm */
    .no-modal .dp-row        { gap: 8px; padding: 10px; }
    .no-modal .dp-qty button { width: 38px; height: 42px; font-size: 18px; }
    .no-modal .dp-qty input  { width: 46px; height: 42px; font-size: 15px; }
    .no-modal .dp-del        { width: 42px; height: 42px; font-size: 14px; }

    /* Trước phải xếp dọc vì ô nhập tổng chiếm hết bề ngang. Nay tổng chỉ
       còn là con số nên nhãn bên trái, số bên phải vẫn vừa một dòng. */
    .no-tien { padding: 4px 13px 13px; }
    .no-tien-tong-nhan { white-space: normal; }
    #noTienTong { font-size: 20px; }

    .no-mach      { font-size: 11.5px; }
    .no-mach-tong { justify-content: flex-start; }
}

/* ══════════════════════════════════════════════════════════
   TAB "NỢ CẦN THU"
══════════════════════════════════════════════════════════ */
.nt-tai { padding: 30px; text-align: center; color: var(--gray-400); font-size: 13.5px; }

.nt-dau {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    padding: 15px 18px;
    margin-bottom: 14px;
    border-radius: var(--rsm);
    background: var(--red-lt);
    border: 1px solid #fecaca;
}
.nt-dau-chinh { display: flex; flex-direction: column; gap: 2px; }
.nt-dau-chinh span { font-size: 12px; font-weight: 600; color: #991b1b; }
.nt-dau-chinh b    { font-size: 23px; font-weight: 800; color: var(--red); letter-spacing: -.4px; }

.nt-dau-phu { display: flex; gap: 20px; margin-left: auto; }
.nt-dau-phu > div { display: flex; flex-direction: column; gap: 2px; text-align: right; }
.nt-dau-phu span { font-size: 11.5px; font-weight: 600; color: #991b1b; }
.nt-dau-phu b    { font-size: 15px; font-weight: 800; color: var(--gray-900); }

.nt-bang { min-width: 720px; }
.nt-bang td small { display: block; font-size: 11px; font-weight: 500; }
.nt-noi b { font-size: 13px; font-weight: 700; }

/* Nợ càng lâu càng phải đập vào mắt */
.nt-ngay {
    display: inline-block;
    margin-top: 2px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--gray-100, #f3f4f6);
    color: var(--gray-500);
    font-size: 10.5px !important; font-weight: 700 !important;
}
.nt-ngay.hoi-lau { background: var(--orange-lt); color: var(--orange); }
.nt-ngay.lau     { background: var(--red-lt);    color: var(--red); }

.nt-datra { color: var(--green); font-weight: 700; }
.nt-con   { color: var(--red); font-size: 14px; }

/* ══════════════════════════════════════════════════════════
   BẢNG CÔNG NỢ KIỂU SỔ SÁCH
   Chủ tiệm quen nhìn bảng tính, nên bảng này kẻ ô rõ ràng, cột số thẳng
   hàng và có dòng TỔNG CỘNG ở chân. Bấm một dòng thì xổ ra các món của
   khoản đó ngay bên dưới.
══════════════════════════════════════════════════════════ */

/* Số phải thẳng cột thì mới cộng nhẩm được — font mặc định cho chữ số
   rộng hẹp khác nhau, hàng nghìn lệch nhau trông như sai. */
.nt-so td, .nt-so th { font-variant-numeric: tabular-nums; }

.nt-so td { border-bottom: 1px solid var(--gray-200, #e5e7eb); }
/* Dòng cuối bỏ viền dưới: ngay dưới nó đã là vạch của dòng TỔNG CỘNG,
   để cả hai thì thành hai vạch sát nhau, nhìn như bảng lỗi. */
.nt-so tbody tr:last-child td { border-bottom: none; }

/* Cuộn ngang mà đầu bảng vẫn dính lại: bảng dài mấy chục khoản thì cuộn
   xuống giữa chừng là quên mất cột nào ra cột nào. */
.nt-cuon { max-height: 62vh; overflow: auto; }
.nt-cuon .nt-so thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--gray-50, #f9fafb);
    box-shadow: inset 0 -1px 0 var(--gray-200, #e5e7eb);
}

.nt-dong td { vertical-align: top; }
.nt-dong:nth-child(odd) td { background: rgba(0, 0, 0, .015); }
.nt-dong:hover td { background: var(--blue-lt); }

.nt-luc      { white-space: nowrap; }
.nt-gio      { color: var(--gray-500); }
.nt-cu {
    display: inline-block; margin-left: 6px;
    padding: 1px 7px; border-radius: 999px;
    background: var(--red-lt); color: var(--red);
    font-size: 10.5px; font-weight: 700;
}
.no-ma-chu { color: var(--blue); font-weight: 800; }

/* ── Ô "Các món": mỗi món một hàng, ngay trong ô ──
   Dùng lưới bốn cột chứ không phải bảng lồng bảng: bảng con có bộ chiều
   rộng riêng nên cột của nó không bao giờ thẳng với cột bảng cha, nhìn
   tưởng bảng vỡ. Lưới thì các món tự thẳng hàng với nhau. */
/* Cột Nội dung: mỗi món một dòng, chữ nhỏ và mờ hơn vì đây chỉ là phần
   liệt kê cho dễ nhận ra khoản nào — số tiền đã có ba cột riêng, chi tiết
   đầy đủ thì bấm mã khoản nợ. */
.nt-noi-chu {
    display: block;
    max-width: 260px;
    white-space: pre-line;
    font-size: 12px; line-height: 1.5;
    color: var(--gray-600, #4b5563);
    overflow-wrap: anywhere;
}

/* ── Dòng tổng cộng ──
   MỘT vạch đậm. Không dùng `double`: kiểu đó vẽ ra đúng hai vạch nhỏ,
   cộng thêm viền dưới của dòng cuối bảng là ba vạch chồng nhau. */
.nt-tong td {
    padding: 12px 11px !important;
    border-top: 2px solid var(--gray-400, #9ca3af);
    border-bottom: none !important;
    background: var(--gray-50, #f9fafb) !important;
    font-size: 14px; font-weight: 800; color: var(--gray-900);
    letter-spacing: .2px;
}
.nt-tong td b { font-size: 16px; color: var(--red); }
.nt-cuon .nt-so tfoot td { position: sticky; bottom: 0; z-index: 2; }

@media (max-width: 700px) {
    .nt-dau-phu { margin-left: 0; width: 100%; justify-content: space-between; }
    .nt-dau-phu > div { text-align: left; }
    .nt-dau .btn { width: 100%; justify-content: center; }

    /* Trên điện thoại bảng công nợ rộng 720px phải cuộn ngang, mà cột
       CÒN LẠI — cột duy nhất người bán thật sự cần nhìn — lại nằm tận
       cùng bên phải, khuất hẳn. Nên bỏ mấy cột phụ đi cho vừa màn hình;
       ai cần đủ số thì bấm vào dòng, phần xổ ra có hết.
       Chỉ nhắm .nt-bang, đừng đụng bảng lịch sử tuy cũng có .nt-so. */
    /* Bảng công nợ trên điện thoại xử lý ở khối @media 760px phía dưới —
       khối đó vốn đã sở hữu .nt-bang và dùng !important, để hai nơi cùng
       chỉnh một bảng thì sửa chỗ này lại bị chỗ kia đè, mất công dò. */
}

/* ══════════════════════════════════════════════════════════
   TỔNG QUAN — so với kỳ trước

   Kiểu của trang Tổng quan nằm ở assets/css/tongquan.css, kể cả ô
   chọn khoảng thời gian. Ở đây chỉ còn mũi tên tăng/giảm, vì nó
   cũng được dùng ở vài trang khác.
══════════════════════════════════════════════════════════ */
/* Mũi tên tăng/giảm so với kỳ trước. Kỳ trước bằng 0 thì không
   có gì để so — in "+100%" ở đó chỉ là con số bịa, nên để chữ mờ. */
.dc-chenh {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 2px;
    font-size: 11.5px !important; font-weight: 700;
    white-space: nowrap;
}
.dc-chenh i        { font-size: 10.5px; }
.dc-chenh.len      { color: var(--green); }
.dc-chenh.xuong    { color: var(--red); }
.dc-chenh.ngang    { color: var(--gray-400); }
.dc-chenh.trong    { color: var(--gray-300, #d1d5db); font-weight: 500; }

/* Bốn thẻ nữa nên chữ phải bớt to, không thì tràn ô */
.db-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.db-cards + .db-cards { margin-top: -4px; }

/* Khách mua nhiều nhất nằm cạnh Hóa đơn gần đây */
.db-khach  { grid-column: 2; }
.db-recent { grid-column: 1; }
.db-khach .low-list { flex: 1; }
.lw-tien {
    flex-shrink: 0;
    font-size: 13px; font-weight: 800; color: var(--blue-h);
    white-space: nowrap;
}
.lw-name .muted { font-weight: 500; font-size: 11.5px; margin-left: 6px; }

/* Khoảng 30 ngày thì cột sát nhau, để nhãn ngày đứng thưa ra cho
   đọc được thay vì chồng lên nhau thành một vệt đen. */
.bar-wrap { gap: 4px; }
.bar-col:nth-child(even) .bar-lbl { opacity: .45; }

@media (max-width: 1100px) {
    .db-khach, .db-recent { grid-column: 1; }
    .db-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .dc-chenh   { font-size: 10.5px !important; }
    .bar-wrap   { gap: 2px; }
}

/* ══════════════════════════════════════════════════════════
   TRANG TÀI KHOẢN

   Tên người dùng ở thanh trên giờ là một liên kết vào đây, nên
   phải trông bấm được — trước đó nó chỉ là chữ xám nằm im.
══════════════════════════════════════════════════════════ */
a.user-badge {
    padding: 6px 11px;
    border-radius: 999px;
    text-decoration: none;
    transition: background .14s, color .14s;
}
a.user-badge:hover  { background: var(--gray-100); color: var(--gray-900); }
a.user-badge.active { background: var(--blue-lt);  color: var(--blue); }

/* Ô "Tài khoản của tôi" */
.tk-toi {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 14px 16px;
    background: var(--gray-50);
    border-radius: var(--rsm);
}
.tk-toi-ten { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.tk-toi-ten b     { display: block; font-size: 15px; font-weight: 800; color: var(--gray-900); }
.tk-toi-ten small { display: block; font-size: 12.5px; color: var(--gray-500); margin-top: 2px; }
.tk-toi .btn { flex-shrink: 0; }

.tk-chu {
    width: 42px; height: 42px; flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), var(--blue-h));
    color: #fff;
    font-size: 17px; font-weight: 800; text-transform: uppercase;
    display: flex; align-items: center; justify-content: center;
}

/* Lời nhắc về ghi nhớ đăng nhập */
.tk-nhac {
    display: flex; align-items: center; gap: 13px; flex-wrap: wrap;
    margin-top: 12px; padding: 13px 16px;
    background: var(--blue-lt);
    border: 1px solid var(--blue-bd);
    border-radius: var(--rsm);
}
.tk-nhac > i { font-size: 18px; color: var(--blue); flex-shrink: 0; }
.tk-nhac > div { flex: 1; min-width: 220px; }
.tk-nhac b    { display: block; font-size: 13.5px; font-weight: 700; color: var(--gray-900); }
.tk-nhac span { display: block; font-size: 12.5px; color: var(--gray-600); line-height: 1.55; margin-top: 2px; }
.tk-nhac .btn { flex-shrink: 0; background: #fff; }

/* ── Bảng "người bán làm được gì" ──
   Hai cột đối nhau: bên trái làm được, bên phải không. Xếp trên dưới thì
   phải đọc hết mới so được, xếp cạnh nhau thì liếc một cái là thấy ranh
   giới nằm ở đâu. */
.tk-quyen {
    margin-top: 16px; padding-top: 15px;
    border-top: 1px solid var(--gray-100);
}
.tk-quyen h4 {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 12px; font-size: 13.5px; font-weight: 700; color: var(--gray-700);
}
.tk-quyen h4 i { color: var(--blue); }
.tk-quyen-hai {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.tk-quyen-cot {
    padding: 13px 15px; border-radius: var(--rsm);
    border: 1px solid var(--gray-200); background: var(--gray-50);
}
.tk-quyen-cot > b {
    display: block; margin-bottom: 7px;
    font-size: 11.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .3px;
}
.tk-quyen-cot ul { list-style: none; margin: 0; padding: 0; }
.tk-quyen-cot li {
    position: relative; padding-left: 20px; margin-bottom: 5px;
    font-size: 12.5px; line-height: 1.5; color: var(--gray-700);
}
.tk-quyen-cot li:last-child { margin-bottom: 0; }
.tk-quyen-cot li::before {
    position: absolute; left: 0; top: 0;
    font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px;
}
.tk-quyen-cot.duoc   { background: var(--green-lt); border-color: #bfe6cd; }
.tk-quyen-cot.duoc > b     { color: var(--green); }
.tk-quyen-cot.duoc li::before { content: "\f00c"; color: var(--green); }
.tk-quyen-cot.khong  { background: var(--red-lt); border-color: #f5c9c9; }
.tk-quyen-cot.khong > b    { color: var(--red); }
.tk-quyen-cot.khong li::before { content: "\f00d"; color: var(--red); }
.tk-quyen-ghi {
    display: flex; align-items: flex-start; gap: 8px;
    margin: 12px 0 0;
    font-size: 12.5px; line-height: 1.55; color: var(--gray-600);
}
.tk-quyen-ghi i { color: var(--gray-400); margin-top: 3px; flex-shrink: 0; }

@media (max-width: 640px) {
    .tk-quyen-hai { grid-template-columns: minmax(0, 1fr); }
}

/* Bảng người dùng */
.tc-tk table { min-width: 760px; }
.tc-tk th:nth-child(3), .tc-tk td:nth-child(3) { width: 120px; }
.tc-tk th:nth-child(4), .tc-tk td:nth-child(4) { width: 120px; }
.tc-tk th:nth-child(5), .tc-tk td:nth-child(5) { width: 170px; }
.tc-tk th:nth-child(6), .tc-tk td:nth-child(6) { width: 100px; }

.tk-o { display: flex; align-items: center; gap: 11px; min-width: 0; }
.tk-o .tk-chu { width: 34px; height: 34px; font-size: 14px; background: var(--gray-400); }
.tk-o .tk-chu.chu { background: linear-gradient(135deg, var(--blue), var(--blue-h)); }
.tk-o b { display: block; font-size: 14px; font-weight: 700; }
.tk-o small { display: block; font-size: 11.5px; margin-top: 1px; }
.tk-laban { color: var(--blue); font-weight: 700; }

.tk-user {
    font-family: 'Courier New', monospace;
    font-size: 12.5px;
    background: var(--gray-100); color: var(--gray-700);
    padding: 3px 9px; border-radius: 6px;
}
.tk-vai {
    display: inline-block;
    padding: 3px 10px; border-radius: 999px;
    font-size: 11.5px; font-weight: 700;
}
.tk-vai.owner { background: var(--blue-lt);  color: var(--blue); }
.tk-vai.staff { background: var(--gray-100); color: var(--gray-600); }

.tk-than { display: flex; flex-direction: column; gap: 13px; }
.tk-doi  { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tk-luuy {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 11px 13px; margin-top: 2px;
    background: var(--gray-50); border-radius: var(--rsm);
    font-size: 12.5px; color: var(--gray-600); line-height: 1.55;
}
.tk-luuy i { color: var(--gray-400); margin-top: 2px; flex-shrink: 0; }

@media (max-width: 640px) {
    .tk-toi, .tk-nhac { flex-direction: column; align-items: stretch; }
    .tk-toi .btn, .tk-nhac .btn { width: 100%; justify-content: center; }
    .tk-doi { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    /* Người dùng | tên đăng nhập, quyền | trạng thái, ngày | nút */
    .tc-tk tbody tr { grid-template-areas: "ng user" "vai tt" "ngay act"; }
    .tc-tk td:nth-child(1) { grid-area: ng; }
    .tc-tk td:nth-child(2) { grid-area: user; justify-self: end; }
    .tc-tk td:nth-child(3) { grid-area: vai; }
    .tc-tk td:nth-child(4) { grid-area: tt;  justify-self: end; }
    .tc-tk td:nth-child(5) { grid-area: ngay; font-size: 11.5px !important; color: var(--gray-400); }
    .tc-tk td:nth-child(6) { grid-area: act; }
}

/* ══════════════════════════════════════════════════════════
   BẢNG NẰM TRONG MODAL — BỐ CỤC ĐIỆN THOẠI

   Bốn bảng này bị bỏ sót suốt: chúng nằm TRONG modal chứ không
   trong .table-cols của trang, nên không dính luật mobile nào.
   Trên máy 390px, modal rộng chừng 370px mà bảng đặt min-width
   640–820px, thành ra phải kéo ngang mới đọc hết một dòng —
   trong khi cả modal thì cuộn dọc. Hai chiều cuộn lồng nhau,
   không ai dùng nổi.

   Cách chữa giống hệt bảng ở trang: giữ nguyên bảng cho máy
   tính, còn trên điện thoại thì mỗi dòng thành một thẻ, tiêu đề
   cột chuyển thành nhãn nhỏ đứng trước giá trị.
══════════════════════════════════════════════════════════ */
@media (max-width: 760px) {

    /* Chỉ .ls-bang và .ct-bang mới đổi sang dạng thẻ. KHÔNG dùng
       `.kh-bang` trần ở đây: cả .nt-bang lẫn .tt-bang đều mang thêm
       lớp .kh-bang, gọi trần là kéo luôn hai bảng đó vào display:block
       trong khi chúng vẫn cần là bảng thật. */
    .ls-bang, .nt-bang, .tt-bang, .ct-bang { min-width: 0 !important; }
    .table-wrap:has(.ls-bang),
    .table-wrap:has(.ct-bang) { overflow-x: visible; }

    .ls-bang, .ct-bang { display: block; }
    .ls-bang thead, .ct-bang thead { display: none; }
    .ls-bang tbody, .ct-bang tbody { display: block; }

    .ls-bang tbody tr, .ct-bang tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 5px 10px;
        padding: 11px 12px;
        margin-bottom: 8px;
        border: 1px solid var(--gray-200);
        border-radius: 11px;
        background: #fff;
    }
    .ls-bang tbody tr:last-child, .ct-bang tbody tr:last-child { margin-bottom: 0; }

    .ls-bang tbody td, .ct-bang tbody td {
        display: block;
        padding: 0 !important;
        border: none !important;
        font-size: 13px !important;
        text-align: left !important;
        white-space: normal !important;
    }

    /* ── Lịch sử mua hàng: SốHĐ | Tổng tiền / Ngày | Tình trạng ── */
    .ls-bang tbody tr { grid-template-areas: "hd tien" "ngay tt" "mon pay"; }
    .ls-bang td:nth-child(1) { grid-area: hd; }
    .ls-bang td:nth-child(5) { grid-area: tien; justify-self: end; font-size: 14.5px !important; }
    .ls-bang td:nth-child(2) { grid-area: ngay;
        font-size: 11.5px !important; color: var(--gray-500); }
    .ls-bang td:nth-child(6) { grid-area: tt; justify-self: end; }
    .ls-bang td:nth-child(3) { grid-area: mon;
        font-size: 11.5px !important; color: var(--gray-400); }
    .ls-bang td:nth-child(4) { grid-area: pay; justify-self: end;
        font-size: 11.5px !important; color: var(--gray-400); }

    /* Bỏ tiêu đề cột rồi thì "3" đứng trơ chẳng biết là gì */
    .ls-bang td:nth-child(3)::after { content: ' món'; }

    /* ── Chi tiết phiếu nợ: Tên | Thành tiền / SL × đơn giá ── */
    .ct-bang tbody tr { grid-template-areas: "ten tien" "sl sl"; }
    .ct-bang td:nth-child(1) { display: none; }          /* số thứ tự, thừa */
    .ct-bang td:nth-child(2) { grid-area: ten; font-weight: 700; }
    .ct-bang td:nth-child(6) { grid-area: tien; justify-self: end; font-weight: 700; }
    .ct-bang td:nth-child(3),
    .ct-bang td:nth-child(4),
    .ct-bang td:nth-child(5) {
        grid-area: sl;
        display: inline !important;
        font-size: 11.5px !important; color: var(--gray-500);
    }
    .ct-bang td:nth-child(4)::before { content: ' · '; }
    .ct-bang td:nth-child(5)::before { content: ' × '; }
}

/* ── Nợ cần thu & Phân bổ thanh toán ──
   Hai bảng này có nhiều số phải so với nhau (tổng / đã trả / còn lại,
   và ở bảng phân bổ còn có ô nhập tiền), xếp thành thẻ thì mất chỗ dựa
   để so. Giữ nguyên dạng bảng nhưng bỏ bớt cột phụ và cho cuộn ngang
   gọn trong khung, đừng để nó đẩy rộng cả modal. */
@media (max-width: 760px) {
    /* Bảng công nợ nay 7 cột: Khoản nợ · Ngày · Nội dung · Số món ·
       Giá trị · Đã trả · Còn lại.
       Điện thoại giữ Khoản nợ, Ngày, Nội dung, Còn lại — bỏ Số món, Giá
       trị, Đã trả. Cần đủ số thì bấm mã, modal chi tiết phiếu nợ có hết.
       Bỏ luôn min-width 430px cũ: ép 430px thì trên máy 390px bảng vẫn
       tràn, mà CÒN LẠI nằm cuối nên chính nó là cột bị đẩy khỏi màn hình.

       Phải nhắm .nt-dong (dòng khoản nợ) chứ không phải mọi td: dòng
       TỔNG CỘNG có ô đầu gộp 3 cột nên thứ tự lệch, dùng chung một luật
       thì cột CÒN LẠI của dòng tổng bị ẩn mất. */
    .nt-bang { min-width: 0 !important; }
    .nt-bang thead th:nth-child(4),
    .nt-bang thead th:nth-child(5),
    .nt-bang thead th:nth-child(6),
    .nt-bang .nt-dong td:nth-child(4),
    .nt-bang .nt-dong td:nth-child(5),
    .nt-bang .nt-dong td:nth-child(6) { display: none !important; }
    .nt-bang tfoot .nt-tong td:nth-child(2),
    .nt-bang tfoot .nt-tong td:nth-child(3),
    .nt-bang tfoot .nt-tong td:nth-child(4) { display: none !important; }

    .nt-bang th, .nt-bang td { padding: 9px 6px !important; font-size: 12.5px !important; }
    .nt-bang thead th { white-space: normal; }
    .nt-noi-chu { max-width: none; font-size: 11.5px; }
    /* Màn hẹp: cho giờ xuống dòng dưới ngày thay vì kéo rộng cột. */
    .nt-luc { white-space: normal; }
    .nt-gio { display: block; }

    .tt-bang { min-width: 480px !important; }
    .tt-bang th:nth-child(3), .tt-bang td:nth-child(3),   /* thời gian */
    .tt-bang th:nth-child(5), .tt-bang td:nth-child(5) {  /* đã thu   */
        display: none;
    }
    .tt-bang th, .tt-bang td { padding: 9px 6px !important; font-size: 12.5px !important; }
    .tt-bang input[type="text"] { min-width: 84px; height: 38px; font-size: 13px; padding: 0 8px; }

    /* Khung cuộn phải bị chặn bề ngang, nếu không bảng bên trong kéo
       modal rộng ra và cả trang trượt ngang theo. */
    .table-wrap:has(.nt-bang),
    .table-wrap:has(.tt-bang) {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Ba ô tổng và ba nút ở màn thanh toán: xếp dọc cho đủ chỗ */
    .tt-tong { grid-template-columns: 1fr !important; gap: 8px; }
    .tt-nut  { flex-direction: column; }
    .tt-nut .btn { width: 100%; justify-content: center; }

    .nt-dau { flex-direction: column; align-items: stretch; }
}

/* Chú thích nhỏ dưới ô nhập — hở ra một chút cho khỏi dính vào viền ô */
.field-hint { margin-top: 1px; line-height: 1.5; }

/* ══════════════════════════════════════════════════════════
   SỔ KHÁCH HÀNG TRÊN ĐIỆN THOẠI

   Bảng này là bảng DUY NHẤT chưa có bố cục mobile riêng. Các
   trang khác đều khai grid-template-areas cho từng cột, còn đây
   thì rơi vào lưới mặc định "1fr auto": bảy ô tự chảy thành bốn
   hàng theo đúng thứ tự HTML, thành ra Mã đứng cạnh Tên, Số điện
   thoại cạnh Địa chỉ, Đã mua cạnh Còn nợ — chẳng theo mức quan
   trọng nào cả, mà Tên thì bị đẩy sang cột `auto` nên co lại.

   Xếp lại theo cái người bán cần liếc một cái là thấy: tên khách
   và số còn nợ lên trên cùng, hai bên trái phải.
══════════════════════════════════════════════════════════ */
@media (max-width: 760px) {

    /* CHỈ HAI DÒNG. Bản trước cố nhét cả bảy cột vào bốn dòng, kết quả
       là một khối chữ nhỏ li ti không biết đâu là chính đâu là phụ:
       "1" của Còn nợ nằm cạnh "0 / 0 đơn" của Đã mua, dưới nữa là mã,
       rồi một dấu gạch của Địa chỉ trống nằm chung hàng với ba cái nút.

       Trên màn 390px chỉ nên hiện thứ dùng để CHỌN người: tên, số điện
       thoại và tiền còn nợ. Địa chỉ và tổng đã mua bỏ đi — chạm vào
       dòng là mở hồ sơ, trong đó có đủ. */
    /* Mã và số điện thoại nằm cùng MỘT DÒNG nhưng phải là HAI CỘT riêng.
       Nhét cả hai vào chung một ô lưới rồi đặt display:inline thì không
       ăn thua: phần tử con của grid luôn bị blockify, hai ô chồng khít
       lên nhau — mã khách trông như bị gạch ngang bởi dấu "—" của ô số
       điện thoại trống. */
    .tc-khach tbody tr {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "ten ten no"
            "ma  sdt act";
        gap: 9px 10px;
        align-items: center;
        padding: 13px 13px !important;
    }

    .tc-khach td:nth-child(2) { grid-area: ten; }
    .tc-khach td:nth-child(6) { grid-area: no; justify-self: end; text-align: right !important; }
    .tc-khach td.td-actions   { grid-area: act; }

    .tc-khach td.td-ma        { grid-area: ma; }
    .tc-khach td:nth-child(3) { grid-area: sdt; }
    .tc-khach td.td-ma,
    .tc-khach td:nth-child(3) {
        font-size: 12px !important;
        color: var(--gray-500);
        white-space: nowrap;
    }
    /* Chưa có số thì để trống hẳn, đừng in dấu gạch cho rối */
    .tc-khach td:nth-child(3) .muted { display: none; }

    /* Địa chỉ và Đã mua: xem trong hồ sơ */
    .tc-khach td:nth-child(4),
    .tc-khach td:nth-child(5) { display: none !important; }

    /* Tên + ảnh đại diện */
    .tc-khach .kh-ten { display: flex; align-items: center; gap: 10px; min-width: 0; }
    .tc-khach .kh-ten > div { min-width: 0; }
    .tc-khach .kh-ten b {
        font-size: 15px; font-weight: 700; line-height: 1.3;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .tc-khach .kh-ten small { font-size: 11px; color: var(--gray-400); }
    .tc-khach .kh-ava { width: 38px; height: 38px; flex-shrink: 0; }

    /* Còn nợ: con số duy nhất cần đập vào mắt, nên có nhãn hẳn hoi.
       Không nợ thì để trống — dấu gạch chỉ tổ thêm rác. */
    .tc-khach td:nth-child(6) .kh-no {
        display: block;
        font-size: 15.5px; font-weight: 800; line-height: 1.2;
    }
    .tc-khach td:nth-child(6):has(.kh-no)::after {
        content: 'còn nợ';
        display: block;
        margin-top: 1px;
        font-size: 10px; font-weight: 600; color: var(--gray-400);
    }
    .tc-khach td:nth-child(6) .muted { display: none; }

    .tc-khach .kh-ma  { font-size: 11px; padding: 2px 7px; }
    .tc-khach .kh-sdt { color: var(--blue); text-decoration: none; }

    /* Chạm vào dòng đã mở hồ sơ rồi, nút "xem" là thừa trên điện thoại */
    .tc-khach .action-btns .icon-btn:first-child { display: none; }
}

/* ── Hàng nút Xuất / Nhập / Thêm khách ──
   Đang bị dồn hết sang phải thành một cụm lửng lơ, chừa nửa dòng trống
   bên trái; mà ở 560px trở xuống thì hai nút file mất luôn chữ, còn lại
   hai cái icon không đoán ra là xuất hay nhập.

   Xếp thành hai dòng đủ chữ: hai nút file chia đôi, "Thêm khách" trải
   hết bề ngang vì đó là việc chính của trang. */
@media (max-width: 760px) {
    .toolbar { gap: 9px; }
    .toolbar .tb-search { width: 100%; max-width: none; }
    .toolbar-right {
        width: 100%;
        margin-left: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .toolbar-right .tb-file { justify-content: center; }
    .toolbar-right .tb-file span { display: inline !important; }
    .toolbar-right .btn-success,
    .toolbar-right .btn-primary { grid-column: 1 / -1; justify-content: center; }
}

/* Bộ lọc trên điện thoại: chip nhỏ lại, bỏ icon, xuống dòng tự do —
   để nó không chiếm mất nửa màn hình trước khi thấy được khách nào.

   KHÔNG cho cuộn ngang: nhãn nhóm ("Công nợ", "Mua hàng") là phần tử
   width:100% nằm chung hàng flex, bỏ wrap đi thì nó bị bóp thành một
   ô hẹp đứng cạnh các chip thay vì nằm riêng một dòng. */
@media (max-width: 640px) {
    .kh-loc { padding: 11px 12px 12px; }
    .kh-loc-nhom { gap: 5px; }
    .kh-loc-mot { padding: 7px 11px; font-size: 12px; }
    .kh-loc-mot i { display: none; }        /* chữ quan trọng hơn icon khi chật */
    .kh-loc-mot b { min-width: 18px; padding: 1px 5px; font-size: 10.5px; }
    .kh-loc-sap select { max-width: none; }
}

/* ══════════════════════════════════════════════════════════
   MÃ NỢ NO-xxxx

   Cột "#" cũ chỉ là số thứ tự của dòng: nó đổi theo trang và theo
   bộ lọc, nên chẳng gọi tên được khoản nào — hôm nay dòng 3, mai
   lọc khác đã thành dòng 7. Mã gắn chặt với phiếu thì đọc qua
   điện thoại cho khách cũng được.

   Trông phải ra dáng bấm được, vì bấm vào là mở chi tiết khoản nợ.
══════════════════════════════════════════════════════════ */
/* Chi tiết phiếu nợ luôn nằm TRÊN mọi hộp thoại khác.
   Mọi .modal-bg đều z-index 800, nên cái nào nhúng sau thì đè cái trước.
   Trong pages/debt.php, partials/thu-no.php nhúng sau partials/chitietno.php
   — thành ra bấm mã ngay trong màn "Thu khoản NO-xxxx" thì chi tiết mở ra
   nhưng nấp phía sau, nhìn như bấm không ăn.
   Hộp này luôn được mở TỪ một hộp khác nên nâng hẳn lên một lớp, khỏi phụ
   thuộc vào thứ tự nhúng ở từng trang. */
#ctModal { z-index: 900; }

/* Chân bảng chi tiết phiếu nợ: tách khỏi phần lịch sử điều chỉnh ngay trên
   nó bằng một đường kẻ, không thì hai nút trông như dính vào danh sách. */
.ct-chan {
    margin-top: 18px; padding-top: 14px;
    border-top: 1px solid var(--gray-200);
}

/* Chữ xanh đậm, không khung. Kiểu viên thuốc có nền và viền làm mỗi
   dòng thêm một khối màu; cả cột xếp dọc nhìn nặng như một dải nút. */
.no-ma {
    display: inline-block;
    padding: 0;
    border: none;
    background: none;
    color: var(--blue-h, #1d4ed8);
    font-family: inherit;
    font-size: 13px; font-weight: 800;
    letter-spacing: .2px;
    white-space: nowrap;
    cursor: pointer;
    transition: color .13s;
}
.no-ma:hover  { color: var(--blue); text-decoration: underline; }
.no-ma:active { opacity: .7; }

/* Mã trong đầu modal chi tiết — chỉ để đọc, không bấm */
.ct-ma {
    font-family: 'Courier New', monospace;
    letter-spacing: .3px;
    color: var(--blue);
}

/* Cột mã nợ ở bảng Ghi nợ: đủ rộng cho NO-0001, không hơn */
.tc-debt th:nth-child(1), .tc-debt td:nth-child(1) { width: 104px; }

@media (max-width: 760px) {
    /* Bố cục mobile của bảng Ghi nợ đang ẩn cột 1 vì nó chỉ là số thứ
       tự. Giờ nó là mã nợ — thứ đáng hiện nhất sau tên khách. */
    .tc-debt tbody tr {
        grid-template-areas: "cust money" "ma stat" "items items" "date act";
    }
    .tc-debt td:nth-child(1) {
        display: block !important;
        grid-area: ma;
        width: auto !important;
    }
    .tc-debt td:nth-child(7) { display: block !important; grid-area: date;
        font-size: 11.5px !important; color: var(--gray-400); }
    .tc-debt td:nth-child(6) { justify-self: end; }
}

/* ══════════════════════════════════════════════════════════
   THANH TRÊN Ở MÀN VỪA (900–1300px)

   Đo được ở 1150px: .topbar-right tràn tới 1185px, tức lòi ra 35px
   khỏi mép phải và làm CẢ TRANG trượt ngang. Chuỗi logo + 7 mục +
   nút Cài app + Dữ liệu + tên người dùng + Đăng xuất dài hơn thanh,
   mà không cái nào được phép co nên chúng đùn nhau ra ngoài.

   Cắt theo thứ tự ít tiếc nhất: tên người dùng (còn icon là biết
   bấm vào đâu) → chữ trên nút Dữ liệu → khoảng đệm của mục nav.
══════════════════════════════════════════════════════════ */
/* `min-width: 0` để khối này chịu co, nhưng KHÔNG cắt phần tràn:
   danh sách mục con ("Hàng hóa ▾") là khối định vị tuyệt đối nằm bên
   trong, `overflow: hidden` là nó bị xẻo mất, bấm vào thấy y như không
   có gì xảy ra. Chống tràn ngang giờ do luật bỏ chữ chừa icon lo. */
.topbar-nav  { min-width: 0; overflow: visible; }
.topbar-right { flex-shrink: 0; }
.user-badge  { white-space: nowrap; }

@media (max-width: 1300px) {
    .user-badge span { display: none; }
    a.user-badge     { padding: 6px 9px; }
}

@media (max-width: 1180px) {
    .nav-link { padding: 6px 9px; gap: 5px; }
    .topbar-nav { gap: 0; }
}

/* Ô tiền trả nhà cung cấp, nằm ngay dưới tổng tiền hàng trong phiếu nhập */
.si-no {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 11px 14px; margin-top: 8px;
    background: #fff; border: 1px solid var(--gray-200); border-radius: var(--rsm);
}
.si-no label { font-size: 12.5px; color: var(--gray-600); }
.si-no input {
    width: 150px; height: 36px; padding: 0 10px;
    font-family: inherit; font-size: 14px; font-weight: 700; text-align: right;
    color: var(--gray-900);
    background: #fff; border: 1.5px solid var(--gray-200); border-radius: 9px;
}
.si-no input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-lt); }
.si-con { margin-left: auto; font-size: 12.5px; color: var(--gray-500); }
/* Còn nợ thì tô cam — con số này quyết định có phải nhớ đi trả hay không */
.si-con b { font-size: 14.5px; color: var(--gray-400); }
.si-con b.co-no { color: var(--orange); }

/* Danh sách gợi ý lúc mở: `fixed` để không khung cha nào cắt được.
   Tọa độ do PosDD trong app.js tính theo vị trí ô nhập. */
.dp-dd.dd-noi {
    position: fixed;
    /* Phải đặt lại CẢ BA: luật nền .dp-dd có `top: calc(100% + 4px)` và
       `left/right: 0` — đúng khi ở chế độ absolute trong ô nhập, nhưng
       sang fixed thì 100% là 100% MÀN HÌNH, danh sách rơi xuống tận đáy.
       Bình thường JS đè tọa độ thật lên nên không ai thấy; nhưng có
       những đường JS chưa kịp đặt (vừa mở, hay vừa đổi nội dung) là
       luật nền lại lộ ra một nhịp. */
    top: 0; left: 0; right: auto; bottom: auto;
    z-index: 9000;
}

/* ── Sổ khách hàng trên máy tính bảng nằm ngang (901–1400px) ──
   Bảng cần 940px mà chỗ thật chỉ 642px sau khi trừ cột lọc. Bỏ cột
   "Địa chỉ": nó dài nhất bảng, mà lúc đứng bán thì cần số điện thoại
   và số nợ chứ không cần địa chỉ — mở hồ sơ khách là có. */
@media (min-width: 901px) and (max-width: 1400px) {
    .tc-khach table { min-width: 640px; }
    .tc-khach th:nth-child(4), .tc-khach td:nth-child(4) { display: none; }
}

/* ══════════════════════════════════════════════════════════
   THU NỢ — hộp thoại riêng của trang Ghi nợ

   Sổ khách hàng dùng chung màn này nhưng mượn khung hồ sơ khách đang
   mở, nên không cần luật ở đây. Trang Ghi nợ thì phải tự có khung.
══════════════════════════════════════════════════════════ */
/* Bảng phân bổ có bảy cột và cần tối thiểu 820px; hộp 820px thì sau khi
   trừ đệm hai bên, cột "Tiền thu" — ô duy nhất phải gõ vào — bị cắt. */
.tn-modal { max-width: 1000px; }
#tnNoi { min-height: 80px; }

/* Số còn nợ in ngay dưới tổng nợ ở bảng Ghi nợ — tô cam vì đó là con số
   phải đòi, khác với tổng nợ ban đầu chỉ để tra lại. */
.no-con {
    display: block; margin-top: 2px;
    font-size: 11.5px; font-weight: 700; color: var(--orange);
}

/* Huy hiệu "Trả một phần" — cam, nằm giữa đỏ (chưa trả) và xanh (xong) */
.status-badge.partial {
    background: var(--orange-lt);
    color: var(--orange);
}

/* ════════════════════════════════════════════════════════
   MẶT HÀNG ĐÃ CÓ TRONG GIỬe

   Viền xanh + nền nhạt + số lượng thay cho dấu cộng. Ba dấu hiệu chứ không
   phải một: lúc đông khách người ta liếc rất nhanh, mà viền mỏng thì dễ
   trượt mắt, còn màu nền thì người mù màu không phân biệt được.
════════════════════════════════════════════════════════ */
/* Viền bằng `outline` chứ không phải `border` + `box-shadow`.

   Dòng hàng ở mỗi cỡ màn lại có viền khác nhau: màn rộng là thẻ có viền
   bốn bên, màn hẹp chỉ có vạch ngăn ở đáy. Tô cả hai thì chỗ có sẵn vạch
   đáy thành dày gấp đôi, còn cạnh trên và cạnh bên chỉ một lớp — ra cái
   khung chỗ dày chỗ mỏng.

   `outline` vẽ ĐỂ RIÊNG ra ngoài, không cộng vào viền sẵn có và luôn đều bốn
   bên; offset âm kéo nó vào trong cho khỏi chồng sang dòng bên cạnh. */
.pm-row.co {
    outline: 2px solid var(--blue);
    outline-offset: -2px;
    border-radius: 10px;
    background: var(--blue-lt) !important;
}
.pm-row.co .pm-name { color: var(--blue-h); }

/* Số lượng thay chỗ dấu cộng: bấm vẫn là thêm một nữa, nhưng nhìn vào
   biết đang có mấy. */
.pm-row.co .pm-add {
    background: var(--blue); color: #fff;
    border-color: var(--blue);
}
.pm-row.co .pm-add b { font-size: 13px; font-weight: 800; line-height: 1; }

/* Cảnh báo dưới một ô số liệu: con số đúng nhưng chưa đủ dữ liệu để tin.

   Phải cho xuống dòng: luật nền .dc-chenh đặt nowrap vì mấy dòng kia chỉ
   có "+12,3% · tháng trước" — ngắn. Dòng này dài hơn hẳn, để nowrap là
   chạy tuột ra ngoài mép ô và bị cắt mất vế sau. */
.dc-chenh.canh {
    display: flex; align-items: flex-start;
    color: var(--orange);
    font-weight: 600;
    line-height: 1.35;
    white-space: normal;
}
.dc-chenh.canh i { margin-top: 2px; flex-shrink: 0; }

/* Đơn vị trên dòng hóa đơn chỉ để ĐỌC, không phải ô nhập nữa. */
.td-dv { color: var(--gray-600); white-space: nowrap; }

/* ═══════════════════════════════════════════════════════
   CỤM SỐ LƯỢNG  − 1 +  TRÊN DÒNG HÓA ĐƠN

   Cùng hình dáng với cụm trong giỏ hàng điện thoại. Phải viết riêng ở đây
   vì luật của .mc-qty nằm trong @media (max-width: 760px) — trên máy tính thì
   không áp, cụm sẽ trơ ra ba thẻ không viền.
═══════════════════════════════════════════════════════ */
/* Cụm phải GỌN: cột "Số lượng" chỉ rộng chừng 118px, cụm 108px là lấn
   gần sát cột "Đơn vị" bên cạnh, nhìn như hai cột dính vào nhau. 26+38+26
   cộng viền là 93px, còn thở hai bên. */
.gio-sl {
    display: inline-flex; align-items: center;
    border: 1.5px solid var(--gray-200);
    border-radius: 9px; overflow: hidden;
    background: #fff;
}
.gio-sl button {
    width: 26px; height: 30px;
    border: none; background: var(--gray-50);
    color: var(--gray-700); font-size: 16px; font-weight: 700;
    cursor: pointer; line-height: 1;
    transition: background .12s;
}
.gio-sl button:hover  { background: var(--blue-lt); color: var(--blue); }
.gio-sl button:active { background: var(--gray-200); }
.gio-sl input {
    width: 44px; height: 30px;
    border: none;
    border-left: 1.5px solid var(--gray-200);
    border-right: 1.5px solid var(--gray-200);
    text-align: center;
    font-family: inherit; font-size: 14px; font-weight: 700;
    color: var(--gray-900); background: #fff;
    outline: none;
    -moz-appearance: textfield;
}
.gio-sl input:focus { background: var(--blue-lt); }
.gio-sl input::-webkit-outer-spin-button,
.gio-sl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Cụm số lượng canh giữa ô — để sát trái thì bên phải hở một khoảng,
   bên trái lại dính vào tên hàng.

   Dùng nth-child(3) chứ không dùng :has() — :has() mới có từ Chrome 105,
   máy ở tiệm chưa chắc đã mới đến thế. Cột thứ ba luôn là Số lượng:
   nth-child đếm theo vị trí trong mã, không đếm theo cột đang hiện, nên
   cột # bị ẩn cũng không làm lệch số đếm. */
.pd-bill th:nth-child(3), .pd-bill td:nth-child(3) { text-align: center; }

/* Chừa thêm khoảng cho cột "Đơn vị".

   Cụm số lượng là một khối CÓ VIỀN, khác hẳn mấy cột chữ trơn bên
   cạnh. Khoảng hở 27px đủ cho hai cột chữ, nhưng cạnh một cái khung thì
   nhìn như chữ bị dính vào khung. Đẩy ra gần gấp đôi.

   Chỉ ở màn rộng: dưới 760px bảng này gấp thành thẻ, mỗi ô một dòng
   riêng nên không có chuyện cạnh nhau nữa. */
@media (min-width: 761px) {
    .pd-bill th:nth-child(4), .pd-bill td:nth-child(4) { padding-left: 22px !important; }
}

/* ═══════════════════════════════════════════════════════
   TRANG TÀI KHOẢN — các khối thiết lập
═══════════════════════════════════════════════════════ */
.tk-luoi {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}
/* Ô cần cả bề ngang: địa chỉ, tên chủ tài khoản, tỷ lệ thuế — mấy thứ
   dài, chừa nửa hàng thì cụt. */
.tk-rong { grid-column: 1 / -1; }

.tk-luu {
    display: flex; align-items: center; gap: 12px;
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid var(--gray-100);
}
.tk-luu-ghi { font-size: 12px; color: var(--gray-400); }

/* Ghi chú cảnh báo dưới ô nội dung chuyển khoản */
.field-hint.tk-lo {
    display: flex; align-items: flex-start; gap: 6px;
    color: var(--orange); font-weight: 600; line-height: 1.4;
}
.field-hint.tk-lo i { margin-top: 2px; flex-shrink: 0; }

@media (max-width: 700px) {
    /* Mỗi ô một hàng: nửa bề ngang màn điện thoại không đủ cho một mã
       số thuế 13 chữ số hay một số tài khoản. */
    .tk-luoi { grid-template-columns: minmax(0, 1fr); }
    .tk-luu { flex-direction: column; align-items: stretch; }
    .tk-luu .btn { width: 100%; justify-content: center; }
}

/* Lối vào sổ kho từ hồ sơ mặt hàng — đặt ngay dưới ô tồn kho, vì thấy
   con số tồn lạ thì câu hỏi kế tiếp luôn là "sao lại thành thế này". */
.hh-so-kho {
    display: flex; align-items: center; gap: 9px;
    margin-top: 12px; padding: 10px 13px;
    background: var(--blue-lt);
    border: 1px solid var(--blue-bd); border-radius: var(--rsm);
    font-size: 13px; font-weight: 600; color: var(--blue);
    text-decoration: none;
}
.hh-so-kho:hover { background: #dbeafe; }
.hh-so-kho span  { flex: 1 1 auto; min-width: 0; }
.hh-so-kho-mui   { font-size: 11px; }

/* ══════════════════════════════════════════════════════════
   CHIẾT KHẤU Ở KHỐI THANH TOÁN

   Để NGOÀI mọi @media: khối .pd-pay được JS chuyển nguyên vào sheet giỏ
   hàng khi màn hẹp, nên cùng một ô phải trông đúng ở cả hai chỗ.
══════════════════════════════════════════════════════════ */
.pay-ck {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 10px;
}
.pay-ck > label {
    font-size: 13px; font-weight: 600; color: var(--gray-600);
    white-space: nowrap;
}
.pay-ck-nhap {
    display: inline-flex; align-items: center; gap: 6px;
    flex: 0 1 150px;
    padding: 0 11px;
    background: #fff;
    border: 1.5px solid var(--gray-200); border-radius: var(--rsm);
}
.pay-ck-nhap:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.pay-ck-nhap input {
    flex: 1 1 auto; min-width: 0;
    height: 38px; padding: 0;
    border: none; outline: none; background: none;
    font-family: inherit; font-size: 14px; font-weight: 700;
    color: var(--gray-900); text-align: right;
}
/* Nút tăng giảm của input number chiếm chỗ mà không ai bấm — tiền thì gõ,
   không bấm lên từng nghìn một. */
.pay-ck-nhap input::-webkit-outer-spin-button,
.pay-ck-nhap input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pay-ck-nhap input[type=number] { -moz-appearance: textfield; }
.pay-ck-nhap > span { font-size: 12.5px; font-weight: 600; color: var(--gray-400); }

/* Dòng "Tiền hàng" — chỉ hiện khi có bớt, nên phải nhẹ hơn dòng Tổng cộng
   ngay dưới nó, không thì hai dòng đánh nhau. */
.pay-sum.truoc { margin-bottom: 6px; }
.pay-sum.truoc span { font-size: 12.5px; color: var(--gray-500); }
.pay-sum.truoc b    { font-size: 14px; font-weight: 700; color: var(--gray-500); }

/* Dòng chiết khấu trong màn xác nhận */
.pc-line.pc-ck .pl-name  { font-weight: 700; color: var(--orange); }
.pc-line.pc-ck .pl-money { font-weight: 800; color: var(--orange); }

/* ══════════════════════════════════════════════════════════
   CHỨNG TỪ — xem lại phiếu thu / phiếu trả hàng
   (partials/chungtu.php + assets/js/chungtu.js)
══════════════════════════════════════════════════════════ */
.ctu-modal { max-width: 720px; }

.ctu-dau {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px 16px;
    padding: 13px 15px; margin-bottom: 14px;
    background: var(--gray-50); border-radius: var(--rsm);
}
.ctu-dau > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ctu-dau span {
    font-size: 10.5px; font-weight: 700; color: var(--gray-500);
    text-transform: uppercase; letter-spacing: .3px;
}
.ctu-dau b {
    font-size: 13.5px; color: var(--gray-900);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ctu-ma {
    display: inline-block; padding: 1px 9px;
    font-size: 12.5px; font-weight: 800;
    color: var(--blue); background: var(--blue-lt); border-radius: 20px;
}

.ctu-bang { width: 100%; min-width: 520px; border-collapse: collapse; }
.ctu-bang th, .ctu-bang td {
    padding: 9px 10px; font-size: 13px; text-align: left;
    border-bottom: 1px solid var(--gray-100);
}
.ctu-bang th {
    font-size: 11px; font-weight: 700; color: var(--gray-500);
    text-transform: uppercase; letter-spacing: .3px;
    background: var(--gray-50);
}
.ctu-bang .right  { text-align: right; }
.ctu-bang .center { text-align: center; }
.ctu-bang tbody tr:last-child td { border-bottom: none; }

.ctu-tong {
    display: flex; flex-direction: column; gap: 6px;
    margin-top: 14px; padding-top: 12px;
    border-top: 2px solid var(--gray-200);
}
.ctu-tong-d { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ctu-tong-d span { font-size: 13px; color: var(--gray-600); }
.ctu-tong-d b    { font-size: 14px; font-weight: 700; color: var(--gray-900); }
.ctu-tong-d.to span { font-size: 15px; font-weight: 800; color: var(--gray-900); }
.ctu-tong-d.to b    { font-size: 20px; font-weight: 800; color: var(--blue); }

.ctu-ghi {
    margin-top: 12px; padding: 10px 13px;
    background: var(--gray-50); border-radius: var(--rsm);
    font-size: 12.5px; line-height: 1.5; color: var(--gray-700);
}
.ctu-ghi span {
    display: block; margin-bottom: 3px;
    font-size: 10.5px; font-weight: 700; color: var(--gray-400);
    text-transform: uppercase; letter-spacing: .3px;
}

/* Ô mã phiếu bấm được trong bảng danh sách */
.ctu-mo {
    background: none; border: none; padding: 0; cursor: pointer;
    font: inherit; color: inherit;
}
.ctu-mo:hover .hh-ma, .ctu-mo:hover .sq-ma { text-decoration: underline; }

/* ── In: chỉ còn tờ phiếu ──
   Không dựng lại nội dung trong một cửa sổ mới; giấu mọi thứ khác đi thì
   nhanh hơn và không có nguy cơ hai bản nội dung lệch nhau. */
@media print {
    /* CHỈ giấu trang nền KHI ĐANG CÓ MỘT MODAL MỞ.
       Trước đây luật này viết trống là `body > *:not(.modal-bg)`, tức là
       hễ in thì mọi thứ không phải modal đều biến mất — kể cả .container
       chứa toàn bộ nội dung trang. Mọi trang TỰ IN đều ra giấy trắng;
       không ai phát hiện vì tới giờ chỉ có mấy màn chứng từ trong modal
       là có nút In. Trang Sổ công nợ tự in nên lộ ra.
       `:has()` chạy trên Chrome 105 trở lên — phần mềm này chạy Chrome. */
    body:has(.modal-bg.open) > *:not(.modal-bg) { display: none !important; }
    .modal-bg:not(.open)    { display: none !important; }
    .modal-bg.open {
        position: static !important; opacity: 1 !important;
        background: none !important; display: block !important;
        padding: 0 !important;
    }
    .ctu-modal {
        max-width: none !important; width: 100% !important;
        max-height: none !important; overflow: visible !important;
        box-shadow: none !important; transform: none !important;
        padding: 0 !important;
    }
    .no-print { display: none !important; }
    .ctu-bang th { background: var(--gray-50) !important; -webkit-print-color-adjust: exact; }
    .table-wrap { overflow: visible !important; }
    .ctu-bang   { min-width: 0 !important; }
}


/* ══════════════════════════════════════════════════════════
   THẺ KHÁCH TRONG BẢNG GHI NỢ

   Thay cho ba ô nhập tên / điện thoại / địa chỉ trước đây. Khách đã chọn ở
   cột phải rồi, bày lại ba ô trống chỉ tổ gõ sai chính tả rồi đẻ ra hai hồ
   sơ cho cùng một người.
══════════════════════════════════════════════════════════ */
.db-kh {
    display: flex; align-items: center; gap: 12px;
    margin-top: 14px; padding: 13px 15px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200); border-radius: var(--rsm);
}
.db-kh-av {
    flex: 0 0 auto;
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--orange-lt); color: var(--orange); font-size: 15px;
}
.db-kh-tt      { flex: 1 1 auto; min-width: 0; }
.db-kh-tt b    { display: block; font-size: 15px; color: var(--gray-900);
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-kh-tt small{ display: block; margin-top: 2px; font-size: 12px; color: var(--gray-500);
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-kh-no {
    flex: 0 0 auto;
    padding: 4px 11px; border-radius: 20px; white-space: nowrap;
    background: var(--red-lt); color: var(--red);
    font-size: 11.5px; font-weight: 700;
}

@media (max-width: 480px) {
    /* Màn hẹp: số nợ cũ xuống dòng riêng chứ không bóp tên khách còn hai chữ */
    .db-kh    { flex-wrap: wrap; }
    .db-kh-no { width: 100%; text-align: center; }
}


/* ══════════════════════════════════════════════════════════
   KẾT HỢP TIỀN MẶT + CHUYỂN KHOẢN TRÊN ĐIỆN THOẠI

   Hai ô nằm ngang trong sheet giỏ hàng thì mỗi ô chưa đầy 150px, gõ số bằng
   ngón cái rất dễ trượt sang ô bên. Xếp dọc thì mỗi ô rộng cả sheet.
══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .pay-mix { grid-template-columns: minmax(0, 1fr); }
}


/* ══════════════════════════════════════════════════════════
   NHÃN PHỤ CHỈ DÀNH CHO DANH SÁCH GỢI Ý Ở MÁY TÍNH

   Thẻ hàng trên điện thoại đã chật (ảnh vuông + tên hai dòng + giá), nhét
   thêm tồn kho và tên hãng vào là vỡ ô. Bôi vàng thì giữ — nó chỉ là màu nền
   của mấy chữ có sẵn, không chiếm thêm chỗ nào.
══════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
    .pm-sub { display: none !important; }

    /* Dải đầu danh sách gợi ý ("45 MÓN · ↑↓ chọn · Enter thêm · Esc đóng")
       chỉ có nghĩa ở máy tính. Trên điện thoại lưới hàng luôn hiện sẵn chứ
       không xổ ra, và bàn phím cảm ứng làm gì có phím mũi tên với Esc — để
       lại thì nó lọt vào lưới thành một ô trơ không bấm được. */
    .pm-dd-head { display: none !important; }
}
.pm-name mark { background: #fef08a; color: inherit; padding: 0 1px; border-radius: 3px; }


/* ══════════════════════════════════════════════════════════
   Ô ẢNH HÀNG: ẢNH PHỦ ĐÈ LÊN BIỂU TƯỢNG DỰ PHÒNG

   Biểu tượng thùng hàng luôn được vẽ, ảnh thật nằm chồng lên che nó đi. Ảnh
   hỏng thì tự gỡ mình (onerror) và biểu tượng lộ ra — không có khoảnh khắc
   nào ô ảnh trống trơn hay hiện cái icon ảnh vỡ của trình duyệt.
══════════════════════════════════════════════════════════ */
.pm-thumb { position: relative; }
.pm-thumb img { position: absolute; inset: 0; }


/* ══════════════════════════════════════════════════════════
   MÃ QR CHUYỂN KHOẢN — NGAY DƯỚI NÚT CHỌN HÌNH THỨC

   Chọn "Chuyển khoản" là mã hiện luôn, khách quét ngay tại quầy. Trước
   đây mã nằm trong bảng xác nhận nên phải bấm "Thanh toán & Lưu" rồi
   khách mới quét được — ngược thứ tự, vì khách quét trước, nghe loa báo
   tiền về rồi mới bấm lưu.

   Mã nhỏ ở đây chỉ để người bán biết nó có sẵn; muốn chìa cho khách quét
   thì bấm phóng to.
══════════════════════════════════════════════════════════ */
.pay-qr {
    position: relative;          /* nút "Đã nhận tiền" neo vào góc trên phải */
    display: flex; align-items: stretch; gap: 11px;
    margin: -4px 0 13px;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--rsm);
}

/* Ô mã: nút bấm được, vì bấm vào là phóng to — chỗ ai cũng thử bấm đầu tiên */
.pay-qr-anh {
    flex: 0 0 auto;
    width: 76px; height: 76px; padding: 4px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--gray-200); border-radius: 9px;
    background: #fff; cursor: pointer; overflow: hidden;
}
.pay-qr-anh:hover { border-color: var(--blue); }
.pay-qr-anh img, .pay-qr-anh svg,
.pay-qr-anh canvas { width: 100%; height: 100%; object-fit: contain; display: block; }
.pay-qr-anh .vq-loading, .pay-qr-loi {
    font-size: 10.5px; line-height: 1.4; color: var(--gray-400); text-align: center;
}

.pay-qr-tt {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column; justify-content: center; gap: 3px;
}
.pay-qr-nh {
    font-size: 12.5px; font-weight: 700; color: var(--gray-900);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pay-qr-stk {
    font-size: 13px; font-weight: 800; color: var(--blue);
    letter-spacing: .3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Hàng cuối của khối: nút phóng to bên trái, số tiền dồn hết sang phải */
.pay-qr-cuoi {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 10px; margin-top: 6px;
}
.pay-qr-tien {
    flex: 0 0 auto;
    font-size: 17px; font-weight: 800; color: var(--gray-900);
    white-space: nowrap; line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.pay-qr-to {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--gray-200); border-radius: 7px;
    background: var(--gray-50); color: var(--gray-700);
    font-family: inherit; font-size: 11.5px; font-weight: 700;
    white-space: nowrap; cursor: pointer;
}
.pay-qr-to:hover { border-color: var(--blue); color: var(--blue); background: #fff; }

/* ── Bảng phóng to: chìa màn hình cho khách quét ── */
.qr-to { max-width: 380px; text-align: center; }
.qr-to-dau {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 14px;
}
.qr-to-dau > b {
    flex: 1 1 auto; text-align: left;
    font-size: 17px; font-weight: 800; color: var(--gray-900);
}
.qr-to-box {
    width: 100%; max-width: 300px; margin: 0 auto;
    aspect-ratio: 1;
}
/* Chân bảng phóng to: chỉ còn dòng thông tin tài khoản, căn giữa dưới mã */
.qr-to-chan {
    margin-top: 12px;
    font-size: 12.5px; line-height: 1.55; color: var(--gray-500);
    word-break: break-word;
}

@media (max-width: 760px) {
    .pay-qr-anh { width: 66px; height: 66px; }
    .qr-to-box  { max-width: 260px; }
}


/* ══════════════════════════════════════════════════════════
   THẺ KHÁCH ĐÃ CHỌN — GỌN LẠI CÒN BA THỨ

   Biểu tượng người · tên · nút bỏ. Số điện thoại và số nợ vẫn được tra về
   nhưng nằm trong thẻ ẩn (bảng Ghi nợ đọc số nợ cũ từ đó), không bày ra
   đây — lúc đang bán, thứ cần biết là đang bán cho ai.
══════════════════════════════════════════════════════════ */
.kh-da::before {
    content: '\f007';                       /* fa-user */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--blue);
}
.kh-da-ten { flex: 1 1 auto; min-width: 0; }
.kh-da-ten b {
    display: block;
    font-size: 14.5px; font-weight: 700; color: var(--gray-900);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}


/* Nút "Đã nhận tiền" — góc trên bên phải khối mã QR.

   Xanh lá chứ không xanh dương: nó KHÔNG giống nút "Thanh toán & Lưu" ở
   chân thẻ, mà là một lối tắt chỉ dùng khi đã nghe loa báo tiền về. Hai
   nút cùng màu thì bấm nhầm là lưu một đơn chưa nhận được đồng nào. */
.pay-qr-xong {
    position: absolute; top: 8px; right: 8px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px;
    border: 1px solid var(--green); border-radius: 8px;
    background: var(--green-lt); color: var(--green);
    font-family: inherit; font-size: 11.5px; font-weight: 700;
    white-space: nowrap; cursor: pointer;
    transition: background .15s, color .15s;
}
.pay-qr-xong:hover:not(:disabled) { background: var(--green); color: #fff; }
.pay-qr-xong:disabled { opacity: .6; cursor: not-allowed; }

/* Chừa chỗ cho nút "Đã nhận tiền" ở góc trên phải — chỉ hai dòng đầu cần
   né, số tiền và nút phóng to nằm dưới nó rồi nên lấy lại hết bề ngang. */
.pay-qr-nh, .pay-qr-stk { padding-right: 104px; }




/* ══════════════════════════════════════════════════════════
   ĐÃ ĐÁNH DẤU "ĐÃ NHẬN TIỀN"

   Mã mờ đi và đóng dấu tích xanh: khách đã chuyển rồi thì không ai quét
   nữa, để mã sáng rõ chỉ khiến người sau tưởng còn phải trả. Nút phóng to
   cũng giấu đi vì lý do đó.

   Đây CHỈ là dấu — hóa đơn vẫn do nút "Thanh toán & Lưu" tạo ra.
══════════════════════════════════════════════════════════ */
.pay-qr.da-nhan { border-color: var(--green); background: var(--green-lt); }

.pay-qr.da-nhan .pay-qr-anh {
    position: relative;
    border-color: var(--green);
}
/* Lớp mờ phủ lên mã */
.pay-qr.da-nhan .pay-qr-anh::after {
    content: '\f058';                       /* fa-circle-check */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .8);
    color: var(--green);
    font-size: 30px;
}
/* Nút "Hiện mã QR" VẪN GIỮ sau khi đã đánh dấu.

   Bản trước giấu nó đi cho gọn, nhưng bấm nhầm là chuyện có thật: đánh dấu
   xong mới biết khách chưa chuyển, lúc ấy phải chìa lại mã mà không còn nút
   nào để bấm. Mã mờ đi và có dấu tích là đủ để biết trạng thái rồi, không
   cần cắt luôn đường quay lại. */

.pay-qr.da-nhan .pay-qr-xong {
    background: var(--green); color: #fff;
}


/* ══════════════════════════════════════════════════════════
   KHỐI TIỀN — XẾP THÀNH MỘT BẢNG THẲNG CỘT

   Bản cũ mỗi dòng một kiểu: hai dòng đầu là chữ căn phải, hai dòng giữa là
   hộp nhập trắng nổi lên, dòng cuối là chữ xanh to. Nhìn xuống thấy bốn thứ
   rời rạc chứ không ra một phép tính.

   Giờ cả bốn dòng cùng một khuôn: nhãn bên trái, số bên phải, số thẳng cột
   với nhau. Ô nhập bỏ viền hộp, chỉ còn gạch chân mảnh — vẫn biết là gõ
   được nhưng không còn nổi khối lên phá nhịp.
══════════════════════════════════════════════════════════ */
.pd-pay .pay-sum,
.pd-pay .pay-ck {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 34px;
    margin: 0;
    padding: 3px 0;
}
.pd-pay .pay-sum > span,
.pd-pay .pay-ck > label {
    font-size: 13px; font-weight: 600; color: var(--gray-600);
    white-space: nowrap;
}
.pd-pay .pay-sum > b {
    justify-self: end;
    font-size: 14px; font-weight: 700; color: var(--gray-900);
    font-variant-numeric: tabular-nums;
}

/* Ô nhập: gạch chân thay cho khung hộp */
.pd-pay .pay-ck-nhap {
    justify-self: end;
    flex: 0 0 auto; width: 132px;
    padding: 0 2px;
    background: none;
    border: none; border-bottom: 1.5px solid var(--gray-200);
    border-radius: 0;
}
.pd-pay .pay-ck-nhap:focus-within { border-bottom-color: var(--blue); }
.pd-pay .pay-ck-nhap input {
    text-align: right; font-size: 14px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Dòng tổng: tách bằng một vạch, số to hẳn — đây là con số duy nhất người
   bán đọc to lên cho khách nghe. */
.pd-pay .pay-sum:has(.amt) {
    margin-top: 6px; padding-top: 10px;
    border-top: 1px solid var(--gray-200);
}
.pd-pay .pay-sum .amt {
    font-size: 23px; font-weight: 800; color: var(--blue-h); letter-spacing: -.5px;
}


/* ══════════════════════════════════════════════════════════
   BẢNG GIẢM GIÁ — CẢ HÓA ĐƠN VÀ TỪNG DÒNG

   Cùng một khuôn cho cả hai chỗ: gõ số, chọn VNĐ hay %, xem kết quả.
   Nút % để người bán khỏi phải bấm máy tính rồi gõ ra số tiền — nhẩm sai
   một lần là lệch sổ.
══════════════════════════════════════════════════════════ */
.pay-gg { position: relative; }

/* Nút mở bảng: trông như một con số gõ được, không như cái nút */
.pay-gg-nut {
    justify-self: end;
    display: inline-flex; align-items: center; gap: 8px;
    width: 132px; padding: 4px 2px;
    border: none; border-bottom: 1.5px solid var(--gray-200);
    background: none; cursor: pointer;
    font-family: inherit;
}
.pay-gg-nut:hover { border-bottom-color: var(--blue); }
.pay-gg-nut > span {
    flex: 1 1 auto; text-align: right;
    font-size: 14px; font-weight: 700; color: var(--gray-900);
    font-variant-numeric: tabular-nums;
}
.pay-gg-nut > i { font-size: 10px; color: var(--gray-400); }

.gg-bang {
    position: absolute; top: calc(100% + 6px); right: 0;
    z-index: 60; width: 268px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--gray-200); border-radius: 14px;
    box-shadow: 0 14px 38px rgba(15, 23, 42, .16);
}
.gg-bang[hidden] { display: none; }

/* Bảng của một DÒNG hàng: thả nổi theo con trỏ nên phải fixed, không thì
   bảng hóa đơn cuộn là nó trôi mất. */
.gg-dong { position: fixed; top: 0; left: 0; }

.gg-hang {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 0;
}
.gg-hang > label {
    flex: 0 0 66px;
    font-size: 12.5px; font-weight: 600; color: var(--gray-500);
}
.gg-hang > input {
    flex: 1 1 auto; min-width: 0;
    height: 32px; padding: 0 4px;
    border: none; border-bottom: 1.5px solid var(--blue);
    border-radius: 0; background: none;
    font-family: inherit; font-size: 14.5px; font-weight: 700;
    text-align: right; color: var(--gray-900);
    font-variant-numeric: tabular-nums;
    outline: none;
}
/* Dòng chỉ để xem (Đơn giá, Giá bán) */
.gg-doc > b {
    flex: 1 1 auto; text-align: right;
    font-size: 14.5px; font-weight: 700; color: var(--gray-900);
    font-variant-numeric: tabular-nums;
}
.gg-doc + .gg-hang { border-top: 1px solid var(--gray-100); }

/* Cặp nút VNĐ | % */
.gg-kieu {
    flex: 0 0 auto;
    display: inline-flex; overflow: hidden;
    border: 1px solid var(--gray-200); border-radius: 7px;
}
.gg-kieu button {
    padding: 5px 9px;
    border: none; background: #fff; color: var(--gray-500);
    font-family: inherit; font-size: 11.5px; font-weight: 700;
    cursor: pointer;
}
.gg-kieu button + button { border-left: 1px solid var(--gray-200); }
.gg-kieu button.active { background: var(--blue); color: #fff; }

.gg-ket {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; margin-top: 6px; padding-top: 9px;
    border-top: 1px solid var(--gray-100);
    font-size: 12.5px; color: var(--gray-500);
}
.gg-ket > b { font-size: 15px; font-weight: 800; color: var(--gray-900); }


/* ── Ô đơn giá trong dòng hóa đơn: một nút trông như con số ── */
.dong-gia {
    display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
    width: 100%; padding: 6px 4px;
    border: 1px solid transparent; border-radius: 8px;
    background: none; cursor: pointer; font-family: inherit;
}
.dong-gia:hover { border-color: var(--blue-bd); background: var(--blue-lt); }
.dong-gia > b {
    font-size: 14px; font-weight: 700; color: var(--gray-900);
    font-variant-numeric: tabular-nums;
}
/* Số đã bớt: đỏ và nhỏ, nằm ngay dưới giá — nhìn là biết dòng này có bớt */
.dong-gia > small {
    font-size: 11.5px; font-weight: 700; color: var(--red);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
    .gg-bang { width: min(300px, calc(100vw - 28px)); }
    .gg-dong { position: fixed; }
}


/* ══════════════════════════════════════════════════════════
   KHỐI MÃ QR TRÊN ĐIỆN THOẠI

   Bản cũ neo nút "Đã nhận tiền" bằng position:absolute rồi chừa chỗ cho nó
   bằng padding-top:42px — một cái mẹo, và nhìn ra đúng là mẹo: nút dán lơ
   lửng trên đầu, mã QR thì bé tí 66px nằm nép bên trái.

   Dựng lại bằng lưới hai ô, nói thẳng cái gì ở đâu:

       ┌──────────┬─────────────────────┐
       │          │ MB — HKD VU THI THOA│
       │    QR    │ 373165378           │
       │   96px   │ [Hiện mã QR] 41.000đ│
       ├──────────┴─────────────────────┤
       │      ✓ Đã nhận tiền?           │
       └────────────────────────────────┘

   Nút xác nhận xuống đáy, rộng cả hàng: nó là việc làm SAU CÙNG (nghe loa
   rồi mới bấm), mà ngón cái cũng với tới đáy dễ hơn với lên đỉnh.
══════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
    .pay-qr {
        display: grid;
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 11px;
        padding: 12px;
    }
    .pay-qr-anh {
        grid-column: 1; grid-row: 1;
        width: 96px; height: 96px;
    }
    .pay-qr-tt { grid-column: 2; grid-row: 1; }

    /* Thôi neo tuyệt đối — giờ là một ô thật của lưới */
    .pay-qr-xong {
        position: static;
        grid-column: 1 / -1; grid-row: 2;
        width: 100%; justify-content: center;
        padding: 11px; font-size: 13px;
    }

    .pay-qr-nh, .pay-qr-stk { padding-right: 0; }

    /* Số tiền nằm NGAY DƯỚI số tài khoản, rồi mới tới nút phóng to.

       column-reverse chứ không đổi thứ tự trong HTML: ở khổ máy tính hàng
       này là "nút bên trái · tiền bên phải", giữ nguyên thứ tự thẻ thì một
       chỗ sửa không kéo chỗ kia hỏng theo. */
    .pay-qr-cuoi {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 7px; margin-top: 4px;
    }
    .pay-qr-tien { font-size: 17px; }
}


/* ══════════════════════════════════════════════════════════
   Ô "THU KHÁC" — BỎ CÁI KHUNG LÚC BẤM VÀO

   Khối tiền đã đổi sang kiểu gạch chân, nhưng luật cũ ở trên vẫn còn
   `:focus-within` vẽ viền xanh bốn bên kèm quầng sáng. Bấm vào là hiện ra
   một cái hộp lạc lõng giữa mấy dòng chỉ có gạch chân.
══════════════════════════════════════════════════════════ */
.pd-pay .pay-ck-nhap:focus-within {
    border: none;
    border-bottom: 1.5px solid var(--blue);
    box-shadow: none;
}
.pd-pay .pay-ck-nhap input:focus {
    outline: none;
    border: none;
    box-shadow: none;
    background: none;
}


/* ══════════════════════════════════════════════════════════
   KHỐI "KẾT HỢP" — THỞ RA MỘT CHÚT

   Hai ô tiền, hàng nút mệnh giá và dòng "Còn thiếu" đang dính sát nhau,
   nhìn ra một khối đặc. Cho mỗi phần một khoảng thở, và tách dòng "Còn
   thiếu" bằng một vạch — nó là KẾT QUẢ của hai ô trên, không phải một ô
   nữa cùng loại.
══════════════════════════════════════════════════════════ */
.pd-pay .pay-mix {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 12px;
    margin: 4px 0 14px;
    padding: 13px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--rsm);
}
.pd-pay .pay-mix .field { margin: 0; display: flex; flex-direction: column; gap: 5px; }
.pd-pay .pay-mix label  { font-size: 12px; font-weight: 600; color: var(--gray-500); }
.pd-pay .pay-mix input  {
    height: 42px; padding: 0 11px;
    border: 1px solid var(--gray-200); border-radius: 9px;
    font-size: 15px; font-weight: 700; text-align: right;
    font-variant-numeric: tabular-nums;
}
.pd-pay .pay-mix input:focus {
    outline: none; border-color: var(--blue);
    box-shadow: 0 0 0 3px var(--blue-lt);
}

/* Hàng mệnh giá gợi ý cho phần tiền mặt */
.pd-pay .pay-mix .pay-quick {
    grid-column: 1 / -1; margin: 0;
    display: flex; flex-wrap: wrap; gap: 7px;
}

/* Dòng "Còn thiếu": tách hẳn bằng một vạch */
.pd-pay .pay-mix .pay-sum {
    grid-column: 1 / -1;
    margin: 2px 0 0; padding-top: 11px;
    border-top: 1px solid var(--gray-100);
}

@media (max-width: 480px) {
    .pd-pay .pay-mix { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}


/* ══════════════════════════════════════════════════════════
   NÚT CỘNG GÓC DƯỚI — DÙNG CHUNG CHO MỌI TRANG DANH SÁCH

   Trước đây chỉ trang Hàng hóa có, viết riêng trong hanghoa.css với tiền
   tố .hh-. Trang nào muốn có thì phải chép sang, rồi mỗi bản trôi một
   kiểu. Giờ một bản ở đây, partials/fab.php lo phần đánh dấu.

   Trên máy tính KHÔNG hiện: thanh công cụ đầu trang còn nguyên chỗ, mà
   một nút tròn trôi nổi đè lên bảng thì chỉ tổ che mất dòng cuối.
══════════════════════════════════════════════════════════ */
.fab, .fab-nen, .fab-bang { display: none; }

@media (max-width: 900px) {
    .fab {
        display: flex; align-items: center; justify-content: center;
        position: fixed; right: 16px; z-index: 210;
        /* Nằm trên thanh dưới, chừa cả vùng an toàn của máy có notch */
        bottom: calc(var(--bn-h) + var(--sab) + 16px);
        width: 54px; height: 54px;
        font-size: 20px; color: #fff; text-decoration: none;
        background: var(--blue); border: none; border-radius: 50%;
        box-shadow: 0 6px 20px rgba(37, 99, 235, .4);
        cursor: pointer;
        transition: transform .2s;
    }
    /* Xoay chéo thành dấu × khi bảng đang mở: cùng một nút, hai việc */
    .fab.mo { transform: rotate(45deg); }

    .fab-nen {
        display: block; position: fixed; inset: 0; z-index: 209;
        background: rgba(15, 23, 42, .4);
        opacity: 0; pointer-events: none;
        transition: opacity .2s;
    }
    .fab-nen.mo { opacity: 1; pointer-events: all; }

    .fab-bang {
        display: flex; flex-direction: column; gap: 4px;
        position: fixed; right: 16px; z-index: 211;
        bottom: calc(var(--bn-h) + var(--sab) + 80px);
        min-width: 216px; max-width: calc(100vw - 32px); padding: 7px;
        background: #fff; border: 1px solid var(--gray-200); border-radius: 14px;
        box-shadow: 0 12px 36px rgba(15, 23, 42, .2);
        opacity: 0; transform: translateY(10px); pointer-events: none;
        transition: opacity .18s, transform .18s;
    }
    .fab-bang.mo { opacity: 1; transform: translateY(0); pointer-events: all; }

    .fab-mot {
        display: flex; align-items: center; gap: 11px;
        padding: 11px 12px;
        font-family: inherit; font-size: 14.5px; font-weight: 600;
        color: var(--gray-800); text-align: left; text-decoration: none;
        background: none; border: none; border-radius: 10px; cursor: pointer;
    }
    .fab-mot > i:first-child {
        width: 32px; height: 32px; flex-shrink: 0;
        display: flex; align-items: center; justify-content: center;
        font-size: 14px; color: var(--gray-500);
        background: var(--gray-50); border-radius: 9px;
    }
    .fab-mot:active { background: var(--gray-50); }
    .fab-mot.chinh { color: var(--green); font-weight: 700; }
    .fab-mot.chinh > i:first-child { background: var(--green-lt); color: var(--green); }

    /* Nút nào đã có trong bảng của nút cộng thì đánh dấu .fab-thay, ở đây
       giấu đi. Giữ lại thì ở màn 360px chúng tràn xuống hai ba hàng, đẩy
       cả danh sách xuống dưới màn hình; mà bỏ chữ đi cho gọn thì thành
       dãy ô vuông chỉ có icon, nhìn không đoán ra cái nào là cái nào.

       Đánh dấu thẳng lên phần tử chứ không viết theo tên thẻ bọc: mỗi
       trang bọc thanh công cụ một kiểu (.toolbar-right, .search-row,
       .hh-tren-nut), viết theo thẻ bọc thì trang nào cũng phải thêm luật
       mới, quên một trang là nút hiện chồng lên nút cộng. */
    .fab-thay { display: none !important; }
}


/* ── Gợi ý từ kho mã vạch, trong modal "Mã chưa có trong danh mục" ──
   Hiện ảnh và tên tra được để người bán ĐỐI CHIẾU với món đang cầm trên
   tay trước khi lưu. Không có ảnh thì tra được cũng không dám tin: mã vạch
   siêu thị ghi nhầm là chuyện có thật, mà lưu nhầm tên thì mọi hóa đơn về
   sau đều sai theo. */
.np-goi {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 11px; margin-bottom: 12px;
    background: var(--green-lt);
    border: 1px solid #bbf7d0; border-radius: var(--rsm);
}
.np-goi img {
    width: 44px; height: 44px; flex-shrink: 0;
    object-fit: contain; background: #fff; border-radius: 8px;
}
.np-goi-chu { min-width: 0; }
.np-goi-chu b {
    display: block; font-size: 13.5px; font-weight: 700; color: var(--gray-900);
    line-height: 1.35;
}
.np-goi-chu small {
    display: block; margin-top: 2px;
    font-size: 11.5px; color: var(--gray-600);
}
/* Giá tham khảo bấm được — gạch chân để trông ra thứ bấm được, chứ không
   phải một con số đứng đó cho biết. */
.np-goi-chu u {
    cursor: pointer; font-weight: 700; color: var(--green);
    text-decoration-style: dashed; text-underline-offset: 2px;
}


/* ── Bảng kho tra cứu mã vạch (trang Dữ liệu) ── */
.mv-anh {
    width: 40px; height: 40px;
    object-fit: contain; background: #fff;
    border: 1px solid var(--gray-100); border-radius: 8px;
}
.tc-mv code { font-size: 12.5px; color: var(--gray-700); }

@media (max-width: 760px) {
    /* Thẻ trên điện thoại: ảnh bên trái, tên và mã bên phải. Cột ảnh không
       cần nhãn "Ảnh" — nhìn là biết, mà in nhãn ra thì mỗi thẻ thừa một
       dòng chữ xám vô nghĩa. */
    .tc-mv td[data-label="Ảnh"]::before { content: none !important; }
    .tc-mv .mv-anh { width: 46px; height: 46px; }
}

/* ══════════════════════════════════════════════════════════
   SỔ CÔNG NỢ THEO KHÁCH — pages/socongno.php
   Dựng theo lối sổ cái: mỗi dòng một phát sinh, cột Số dư cộng dồn,
   dòng chốt ở chân. Cuối năm chỉ cần nhìn dòng cuối là biết phải thu
   bao nhiêu, khỏi ngồi cộng tay từ ba màn khác nhau.
══════════════════════════════════════════════════════════ */
.cn-loc {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin-bottom: 16px;
}
.cn-tim { flex: 1 1 260px; min-width: 220px; position: relative; }

/* ── Hàng nút bên phải ô tìm ──
   Gom lại một cụm dính nhau, đẩy hết sang phải. Trước đây năm cái nút rời
   nằm rải theo chiều rộng còn thừa, mỗi khổ màn một kiểu xếp. */
.cn-thanh {
    display: flex; align-items: center; gap: 8px;
    margin-left: auto; flex-wrap: wrap;
}

/* Ô xổ chọn kỳ: cái nhãn "Kỳ" nằm chung một khung với ô xổ, trông như một
   nút có chữ chứ không phải hai thứ rời. */
.cn-ky {
    display: flex; align-items: center; gap: 8px;
    height: 40px; padding: 0 6px 0 12px;
    background: #fff;
    border: 1px solid var(--gray-200); border-radius: var(--rsm);
    cursor: pointer;
}
.cn-ky:focus-within { border-color: var(--blue-bd); box-shadow: 0 0 0 3px var(--blue-lt); }
.cn-ky > span {
    font-size: 12.5px; font-weight: 700; color: var(--gray-500);
    white-space: nowrap;
}
.cn-ky select {
    height: 100%; border: 0; outline: none;
    font-family: inherit; font-size: 13px; font-weight: 700;
    color: var(--gray-800); cursor: pointer;
    /* `background: none` sẽ xóa luôn cái mũi tên SVG của luật select
       chung, ô xổ trông thành một dòng chữ trơ không ai biết bấm được.
       Chỉ bỏ MÀU nền, giữ nguyên ảnh nền. */
    background-color: transparent;
    padding-right: 26px;
    background-position: right 6px center;
}

/* Máy nhỏ: ô nhập nào cũng cao 46px (luật chặn iOS phóng to), nên cái
   khung bọc ô xổ cũng phải cao theo — không thì nó lùn hơn mấy nút cạnh
   nó đúng 6px. */
@media (max-width: 900px) { .cn-ky { height: 46px; } }

.cn-ngay-o { display: flex; align-items: center; gap: 7px; }
.cn-ngay-o input { height: 40px; }
.cn-ngay-o > span { color: var(--gray-400); }

/* Nút chỉ có biểu tượng — vuông vức, không để chữ thừa chiếm chỗ */
.cn-icon { padding: 0 13px !important; }
.cn-icon i { font-size: 14px; }

/* Bốn ô tóm tắt. Ô cuối tô đậm vì đó là con số người ta cần. */
.cn-dau {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px; margin-bottom: 14px;
}
.cn-dau > div {
    padding: 12px 14px;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: var(--rsm);
    background: var(--gray-50, #f9fafb);
}
.cn-dau span { display: block; font-size: 12px; font-weight: 600; color: var(--gray-500); }
.cn-dau b {
    display: block; margin-top: 3px;
    font-size: 19px; font-weight: 800; color: var(--gray-900);
    font-variant-numeric: tabular-nums;
}
/* Bốn ô tóm tắt khi đang lọc trong sổ: viền đứt để thấy ngay đây KHÔNG
   phải số của cả kỳ, mà là số của mấy dòng đang lọc ra. Không đổi màu chữ
   — mấy con số ấy vẫn đúng, chỉ là đúng cho một phần. */
.cn-dang-loc > div { border-style: dashed !important; }

.cn-no      { color: var(--red) !important; }
.cn-tra-so  { color: var(--green) !important; }
.cn-chot    { border-color: var(--red) !important; background: var(--red-lt) !important; }
.cn-chot b  { color: var(--red) !important; font-size: 22px !important; }

.cn-bang { min-width: 760px; }
.cn-ngay { white-space: nowrap; }
.cn-noi  { color: var(--gray-600, #4b5563); font-size: 12.5px; }
/* Dòng khách trả tiền: nền xanh nhạt để phân biệt ngay với dòng ghi nợ */
/* Khoản đã trả xong: nền xanh rất nhạt, chữ phụ mờ đi để mắt chỉ dừng
   lại ở những khoản còn nợ. */
.cn-xong td { background: rgba(16, 185, 129, .05); }
.cn-xong .cn-ngay, .cn-xong .cn-noi { color: var(--gray-400); }
.nt-tong small { font-weight: 600; color: var(--gray-500); }

@media (max-width: 760px) {
    .cn-dau { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Màn hẹp: cụm nút xuống hàng riêng, trải đều hết bề ngang */
    .cn-thanh { margin-left: 0; width: 100%; }
    .cn-thanh .btn:not(.cn-icon) { flex: 1; justify-content: center; }
    .cn-ky { flex: 1 1 100%; }
    .cn-ky select { flex: 1; }
    .cn-ngay-o { flex: 1 1 100%; }
    .cn-ngay-o input { flex: 1; min-width: 0; }
}

/* Khi in: bỏ mọi thứ ngoài tờ sổ, cho vừa khổ A4 dọc */
@media print {
    .topbar, .bottom-nav, .cn-loc, .kh-luu-y, .toast { display: none !important; }
    .container { padding: 0 !important; }
    .card { border: none !important; box-shadow: none !important; padding: 0 !important; }
    .cn-bang { min-width: 0 !important; font-size: 11px !important; }
    .table-wrap { overflow: visible !important; }
}

/* Danh sách khách ở trang Sổ công nợ — bấm cả dòng để mở sổ người đó */
/* ── Nhãn tình trạng ở cột cuối ──
   Nhãn dùng chung (.kh-cho/.kh-xong) chỉ 11,5px và nền phẳng một màu nhạt,
   đặt cạnh mấy cột số 13px thì chữ tụt hẳn xuống, nhìn như bị mờ. Ở đây cho
   nó cỡ chữ ngang với phần còn lại của bảng, thêm viền và một chấm tròn để
   liếc qua là phân biệt được hai trạng thái mà không cần đọc chữ. */
.cn-tt {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px; border-radius: 999px;
    font-size: 12.5px; font-weight: 700; white-space: nowrap;
    border: 1px solid transparent;
}
.cn-tt::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; flex: 0 0 auto;
}
.cn-tt-xong { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.cn-tt-cho  { background: #fff7ed; border-color: #fed7aa; color: #b45309; }

/* ══════════════════════════════════════════════════════════
   NHÃN TÌNH TRẠNG — MỘT KIỂU DÙNG CHUNG CẢ PHẦN MỀM

   Cột tình trạng ở Sổ công nợ được làm lại cho dễ đọc: cỡ chữ ngang với
   phần còn lại của bảng, có viền, có một chấm tròn để liếc qua là phân
   biệt được mà không cần đọc chữ. Nhưng mấy trang khác thì mỗi nơi một
   kiểu — chữ 11,5px, nền phẳng một màu nhạt, không viền — nên cùng một
   ý "đã trả xong" mà ở hai trang trông như hai thứ khác nhau.

   Gom hết về đây. Cố ý KHÔNG đổi tên lớp trong markup: chỉ cần mấy tên
   cũ (.status-badge, .kh-xong, .hv-tt…) trỏ vào cùng một dáng là cả bộ
   đổi theo, khỏi phải sửa hàng chục chỗ sinh HTML rồi sót một chỗ.

   Ba màu, theo NGHĨA chứ không theo trang:
     xanh  — xong, đủ, không còn phải làm gì
     cam   — còn treo, còn thiếu, chờ xử lý
     xanh dương — đang dở dang, trả được một phần
     xám   — bỏ qua, không tính nữa
══════════════════════════════════════════════════════════ */
.cn-tt,
.status-badge,
.kh-xong, .kh-cho,
.hv-tt {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px; border-radius: 999px;
    font-size: 12.5px; font-weight: 700; white-space: nowrap;
    border: 1px solid transparent;
}
.cn-tt::before,
.status-badge::before,
.kh-xong::before, .kh-cho::before,
.hv-tt::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; flex: 0 0 auto;
}

/* ── Xong ── */
.cn-tt-xong, .status-badge.paid, .kh-xong, .hv-tt.hv-xong {
    background: #ecfdf5; border-color: #a7f3d0; color: #047857;
}
/* ── Còn treo ── */
.cn-tt-cho, .status-badge.unpaid, .kh-cho, .hv-tt.hv-moi {
    background: #fff7ed; border-color: #fed7aa; color: #b45309;
}
/* ── Dở dang ──
   Trước đây .status-badge.partial KHÔNG có luật nào: "Trả một phần" rơi
   về nhãn trắng trơn không màu, nhìn như lỗi hiển thị. Mà đó lại đúng là
   trạng thái đáng chú ý nhất — khách đã đưa một ít, còn thiếu một ít. */
.status-badge.partial {
    background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8;
}
/* ── Bỏ qua ── */
.hv-tt.hv-bo {
    background: var(--gray-100); border-color: var(--gray-200); color: var(--gray-500);
}

/* ── Cột "Nợ còn cũ nhất" ──
   Ngày ở trên, số ngày đã trôi qua ở dưới. Quá 90 ngày chuyển cam, quá 180
   ngày chuyển đỏ — lúc chốt sổ liếc một cái là biết phải gọi ai trước, khỏi
   ngồi trừ ngày. */
/* Chừa hẳn một khoảng bên trái. Cột trước nó là "Nợ còn lại" canh phải,
   nên con số tiền và ngày tháng dính sát vào nhau, đọc lướt qua tưởng là
   một cụm. */
.cn-cu-o { white-space: nowrap; padding-left: 26px !important; }
.cn-cu   { display: inline-flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.cn-cu b     { font-size: 13px; font-weight: 700; color: var(--gray-800); }
.cn-cu small { font-size: 11px; font-weight: 600; color: var(--gray-400); }
.cn-cu.hoi-lau small { color: var(--orange); }
.cn-cu.lau b         { color: var(--red); }
.cn-cu.lau small     { color: var(--red); font-weight: 700; }

.cn-ds { min-width: 1020px; }
.cn-kh { cursor: pointer; }
.cn-kh:hover td { background: var(--blue-lt); }
.cn-dc { color: var(--gray-500); font-size: 12.5px; }
.cn-lui { flex: 0 0 auto; }
@media (max-width: 760px) {
    /* Địa chỉ và Tổng bán nhường chỗ; hai cột nợ mới là thứ cần nhìn */
    /* Màn hẹp bỏ Địa chỉ (cột 4) và Tổng bán (cột 8). GIỮ cột "Nợ còn cũ
       nhất" — đó chính là thứ người ta mở sổ ra để xem. */
    .cn-ds thead th:nth-child(4), .cn-ds .cn-kh td:nth-child(4),
    .cn-ds thead th:nth-child(8), .cn-ds .cn-kh td:nth-child(8) { display: none; }
    .cn-ds tfoot .nt-tong td:nth-child(5) { display: none; }
    .cn-ds { min-width: 0; }
    .cn-ds th, .cn-ds td { padding: 9px 6px !important; font-size: 12.5px !important; }
}

/* Trang Sổ công nợ trải hết bề ngang màn hình */
.cn-rong { max-width: none !important; }

/* Chỉ PHẦN DỮ LIỆU cuộn, đầu bảng và dòng tổng đứng yên.
   Không để cả trang cuộn: khách nợ mấy chục khoản thì cuộn xuống là mất
   luôn tên cột lẫn dòng TỔNG CỘNG — hai thứ cần nhìn nhất. */
.cn-cuon { max-height: calc(100vh - 300px); overflow: auto; }
.cn-cuon thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--gray-50, #f9fafb);
    box-shadow: inset 0 -1px 0 var(--gray-200, #e5e7eb);
}
.cn-cuon tfoot td {
    position: sticky; bottom: 0; z-index: 2;
}
@media (max-width: 760px) { .cn-cuon { max-height: calc(100vh - 340px); } }
@media print { .cn-cuon { max-height: none !important; overflow: visible !important; } }

/* ══════════════════════════════════════════════════════════
   HỘP XÁC NHẬN THU TIỀN — thuno.js tự dựng, gắn thẳng vào body
   Nằm TRÊN màn thu nợ (z-index 800) nên phải cao hơn.
══════════════════════════════════════════════════════════ */
.tn-xn { z-index: 950; }
.tn-xn-hop { max-width: 460px; }

/* Số tiền để to nhất hộp: xác nhận là để nhìn đúng một con số đó */
.tn-xn-so {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    margin-bottom: 14px; padding: 14px 16px;
    border: 1.5px solid var(--green, #10b981);
    border-radius: var(--rsm);
    background: rgba(16, 185, 129, .07);
}
.tn-xn-so span { font-size: 12.5px; font-weight: 600; color: var(--gray-600, #4b5563); }
.tn-xn-so b {
    font-size: 26px; font-weight: 800; color: var(--green, #10b981);
    font-variant-numeric: tabular-nums; letter-spacing: -.5px;
}

.tn-xn-bang > div {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 7px 0; border-bottom: 1px dashed var(--gray-200, #e5e7eb);
    font-size: 13px;
}
.tn-xn-bang > div:last-child { border-bottom: none; }
.tn-xn-bang span { color: var(--gray-500); }
.tn-xn-bang b    { font-weight: 700; color: var(--gray-900); text-align: right; }

.tn-xn-ds {
    margin-top: 10px; padding: 10px 12px;
    border-radius: var(--rsm); background: var(--gray-50, #f9fafb);
    max-height: 150px; overflow: auto;
}
.tn-xn-ds > div {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 3px 0; font-size: 12.5px;
}
.tn-xn-ds span { color: var(--blue); font-weight: 700; }
.tn-xn-ds b    { font-variant-numeric: tabular-nums; }

/* Chuyển khoản: mã QR mang sẵn số tiền, đưa khách quét */
.tn-xn-qr {
    display: flex; gap: 14px; align-items: center;
    margin-top: 12px; padding: 12px;
    border: 1px solid var(--gray-200, #e5e7eb); border-radius: var(--rsm);
}
.tn-xn-qr-anh { flex: 0 0 132px; width: 132px; min-height: 132px; }
.tn-xn-qr-anh img, .tn-xn-qr-anh canvas { width: 100%; height: auto; display: block; }
.tn-xn-qr-chu { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tn-xn-qr-chu b     { font-size: 13px; color: var(--gray-900); }
.tn-xn-qr-chu span  { font-size: 15px; font-weight: 800; color: var(--blue);
                      font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tn-xn-qr-chu small { font-size: 11.5px; line-height: 1.5; color: var(--gray-500); }

@media (max-width: 560px) {
    .tn-xn-qr { flex-direction: column; align-items: stretch; }
    .tn-xn-qr-anh { flex: none; width: 100%; max-width: 220px; margin: 0 auto; }
}
.tn-xn-qr-loi { display: block; font-size: 12px; line-height: 1.5; color: var(--red); }

/* ══════════════════════════════════════════════════════════
   CHI TIẾT HÓA ĐƠN — partials/chitiethd.php
   Dùng lại .ct-dau và .ct-bang của modal chi tiết phiếu nợ để hai màn
   nhìn giống nhau. Chỉ khối tiền là riêng: hóa đơn còn có giảm giá,
   thu khác và phần còn nợ mà phiếu nợ không có.
══════════════════════════════════════════════════════════ */
.chd-tien { margin-top: 14px; }
.chd-tien > div {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 8px 2px;
    border-bottom: 1px dashed var(--gray-200, #e5e7eb);
    font-size: 13.5px;
}
.chd-tien > div:last-child { border-bottom: none; }
.chd-tien span { color: var(--gray-500); }
.chd-tien b    { font-weight: 700; color: var(--gray-900); font-variant-numeric: tabular-nums; }

.chd-tong {
    margin-top: 4px; padding: 11px 12px !important;
    border-top: 2px solid var(--gray-300, #d1d5db) !important;
    border-bottom: none !important;
}
.chd-tong span { font-weight: 700; color: var(--gray-900) !important; }
.chd-tong b    { font-size: 19px; color: var(--blue); }

.chd-no b    { font-size: 17px; color: var(--red); }
.chd-xong b  { color: var(--green); }

.chd-ls { margin-top: 14px; padding: 11px 13px; border-radius: var(--rsm);
          background: var(--gray-50, #f9fafb); }
.chd-ls > b { display: block; margin-bottom: 6px; font-size: 11px;
              text-transform: uppercase; letter-spacing: .3px; color: var(--gray-500); }
.chd-ls > div { display: flex; justify-content: space-between; gap: 12px;
                padding: 3px 0; font-size: 12.5px; }