/* ════════════════════════════════════════════
   pos/pos.css  —  CSS riêng cho module POS
════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');

/* ── VARIABLES ── */
:root {
    --blue:      #2563eb;
    --blue-h:    #1d4ed8;
    --blue-lt:   #eff6ff;
    --blue-bd:   #bfdbfe;
    --green:     #16a34a;
    --green-h:   #15803d;
    --green-lt:  #f0fdf4;
    --red:       #dc2626;
    --red-lt:    #fef2f2;
    --orange:    #ea580c;
    --orange-lt: #fff7ed;
    --gray-50:   #f9fafb;
    --gray-100:  #f3f4f6;
    --gray-200:  #e5e7eb;
    /* Thiếu hai bậc này là lỗi âm thầm: viết var(--gray-300) mà biến không
       tồn tại thì cả dòng khai báo màu bị bỏ, chữ kế thừa màu của thẻ cha —
       đúng kiểu đã làm dấu gạch "không nợ" ở trang Hóa đơn hiện màu ĐỎ. */
    --gray-300:  #d1d5db;
    --gray-400:  #9ca3af;
    --gray-500:  #6b7280;
    --gray-600:  #4b5563;
    --gray-700:  #374151;
    --gray-800:  #1f2937;
    --gray-900:  #111827;
    --bg:        #f0f4ff;
    --shadow:    0 4px 24px rgba(0,0,0,.07);
    --shadow-sm: 0 2px 8px rgba(0,0,0,.06);
    --radius:    14px;
    --rsm:       10px;
    /* Bo góc vừa, cho khối to hơn một ô nhập: hộp danh sách, thẻ, bảng chọn.
       Trước đây vài chỗ đã viết var(--rmd) nhưng biến này chưa từng được khai
       — CSS gặp biến không có thì bỏ luôn cả dòng, ra góc vuông sắc lẻm. */
    --rmd:       14px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Be Vietnam Pro', sans-serif;
    background: var(--bg);
    color: var(--gray-900);
    min-height: 100vh;
    font-size: 14px;
}

/* ── TOPBAR ── */
.topbar {
    background: #fff;
    border-bottom: 1px solid var(--gray-200);
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 200;
    box-shadow: 0 1px 8px rgba(37,99,235,.06);
    gap: 0;
}

.topbar-logo {
    font-size: 16px;
    font-weight: 800;
    color: var(--blue);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-right: 6px;
    flex-shrink: 0;
    letter-spacing: -.3px;
}

/* Thanh mục giữa: co được và cuộn ngang khi hết chỗ.

   Không có `min-width: 0` thì khối flex này không chịu co, nó cứ giữ
   nguyên bề rộng nội dung và CHØM LÊN cụm nút bên phải — thêm vài mục
   là mục cuối chui xuống dưới nút "Dữ liệu", bấm không trúng. */
.topbar-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
    /* KHÔNG đặt overflow ở đây: danh sách mục con là khối định vị tuyệt
       đối nằm bên trong, có overflow là nó bị cắt cụt, bấm vào "Hàng hóa"
       thấy y như không có gì xảy ra. Gộp còn bảy mục thì không cần cuộn
       nữa; hẹp quá đã có luật bỏ chữ chừa icon ở dưới. */
}
.nav-link { flex-shrink: 0; }

.nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-500);
    text-decoration: none;
    transition: all .15s;
    white-space: nowrap;
}
/* Bỏ chữ, chừa icon khi chưa đủ rộng. Mỗi mục có `title` nên rê chuột
   vẫn biết là gì. Mũi tên của mục có con cũng ẩn theo — chỉ còn icon thì
   một cái mũi tên bên cạnh trông như lỗi hiển thị.

   Ngưỡng hạ từ 1240 xuống 1000: khối bên phải vừa gom bốn nút thành một,
   từ 248px còn 29px. Giữ 1240 thì iPad nằm ngang (1008px) chỉ thấy một
   dãy icon trong khi thanh còn thừa hơn hai trăm điểm ảnh — đo được menu
   rộng 845 trên tổng 998. */
