body {
  background-color: #f1f5f9;
}
main.container,
main.container-fluid {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 8px 24px -12px rgba(15, 23, 42, .12);
}
table.table-sm td, table.table-sm th {
  padding: 0.25rem 0.5rem;
}

/* EasyInvoice: nút Tác vụ (Tải PDF / Preview) nhỏ gọn */
.easyinvoice-action-btn {
  font-size: 0.7rem;
  line-height: 1.2;
  padding: 0.15rem 0.35rem;
  border-radius: 0.2rem;
}

/* ===================================================================
   Bảng dữ liệu hiện đại (.data-table) — dùng cho danh sách đơn hàng
   =================================================================== */
.data-card {
  border: 1px solid #e7ecf3;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.data-card > .table-responsive { border-radius: 12px; }

/* Tiêu đề khung bảng */
.data-card > .data-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .7rem .9rem;
  border-bottom: 1px solid #eef2f7;
  background: #fff;
}
/* Ghi chú phụ trong tiêu đề khung (vd: cập nhật lúc nào, bởi ai).
   margin-right:auto để nó đứng ngay sau tiêu đề, đẩy các pill về bên phải. */
.data-card > .data-card-header .data-card-note {
  margin-right: auto;
  font-size: .8rem;
  color: #94a3b8;
  font-weight: 500;
}
.data-card > .data-card-header .data-card-note .stock-updated.is-stale {
  color: #b45309;
  font-weight: 600;
}
.data-card > .data-card-header h5,
.data-card > .data-card-header .title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
}

/* Khung cuộn để hàng tiêu đề dính lại khi lăn chuột.
   Phải có max-height: .table-responsive của Bootstrap là overflow-x:auto nên
   đã là một scroll container — position:sticky của thead neo theo khung này
   chứ không theo cả trang. Khung không cao giới hạn thì không bao giờ cuộn,
   nên tiêu đề trông như không dính. */
.table-scroll {
  max-height: calc(100vh - 260px);
  min-height: 240px;
  overflow: auto;
}
@media (max-width: 767.98px) {
  .table-scroll { max-height: calc(100vh - 200px); }
}

