:root {
  --main-color: #ebebeb;
  --color-primary: #3b82f6;
  --color-primary-dark: #2563eb;
  --color-primary-light: #e7f4ff;
  --color-border: #cfcfcf;
  --color-text: #1f2430;
  --color-text-muted:#343434;
  --color-danger: #d9483a;
  --color-danger-bg: #fdecea;
  --color-success: #1f8a4c;
  --color-success-bg: #eafaf0;
  --radius: 10px;
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  background: var(--main-color);
  color: var(--color-text);
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 16px;
}

/* ---------- Input (dùng chung mọi form) ---------- */
.input {
  display: flex;
  flex-direction: column;
  width: fit-content;
  position: static;
}

.input label {
  color: var(--color-primary);
  font-size: 16px;
  font-weight: 600;
  position: relative;
  top: 0.5rem;
  margin-left: 7px;
  padding: 0 3px;
  background: #fff;
  width: fit-content;
}

.input input,
.input select,
.input textarea {
  border: 1px solid var(--color-primary);
  padding: 11px 10px;
  font-size: 16px;
  background: #fff;
  border-radius: var(--radius);
  width: 210px;
  color: var(--color-text);
  font-family: inherit;
}

.input select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%233b82f6'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.19l3.71-3.96a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px;
  padding-right: 28px;
}

.input input::placeholder,
.input textarea::placeholder {
  color: rgba(0, 0, 0, 0.25);
}

.input input:focus,
.input select:focus,
.input textarea:focus {
  outline: none;
}

.input.w-full,
.input.input-full {
  width: 100%;
}

.input.input-full input,
.input.input-full select,
.input.input-full textarea {
  width: 100%;
}

.form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: var(--color-text-muted);
  margin: 20px 0 20px;
}

/* ---------- Button ---------- */
.btn {
  display: inline-block;
  padding: 12px 16px;
  border: none;
  border-radius: var(--radius);
  background: var(--color-primary);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}

.btn:hover {
  background: var(--color-primary-dark);
}

.btn.btn-block {
  display: block;
  width: 100%;
}

.btn.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.btn.btn-danger {
  background: var(--color-danger);
}

.btn-link {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  padding: 0;
}

.toolbar-right .btn {
  box-shadow: 4px 8px 10px -3px rgba(0, 0, 0, 0.356);
  padding: 13px 21px;
}

/* Nút "Nhập file": nền xanh lá, hover trượt màu sáng dần từ trái sang. */
.btn-fill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  padding: 12px 16px;
  border: none;
  border-radius: var(--radius);
  background-color: #307750;
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 4px 8px 10px -3px rgba(0, 0, 0, 0.356);
  transition: all 250ms;
}

.btn-fill > svg {
  width: 18px;
  height: 18px;
}

.btn-fill::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 0;
  border-radius: 0.5em;
  background-color: #469b61;
  z-index: -1;
  transition: width 350ms;
}

.btn-fill:hover::before {
  width: 100%;
}

/* ---------- Hộp xác nhận tùy biến (thay window.confirm) ---------- */
.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.45);
  opacity: 1;
  transition: opacity 0.15s ease;
}

.confirm-overlay.is-closing {
  opacity: 0;
}

.confirm-box {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 14px;
  padding: 26px 26px 20px;
  text-align: center;
  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.35);
  transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.3), opacity 0.18s ease;
}

/* Trạng thái vào: JS gỡ .is-open ở tick kế tiếp để chạy hiệu ứng trượt lên.
   Nếu trình duyệt không chạy transition, hộp vẫn hiển thị đầy đủ (mặc định). */
.confirm-overlay.is-open .confirm-box {
  transform: translateY(12px) scale(0.97);
  opacity: 0;
}

.confirm-overlay.is-closing {
  opacity: 0;
}

.confirm-overlay.is-closing .confirm-box {
  transform: translateY(12px) scale(0.97);
  opacity: 0;
}

.confirm-box-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-primary-light, #e7f4ff);
  color: var(--color-primary);
}

.confirm-box-icon.is-danger {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.confirm-box-icon svg {
  width: 28px;
  height: 28px;
}

.confirm-box-msg {
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text);
}

.confirm-box-actions {
  display: flex;
  gap: 10px;
}

.confirm-box-actions .btn {
  flex: 1;
  padding: 11px 16px;
}

/* ---------- Alerts ---------- */
.alert-error {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border: 1px solid rgba(217, 72, 58, 0.25);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 16px;
  margin-bottom: 16px;
}

.alert-warning {
  background: #fff6e5;
  color: #b7791f;
  border: 1px solid rgba(183, 121, 31, 0.25);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 15px;
  margin-bottom: 12px;
}

.field-error {
  color: var(--color-danger);
  font-size: 16px;
  margin-top: 4px;
}

/* ---------- Toast (thông báo flash — cố định góc dưới phải, đi theo màn hình) ---------- */
.toast-stack {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(440px, calc(100vw - 40px));
}

.toast {
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: #fff;
  color: var(--color-text);
  font-size: 16px;
  cursor: pointer;
  animation: toast-in 0.2s ease-out;
}

.toast--success {
  background: #eafaf0;
  color: #1f8a4c;
  border-color: rgba(31, 138, 76, 0.25);
}

.toast--error {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border-color: rgba(217, 72, 58, 0.25);
}

.toast--warning {
  background: #fff6e5;
  color: #b7791f;
  border-color: rgba(183, 121, 31, 0.25);
}

.toast--hiding {
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(16px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ---------- Table ---------- */
.table-wrap {
  overflow: auto;
  /* Thiếu dòng này khiến Safari/WebKit iOS dùng cơ chế cuộn cũ, không có momentum —
     dễ "không repaint kịp" khi cuộn nhanh, làm nội dung dòng chi tiết vừa mở (.row-detail-panels)
     lộ đè lên dòng bảng bên dưới cho tới khi chạm lại màn hình. Bật momentum-scroll fix triệt để. */
  -webkit-overflow-scrolling: touch;
  max-height: 460px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.table-wrap::-webkit-scrollbar {
  display: none;
}

/* Tràn sát viền dưới màn hình. Chiều cao thực do JS gán (syncFlushTableHeights):
   luôn bằng phần viewport còn lại nên bảng KHÔNG co lên trên khi ít dòng.
   Giá trị height dưới đây chỉ là fallback trước khi JS chạy để tránh nhảy layout. */
.table-wrap--flush {
  height: calc(100vh - 260px);
  max-height: none;
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
}

.table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.table th,
.table td {
  padding: 10px 12px;
  text-align: center;
  vertical-align: middle;
  font-size: 16px;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Bảng Hàng hóa có tới 8-9 cột (nhiều hơn hẳn các trang khác) — bớt padding ngang
   riêng trang này để nhường chỗ cho cột "Tên hàng" (cột co giãn duy nhất) ở màn hình
   hẹp, tránh bug table-layout:fixed siết toàn bộ cột khi tổng cột cứng vượt bề ngang
   khung (xem <colgroup> ở products/index.blade.php). Chỉ desktop — mobile dùng layout
   4 cột riêng (25.7c), không đụng tới. */
@media (min-width: 769px) {
  .page--products .table th,
  .page--products .table td {
    padding-left: 6px;
    padding-right: 6px;
  }
}

.table th:last-child,
.table td:last-child {
  border-right: none;
}

.table th {
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  white-space: normal;
  position: sticky;
  top: 0;
  z-index: 10;
}

.table th a.sort-link {
  color: inherit;
  text-decoration: none;
  display: inline-block;
}

.table th a.sort-link:hover {
  text-decoration: underline;
}

.table th .sort-arrow {
  display: inline-block;
  opacity: 0.6;
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table .col-actions {
  white-space: nowrap;
}

.table-empty {
  text-align: center;
  padding: 24px;
  color: var(--color-text-muted);
  font-size: 16px;
}

/* ---------- Module layout (dùng chung cho các trang danh sách) ---------- */
.module-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.module-sidebar {
  /* Desktop: app-nav đã chuyển vào sidebar trái toàn cục (.app-sidebar) — sidebar riêng
     của từng trang module không còn chỗ, nội dung (h2 + bộ lọc) chuyển vào .module-title-row
     bên trong .module-main. Chỉ hiện lại trên mobile (xem @media max-width: 768px). */
  display: none;
  width: 15%;
  min-width: 200px;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
}

.module-sidebar h2 {
  margin: 0 0 16px;
  font-size: 26px;
}

.module-sidebar .input {
  width: 100%;
  margin-bottom: 16px;
}

.module-sidebar .input select {
  width: 100%;
}

/* Hàng tiêu đề trong .module-main (desktop) — thay cho .module-sidebar, GỘP chung với
   toolbar cũ (tìm kiếm + nút hành động) thành 1 hàng duy nhất, không xuống hàng:
   <h2> căn trái, ngay sau đó ô tìm kiếm; bộ lọc + nút hành động (.module-title-actions) căn phải.
   Dùng flex "order" (không phải thứ tự DOM) để trang Khách hàng có thể dời ô tìm kiếm bằng JS
   (mobile ⇄ desktop) mà không lệch vị trí hiển thị. */
.module-title-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
  margin-bottom: 16px;
}

.module-title-row h2 {
  order: 0;
  flex: none;
  margin: 0;
  font-size: 26px;
  white-space: nowrap;
  min-width: 170px;
}

.module-title-row .input-search {
  order: 1;
  flex: none;
  margin-bottom: 0;
}

.module-title-row .input-search input {
  width: 500px;
}

.module-title-actions {
  order: 2;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}

.module-title-actions .input {
  margin-bottom: 0;
}

.module-title-actions .input select {
  min-width: 170px;
}

/* Trang Hàng hóa: nút "+ Tạo mới" / "Nhập file" / "Xuất file" không có nhãn nổi phía trên
   như các select cạnh chúng — đẩy xuống cho thẳng hàng. Scope riêng .page--products, KHÔNG
   áp dụng .btn/.btn-fill dùng chung ở trang khác (vd nút "Xuất dữ liệu" ở Tổng quan). */
.page--products .module-title-actions > .btn,
.page--products .module-title-actions > .btn-fill {
  margin-top: 20px;
}

/* Sidebar chuyển mục ở trang Thiết lập (Chi nhánh / Người dùng) */
.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-nav a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius);
  color: var(--color-text);
  text-decoration: none;
  font-size: 16px;
}

.settings-nav a:hover {
  background: var(--main-color);
}

.settings-nav a.active {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-weight: 600;
}

/* Bảng thông tin 2 cột trong chi tiết dòng (Thiết lập) */
.settings-info {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 8px 16px;
  margin: 0;
  text-align: left;
}

.settings-info dt {
  color: var(--color-text-muted);
  font-size: 14px;
}

.settings-info dd {
  margin: 0;
}

.module-main {
  flex: 1;
  min-width: 0;
  padding: 14px 28px;
  background: #fff;
}

/* Tràn sát viền dưới màn hình (dùng cho trang Hàng hóa) */
.module-main--flush {
  padding-bottom: 0;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.toolbar .toolbar-left,
.toolbar .toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.toolbar .input {
  margin-bottom: 0;
}

.toolbar .input input {
  width: 800px;
}

.input-search {
  position: relative;
}

.input-search input {
  padding-right: 38px;
}

.input-search .search-icon {
  position: absolute;
  right: 12px;
  bottom: 13px;
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);
  pointer-events: none;
}

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
  z-index: 100;
}

.modal-overlay.active {
  display: flex;
}

.modal-box {
  background: var(--main-color);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  width: 100%;
  max-width: 700px;
}

.modal-box-main {
  background: #fff;
  padding: 16px;
  border-radius: var(--radius);
}

.modal-box-2 {
  background: #fff;
  padding: 12px 18px;
  border-radius: var(--radius);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.modal-header h3 {
  margin: 0;
  font-size: 26px;
}

/* Thân modal chuẩn: card trắng trên nền xám (--main-color) của .modal-box,
   giống .po-left / .po-right ở modal rộng. */
.modal-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 12px;
}

.modal-close {
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-muted);
}