@media (max-width: 1000px) {
    .nav-link span, .nav-mui { display: none; }
    .nav-link { padding: 8px 11px; }
    .nav-link i { font-size: 14px; }
}

/* ── Mục có danh sách con ── */
.nav-nhom { position: relative; }
/* Chừa một dải dưới nút cha để chuột đi xuống chưa vội rời khỏi nhóm */
.nav-nhom::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 8px; }
.nav-cha {
    border: none; background: none; font-family: inherit; cursor: pointer;
}
.nav-nhom.active > .nav-cha { background: var(--blue-lt); color: var(--blue); }
.nav-mui { font-size: 9px !important; opacity: .55; margin-left: 1px; }

.nav-menu {
    position: absolute; left: 0; top: calc(100% + 6px); z-index: 900;
    min-width: 214px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--gray-200); border-radius: var(--rsm);
    box-shadow: var(--shadow);
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    /* `visibility` có trong transition nhưng THỜI LƯỢNG BẰNG 0, chỉ đặt độ
       trễ — nên nó vẫn đổi tức thì, không dẫm phải chuyện thuộc tính rời
       rạc bị dời sang cuối khoảng thời gian. Độ trễ 0,25s là quãng chờ khi
       ĐÓNG: chuột rời nút cha một nhúp rồi quay lại thì danh sách vẫn còn. */
    transition: opacity .14s, transform .14s, visibility 0s .25s;
}

/* Cầu nối vô hình lấp khoảng hở 6px giữa nút cha và danh sách.

   Không có nó thì chuột đi từ nút xuống danh sách phải băng qua một dải
   trống — vừa rời nút là mất hover, danh sách biến mất trước khi tay kịp
   tới. Đây là lý do hay gặp nhất khiến menu thả xuống "không bấm được". */
.nav-menu::before {
    content: ''; position: absolute;
    left: 0; right: 0; top: -10px; height: 10px;
}
/* Mở khi rê chuột, khi đi bằng bàn phím (focus-within), hoặc khi bấm
   trên máy cảm ứng (class .mo do JS đặt). */
.nav-nhom:hover > .nav-menu,
.nav-nhom:focus-within > .nav-menu,
.nav-nhom.mo > .nav-menu {
    opacity: 1; visibility: visible; transform: none;
    /* Mở thì không chờ — chỉ lúc đóng mới có độ trễ */
    transition: opacity .14s, transform .14s, visibility 0s 0s;
}

.nav-con {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 11px; border-radius: 8px;
    font-size: 13px; font-weight: 600; color: var(--gray-600);
    white-space: nowrap; text-decoration: none;
}
.nav-con i      { width: 15px; font-size: 12.5px; text-align: center; color: var(--gray-400); }
.nav-con:hover  { background: var(--gray-100); color: var(--gray-900); }
.nav-con:hover i{ color: var(--gray-600); }
.nav-con.active { background: var(--blue-lt); color: var(--blue); }
.nav-con.active i { color: var(--blue); }

.nav-link:hover  { background: var(--gray-100); color: var(--gray-700); }
.nav-link.active { background: var(--blue-lt);  color: var(--blue); }
.nav-link i      { font-size: 12.5px; }

.topbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.user-badge {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--gray-500);
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ── LAYOUT ── */
.container {
    max-width: 1300px;
    margin: 26px auto;
    padding: 0 20px;
}

/* ── CARD ── */
.card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px 26px;
    margin-bottom: 18px;
    border: 1px solid rgba(0,0,0,.04);
}