.data-table {
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .9rem;
}
.data-table > thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f8fafc;
  border: 0;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: .7rem .75rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #64748b;
  white-space: nowrap;
}
.data-table > tbody td {
  border: 0;
  border-bottom: 1px solid #f1f5f9;
  padding: .6rem .75rem;
  vertical-align: middle;
  color: #1e293b;
}
.data-table > tbody tr:last-child td { border-bottom: 0; }
.data-table > tbody tr { transition: background .12s ease; }
.data-table > tbody tr:hover { background: #f8fbff; }
.data-table > tbody tr.is-selected { background: #eef4ff; }
/* Dòng tổng cuối bảng */
.data-table > tbody tr.row-total {
  background: #f8fafc;
  border-top: 2px solid #e2e8f0;
}
.data-table > tbody tr.row-total:hover { background: #f8fafc; }
.data-table > tbody tr.row-total td { color: #0f172a; }
.data-table .cell-muted { color: #94a3b8; }
.data-table .cell-money {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
}
.data-table .cell-idx { color: #94a3b8; font-size: .82rem; }
.data-table .cell-strong { font-weight: 600; }
.data-table .cell-num {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
}

/* Bảng nhiều cột, cần gọn hơn */
.data-table.table-compact > thead th { padding: .5rem .5rem; }
.data-table.table-compact > tbody td { padding: .45rem .5rem; }

/* Dòng cần chú ý */
.data-table > tbody tr.row-alert > td { background: #fff5f5; }
.data-table > tbody tr.row-alert:hover > td { background: #ffecec; }

/* Tiêu đề cột bấm để sắp xếp */
.data-table > thead th a.th-sort {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  white-space: nowrap;
}
.data-table > thead th a.th-sort i { opacity: .45; font-size: .85em; }
.data-table > thead th a.th-sort:hover { color: #1d4ed8; }
.data-table > thead th a.th-sort:hover i { opacity: .9; }
.data-table > thead th a.th-sort.is-on { color: #1d4ed8; }
.data-table > thead th a.th-sort.is-on i { opacity: 1; }

/* ===== Dòng đang trỏ / đang chọn thì nổi hẳn lên =====
   Bảng nhiều dòng, mắt hay lạc sang dòng bên cạnh khi dò từ tên hàng sang
   cột số ở tận bên phải. */
.table-focus > tbody tr:hover > td,
.table-focus > tbody tr.is-focused > td {
  background: #eef4ff;
  color: #0f172a;
  /* Làm đậm bằng text-shadow chứ KHÔNG đổi font-weight: cột Tên VTHH co giãn
     theo nội dung, chữ đậm rộng hơn nên tên dài sẽ xuống hàng và dòng nhảy
     chiều cao mỗi lần rê chuột. Cách này giữ nguyên kích thước chữ. */
  text-shadow: 0 0 .32px currentColor;
}
/* Dòng đã bấm chọn: đậm hơn hover + vạch màu bên trái để không mất dấu khi
   rê chuột sang dòng khác */
.table-focus > tbody tr.is-focused > td {
  background: #dfe9ff;
}
.table-focus > tbody tr.is-focused > td:first-child {
  box-shadow: inset 3px 0 0 #1d4ed8;
}
.table-focus > tbody tr.is-focused .cell-idx { color: #1d4ed8; }
/* Bàn phím: Tab tới nút copy trong dòng cũng làm sáng dòng đó */
.table-focus > tbody tr:focus-within > td { background: #eef4ff; }

/* Dòng tổng ở chân bảng */
.data-table > tfoot td {
  border: 0;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  padding: .55rem .75rem;
  font-weight: 700;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}
/* Chỉ ghim dòng tổng khi bảng nằm trong khung cuộn — ngoài khung thì sticky
   sẽ dán nó vào đáy màn hình, gây rối ở các trang khác đang dùng tfoot. */
.table-scroll .data-table > tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 2;
}

/* Ô trống hiển thị gạch ngang mờ thay vì để trắng trơn */
.data-table .cell-empty::after {
  content: "—";
  color: #cbd5e1;
}

/* Link ID / khách hàng */
.data-table a.link-quiet {
  color: #1d4ed8;
  text-decoration: none;
  font-weight: 600;
}
.data-table a.link-quiet:hover { text-decoration: underline; }

/* Nút copy nhỏ trong ô */
.cell-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
  color: #94a3b8;
  line-height: 1;
  transition: color .12s, border-color .12s, background .12s;
}
.cell-copy-btn:hover { color: #2563eb; border-color: #bfdbfe; background: #eff6ff; }

/* Badge trạng thái mềm (pastel) thay badge đặc */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .22rem .6rem;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  border: 1px solid transparent;
}
.status-pill::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.status-none      { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.status-can_draft { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.status-draft     { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.status-signed    { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.status-unknown   { background: #f8fafc; color: #64748b; border-color: #e2e8f0; }

/* Bản đặt tên theo màu của cùng bộ pill trên */
.pill-red    { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.pill-blue   { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.pill-amber  { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.pill-green  { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.pill-slate  { background: #f8fafc; color: #64748b; border-color: #e2e8f0; }

/* ===== Thẻ thống kê đầu trang — NỀN MÀU ĐẦY ===== */
.stat-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.stat-card {
  flex: 1 1 170px;
  min-width: 158px;
  display: block;
  padding: .6rem .85rem;
  border: 0;
  border-radius: 12px;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 12px -6px rgba(15, 23, 42, .45);
  transition: box-shadow .14s, transform .14s, filter .14s;
}
.stat-card:hover {
  color: #fff;
  filter: brightness(1.06);
  box-shadow: 0 10px 22px -8px rgba(15, 23, 42, .5);
  transform: translateY(-2px);
}
.stat-card .stat-label {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
  margin-bottom: .1rem;
}
.stat-card .stat-value {
  display: block;
  font-size: 1.2rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
.stat-card .stat-value small { color: rgba(255, 255, 255, .8) !important; }
.stat-card .stat-sub {
  display: block;
  font-size: .78rem;
  color: rgba(255, 255, 255, .9);
  font-variant-numeric: tabular-nums;
}
.stat-card .stat-sub .btn-link { color: #fff !important; font-weight: 600; }
.stat-card .stat-sub .btn-link:hover { color: #fff !important; text-decoration: underline !important; }
.stat-card.is-active {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 0 0 5px rgba(15, 23, 42, .18),
              0 8px 18px -8px rgba(15, 23, 42, .5);
}
.stat-card.is-dim { opacity: .5; }

/* Tên theo trạng thái hoá đơn (dùng ở trang Đơn hàng / EasyInvoice) */
.stat-none      { background: linear-gradient(135deg, #ef4444, #dc2626); }
.stat-can_draft { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.stat-draft     { background: linear-gradient(135deg, #f59e0b, #d97706); }
.stat-signed    { background: linear-gradient(135deg, #22c55e, #16a34a); }
.stat-total     { background: linear-gradient(135deg, #475569, #1e293b); }

/* Tên theo MÀU — cho các trang không gắn với trạng thái hoá đơn (vd Tồn kho).
   Thiếu nhóm này thì thẻ chỉ có color:#fff mà không có nền -> chữ trắng trên
   nền trắng, nhìn như mất chữ. */
.stat-slate     { background: linear-gradient(135deg, #475569, #1e293b); }
.stat-blue      { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.stat-green     { background: linear-gradient(135deg, #22c55e, #16a34a); }
.stat-amber     { background: linear-gradient(135deg, #f59e0b, #d97706); }
.stat-red       { background: linear-gradient(135deg, #ef4444, #dc2626); }
.stat-cyan      { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.stat-violet    { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.stat-pink      { background: linear-gradient(135deg, #ec4899, #db2777); }

.stat-card .stat-icon {
  float: right;
  font-size: 1.3rem;
  opacity: .35;
  margin-top: .1rem;
}

/* ===== Thanh bộ lọc gói trong khung ===== */
.filter-bar {
  border: 1px solid #e7ecf3;
  border-radius: 12px;
  background: #f8fafc;
  padding: .7rem .8rem;
}
/* Mọi ô nhập & nút trong thanh lọc dùng CHUNG chiều cao + cỡ chữ */
.filter-bar .form-control,
.filter-bar .form-select,
.filter-bar .btn {
  font-size: .88rem;
  height: 38px;
  border-radius: 8px;
}
.filter-bar .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: 0 .9rem;
  font-weight: 600;
  white-space: nowrap;
}
.filter-bar .btn i { font-size: .95rem; }
.filter-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ===== Badge lọc nhanh theo nhóm hàng ===== */
.chip-row {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}
.chip-label {
  font-size: .78rem;
  font-weight: 600;
  color: #64748b;
  margin-right: .1rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .28rem .7rem;
  border-radius: 999px;
  border: 1px solid #dbe3ec;
  background: #fff;
  color: #334155;
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.chip:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}
.chip.is-on {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #fff;
}
.chip-count {
  font-size: .72rem;
  font-weight: 700;
  padding: 0 .35rem;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-variant-numeric: tabular-nums;
}
.chip:hover .chip-count { background: #dbeafe; color: #1d4ed8; }
.chip.is-on .chip-count { background: rgba(255, 255, 255, .25); color: #fff; }
@media (max-width: 767.98px) {
  .filter-actions .btn { flex: 1 1 auto; }
}

@media (max-width: 767.98px) {
  .stat-card { flex: 1 1 100%; }
  .data-table { font-size: .85rem; }
}

/* Ô đang ép tên xuất HĐ (ưu tiên cao nhất) — tô vàng để phân biệt với ô trống */
.form-control.is-forced {
  border-color: #f0b429;
  background: #fffbeb;
  font-weight: 600;
}

/* Ô tên bị LUẬT NHÃN chốt — khoá hẳn, không gõ và không chọn tên khác được.
   Tím để phân biệt với ô ép mức 0 (vàng, vẫn sửa được), và con trỏ đổi thành
   "không cho phép" để bấm vào là biết ngay chứ không ngồi gõ mãi không ăn. */
.form-control.is-locked,
.form-control.is-forced.is-locked {
  border-color: #7c3aed;
  background: #f5f3ff;
  color: #4c1d95;
  font-weight: 600;
  cursor: not-allowed;
}
.form-control.is-locked:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 .2rem rgba(124, 58, 237, .18);
}