.modal-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.modal-row .input {
  flex: 1;
  min-width: 160px;
}

.modal-row .input input,
.modal-row .input select {
  width: 100%;
}

/* ---------- Modal "Thêm" (mobile): gom app-nav + user-info của sidebar desktop
   thành 1 lưới, vì .app-sidebar ẩn hẳn trên mobile nên các mục này trước đây
   không có chỗ hiện (chuông / chọn chi nhánh / đăng xuất). ---------- */
.more-profile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 16px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
}

.more-profile .user-menu-id {
  flex: 1 1 auto;
  min-width: 0;
}

.more-profile .user-menu-fullname {
  font-size: 16px;
}

.more-profile-branch {
  flex: 0 0 auto;
  max-width: 150px;
}

/* .sidebar-branch-form/-chip mặc định thiết kế cho nền xanh sidebar (chữ/viền trắng) —
   đổi màu cho hợp nền sáng của modal. */
.more-profile-branch.sidebar-branch-form select {
  border: 1px solid var(--color-border);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23343434'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.19l3.71-3.96a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  color: var(--color-text);
}

.more-profile-branch.sidebar-branch-form select:hover {
  background-color: #f5f5f5;
}

.more-profile-branch .sidebar-branch-icon {
  color: var(--color-text-muted);
}

.more-profile-branch.sidebar-branch-chip {
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text);
}

.more-profile-branch.sidebar-branch-chip svg {
  color: var(--color-text-muted);
}

.more-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.more-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: none;
  border-radius: var(--radius);
  background: #fff;
  color: var(--color-text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.more-tile:hover {
  background: var(--color-primary-light);
}

.more-tile svg {
  width: 26px;
  height: 26px;
  flex: none;
  color: var(--color-primary);
}

.more-tile span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.more-tile.active {
  background: var(--color-primary);
  color: #fff;
}

.more-tile.active svg {
  color: #fff;
}

.more-tile .notif-badge {
  top: 6px;
  right: 6px;
  border-color: #fff;
}

.more-logout-form {
  margin-top: 14px;
}

.more-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: var(--radius);
  background: var(--color-danger-bg);
  color: var(--color-danger);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.more-logout:hover {
  background: rgba(217, 72, 58, 0.16);
}

.more-logout svg {
  width: 20px;
  height: 20px;
  flex: none;
}

/* Ô select + nút phụ ("+ Tạo mới danh mục") nằm cùng 1 hàng — PC & mobile */
.field-with-btn {
  display: flex;
  align-items: center;
  gap: 10px;
}

.field-with-btn select {
  flex: 1;
  min-width: 0;
}

.field-with-btn .field-add-btn {
  flex: none;
  white-space: nowrap;
  color: var(--color-primary);
  padding: 0;
}

/* ---------- Modal rộng (nhập hàng, ...) ---------- */
.modal-box--wide {
  max-width: 1600px;
  width: 95vw;
  /* Luôn cao gần kịch màn hình để bảng bên trong không co lại theo số dòng */
  height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
}

.modal-box--wide .modal-header {
  flex: 0 0 auto;
}

.modal-box--wide > form {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.po-layout {
  display: flex;
  gap: 20px;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
}

.po-left {
  width: 80%;
  min-width: 0;
  padding: 12px;
  background: #fff;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.po-right {
  width: 20%;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fff;
  padding: 12px;
  border-radius: var(--radius);
}

.po-left .table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

.po-search {
  position: relative;
  margin-bottom: 16px;
}

.input.po-search input {
  width: 800px;
}

/* Hàng chứa ô tìm hàng hóa + nút "+ Tạo mới" (mở modal tạo hàng hóa nhanh) */
.po-search-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 16px;
}

.po-search-row .po-search {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}

.po-search-row .input.po-search input {
  width: 100%;
}

.po-search-row > .btn-outline {
  flex: none;
  white-space: nowrap;
  margin-top: 20px;
}

.po-suggestions {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 800px;
  max-width: 100%;
  margin-top: 4px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-height: 280px;
  overflow-y: auto;
  z-index: 30;
}

.po-suggestions.active {
  display: block;
}

.po-suggestion {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-bottom: 1px solid #ececec;
  cursor: pointer;
  font-size: 16px;
}

.po-suggestion:last-child {
  border-bottom: none;
}

.po-suggestion:hover {
  background: var(--color-primary-light);
}

/* Riêng gợi ý Phường/Xã trong modal tạo khách hàng — dòng gọn hơn */
#c_ward_suggestions .po-suggestion {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 16px;
  border-bottom: none
}

.po-suggestion-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
}

.po-suggestion-code {
  color: var(--color-text-muted);
  font-size: 14px;
}

.po-suggestion-stock {
  color: var(--color-text-muted);
  font-size: 14px;
}

.po-suggestion-attributes {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.po-items-input {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 16px;
  text-align: right;
  font-family: inherit;
}

/* Ô "Thành tiền": chỉ hiển thị, không sửa được */
.po-items-input.po-item-total:disabled {
  background: var(--main-color);
  color: var(--color-text);
  font-weight: 600;
}

.po-item-remove {
  background: none;
  border: none;
  color: var(--color-danger);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 4px;
}

/* ---------- Dòng "cấu hình kèm máy" (2 select RAM / Ổ cứng) dưới dòng hàng là máy ---------- */
/* Dòng hàng là máy + dòng cấu hình của nó là MỘT khối: bỏ kẻ dưới ở dòng máy,
   đường kẻ ngăn cách với sản phẩm kế tiếp nằm ở dòng cấu hình. */
#po_items_body tr:has(+ .po-config-row) > td,
#tf_items_body tr:has(+ .po-config-row) > td {
  border-bottom: none;
}

.po-config-row > td {
  background: #fafafa;
  padding-top: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ececec;
}

.po-config-selects {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.po-config-selects label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.po-config-selects select {
  min-width: 142px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 16px;
  font-family: inherit;
  background: #fff;
}

.po-config-machine {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text);
}

.po-config-machine-cost {
  width: 106px;
  text-align: right;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 6px 8px;
  margin-right: 40px;
  font-size: 16px;
  font-family: inherit;
  background: var(--main-color);
  color: var(--color-text);
}

.po-config-machine-cost--clamped {
  color: var(--color-danger);
  border-color: var(--color-danger);
  font-weight: 700;
}

.po-right-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.po-right-row > span:first-child {
  color: var(--color-text);
  font-size: 16px;
}

.po-right-row input:disabled {
  background: var(--main-color);
  color: var(--color-text);
  text-align: right;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 16px;
  width: 160px;
  font-family: inherit;
}

/* Select "Chuyển tới" trong cột phải modal chuyển hàng */
.po-right-row .po-right-select {
  width: 160px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 16px;
  font-family: inherit;
  background: #fff;
  color: var(--color-text);
}

/* Ghi chú (textarea) trong cột phải modal nhập hàng / chuyển hàng */
.modal-note {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.modal-note label {
  color: var(--color-text);
  font-size: 16px;
}

.modal-note textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 16px;
  font-family: inherit;
  resize: vertical;
}

/* Ô "SL Chuyển" khi vượt tồn kho nguồn */
.tf-item-qty--over {
  border-color: var(--color-danger);
  color: var(--color-danger);
  font-weight: 700;
}

.po-right hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 4px 0;
}

.po-right-actions {
  display: flex;
  gap: 8px;
  /* Dồn nút Lưu tạm / Hoàn thành xuống đáy cột phải khi modal cao kịch màn hình */
  margin-top: auto;
}

.po-right-actions .btn {
  flex: 1;
}

/* ---------- Category tree (trong modal) ---------- */
.category-tree {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  max-height: 260px;
  overflow-y: auto;
  margin-bottom: 16px;
}

.category-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid #ececec;
  font-size: 16px;
  gap: 8px;
}

.category-row:last-child {
  border-bottom: none;
}

.category-row .category-actions {
  display: flex;
  gap: 4px;
  white-space: nowrap;
}

.category-row .category-actions button,
.category-row .category-actions a {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  padding: 3px 7px;
  color: var(--color-text);
}

.category-row .category-actions .btn-danger-text {
  color: var(--color-danger);
  border-color: rgba(217, 72, 58, 0.35);
}

/* ---------- Căn lề cột bảng (dùng chung) ---------- */
.table th.text-left,
.table td.text-left {
  text-align: left;
}

.table th.text-right,
.table td.text-right {
  text-align: right;
}

/* ---------- Tên hàng + thuộc tính (dùng chung: trang Hàng hóa, modal Nhập/Chuyển, POS) ---------- */
/* Tên hàng ở trên, thuộc tính xuống dòng ngay dưới. */
.item-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.item-name-title {
  font-size: 16px;
  font-weight: 600;
}

/* Nhãn "đã xóa" cho liên kết trỏ tới bản ghi không còn tồn tại */
.del-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  background: var(--color-danger-bg);
  color: var(--color-danger);
  white-space: nowrap;
}

/* ---------- Thuộc tính sản phẩm (hiển thị dưới tên hàng) ---------- */
.attribute-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

/* ---------- Checkbox thường ---------- */
input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
}

/* ---------- Card ---------- */
.card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}

/* ---------- Badge ---------- */
.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* ---------- Auth page ---------- */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px 28px;
}

