/**
 * components.css — PHASE 9.1 — DESIGN SYSTEM — Component Styles
 * ============================================================================
 * Nạp SAU tokens.css. File này "TÁI DA" (reskin) đúng các class Bootstrap
 * ĐANG DÙNG SẴN trong toàn hệ thống (đã xác nhận qua rà soát
 * html_admin_fragments/*.html — dùng nhất quán: btn, badge, card,
 * form-control, table, modal, nav-tabs, toast) — KHÔNG cần đổi bất kỳ
 * class nào trong HTML hiện có, KHÔNG đụng logic JS nào.
 *
 * 3 thành phần KHÔNG có sẵn trong Bootstrap (Skeleton/Empty State/Loading
 * dạng mới) được định nghĩa THÊM bằng class MỚI (bbv-skeleton,
 * bbv-empty-state, bbv-spinner) — dùng ở Phase 9.3+ khi áp dụng vào từng
 * Module cụ thể, KHÔNG áp dụng ở đây (đúng ranh giới Phase 9.1).
 * ============================================================================
 */

/* ============================================================================
   BOOTSTRAP VARIABLE BRIDGE — BỔ SUNG PHASE 1 (UI Revamp)
   Trước đây khối này CHỈ tồn tại trong <style> inline của admin/index.html
   (không có ở đây) — di chuyển nguyên giá trị về components.css vì đây
   đúng là nơi "tái da" các biến gốc của Bootstrap 5.3, để mọi component gốc
   (btn-primary, badge, focus ring, link...) tự động theo đúng bộ nhận diện
   thương hiệu thay vì màu xanh mặc định của Bootstrap. KHÔNG đổi giá trị.
   ============================================================================ */
:root {
  --bs-primary: var(--bbv-primary);
  --bs-primary-rgb: var(--bbv-primary-rgb);
  --bs-link-color: var(--bbv-primary);
  --bs-link-hover-color: #0e4a5c;
}

/* ============================================================================
   NAV-LINK — chuyển từ Phase 3a (di chuyển nguyên vẹn, KHÔNG đổi giá trị).
   Áp dụng chung cho mọi .nav-link (Sidebar, Tab, Pill...), rộng hơn phạm vi
   .bbv-sidebar .nav-link đã có riêng ở layout.css.
   ============================================================================ */
.nav-link {
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* ============================================================================
   BUTTON — bổ sung Phase 3a (di chuyển nguyên vẹn từ admin/index.html)
   ============================================================================ */
.btn:active { transform: scale(.97); }
.btn-primary { box-shadow: 0 2px 8px rgba(var(--bbv-primary-rgb), .18); }

/* ============================================================================
   STAT CARD (Dashboard) — bổ sung Phase 3a (di chuyển nguyên vẹn). Phần
   border/border-radius/box-shadow gốc của .stat-card đã bị .card (ở trên)
   ghi đè từ trước nên KHÔNG di chuyển theo (tránh đưa lại rule chết vào hệ
   thống) — chỉ 2 rule dưới đây là thật sự đang hiển thị.
   ============================================================================ */
.stat-card .stat-value { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; }
.stat-card .material-symbols-outlined { font-size: 28px; }

/* ============================================================================
   FONT — nạp Be Vietnam Pro (Google Fonts) + áp dụng font nền tảng
   ============================================================================ */
/* Be Vietnam Pro ĐÃ được nạp sẵn qua <link> trong <head> của admin/index.html
   thật (đã xác nhận trong Css_Main.html gốc) — dòng @import dưới đây chỉ
   để file này TỰ ĐỦ khi xem độc lập (không phụ thuộc phải có sẵn <head>
   gốc) — trình duyệt sẽ tự loại trùng request font giống hệt nhau, không
   tải 2 lần. */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body {
  font-family: var(--bbv-font-primary);
  font-size: var(--bbv-fs-base);
  line-height: var(--bbv-lh-normal);
  color: var(--bbv-color-text-primary);
  background-color: var(--bbv-color-bg-page);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--bbv-fw-semibold);
  line-height: var(--bbv-lh-tight);
  color: var(--bbv-color-text-primary);
}