.card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-700);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.card-title .icon {
    width: 28px; height: 28px;
    background: var(--blue-lt);
    color: var(--blue);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

/* ── FORM FIELDS ── */
.field { display: flex; flex-direction: column; gap: 5px; }
label  { font-size: 12.5px; font-weight: 600; color: var(--gray-600); }
/* Nhãn giữ chỗ cho thẳng hàng: class đặt TRÊN chính thẻ label chứ
   không phải thẻ con bên trong, nên phải bắt cả hai kiểu — thiếu vế
   `label.invisible` thì dấu chấm giữ chỗ hiện trên màn hình. */
label.invisible, label .invisible { visibility: hidden; }
small  { font-size: 11px; color: var(--gray-400); font-weight: 400; }
.required { color: var(--red); }

input[type="text"],
input[type="number"],
input[type="search"] {
    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:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}

/* ── Ô nhiều dòng ──
   Trước nay không có kiểu dáng chung nào, nên mọi ô ghi chú trong phần mềm
   rơi về mặc định của trình duyệt: chữ máy đánh chữ, viền đen mảnh lõm vào.
   Đặt cạnh mấy ô một dòng bo tròn viền xám là thấy ngay nó lạc loài.
   Vài chỗ đã tự vá riêng (.no-tay textarea) — những chỗ ấy viết sau nên
   vẫn đè lên được luật chung này. */
textarea {
    width: 100%;
    min-height: 76px;
    padding: 10px 12px;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--rsm);
    font-size: 13.5px;
    font-family: inherit;
    line-height: 1.55;
    color: var(--gray-900);
    background: #fff;
    resize: vertical;
    transition: border-color .18s, box-shadow .18s;
    outline: none;
}
textarea:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}

/* ── CUSTOMER GRID ── */
.customer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    gap: 14px;
}

/* ── PRODUCT FORM ──
   PC  : tên | SL | đơn vị | đơn giá | nút  — 1 hàng
   Mobile: mỗi field 1 dòng riêng
── */
.product-form {
    display: grid;
    grid-template-columns: 2.2fr 90px 150px 160px auto;
    gap: 10px;
    align-items: end;
}