.auth-card h1 {
  font-size: 16px;
  margin: 0 0 4px;
  text-align: center;
}

.auth-card p.subtitle {
  margin: 0 0 24px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 16px;
}

/* ---------- App shell — sidebar trái cố định (desktop) ---------- */
.app-shell {
  display: flex;
  align-items: flex-start;
}

/* Trang Bán hàng (POS, .app-main--pos) cần toàn bộ bề ngang — ẩn hẳn sidebar trái. */
.app-shell:has(.app-main--pos) .app-sidebar {
  display: none;
}

.app-sidebar {
  width: 12%;
  min-width: 200px;
  flex: none;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-primary);
  color: #fff;
  padding: 12px 12px;
}

.app-sidebar-brand {
  font-weight: 700;
  font-size: 18px;
  padding: 2px 10px 10px;
}

.app-sidebar .user-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 16px;
  padding-top: 12px;
  margin-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

/* Bán hàng + chuông Thông báo chung 1 hàng — gọn hơn bản cũ (2 hàng riêng). */
.user-info-actions {
  display: flex;
  gap: 6px;
}

/* Hàng dưới: chọn chi nhánh (gọn, co lại theo nội dung) + menu tài khoản (chiếm phần còn lại). */
.user-info-secondary {
  display: flex;
  align-items: center;
  gap: 6px;
}

.user-info-secondary .user-menu {
  flex: 1 1 auto;
  min-width: 0;
}

/* ---------- Chọn chi nhánh: icon ghim vị trí + select trong suốt viền mảnh khi
   admin xem mọi chi nhánh, hoặc "chip" tĩnh khi chỉ gán 1 chi nhánh cố định. ---------- */
.sidebar-branch-form {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  max-width: 92px;
}

.sidebar-branch-icon {
  position: absolute;
  left: 9px;
  width: 14px;
  height: 14px;
  color: rgba(255, 255, 255, 0.65);
  pointer-events: none;
}

.sidebar-branch-form select {
  width: 100%;
  min-width: 0;
  padding: 8px 22px 8px 27px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius);
  background-color: rgba(255, 255, 255, 0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23ffffff'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.19l3.71-3.96a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 12px;
  appearance: none;
  -webkit-appearance: none;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-overflow: ellipsis;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.sidebar-branch-form select:hover {
  background-color: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.4);
}

.sidebar-branch-form select:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
}

.sidebar-branch-form select option {
  color: var(--color-text);
  background: #fff;
}

.sidebar-branch-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto;
  max-width: 92px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  font-weight: 600;
}

.sidebar-branch-chip svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: rgba(255, 255, 255, 0.65);
}

.sidebar-branch-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Dropdown tài khoản (tên người dùng = nút đại diện) ---------- */
.user-menu {
  position: relative;
}

.user-menu-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 10px 5px 6px;
  border: none;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.user-menu-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-caret {
  margin-left: auto;
}

.user-menu-trigger:hover,
.user-menu-trigger[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.24);
}

.user-menu-avatar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffffff, #dbe9ff);
  color: var(--color-primary-dark);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.user-menu-caret {
  width: 14px;
  height: 14px;
  opacity: 0.85;
  transition: transform 0.15s ease;
}

.user-menu-trigger[aria-expanded="true"] .user-menu-caret {
  transform: rotate(180deg);
}

/* Animation phát tự động mỗi lần [hidden] được gỡ (không cần class/rAF riêng —
   tránh bẫy đã gặp ở confirmDialog: pane ẩn đóng băng transition gated qua class). */
.user-menu-panel {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 1000;
  min-width: 224px;
  padding: 6px;
  background: #fff;
  color: var(--color-text);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transform-origin: bottom left;
  animation: userMenuPanelIn 0.16s ease;
}

@keyframes userMenuPanelIn {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.user-menu-panel[hidden] {
  display: none;
}

.user-menu-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 10px;
}

.user-menu-avatar--lg {
  width: 36px;
  height: 36px;
  font-size: 16px;
}