.bbv-numeric, .bbv-code, code {
  font-family: var(--bbv-font-mono-numeric);
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   BUTTON
   ============================================================================ */
.btn {
  font-weight: var(--bbv-fw-medium);
  border-radius: var(--bbv-radius-md);
  padding: var(--bbv-space-2) var(--bbv-space-4);
  transition: background-color var(--bbv-transition-fast), border-color var(--bbv-transition-fast), box-shadow var(--bbv-transition-fast);
}
.btn:focus-visible {
  box-shadow: 0 0 0 3px var(--bbv-primary-200);
  outline: none;
}
.btn-primary {
  background-color: var(--bbv-primary-600);
  border-color: var(--bbv-primary-600);
}
.btn-primary:hover, .btn-primary:active {
  background-color: var(--bbv-primary-700);
  border-color: var(--bbv-primary-700);
}
.btn-outline-secondary {
  color: var(--bbv-color-text-secondary);
  border-color: var(--bbv-border-color-strong);
}
.btn-outline-secondary:hover {
  background-color: var(--bbv-color-bg-subtle);
  border-color: var(--bbv-gray-400);
  color: var(--bbv-color-text-primary);
}
.btn-danger { background-color: var(--bbv-danger-600); border-color: var(--bbv-danger-600); }
.btn-danger:hover { background-color: var(--bbv-danger-700); border-color: var(--bbv-danger-700); }
.btn-sm { padding: var(--bbv-space-1) var(--bbv-space-3); font-size: var(--bbv-fs-sm); }

/* ============================================================================
   BADGE
   ============================================================================ */
.badge {
  font-weight: var(--bbv-fw-medium);
  font-size: var(--bbv-fs-xs);
  padding: var(--bbv-space-1) var(--bbv-space-3);
  border-radius: var(--bbv-radius-full);
  letter-spacing: .01em;
}
.badge.bg-success { background-color: var(--bbv-success-50) !important; color: var(--bbv-success-700) !important; border: 1px solid rgba(22,163,74,.18); }
.badge.bg-danger  { background-color: var(--bbv-danger-50)  !important; color: var(--bbv-danger-700)  !important; border: 1px solid rgba(220,38,38,.18); }
.badge.bg-warning { background-color: var(--bbv-warning-50) !important; color: var(--bbv-warning-700) !important; border: 1px solid rgba(217,119,6,.18); }
.badge.bg-secondary { background-color: var(--bbv-color-bg-subtle) !important; color: var(--bbv-color-text-secondary) !important; border: 1px solid var(--bbv-border-color); }
.badge.bg-light { background-color: var(--bbv-color-bg-subtle) !important; color: var(--bbv-color-text-secondary) !important; border: 1px solid var(--bbv-border-color); }

/* ============================================================================
   CARD
   ============================================================================ */
.card, .table-card {
  border: var(--bbv-border-width) solid var(--bbv-border-color);
  border-radius: var(--bbv-radius-lg);
  box-shadow: var(--bbv-shadow-sm);
  background-color: var(--bbv-color-bg-surface);
}
.card:hover, .table-card:hover {
  box-shadow: var(--bbv-shadow-md);
  transition: box-shadow var(--bbv-transition-base);
}
/* [PHASE 5B-2 — Visual Refresh] Card Body — thêm khoảng thở, đúng phong
   cách Stripe/Linear (Card không bị chật). */
.card-body { padding: var(--bbv-space-5); }
.card .card-body.p-0 { padding: 0; } /* giữ nguyên trường hợp cố ý bỏ padding (bảng full-width trong Card) */

/* ============================================================================
   MODULE HEADER — PHASE 5B-2 (bổ sung theo phản hồi UI Revamp)
   Áp dụng ĐỒNG LOẠT cho 33+ Module đang dùng chung 1 cấu trúc có sẵn:
   hàng đầu tiên trong .bbv-section là <div class="d-flex justify-content-
   between align-items-center...">, chứa <h4> + Toolbar. Dùng CSS Selector
   theo VỊ TRÍ CẤU TRÚC (:first-child), KHÔNG sửa HTML từng Module — tự
   động ăn theo khi có Module mới dùng đúng mẫu này.
   ============================================================================ */
.bbv-section > .d-flex.justify-content-between.align-items-center:first-child {
  padding-bottom: var(--bbv-space-4);
  margin-bottom: var(--bbv-space-4) !important;
  border-bottom: 1px solid var(--bbv-border-color);
  flex-wrap: wrap; /* [PHASE 5B-5 — Responsive Audit] một số Module Header trong HTML gốc
     chưa có sẵn class flex-wrap — bổ sung qua CSS để Toolbar không tràn
     ngang trên Mobile, không cần sửa từng HTML. */
  row-gap: var(--bbv-space-2);
}
.bbv-section > .d-flex.justify-content-between.align-items-center:first-child > h4 {
  font-weight: var(--bbv-fw-bold);
  letter-spacing: -.015em;
  color: var(--bbv-dark);
}

/* ============================================================================
   PAGINATION — PHASE 5B-2. Toàn hệ thống dùng chung quy ước đặt id kết
   thúc "_pagination" (không có class riêng) — style đồng loạt bằng
   attribute selector, ăn theo mọi nơi đang có mà không cần sửa HTML.
   ============================================================================ */
[id$="_pagination"] { padding-top: var(--bbv-space-2); font-size: var(--bbv-fs-sm); color: var(--bbv-color-text-secondary); }
[id$="_pagination"] .btn-group .btn { min-width: 36px; }

/* ============================================================================
   FORM
   ============================================================================ */
.form-control, .form-select {
  border-color: var(--bbv-border-color-strong);
  border-radius: var(--bbv-radius-md);
  font-size: var(--bbv-fs-base);
  padding: var(--bbv-space-2) var(--bbv-space-3);
  transition: border-color var(--bbv-transition-fast), box-shadow var(--bbv-transition-fast);
}
/* [PHASE 5B-3] Hover tinh tế trước khi Focus — polish nhỏ, phong cách
   Stripe/Linear (viền đậm dần khi rê chuột, không đợi click mới phản hồi). */
.form-control:hover:not(:disabled):not(:focus), .form-select:hover:not(:disabled):not(:focus) {
  border-color: var(--bbv-gray-400);
}
.form-control:focus, .form-select:focus {
  border-color: var(--bbv-primary-500);
  box-shadow: 0 0 0 3px var(--bbv-primary-100);
}
.form-control::placeholder { color: var(--bbv-color-text-muted); opacity: 1; }
.form-label {
  font-weight: var(--bbv-fw-medium);
  font-size: var(--bbv-fs-sm);
  color: var(--bbv-color-text-secondary);
  margin-bottom: var(--bbv-space-1);
}
.form-check-input:checked {
  background-color: var(--bbv-primary-600);
  border-color: var(--bbv-primary-600);
}

/* ============================================================================
   TABLE
   ============================================================================ */
.table {
  font-size: var(--bbv-fs-sm);
}
.table thead th, .table-light {
  background-color: var(--bbv-color-bg-subtle) !important;
  color: var(--bbv-color-text-secondary);
  font-weight: var(--bbv-fw-semibold);
  font-size: var(--bbv-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 2px solid var(--bbv-border-color);
}
.table td { vertical-align: middle; }
.table-hover tbody tr:hover { background-color: var(--bbv-primary-50); }

/* ============================================================================
   MODAL
   ============================================================================ */
.modal-content {
  border: none;
  border-radius: var(--bbv-radius-lg);
  box-shadow: var(--bbv-shadow-xl);
}
.modal-header {
  border-bottom: 1px solid var(--bbv-border-color);
  padding: var(--bbv-space-5) var(--bbv-space-6);
}
.modal-title { font-weight: var(--bbv-fw-bold); letter-spacing: -.01em; color: var(--bbv-dark); }
.modal-body { padding: var(--bbv-space-6); }
.modal-footer { border-top: 1px solid var(--bbv-border-color); padding: var(--bbv-space-4) var(--bbv-space-6); }

/* ============================================================================
   NOTIFICATION (toast)
   ============================================================================ */
.bbv-toast, .toast {
  border-radius: var(--bbv-radius-md);
  box-shadow: var(--bbv-shadow-lg);
  font-size: var(--bbv-fs-sm);
  font-weight: var(--bbv-fw-medium);
}

/* ============================================================================
   LOADING
   ============================================================================ */
.bbv-spinner {
  display: inline-block;
  width: 1.25rem; height: 1.25rem;
  border: 2px solid var(--bbv-color-bg-subtle);
  border-top-color: var(--bbv-primary-600);
  border-radius: 50%;
  animation: bbv-spin 0.6s linear infinite;
}
@keyframes bbv-spin { to { transform: rotate(360deg); } }

/* ============================================================================
   SKELETON
   ============================================================================ */
.bbv-skeleton {
  background: linear-gradient(90deg, var(--bbv-color-bg-subtle) 25%, var(--bbv-gray-200) 37%, var(--bbv-color-bg-subtle) 63%);
  background-size: 400% 100%;
  animation: bbv-skeleton-wave 1.4s ease infinite;
  border-radius: var(--bbv-radius-sm);
}
@keyframes bbv-skeleton-wave { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ============================================================================
   EMPTY STATE
   ============================================================================ */
/* ============================================================================
   EMPTY STATE — PHASE 5B-4 (Visual Refresh)
   ============================================================================ */
.bbv-empty-state {
  text-align: center;
  padding: var(--bbv-space-12) var(--bbv-space-4);
  color: var(--bbv-color-text-muted);
  animation: bbvEmptyFadeIn .3s ease;
}
@keyframes bbvEmptyFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.bbv-empty-state .bbv-empty-icon {
  /* Đặt icon trong khung tròn nền nhạt — phong cách Stripe/Linear (empty
     state có "vật thể" rõ ràng thay vì icon trần nổi lơ lửng). */
  font-size: 1.75rem;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--bbv-space-3);
  color: var(--bbv-gray-400);
  background: var(--bbv-color-bg-subtle);
  border-radius: var(--bbv-radius-full);
}
.bbv-empty-state .bbv-empty-title {
  font-weight: var(--bbv-fw-medium);
  color: var(--bbv-color-text-secondary);
  margin-bottom: var(--bbv-space-1);
}

/* ============================================================================
   ROW BACKGROUND (Table UX) — PHASE 9.5
   Dùng cho bảng "Khách hàng & License" — màu NHẠT theo đúng yêu cầu, khác
   .table-danger/.table-warning mặc định Bootstrap (đậm hơn yêu cầu).
   ============================================================================ */
.bbv-row-danger  > td { background-color: var(--bbv-danger-50) !important; }
.bbv-row-warning > td { background-color: var(--bbv-warning-50) !important; }

/* ============================================================================
   NAV-LINK PLACEHOLDER "SẮP RA MẮT" — dành cho Module chưa xây (Bán hàng/
   Phần thưởng) — CHỈ hiển thị, không có hành vi điều hướng.
   ============================================================================ */
.bbv-nav-link-soon {
  display: flex;
  align-items: center;
  gap: var(--bbv-space-3);
  padding: var(--bbv-space-3) var(--bbv-space-5);
  color: rgba(255,255,255,0.35);
  cursor: not-allowed;
  font-size: var(--bbv-fs-sm);
}
.bbv-nav-link-soon .bbv-nav-soon-badge {
  margin-left: auto;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--bbv-radius-full);
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.5);
}