.btn-add-product {
    height: 40px;
    width: auto;
    padding: 0 16px;
    background: var(--green);
    color: #fff;
    border: none;
    border-radius: var(--rsm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background .18s;
    flex-shrink: 0;
    white-space: nowrap;
}

.btn-add-product:hover { 
    background: var(--green-h); 
}

/* ── AUTOCOMPLETE ── */
.ac-wrap  { position: relative; }
.dropdown {
    position: absolute;
    top: calc(100% + 4px); left: 0; right: 0;
    background: #fff;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--rsm);
    max-height: 230px;
    overflow-y: auto;
    display: none;
    z-index: 600;
    box-shadow: 0 8px 28px rgba(0,0,0,.11);
}
.dropdown.show { display: block; }
.dd-item {
    padding: 9px 13px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px solid var(--gray-100);
    transition: background .1s;
}
.dd-item:last-child  { border-bottom: none; }
.dd-item:hover       { background: var(--blue-lt); }
.dd-item .main       { font-weight: 600; color: var(--gray-900); }
.dd-item .sub        { font-size: 11.5px; color: var(--gray-400); margin-top: 1px; }

/* ── BUTTONS ── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 40px;
    padding: 0 18px;
    border-radius: var(--rsm);
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    border: none;
    cursor: pointer;
    transition: all .18s;
    white-space: nowrap;
    text-decoration: none;
}
.btn:disabled { opacity: .5; pointer-events: none; }

.btn-primary { background: var(--blue);   color: #fff; }
.btn-primary:hover { background: var(--blue-h); }
.btn-success { background: var(--green);  color: #fff; }
.btn-success:hover { background: var(--green-h); }
.btn-danger  { background: var(--red);    color: #fff; }
.btn-warning { background: var(--orange); color: #fff; }
.btn-warning:hover { background: #c2410c; }
.btn-outline {
    background: transparent;
    color: var(--gray-600);
    border: 1.5px solid var(--gray-200);
}
.btn-outline:hover { background: var(--gray-100); }
.btn-sm { height: 34px; padding: 0 13px; font-size: 12.5px; }

/* icon btn */
.icon-btn {
    width: 32px; height: 32px;
    border-radius: 8px;
    border: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px;
    transition: all .15s;
}
.icon-btn.edit  { background: var(--blue-lt);   color: var(--blue); }
.icon-btn.edit:hover  { background: var(--blue);   color: #fff; }
.icon-btn.del   { background: var(--red-lt);    color: var(--red); }
.icon-btn.del:hover   { background: var(--red);    color: #fff; }
.icon-btn.view  { background: var(--green-lt);  color: var(--green); }
.icon-btn.view:hover  { background: var(--green);  color: #fff; }
.icon-btn.print { background: var(--orange-lt); color: var(--orange); }
.icon-btn.print:hover { background: var(--orange); color: #fff; }

.action-btns { display: flex; gap: 5px; justify-content: center; }

/* ── TABLE ── */
.table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--gray-200); }
table { width: 100%; min-width: 600px; border-collapse: collapse; }
thead tr { background: var(--gray-50); }
th {
    padding: 10px 13px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: .5px;
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
}
td {
    padding: 10px 13px;
    font-size: 13.5px;
    border-bottom: 1px solid var(--gray-100);
    vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #fafbff; }

.td-idx     { color: var(--gray-400); font-weight: 700; width: 36px; }
.td-name    { font-weight: 600; }
.td-money   { font-weight: 700; color: var(--blue-h); }
.td-date    { font-size: 12px; color: var(--gray-500); }
.td-barcode { font-family: monospace; font-size: 12.5px; color: var(--gray-500); }
.td-actions { text-align: center; width: 80px; }
th.center, td.center { text-align: center; }

.inp-sm { height: 34px; width: 72px;  padding: 0 8px; font-size: 13px; border-radius: 8px; }
.inp-md { height: 34px; width: 110px; padding: 0 8px; font-size: 13px; border-radius: 8px; }

/* ── EMPTY STATE ── */
.empty-cell { text-align: center !important; padding: 46px 20px !important; color: var(--gray-400); }
.empty-cell i    { font-size: 34px; display: block; margin-bottom: 10px; opacity: .25; }
.empty-cell span { font-size: 13px; display: block; }

/* ── TOTAL BAR ── */
.total-bar {
    display: flex; justify-content: flex-end; align-items: center; gap: 14px;
    margin-top: 14px; padding: 13px 18px;
    background: var(--blue-lt); border-radius: 10px; border: 1px solid var(--blue-bd);
}
.total-bar .lbl { font-size: 13px; color: var(--gray-600); font-weight: 600; }
.total-bar .amt { font-size: 22px; font-weight: 800; color: var(--blue-h); }

/* ── BOTTOM ACTIONS ── */
.bottom-actions {
    display: flex; justify-content: space-between; align-items: center;
    gap: 10px; margin-top: 16px; flex-wrap: wrap;
}
.bottom-right { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── STAT STRIP ── */
.stat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.stat-box {
    background: #fff; border-radius: 12px;
    padding: 16px 20px;
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-sm);
}
.stat-num    { font-size: 24px; font-weight: 800; color: var(--blue-h); margin-bottom: 2px; }
.stat-num-sm { font-size: 17px; }
.stat-lbl    { font-size: 12px; color: var(--gray-400); font-weight: 500; }

/* ── SEARCH BAR ── */
.search-bar {
    display: flex; gap: 8px; align-items: center;
    margin-bottom: 16px; flex-wrap: wrap;
}
.search-bar input { max-width: 300px; }
.result-count { margin-left: auto; font-size: 12.5px; color: var(--gray-400); }

/* ── TOOLBAR ── */
.toolbar {
    display: flex; gap: 8px; align-items: center;
    margin-bottom: 16px; flex-wrap: wrap;
}
.toolbar input[type="search"] { max-width: 280px; }
.toolbar-right { margin-left: auto; display: flex; gap: 8px; }

/* ── BADGE ── */
.badge {
    display: inline-block; padding: 2px 9px;
    border-radius: 20px; font-size: 11.5px; font-weight: 700;
}
.badge-blue { background: var(--blue-lt); color: var(--blue); }

/* ── PAGINATION ── */
.pagination-wrap, .pagination-bar {
    display: flex; justify-content: space-between;
    align-items: center; margin-top: 16px;
    flex-wrap: wrap; gap: 10px;
}
.pagination { display: flex; gap: 5px; align-items: center; }
.page-info  { font-size: 12.5px; color: var(--gray-400); }
.page-btn {
    width: 34px; height: 34px;
    border-radius: 8px; border: 1.5px solid var(--gray-200);
    background: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600; color: var(--gray-600);
    transition: all .15s;
    font-family: inherit;
}
.page-btn:hover  { background: var(--blue-lt); border-color: var(--blue-bd); color: var(--blue); }
.page-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.page-btn:disabled { opacity: .35; pointer-events: none; }

/* ── MODAL ── */
.modal-bg {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    display: flex; align-items: center; justify-content: center;
    z-index: 800;
    opacity: 0; pointer-events: none;
    transition: opacity .2s;
}
.modal-bg.open { opacity: 1; pointer-events: all; }

.modal {
    background: #fff;
    border-radius: var(--radius);
    padding: 26px 28px;
    width: 100%; max-width: 460px;
    max-height: 90vh;
    overflow-y: auto;
    transform: translateY(16px);
    transition: transform .22s;
    box-shadow: 0 20px 60px rgba(0,0,0,.2);
}
.modal-bg.open .modal { transform: translateY(0); }
.modal-print { max-width: 800px; }

.modal-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 18px;
}
.modal-head h3 { font-size: 16px; font-weight: 700; }

.modal-close {
    background: var(--gray-100);
    border: none;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--gray-600);
    transition: all .15s;
}
.modal-close:hover {
    background: var(--gray-200);
    color: var(--gray-900);
}

.modal-footer {
    display: flex; gap: 8px; justify-content: flex-end;
    margin-top: 20px;
}

/* Dấu chọn "tự mở hóa đơn" — nằm bên trái, đẩy mấy nút về phải */
.in-tu {
    margin-right: auto;
    display: flex; align-items: center; gap: 7px;
    font-size: 13px; color: var(--gray-600, #4b5563);
    cursor: pointer; user-select: none;
}
.in-tu input { width: 16px; height: 16px; accent-color: var(--primary, #2563eb); cursor: pointer; }

/* form 2 cột bên trong modal */
.form-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 4px;
}

/* Kiểu dáng tờ hóa đơn in chuyển hết sang assets/css/hoadon-in.css —
   chỉ hai trang có in hóa đơn nạp file đó, không bắt mười mấy trang còn
   lại tải theo. Mấy luật cũ ở đây đặt theo px nên in ra máy nhiệt
   203dpi và máy laser 600dpi ra hai cỡ chữ khác hẳn nhau. */

/* ── TOAST ── */
.toast {
    position: fixed; bottom: 22px; right: 22px;
    background: var(--gray-900); color: #fff;
    padding: 11px 18px;
    border-radius: 12px;
    font-size: 13.5px; font-weight: 500;
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
    display: flex; align-items: center; gap: 9px;
    opacity: 0; transform: translateY(10px);
    transition: all .25s ease;
    z-index: 9999;
    pointer-events: none;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* Lời nhắc có nút thì phải bấm được — mặc định cả thẻ để pointer-events:none
   cho khỏi che mất thứ nằm dưới nó. */
.toast.co-nut { pointer-events: auto; }
.toast-nut {
    margin-left: 4px;
    padding: 5px 12px;
    border: 0; border-radius: 8px;
    background: #fff; color: var(--gray-900);
    font-size: 13px; font-weight: 700; font-family: inherit;
    cursor: pointer;
}
.toast-nut:hover { background: #e5e7eb; }
.toast.ok   i { color: #4ade80; }
.toast.err  i { color: #f87171; }
.toast.warn i { color: #fbbf24; }

/* ─────────────────────────────────────
   UNIT VARIANTS (Đơn vị sản phẩm)
───────────────────────────────────── */

.unit-variants-container {
    margin-top: 18px;
    padding: 18px;
    background: var(--gray-50);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius);
}

.unit-variants-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.unit-variants-header h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-700);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

#unitVariantsList {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 14px;
}

/* mỗi dòng đơn vị */
.unit-variant-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr auto auto;
    gap: 10px;
    align-items: end;
    background: #fff;
    padding: 12px;
    border-radius: var(--rsm);
    border: 1.5px solid var(--gray-200);
    transition: all .15s ease;
}

.unit-variant-row:hover {
    border-color: var(--blue-bd);
    box-shadow: 0 2px 10px rgba(37,99,235,.08);
}

/* input bên trong */
.unit-variant-row input[type="text"],
.unit-variant-row input[type="number"] {
    height: 38px;
    font-size: 13px;
}

.unit-variant-row .field {
    margin: 0;
}

.unit-variant-row .field label {
    font-size: 12px;
    margin-bottom: 4px;
    font-weight: 600;
    color: var(--gray-600);
}

/* Checkbox mặc định - FIXED */
.default-checkbox {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding-top: 0;
    align-self: center;
}

.default-checkbox label {
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-600);
    margin-bottom: 4px;
    order: -1;
}

.default-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--blue);
    margin: 0;
}

/* nút xóa đơn vị - ĐỎ ĐÔ */
.remove-variant-btn {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: none;
    background: #dc2626;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
    font-size: 16px;
    align-self: center;
}

.remove-variant-btn:hover {
    background: #b91c1c;
    transform: scale(1.05);
}

/* nút thêm đơn vị - CHUYÊN NGHIỆP */
.add-variant-btn {
    height: 40px;
    padding: 0 18px;
    border-radius: var(--rsm);
    border: none;
    background: var(--blue);
    color: white;
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all .15s;
}

.add-variant-btn:hover {
    background: var(--blue-h);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37,99,235,.25);
}

/* Form 2 cột cho tên và barcode */
.form-row-2 {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 14px;
    margin-bottom: 4px;
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 900px) {
    .customer-grid {
        grid-template-columns: 1fr 1fr;
    }
    .customer-grid > div:last-child { grid-column: 1/-1; }
}

@media (max-width: 640px) {
    .topbar  { padding: 0 14px; }
    .nav-link span { display: none; }   /* chỉ hiện icon trên mobile */
    .container { padding: 0 12px; margin: 14px auto; }
    .card { padding: 16px 14px; }

    /* customer: 1 cột */
    .customer-grid { grid-template-columns: 1fr; }
    .customer-grid > div:last-child { grid-column: auto; }

    /* product form: mỗi field 1 dòng, nút full width */
    .product-form {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
    }
    .product-form .field:first-child { grid-column: 1/-1; } /* tên full width */
    .product-form .field-btn {
        grid-column: 1/-1;
    }
    .btn-add-product {
        width: 100%;
        height: 44px;
        font-size: 15px;
    }

    /* bottom actions */
    .bottom-actions { flex-direction: column-reverse; }
    .bottom-actions .btn { width: 100%; }
    .bottom-right { width: 100%; }
    .bottom-right .btn { flex: 1; }

    /* modal */
    .modal { padding: 18px 14px; max-width: calc(100vw - 24px); }
    .form-col { grid-template-columns: 1fr; }
    .form-row-2 { grid-template-columns: 1fr; }
    
    /* Unit variant row mobile */
    .unit-variant-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .default-checkbox {
        flex-direction: row;
        align-items: center;
        padding-top: 0;
    }
    
    .default-checkbox label {
        order: 0;
        margin-bottom: 0;
        margin-left: 8px;
    }
    
    .remove-variant-btn {
        width: 100%;
        height: 40px;
    }
}
/* ════════════════════════════════════════════
   BARCODE — nút quét, badge, dòng vừa quét,
   bảng gán mã cho sản phẩm
════════════════════════════════════════════ */

/* Nút camera nằm trong ô "Tên sản phẩm / Barcode" ở index.php */
.field.has-scan { position: relative; }
.field.has-scan input#pName { padding-right: 46px; }

.scan-btn-inline {
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 36px;
    height: 36px;
    border: 1px solid var(--blue-bd);
    background: var(--blue-lt);
    color: var(--blue);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: all .15s;
}
.scan-btn-inline:hover { background: var(--blue); color: #fff; }

/* Badge "máy quét sẵn sàng" */
.scan-ready {
    margin-left: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--green);
    background: var(--green-lt);
    border: 1px solid #bbf7d0;
    padding: 2px 7px;
    border-radius: 999px;
    white-space: nowrap;
}

/* Dòng vừa được quét thêm vào — nháy xanh cho dễ thấy */
@keyframes row-flash-kf {
    0%   { background: #bbf7d0; }
    100% { background: transparent; }
}
tr.row-flash td { animation: row-flash-kf 1s ease-out; }

/* ── Bảng gán mã ── */
.assign-modal { max-width: 480px; }

.assign-code {
    font-family: 'Courier New', monospace;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--gray-900);
    background: var(--gray-100);
    border: 1px dashed var(--gray-400);
    border-radius: var(--rsm);
    padding: 12px;
    text-align: center;
}

.assign-hint {
    font-size: 13px;
    color: var(--gray-500);
    margin: 10px 0 12px;
}

.assign-search {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--rsm);
    font-family: inherit;
    font-size: 14px;
    outline: none;
}
.assign-search:focus { border-color: var(--blue); }