.user-menu-id {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.user-menu-fullname {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
}

.user-menu-role {
  font-size: 13px;
  color: var(--color-text-muted);
}

.user-menu-panel form {
  border-top: 1px solid var(--color-border);
  margin-top: 2px;
  padding-top: 4px;
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: 8px;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.user-menu-item svg {
  flex: none;
  width: 18px;
  height: 18px;
}

.user-menu-logout {
  color: #d9483a;
}

.user-menu-logout:hover {
  background: rgba(217, 72, 58, 0.1);
}

.app-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.app-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  padding: 10px;
  border-radius: var(--radius);
}

.app-nav a svg {
  width: 24px;
  height: 24px;
  flex: none;
}

.app-nav a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.app-nav a.active {
  color: var(--color-primary);
  background: var(--main-color);
}

/* Mũi tên lên/xuống cho mục nav có cấp con (Tổng quan, Thiết lập) — mặc định trỏ xuống,
   xoay 180deg khi mục đang active (đang mở cấp con bên dưới). */
.app-nav a .app-nav-caret {
  width: 16px;
  height: 16px;
  flex: none;
  margin-left: auto;
  opacity: 0.7;
  transition: transform 0.2s ease;
}

.app-nav a.active .app-nav-caret {
  opacity: 1;
  transform: rotate(180deg);
}

/* Cấp con (Tổng quan: Doanh thu/Giá trị kho — Thiết lập: Chi nhánh/Người dùng) — hiện ngay
   dưới mục nav đang active, dạng danh sách link thật (không phải <select>) + hiệu ứng trượt/mờ dần. */
.app-nav-sublist {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 0 6px 12px;
  animation: appNavSublistIn 0.2s ease;
}

@keyframes appNavSublistIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.app-nav-sublist a {
  display: block;
  padding: 8px 10px;
  border-radius: var(--radius);
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 600;
}

.app-nav-sublist a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.app-nav-sublist a.active {
  color: var(--color-primary);
  background: var(--main-color);
}

.app-main {
  flex: 1;
  min-width: 0;
  max-width: 1890px;
  margin: 0 auto;
}

.app-main--flush {
  padding: 0;
}

/* ---------- Mega nav bottom (thanh điều hướng dưới cùng — chỉ mobile) ---------- */
.mega-nav-bottom {
  display: none;
}

@media (max-width: 768px) {
  /* Chặn tràn ngang: giữ thanh nav fixed đúng bề rộng màn hình.
     touch-action: manipulation → tắt double-tap-zoom (kể cả iOS). */
  html,
  body {
    overflow-x: hidden;
    max-width: 100%;
    touch-action: manipulation;
  }

  /* Mobile: bỏ hẳn sidebar trái, điều hướng dựa vào mega-nav-bottom.
     Các nút Đăng xuất / chọn chi nhánh / chuông hiện chưa có chỗ trên mobile (xem docs handoff). */
  .app-sidebar {
    display: none;
  }

  .mega-nav-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: flex;
    align-items: stretch;
    background: #fff;
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 6px);
  }

  .mega-nav-bottom a,
  .mega-nav-bottom button {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 2px 13px;
    border: none;
    background: none;
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .mega-nav-bottom a svg,
  .mega-nav-bottom button svg {
    width: 34px;
    height: 34px;
    flex: none;
  }

  .mega-nav-bottom a.active {
    color: var(--color-primary);
  }

  /* Badge chưa đọc trên nút "Thêm" — neo cạnh icon (khác .notif-badge trong .more-tile,
     vốn đã có vị trí riêng cho nút tròn 40px trên desktop). */
  .mega-nav-bottom .notif-badge--nav {
    position: absolute;
    top: 4px;
    right: calc(50% - 20px);
    border-color: #fff;
    animation: none;
  }

  /* Chừa chỗ để nội dung không bị thanh nav che khuất + bớt lề ngang cho màn hẹp */
  .app-main {
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }

  /* Trang module (Hàng hóa, Nhập, Chuyển, Kiểm kho, Hóa đơn, Khách hàng, Thiết lập):
     xếp dọc — thanh bên (tiêu đề + bộ lọc) nằm trên, nội dung nằm dưới tràn hết bề ngang.
     Dashboard tự lo bố cục riêng qua .dash-layout nên không đụng tới. */
  .module-layout {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .module-sidebar {
    display: block;
    width: auto;
    min-width: 0;
    padding: 12px 14px;
  }

  /* .module-title-row chỉ dành cho desktop — mobile vẫn dùng .module-sidebar (trên) hoặc .m-head. */
  .module-title-row {
    display: none;
  }

  /* Các trang CHƯA có thiết kế mobile riêng (không .m-head, không JS dời ô tìm kiếm như
     Khách hàng): dùng thẳng .module-title-row làm header mobile luôn — xếp dọc thay vì ẩn,
     để không mất ô tìm kiếm + nút "+ Tạo..." (module-sidebar cũ đã bỏ hẳn ở các trang này). */
  .page--purchases .module-title-row,
  .page--transfers .module-title-row,
  .page--stocktakes .module-title-row,
  .page--office365 .module-title-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    background: #fff;
    padding: 12px 14px;
    border-radius: var(--radius);
  }

  .page--purchases .module-title-row .input-search,
  .page--transfers .module-title-row .input-search,
  .page--stocktakes .module-title-row .input-search,
  .page--office365 .module-title-row .input-search {
    width: 100%;
  }

  .page--purchases .module-title-row .input-search input,
  .page--transfers .module-title-row .input-search input,
  .page--stocktakes .module-title-row .input-search input,
  .page--office365 .module-title-row .input-search input {
    width: 100%;
  }

  .page--purchases .module-title-actions,
  .page--transfers .module-title-actions,
  .page--stocktakes .module-title-actions,
  .page--office365 .module-title-actions {
    margin-left: 0;
    width: 100%;
  }

  .page--purchases .module-title-actions .btn,
  .page--transfers .module-title-actions .btn,
  .page--stocktakes .module-title-actions .btn,
  .page--office365 .module-title-actions .btn {
    width: 100%;
  }

  .module-sidebar h2 {
    font-size: 20px;
    margin-bottom: 12px;
  }

  .module-sidebar .input {
    margin-bottom: 12px;
  }

  .module-sidebar .input:last-child {
    margin-bottom: 0;
  }

  /* Thiết lập: 2 mục chuyển tab nằm ngang, chia đều bề ngang */
  .module-sidebar .settings-nav {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .module-sidebar .settings-nav a {
    flex: 1 1 auto;
    text-align: center;
  }

  /* Thanh công cụ trong nội dung: xếp dọc, ô tìm kiếm rộng hết khung
     (mặc định .toolbar .input input là width: 800px — tràn trên màn hẹp). */
  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .toolbar .toolbar-left,
  .toolbar .toolbar-right {
    width: 100%;
  }

  .toolbar .input,
  .toolbar .input input {
    width: 100%;
  }

  /* Bảng dữ liệu nhiều cột (các trang danh sách — KHÔNG áp cho Dashboard dùng
     .module-main--plain): bỏ width cứng của <colgroup> (dành cho desktop), cho cột
     tự co theo nội dung và cuộn ngang trong .table-wrap thay vì ép cột "auto"
     xuống 0px khiến header cao vọt. */
  .module-main--flush .table {
    table-layout: auto;
    min-width: 720px;
  }

  .module-main--flush .table > colgroup {
    display: none;
  }
}

/* ===================================================================
   HEADER MOBILE dùng chung cho trang danh sách (mẫu đầu tiên: Hàng hóa)
   — desktop KHÔNG đổi: các phần tử này ẩn mặc định, chỉ bật trong @media ≤768px.
   =================================================================== */
.m-head,
.fab-create,
.stock-card-m,
.hist-m,
.lbl-short {
  display: none;
}

@media (max-width: 768px) {
  /* Bật header mobile, ẩn sidebar + toolbar cũ của trang có .page--m-head */
  .page--m-head .m-head {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 12px 0 12px 0px;
    background: #fff;
    padding: 12px 18px;
    border-radius: var(--radius);
  }

  /* .module-sidebar / .toolbar cũ của trang có .page--m-head đã không còn trong DOM
     (nội dung chuyển hẳn vào .module-title-row, tự ẩn trên mobile theo rule chung). */

  .m-head__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .m-head__title {
    margin: 0;
    font-size: 20px;
  }

  /* Dropdown/ô nhập trong header mobile: dùng lại CSS .input của PC,
     chỉ override để co giãn hết bề ngang thay vì width cố định. */
  .m-head .input {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    margin-bottom: 0;
  }

  .m-head .input select,
  .m-head .input input {
    width: 100%;
  }

  /* Ô tìm kiếm luôn hiển thị, rộng hết hàng, icon nằm trong ô */
  .m-head__search .input {
    width: 100%;
  }

  .m-head__search .search-icon {
    bottom: 50%;
    transform: translateY(50%);
  }

  /* --- Bảng danh sách Hàng hóa: Tên hàng | 530 | 617 | Tổng --- */
  .page--products .col-m-hide {
    display: none;
  }

  /* Bỏ tiền tố "Kho " ở tiêu đề cột tồn (mobile chỉ hiện số chi nhánh) */
  .page--products .th-lg {
    display: none;
  }

  /* Bảng danh sách tràn sát mép trái–phải màn hình (bù lại padding 12px của .app-main) */
  .page--products .module-main {
    padding: 0;
    border: none;
    margin-left: -12px;
    margin-right: -12px;
  }

  .page--products .table-wrap--flush {
    border-left: none;
    border-right: none;
    border-radius: 0;
  }

  .page--products .module-main--flush .table {
    min-width: 0;
  }

  .page--products .table thead th {
    font-size: 14px;
    padding: 12px 6px;
  }

  /* Mũi tên sắp xếp không rớt xuống dòng so với tên chi nhánh */
  .page--products .table thead th .sort-link {
    white-space: nowrap;
  }

  /* Ẩn nút "+" nổi khi đang mở modal */
  body:has(.modal-overlay.active) .fab-create {
    display: none;
  }

  /* .module-title-row (ô tìm kiếm + nút "+ Tạo khách hàng") đã ẩn sẵn trên mobile (rule chung
     mọi module) — nút "+" đã có nút tròn nổi (fab-create) thay thế, ô tìm kiếm dời vào sidebar. */

  /* Sidebar (tiêu đề + ô tìm kiếm dời vào) giống thẻ .m-head của trang Hóa đơn */
  .page--customers .module-sidebar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
    background: #fff;
    padding: 12px 18px;
    border: none;
    border-radius: var(--radius);
  }

  /* Ô tìm kiếm trong sidebar: bỏ nhãn "Tìm kiếm", chỉ còn placeholder — giống ô tìm
     kiếm trong .m-head của các trang Hàng hóa/Hóa đơn. */
  .page--customers .module-sidebar .input-search label {
    display: none;
  }

  .page--customers .module-sidebar .input-search {
    margin-bottom: 0;
  }

  /* input mặc định cố định 210px (.input input) — kéo full bề ngang thẻ sidebar,
     giống ô tìm kiếm trong .m-head của Hàng hóa/Hóa đơn. */
  .page--customers .module-sidebar .input-search input {
    width: 100%;
  }

  /* --- Bảng Khách hàng: chỉ Tên KH | SĐT, tràn sát mép trái–phải màn hình --- */
  .page--customers .module-main {
    padding: 0;
    border: none;
    margin-left: -12px;
    margin-right: -12px;
  }

  .page--customers .table-wrap--flush {
    border-left: none;
    border-right: none;
    border-radius: 0;
  }

  .page--customers .col-m-hide {
    display: none;
  }

  /* Không cho lướt ngang — chỉ còn 2 cột nên nội dung phải vừa khít màn hình.
     .module-main--flush .table mặc định table-layout:auto + min-width:720px (cho
     trang nhiều cột như Hàng hóa cuộn ngang) — Khách hàng chỉ 2 cột nên override
     lại fixed + bỏ colgroup cũ (7 cột) để 2 cột còn lại tự chia đều bề ngang. */
  .page--customers .table-wrap {
    overflow-x: hidden;
  }

  .page--customers .module-main--flush .table {
    table-layout: fixed;
    min-width: 0;
    width: 100%;
  }

  .page--customers .table colgroup {
    display: none;
  }

  .page--customers .table th:nth-child(2),
  .page--customers .table td:nth-child(2) {
    width: 65%;
  }

  .page--customers .table th:nth-child(3),
  .page--customers .table td:nth-child(3) {
    width: 35%;
  }

  .page--customers .lbl-full {
    display: none;
  }

  .page--customers .lbl-short {
    display: inline;
  }

  /* --- Lịch sử bán hàng (chi tiết khách hàng): thẻ 2 cột trái/phải --- */
  .hist-m {
    display: block;
  }

  .hist-head {
    display: flex;
    justify-content: space-between;
    padding: 8px 6px;
    background: var(--color-primary-light);
    color: var(--color-text);
    font-weight: 600;
    font-size: 13px;
    text-align: left;
  }

  .hist-head span:last-child {
    text-align: right;
  }

  .hist-card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #ececec;
  }

  .hist-card:last-child {
    border-bottom: none;
  }

  .hist-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    font-size: 14px;
    min-width: 0;
    text-align: left;
  }

  /* Cùng font-size/weight/color với .scm-name / .scm-sub (bản mobile của Hóa đơn) */
  .hist-name {
    font-weight: 600;
    color: var(--color-text);
  }

  .hist-sub {
    font-size: 14px;
    color: var(--color-text-muted);
  }

  .hist-col--right {
    text-align: right;
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* --- Nút tròn "+" nổi (góc phải dưới, trên bottom-nav) --- */
  .page--m-head .fab-create,
  .page--customers .fab-create {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 16px;
    bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 16px);
    z-index: 950;
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 30px;
    line-height: 1;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    cursor: pointer;
  }

  /* --- Thẻ kho mobile: chỉ tab đang mở; bảng gộp cột "Giao dịch" --- */
  .row-detail-tabs .row-detail-tab:not(.active) {
    display: none;
  }

  .stock-card-table {
    display: none;
  }

  .stock-card-m {
    display: table;
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }

  .stock-card-m th,
  .stock-card-m td {
    padding: 8px 6px;
    border-bottom: 1px solid #ececec;
    text-align: left;
    vertical-align: top;
  }

  .stock-card-m th {
    background: var(--color-primary-light);
    color: var(--color-text);
    font-weight: 600;
  }

  .stock-card-m th.num,
  .stock-card-m td.num {
    text-align: right;
    white-space: nowrap;
  }

  .scm-txn .scm-line {
    display: block;
  }

  .scm-txn .scm-line + .scm-line {
    margin-top: 2px;
  }

  .scm-txn .scm-muted {
    color: var(--color-text-muted);
  }

  /* --- Modal: giữ nhóm 2 cột/hàng như PC (bỏ min-width để 2 ô vừa 1 hàng) --- */
  .modal-row .input {
    min-width: 0;
  }

  /* Hàng 3 ô (Tên KH + 2 SĐT) xếp dọc trên mobile cho đỡ chật */
  .modal-row--triple .input {
    flex-basis: 100%;
  }

  /* Nút phụ nhỏ lại để select danh mục còn đủ chỗ trên màn hẹp */
  .field-with-btn .field-add-btn {
    font-size: 13px;
  }
}

/* ===================================================================
   HÓA ĐƠN — giao diện mobile (theo mẫu trang Hàng hóa)
   — desktop KHÔNG đổi: chỉ trong @media ≤768px.
   =================================================================== */
@media (max-width: 768px) {
  .page--invoices .col-m-hide {
    display: none;
  }

  /* Bảng tràn sát mép trái–phải màn hình (bù padding 12px của .app-main) */
  .page--invoices .module-main {
    padding: 0;
    border: none;
    margin-left: -12px;
    margin-right: -12px;
  }

  .page--invoices .table-wrap--flush {
    border-left: none;
    border-right: none;
    border-radius: 0;
  }

  /* 3 cột (Thời gian | Tên hàng | Thanh toán) vừa khít, không cuộn ngang */
  .page--invoices .module-main--flush .table {
    min-width: 0;
  }

  .page--invoices .table thead th {
    font-size: 14px;
    padding: 12px 6px;
  }

  /* "Tổng Thanh toán" -> "Thanh toán": tránh tiêu đề cột xuống 2 dòng lệch */
  .page--invoices .lbl-full {
    display: none;
  }

  .page--invoices .lbl-short {
    display: inline;
  }

  .page--invoices .table tbody td {
    padding: 10px 6px;
    vertical-align: top;
  }

  /* Cột thời gian: ngày xuống dòng dưới giờ cho gọn (không ngắt giữa chuỗi ngày) */
  .page--invoices .inv-time {
    white-space: nowrap;
  }

  .page--invoices .inv-date {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--color-text-muted);
    white-space: nowrap;
  }

  /* Số tiền không được ngắt dòng giữa các nhóm số (vd "19,40" xuống dòng rồi "0,000") */
  .page--invoices .table td.text-right {
    white-space: nowrap;
  }

  /* Chi tiết hóa đơn — bảng mặt hàng bản mobile (.stock-card-m) */
  .stock-card-m .scm-name {
    font-weight: 600;
  }

  .stock-card-m .scm-sub {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--color-text-muted);
  }

  /* Khu tóm tắt 80/20 trong panel chi tiết: xếp dọc trên mobile (dùng chung mọi module) */
  .row-detail-split {
    flex-direction: column;
    gap: 12px;
  }

  .row-detail-split-main,
  .row-detail-split-side {
    flex: none;
    max-width: 100%;
    width: 100%;
  }
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.page-header h2 {
  margin: 0;
  font-size: 26px;
}