/* ============================================================================
   CUSTOMER HUB CARD — PHASE 9.5.6
   ============================================================================ */
.bbv-customer-card {
  transition: transform var(--bbv-transition-base), box-shadow var(--bbv-transition-base);
}
.bbv-customer-card:not(.bbv-customer-card-soon):hover {
  transform: translateY(-2px);
  box-shadow: var(--bbv-shadow-md);
}
/* PHASE 9.8 — Accessibility: viền focus RÕ RÀNG khi điều hướng bằng phím
   Tab (role="button" + tabindex="0" đã thêm vào HTML) — thiếu bước này
   thì tabindex chỉ giúp "tới được" bằng phím nhưng KHÔNG THẤY đang ở đâu,
   không đạt yêu cầu Accessibility thật sự. */
.bbv-customer-card:focus-visible {
  outline: 3px solid var(--bbv-primary-300);
  outline-offset: 2px;
}
.bbv-customer-card-soon {
  opacity: 0.65;
  cursor: not-allowed;
}

/* ============================================================================
   LICENSE BADGE (Header) — PHASE 9.4
   ============================================================================ */
.bbv-license-badge {
  font-size: var(--bbv-fs-xs);
  font-weight: var(--bbv-fw-medium);
  padding: var(--bbv-space-1) var(--bbv-space-3);
  border-radius: var(--bbv-radius-full);
  white-space: nowrap;
}
.bbv-license-success { background: var(--bbv-success-50); color: var(--bbv-success-700); }
.bbv-license-warning { background: var(--bbv-warning-50); color: var(--bbv-warning-700); }
.bbv-license-danger  { background: var(--bbv-danger-50);  color: var(--bbv-danger-700); }