.assign-list {
    margin-top: 10px;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--gray-200);
    border-radius: var(--rsm);
}

.assign-item {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--gray-100);
    transition: background .12s;
}
.assign-item:last-child { border-bottom: none; }
.assign-item:hover { background: var(--blue-lt); }
.assign-item .ai-name { font-size: 14px; font-weight: 600; color: var(--gray-900); }
.assign-item .ai-sub  { font-size: 12px; color: var(--gray-500); margin-top: 2px; }

.assign-empty {
    padding: 20px 12px;
    text-align: center;
    font-size: 13px;
    color: var(--gray-400);
}

/* Cảnh báo check digit ở form sản phẩm */
.bc-note {
    font-size: 11.5px;
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 16px;
}
.bc-note.ok   { color: var(--green); }
.bc-note.warn { color: var(--orange); }
.bc-note.err  { color: var(--red); }

@media (max-width: 640px) {
    .scan-ready { display: none; }
}

/* Ô barcode ở form sản phẩm: input + nút camera */
.bc-input-wrap { position: relative; }

/* Nút sinh mã nội bộ, nằm cạnh nhãn "Barcode" */
.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);
}

/* Danh sách thả xuống ở MÉP PHẢI thanh trên (tài khoản, dữ liệu, đăng
   xuất). Phải neo theo mép phải chứ không mép trái như mấy menu giữa
   thanh — neo trái thì nó đổ ra ngoài màn hình. */
.nav-menu-phai { left: auto; right: 0; }
.tb-toi .nav-cha { gap: 7px; }
.nav-con-thoat { color: var(--red); }
.nav-con-thoat i { color: var(--red); }
.nav-con-thoat:hover { background: var(--red-lt); }

/* "Cài app" nằm trong danh sách thả xuống nên là <button>, không phải <a>
   như mấy mục kia — chỉnh lại cho giống hệt để không lộ ra là thứ khác loại. */
button.nav-con {
    width: 100%; border: none; background: none; cursor: pointer;
    font-family: inherit; font-size: inherit; text-align: left;
}