/* ---------- Nút Bán hàng trong sidebar — chung hàng với chuông Thông báo ---------- */
.app-sidebar .user-info .pos-launch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 10px;
  border-radius: var(--radius);
  background: #fff;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.app-sidebar .user-info .pos-launch span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-sidebar .user-info .pos-launch svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.app-sidebar .user-info .pos-launch:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.app-sidebar .user-info .pos-launch:active {
  transform: translateY(0);
}

.app-sidebar .user-info .pos-launch.active {
  background: var(--main-color);
}

/* ---------- Bán hàng (POS) ---------- */
.app-main--pos {
  padding: 0;
  max-width: none;
}

.pos {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.pos-topbar {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 12px 0;
  background: var(--color-primary);
}

.pos-search {
  position: relative;
  flex: 0 1 700px;
  min-width: 160px;
  margin-bottom: 8px;
  margin-right: 26px;
}

.pos-search input {
  width: 100%;
  border: none;
  border-radius: var(--radius);
  padding: 10px 12px 10px 38px;
  font-size: 15px;
  font-family: inherit;
  background: #fff;
  color: var(--color-text);
}

.pos-search input:focus {
  outline: none;
}

.pos-search .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);
  pointer-events: none;
}

.pos-scan-btn {
  flex: none;
  margin-bottom: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  cursor: pointer;
}

.pos-scan-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.pos-scan-btn svg {
  width: 22px;
  height: 22px;
}

.pos-tabs {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.pos-tabs::-webkit-scrollbar {
  display: none;
}

.pos-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 8px 9px 14px;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  font-size: 15px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.pos-tab:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* Tab đang chọn: cùng màu nền với khu vực bên dưới nên "hòa" liền vào phần dưới */
.pos-tab.active {
  background: var(--main-color);
  color: var(--color-text);
  font-weight: 700;
  margin-bottom: -1px;
}

.pos-tab-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: currentColor;
  opacity: 0.7;
}

.pos-tab-close:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.12);
}

.pos-tab-close svg {
  width: 12px;
  height: 12px;
}

.pos-tab-add,
.pos-tab-caret {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.pos-tab-add {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.pos-tab-add:hover {
  background: rgba(255, 255, 255, 0.16);
}

.pos-tab-add svg {
  width: 22px;
  height: 22px;
}

.pos-tab-caret {
  width: 20px;
  height: 32px;
}

.pos-tab-caret svg {
  width: 18px;
  height: 18px;
}

/* Nút đóng POS, quay lại trang Hàng hóa — neo sát phải bằng margin-left: auto,
   canh baseline với .pos-search qua margin-bottom giống nhau. */
.pos-close {
  flex: none;
  margin-left: auto;
  margin-bottom: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #fff;
  opacity: 0.85;
}

.pos-close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.16);
}

.pos-close svg {
  width: 20px;
  height: 20px;
}

.pos-body {
  display: flex;
  gap: 10px;
  padding: 10px;
  background: var(--main-color);
}