/* ============================================================================
   TABS — PHASE 5 (bổ sung theo phản hồi UI Revamp) — THIẾT KẾ LẠI HOÀN TOÀN,
   không còn dùng giao diện mặc định Bootstrap nav-tabs (gạch chân mảnh,
   không có nền, không có trạng thái hover rõ). Áp dụng ĐỒNG BỘ cho toàn bộ
   9 khối Tab trong hệ thống (Kho, Báo cáo Doanh thu, Check Serial, Tích
   điểm, Phần thưởng, QR Check, Module Manager, Barcode, Label Designer...)
   — chỉ cần đổi CSS 1 nơi, không cần sửa từng HTML Tab riêng lẻ.
   ============================================================================ */
.nav-tabs {
  border-bottom: none;
  background: var(--bbv-color-bg-subtle);
  padding: var(--bbv-space-1);
  border-radius: var(--bbv-radius-md);
  gap: var(--bbv-space-1);
  display: flex;
  flex-wrap: wrap;
}
.nav-tabs .nav-item { margin-bottom: 0; }
.nav-tabs .nav-link {
  border: none;
  background: transparent;
  color: var(--bbv-color-text-secondary);
  font-weight: var(--bbv-fw-semibold);
  font-size: var(--bbv-fs-sm);
  min-height: 44px;
  padding: 0 var(--bbv-space-5);
  border-radius: var(--bbv-radius-sm);
  display: flex;
  align-items: center;
  transition: background-color var(--bbv-transition-fast), color var(--bbv-transition-fast);
}
.nav-tabs .nav-link:hover:not(.active) {
  background: rgba(var(--bbv-primary-rgb), .08);
  color: var(--bbv-primary-700);
  border-color: transparent;
}
.nav-tabs .nav-link.active {
  background: var(--bbv-color-bg-surface);
  color: var(--bbv-primary-700);
  font-weight: var(--bbv-fw-bold);
  box-shadow: var(--bbv-shadow-xs);
}
.nav-tabs .nav-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--bbv-primary-200);
}
/* Responsive: màn hẹp — Tab tràn dòng thì cuộn ngang thay vì xuống dòng lộn xộn */
@media (max-width: 576px) {
  .nav-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .nav-tabs .nav-link { white-space: nowrap; padding: 0 var(--bbv-space-4); }
}

/* ============================================================================
   LINE-ITEM TABLE — PHASE 5C (theo yêu cầu tối ưu Form Đơn bán hàng/Phiếu
   nhập hàng). Bảng dòng sản phẩm dùng input/select cỡ nhỏ (form-control-sm/
   form-select-sm) để vừa nhiều cột — nhưng mặc định Bootstrap NÉN quá chật.
   Đặt riêng class .bbv-lineitem-table để CHỈ áp dụng cho 2 bảng này, KHÔNG
   ảnh hưởng .form-control-sm/.form-select-sm dùng ở nơi khác (bộ lọc,
   thanh công cụ...) trong toàn hệ thống. */
.bbv-lineitem-table td {
  padding-top: var(--bbv-space-2);
  padding-bottom: var(--bbv-space-2);
  vertical-align: middle;
}
.bbv-lineitem-table .form-control-sm,
.bbv-lineitem-table .form-select-sm {
  font-size: var(--bbv-fs-sm);
  padding: var(--bbv-space-2) var(--bbv-space-2);
  min-height: 38px;
}
.bbv-lineitem-table .input-group .form-select,
.bbv-lineitem-table .input-group .form-control {
  min-height: 38px;
  font-size: var(--bbv-fs-sm);
}
/* Nút xoá dòng — căn giữa gọn hơn thay vì lọt thỏm trong ô hẹp */
.bbv-lineitem-table td:last-child { text-align: center; }