.pos-main {
  flex: 0 0 80%;
  max-width: 80%;
  background: var(--main-color);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Vùng cuộn danh sách sản phẩm — chừa chỗ cho ô ghi chú đơn hàng ghim ở đáy */
.pos-main-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.pos-side {
  flex: 1 1 20%;
  min-width: 0;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: auto;
}

.pos-placeholder {
  padding: 24px;
  color: var(--color-text-muted);
  font-size: 15px;
}

/* Gợi ý tìm hàng hóa trong topbar: dùng lại .po-suggestion* nhưng khớp bề rộng ô tìm */
.pos-search .po-suggestions {
  width: 100%;
}

/* ---------- Danh sách hàng hóa POS: mỗi sản phẩm là 1 thẻ nổi ---------- */
.pos-line {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: #fff;
  border: 1px solid transparent;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.pos-line:last-child {
  margin-bottom: 0;
}

.pos-line:hover,
.pos-line:focus-within {
  border-color: rgba(59, 130, 246, 0.55);
}

.pos-line-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Nút icon cây bút — mở/đóng ô ghi chú cho sản phẩm */
.pos-line-note-btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
}

.pos-line-note-btn:hover {
  color: var(--color-primary);
  background: rgba(59, 130, 246, 0.08);
}

.pos-line-note-btn.has-note {
  color: var(--color-primary);
}

.pos-line-note-btn svg {
  width: 17px;
  height: 17px;
}

/* 2 select RAM / Ổ cứng cho máy (POS). Luôn CÙNG 1 HÀNG; ô select dùng style
   component .input trên PC: viền xanh, bo góc, nhãn "RAM"/"Ổ cứng" nổi trên viền.
   (Áp cả PC & mobile — text nhãn do JS chèn được ẩn bằng font-size:0, thay bằng ::before.) */
.pos-line-config {
  padding-left: 46px;
  margin-top: 6px;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px 8px;
}

/* Nút nhỏ "thêm 1 dòng cùng mã hàng, cấu hình khác" — đẩy sát mép phải, các select vẫn căn trái */
.pos-line-addsame {
  align-self: center;
  margin-left: auto;
  flex: none;
  padding: 5px 10px;
  border: 1px dashed var(--color-primary);
  border-radius: 6px;
  background: none;
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.pos-line-addsame:hover {
  background: var(--color-primary);
  color: #fff;
}

.pos-line-config label {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
  max-width: none;
  font-size: 0;
}

/* Ô select gọn — chỉ vừa đủ nội dung, RAM | Ổ cứng đứng sát nhau hơn.
   Có thêm 2 ô "Quà tặng" / "Bảo hành" nên hàng có thể xuống dòng. */
.pos-line-config .pos-line-ram,
.pos-line-config .pos-line-ssd {
  width: 150px;
}

.pos-line-config .pos-line-gift {
  width: 190px;
}

.pos-line-config .pos-line-warranty {
  width: 172px;
}

.pos-line-config label::before {
  position: absolute;
  top: -7px;
  left: 9px;
  z-index: 1;
  padding: 0 4px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
}

.pos-line-config label:nth-child(1)::before {
  content: "RAM";
}

.pos-line-config label:nth-child(2)::before {
  content: "Ổ cứng";
}

.pos-line-config label:nth-child(3)::before {
  content: "Quà tặng";
}

.pos-line-config label:nth-child(4)::before {
  content: "Bảo hành";
}

.pos-line-config select {
  width: 100%;
  min-width: 0;
  font-size: 15px;
  padding: 11px 30px 11px 10px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%233b82f6'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.19l3.71-3.96a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px;
}

/* Ô ghi chú (sản phẩm & đơn hàng) */
.pos-line-note-input, 
.pos-order-note-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  font-family: inherit;
  font-size: 15px;
  color: var(--color-text);
  resize: vertical;
}

.pos-line-note-input:focus,
.pos-order-note-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* Luôn ghim ở đáy khu trái (không cuộn theo danh sách sản phẩm) */
.pos-order-note {
  flex: none;
  padding-top: 12px;
  background: var(--main-color);
}

.pos-line-index {
  flex: none;
  width: 16px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 14px;
}

.pos-line-del {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
}

.pos-line-del svg {
  width: 18px;
  height: 18px;
}

.pos-line-del:hover {
  color: var(--color-danger);
  background: var(--color-danger-bg);
}

.pos-line-code {
  flex: none;
  width: 250px;
  font-size: 16px;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.pos-line-name {
  flex: 1 1 auto;
  min-width: 0;
}

.pos-line-qty {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.pos-qty-btn {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: #fff;
  color: var(--color-text);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.pos-qty-btn:hover {
  background: var(--main-color);
}

.pos-qty-input {
  width: 44px;
  padding: 4px 2px;
  border: none;
  border-bottom: 1px solid #ececec;
  background: none;
  text-align: center;
  font-size: 15px;
  font-family: inherit;
  color: var(--color-text);
}

.pos-line-price-input {
  width: 120px;
  padding: 4px 2px;
  border: none;
  border-bottom: 1px solid #ececec;
  background: none;
  text-align: right;
  font-size: 15px;
  font-family: inherit;
  color: var(--color-text);
}

.pos-qty-input:focus,
.pos-line-price-input:focus {
  outline: none;
  border-bottom-color: var(--color-primary);
}

.pos-line-total {
  flex: none;
  width: 130px;
  text-align: right;
  font-size: 15px;
  font-weight: 700;
}

/* ---------- POS: khu thanh toán (phải 20%) ---------- */
/* Mọi chữ 16px / 500, màu var(--color-text); riêng các số tổng đậm hơn (600). */
.pos-pay {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 12px 10px;
  gap: 20px;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
}

/* Hàng 1: người tạo (trái) | thời gian (phải, width gọn) */
.pos-pay-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pos-pay-user {
  white-space: nowrap;
}

.pos-pay-time {
  flex: 0 0 auto;
  width: 200px;
  max-width: 100%;
  padding: 5px 6px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: #fff;
  font-size: 16px;
  font-weight: 500;
  font-family: inherit;
  color: var(--color-text);
  text-align: right;
}

/* Hàng tìm khách hàng — ngay dưới pos-pay-meta */
.pos-pay-customer {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
}

.pos-pay-customer.is-selected {
  justify-content: space-between;
}

.pos-customer-icon {
  flex: none;
  display: flex;
  color: var(--color-text-muted);
}

.pos-customer-icon svg {
  width: 16px;
  height: 16px;
}

.pos-customer-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
}

.pos-customer-input:focus {
  outline: none;
}

.pos-customer-add {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: #fff;
  font-size: 18px;
  line-height: 1;
  color: var(--color-primary);
  cursor: pointer;
}

.pos-customer-add:hover {
  background: var(--main-color);
}

/* Gợi ý khách hàng — dùng chung .po-suggestions, khớp bề rộng hàng */
.pos-customer-suggest {
  left: 0;
  width: 100%;
}

.pos-customer-suggest-phone {
  font-size: 14px;
  color: var(--color-primary);
}

/* Khi đã chọn khách */
.pos-customer-picked {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pos-customer-picked-name {
  align-self: flex-start;
  max-width: 100%;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pos-customer-picked-name:hover {
  color: var(--color-primary);
}

.pos-customer-picked-phone {
  font-size: 14px;
  color: var(--color-primary);
}

.pos-customer-clear {
  flex: none;
  padding: 0 4px;
  border: none;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
}

.pos-customer-clear:hover {
  color: var(--color-danger);
}

/* Đẩy 2 nút xuống đáy, mọi thứ còn lại dồn lên trên */
.pos-pay-grow {
  flex: 1 1 auto;
}

/* Lưới 3 cột: nhãn (trái) | giữa (trái) | giá trị (phải) */
.pos-pay-totals {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 94px;
  align-items: center;
  gap: 12px 6px;
}

.pos-pay-label {
  text-align: left;
  line-height: 1.25;
  color: var(--color-text);
}

.pos-pay-label--wide {
  grid-column: 1 / 3;
}

.pos-pay-mid {
  text-align: left;
  color: var(--color-text);
}

select.pos-vat-rate {
  padding: 3px 4px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: #fff;
  font-size: 16px;
  font-weight: 500;
  font-family: inherit;
  color: var(--color-text);
}

/* Các số tổng */
.pos-pay-val {
  justify-self: end;
  text-align: right;
  font-weight: 600;
  color: var(--color-text);
}

.pos-pay-input {
  width: 100%;
  padding: 4px 2px;
  border: none;
  border-bottom: 1px solid #ececec;
  background: none;
  text-align: right;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  color: var(--color-text);
}

.pos-pay-input:focus {
  outline: none;
  border-bottom-color: var(--color-primary);
}

.pos-pay-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.pos-pay-actions .btn {
  padding: 12px 6px;
  font-size: 16px;
}

/* ===================================================================
   POS (Bán hàng) — MOBILE (≤768px): xếp dọc 1 cột, cả trang cuộn.
   Desktop KHÔNG đổi (toàn bộ nằm trong media query này). JS không sửa.
   =================================================================== */
@media (max-width: 768px) {
  /* Topbar: ô tìm hàng 1 hàng, hàng tab hóa đơn cuộn ngang bên dưới */
  .pos-topbar {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 8px 10px 0;
  }

  /* Cột dọc khiến margin-left:auto vô nghĩa (stretch full-width) — neo góc trên-phải
     bằng position:absolute, chừa chỗ cho input search khỏi bị đè. */
  .pos-search input {
    padding-right: 40px;
  }

  .pos-close {
    position: absolute;
    top: 8px;
    right: 10px;
    margin: 0;
  }

  .pos-search {
    flex: none;
    margin: 0 0 4px;
  }

  .pos-tab {
    font-size: 16px;
    padding: 8px 6px 8px 12px;
  }

  /* Body: bỏ chia 80/20 → xếp dọc; bỏ khóa chiều cao (JS gán inline) để cả trang cuộn */
  .pos-body {
    flex-direction: column;
    height: auto !important;
    gap: 10px;
    padding: 10px 10px calc(76px + env(safe-area-inset-bottom, 0px));
  }

  .pos-main,
  .pos-side {
    flex: none;
    width: 100%;
    max-width: 100%;
    overflow: visible;
  }

  .pos-main-scroll {
    overflow: visible;
  }

  /* --- Dòng hàng: gộp .pos-line-row vào .pos-line rồi xếp lại bằng order ---
     Hàng 1: Tên (kèm Thuộc tính, xếp dọc) — trọn hàng
     Hàng 2: SL | Đơn giá | Thành tiền — 3 cột
     Hàng 3: RAM | Ổ cứng — 2 cột
     Hàng 4: nút ghi chú + xóa — căn phải
     Hàng 5: ô ghi chú sản phẩm (khi mở) — cuối cùng */
  .pos-line {
    flex-flow: row wrap;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
  }

  .pos-line-row {
    display: contents;
  }

  .pos-line-index,
  .pos-line-code {
    display: none;
  }

  .pos-line-name {
    order: 1;
    flex: 1 1 100%;
    min-width: 0;
  }

  .pos-line-qty {
    order: 2;
    flex: 0 0 auto;
    gap: 6px;
  }

  .pos-line-qty .pos-qty-btn {
    width: 26px;
    height: 26px;
  }

  .pos-line-qty .pos-qty-input {
    width: 30px;
  }

  .pos-line-price {
    order: 3;
    flex: 1 1 0;
    min-width: 0;
  }

  .pos-line-price-input {
    width: 100%;
  }

  .pos-line-total {
    order: 4;
    flex: 0 0 auto;
    width: auto;
    min-width: 78px;
    font-size: 15px;
  }

  /* RAM | Ổ cứng | Quà tặng | Bảo hành — trọn hàng, 2 cột chia đôi, tự xuống dòng.
     `.pos-line-config` "tan" (display: contents) để nút "Thêm hàng cùng loại"
     đứng CHUNG hàng với nút ghi chú / xóa (tất cả dồn phải).
     (style ô select xem rule chung .pos-line-config) */
  .pos-line-config {
    display: contents;
  }

  .pos-line-config label {
    order: 5;
    flex: 1 1 calc(50% - 5px);
    max-width: none;
  }

  .pos-line-config .pos-line-ram,
  .pos-line-config .pos-line-ssd,
  .pos-line-config .pos-line-gift,
  .pos-line-config .pos-line-warranty {
    width: 100%;
  }

  /* Hàng cuối: [ghi chú] [thêm cùng loại] [xóa] — cả cụm dồn phải */
  .pos-line-note-btn {
    order: 6;
    flex: 0 0 auto;
    margin-left: auto;
  }

  .pos-line-addsame {
    order: 7;
    flex: 0 0 auto;
    margin-left: 0;
    align-self: center;
  }

  .pos-line-del {
    order: 8;
    flex: 0 0 auto;
  }

  /* Ô ghi chú sản phẩm — cuối cùng */
  .pos-line-note {
    order: 9;
    flex: 1 1 100%;
  }

  /* --- Khu thanh toán --- */
  .pos-pay {
    gap: 14px;
  }

  /* Người tạo + ngày giờ nằm cùng 1 hàng */
  .pos-pay-time {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
  }

  /* Không cần đẩy nút xuống đáy khi cả trang đã cuộn */
  .pos-pay-grow {
    display: none;
  }

  .pos-pay-actions .btn {
    padding: 14px 6px;
  }
}

/* ---------- Chi tiết dòng xổ xuống (dùng chung mọi trang danh sách) ---------- */
.row-expandable {
  cursor: pointer;
}

.row-expandable:hover {
  background: var(--color-primary-light);
}

/* Khi mở 1 dòng: khung border dày bao trọn dòng gốc + phần chi tiết bên dưới
   (border-collapse của .table nên chỉ cần đặt border lên các cạnh ngoài). */
.row-expandable.row-detail-open > td {
  background: var(--color-primary-light);
  border-bottom: none;
  /* box-shadow thay border-top: không bị border-collapse "nhường" cho gạch xám của dòng trên */
  box-shadow: inset 0 1px 0 0 var(--color-primary);
}

.row-expandable.row-detail-open > td:first-child {
  border-left: 1px solid var(--color-primary);
}

.row-expandable.row-detail-open > td:last-child {
  border-right: 1px solid var(--color-primary);
}

.row-detail-tr > td {
  padding: 0;
  background: #fff;
  border: 1px solid var(--color-primary);
  border-top: none;
}

/* Ghi đè các rule .table td:last-child / tr:last-child để khung chi tiết luôn kín
   (kể cả khi dòng chi tiết là dòng cuối bảng, ví dụ lúc tìm kiếm ít kết quả). */
.row-detail-tr > td:last-child {
  border-right: 1px solid var(--color-primary) !important;
}

.table tbody tr.row-detail-tr:last-child > td {
  border-bottom: 1px solid var(--color-primary);
}

/* Bảng danh sách kéo dài hết màn hình: dòng cuối vẫn có gạch chân (tránh cảm giác
   "lửng" khi tìm kiếm ra ít kết quả). Không áp cho bảng bo góc thường. */
.table-wrap--flush .table tbody tr:last-child > td {
  border-bottom: 1px solid #ececec;
}

.table-wrap--flush .table tbody tr.row-detail-tr:last-child > td {
  border-bottom: 1px solid var(--color-primary);
}

.row-detail-loading,
.row-detail-placeholder,
.stock-card-empty {
  padding: 24px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 15px;
}

.row-detail-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 12px 0;
  border-bottom: 1px solid #ececec;
}

.row-detail-tab {
  border: none;
  background: transparent;
  padding: 8px 16px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: 8px 8px 0 0;
}

.row-detail-tab:hover {
  color: var(--color-text);
}

.row-detail-tab.active {
  background: #fff;
  color: var(--color-primary);
  box-shadow: inset 0 -2px 0 var(--color-primary);
}

.row-detail-panels {
  padding: 14px 16px;
}

.row-detail-panel {
  display: none;
}

.row-detail-panel.active {
  display: block;
}

.row-detail-scroll {
  overflow-x: auto;
}

.row-detail-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
}

.row-detail-footer .btn {
  padding: 8px 18px;
}

/* Bảng Thẻ kho */
.stock-card-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.stock-card-table th,
.stock-card-table td {
  padding: 12px 12px;
  border-bottom: 1px solid #ececec !important;
  text-align: left;
  white-space: nowrap;
}

.stock-card-table th {
  background: var(--color-primary-light);
  color: var(--color-text);
  font-weight: 600;
}

.stock-card-table th.num,
.stock-card-table td.num {
  text-align: right;
}

.stock-card-table tbody tr:last-child td {
  border-bottom: none;
}

/* Trong bảng chi tiết phiếu: tên hàng + thuộc tính nằm cùng 1 hàng */
.stock-card-table .item-name {
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}

.stock-card-table .item-name .item-name-title {
  white-space: nowrap;
}

.stock-card-table .item-name .attribute-badge {
  margin-top: 0;
  white-space: nowrap;
}

/* Dòng phụ (RAM / Ổ cứng kèm máy) dưới tên hàng */
.row-detail-subline {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--color-text-muted);
}

/* Khu 80% / 20% trong panel chi tiết (dùng chung) */
.row-detail-split {
  display: flex;
  gap: 16px;
  margin-top: 16px;
  align-items: stretch;
}

.row-detail-split-main {
  flex: 0 0 80%;
  max-width: 80%;
}

.row-detail-split-side {
  flex: 1 1 20%;
  min-width: 0;
}

.row-detail-note {
  width: 100%;
  min-height: 84px;
  padding: 10px 12px;
  border: 1px solid #ececec;
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 15px;
  color: var(--color-text);
  resize: vertical;
}

.row-detail-note:focus {
  outline: none;
  border-color: var(--color-primary);
}

.row-detail-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  font-size: 16px;
}

.row-detail-summary .k {
  color: var(--color-text-muted);
}

.row-detail-summary .v {
  text-align: right;
  font-weight: 600;
}

/* ---------- Tổng quan (dashboard) ---------- */

/* Vùng nội dung phải: không có khung panel riêng, để các .card nổi trên nền trang. */
.module-main--plain {
  background: #fff;
  border: none;
  box-shadow: none;
  padding: 16px;
  border-radius: var(--radius);
}


/* Header trang — CHỈ dùng cho mobile (desktop giữ sidebar + dash-toolbar) */
.dash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.dash-head--mobile {
  display: none;
}

.dash-title {
  margin: 0;
  font-size: 26px;
}

.dash-tabs {
  display: flex;
  gap: 6px;
}

.dash-tabs a {
  padding: 6px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

.dash-tabs a:hover {
  background: var(--main-color);
}

.dash-tabs a.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* Cho phép dùng <button> làm tab-pill (chuyển client-side, không tải lại trang) */
button.range-pill {
  font-family: inherit;
  cursor: pointer;
}

/*
 * Lưới tổng quan 4 cột (desktop): hàng KPI (4 thẻ) + hàng biểu đồ
 * ("Doanh thu theo chi nhánh" 1 cột, "…theo danh mục" 2 cột) + "Top 10" trọn hàng.
 */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.dash-grid > .stat-card {
  grid-column: span 1;
}

.dash-grid > .dash-cell-branch {
  grid-column: 1 / span 1;
}

.dash-grid > .dash-cell-category {
  grid-column: 2 / span 2;
}

.dash-grid > .dash-cell-top {
  grid-column: 1 / -1;
}

/* Bảng chi nhánh: để cột tự co theo nội dung, số không xuống dòng. */
.dash-cell-branch .table {
  table-layout: auto;
}

.dash-cell-branch .table th,
.dash-cell-branch .table td {
  padding: 10px;
  white-space: nowrap;
}

/* Cột "Lợi nhuận" của bảng chi nhánh — chỉ hiện trên mobile (xem @media ≤768px) */
.branch-profit-col {
  display: none;
}

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

  .dash-grid > .dash-cell-branch,
  .dash-grid > .dash-cell-category,
  .dash-grid > .dash-cell-top {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .dash-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Tổng quan — bố cục riêng cho MOBILE (≤768px) ===== */
@media (max-width: 768px) {
  /* Header trang thay cho sidebar + dash-toolbar — xếp dọc:
     hàng 1 = tiêu đề + tab (dash-head-row), hàng 2 = 4 nút chọn kỳ. */
  .dash-head--mobile {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .dash-head--mobile .dash-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-width: 0;
  }

  /* Thu gọn để tiêu đề + tab đứng chung 1 hàng ở màn hẹp */
  .dash-head--mobile .dash-title {
    font-size: 20px;
  }

  .dash-head--mobile .dash-tabs a {
    padding: 10px 10px;
    font-size: 13px;
  }

  /* .dash-head-row/.dash-range-pills là flex-item trong flex-column (.dash-head--mobile) —
     mặc định min-width:auto khiến chúng PHÌNH theo nội dung (vd 6 nút kỳ) thay vì co lại
     theo màn hình, kéo tràn ngang cả trang → tab "Giá trị kho" bị đẩy ra ngoài màn hình.
     width:100% + min-width:0 ép chúng tôn trọng bề ngang cha, để overflow-x:auto bên dưới
     hoạt động đúng nghĩa "cuộn ngang trong khung" thay vì tràn cả trang. */
  .dash-tabs {
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .dash-tabs::-webkit-scrollbar {
    display: none;
  }

  /* 6 nút chọn kỳ: quá hẹp để chia đều vừa 1 hàng như trước (4 nút) — cuộn ngang thay vì ép nhỏ chữ.
     Ẩn thanh cuộn (vẫn cuộn được bằng vuốt/kéo) — cùng cách đã dùng cho .table-wrap/.pos-tabs. */
  .dash-range-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    width: 100%;
    min-width: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .dash-range-pills::-webkit-scrollbar {
    display: none;
  }

  .dash-range-pills .range-pill {
    flex: none;
    padding: 10px 10px;
    font-size: 13px;
    text-align: center;
    white-space: nowrap;
  }

  .dash-layout {
    display: block;
  }

  .dash-layout .module-sidebar {
    display: none;
  }

  .dash-layout .module-main--plain {
    width: 100%;
  }

  /* KPI: 2 cột × 2 hàng (các thẻ bằng chiều cao) · "chi nhánh" & "danh mục" & "Top 10": trọn hàng */
  .dash-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .dash-grid > .stat-card {
    grid-column: span 1;
  }

  .dash-grid > .dash-cell-branch,
  .dash-grid > .dash-cell-category,
  .dash-grid > .dash-cell-top {
    grid-column: 1 / -1;
  }

  /* Thẻ KPI: gọn hơn, nhãn tách 2 dòng (nội dung / mốc thời gian).
     Bọc bằng .dash-layout để thắng các rule gốc (.stat-card / .stat-value /
     .dash-h3) nằm SAU trong file — @media không tự tăng specificity. */
  .dash-layout .stat-card {
    gap: 4px;
    padding: 12px 16px;
  }

  .dash-layout .stat-label {
    display: flex;
    flex-direction: column;
  }

  .dash-layout .stat-period::before {
    content: none;
  }

  .dash-layout .stat-value {
    font-size: 20px;
  }

  .dash-layout .dash-h3 {
    font-size: 20px;
  }

  /* Bảng trong Dashboard (chi nhánh / giá trị kho): bỏ width cứng của <colgroup>,
     cho cột "Kho" tự co theo nội dung thay vì ép xuống 1 ký tự/dòng. */
  .dash-layout .card .table {
    table-layout: auto;
  }

  .dash-layout .card .table > colgroup {
    display: none;
  }

  /* Bảng chi nhánh có thêm cột "Lợi nhuận" trên mobile — cho số xuống dòng,
     thu gọn padding/cỡ chữ để vừa 3 cột trong thẻ. */
  .branch-profit-col {
    display: table-cell;
  }

  .dash-cell-branch .table th,
  .dash-cell-branch .table td {
    padding: 8px 6px;
    font-size: 13px;
    white-space: normal;
  }

  /* Cảnh báo tồn kho: 2 hàng × 2 cột (dùng .dash-layout để thắng rule .dash-alerts gốc nằm sau) */
  .dash-layout .dash-alerts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .dash-layout .dash-alert {
    flex: none;
    min-width: 0;
  }

  /* Ẩn nút Nhập/Xuất Excel trên mobile */
  .btn-fill {
    display: none;
  }
}

/* Bộ lọc danh mục nằm cùng hàng với tiêu đề "Giá trị kho hiện tại" */
.dash-cat-filter {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dash-cat-filter label {
  font-size: 13px;
  color: var(--color-text-muted);
}

.dash-cat-filter select {
  padding: 6px 8px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  font-size: 14px;
  background: #fff;
}

.range-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Hàng 4 nút chọn khoảng thời gian trên header Dashboard mobile
   (nằm dưới .dash-tabs; chi tiết bố cục trong @media ≤768px). */
.dash-range-pills {
  display: flex;
  gap: 6px;
}

.range-pill {
  padding: 6px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.4;
}

.range-pill:hover {
  background: var(--main-color);
}

.range-pill.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 600;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.stat-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat-label {
  font-size: 14px;
  color: var(--color-text-muted);
}

/* Desktop: mốc thời gian nối tiếp nhãn bằng dấu "·" (mobile tách xuống dòng riêng). */
.stat-period::before {
  content: " · ";
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
}

.stat-sub {
  font-size: 13px;
  color: var(--color-text-muted);
}

.stat-delta {
  font-size: 13px;
  font-weight: 600;
}

.stat-delta.up {
  color: var(--color-success);
}

.stat-delta.down {
  color: var(--color-danger);
}

.dash-h3 {
  font-size: 18px;
  margin: 0 0 12px;
}

.dash-top-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.dash-top-head .dash-h3 {
  margin: 0;
}

.dash-alerts {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.dash-alert {
  flex: 1;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 20px;
  color: var(--color-text);
  font-size: 15px;
}

.dash-alert strong {
  font-size: 22px;
  color: var(--color-primary);
  margin-right: 6px;
}

.dash-alert:hover {
  border-color: var(--color-primary);
}

/* Biểu đồ cột đôi (thuần CSS) — mỗi nhóm danh mục×chi nhánh có 2 cột: Doanh thu + Lợi nhuận */
.chart-legend {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.chart-legend .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chart-legend .swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}

.chart-legend .swatch.rev {
  background: var(--color-primary);
}

.chart-legend .swatch.pro {
  background: var(--color-success);
}

.grouped-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  height: 240px;
  margin-top: 8px;
  padding-top: 8px;
  border-bottom: 2px solid var(--color-border);
}

.grouped-bar-chart .bar-group {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.grouped-bar-chart .bar-pair {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
}

.grouped-bar-chart .bar-slot {
  flex: 1;
  max-width: 46px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.grouped-bar-chart .bar {
  width: 100%;
  min-height: 2px;
  border-radius: 5px 5px 0 0;
  background: var(--color-primary);
}

.grouped-bar-chart .bar.rev {
  background: var(--color-primary);
}

.grouped-bar-chart .bar.pro {
  background: var(--color-success);
}

.grouped-bar-chart .bar.neg {
  background: var(--color-danger);
  height: 2px;
}

.grouped-bar-chart .bar-value {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.grouped-bar-chart .bar-value.neg {
  color: var(--color-danger);
}

.grouped-bar-chart .bar-label {
  font-size: 11px;
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.3;
  max-width: 100%;
  word-break: break-word;
}

/* Biểu đồ cột ngang (thuần CSS) — Top 10 sản phẩm bán chạy */
.hbar-chart {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

.hbar-row {
  display: grid;
  grid-template-columns: minmax(200px, 340px) 1fr auto;
  gap: 14px;
  align-items: center;
}

.hbar-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.hbar-rank {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--main-color);
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hbar-label .item-name {
  min-width: 0;
}

.hbar-label .item-name-title {
  font-size: 13px;
  line-height: 1.35;
}

.hbar-label .attribute-badge {
  font-size: 12px;
  margin-top: 2px;
}

.hbar-fill {
  height: 22px;
  min-width: 3px;
  background: var(--color-primary);
  border-radius: 4px;
}

.hbar-value {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-text);
}

/* Desktop giữ nguyên: mỗi dòng chỉ hiện giá trị theo tiêu chí đang chọn.
   Mobile (bên dưới) hiện cả số lượng lẫn doanh thu. */
.top-list[data-metric='qty'] .hbar-rev,
.top-list[data-metric='revenue'] .hbar-qty {
  display: none;
}

/* Top 10 — mobile: bỏ thanh cột, mỗi dòng = Tên hàng | (Số lượng · Doanh thu) */
@media (max-width: 768px) {
  .hbar-row {
    grid-template-columns: 1fr max-content;
    gap: 10px;
    align-items: start;
  }

  .hbar-fill {
    display: none;
  }

  /* Bỏ số thứ hạng trên mobile (danh sách đã theo đúng thứ tự) */
  .hbar-rank {
    display: none;
  }

  .hbar-value {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
  }

  .top-list[data-metric='qty'] .hbar-rev,
  .top-list[data-metric='revenue'] .hbar-qty {
    display: block;
  }

  .hbar-value .hbar-rev {
    font-weight: 400;
    color: var(--color-text-muted);
  }

  /* Chú thích "Độ dài thanh = …" không còn ý nghĩa khi đã bỏ thanh cột */
  .dash-cell-top .top-list > .stat-sub {
    display: none;
  }
}

/* ---------- Thông báo (chuông trong sidebar) — nút tròn cạnh "Bán hàng" ---------- */
.notif-bell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.notif-bell:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.24);
  transform: translateY(-1px);
}

.notif-bell:active {
  transform: translateY(0);
}

.notif-bell svg {
  width: 21px;
  height: 21px;
  flex: none;
}

.notif-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  flex: none;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border: 2px solid var(--color-primary);
  border-radius: 8px;
  background: var(--color-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 12px;
  text-align: center;
  animation: notifBadgePulse 1.8s ease-in-out infinite;
}

@keyframes notifBadgePulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}

.notif-list {
  max-height: 60vh;
  overflow-y: auto;
  margin: 0 -8px;
  background: #fff;
  border-radius: var(--radius);
}

.notif-item {
  display: flex;
  gap: 12px;
  padding: 12px 12px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  text-decoration: none;
}

.notif-item:last-child {
  border-bottom: none;
}

.notif-item[href]:hover {
  background: var(--color-primary-light);
}

.notif-icon {
  flex: none;
  font-size: 18px;
  line-height: 1.4;
}

.notif-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.notif-msg {
  font-size: 14px;
  line-height: 1.4;
}

.notif-time {
  font-size: 12px;
  color: var(--color-text-muted);
}

.notif-empty {
  padding: 24px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 14px;
}

/* Tab "Thông báo" trong trang Hệ thống: bỏ giới hạn 60vh/cuộn riêng của popup chuông —
   hiển thị đầy đủ danh sách, tràn hết khung (desktop lẫn mobile). */
.page--notif-full .module-main {
  padding: 0;
  border: none;
}

/* .module-main mất hết padding ở trang này (tràn viền danh sách thông báo) — title-row
   cần tự chừa padding + kẻ ngăn cách với .notif-list bên dưới. */
.page--notif-full .module-title-row {
  padding: 16px 16px 12px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--color-border);
}

.page--notif-full .notif-list {
  max-height: none;
  overflow-y: visible;
  margin: 0;
  border-radius: 0;
}

.page--notif-full .notif-item {
  padding: 14px 16px;
}

@media (max-width: 768px) {
  /* Mobile: .module-layout xếp dọc nên module-main chiếm hết bề ngang — tràn thêm
     sát 2 mép màn hình (bù lại padding 12px của .app-main, xem .page--products). */
  .page--notif-full .module-main {
    margin-left: -12px;
    margin-right: -12px;
  }
}

/* ---------- Kiểm kho: màu cho SL / giá trị lệch ---------- */
.st-up {
  color: var(--color-success);
  font-weight: 600;
}

.st-down {
  color: var(--color-danger);
  font-weight: 600;
}

/* ---------- Web Push: toggle trong modal Thông báo ---------- */
.push-toggle {
  padding: 10px 12px;
  margin: 0 -8px 4px;
  border-bottom: 1px solid var(--color-border);
  font-size: 13px;
  color: var(--color-text-muted);
  min-height: 20px;
}

.push-toggle:empty {
  display: none;
}

.push-link {
  color: var(--color-primary) !important;
  font-size: 13px;
  padding: 0;
}

.push-state {
  color: var(--color-danger);
}

/* ---------- Office 365 dùng chung ---------- */
.oa-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.oa-kpi {
  background: var(--main-color);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px;
}

.oa-kpi--warn {
  background: #fff6e5;
}

.oa-kpi-label {
  display: block;
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.oa-kpi-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.oa-kpi-value small {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* ---- Cấp 1: Cha ---- */
.oa-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 24px;
  overflow: hidden;
  border: solid 1px var(--color-border);
}

.oa-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  flex-wrap: wrap;
}

.oa-card-id {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.oa-card-avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: #fbf1de;
  color: #b6790a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
}

.oa-card-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.oa-card-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oa-card-meta {
  font-size: 12.5px;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.oa-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.oa-status-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.oa-status-pill--active { background: var(--color-success-bg); color: var(--color-success); }
.oa-status-pill--expiring { background: #fff6e5; color: #b7791f; }
.oa-status-pill--expired { background: var(--color-danger-bg); color: var(--color-danger); }

.oa-card-stats {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: none;
}

.oa-card-stat { text-align: right; }

.oa-card-stat strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.oa-card-stat span {
  font-size: 10.5px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.oa-edit-link {
  flex: none;
  font-size: 13px;
}

/* ---- Lưới slot: 1 ô Gốc + tối đa 5 ô Con ---- */
.oa-slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 10px;
  padding: 14px 18px 18px;
}

.oa-slot {
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--main-color);
  padding: 12px 13px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  min-height: 100px;
  font-family: inherit;
  color: var(--color-text);
}

button.oa-slot {
  cursor: pointer;
}

button.oa-slot:hover {
  border-color: var(--color-primary);
}

button.oa-slot:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.oa-slot-tag {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 7px;
  border-radius: 6px;
}

.oa-slot-tag--root { background: #fbf1de; color: #b6790a; }
.oa-slot-tag--own { background: var(--color-primary-light); color: var(--color-primary); }
.oa-slot-tag--shop { background: #eee6fb; color: #6b3fc4; }

.oa-slot-name {
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.oa-slot-sub {
  font-size: 11.5px;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oa-slot-expiry {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: auto;
}

.oa-slot--expiring .oa-slot-expiry { color: #b7791f; font-weight: 600; }
.oa-slot--expired .oa-slot-expiry { color: var(--color-danger); font-weight: 600; }

.oa-slot-capacity {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.oa-dots {
  display: flex;
  gap: 3px;
}

.oa-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  background: var(--color-border);
}

.oa-dots i.on { background: currentColor; }
.oa-dots i.off { background: transparent; border: 1.3px solid var(--color-border); }

.oa-slot--root .oa-dots { color: #b6790a; }
.oa-slot--shop .oa-dots { color: #6b3fc4; }

.oa-slot-hint {
  margin-top: auto;
  font-size: 11px;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 3px;
}

.oa-slot-hint svg {
  width: 11px;
  height: 11px;
}

.oa-slot-actions {
  display: flex;
  gap: 6px;
  margin-top: 2px;
  flex-wrap: wrap;
}

.oa-slot-actions form { display: contents; }

.oa-slot-actions a,
.oa-slot-actions button {
  border: none;
  background: none;
  padding: 0;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  color: var(--color-primary);
  font-family: inherit;
}

.oa-slot-actions button.oa-danger { color: var(--color-danger); }
.oa-slot-actions a:hover,
.oa-slot-actions button:hover { text-decoration: underline; }
.oa-slot-actions .oa-sep { color: var(--color-border); }

.oa-slot--ghost {
  border-style: dashed;
  background: transparent;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  gap: 4px;
  text-decoration: none;
}

.oa-slot--ghost:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.oa-slot--ghost .oa-plus {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.4px dashed currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
}

.oa-slot--ghost .oa-ghost-label {
  font-size: 12px;
  font-weight: 600;
}

/* ---- Modal: danh sách Cá nhân dùng email Gốc / Cháu trong Con "Dùng chung" ---- */
.oa-drawer-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.oa-drawer-head h3 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin: 0;
}

.oa-drawer-cap {
  font-size: 11.5px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.oa-drawer-delete {
  margin-left: auto;
}

.oa-drawer-delete button {
  color: var(--color-danger);
  font-size: 12px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.oa-drawer-delete button:hover { text-decoration: underline; }

.oa-chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
}

.oa-chip {
  background: var(--main-color);
  border-radius: 8px;
  padding: 9px 10px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.oa-chip--expired { background: var(--color-danger-bg); }
.oa-chip--expiring { background: #fff6e5; }

.oa-chip-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  flex: none;
  margin-top: 1px;
}

.oa-chip-avatar--root { background: #fbf1de; color: #b6790a; }
.oa-chip-avatar--shared { background: #eee6fb; color: #6b3fc4; }

.oa-chip-info {
  min-width: 0;
  flex: 1;
}

.oa-chip-info strong {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oa-chip-info span {
  font-size: 10.5px;
  color: var(--color-text-muted);
}

.oa-chip-actions {
  display: flex;
  gap: 5px;
  margin-top: 3px;
  flex-wrap: wrap;
}

.oa-chip-actions form { display: contents; }

.oa-chip-actions a,
.oa-chip-actions button {
  border: none;
  background: none;
  padding: 0;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  color: var(--color-primary);
  font-family: inherit;
}

.oa-chip-actions button.oa-danger { color: var(--color-danger); }
.oa-chip-actions .oa-sep { color: var(--color-border); font-size: 10.5px; }

.oa-chip--ghost {
  border: 1px dashed var(--color-border);
  background: transparent;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  min-height: 44px;
}

.oa-chip--ghost:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.oa-empty-hint {
  font-size: 13px;
  color: var(--color-text-muted);
  font-style: italic;
  margin: 0;
}

@media (max-width: 720px) {
  .oa-kpis { grid-template-columns: repeat(2, 1fr); }
  .oa-card-head { flex-direction: column; align-items: flex-start; }
  .oa-card-stats { width: 100%; justify-content: space-between; }
}

/* ---- Toggle "Loại Con" trong modal Thêm Con ---- */
.oa-kind-toggle {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.oa-kind-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 14px;
}

.oa-kind-option:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.oa-kind-option input {
  flex: none;
}

/* ---- Ngày hết hạn set cứng theo tài khoản Gốc, không cho sửa ---- */
.input-locked {
  background: var(--main-color);
  color: var(--color-text-muted);
  cursor: default;
}

/* ---- Ô chọn khách hàng (dùng chung nhiều modal) ---- */
.oa-picked-customer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  background: var(--color-primary-light);
  font-weight: 600;
  color: var(--color-text);
}

.oa-picked-clear {
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-muted);
}