/* ============================================================================
   MODAL FORM — NHÓM THEO CARD CHỨC NĂNG — PHASE 5C (theo yêu cầu redesign
   Form Đơn bán hàng/Phiếu nhập hàng: Khối 1 Thông tin > Khối 2 Sản phẩm >
   Khối 3 Thanh toán > Khối 4 Footer Action Bar, mỗi khối 1 Card, nền khu
   vực thân Modal khác hẳn nền Card để phân tách rõ — giảm cảm giác "1
   form dài lê thê" / "bảng Excel".
   ============================================================================ */
.bbv-modal-body-grouped {
  background: var(--bbv-color-bg-subtle);
  padding: var(--bbv-space-5);
}
.bbv-form-card {
  border: 1px solid var(--bbv-border-color);
  box-shadow: none; /* đã nổi khối nhờ nền xám xung quanh — không cần thêm đổ bóng, tránh rối mắt */
}
.bbv-form-card-header {
  background: var(--bbv-color-bg-surface);
  font-weight: var(--bbv-fw-semibold);
  color: var(--bbv-dark);
  display: flex;
  align-items: center;
  gap: var(--bbv-space-2);
}
.bbv-form-card-header .material-symbols-outlined {
  font-size: 20px;
  color: var(--bbv-primary-600);
}

/* ---- Footer Action Bar (Khối 4) — nền khác hẳn thân Modal, gộp Tạm
   tính/Tổng cộng + nút thao tác thành 1 dải rõ ràng thay vì 2 phần tách rời. ---- */
.bbv-modal-actionbar {
  background: var(--bbv-color-bg-subtle);
  justify-content: space-between;
  align-items: center;
  gap: var(--bbv-space-4);
  flex-wrap: wrap;
}
.bbv-actionbar-totals { line-height: 1.5; }
.bbv-actionbar-subtotal { font-size: var(--bbv-fs-sm); color: var(--bbv-color-text-secondary); }
.bbv-actionbar-grandtotal { font-size: var(--bbv-fs-xl); font-weight: var(--bbv-fw-bold); color: var(--bbv-dark); }
.bbv-actionbar-buttons { display: flex; gap: var(--bbv-space-2); }
@media (max-width: 576px) {
  .bbv-modal-actionbar { flex-direction: column; align-items: stretch; }
  .bbv-actionbar-totals { text-align: center; }
  .bbv-actionbar-buttons { justify-content: stretch; }
  .bbv-actionbar-buttons .btn { flex: 1; }
}

/* ============================================================================
   PHASE R1 — BẢNG DÒNG SẢN PHẨM ĐỘNG → CARD TRÊN MOBILE
   Áp dụng cho .bbv-lineitem-table (Báo giá/Đơn bán hàng/Phiếu nhập hàng).
   Kỹ thuật: giữ NGUYÊN cấu trúc <table><tr><td> (để mọi querySelectorAll/
   recalcRow/recalcTotals hoạt động y hệt cũ) — CHỈ đổi CÁCH HIỂN THỊ bằng
   display:block + đọc nhãn từ data-label đã thêm vào từng <td>. KHÔNG đổi
   1 dòng JS tính toán nào.
   ============================================================================ */
@media (max-width: 767px) {
  .bbv-lineitem-table thead { display: none; }
  .bbv-lineitem-table, .bbv-lineitem-table tbody, .bbv-lineitem-table tr {
    display: block; width: 100%;
  }
  .bbv-lineitem-table tr {
    border: 1px solid var(--bbv-border-color);
    border-radius: var(--bbv-radius-lg);
    margin: 0 var(--bbv-space-3) var(--bbv-space-3);
    padding: var(--bbv-space-3);
    background: var(--bbv-color-bg-surface);
  }
  .bbv-lineitem-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bbv-space-3);
    padding: var(--bbv-space-2) 0;
    border: none !important;
    text-align: right;
  }
  .bbv-lineitem-table td::before {
    content: attr(data-label);
    font-weight: var(--bbv-fw-semibold);
    font-size: var(--bbv-fs-sm);
    color: var(--bbv-color-text-secondary);
    text-align: left;
    flex-shrink: 0;
  }
  /* Ô không có nhãn (data-label="") — không hiện dòng nhãn trống */
  .bbv-lineitem-table td[data-label=""]::before { display: none; }
  .bbv-lineitem-table td .form-select,
  .bbv-lineitem-table td .form-control,
  .bbv-lineitem-table td .input-group {
    max-width: 62%;
    margin-left: auto;
  }
  /* [FIX — Vấn đề #3] "Số Lô (FEFO)" (nhãn dài + select rộng) và "Chiết
     khấu" (input-group 2 phần tử: select loại + input giá trị) bị max-width:
     62% ở trên bó quá chật so với các cột khác, trông "co ngắn lại" mất cân
     đối. Đổi RIÊNG 2 cột này sang bố cục DỌC (nhãn trên, control full-width
     dưới) thay vì nhồi ngang — không đụng bố cục các cột khác. Dùng
     [data-label*="..."] (chứa chuỗi) để khớp cả biến thể tên nhãn khác nhau
     giữa các Module dùng chung .bbv-lineitem-table (Báo giá/Đơn bán hàng/
     Phiếu nhập hàng — có thể ghi "Số Lô" hoặc "Số Lô (FEFO)"). */
  .bbv-lineitem-table td[data-label*="Số Lô"],
  .bbv-lineitem-table td[data-label="Chiết khấu"] {
    flex-direction: column;
    align-items: stretch;
  }
  .bbv-lineitem-table td[data-label*="Số Lô"] .form-select,
  .bbv-lineitem-table td[data-label="Chiết khấu"] .input-group {
    max-width: 100%;
    margin-left: 0;
    margin-top: var(--bbv-space-1);
  }
  /* [FIX — Vấn đề #4, Sub Phase 7.1] Cột "Ảnh" (thumbnail sản phẩm) —
     `<td>` cha có display:flex (rule chung ở trên) khiến div/ảnh con bị
     CO HẸP WIDTH theo flex mặc định (flex-shrink:1) trong khi HEIGHT giữ
     nguyên cố định -> ảnh bên trong (object-fit:cover) bị NÉN MÉO theo
     chiều ngang, trông như "1 cái que". SỬA: ép flex-shrink:0 cho khối
     thumbnail — giữ ĐÚNG kích thước vuông đã đặt, không bị flex co lại.
     Cũng bỏ nhãn "Ảnh" bên trái (dòng data-label) — thumbnail tự nói lên
     đủ ý nghĩa, không cần nhãn chữ kèm theo trên Card Mobile. */
  .bbv-lineitem-table td[data-label="Ảnh"] {
    justify-content: center;
  }
  .bbv-lineitem-table td[data-label="Ảnh"]::before { display: none; }
  .bbv-lineitem-table td[data-label="Ảnh"] > div {
    flex-shrink: 0;
  }
  /* Thành tiền — nổi bật hơn phần còn lại, giống 1 dòng "kết quả" của Card */
  .bbv-lineitem-table td[data-label="Thành tiền"] {
    border-top: 1px dashed var(--bbv-border-color) !important;
    margin-top: var(--bbv-space-1);
    padding-top: var(--bbv-space-3);
    font-weight: var(--bbv-fw-bold);
    color: var(--bbv-dark);
  }
  /* Nút xoá dòng — đặt cuối Card, chiếm full-width, có nhãn chữ rõ ràng
     thay vì chỉ icon (đúng yêu cầu "nút thao tác đặt cuối Card"). */
  .bbv-lineitem-table td:has(.bbv-row-remove-btn) {
    justify-content: stretch;
    margin-top: var(--bbv-space-2);
  }
  .bbv-row-remove-btn {
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: var(--bbv-space-1);
  }
  .bbv-row-remove-label { display: inline; }
}
/* Desktop/Tablet: chỉ hiện icon (giữ nguyên giao diện gọn như cũ), chữ
   "Xoá dòng" CHỈ xuất hiện ở dạng Card trên Mobile. */
@media (min-width: 768px) {
  .bbv-row-remove-label { display: none; }
}

