/* =====================================================================
   STAR ADMIN2 — DESIGN TOKENS
   Nguồn: DESIGN.md. Mọi giá trị màu/khoảng cách/bo góc/thời gian dùng
   trong stylesheet bên dưới PHẢI tham chiếu qua biến ở đây — không
   hard-code hex/px rời rạc trong luật của từng component.
   ===================================================================== */
:root{
  /* ---- Typography tokens ---- */
  --font-family-primary: "Roboto", sans-serif;
  --font-family-mono: "Roboto Mono", ui-monospace, SFMono-Regular, monospace; /* bổ sung: DESIGN.md không quy định font mono, cần cho hiển thị mã SKU/phiếu canh cột — xem ghi chú bàn giao */
  --font-size-base: 12.992px;
  --font-weight-base: 400;
  --line-height-base: 23.3856px;
  --font-size-xs: 11px;   /* nhãn phụ, badge nhỏ, ghi chú */
  --font-size-sm: 12px;   /* text phụ, table head */
  --font-size-md: 12.19px;/* text phụ đậm hơn 1 nấc */
  --font-size-lg: 12.99px;/* text nội dung chính (input, table cell) */
  --font-size-xl: 13px;   /* text nội dung nhấn nhẹ */
  --font-size-2xl: 14px;  /* section title, subtitle nhấn */
  --font-size-3xl: 15px;  /* modal title, số liệu vừa */
  --font-size-4xl: 16px;  /* h1 trang — mức lớn nhất trong scale */

  /* ---- Color tokens (semantic) ---- */
  --color-text-primary: #1f1f1f;
  --color-text-secondary: #484848;   /* = color.text.tertiary trong DESIGN.md */
  --color-text-muted: #737f8b;       /* = color.text.inverse trong DESIGN.md */
  --color-surface-muted: #ffffff;    /* = color.surface.muted — nền card/bề mặt chính */
  --color-surface-raised: #f4f5f7;   /* = color.surface.raised — nền trang, nền phụ */
  --color-surface-strong: #1e5631;   /* = color.surface.strong — màu hành động chính (brand), lấy theo màu xanh logo */
  --color-surface-base: #000000;     /* = color.surface.base — dùng cho lớp phủ modal/inverse, KHÔNG dùng làm nền trang */

  /* ---- Semantic aliases dùng xuyên suốt component (giữ tên biến cũ để không phải sửa lại toàn bộ selector bên dưới) ---- */
  --bg: var(--color-surface-raised);
  --surface: var(--color-surface-muted);
  --surface-muted: var(--color-surface-raised);
  --border: #E4E6EA;         /* không có trong DESIGN.md — suy ra tint trung tính từ surface.raised, xem ghi chú */
  --border-strong: #C7CBD1;  /* không có trong DESIGN.md — suy ra đậm hơn --border 1 nấc */
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-muted: var(--color-text-muted);

  --accent: var(--color-surface-strong);
  --accent-rgb: 30,86,49;
  --accent-hover: #194728;   /* darken(--accent, ~15%) — không có trong DESIGN.md, suy ra để đủ tương phản hover */
  --accent-bg: #E4EBE6;      /* tint nhạt của --accent — không có trong DESIGN.md, suy ra cho pill/badge nền nhạt */

  /* Trạng thái (success/danger/warning/purple): DESIGN.md không cấp token — giữ palette
     trung tính an toàn tương phản AA, tách biệt khỏi --accent để không lẫn với màu brand. */
  --danger: #D0332B; --danger-bg: #FCEBEA;
  --success: #1E7B4D; --success-bg: #E3F3EA;
  --warning: #B4650E; --warning-bg: #FDF1E1;
  --purple: #6C5CE7; --purple-bg: #EEECFC;

  /* ---- Radius tokens ---- */
  --radius-xs: 3.25px; --radius-sm: 4px; --radius-md: 14px; --radius-scale-lg: 6px; --radius-xl: 20px; --radius-2xl: 100px;
  --radius: var(--radius-md);        /* bo góc mặc định: card, input, button */
  --radius-lg: var(--radius-xl);     /* bo góc lớn: modal, order card */
  --radius-pill: var(--radius-2xl);  /* pill/badge/status/search — thay mọi border-radius:20px cứng trước đây */

  /* ---- Motion tokens ---- */
  --motion-instant: 150ms; --motion-fast: 250ms; --motion-normal: 300ms; --motion-slow: 400ms; --motion-slower: 450ms;

  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-base);
  line-height: var(--line-height-base);
}
/* ---- Biến màu cho các thành phần dùng chung (thanh vật tư, biểu đồ, công tắc, menu trượt…).
   Giá trị dưới đây là theme "Cổ điển"; mỗi file theme trong css/themes/ ghi đè lại khối biến này. ---- */
:root{
  --font-family-heading: var(--font-family-primary);
  --primary-fill: var(--accent); --primary-fill-hover: var(--accent-hover); --primary-ink: #ffffff;
  --tint: var(--accent-bg); --surface-soft: #f4f5f7; --line-soft: #e4e6ea; --toggle-off: #d7d9dc;
  --chart-ok: #2f9e5f; --chart-in: #e0a33a; --chart-in-soft: #f6dca8; --chart-bad: #d0332b; --chart-bad-bg: #fcebea; --chart-bad-line: #f3c6c3;
  --chart-bar: #9fbfa8; --chart-bar-strong: #1e5631; --chart-bar-hover: #194728;
  --status-pending: var(--warning); --status-processing: var(--accent); --status-done: var(--success); --status-cancelled: var(--danger); --status-other: var(--purple);
}
*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{ margin: 0; background: var(--bg); color: var(--text-primary); padding: 20px; overflow: hidden; }
.shell{ height: 100%; width: 100%; margin: 0; }
.app-frame{ display: flex; align-items: stretch; gap: 18px; height: 100%; }
.sidebar{ width: 250px; flex-shrink: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: 0 16px 40px rgba(20,22,30,0.06); overflow: hidden; padding: 18px 12px 14px; display: flex; flex-direction: column; height: 100%; min-height: 0; }
.sidebar-brand{ display: flex; align-items: center; justify-content: center; padding: 4px 6px 18px; flex-shrink: 0; }
.sidebar-brand .logo-mark{ width: auto; height: 88px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sidebar-brand .logo-mark img{ width: auto; height: 100%; object-fit: contain; }
.sidebar-scroll{ flex: 1; overflow-y: auto; min-height: 0; }
.sidebar-group{ margin-bottom: 3px; }
.sidebar-group-label{ display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; padding: 10px 10px 5px; cursor: pointer; border-radius: var(--radius); user-select: none; }
.sidebar-group-label:hover{ color: var(--text-primary); }
.sidebar-group-caret{ font-size: 13px; flex-shrink: 0; transition: transform var(--motion-fast, 0.15s) ease; }
.sidebar-group.collapsed .sidebar-group-caret{ transform: rotate(-90deg); }
.sidebar-group-body{ max-height: 400px; overflow: hidden; transition: max-height var(--motion-fast, 0.15s) ease; }
.sidebar-group.collapsed .sidebar-group-body{ max-height: 0; }
.sidebar-item{ display: flex; align-items: center; gap: 9px; font-size: 12.3px; color: var(--text-secondary); font-weight: 500; padding: 7px 10px; border-radius: var(--radius); cursor: pointer; margin-bottom: 1px; }
.sidebar-item .ic{ width: 21px; height: 21px; flex-shrink: 0; display:flex; align-items:center; justify-content:center; font-size: 18px; color: var(--text-muted); }
.sidebar-item .ic img{ width: 100%; height: 100%; object-fit: contain; }
.sidebar-item:hover{ background: var(--surface-muted); color: var(--text-primary); }
.sidebar-item:hover .ic{ color: var(--text-primary); }
.sidebar-item.active{ background: var(--accent); color: #fff; font-weight: 600; }
.sidebar-item.active .ic{ color: #fff; }
.sidebar-item.active .ic img{ filter: brightness(0) invert(1); }
.main-panel{ position: relative; flex: 1; min-width: 0; min-height: 0; height: 100%; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: 0 16px 40px rgba(20,22,30,0.06); overflow: hidden; }
.topbar{ position: relative; z-index: 1; padding: 14px 24px; flex-shrink: 0; }
.topbar-pill{ display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 7px 10px 7px 8px; box-shadow: 0 1px 3px rgba(20,22,30,0.05); }
.topbar-nav{ display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.topbar-nav-btn{ width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; padding: 0; font-size: 15px; cursor: pointer; }
.topbar-nav-btn:hover:not(:disabled){ background: var(--surface-muted); color: var(--text-primary); }
.topbar-nav-btn:disabled{ opacity: 0.4; cursor: not-allowed; }
.topbar-search{ display: flex; align-items: center; gap: 8px; background: var(--surface-muted); border-radius: var(--radius-pill); padding: 7px 14px; flex: 1 1 auto; min-width: 0; }
.topbar-search i{ color: var(--text-muted); font-size: 15px; flex-shrink: 0; }
.topbar-search input[type="text"]{ border: none; background: transparent; flex: 1; width: auto; min-width: 0; padding: 0; font-size: 12.8px; color: var(--text-primary); }
.topbar-search input[type="text"]:focus{ outline: none; box-shadow: none; border: none; }
.topbar-search input[type="text"]:disabled{ background: transparent; cursor: default; }
.topbar-search input::placeholder{ color: var(--text-muted); }
.topbar-breadcrumb{ display: none; }
.topbar-divider{ width: 1px; height: 26px; background: var(--border); flex-shrink: 0; }
.topbar-profile{ display: flex; align-items: center; gap: 8px; background: none; border: none; padding: 2px; cursor: pointer; flex-shrink: 0; color: inherit; }
.topbar-avatar{ width: 34px; height: 34px; border-radius: 50%; background: #6C5CE7; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.topbar-profile-text{ display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.topbar-profile-name{ font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.topbar-profile-role{ font-size: 11px; color: var(--text-muted); }
.topbar-profile > .ti-chevron-down{ font-size: 13px; color: var(--text-muted); flex-shrink: 0; }
.topbar-bell{ width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; padding: 0; font-size: 16px; cursor: pointer; flex-shrink: 0; }
.topbar-bell:hover{ background: var(--surface-muted); color: var(--text-primary); }
@media (max-width: 900px){
  .topbar-breadcrumb{ display: none; }
}
.view{ position: relative; z-index: 1; background: linear-gradient(180deg, rgba(var(--accent-rgb),0.05), var(--surface) 40px); padding: 24px; display: none; flex: 1; min-height: 0; overflow-y: auto; }
.view.active{ display: block; }
.view.agent-map-view.active{ display: flex; flex-direction: column; overflow: hidden; }
.agmap-search{ position: relative; display: flex; align-items: center; gap: 8px; background: var(--surface-muted); border-radius: var(--radius-pill); padding: 8px 14px; min-width: 260px; }
.agmap-search i{ color: var(--text-muted); font-size: 15px; flex-shrink: 0; }
.agmap-search input[type="text"]{ border: none; background: transparent; flex: 1; width: auto; min-width: 0; font-size: 12.8px; padding: 0; color: var(--text-primary); }
.agmap-search input[type="text"]:focus{ outline: none; box-shadow: none; border: none; }
.agmap-search input::placeholder{ color: var(--text-muted); }
.agmap-search-results{ display: none; position: fixed; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(20,22,30,0.12); max-height: 260px; overflow-y: auto; z-index: 1000; }
.agmap-search-results.show{ display: block; }
.agmap-search-item{ padding: 9px 14px; font-size: 12.5px; cursor: pointer; border-bottom: 1px solid var(--border); }
.agmap-search-item:last-child{ border-bottom: none; }
.agmap-search-item:hover{ background: var(--surface-muted); }
.agmap-search-item .agmap-item-name{ font-weight: 600; color: var(--text-primary); }
.agmap-search-item .agmap-item-address{ color: var(--text-muted); font-size: 11.5px; margin-top: 1px; }
.agmap-search-empty{ padding: 10px 14px; font-size: 12.5px; color: var(--text-muted); }
.ag-map-marker{ background: transparent; border: none; }
.ag-map-marker svg{ display: block; filter: drop-shadow(0 2px 3px rgba(20,22,30,0.35)); }
.page-head{ display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head-search{ display: flex; align-items: center; gap: 14px; flex-shrink: 0; flex-wrap: wrap; }
.page-head-filters{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-head-actions{ padding-left: 14px; border-left: 1px solid var(--border); }
@media (max-width: 560px){ .page-head-actions{ padding-left: 0; border-left: none; } }
.search-box{ display: none; }
.search-box i{ position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 15px; color: var(--text-muted); }
.search-box input[type="text"]{ padding-left: 32px; width: 190px; border-radius: var(--radius-pill); }
.btn-primary-pill{ background: var(--accent); border: none; color: #fff; font-weight: 600; padding: 9px 18px; border-radius: var(--radius-pill); white-space: nowrap; }
.btn-primary-pill:hover{ background: var(--accent-hover); }
.btn-primary-pill:disabled{ background: var(--border-strong); cursor: not-allowed; }
h1{ font-size: var(--font-size-4xl); font-weight: 700; margin: 0 0 4px; letter-spacing: -0.01em; }
.subtitle{ font-size: var(--font-size-xl); color: var(--text-secondary); margin: 0 0 20px; }
.filters{ display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.filters input, .filters select{ flex: 1; min-width: 140px; }
input[type="text"], input[type="number"], input[type="email"], .field input[type="date"], select, textarea, .field input[type="month"]{
  width: 100%; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface); font-size: var(--font-size-xl); color: var(--text-primary); font-family: inherit;
}
input:focus, select:focus, textarea:focus{ outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.16); }
input[readonly]{ background: var(--surface-muted); color: var(--text-muted); }
input:disabled, select:disabled{ background: var(--surface-muted); color: var(--text-muted); cursor: not-allowed; }
input::placeholder, textarea::placeholder{ color: var(--text-muted); }
.kpi-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; }
.kpi-grid.kpi-grid-4{ grid-template-columns: repeat(4, 1fr); }
.kpi-grid.kpi-grid-2{ grid-template-columns: repeat(2, 1fr); }
.kpi-grid.kpi-grid-5{ grid-template-columns: repeat(5, 1fr); }
.kpi-card{ background: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 15px; }
.period-toggle{ display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 2px; flex-shrink: 0; }
.period-toggle button{ border: none; background: transparent; padding: 3px 10px; font-size: 11px; font-weight: 500; border-radius: var(--radius-pill); color: var(--text-secondary); }
.period-toggle button.active{ background: var(--accent); color: #fff; }
.kpi-label{ font-size: var(--font-size-sm); color: var(--text-secondary); margin: 0 0 6px; }
.kpi-value{ font-size: var(--font-size-4xl); font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.section-head{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 10px; }
.section-head h2{ font-size: var(--font-size-2xl); font-weight: 700; margin: 0; }
button{ font-family: inherit; font-size: 13px; font-weight: 500; padding: 8px 14px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-primary); cursor: pointer; transition: background var(--motion-instant) ease, border-color var(--motion-instant) ease; }
button:hover{ background: var(--surface-muted); }
button.primary{ background: var(--accent); border-color: var(--accent); color: #fff; }
button.primary:hover{ background: var(--accent-hover); }
button.primary:disabled{ background: var(--border-strong); border-color: var(--border-strong); cursor: not-allowed; }
button.danger-outline{ color: var(--danger); border-color: #F3C6C3; }
button.danger-outline:hover{ background: var(--danger-bg); }
button.small{ padding: 4px 10px; font-size: 12px; width: 100%; }
button.small + button.small{ margin-top: 4px; }
button.ghost{ background: transparent; border-color: transparent; padding: 6px 8px; }
table{ width: 100%; border-collapse: collapse; font-size: 12.8px; }
thead th{ text-align: left; padding: 9px 11px; background: var(--surface-muted); color: var(--text-secondary); font-weight: 700; font-size: var(--font-size-xs); border-bottom: 1px solid var(--border); }
tbody td{ padding: 9px 11px; vertical-align: top; border-bottom: 1px solid var(--border); font-size: var(--font-size-lg); }
tbody tr:last-child td{ border-bottom: none; }
.table-wrap{ border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap.sticky-actions table{ min-width: 900px; }
.table-wrap.sticky-actions th:last-child, .table-wrap.sticky-actions td:last-child{ position: sticky; right: 0; z-index: 2; box-shadow: -6px 0 8px -6px rgba(0,0,0,0.18); }
.table-wrap.sticky-actions th:last-child{ background: var(--surface-muted); }
.table-wrap.sticky-actions td:last-child{ background: var(--surface); }
.debt-remain{ color: var(--danger); font-weight: 500; }
.debt-remain.zero{ color: var(--success); font-weight: 400; }
tr.order-child-row{ background: var(--surface-muted); }
tr.order-child-row td:nth-child(2){ padding-left: 30px; position: relative; }
tr.order-child-row td:nth-child(2):before{ content: "↳"; position: absolute; left: 12px; color: var(--text-muted); }
.table-wrap table{ min-width: 640px; }
.pill{ display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--accent-bg); color: var(--accent-hover); font-weight: 500; border: 1px solid var(--accent-bg); }
.pill.muted{ background: var(--surface-muted); color: var(--text-secondary); border-color: var(--border); }
.pill.purple{ background: var(--purple-bg); color: #4A3FA8; border-color: var(--purple-bg); }
.status-pill{ display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500; padding: 4px 11px; border-radius: var(--radius-pill); background: var(--accent-bg); color: var(--accent-hover); border: 1px solid #BFE3CD; white-space: nowrap; }
.status-pill.off{ background: var(--danger-bg); color: var(--danger); border-color: #F3C6C3; }
.status-pill.warn{ background: var(--warning-bg); color: var(--warning); border-color: #F3DDB3; }
.status-pill.info{ background: #E6F1FB; color: #0C447C; border-color: #B5D4F4; }
.status-pill.neutral{ background: var(--surface-muted); color: var(--text-secondary); border-color: var(--border); }
.status-pill i{ font-size: 8px; }
.toggle-switch{ position:relative; display:inline-block; flex-shrink:0; width:46px; height:26px; padding:0; border:none; border-radius:999px; background:#D7D9DC; cursor:pointer; transition:background .18s ease; }
.toggle-switch.on{ background:var(--accent); }
.toggle-switch .toggle-knob{ position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .18s ease; }
.toggle-switch.on .toggle-knob{ transform:translateX(20px); }
.toggle-switch:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.warn-line{ color: var(--danger); font-size: 12px; display: flex; align-items: center; gap: 5px; margin-top: 6px; }
.table-footer{ display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; font-size: 12px; color: var(--text-secondary); background: var(--surface-muted); flex-wrap: wrap; gap: 8px; }
.hesocol{ color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.sku-mono{ font-family: "Roboto Mono", monospace; font-size: 12px; font-weight: 500; color: var(--text-primary); }
.form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.code-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field{ margin-bottom: 16px; }
.field label{ display: block; font-size: 12.5px; color: var(--text-secondary); margin-bottom: 5px; }
.req{ color: var(--danger); }
.radio-row{ display: flex; gap: 20px; padding-top: 2px; flex-wrap: wrap; }
.radio-row label{ display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text-primary); }
.radio-row input{ width: auto; }
.check-row{ display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-primary); }
.check-row input{ width: auto; }
.hint-text{ font-size: 12px; color: var(--text-muted); margin-top: 5px; }
.preview-box{ font-size: 13px; background: var(--accent-bg); color: var(--accent-hover); border-radius: var(--radius); padding: 8px 12px; margin-top: 8px; }
.preview-box b{ font-family: "Roboto Mono", monospace; }
.panel{ background: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.panel-title{ font-size: 13px; font-weight: 600; margin: 0 0 3px; }
.dash-grid{ display: grid; grid-template-columns: 1.4fr 1fr; grid-template-areas: "revenue revenue" "status top"; gap: 16px; }
.dash-card{ margin-bottom: 0; }
.dash-card-revenue{ grid-area: revenue; }
.dash-card-status{ grid-area: status; }
.dash-card-top{ grid-area: top; }
.dash-card-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 10px; }
.dash-card-head button.small{ width: auto; }
.dash-chart-wrap{ position: relative; width: 100%; }
.dash-chart-wrap svg{ display: block; width: 100%; height: auto; overflow: visible; }
.dash-table-wrap table{ width: 100%; border-collapse: collapse; font-size: 12.5px; }
.dash-table-wrap th{ text-align: left; padding: 6px 8px; color: var(--text-secondary); font-size: 11px; border-bottom: 1px solid var(--border); }
.dash-table-wrap td{ padding: 6px 8px; border-bottom: 1px solid var(--border); }
.dash-tooltip{ position: absolute; pointer-events: none; background: var(--text-primary); color: #fff; font-size: 11.5px; line-height: 1.4; padding: 6px 9px; border-radius: var(--radius); box-shadow: 0 8px 20px rgba(20,22,30,0.18); opacity: 0; transition: opacity var(--motion-instant) ease; white-space: nowrap; z-index: 20; transform: translate(-50%,-100%); }
.dash-tooltip.show{ opacity: 1; }
.dash-legend{ display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.dash-legend-item{ display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-secondary); }
.dash-legend-dot{ width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.dash-legend-val{ margin-left: auto; font-weight: 600; color: var(--text-primary); }
.dash-bar-row{ display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.dash-bar-row + .dash-bar-row{ border-top: 1px solid var(--border); }
.dash-bar-rank{ width: 18px; flex-shrink: 0; font-size: 12px; color: var(--text-muted); font-weight: 600; text-align: right; }
.dash-bar-label{ width: 38%; flex-shrink: 0; font-size: 12.5px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-bar-track{ flex: 1; height: 9px; background: var(--surface-muted); border-radius: var(--radius-pill); overflow: hidden; }
.dash-bar-fill{ display: block; height: 100%; background: var(--accent); border-radius: var(--radius-pill); }
.dash-bar-val{ width: 72px; flex-shrink: 0; text-align: right; font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.dash-empty{ text-align: center; color: var(--text-muted); font-size: 12.5px; padding: 30px 0; margin: 0; }
@media (max-width: 900px){
  .dash-grid{ grid-template-columns: 1fr; grid-template-areas: "revenue" "status" "top"; }
  .dash-bar-label{ width: 30%; }
}
.panel-hint{ font-size: 12px; color: var(--text-muted); margin: 0 0 12px; }
.alloc-grid{ display: grid; grid-template-columns: 1.2fr 0.7fr 0.9fr 0.9fr 0.9fr; gap: 8px 10px; align-items: center; font-size: 13px; min-width: 560px; }
.alloc-grid .col-head{ font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
.alloc-grid .total-row{ border-top: 1px solid var(--border); padding-top: 8px; font-weight: 600; }
.bao-out{ background: var(--surface); color: var(--text-secondary); }
.status-ok{ font-size: 12px; color: var(--success); display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.status-warn{ font-size: 12.5px; color: var(--danger); background: var(--danger-bg); border: 1px solid #F3C6C3; border-radius: var(--radius); padding: 8px 10px; display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.form-footer{ display: flex; justify-content: flex-end; gap: 10px; padding-top: 6px; border-top: 1px solid var(--border); margin-top: 4px; flex-wrap: wrap; }
.form-footer.spread{ justify-content: space-between; }
.app-toast{ position: fixed; top: 20px; left: 50%; transform: translateX(-50%) translateY(-12px); background: var(--success); color: #fff; font-size: 13px; font-weight: 500; padding: 10px 18px; border-radius: var(--radius); box-shadow: 0 6px 20px rgba(0,0,0,0.15); opacity: 0; pointer-events: none; transition: all var(--motion-fast) ease; z-index: 50; max-width: 460px; text-align: center; }
.app-toast.show{ opacity: 1; transform: translateX(-50%) translateY(0); }
.modal-overlay{ display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); align-items: center; justify-content: center; z-index: 40; padding: 20px; }
.modal-overlay.show{ display: flex; }
.app-modal{ background: var(--surface); border-radius: var(--radius-lg); max-width: 420px; width: 100%; padding: 20px; }
.app-modal h3{ margin: 0 0 10px; font-size: 15px; }
.app-modal p{ font-size: 13.5px; color: var(--text-secondary); line-height: 1.6; margin: 0 0 16px; }
.app-modal-footer{ display: flex; justify-content: flex-end; }
.badge-note{ font-size: 12px; color: var(--text-muted); margin-top: 22px; text-align: center; }
.tag-select{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 6px 8px; background: var(--surface); }
.tag-select:focus-within{ border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.16); }
.tag-pills{ display: flex; flex-wrap: wrap; gap: 6px; }
.tag-pill{ display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500; background: var(--accent-bg); color: var(--accent-hover); padding: 3px 6px 3px 10px; border-radius: var(--radius-pill); }
.tag-pill button{ border: none; background: transparent; color: inherit; cursor: pointer; font-size: 13px; line-height: 1; padding: 2px; display: flex; align-items: center; border-radius: 50%; }
.tag-pill button:hover{ background: rgba(var(--accent-rgb),0.15); }
.tag-select select{ flex: 1; min-width: 140px; border: none; padding: 4px 2px; background: transparent; box-shadow: none; }
.tag-select select:focus{ outline: none; box-shadow: none; }
.action-menu{ display: none; position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(20,22,30,0.12); min-width: 220px; z-index: 30; overflow: hidden; }
.action-menu.show{ display: block; }
.action-menu-item{ padding: 10px 14px; font-size: 13.5px; cursor: pointer; }
.action-menu-item:hover{ background: var(--surface-muted); }
.action-menu-item + .action-menu-item{ border-top: 1px solid var(--border); }
.receipt-meta{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 4px; }
.line-table{ width: 100%; border-collapse: collapse; font-size: 12.8px; }
.line-table th{ text-align: left; padding: 8px 10px; background: var(--surface-muted); color: var(--text-secondary); font-weight: 600; font-size: 11px; border-bottom: 1px solid var(--border); }
.line-table td{ padding: 8px 10px; vertical-align: middle; border-bottom: 1px solid var(--border); }
.line-table tr:last-child td{ border-bottom: none; }
.line-table select, .line-table input{ padding: 6px 8px; font-size: 13px; }
.line-amount{ font-variant-numeric: tabular-nums; white-space: nowrap; }
.line-remove{ padding: 4px 8px; font-size: 12px; color: var(--danger); border-color: var(--danger-bg); }
.total-bar{ display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 12px 16px; background: var(--surface-muted); border-top: 1px solid var(--border); font-size: 14px; }
.total-bar strong{ font-size: 16px; font-weight: 600; }
.low-stock-icon{ width: 15px; height: 15px; vertical-align: middle; margin-left: 6px; cursor: help; }
.info-tip{ position: relative; display: inline-flex; vertical-align: middle; color: var(--text-muted); cursor: help; }
.info-tip:hover{ color: var(--accent); }
.info-tip .tip-box{
  /* Hiệu ứng tooltip theo mẫu .ss-tooltip: hiện bên phải icon, nền xanh, mờ dần + trượt nhẹ sang phải khi hover.
     Nội dung tooltip trong app khá dài nên cho xuống dòng (giới hạn 260px) thay vì nowrap như mẫu. */
  position: absolute; left: 110%; top: 50%; transform: translateY(-50%) translateX(-4px);
  background: #08CB00; color: #ffffff; padding: 4px 8px; border-radius: 5px;
  font-size: 11px; font-weight: 500; line-height: 1.45; text-align: left; text-transform: none; letter-spacing: normal;
  width: max-content; max-width: 260px; white-space: normal;
  opacity: 0; pointer-events: none; z-index: 100;
  transition: opacity .2s ease, transform .2s ease;
}
.info-tip:hover .tip-box{ opacity: 1; transform: translateY(-50%) translateX(0); }
.sku-tags{ display: flex; flex-wrap: wrap; gap: 5px; }
.sku-tag{ font-size: 11px; background: var(--surface-muted); border: 1px solid var(--border); color: var(--text-secondary); padding: 2px 8px; border-radius: var(--radius-pill); white-space: nowrap; }
.pagination{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pagination[hidden]{ display: none; }
.page-nums{ display: flex; align-items: center; gap: 4px; }
.page-btn{ width: 28px; height: 28px; padding: 0; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-secondary); cursor: pointer; font-size: var(--font-size-sm); display: flex; align-items: center; justify-content: center; }
.page-btn:hover{ background: var(--surface-muted); }
.page-btn.active{ background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.page-btn:disabled{ opacity: 0.4; cursor: not-allowed; }
.page-ellipsis{ width: 28px; text-align: center; color: var(--text-muted); font-size: 13px; flex-shrink: 0; }
.page-size{ display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; }
.page-size select{ width: auto; padding: 5px 8px; font-size: 12.5px; }
.row-thumb{ width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.thumb-toggle{ background: transparent; border: 1px solid var(--border-strong); padding: 5px 7px; font-size: var(--font-size-sm); border-radius: var(--radius-scale-lg); }
.icon-edit-btn{ width: 30px; height: 30px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.thumb-row td{ background: var(--surface-muted); padding: 14px 16px; }
.thumb-preview{ display: flex; align-items: flex-start; gap: 14px; }
.thumb-img{ width: 60px; height: 60px; border-radius: var(--radius); background: repeating-linear-gradient(45deg, #E9EBEF, #E9EBEF 8px, #DEE1E7 8px, #DEE1E7 16px); display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--text-muted); text-align: center; flex-shrink: 0; border: 1px solid var(--border); }
.pkg-wh-breakdown{ display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 10px; }
.pkg-wh-chip{ font-size: 11.5px; background: var(--surface); border: 1px solid var(--border); color: var(--text-secondary); padding: 4px 10px; border-radius: var(--radius-pill); white-space: nowrap; }
.pkg-wh-chip strong{ color: var(--text-primary); }
.pkg-wh-chip.low{ border-color: #F3C6C3; background: var(--danger-bg); color: var(--danger); }
.pkg-wh-chip.hold{ border-color: var(--accent); }
.upload-box{ border: 1.5px dashed var(--border-strong); border-radius: var(--radius); padding: 18px; display: flex; align-items: center; gap: 14px; background: var(--surface-muted); cursor: pointer; }
.upload-box:hover{ border-color: var(--accent); }
.upload-box.has-file{ border-style: solid; border-color: var(--accent); }
.upload-icon{ width: 36px; height: 36px; border-radius: var(--radius); background: var(--accent-bg); color: var(--accent-hover); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.upload-text-main{ font-size: 13.5px; font-weight: 500; margin: 0 0 2px; }
.upload-text-sub{ font-size: 12px; color: var(--text-muted); margin: 0; }
.file-chip{ display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; background: var(--accent-bg); color: var(--accent-hover); padding: 4px 10px; border-radius: var(--radius-pill); margin-top: 8px; }
.pkg-form-layout{ display: flex; gap: 28px; align-items: flex-start; }
.pkg-form-main{ flex: 1; min-width: 0; }
.pkg-form-media{ width: 300px; flex-shrink: 0; position: sticky; top: 0; }
.pkg-form-media > label{ display: block; font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
.pkg-image-box{ width: 100%; aspect-ratio: 1 / 1; border: 1.5px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; }
.pkg-image-box:hover{ border-color: var(--accent); }
.pkg-image-box.has-file{ border-style: solid; border-color: var(--accent); }
.pkg-image-preview{ display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--text-muted); font-size: 12.5px; text-align: center; padding: 24px; }
.pkg-image-preview i{ font-size: 34px; color: var(--accent-hover); }
.pkg-image-preview img{ width: 100%; height: 100%; object-fit: cover; }
.pkg-form-media .upload-text-sub{ margin-top: 8px; text-align: center; }
.pkg-form-media .file-chip{ display: flex; justify-content: center; }
@media (max-width: 900px){ .pkg-form-layout{ flex-direction: column; } .pkg-form-media{ width: 100%; position: static; } }
.toggle{ position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; }
.toggle input{ opacity: 0; width: 0; height: 0; }
.toggle-track{ position: absolute; cursor: pointer; inset: 0; background: var(--border-strong); border-radius: var(--radius-pill); transition: 0.15s; }
.toggle-track:before{ content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: 0.15s; }
.toggle input:checked + .toggle-track{ background: var(--accent); }
.toggle input:checked + .toggle-track:before{ transform: translateX(16px); }
.zap-panel{ background: var(--accent-bg); border: 1px solid #BFE3CD; border-radius: var(--radius); padding: 15px; margin-bottom: 18px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.zap-panel-text p{ margin: 0; }
.zap-panel-text .zap-title{ font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 3px; }
.zap-panel-text .zap-sub{ font-size: 12.5px; color: var(--text-secondary); }
.btn-zap{ background: var(--accent); border: none; color: #fff; font-weight: 600; padding: 10px 20px; border-radius: var(--radius-pill); white-space: nowrap; flex-shrink: 0; }
.btn-zap:hover{ background: var(--accent-hover); }
.kv-block{ background: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 16px; margin-bottom: 16px; }
.kv-row{ display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 4px 0; }
.kv-row .k{ color: var(--text-secondary); }
.kv-row .v{ font-weight: 500; text-align: right; }
.capacity-banner{ background: var(--accent-bg); border: 1px solid #BFE3CD; border-radius: var(--radius); padding: 13px 15px; margin: 14px 0; font-size: 13px; }
.capacity-banner b{ font-size: 16px; }
.capacity-banner.short{ background: var(--danger-bg); border-color: #F3C6C3; }
.step-track{ display: flex; align-items: center; gap: 4px; margin-bottom: 18px; flex-wrap: wrap; }
.step-dot{ font-size: 11px; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--surface-muted); color: var(--text-muted); border: 1px solid var(--border); }
.step-dot.done{ background: var(--accent-bg); color: var(--accent-hover); border-color: var(--accent-bg); }
.step-dot.cur{ background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.fy-order-card{ border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 14px; overflow: hidden; }
.fy-order-head{ display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--surface-muted); flex-wrap: wrap; gap: 8px; }
.fy-order-head .title{ font-size: 13.5px; font-weight: 600; }
.fy-order-head .sub{ font-size: 12px; color: var(--text-secondary); }
.fy-progress{ font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--border-strong); }
.fy-progress.complete{ background: var(--accent-bg); color: var(--accent-hover); border-color: var(--accent-bg); }
.fy-check-row{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fy-check-row input{ width: 90px; }
/* =====================================================================
   ACCESSIBILITY — focus-visible & loading state (DESIGN.md §Accessibility)
   ===================================================================== */
a, button, .sidebar-item, .page-btn, .action-menu-item, .thumb-toggle, input, select, textarea{
  outline: none; /* bỏ outline mặc định trình duyệt để thay bằng focus-visible token dưới đây, tránh mất focus indicator */
}
a:focus-visible, button:focus-visible, .sidebar-item:focus-visible, .page-btn:focus-visible,
.action-menu-item:focus-visible, .thumb-toggle:focus-visible, .upload-box:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* input/select/textarea đã có style focus riêng (border+shadow) phía trên — vẫn giữ thêm outline-visible để pass kiểm tra "focus indicator không bị ẩn" khi điều hướng bàn phím trên nền tối/hover */

/* Trạng thái loading dùng chung cho button/khu vực đang xử lý bất đồng bộ.
   Cách dùng: thêm class "is-loading" + aria-busy="true" vào button khi submit form. */
.is-loading{ position: relative; color: transparent !important; pointer-events: none; }
.is-loading::after{
  content:""; position:absolute; top:50%; left:50%; width:14px; height:14px;
  margin:-7px 0 0 -7px; border-radius:50%;
  border:2px solid rgba(255,255,255,0.5); border-top-color:#fff;
  animation: spin var(--motion-slower) linear infinite;
}
button:not(.primary).is-loading::after{ border-color: rgba(31,59,179,0.35); border-top-color: var(--accent); }
@keyframes spin{ to{ transform: rotate(360deg); } }

@media (max-width: 780px){
  body{ padding: 0; }
  .app-frame{ flex-direction: column; gap: 0; }
  .sidebar{ width: 100%; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; border: none; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--border); padding: 10px 12px; gap: 4px; flex-shrink: 0; }
  .sidebar-brand{ padding: 2px 6px; margin-right: 4px; }
  .sidebar-scroll{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px; overflow-x: auto; overflow-y: visible; flex: 0 0 auto; }
  .sidebar-group{ margin-bottom: 0; display: flex; align-items: center; gap: 4px; }
  .sidebar-group-label{ display: none; }
  .sidebar-group-body, .sidebar-group.collapsed .sidebar-group-body{ display: flex; align-items: center; gap: 4px; max-height: none; overflow: visible; }
  .sidebar-item{ margin-bottom: 0; white-space: nowrap; }
  .main-panel{ min-width: 0; height: auto; flex: 1; min-height: 0; border: none; border-radius: 0; box-shadow: none; }
  .topbar{ padding: 10px 12px; }
  .topbar-pill{ gap: 8px; padding: 6px 8px; }
  .topbar-profile-text, .topbar-divider{ display: none; }
  .view{ padding: 16px; }
  .kpi-grid{ grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
  .form-grid, .code-grid, .receipt-meta{ grid-template-columns: 1fr; }
  .filters{ flex-direction: column; }
  .filters input, .filters select{ min-width: 0; width: 100%; }
  .panel{ overflow-x: auto; }
  .form-footer button{ flex: 1 1 auto; }
  .page-head{ flex-direction: column; align-items: stretch; }
  .search-box, .search-box input{ width: 100%; }
}
@media (max-width: 460px){
  .sidebar-item .ic{ display: none; }
  .kpi-grid{ grid-template-columns: 1fr 1fr; }
  .topbar-search{ display: none; }
}

/* =====================================================================
   GLASS THEME (thử nghiệm) — kính mờ kiểu "Liquid Glass" iOS 26 cho
   sidebar + topbar. Muốn quay lại giao diện cũ: xóa nguyên khối CSS
   này (từ dòng comment mở đến hết file) là đủ, không đụng gì khác.
   ===================================================================== */
body{
  background:
    radial-gradient(1100px circle at 8% -12%, rgba(var(--accent-rgb),0.16), transparent 55%),
    radial-gradient(900px circle at 105% -5%, rgba(108,92,231,0.13), transparent 50%),
    radial-gradient(1000px circle at 40% 115%, rgba(var(--accent-rgb),0.11), transparent 55%),
    var(--bg);
  background-attachment: fixed;
}
.sidebar{
  background: rgba(255,255,255,0.32);
  -webkit-backdrop-filter: blur(40px) saturate(160%);
  backdrop-filter: blur(40px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow: 0 8px 32px rgba(20,22,30,0.08), inset 0 1px 0 rgba(255,255,255,0.5);
}
.sidebar-item:hover:not(.active){ background: rgba(255,255,255,0.35); }
.main-panel::before{
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 130px; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(420px circle at 15% -10%, rgba(var(--accent-rgb),0.20), transparent 60%),
    radial-gradient(360px circle at 92% -5%, rgba(108,92,231,0.14), transparent 55%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}
.topbar-pill{
  background: rgba(255,255,255,0.32);
  -webkit-backdrop-filter: blur(34px) saturate(160%);
  backdrop-filter: blur(34px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow: 0 4px 18px rgba(20,22,30,0.06), inset 0 1px 0 rgba(255,255,255,0.5);
}
.topbar-nav-btn, .topbar-bell{ background: rgba(255,255,255,0.28); border-color: rgba(255,255,255,0.4); }
.topbar-nav-btn:hover:not(:disabled), .topbar-bell:hover{ background: rgba(255,255,255,0.55); }
.topbar-search{ background: rgba(255,255,255,0.22); }

/* =====================================================================
   SCROLLBAR — mỏng, không mũi tên, ẩn khi không dùng, chỉ hiện khi
   rê chuột vào vùng cuộn hoặc đang cuộn (class .is-scrolling do JS gắn).
   ===================================================================== */
*{
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
*:hover, *.is-scrolling{
  scrollbar-color: rgba(20,22,30,0.28) transparent;
}
*::-webkit-scrollbar{ width: 8px; height: 8px; }
*::-webkit-scrollbar-button{ display: none; width: 0; height: 0; }
*::-webkit-scrollbar-corner{ background: transparent; }
*::-webkit-scrollbar-track{ background: transparent; }
*::-webkit-scrollbar-thumb{ background-color: transparent; border-radius: var(--radius-pill); border: 2px solid transparent; background-clip: padding-box; }
*:hover::-webkit-scrollbar-thumb, *.is-scrolling::-webkit-scrollbar-thumb{ background-color: rgba(20,22,30,0.28); background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover{ background-color: rgba(20,22,30,0.45); background-clip: padding-box; }

/* ================= CHI TIẾT ĐƠN HÀNG — chia khu vực hiển thị ================= */
.op-section-row{ display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: 16px; align-items: stretch; margin-bottom: 16px; }
.op-section{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.op-section-row > .op-section{ margin-bottom: 0; }
.op-section-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.op-section-head-right{ display: flex; align-items: center; gap: 10px; }
.op-section-head-right select{ min-width: 220px; }
@media (max-width: 760px){
  .op-section-row{ grid-template-columns: 1fr; }
  .op-section-head-right{ flex-wrap: wrap; width: 100%; }
  .op-section-head-right select{ flex: 1; min-width: 0; }
}

/* Popup có bảng (lịch nhập kho dự kiến...) */
.app-modal.wide{ max-width: 760px; }
#modalHtml{ font-size: 13px; margin-bottom: 16px; overflow-x: auto; }
#modalHtml table{ margin-bottom: 10px; }
/* Nút thao tác nhỏ trong bảng vật tư / popup không kéo dãn hết ô */
#opLinesTable td button.small, #modalHtml button.small{ width: auto; display: inline-flex; align-items: center; white-space: nowrap; }
#opLinesTable td [data-inc-line]{ white-space: normal; text-align: left; max-width: 100%; }

/* Thông tin đơn hàng / đại lý: nhãn nhỏ trên, giá trị dưới, xếp lưới để gọn chiều cao */
.op-info-grid{ display: grid; gap: 12px 20px; }
.op-info-grid.cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.op-info-grid.cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.op-info-grid .span-all{ grid-column: 1 / -1; }
.op-info-grid .k{ display: block; font-size: 11.5px; color: var(--text-muted); margin-bottom: 2px; }
.op-info-grid .v{ display: block; font-size: 13px; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
@media (max-width: 760px){ .op-info-grid.cols-3{ grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* Icon lịch nhập kho dự kiến ở cuối dòng vật tư */
.inc-icon{ width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--warning); background: var(--warning-bg); color: var(--warning); font-size: 16px; cursor: pointer; }
.inc-icon:hover{ filter: brightness(0.95); }
.app-modal.wide{ max-width: 1100px; }
#modalHtml table th, #modalHtml table td{ white-space: normal; }

/* Icon chỉnh sửa công thức phối trộn (cùng cỡ với icon lịch nhập) */
.edit-icon{ width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-primary); font-size: 16px; cursor: pointer; }
.edit-icon:hover{ border-color: var(--accent); color: var(--accent); }
.app-modal-footer{ gap: 8px; flex-wrap: wrap; }

/* ================= Ô SELECT — kiểu thống nhất với ô nhập liệu =================
   Bỏ mũi tên mặc định của trình duyệt (mỗi trình duyệt một kiểu, trên macOS trông như nút bấm),
   thay bằng chevron mảnh màu chữ phụ; viền/bo góc/chiều cao giống input. */
select{
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 34px; cursor: pointer; line-height: 1.35;
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737f8b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 16px 16px;
  transition: border-color .15s ease, box-shadow .15s ease;
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
select:hover:not(:disabled){ border-color: var(--text-muted); }
select:focus{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231e5631' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
select:disabled{ background-color: var(--surface-muted); opacity: .75; }
select::-ms-expand{ display: none; }
select option{ color: var(--text-primary); background: var(--surface); }
/* Biến thể nhỏ: trong bảng dòng chi tiết, bộ chọn số dòng/trang, ô chọn trong tag-select */
.line-table select{ padding-right: 30px; background-position: right 9px center; background-size: 14px 14px; }
.page-size select{ padding-right: 28px; background-position: right 8px center; background-size: 13px 13px; }
.tag-select select{ padding-right: 26px; background-repeat: no-repeat; background-position: right 4px center; background-size: 14px 14px; background-color: transparent; }

/* ================= DROPDOWN TỰ VẼ (js/18-custom-select.js) ================= */
select.cs-open{ border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.16); }
.cs-panel{ position: fixed; z-index: 1000; display: flex; flex-direction: column; background: var(--surface); border-radius: 12px; box-shadow: 0 10px 28px rgba(16,24,40,0.14), 0 0 0 1px rgba(16,24,40,0.06); padding: 6px; overflow: hidden; animation: csIn .12s ease-out; }
@keyframes csIn{ from{ opacity: 0; transform: translateY(-4px); } to{ opacity: 1; transform: none; } }
.cs-list{ overflow-y: auto; min-height: 0; }
.cs-search{ position: relative; padding: 2px 2px 6px; border-bottom: 1px solid var(--border); margin-bottom: 4px; flex-shrink: 0; }
.cs-search i{ position: absolute; left: 11px; top: 50%; transform: translateY(-58%); font-size: 14px; color: var(--text-muted); }
.cs-search input[type="text"]{ padding: 7px 10px 7px 30px; font-size: 13px; border-radius: 8px; }
.cs-item{ display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--text-primary); line-height: 1.35; }
.cs-item.cs-active{ background: var(--surface-muted); }
.cs-item.cs-selected{ background: var(--accent-bg); color: var(--accent-hover); font-weight: 600; }
.cs-item.cs-disabled{ color: var(--text-muted); cursor: not-allowed; }
.cs-dot{ flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--surface); box-sizing: border-box; }
.cs-item.cs-selected .cs-dot{ border: 5px solid var(--accent); }
.cs-text{ overflow-wrap: anywhere; }

/* ================= HIỆU ỨNG HOVER CHO NÚT =================
   .btn-progress: kiểu nút gradient xanh lá như mẫu (dùng khi cần, thêm class vào button). */
.btn-progress {
  width: 200px;
  padding: 0.75rem;
  border-radius: 11px;
  border: none;
  background: linear-gradient(90deg, #22c55e, #16a34a);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.btn-progress::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.25);
  transform: translateX(-100%);
  transition: transform 300ms ease;
}
.btn-progress:hover::after {
  transform: translateX(0);
}
@media (prefers-color-scheme: dark) {
  .btn-progress {
    background: linear-gradient(90deg, #4ade80, #22c55e);
    color: #020617;
  }
}
/* Cùng hiệu ứng "lớp sáng trượt từ trái sang" cho các nút chính của app — giữ màu xanh thương hiệu và kích thước sẵn có.
   Bỏ qua nút đang disabled và nút đang loading (.is-loading dùng ::after để vẽ vòng xoay). */
button.primary:not(.is-loading), .btn-primary-pill:not(.is-loading){ position: relative; overflow: hidden; }
button.primary:not(.is-loading)::after, .btn-primary-pill:not(.is-loading)::after{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: rgba(255,255,255,0.25);
  transform: translateX(-100%);
  transition: transform 300ms ease;
}
button.primary:not(.is-loading):not(:disabled):hover::after, .btn-primary-pill:not(.is-loading):not(:disabled):hover::after{ transform: translateX(0); }

/* Tooltip mẫu (dùng khi cần): <span class="ss-tooltip"><i class="ti ti-info-circle"></i><span class="tooltip-icon">Nội dung</span></span> */
.ss-tooltip{
  position:relative;
  display:inline-flex;
  align-items:center;
  cursor:pointer;
  font-size:14px;
}
.tooltip-icon{
  position:absolute;
  left:110%;
  top:50%;
  transform:translateY(-50%) translateX(-4px);
  background:#08CB00;
  color:#ffffff;
  padding:4px 8px;
  border-radius:5px;
  font-size:11px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.ss-tooltip:hover .tooltip-icon{
  opacity:1;
  transform:translateY(-50%) translateX(0);
}

/* ================= THANH VẬT TƯ & THANH TÁCH ĐƠN (kiểu biểu đồ so sánh của Waypoint) ================= */
.mbar{ display: flex; height: 6px; margin-top: 6px; max-width: 120px; border-radius: 999px; overflow: hidden; background: var(--line-soft); }
.mbar > span{ display: block; height: 100%; }
.mbar-ok{ background: var(--chart-ok); }
.mbar-in{ background: var(--chart-in); opacity: .75; }
.mbar-short, .sb-short{ background: repeating-linear-gradient(135deg, var(--chart-bad) 0 1.5px, var(--chart-bad-bg) 1.5px 5px); }
.sb-wrap{ display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: 28px; align-items: center; background: var(--surface-soft); border-radius: 20px; padding: 20px 24px; margin-bottom: 16px; }
.sb-big{ font-family: var(--font-family-heading); font-weight: 700; font-size: 64px; line-height: 1; letter-spacing: -0.04em; color: var(--accent); margin-top: 8px; }
.sb-big span{ font-size: 32px; letter-spacing: 0; }
.sb-chart{ position: relative; padding-bottom: 22px; }
.sb-grid{ position: absolute; inset: 0 0 22px 0; display: flex; justify-content: space-between; pointer-events: none; }
.sb-grid span{ width: 0; border-left: 1px dashed var(--border-strong); }
.sb-row{ position: relative; margin-bottom: 12px; }
.sb-label{ font-size: 13px; color: var(--text-primary); margin-bottom: 6px; }
.sb-track{ position: relative; height: 30px; }
.sb-bar{ position: absolute; left: 0; top: 0; bottom: 0; border-radius: 10px; transition: width .6s var(--ease-out-soft, ease); animation: sb-grow .7s var(--ease-out-soft, ease) both; transform-origin: left; }
.sb-ok{ background: var(--chart-ok); }
.sb-in{ background: var(--chart-in-soft); }
.sb-short{ box-shadow: inset 0 0 0 1px var(--chart-bad-line); }
.sb-bubble{ position: absolute; top: 50%; transform: translateY(-50%); background: #fff; border-radius: 999px; padding: 2px 9px; font-size: 11.5px; font-weight: 600; box-shadow: 0 1px 3px rgba(27,26,24,.12); white-space: nowrap; }
.sb-axis{ position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); }
@keyframes sb-grow{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }
@media (max-width: 760px){ .sb-wrap{ grid-template-columns: 1fr; } .sb-big{ font-size: 48px; } }

/* ================= ÁP DỤNG RỘNG: Dashboard, công tắc, màn trống (kiểu Waypoint) ================= */
/* Nhãn nhỏ dạng viên (● CÔNG NỢ) */
.eyebrow-pill{ display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-family-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); background: var(--tint); padding: 3px 10px; border-radius: 999px; }
.eyebrow-pill::before{ content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.dash-insight{ background: var(--surface-soft) !important; border-radius: 24px; padding: 22px 26px; margin-bottom: 16px; }

/* Công tắc bật/tắt: xám nhạt khi tắt, xanh chanh khi bật, núm trắng có bóng */
.toggle-switch{ background: var(--toggle-off); box-shadow: inset 0 0 0 1px rgba(27,26,24,.06); transition: background .25s var(--ease-out-soft, ease); }
.toggle-switch.on{ background: var(--primary-fill); }
.toggle-switch .toggle-knob{ box-shadow: 0 1px 3px rgba(27,26,24,.25), 0 0 0 .5px rgba(27,26,24,.06); transition: transform .3s var(--ease-out-soft, ease); }
.toggle-track{ background: var(--toggle-off); box-shadow: inset 0 0 0 1px rgba(27,26,24,.06); transition: background .25s var(--ease-out-soft, ease); }
.toggle-track:before{ box-shadow: 0 1px 3px rgba(27,26,24,.25); transition: transform .3s var(--ease-out-soft, ease); }
.toggle input:checked + .toggle-track{ background: var(--primary-fill); }

/* Màn trống: icon hai màu (xanh chanh + tím) phía trên câu thông báo */
td[colspan][style*="color:var(--text-muted)"]::before, .dash-empty::before{
  content: ""; display: block; width: 44px; height: 44px; margin: 4px auto 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='28' cy='28' r='14' fill='%23d8f999'/%3E%3Crect x='8' y='10' width='22' height='26' rx='5' fill='%231b1a18'/%3E%3Crect x='13' y='17' width='12' height='2.6' rx='1.3' fill='%23fff'/%3E%3Crect x='13' y='23' width='8' height='2.6' rx='1.3' fill='%23fff'/%3E%3Ccircle cx='36' cy='12' r='4' fill='%23a685ff'/%3E%3C/svg%3E") no-repeat center / contain;
}
.dash-empty{ text-align: center; color: var(--text-muted); padding: 16px 0; }

/* =====================================================================
   HIỆU ỨNG HOÀN THIỆN (js/20-polish.js) — chỉ hiển thị
   ===================================================================== */
/* 2. Chấm nhấp nháy cho "Đơn mới" / "Chờ duyệt" */
.status-pill.is-attention i{ position: relative; }
.status-pill.is-attention i::after{ content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: currentColor; animation: ping 1.6s cubic-bezier(0,0,.2,1) infinite; }
@keyframes ping{ 75%, 100%{ transform: scale(2.6); opacity: 0; } }

/* 3. Dòng vừa lưu sáng lên rồi mờ dần */
tr.row-flash > td{ animation: row-flash 1.4s ease-out; }
@keyframes row-flash{ 0%, 25%{ background: var(--tint); } 100%{ background: transparent; } }

/* 4. Số canh thẳng cột */
td, .kpi-value, .sb-big, .sb-bubble, .total-bar, .op-info-grid .v{ font-variant-numeric: tabular-nums; }

/* 5. Tiêu đề bảng dính khi cuộn (màn hình rộng, bảng không cuộn ngang) + thanh trên cùng hiệu ứng kính mờ */
@media (min-width: 1280px){
  .table-wrap:not(.sticky-actions){ overflow: clip; }
  .table-wrap:not(.sticky-actions) > table > thead th{ position: sticky; top: 0; z-index: 3; }
}
.topbar{ position: sticky; top: 0; z-index: 10; backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); }
.topbar-pill{ background: rgba(255,255,255,0.78); }

/* 6. Biểu đồ tự vẽ */
.chart-draw{ stroke-dasharray: 1; stroke-dashoffset: 1; animation: chart-draw 1.2s .15s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes chart-draw{ to{ stroke-dashoffset: 0; } }
.chart-pop{ animation: chart-pop .8s cubic-bezier(.22,1,.36,1) both; transform-origin: center; }
@keyframes chart-pop{ from{ opacity: 0; transform: rotate(-90deg) scale(.85); } to{ opacity: 1; transform: none; } }

/* 7. Thông báo: icon ✓ / ⚠ + thanh thời gian chạy ngược */
.app-toast{ display: flex; align-items: center; gap: 10px; padding: 12px 18px 14px 14px; overflow: hidden; text-align: left; }
.app-toast::before{ content: ""; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: #1b1a18 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398e561' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / 14px; }
.app-toast::after{ content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: rgba(27,26,24,.25); transform-origin: left; transform: scaleX(0); }
.app-toast.run::after{ animation: toast-timer 2.8s linear forwards; }
@keyframes toast-timer{ from{ transform: scaleX(1); } to{ transform: scaleX(0); } }
.app-toast.is-warn{ background: var(--warning-bg); color: var(--warning); }
.app-toast.is-warn::before{ background: #b75000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E") no-repeat center / 14px; }
.app-toast.is-warn::after{ background: rgba(183,80,0,.35); }

/* 8. Mờ cạnh bảng khi còn cột bị khuất */
.table-wrap.edge-right{ -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.table-wrap.edge-left{ -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); }
.table-wrap.edge-left.edge-right{ -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }

/* 9. Thanh chọn menu trượt */
.sidebar-scroll{ position: relative; }
.nav-indicator{ position: absolute; left: 0; top: 0; border-radius: 12px; background: var(--primary-fill); pointer-events: none; z-index: 0; opacity: 0; transition: transform .35s cubic-bezier(.22,1,.36,1), height .35s cubic-bezier(.22,1,.36,1), width .35s cubic-bezier(.22,1,.36,1), opacity .2s ease; }
.sidebar-scroll.has-indicator .sidebar-item{ position: relative; z-index: 1; }
.sidebar-scroll.has-indicator .sidebar-item.active{ background: transparent; }

/* 11. Avatar chữ cái */
.av-wrap{ display: inline-flex; align-items: center; gap: 8px; }
.av{ flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; }
.av-name{ min-width: 0; }

@media (prefers-reduced-motion: reduce){
  .status-pill.is-attention i::after{ animation: none; display: none; }
  .chart-draw{ stroke-dashoffset: 0; }
}

/* ================= DASHBOARD: biểu đồ doanh thu (cột tím) & trạng thái đơn (vòng mảnh) — kiểu Waypoint ================= */
.rv-head{ display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 2px 0 14px; }
.rv-total{ font-family: var(--font-family-heading); font-weight: 700; font-size: 34px; letter-spacing: -0.03em; line-height: 1; }
.rv-sub{ font-size: 12.5px; color: var(--text-muted); }
.rv-sub b{ color: var(--chart-bar-strong); font-weight: 600; }
.rv-chart{ position: relative; height: 230px; margin: 0 0 0 52px; }
.rv-gridline{ position: absolute; left: 0; right: 0; border-top: 1px solid var(--line-soft); }
.rv-gridline span{ position: absolute; right: calc(100% + 10px); top: -7px; font-family: var(--font-family-mono); font-size: 10.5px; color: var(--text-muted); white-space: nowrap; }
.rv-avg{ position: absolute; left: 0; right: 0; border-top: 1.5px dashed #a8a4a0; z-index: 2; pointer-events: none; }
.rv-avg span{ position: absolute; right: 0; top: -20px; font-size: 10.5px; font-weight: 600; color: var(--text-secondary); background: #fff; padding: 1px 7px; border-radius: 999px; box-shadow: 0 1px 3px rgba(27,26,24,.12); }
.rv-cols{ position: absolute; inset: 0 0 -24px 0; display: flex; align-items: stretch; gap: 14px; padding: 0 10px; }
.rv-col{ flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; cursor: pointer; }
.rv-bar-area{ position: relative; flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.rv-bar{ display: block; width: min(56px, 70%); background: var(--chart-bar); border-radius: 12px 12px 6px 6px; transform-origin: bottom; animation: rv-grow .8s cubic-bezier(.22,1,.36,1) both; transition: background .2s ease, filter .2s ease; }
.rv-bar.is-max{ background: var(--chart-bar-strong); }
.rv-col:hover .rv-bar{ background: var(--chart-bar-hover); }
.rv-x{ height: 24px; line-height: 24px; font-family: var(--font-family-mono); font-size: 11px; color: var(--text-muted); }
@keyframes rv-grow{ from{ transform: scaleY(0); } to{ transform: scaleY(1); } }

.donut-num{ font-family: var(--font-family-heading); font-size: 30px; font-weight: 700; letter-spacing: -0.03em; fill: var(--text-primary); }
.donut-cap{ font-size: 11px; fill: var(--text-muted); }
.dash-slice{ transition: stroke-width .2s ease, opacity .2s ease; cursor: pointer; }
.dash-slice:hover{ stroke-width: 20; }
.dash-legend{ gap: 4px; margin-top: 18px; }
.dash-legend-item{ display: grid; grid-template-columns: 10px 1fr auto 44px; align-items: center; column-gap: 10px; row-gap: 5px; padding: 8px 10px; border-radius: 12px; transition: background .2s ease; }
.dash-legend-item:hover{ background: var(--surface-soft); }
.dash-legend-label{ color: var(--text-primary); }
.dash-legend-val{ margin-left: 0; font-family: var(--font-family-heading); font-weight: 700; font-size: 15px; }
.dash-legend-pct{ justify-self: end; font-size: 11px; font-weight: 600; color: var(--text-secondary); background: var(--line-soft); border-radius: 999px; padding: 1px 7px; }
.dash-legend-bar{ grid-column: 2 / -1; height: 5px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.dash-legend-bar span{ display: block; height: 100%; border-radius: 999px; animation: rv-grow-x .8s cubic-bezier(.22,1,.36,1) both; transform-origin: left; }
@keyframes rv-grow-x{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }
/* Top sản phẩm: thanh xanh chanh cho đồng bộ */
.dash-bar-track{ background: var(--line-soft); }
.dash-bar-fill{ background: var(--primary-fill); }
.dash-tooltip{ background: var(--text-primary); border-radius: 10px; }
@media (max-width: 760px){ .rv-chart{ margin-left: 44px; height: 190px; } .rv-cols{ gap: 6px; padding: 0 4px; } .rv-total{ font-size: 26px; } }
.rv-chart{ margin-bottom: 34px; }

/* ================= CÀI ĐẶT → GIAO DIỆN: thẻ chọn theme ================= */
.theme-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.theme-card{ position: relative; display: flex; flex-direction: column; gap: 12px; padding: 12px; border: 1.5px solid var(--border); border-radius: 18px; background: var(--surface); cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.theme-card:hover{ border-color: var(--border-strong); transform: translateY(-2px); box-shadow: 0 8px 24px -10px rgba(27,26,24,.18); }
.theme-card.is-active{ border-color: var(--accent); box-shadow: 0 0 0 3px var(--tint); }
.theme-preview{ display: flex; gap: 8px; height: 120px; padding: 10px; border-radius: 12px; border: 1px solid rgba(0,0,0,.05); }
.tp-side{ width: 28%; border-radius: 8px; padding: 8px 6px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.tp-side i{ display: block; height: 8px; border-radius: 4px; background: rgba(0,0,0,.08); }
.tp-main{ flex: 1; border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.tp-main b{ display: block; width: 40%; height: 14px; border-radius: 6px; }
.tp-main em{ display: block; height: 22px; border-radius: 6px; }
.tp-main em:last-child{ width: 70%; }
.theme-info{ padding: 0 4px; }
.theme-name{ display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.theme-desc{ font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.theme-swatches{ display: flex; gap: 6px; margin-top: 10px; }
.theme-swatches span{ width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,.08); }
.theme-apply{ position: absolute; right: 14px; bottom: 14px; width: auto; }
.theme-apply{ position: static; align-self: flex-start; margin: 2px 4px 4px; }
/* Tiêu đề bảng dính: bù phần padding trên của khung trang (24px) để dính sát mép, không lộ nội dung phía sau */
@media (min-width: 1280px){
  .table-wrap:not(.sticky-actions) > table > thead th{ top: -24px; box-shadow: 0 1px 0 var(--border); }
}
.theme-card .theme-apply{ width: auto !important; padding: 7px 18px; margin: 8px 4px 4px; }

/* ================= ĐĂNG NHẬP / MENU TÀI KHOẢN / THÔNG TIN CÁ NHÂN (theo biến theme) ================= */
body.auth-pending .shell, body.auth-locked .shell{ visibility: hidden; }
.auth-screen{ position: fixed; inset: 0; z-index: 60; display: grid; grid-template-columns: minmax(380px, 46%) 1fr; gap: 16px; padding: 16px; background: var(--bg); overflow: auto; }
.auth-screen[hidden]{ display: none; }
.auth-left{ display: flex; flex-direction: column; align-items: center; padding: 28px 24px 18px; }
.auth-logo img{ height: 64px; }
.auth-form{ width: 100%; max-width: 380px; margin: auto 0; animation: rise-in .5s cubic-bezier(.22,1,.36,1) both; }
.auth-eyebrow{ text-align: center; font-family: var(--font-family-mono); font-size: 11px; letter-spacing: .12em; color: var(--text-muted); margin-bottom: 12px; }
.auth-title{ text-align: center; font-family: var(--font-family-heading); font-size: 32px !important; line-height: 1.12; letter-spacing: -0.03em; margin: 0 0 28px; }
.auth-form .field{ margin-bottom: 16px; }
.auth-form input[type="text"], .auth-form input[type="password"]{ height: 44px; font-size: 14px; }
.auth-pw{ position: relative; }
.auth-pw input{ padding-right: 64px; }
.auth-pw-toggle{ position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: none !important; background: transparent !important; color: var(--text-muted); font-size: 12.5px; padding: 6px 10px; width: auto; box-shadow: none !important; }
input[type="password"]{ width: 100%; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text-primary); font-family: inherit; font-size: var(--font-size-xl); }
input[type="password"]:focus{ outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.16); }
.auth-row{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 18px; font-size: 13px; }
.auth-check{ display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--text-secondary); }
.auth-check input{ position: absolute; opacity: 0; width: 0; height: 0; }
.auth-check span{ width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border-strong); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease, border-color .15s ease; }
.auth-check input:checked + span{ background: var(--primary-fill); border-color: var(--primary-fill); }
.auth-check input:checked + span::after{ content: ""; width: 9px; height: 5px; border-left: 2px solid var(--primary-ink); border-bottom: 2px solid var(--primary-ink); transform: rotate(-45deg) translate(1px,-1px); }
.auth-check input:focus-visible + span{ box-shadow: 0 0 0 3px var(--tint); }
.auth-link{ border: none !important; background: none !important; padding: 0; width: auto; font-weight: 600; color: var(--text-primary); box-shadow: none !important; }
.auth-link:hover{ text-decoration: underline; }
.auth-submit{ width: 100%; height: 46px; font-size: 14px; }
.auth-demo{ display: flex; gap: 8px; align-items: flex-start; margin-top: 16px; padding: 10px 12px; border-radius: 12px; background: var(--surface-soft); font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.auth-demo i{ color: var(--accent); margin-top: 2px; }
.auth-foot{ font-size: 12px; color: var(--text-muted); text-align: center; }
.auth-form.shake{ animation: auth-shake .4s ease; }
@keyframes auth-shake{ 20%,60%{ transform: translateX(-6px); } 40%,80%{ transform: translateX(6px); } }
.auth-right{ position: relative; overflow: hidden; border-radius: 24px; min-height: 560px;
  background: radial-gradient(120% 90% at 85% 10%, var(--chart-bar) 0%, transparent 55%), radial-gradient(90% 80% at 10% 95%, var(--primary-fill) 0%, transparent 60%), var(--accent); }
.auth-right::before{ content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(to bottom, #000, transparent 80%); -webkit-mask-image: linear-gradient(to bottom, #000, transparent 80%); }
.auth-chip{ position: absolute; left: 22px; top: 22px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.88); backdrop-filter: blur(8px); font-size: 13px; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.auth-dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--chart-bar-strong); position: relative; }
.auth-dot::after{ content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: ping 1.6s cubic-bezier(0,0,.2,1) infinite; }
.auth-brand{ position: absolute; left: 36px; right: 36px; bottom: 40px; color: #fff; }
.auth-brand-eyebrow{ font-family: var(--font-family-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .85; margin-bottom: 12px; }
.auth-brand-title{ font-family: var(--font-family-heading); font-weight: 700; font-size: 38px; line-height: 1.1; letter-spacing: -0.03em; max-width: 560px; text-wrap: balance; }
.auth-float{ position: absolute; display: flex; align-items: center; gap: 12px; padding: 14px 18px 14px 14px; border-radius: 18px; background: #fff; box-shadow: 0 18px 40px -12px rgba(0,0,0,.28); animation: auth-float 6s ease-in-out infinite; }
.auth-float-a{ right: 9%; top: 26%; }
.auth-float-b{ right: 22%; top: 46%; animation-delay: -3s; }
.af-icon{ width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; background: var(--tint); color: var(--accent); }
.af-icon.is-purple{ background: #ede9fe; color: #6d28d9; }
.af-title{ font-family: var(--font-family-heading); font-weight: 700; font-size: 17px; color: var(--text-primary); }
.af-sub{ font-size: 12px; color: var(--text-muted); }
@keyframes auth-float{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-8px); } }
@media (max-width: 900px){ .auth-screen{ grid-template-columns: 1fr; } .auth-right{ display: none; } }

/* Menu tài khoản */
.topbar-pill{ position: relative; }
.profile-menu{ position: absolute; right: 44px; top: calc(100% + 10px); z-index: 30; width: 260px; padding: 6px; border-radius: 16px; background: var(--surface); box-shadow: 0 16px 40px -10px rgba(27,26,24,.22), 0 0 0 1px rgba(27,26,24,.06); animation: csIn .14s ease-out; }
.profile-menu[hidden]{ display: none; }
.profile-menu-head{ display: flex; align-items: center; gap: 10px; padding: 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.pm-name{ font-weight: 600; font-size: 13px; }
.pm-email{ font-size: 11.5px; color: var(--text-muted); word-break: break-all; }
.profile-menu-item{ display: flex !important; align-items: center; gap: 10px; width: 100%; border: none !important; background: transparent; padding: 9px 10px; border-radius: 10px; font-size: 13px; text-align: left; box-shadow: none !important; transform: none !important; }
.profile-menu-item i{ font-size: 17px; color: var(--text-muted); }
.profile-menu-item:hover{ background: var(--surface-soft) !important; }
.profile-menu-item.is-danger, .profile-menu-item.is-danger i{ color: var(--danger); }

/* Trang Thông tin cá nhân */
.profile-hero{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.profile-avatar-lg{ width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-family-heading); font-weight: 700; font-size: 22px; background: var(--tint); color: var(--accent); flex-shrink: 0; }
.profile-hero-name{ font-family: var(--font-family-heading); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.profile-hero .danger-outline{ width: auto; }
.pw-meter{ height: 5px; border-radius: 999px; background: var(--line-soft); margin-top: 8px; overflow: hidden; }
.pw-meter span{ display: block; height: 100%; width: 0; border-radius: 999px; transition: width .3s ease, background .3s ease; background: var(--chart-bad); }
.pw-meter span.is-mid{ background: var(--chart-in); }
.pw-meter span.is-ok{ background: var(--chart-ok); }

/* ================= DASHBOARD: Doanh thu trong tháng (2 đường cong) ================= */
:root{ --mc-cur: #2563eb; --mc-prev: #1b1a18; }
.mc-card{ margin-bottom: 16px; }
.mc-head{ display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 4px 0 18px; }
.mc-total{ font-family: var(--font-family-heading); font-weight: 700; font-size: 30px; letter-spacing: -0.03em; line-height: 1.05; }
.mc-delta{ font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; margin-bottom: 4px; }
.mc-delta.up{ background: var(--success-bg); color: var(--success); }
.mc-delta.down{ background: var(--danger-bg); color: var(--danger); }
.mc-legend{ margin-left: auto; display: flex; gap: 16px; font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }
.mc-legend span{ display: inline-flex; align-items: center; gap: 6px; }
.mc-dot{ width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.mc-dot.cur{ background: var(--mc-cur); } .mc-dot.prev{ background: var(--mc-prev); }
.mc-plot{ position: relative; height: 240px; margin-left: 56px; }
.mc-grid{ position: absolute; left: 0; right: 0; border-top: 1px dashed var(--line-soft); }
.mc-grid span{ position: absolute; right: calc(100% + 10px); top: -8px; font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.mc-svg{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mc-line{ stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.mc-line.cur{ stroke: var(--mc-cur); stroke-dasharray: 1; stroke-dashoffset: 1; animation: chart-draw 1.2s .1s cubic-bezier(.22,1,.36,1) forwards; }
.mc-line.prev{ stroke: var(--mc-prev); stroke-width: 2; opacity: .85; }
.mc-area{ animation: fade-in .8s .3s ease both; }
.mc-guide{ position: absolute; bottom: 0; width: 0; border-left: 1.5px dashed var(--mc-cur); pointer-events: none; }
.mc-point{ position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; border: 2.5px solid var(--mc-cur); pointer-events: none; box-shadow: 0 0 0 4px rgba(37,99,235,.15); }
.mc-bubble{ position: absolute; top: -12px; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 1px; background: var(--surface); border-radius: 10px; padding: 6px 12px; box-shadow: 0 4px 14px rgba(27,26,24,.14), 0 0 0 1px rgba(27,26,24,.05); white-space: nowrap; pointer-events: none; z-index: 3; }
.mc-bubble b{ font-size: 14px; }
.mc-bubble span{ font-size: 11px; color: var(--text-muted); }
.mc-hit{ position: absolute; inset: -20px 0 0 0; cursor: crosshair; z-index: 2; }
.mc-x{ position: relative; height: 26px; margin: 8px 0 0 56px; }
.mc-x span{ position: absolute; transform: translateX(-50%); font-size: 11.5px; color: var(--text-muted); }
.mc-x span.on{ color: var(--mc-cur); font-weight: 700; }
.mc-card .dash-card-head{ align-items: flex-start; }
@media (max-width: 760px){ .mc-plot, .mc-x{ margin-left: 44px; } .mc-legend{ margin-left: 0; } }

/* ================= DASHBOARD MỚI: bố cục 4 tầng (4 KPI · 3 khối · 2 khối · 2 khối) ================= */
.dk-grid{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-bottom: 16px; }
.dk-card{ display: flex; flex-direction: column; gap: 6px; min-height: 128px; }
.dk-card.is-link{ cursor: pointer; }
.dk-top{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dk-icon{ width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-soft); color: var(--text-secondary); font-size: 18px; }
.dk-card .kpi-value{ margin: 2px 0 0; }
.dk-foot{ font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.dk-foot b, .dk-abs{ color: var(--text-primary); font-weight: 600; }
.dk-pill{ display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.dk-pill.up{ background: var(--success-bg); color: var(--success); }
.dk-pill.down{ background: var(--danger-bg); color: var(--danger); }
.dk-pill.warn{ background: var(--warning-bg); color: var(--warning); }
.dk-bar{ flex-basis: 100%; height: 5px; border-radius: 999px; background: var(--line-soft); overflow: hidden; margin-top: 4px; }
.dk-bar span{ display: block; height: 100%; background: var(--chart-ok); border-radius: 999px; }

.dash-row{ display: grid; gap: 16px; margin-bottom: 16px; }
.dash-row-3{ grid-template-columns: minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr); }
.dash-row-2{ grid-template-columns: minmax(0,1.7fr) minmax(0,1fr); }
.dash-row > .panel{ margin-bottom: 0; display: flex; flex-direction: column; }
.dash-row .mc-card{ margin-bottom: 0; }
.dash-row .mc-plot{ height: 200px; }
.dash-row .mc-head{ margin-bottom: 14px; }
.dash-row .mc-total{ font-size: 26px; }
.dash-row .mc-legend{ flex-basis: 100%; margin-left: 0; }

/* Lô nguyên liệu sắp về */
.di-main{ border: 1px solid var(--border); border-radius: 14px; padding: 14px; margin-bottom: 10px; }
.di-route{ display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; margin-bottom: 12px; }
.di-route i{ color: var(--accent); margin-right: 4px; }
.di-from, .di-to{ display: inline-flex; align-items: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.di-line{ flex: 1; min-width: 30px; position: relative; text-align: center; color: var(--text-muted); }
.di-line::before{ content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px dashed var(--border-strong); z-index: 0; }
.di-line i{ position: relative; z-index: 1; background: var(--surface); padding: 0 4px; color: var(--text-secondary); margin: 0; }
.di-meta{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; font-size: 12.5px; }
.di-meta .k{ display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 2px; }
.di-meta b{ font-weight: 600; }
.di-row{ display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-top: 1px solid var(--border); font-size: 12px; }
.di-row-mid{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.dash-more{ width: 100% !important; margin-top: auto; justify-content: center; display: inline-flex !important; align-items: center; gap: 6px; }

/* Tồn kho theo kho (thanh ngang) */
.ds-total{ font-size: 12.5px; color: var(--text-muted); margin-bottom: 12px; }
.ds-total b{ font-family: var(--font-family-heading); font-size: 22px; color: var(--text-primary); letter-spacing: -0.02em; }
.ds-row{ display: grid; grid-template-columns: 34px 1fr 40px; align-items: center; gap: 10px; margin-bottom: 9px; font-size: 12px; }
.ds-name{ color: var(--text-secondary); font-weight: 600; }
.ds-track{ height: 22px; border-radius: 8px; background: var(--line-soft); overflow: hidden; }
.ds-fill{ display: flex; align-items: center; height: 100%; padding-left: 8px; border-radius: 8px; background: var(--chart-bar); color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap; animation: rv-grow-x .8s cubic-bezier(.22,1,.36,1) both; transform-origin: left; }
.ds-fill.is-top{ background: var(--chart-bar-strong); }
.ds-val{ text-align: right; color: var(--text-muted); font-weight: 600; }
#dashStockTabs button{ font-size: 10.5px; padding: 3px 8px; }

/* Đơn cần xử lý */
.dash-search{ position: relative; }
.dash-search i{ position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 14px; }
.dash-search input[type="text"]{ padding: 6px 10px 6px 30px; width: 190px; font-size: 12.5px; }
.dash-todo{ box-shadow: none !important; }
.dash-todo-row{ cursor: pointer; }
.dash-card-head .small{ width: auto; display: inline-flex; align-items: center; gap: 4px; }

@media (max-width: 1280px){ .dash-row-3{ grid-template-columns: 1fr 1fr; } .dash-row-3 .mc-card{ grid-column: 1 / -1; } }
@media (max-width: 1100px){ .dk-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } .dash-row-2{ grid-template-columns: 1fr; } }
@media (max-width: 760px){ .dk-grid, .dash-row-3{ grid-template-columns: 1fr; } .dash-search input[type="text"]{ width: 130px; } }
.dash-row .dash-card-revenue, .dash-row .dash-card-status, .dash-row .dash-card-top{ grid-area: auto; }
.dash-todo td:nth-child(1), .dash-todo td:nth-child(3), .dash-todo td:nth-child(4){ white-space: nowrap; }
.dash-todo td{ vertical-align: middle; }
.dash-row .dash-card-head{ flex-wrap: wrap; }

/* ================= THÔNG BÁO: chuông + bảng thả xuống (js/23-notifications.js) ================= */
.topbar-bell{ position: relative; }
.topbar-bell.is-open{ background: var(--surface-soft, #f4f5f7); color: var(--text-primary); }
.bell-badge{ position: absolute; top: -4px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--chart-bad, #e5484d); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--surface, #fff); animation: badge-pop .35s cubic-bezier(.22,1,.36,1); }
.bell-badge[hidden]{ display: none; }
@keyframes badge-pop{ 0%{ transform: scale(.4); opacity: 0; } 100%{ transform: none; opacity: 1; } }
.pm-count{ margin-left: auto; min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--danger-bg); color: var(--danger); font-size: 11px; font-weight: 700; text-align: center; }
.pm-count[hidden]{ display: none; }

.notif-panel{ position: absolute; right: 0; top: calc(100% + 10px); z-index: 30; width: 400px; max-width: calc(100vw - 32px); border-radius: 20px; background: var(--surface); box-shadow: 0 16px 40px -10px rgba(27,26,24,.22), 0 0 0 1px rgba(27,26,24,.06); animation: csIn .14s ease-out; overflow: hidden; display: flex; flex-direction: column; }
.notif-panel[hidden]{ display: none; }
.np-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 16px 10px; }
.np-title{ font-family: var(--font-family-heading); font-weight: 700; font-size: 17px; letter-spacing: -0.02em; }
.np-sub{ font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.np-link{ display: inline-flex !important; align-items: center; gap: 5px; width: auto !important; border: none !important; background: transparent !important; box-shadow: none !important; padding: 4px 6px !important; font-size: 12px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.np-link:hover:not(:disabled){ text-decoration: underline; }
.np-link:disabled{ color: var(--text-muted); opacity: .6; cursor: default; }
.np-tabs{ margin: 0 16px 8px; align-self: flex-start; }
.np-tabs button{ font-size: 12px; padding: 4px 12px; }
.np-list{ max-height: min(420px, 60vh); overflow-y: auto; padding: 0 6px; }
.np-list .nt-item{ border-radius: 14px; padding: 10px; }
.np-list .nt-item + .nt-item{ border-top: none; }
.np-list .nt-desc{ -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.np-foot{ display: flex !important; align-items: center; justify-content: center; gap: 6px; width: 100%; border: none !important; border-top: 1px solid var(--border) !important; border-radius: 0 !important; background: transparent; padding: 12px; font-size: 13px; font-weight: 600; box-shadow: none !important; margin-top: 4px; }
.np-foot:hover{ background: var(--surface-soft, #f4f5f7) !important; }

/* Một dòng thông báo (dùng chung cho bảng thả xuống và trang Thông báo) */
.nt-item{ position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; transition: background .15s ease; outline: none; }
.nt-item + .nt-item{ border-top: 1px solid var(--border); }
.nt-item.is-link{ cursor: pointer; }
.nt-item:hover, .nt-item:focus-visible{ background: var(--surface-soft, #f7f6f5); }
.nt-item:focus-visible{ box-shadow: inset 0 0 0 2px rgba(var(--accent-rgb),.35); }
.nt-icon{ width: 38px; height: 38px; flex-shrink: 0; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; }
.nt-icon.tone-ok{ background: var(--tint, var(--accent-bg)); color: var(--accent); }
.nt-icon.tone-warn{ background: var(--warning-bg); color: var(--warning); }
.nt-icon.tone-bad{ background: var(--danger-bg); color: var(--danger); }
.nt-icon.tone-info{ background: var(--purple-bg, #f0edff); color: var(--purple, #6c5ce7); }
.nt-body{ flex: 1; min-width: 0; }
.nt-title{ font-size: 13.5px; line-height: 1.4; color: var(--text-secondary); }
.nt-item.is-unread .nt-title{ color: var(--text-primary); font-weight: 500; }
.nt-title b{ font-weight: 700; color: var(--text-primary); }
.nt-desc{ font-size: 12.5px; color: var(--text-muted); line-height: 1.5; margin-top: 2px; }
.nt-meta{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-muted); margin-top: 6px; }
.nt-dot-sep{ width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }
.nt-cta{ margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--accent); opacity: 0; transform: translateX(-4px); transition: opacity .2s ease, transform .2s ease; }
.nt-cta i{ transition: transform .2s ease; }
.nt-item:hover .nt-cta, .nt-item:focus-visible .nt-cta{ opacity: 1; transform: none; }
.nt-item:hover .nt-cta i{ transform: translateX(2px); }
/* chấm "chưa đọc": bấm để đánh dấu đã đọc */
.nt-mark{ flex-shrink: 0; width: 22px !important; height: 22px; padding: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 50% !important; margin-top: 2px; }
.nt-mark span{ width: 9px; height: 9px; border-radius: 50%; background: var(--chart-bar-strong, var(--accent)); box-shadow: 0 0 0 3px rgba(166,133,255,.18); transition: transform .2s ease; }
.nt-mark:hover span{ transform: scale(1.3); }
.nt-empty{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 36px 16px; }
.nt-empty-icon{ width: 52px; height: 52px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 26px; background: var(--tint, var(--accent-bg)); color: var(--accent); margin-bottom: 4px; }
.nt-empty-title{ font-family: var(--font-family-heading); font-weight: 700; font-size: 15px; }

/* Trang Thông báo */
.nt-toolbar{ margin-bottom: 16px; overflow-x: auto; }
.nt-toolbar .period-toggle{ display: inline-flex; white-space: nowrap; }
.nt-tab-count{ display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: rgba(27,26,24,.07); font-size: 11px; font-weight: 600; line-height: 17px; text-align: center; }
.nt-group{ margin-bottom: 18px; }
.nt-group-label{ font-family: var(--font-family-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 8px 4px; }
.nt-card{ background: var(--surface); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-soft, 0 1px 2px rgba(0,0,0,.04)); }
.nt-card .nt-item{ padding: 16px 18px; }
.nt-card .nt-item.is-unread{ background: linear-gradient(90deg, rgba(166,133,255,.07), transparent 40%); }
.nt-card .nt-item.is-unread:hover{ background: var(--surface-soft, #f7f6f5); }
#view-notifications .nt-list > .nt-empty{ background: var(--surface); border: 1px solid var(--border); border-radius: 20px; }

/* ================= ĐỔI MẬT KHẨU (js/22-auth.js) ================= */
.sec-row{ display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.sec-row + .sec-row{ border-top: 1px solid var(--border); }
.sec-row button{ width: auto; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.sec-icon{ width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; background: var(--surface-soft, #f4f5f7); color: var(--text-secondary); }
.sec-row-title{ font-weight: 600; font-size: 13.5px; }
.pw-card{ padding: 22px; }
.pw-card .auth-pw input{ height: 42px; }
#pwForm.shake{ animation: auth-shake .4s ease; }
.pw-strength{ font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.pw-rules{ list-style: none; margin: 10px 0 0; padding: 12px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; border-radius: 14px; background: var(--surface-soft, #f4f5f7); }
.pw-rules li{ display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); transition: color .2s ease; }
.pw-rules li i{ font-size: 16px; color: var(--border-strong); transition: color .2s ease, transform .25s cubic-bezier(.22,1,.36,1); }
.pw-rules li em{ font-style: normal; opacity: .75; }
.pw-rules li.is-ok{ color: var(--text-primary); }
.pw-rules li.is-ok i{ color: var(--success); transform: scale(1.1); }
.pw-card .form-footer button{ width: auto; }
.pw-done{ display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 12px 12px; animation: rise-in .45s cubic-bezier(.22,1,.36,1) both; }
.pw-done[hidden]{ display: none; }
.pw-done-icon{ width: 64px; height: 64px; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 32px; background: var(--primary-fill, var(--accent)); color: var(--primary-ink, #fff); margin-bottom: 14px; box-shadow: 0 10px 24px -10px rgba(61,99,33,.55); }
.pw-done h2{ font-family: var(--font-family-heading); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 6px; }
.pw-done p{ font-size: 13px; color: var(--text-secondary); max-width: 380px; line-height: 1.6; margin: 0 0 18px; }
.pw-done-actions{ display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.pw-done-actions button{ width: auto; }
.pw-aside{ padding: 22px; }
.pw-aside-stat{ margin-top: 14px; padding: 14px; border-radius: 14px; background: var(--surface-soft, #f4f5f7); }
.pw-aside-stat .k{ display: block; font-size: 11.5px; color: var(--text-muted); margin-bottom: 3px; }
.pw-aside-stat b{ font-size: 13px; font-weight: 600; }
.pw-tips{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pw-tips li{ display: flex; gap: 10px; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.pw-tips li i{ flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; background: var(--tint, var(--accent-bg)); color: var(--accent); }
@keyframes rise-in{ 0%{ opacity: 0; transform: translateY(8px); } 100%{ opacity: 1; transform: none; } }
@media (max-width: 760px){
  .pw-rules{ grid-template-columns: 1fr; }
  .nt-cta{ opacity: 1; transform: none; margin-left: 0; flex-basis: 100%; }
  .notif-panel{ position: fixed; left: 16px; right: 16px; top: 72px; width: auto; max-width: none; }
}
.nt-live{ display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--warning); }
.nt-live::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: nt-pulse 1.6s ease-in-out infinite; }
@keyframes nt-pulse{ 50%{ opacity: .35; } }
/* Thông báo đơn hàng: nhãn trạng thái + hàng nút lọc theo trạng thái (tab Đơn hàng) */
.nt-title .status-pill{ font-size: 11px; padding: 2px 9px; margin-left: 4px; vertical-align: 1px; }
.nt-status-chips{ display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 16px; }
.nt-status-chips[hidden]{ display: none; }
.nt-chip{ display: inline-flex !important; align-items: center; gap: 5px; width: auto !important; padding: 5px 12px !important; border-radius: 999px !important; font-size: 12px; font-weight: 500; background: var(--chip-bg, var(--surface)) !important; color: var(--chip-text, var(--text-primary)); border: 1.5px solid transparent !important; box-shadow: none !important; }
.nt-chip:first-child{ background: var(--surface) !important; border-color: var(--border-strong) !important; }
.nt-chip i{ font-size: 8px; }
.nt-chip span{ font-weight: 700; opacity: .8; }
.nt-chip:hover:not(:disabled){ filter: brightness(.97); }
.nt-chip.active{ border-color: currentColor !important; box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 0 0 3.5px currentColor !important; }
.nt-chip:first-child.active{ background: var(--text-primary) !important; color: #fff; border-color: var(--text-primary) !important; box-shadow: none !important; }
.nt-chip:disabled{ opacity: .4; cursor: default; }
.nt-sample{ display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; border: 1px dashed var(--border-strong); font-size: 10.5px; font-weight: 600; color: var(--text-muted); }
.nt-cta.is-sample{ opacity: 1; transform: none; color: var(--text-muted); font-weight: 500; }
.nt-sample-note{ display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); background: var(--surface-soft, #f4f5f7); border-radius: 12px; padding: 9px 12px; margin: -6px 0 14px; }
.nt-sample-note[hidden]{ display: none; }
.nt-sample-note i{ font-size: 16px; color: var(--text-muted); }

/* Menu xổ xuống ở đầu trang (Tạo mới...) phải nằm trên các thẻ KPI bên dưới — thẻ KPI có animation transform nên tạo lớp vẽ riêng đè lên */
.page-head{ position: relative; z-index: 5; }

/* Trang Chi phí: bảng cơ cấu chi phí theo nhóm tài khoản */
.cost-structure tr.cs-group td{ background: var(--surface-muted); font-weight: 600; }
.cost-structure tr.cs-child td:first-child{ padding-left: 28px; color: var(--text-secondary); }
.cost-structure tr.cs-total td{ font-weight: 700; border-top: 1.5px solid var(--border-strong); }
.cost-structure td.num{ text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cost-rate-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px){ .cost-rate-grid{ grid-template-columns: 1fr; } }
.cost-rules ul{ margin: 6px 0 0 18px; padding: 0; font-size: 12.5px; color: var(--text-secondary); line-height: 1.6; }
.cost-structure tr.cs-group td.hesocol{ font-weight: 400; }

/* ================= MẪU BAO BÌ: phân loại hàng / biến thể (kiểu Shopee) ================= */
.pf-section-title{ font-size: 14px; font-weight: 700; margin: 4px 0 14px; color: var(--text-primary); }
.pf-variant-section{ margin-top: 8px; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.pf-tier{ background: var(--surface-soft); border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.pf-tier-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.pf-tier-name{ font-weight: 600; font-size: 13px; }
.pf-color-list, .pf-size-list{ display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; margin-bottom: 10px; }
.pf-opt{ display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 6px; }
.pf-opt input[type="text"], .pf-opt input[type="number"]{ flex: 1; min-width: 0; }
.pf-opt select{ width: 110px; flex-shrink: 0; }
.pf-opt-x{ width: 30px !important; height: 30px; padding: 0 !important; flex-shrink: 0; display: inline-flex !important; align-items: center; justify-content: center; }
.pf-img{ width: 44px !important; height: 44px; padding: 0 !important; flex-shrink: 0; border: 1.5px dashed var(--border-strong) !important; border-radius: 10px; display: inline-flex !important; align-items: center; justify-content: center; overflow: hidden; color: var(--text-muted); font-size: 18px; background: var(--surface-soft) !important; }
.pf-img.has-img{ border-style: solid !important; }
.pf-img img{ width: 100%; height: 100%; object-fit: cover; }
.pf-tier > .small{ width: auto; display: inline-flex; align-items: center; gap: 4px; }
.pf-variant-table-head{ display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 6px 0 10px; }
.pf-batch{ display: flex; gap: 8px; align-items: center; }
.pf-batch input{ width: 170px; }
.pf-batch .small{ width: auto; white-space: nowrap; }
.pf-variant-table td{ vertical-align: middle; }
.pf-thumb{ width: 36px; height: 36px; border-radius: 8px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-soft); color: var(--text-muted); }
.pf-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.pf-v-sku{ font-size: 11.5px; color: var(--text-secondary); }
.pf-chip-row{ display: flex; flex-wrap: wrap; gap: 4px; }
.pf-chip{ display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 3px; border-radius: 999px; background: var(--surface-soft); font-size: 11.5px; border: 1px solid var(--border); }
.pf-chip img{ width: 16px; height: 16px; border-radius: 50%; object-fit: cover; }
.pf-chip:not(:has(img)){ padding-left: 8px; }
.pf-sub-table{ width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pf-sub-table th{ text-align: left; padding: 6px 8px; font-size: 11px; color: var(--text-secondary); background: transparent; }
.pf-sub-table td{ padding: 6px 8px; border-top: 1px solid var(--border); vertical-align: middle; }
.pf-sub-table .row-thumb{ width: 30px; height: 30px; }
/* Xem trước SKU của biến thể: tô màu từng phần */
.pf-v-sku .sk-line{ font-family: var(--font-family-mono); font-size: 12px; white-space: nowrap; }
.sk-p{ color: var(--accent); font-weight: 700; }
.sk-p i{ font-style: normal; font-weight: 400; color: var(--text-muted); }
.sk-c{ color: #7008e7; font-weight: 700; }
.sk-d, .sk-q{ color: #b75000; font-weight: 700; }
.sk-x{ color: var(--text-muted); font-size: 10.5px; }
.sk-ex{ font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.sk-ex b{ color: var(--text-secondary); font-family: var(--font-family-mono); font-weight: 600; }
/* Bảng biến thể nhập trực tiếp từng dòng */
.pf-variant-table input[type="text"], .pf-variant-table input[type="number"]{ padding: 6px 8px; font-size: 12.5px; }
.pf-v-size{ display: flex; gap: 4px; }
.pf-v-size input{ width: 100%; min-width: 64px; }
.pf-v-size select{ flex: 1; min-width: 0; padding: 6px 26px 6px 8px; font-size: 12.5px; }
.pf-img.is-row{ width: 40px !important; height: 40px; }
.pf-img img.is-fallback{ opacity: .45; }
.pf-variant-table tr.pf-dup td{ background: var(--danger-bg) !important; }
.pf-dup-msg{ font-size: 11px; color: var(--danger); margin-top: 3px; }
.pf-add-row{ width: 100% !important; margin-top: 8px; padding: 10px !important; border: 1.5px dashed var(--border-strong) !important; background: transparent !important; color: var(--text-secondary); display: flex !important; align-items: center; justify-content: center; gap: 6px; font-weight: 600; }
.pf-add-row:hover{ border-color: var(--accent) !important; color: var(--accent); background: var(--tint) !important; }
.pf-batch .small{ display: inline-flex; align-items: center; gap: 4px; }

/* ================= FORM MẪU BAO BÌ — bố cục 2 khung ================= */
.pf-page-head{ margin-bottom: 18px; }
.pf-card{ background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px 22px; margin-bottom: 16px; box-shadow: var(--shadow-soft, none); }
.pf-variant-section{ margin-top: 0; padding: 20px 22px; }
.pf-card-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.pf-section-title{ display: flex; align-items: center; gap: 10px; font-size: 15px; }
.pf-step{ width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: var(--tint); color: var(--accent); flex-shrink: 0; }
.pf-status{ display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 999px; background: var(--surface-soft); }
.pf-status-label{ font-size: 12.5px; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 4px; }
.pf-status-text{ font-size: 13px; font-weight: 600; color: var(--text-primary); min-width: 108px; }
.pf-general{ display: grid; grid-template-columns: 200px minmax(0,1fr); gap: 24px; align-items: start; }
.pf-general-media .pkg-image-box{ width: 200px; }
.pf-general-media .upload-text-sub{ margin-top: 8px; text-align: center; font-size: 11.5px; }
.pf-general-media .file-chip{ display: flex; justify-content: center; }
.pf-general-fields .field{ margin-bottom: 14px; }
.pf-grid-2{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.pf-seg{ display: flex; gap: 8px; flex-wrap: wrap; }
.pf-seg label{ cursor: pointer; }
.pf-seg input{ position: absolute; opacity: 0; width: 0; height: 0; }
.pf-seg span{ display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 12px; border: 1.5px solid var(--border-strong); font-size: 13px; color: var(--text-secondary); transition: border-color .15s ease, background .15s ease, color .15s ease; }
.pf-seg input:checked + span{ border-color: var(--accent); background: var(--tint); color: var(--accent); font-weight: 600; }
.pf-seg input:focus-visible + span{ box-shadow: 0 0 0 3px var(--tint); }
@media (max-width: 900px){ .pf-general{ grid-template-columns: 1fr; } .pf-general-media .pkg-image-box{ width: 160px; margin: 0 auto; } .pf-grid-2{ grid-template-columns: 1fr; } }
/* Ảnh biến thể to hơn để nhìn rõ: ô ảnh 64px trong bảng biến thể, ảnh trong danh sách biến thể 48px; rê chuột phóng to xem nhanh */
.pf-variant-table .pf-img.is-row{ width: 64px !important; height: 64px; border-radius: 12px; }
.pf-variant-table th:first-child{ width: 84px !important; }
.pf-variant-table td{ padding-top: 10px; padding-bottom: 10px; }
.pf-sub-table .row-thumb{ width: 48px; height: 48px; border-radius: 10px; }
.pf-img.has-img, .pf-sub-table .row-thumb{ position: relative; }
/* Ô tồn kho dạng tổng + số kho, bấm mở popup "Tồn kho theo kho" (kiểu MISA / KiotViet / Shopee) */
.stock-cell{ display: inline-flex !important; flex-direction: column; align-items: flex-start; gap: 1px; width: auto !important; padding: 4px 8px !important; border: 1px solid transparent !important; background: transparent !important; border-radius: 10px; text-align: left; font-size: 12.5px; box-shadow: none !important; cursor: pointer; }
.stock-cell:hover{ border-color: var(--border-strong) !important; background: var(--surface-soft) !important; }
.stock-cell-sub{ display: inline-flex; align-items: center; gap: 2px; font-size: 11px; color: var(--accent); font-weight: 500; }
.stock-cell-sub i{ font-size: 12px; }
.sp-head{ margin-bottom: 12px; font-size: 13px; }
.sp-kpis{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-bottom: 14px; }
.sp-kpis > div{ background: var(--surface-soft); border-radius: 12px; padding: 10px 12px; }
.sp-kpis span{ display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 2px; }
.sp-kpis b{ font-family: var(--font-family-heading); font-size: 18px; }
.sp-tools{ display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.sp-zero{ display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-secondary); cursor: pointer; }
.sp-table-wrap{ max-height: 340px; overflow-y: auto; border: 1px solid var(--border); border-radius: 12px; }
.sp-table-wrap table{ width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 0 !important; }
.sp-table-wrap thead th{ position: sticky; top: 0; z-index: 1; background: var(--surface-soft); text-align: left; padding: 8px 12px; font-size: 11px; }
.sp-table-wrap td{ padding: 8px 12px; border-top: 1px solid var(--border); }
.sp-table-wrap tfoot td{ position: sticky; bottom: 0; background: var(--surface); border-top: 1.5px solid var(--border-strong); }
.sp-table-wrap .num{ text-align: right; }
@media (max-width: 760px){ .sp-kpis{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.stock-cell, .stock-cell b, .stock-cell-sub{ white-space: nowrap; }
.stock-cell b{ font-size: 14px; }
/* Bộ ảnh sản phẩm của mẫu bao bì (kiểu Shopee: tối đa 9 ảnh, ảnh đầu = ảnh bìa) */
.pkg-image-preview{ position: relative; width: 100%; height: 100%; justify-content: center; }
.pkg-image-box.has-file .pkg-image-preview{ padding: 0; }
.pf-cover-tag{ position: absolute; left: 8px; bottom: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 999px; }
.pf-gallery{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 200px; margin-top: 8px; }
.pf-gal-item, .pf-gal-add{ position: relative; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-muted); cursor: pointer; }
.pf-gal-item img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-gal-item.is-cover{ border: 2px solid var(--accent); }
.pf-gal-item.is-drag{ opacity: .4; }
.pf-gal-x{ position: absolute; top: 2px; right: 2px; width: 18px !important; height: 18px; padding: 0 !important; border-radius: 50% !important; border: none !important; background: rgba(0,0,0,.6) !important; color: #fff !important; font-size: 10px; line-height: 18px; display: none; box-shadow: none !important; }
.pf-gal-item:hover .pf-gal-x{ display: block; }
.pf-gal-add{ display: flex !important; align-items: center; justify-content: center; border: 1.5px dashed var(--border-strong) !important; color: var(--text-muted); padding: 0 !important; width: auto !important; box-shadow: none !important; }
.pf-gal-add:hover{ border-color: var(--accent) !important; color: var(--accent); }
.pf-img.is-off{ cursor: default; position: relative; display: inline-flex; align-items: center; justify-content: center; border-style: dashed; }
.pf-img.is-off img{ opacity: .45; }
.pf-img.is-off em{ position: absolute; font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--text-secondary); background: var(--surface); padding: 1px 6px; border-radius: 999px; }
@media (max-width: 900px){ .pf-gallery{ width: 160px; margin-left: auto; margin-right: auto; } }
/* Xem trước ảnh khi rê chuột: khung nổi trên cùng trang, hiện trọn ảnh đúng tỉ lệ (js/05-packaging.js) */
.img-hover-preview{ position: fixed; z-index: 2000; pointer-events: none; padding: 6px; background: #fff; border-radius: 14px; box-shadow: 0 18px 40px -12px rgba(27,26,24,.35), 0 0 0 1px rgba(27,26,24,.08); opacity: 0; transition: opacity .12s ease; }
.img-hover-preview.show{ opacity: 1; }
.img-hover-preview img{ display: block; max-width: 320px; max-height: 320px; width: auto; height: auto; object-fit: contain; border-radius: 10px; }
/* Popup "Tạo nhanh tổ hợp": chọn nhiều phương thức đóng gói */
.qc-closures{ display: flex; flex-wrap: wrap; gap: 8px 16px; }
.qc-cl{ display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.pf-v-closure{ width: 100%; }
.pf-variant-table .pf-v-unit{ width: 100%; min-width: 72px; padding: 6px 26px 6px 8px; font-size: 12.5px; }
/* ================= PHIẾU NHẬP KHO BAO BÌ — bố cục theo khung ================= */
.rf-page-head{ display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rf-meta{ display: flex; gap: 10px; flex-wrap: wrap; }
.rf-meta-item{ display: flex; flex-direction: column; gap: 2px; padding: 8px 14px; border-radius: 12px; background: var(--surface-soft); min-width: 170px; }
.rf-meta-item span{ font-size: 11px; color: var(--text-muted); }
.rf-meta-item input{ border: none !important; background: transparent !important; padding: 0 !important; box-shadow: none !important; font-weight: 600; font-size: 13.5px; color: var(--text-primary) !important; height: auto; }
.rf-grid-3{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0 16px; }
.rf-grid-3 .field{ margin-bottom: 0; }
.rf-lines-foot{ display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.rf-total{ font-size: 14px; color: var(--text-secondary); }
.rf-total strong{ font-family: var(--font-family-heading); font-size: 18px; color: var(--text-primary); margin-left: 4px; }
.rf-acct{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); gap: 28px; }
.rf-acct-col + .rf-acct-col{ border-left: 1px solid var(--border); padding-left: 28px; }
.rf-sub-title{ font-size: 13px; font-weight: 600; margin: 0 0 12px; color: var(--text-primary); }
.rf-acct .code-grid{ margin-bottom: 0; }
.rf-acct .field[style*="max-width"]{ max-width: none !important; }
.rf-summary{ margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--surface-soft); display: grid; gap: 6px; }
.rf-sum-row{ display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--text-secondary); }
.rf-sum-row b{ color: var(--text-primary); font-weight: 600; }
.rf-sum-row.is-total{ border-top: 1px solid var(--border-strong); padding-top: 8px; margin-top: 2px; font-size: 14px; color: var(--text-primary); }
.rf-sum-row.is-total b{ font-family: var(--font-family-heading); font-size: 17px; }
#view-pkgreceipt .pf-card-head .small{ width: auto; }
@media (max-width: 900px){ .rf-grid-3, .rf-acct{ grid-template-columns: 1fr; } .rf-acct-col + .rf-acct-col{ border-left: none; padding-left: 0; } }
/* Nhãn đánh dấu cho dev: phần giao diện chưa được thực hiện */
.dev-tag{ display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; background: #fff1f2; color: #c20039; border: 1px dashed #ffa2ae; letter-spacing: .01em; }
#view-materialreceipt .pf-card-head .small{ width: auto; }
/* Popup tồn kho: chọn biến thể */
.sp-chips{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.sp-chip{ width: auto !important; padding: 5px 12px !important; border-radius: 999px !important; font-size: 12px; background: var(--surface) !important; border: 1px solid var(--border-strong) !important; color: var(--text-secondary); box-shadow: none !important; }
.sp-chip.active{ background: var(--tint) !important; border-color: var(--accent) !important; color: var(--accent); font-weight: 600; }
/* Dòng trùng quy cách + đóng gói: chữ báo lỗi nằm dưới ô nhập (không đẩy ô lên) — mọi ô trong dòng vẫn thẳng hàng */
.pf-variant-table td{ position: relative; }
.pf-variant-table tr.pf-dup td{ padding-bottom: 24px; }
.pf-variant-table .pf-dup-msg{ position: absolute; left: 12px; bottom: 6px; margin: 0; white-space: nowrap; }
.pf-variant-table td, .pf-variant-table tr{ overflow: visible !important; }
.pf-variant-table .pf-dup-msg{ z-index: 2; }
/* Popup tồn kho bao bì: tách bao công ty / bao KH gửi giữ hộ */
.sp-kpis{ grid-template-columns: repeat(5, minmax(0,1fr)); }
.sp-kpis > div.is-main{ background: var(--tint); }
.sp-kpis > div.is-main b{ color: var(--accent); }
.sp-kh{ color: var(--purple, #7008e7); font-weight: 600; }
.sp-av{ color: var(--accent); }
@media (max-width: 760px){ .sp-kpis{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
/* Popup tồn kho: nhóm Kho ↔ Biến thể */
.sp-tools-r{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sp-table-wrap tr.sp-grp td{ background: var(--surface-soft); font-weight: 600; }
.sp-table-wrap tr.sp-sub td:first-child{ padding-left: 30px; position: relative; color: var(--text-secondary); }
.sp-table-wrap tr.sp-sub td:first-child::before{ content: ""; position: absolute; left: 16px; top: 50%; width: 8px; border-top: 1px solid var(--border-strong); }
.sp-table-wrap tr.sp-sub td{ font-size: 12px; }
.app-modal:has(#spBody){ width: min(1080px, 94vw); max-width: none; }
/* Popup tồn kho: bảng cao hơn, dòng Tổng cộng nền đặc + viền trên rõ để không đè lên dòng cuối khi cuộn */
.sp-table-wrap{ max-height: min(56vh, 520px); }
.sp-table-wrap tfoot td{ background: var(--surface, #fff) !important; box-shadow: 0 -1px 0 var(--border-strong); padding-top: 10px; padding-bottom: 10px; z-index: 2; }
#spZero{ margin: 0; }
.sp-tools:has(#spZero){ justify-content: flex-end; }
#view-packaging .page-head-actions{ padding-left: 0; border-left: none; }
/* Tooltip ⓘ dạng khung nổi (js/20-polish.js): không bị bảng / khung cuộn cắt mất */
.tip-floating .info-tip .tip-box{ display: none !important; }
.tip-float{ position: fixed; z-index: 3000; pointer-events: none; background: #08CB00; color: #fff; padding: 6px 10px; border-radius: 6px;
  font-size: 11.5px; font-weight: 500; line-height: 1.5; max-width: 280px; width: max-content; white-space: normal; text-align: left;
  box-shadow: 0 8px 20px -8px rgba(0,0,0,.3); opacity: 0; transform: translateX(-4px); transition: opacity .15s ease, transform .15s ease; }
.tip-float.show{ opacity: 1; transform: none; }
.rf-grid-3.rf-row{ margin-bottom: 16px; align-items: end; }
/* Phiếu nhập kho bao bì: chọn Sở hữu ngay trên bảng chi tiết */
.rf-owner{ display: flex; align-items: center; gap: 10px; }
.rf-owner-label{ font-size: 12.5px; color: var(--text-secondary); }
.rf-owner .pf-seg{ gap: 6px; }
/* Phiếu nhập kho bao bì: Sở hữu ở đầu khung 1 (quyết định đối tác, đơn giá, khung chi phí bên dưới) */
.rf-owner-field{ margin-bottom: 16px; }
.rf-sub-sep{ margin: 22px 0 12px; padding-top: 18px; border-top: 1px solid var(--border); }
/* Duyệt phiếu kho (js/26-stock-approvals.js) */
.status-pill.danger{ background: var(--danger-bg); color: var(--danger); border-color: #F3C6C3; }
.sd-badge{ margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--danger, #c8264a); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.sd-badge[hidden]{ display: none !important; }
.sd-kind{ display: inline-flex; align-items: center; gap: 6px; }
.sd-kind i{ color: var(--accent); font-size: 16px; }
.sd-meta{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 18px; margin-bottom: 14px; }
.sd-meta > div{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sd-meta span{ font-size: 11.5px; color: var(--text-muted); }
.sd-meta b{ font-weight: 600; font-size: 13px; word-break: break-word; }
.app-modal:has(.sd-head){ width: min(860px, 94vw); max-width: none; }
#sdTableBody button{ width: auto !important; }
/* Phân hệ Phiếu kho: menu "Lập phiếu" */
.sd-new-menu{ min-width: 290px; right: 0; left: auto; }
.sd-new-menu .action-menu-item{ display: flex; align-items: center; gap: 8px; }
.sd-new-menu .action-menu-item i{ color: var(--accent); font-size: 16px; }
.sd-menu-label{ font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); padding: 8px 12px 4px; }
.sd-menu-label + .action-menu-item{ margin-top: 0; }
.status-pill.auto{ background: var(--surface-muted); color: var(--text-secondary); border-color: var(--border); }
.sd-sign-in{ color: var(--success); font-weight: 600; } .sd-sign-out{ color: var(--danger); font-weight: 600; }
#pmTableBody .pill, #pdOrderTableBody .pill, #opPromoSection .pill{ white-space: nowrap; }

/* ===== Phân quyền (js/22-auth.js): thủ kho không thấy giá, không thấy các nhóm menu ngoài phạm vi ===== */
.sidebar-group[hidden]{ display: none !important; }
body.no-cost .cost-only{ display: none !important; }
/* ===== Duyệt phiếu kho: nhập đơn giá khi duyệt (js/26-stock-approvals.js) ===== */
.sd-price-box{ margin-top: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); }
.sd-price-box .panel-title{ margin: 0 0 8px; }
.sd-price-box table input{ width: 100%; min-width: 90px; }
.sd-price-box .sd-price-sum{ display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; font-size: 13px; }
.status-pill.transit{ background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.sidebar-item[hidden]{ display: none !important; }
#ledgerTableBody a[data-ledger-doc]{ color: var(--accent); text-decoration: none; }
#ledgerTableBody a[data-ledger-doc]:hover{ text-decoration: underline; }
/* Menu "Lập phiếu": canh theo phía còn chỗ trống (js/26 gắn .align-left khi nút nằm sát mép trái, VD màn hình hẹp) */
.sd-new-menu{ width: max-content; max-width: min(380px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow-y: auto; }
.sd-new-menu.align-left{ left: 0; right: auto; }
.sd-new-menu .action-menu-item{ white-space: normal; line-height: 1.35; }
/* Chi tiết phiếu kho (js/26 openStockDocDetail): đầu phiếu + các nhóm thông tin */
.sd-head{ display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.sd-head .sd-kind{ font-weight: 600; font-size: 14px; }
.sd-sec{ padding: 12px 0; border-bottom: 1px solid var(--line-soft, var(--border)); }
.sd-sec:last-of-type{ border-bottom: none; }
.sd-sec .sd-meta{ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); margin-bottom: 0; }
.sd-sec-title{ display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 0 0 10px; }
.sd-sec-count{ margin-left: 4px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-muted); }
.sd-sec .sp-table-wrap table{ margin-bottom: 0; }
.sd-reject-note{ display: flex; gap: 10px; margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--danger-bg, #fdecef); color: var(--danger, #c8264a); }
.sd-reject-note i{ font-size: 18px; margin-top: 1px; }
.sd-reject-note div{ display: flex; flex-direction: column; gap: 2px; }
.sd-reject-note span{ color: var(--text-primary); }
.sd-price-box .sd-sec-title{ margin-bottom: 8px; }
.sd-price-box label .info-tip{ margin-left: 2px; }
.sd-sec .sd-meta.sd-meta-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 640px){ .sd-sec .sd-meta.sd-meta-4{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Chi tiết phiếu kho: cửa sổ không cao quá màn hình — tiêu đề và hàng nút (Đóng / Duyệt / Từ chối) cố định, chỉ nội dung cuộn */
.app-modal:has(.sd-head){ display: flex; flex-direction: column; max-height: calc(100dvh - 40px); width: min(860px, 100%); min-width: 0; }
.app-modal:has(.sd-head) #modalTitle{ flex-shrink: 0; }
.app-modal:has(.sd-head) #modalHtml{ flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 -20px; padding: 0 20px 4px; overscroll-behavior: contain; }
.app-modal:has(.sd-head) .app-modal-footer{ flex-shrink: 0; padding-top: 14px; margin-top: 2px; border-top: 1px solid var(--border); }
.app-modal:has(.sd-head) .sp-table-wrap{ max-height: none; }
/* Chi phí vận chuyển, bốc xếp trong cửa sổ duyệt phiếu (js/26 stockDocPricingHtml 'logistics') */
.sd-logi-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sd-logi-grid .field{ margin: 0; }
@media (max-width: 640px){ .sd-logi-grid{ grid-template-columns: 1fr; } }
/* Khung vận chuyển, bốc xếp nằm trong khung nhập giá phiếu nhập mua (js/26 transportBoxHtml inline) */
.sd-transport-inline{ margin: 12px 0 14px; padding: 12px 0 14px; border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border); }
.sd-transport-inline .rf-sub-title{ display: flex; align-items: center; gap: 4px; }
/* ===== Rà UI phân hệ Phiếu kho / Đơn vị vận chuyển (20/10/2026) ===== */
/* Bảng danh sách: mã phiếu, ngày, kho, người lập không ngắt dòng */
.sd-nowrap{ white-space: nowrap; }
#sdTableBody .sd-kind{ white-space: nowrap; }
/* Bảng mặt hàng trong chi tiết phiếu: ô nhập đơn giá + dòng tổng */
.sd-lines input.sdpPrice{ width: 100%; min-width: 120px; }
.sd-lines tfoot td{ background: var(--surface-soft); font-size: 13px; padding-top: 10px; padding-bottom: 10px; }
.sd-price-box-flat .sd-transport-inline{ margin-top: 0; border-top: none; padding-top: 0; }
/* Cửa sổ có hành động chính (Duyệt, Lưu, Thanh toán): nút Đóng là nút phụ, nằm bên trái; chỉ có Đóng thì giữ nguyên */
.app-modal:is(:has(#sdBtnApprove), :has(#crStmtExport), :has(#cpSave), :has(#crSave), :has(#trRecvSubmit), :has(#ptSave), :has(#srcGo)) #modalClose{
  order: -1; margin-right: auto; background: var(--surface); color: var(--text-primary); border: 1px solid var(--border-strong); box-shadow: none; }
.app-modal:is(:has(#sdBtnApprove), :has(#crStmtExport), :has(#cpSave), :has(#crSave), :has(#trRecvSubmit), :has(#ptSave), :has(#srcGo)) #modalClose:hover{ background: var(--surface-soft); }
/* Trang Đơn vị vận chuyển */
.cr-period{ display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); margin: 0; }
.cr-period input{ width: 170px; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text-primary); font: inherit; font-size: 13px; }
.cr-period input:focus{ outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.16); }
.cr-actions{ white-space: nowrap; text-align: right; }
.cr-actions button.small{ width: auto; display: inline-flex; align-items: center; vertical-align: middle; margin: 0 0 0 6px; }
.cr-actions .icon-edit-btn{ vertical-align: middle; margin-left: 6px; }
/* Danh sách phiếu: dòng phụ (ngày lập dưới mã phiếu, kho dưới loại phiếu) */
.sd-sub{ margin-top: 3px; font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.sd-sub-indent{ padding-left: 22px; }
/* ===== Rà UI Đơn hàng / Kho / Sản phẩm (20/10/2026) ===== */
/* Đầu trang: khối tiêu đề co giãn, nhóm lọc + nút luôn nằm cùng hàng bên phải (không bị kéo giãn 100%) */
.page-head > div:first-child{ flex: 1 1 360px; min-width: 0; }
.page-head-search > select{ width: auto; min-width: 180px; max-width: 280px; }
#view-materialdetail .page-head-search{ justify-content: flex-start; }
/* Nhãn nhỏ (pill) không ngắt dòng */
.pill{ white-space: nowrap; }
/* Bảng đơn hàng: tên đại lý không bị bóp từng chữ */
#ordTableBody .av-name{ line-height: 1.4; }
/* Phiếu nhập thành phẩm: số bước tự đánh theo các khung đang hiện */
#view-finishedreceipt{ counter-reset: pfstep; }
#view-finishedreceipt .pf-step-auto::before{ counter-increment: pfstep; content: counter(pfstep); }
#view-finishedreceipt .receipt-meta{ margin-bottom: 0; }
#view-finishedreceipt .kv-block{ margin: 14px 0 0; }
#frFormBody .panel{ margin-top: 16px; }
/* Sửa sản phẩm: thông tin tự sinh chia 2 cột */
.pe-kv{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; margin: 0; background: transparent; border: none; padding: 0; }
.pe-kv .kv-row .v{ text-align: right; }
@media (max-width: 760px){ .pe-kv{ grid-template-columns: 1fr; } }
/* Form mẫu bao bì: ô quy cách đủ rộng để đọc placeholder */
#view-pkgform .line-table input[type="number"]{ min-width: 72px; }
/* Lịch nhập dự kiến: nút thao tác xếp gọn, không tràn mép bảng */
.mi-actions{ display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.mi-actions button.small{ width: auto; margin: 0; white-space: nowrap; }
#miTableBody td:nth-child(4){ white-space: nowrap; }
/* Danh sách đơn hàng: tên đại lý đủ rộng, nút thao tác không ngắt dòng */
#ordTableBody td:last-child button{ white-space: nowrap; width: auto; }
#ordTableBody td:last-child .icon-edit-btn{ width: 30px; min-width: 30px; flex-shrink: 0; } /* 28/10: giữ icon tròn 30px */
/* Nhật ký kho: loại giao dịch và ghi chú đủ rộng */
#ledgerTableBody td:nth-child(4){ min-width: 110px; }
#ledgerTableBody td:last-child{ min-width: 160px; }
/* Danh sách đơn hàng: trạng thái không bị cột thao tác (cố định bên phải) che */
#ordTableBody td:nth-child(9){ min-width: 118px; white-space: nowrap; }
#ordTableBody td:nth-child(3){ min-width: 170px; }
/* Chuẩn bị đơn hàng: giữ nguyên các cột đã thống nhất, chỉ đặt độ rộng tối thiểu để chữ không bẻ từng từ */
#opLinesTable > tr > td:nth-child(2){ word-break: break-all; min-width: 96px; }
#opLinesTable > tr > td:nth-child(3){ min-width: 104px; }
#opLinesTable > tr > td:nth-child(5){ min-width: 72px; }
#opLinesTable > tr > td:nth-child(7){ min-width: 76px; }
#opLinesTable > tr > td:nth-child(9), #opLinesTable > tr > td:nth-child(10){ white-space: nowrap; }
/* 14 cột: thu hẹp lề ô để cả bảng vừa khung, không phải cuộn ngang mới thấy Trạng thái / nút mở chi tiết */
table:has(> #opLinesTable) > thead th, #opLinesTable > tr > td{ padding-left: 7px; padding-right: 7px; }
/* Lập phiếu nhập: chọn nguồn nhập (js/26 openReceiptSourcePicker) */
.src-list{ display: grid; gap: 8px; }
.src-opt{ display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; padding: 11px 13px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; margin: 0; }
.src-opt:has(input:checked){ border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.src-opt.disabled{ opacity: .55; cursor: not-allowed; }
.src-opt input{ margin-top: 3px; width: auto; }
.src-opt b{ display: block; font-size: 13.5px; } .src-opt span{ display: block; font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.src-opt em{ display: block; font-size: 12px; color: var(--text-muted); margin-top: 6px; font-style: normal; }
.src-opt select{ margin-top: 8px; font-size: 13px; }
/* Chi tiết phiếu: nguồn nhập / lý do xuất cạnh tên phiếu */
.sd-src-chip{ font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--surface-soft); border: 1px solid var(--border); color: var(--text-secondary); }

/* Chi tiết phiếu: tiêu đề cột bảng mặt hàng không xuống dòng */
.sd-lines th{ white-space: nowrap; }

/* Danh sách phiếu xuất/nhập kho: mọi ô căn theo dòng đầu (mã phiếu, loại phiếu, nội dung, người lập, trạng thái, nút Xem) */
#sdTableBody td{ vertical-align: top; line-height: 20px; }
#sdTableBody .sd-sub{ line-height: 16px; }
#sdTableBody .sd-sub-wrap{ white-space: normal; }
#sdTableBody .status-pill{ margin-top: -5px; }
#sdTableBody button.small{ margin-top: -5px; }
/* Nhãn có icon ⓘ không cao hơn nhãn thường → các ô trong cùng hàng thẳng nhau */
.field label .info-tip{ line-height: 1; height: 1em; align-items: center; }
.field label .info-tip i{ font-size: 13px; line-height: 1; }
/* Ô chọn và ô nhập trong lưới thông tin phiếu cùng chiều cao (trước đây select thấp hơn input 2px → lệch hàng) */
.rf-grid-3 .field > input, .rf-grid-3 .field > select{ height: 38px; box-sizing: border-box; }

/* Nút "Tải phiếu xuất kho (in để ký)" gọn bên phải tiêu đề như ở form nhập */
#view-pkgissue .pf-card-head .small, #view-materialissue .pf-card-head .small, #view-finishedissue .pf-card-head .small{ width: auto; }

/* Form chương trình khuyến mãi: 3 thẻ đánh số như form phiếu kho */
#view-promoform .pm-span-2{ grid-column: span 2; }
#view-promoform .pm-type-grid{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
#view-promoform .pm-type-grid .src-opt:has(input:disabled){ cursor: not-allowed; } #view-promoform .pm-type-grid .src-opt:has(input:disabled:not(:checked)){ opacity: .5; }
#view-promoform .pm-scope-grid{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 16px; align-items: start; }
#view-promoform .pm-scope-grid .field{ margin-bottom: 0; }
#view-promoform .panel .rf-grid-3 .field{ margin-bottom: 0; }
#view-promoform .panel{ margin-bottom: 0; }
@media (max-width: 900px){ #view-promoform .pm-type-grid, #view-promoform .pm-scope-grid{ grid-template-columns: 1fr; } #view-promoform .pm-span-2{ grid-column: auto; } }

/* Trang Chi phí: tab nội dung, ô so sánh kỳ, thẻ tóm tắt nhỏ, thanh tỷ trọng */
.kpi-delta{ margin: 6px 0 0; font-size: 12px; color: var(--text-muted); }
.kpi-delta .up{ color: var(--danger); font-weight: 600; } .kpi-delta .down{ color: var(--success, #2f9e44); font-weight: 600; }
.cost-tabbar{ display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 22px 0 14px; }
.cost-tab-badge{ display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 600; }
.cost-mini-grid{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.cost-mini{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.cost-mini span{ font-size: 12.5px; color: var(--text-secondary); } .cost-mini b{ font-size: 19px; font-variant-numeric: tabular-nums; } .cost-mini em{ font-style: normal; font-size: 12px; color: var(--text-muted); }
.cost-filter-row{ display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 16px 0 10px; }
.cost-share{ display: flex; align-items: center; gap: 8px; } .cost-share i{ flex: 1; height: 6px; border-radius: 3px; background: var(--surface-muted); overflow: hidden; position: relative; }
.cost-share i b{ position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: 3px; } .cost-share em{ font-style: normal; min-width: 42px; text-align: right; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.cost-structure .cs-delta.up{ color: var(--danger); } .cost-structure .cs-delta.down{ color: var(--success, #2f9e44); }
.cost-structure tr.cs-group .cs-more{ font-weight: 400; font-size: 12px; margin-left: 8px; }
@media (max-width: 760px){ .cost-mini-grid{ grid-template-columns: 1fr; } }

#view-costs td.num{ text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
#view-costs tr.cs-total td{ font-weight: 700; border-top: 1.5px solid var(--border-strong); }
/* Tab Tổng quan trang Chi phí: thẻ nhóm dùng lại kiểu thẻ Dashboard (thanh ngang ds-row) */
.cost-compare tr.cc-group td{ background: var(--surface-muted); font-weight: 600; }
.cost-compare tr.cc-item td:first-child{ padding-left: 26px; color: var(--text-secondary); }
.cost-compare .cs-up{ color: var(--danger); font-weight: 600; } .cost-compare .cs-down{ color: var(--success, #2f9e44); font-weight: 600; }

/* Quản lý bao bì: tồn kho theo quy cách (bao rỗng chưa có kiểu đóng gói) */
#pkgTableBody .pkg-size-stock{ display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
#pkgTableBody .pkg-size-line{ display: inline-flex; align-items: center; gap: 10px; width: auto; min-width: 0; margin: 0; padding: 3px 6px 3px 3px; border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: inherit; font: inherit; cursor: pointer; }
#pkgTableBody .pkg-size-line:hover{ background: var(--surface-muted); }
#pkgTableBody .pkg-size-line .pill{ min-width: 58px; justify-content: center; }
#pkgTableBody .pkg-size-line b{ min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; }
#pkgTableBody .pkg-size-line.is-empty b{ color: var(--text-muted); font-weight: 500; }
#pkgTableBody .pkg-size-line.is-off{ opacity: .5; }
.sp-closures{ margin-top: 2px; font-size: 11.5px; font-weight: 400; color: var(--text-muted); }
.pf-cl-tags{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pf-cl-tags .tag-pill{ margin: 0; }
.pf-cl-tags select{ width: auto; min-width: 118px; padding-top: 5px; padding-bottom: 5px; font-size: 12.5px; }

/* Chuẩn bị đơn hàng: tách đơn thủ công */
.ms-box{ padding: 14px 16px; }
.ms-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ms-wrap{ overflow-x: auto; }
.ms-table{ width: 100%; min-width: 560px; }
.ms-table th, .ms-table td{ vertical-align: middle; }
.ms-table .ms-prod{ min-width: 220px; }
.ms-table .ms-orig, .ms-table .ms-left{ width: 96px; white-space: nowrap; }
.ms-table .ms-col{ min-width: 150px; }
.ms-table td.num, .ms-table th.num{ text-align: right; font-variant-numeric: tabular-nums; }
.ms-table input{ width: 100%; padding-top: 6px; padding-bottom: 6px; }
.ms-table input.ms-qty{ text-align: right; }
.ms-col-head{ display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ms-x{ width: 22px !important; height: 22px; padding: 0 !important; border-radius: 6px; font-size: 11px; line-height: 1; color: var(--text-muted); }
.ms-x:hover{ color: var(--danger); border-color: var(--danger); }
.ms-meta td{ background: var(--surface-muted); }
.ms-meta .ms-prod{ font-weight: 600; color: var(--text-secondary); font-size: 12.5px; }
.ms-sum td{ font-weight: 600; }
.ms-ok{ color: var(--success, #2f9e44); font-weight: 600; } .ms-ok i{ font-size: 13px; }
.ms-bad{ color: var(--danger); font-weight: 600; }
.ms-table td.num{ white-space: nowrap; }

/* ===== Trang chi tiết đơn hàng: 2 cột (nội dung | tóm tắt) ===== */
.op-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.op-head-sub{ display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.op-head-actions{ display: flex; gap: 8px; }
.op-head-actions button{ width: auto; }
.op-layout{ display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 16px; align-items: start; }
.op-main{ min-width: 0; }
.op-main .op-section, .op-side .op-section{ margin-bottom: 16px; }
.op-side{ position: sticky; top: 12px; }
@media (max-width: 1180px){ .op-layout{ grid-template-columns: minmax(0,1fr); } .op-side{ position: static; } }
/* Bảng sản phẩm gọn */
.op-lines td{ vertical-align: top; }
.op-lines th.num, .op-lines td.num{ text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.op-prod-name{ font-weight: 500; margin-top: 2px; }
.op-gift-row td{ background: var(--surface-muted); padding-top: 6px; padding-bottom: 6px; }
.op-gift-row td:nth-child(3){ padding-left: 20px; }
.op-gift-tag{ display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 12.5px; color: var(--accent-strong, var(--text-primary)); }
.op-short{ margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--danger); }
/* Xử lý đơn */
.op-mode-row{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-bottom: 12px; }
.op-mode-row .src-opt:has(input:disabled){ opacity: .5; cursor: not-allowed; }
.op-process-foot{ display: flex; justify-content: flex-end; margin-top: 14px; }
.op-process-foot button{ width: auto; }
.cap-bar{ margin-bottom: 12px; }
.cap-bar-head{ font-size: 13px; margin-bottom: 8px; }
.cap-track{ display: flex; gap: 2px; height: 12px; border-radius: 6px; overflow: hidden; background: var(--line-soft, var(--surface-muted)); }
.cap-seg{ display: block; min-width: 4px; } .cap-seg.sb-ok{ background: var(--chart-ok); } .cap-seg.sb-in{ background: var(--chart-in); } .cap-seg.sb-short{ background: repeating-linear-gradient(135deg, var(--chart-bad) 0 2px, var(--chart-bad-bg) 2px 6px); }
.cap-legend{ display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font-size: 12.5px; }
.cap-legend > span.is-zero{ opacity: .55; }
.cap-dot{ display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.cap-dot.sb-ok{ background: var(--chart-ok); } .cap-dot.sb-in{ background: var(--chart-in); } .cap-dot.sb-short{ background: var(--chart-bad); }
/* Cột phải */
.op-pay{ display: flex; flex-direction: column; gap: 6px; }
.op-pay-row{ display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; }
.op-pay-row b{ font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.op-pay-row.is-disc b{ color: var(--success, #2f9e44); }
.op-pay-row.is-muted span, .op-pay-row.is-muted b{ color: var(--text-muted); font-weight: 500; }
.op-pay-totals{ border-top: 1px dashed var(--border); margin-top: 8px; padding-top: 8px; }
.op-pay-row.is-total{ font-size: 15px; } .op-pay-row.is-total b{ font-size: 17px; font-weight: 700; }
.op-pay-form{ margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--border); }
.op-pay-form > div:first-of-type{ flex-wrap: wrap; } .op-pay-form button{ width: auto; }
.op-kv{ display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.op-kv > div{ display: flex; justify-content: space-between; gap: 12px; }
.op-kv > div > span{ color: var(--text-muted); white-space: nowrap; }
.op-kv > div > b{ font-weight: 600; text-align: right; }
.op-kv > div.op-kv-wide{ flex-direction: column; gap: 2px; } .op-kv > div.op-kv-wide > b{ text-align: left; font-weight: 500; }
.op-kv-sep{ border-top: 1px solid var(--border); margin-top: 10px; padding-top: 10px; }
.op-promo-card{ border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; background: var(--surface-muted); }
.op-promo-card.is-rej{ border-color: var(--warning); background: var(--warning-bg); }
.op-promo-top{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.op-promo-name{ font-weight: 600; margin-top: 6px; }
.op-promo-note{ margin: 8px 0 0; font-size: 12px; color: var(--text-muted); }
.op-lines td:nth-child(2) .sku-mono{ white-space: nowrap; font-size: 11.5px; }
.op-lines{ table-layout: fixed; width: 100%; }
.op-lines td, .op-lines th{ overflow-wrap: break-word; }
.op-lines th{ white-space: normal; }
.op-lines .status-pill{ white-space: nowrap; font-size: 11.5px; }
.op-lines td:nth-child(2), .op-lines td:nth-child(2) *{ word-break: normal; overflow-wrap: break-word; }
.op-pay-form .op-pay-btn{ width: 100% !important; display: inline-flex; align-items: center; justify-content: center; }
.op-head-title{ display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.op-head-title .status-pill{ font-size: 12px; font-weight: 500; }
/* Chi tiết đơn: thẻ tóm tắt đầu trang + lịch sử thu tiền */
.op-summary{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-bottom: 16px; }
.op-sum-card{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.op-sum-k{ font-size: 12px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 5px; }
.op-sum-card b{ font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-sum-sub{ font-size: 12px; color: var(--text-secondary); }
@media (max-width: 1000px){ .op-summary{ grid-template-columns: minmax(0,1fr); } }
.op-pay-history{ margin-top: 12px; }
.op-pay-hist-title{ margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: none; }
.op-pay-hist{ display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px dashed var(--border); font-size: 12.5px; }
.op-pay-hist b{ white-space: nowrap; font-variant-numeric: tabular-nums; }
.op-lines th, .op-lines td{ padding-left: 6px !important; padding-right: 6px !important; }
.op-lines th:first-child, .op-lines td:first-child{ padding-left: 10px !important; }
.op-lines td:last-child{ text-align: right; }
.op-lines .thumb-toggle{ width: 26px; height: 26px; }
.op-lines th{ font-size: 11px; }

/* ===== Chi tiết đơn hàng: quy cách chữ cố định (5 cấp) =====
   T1 Tiêu đề trang ........ 16px / 700  (h1)
   T2 Tiêu đề thẻ .......... 14px / 600  (.panel-title, tên đại lý / sale / số tiền ở thẻ tóm tắt)
   T3 Nội dung ............. 13px / 400  (ô bảng, mô tả)  — giá trị cần đọc nhanh: 13px / 600 (giá trị ở thẻ, tên sản phẩm, thành tiền)
   T4 Nhãn, chú thích ...... 12px / 400 màu phụ (nhãn trước giá trị, dòng phụ dưới ô, ghi chú)
   T5 Tiêu đề cột bảng ..... 11px / 600 màu phụ
   Nhấn mạnh duy nhất: "Đại lý phải trả" 16px / 700. Màu (đỏ nợ, xanh giảm giá) không đổi cỡ chữ. */
#view-orderprepare{ font-size: 13px; }
#view-orderprepare .panel-title{ font-size: 14px !important; font-weight: 600 !important; }
#view-orderprepare .hesocol, #view-orderprepare .sd-sub, #view-orderprepare .op-sum-sub, #view-orderprepare .op-promo-note,
#view-orderprepare .hint-text, #view-orderprepare .op-short, #view-orderprepare .cap-legend, #view-orderprepare .op-sum-k{ font-size: 12px !important; font-weight: 400 !important; }
#view-orderprepare .hesocol, #view-orderprepare .op-sum-k, #view-orderprepare .op-promo-note, #view-orderprepare .hint-text{ color: var(--text-muted); }
#view-orderprepare .op-short{ color: var(--danger); font-weight: 600 !important; }
#view-orderprepare table th{ font-size: 11px !important; font-weight: 600 !important; color: var(--text-secondary) !important; }
#view-orderprepare table td{ font-size: 13px !important; font-weight: 400; }
#view-orderprepare table td b, #view-orderprepare table td strong{ font-weight: 600; }
#view-orderprepare .sku-mono{ font-size: 12px !important; font-weight: 500; }
#view-orderprepare .op-prod-name{ font-size: 13px; font-weight: 600; }
#view-orderprepare .op-gift-tag{ font-size: 13px; font-weight: 600; }
#view-orderprepare .status-pill{ font-size: 12px !important; font-weight: 500 !important; }
/* Thẻ tóm tắt đầu trang */
#view-orderprepare .op-sum-card b{ font-size: 14px; font-weight: 600; }
/* Cặp nhãn – giá trị ở cột phải */
#view-orderprepare .op-kv{ font-size: 13px; }
#view-orderprepare .op-kv > div > span, #view-orderprepare .op-pay-row > span{ font-size: 12px; font-weight: 400; color: var(--text-secondary); }
#view-orderprepare .op-kv > div > b, #view-orderprepare .op-pay-row > b{ font-size: 13px; font-weight: 600; }
#view-orderprepare .op-pay-row{ font-size: 13px; }
#view-orderprepare .op-pay-row.is-muted > span, #view-orderprepare .op-pay-row.is-muted > b{ color: var(--text-muted); font-weight: 400; }
#view-orderprepare .op-pay-row.is-total > span{ font-size: 13px; font-weight: 600; color: var(--text-primary); }
#view-orderprepare .op-pay-row.is-total > b{ font-size: 16px; font-weight: 700; }
#view-orderprepare .op-pay-hist{ font-size: 12px; } #view-orderprepare .op-pay-hist b{ font-size: 13px; font-weight: 600; }
#view-orderprepare .op-pay-hist-title{ font-size: 12px; font-weight: 600; }
#view-orderprepare .op-promo-name{ font-size: 13px; font-weight: 600; }
/* Xử lý đơn */
#view-orderprepare .cap-bar-head{ font-size: 13px; } #view-orderprepare .cap-bar-head b{ font-weight: 600; }
#view-orderprepare .cap-legend b{ font-weight: 600; }
#view-orderprepare .src-opt b{ font-size: 13px; font-weight: 600; } #view-orderprepare .src-opt span{ font-size: 12px; }
#view-orderprepare .total-bar{ font-size: 13px; } #view-orderprepare .total-bar strong{ font-size: 13px; font-weight: 600; }
#view-orderprepare .capacity-banner{ font-size: 13px; }
#view-orderprepare .ms-table .ms-prod{ font-size: 13px; } #view-orderprepare .ms-meta .ms-prod{ font-size: 12px; font-weight: 600; }
/* Bảng chi tiết vật tư (mở rộng từng dòng): chữ cấp T4 (12px), cuộn ngang khi hẹp — không chồng chữ */
#view-orderprepare .thumb-row > td > div{ overflow-x: auto; }
#view-orderprepare .thumb-row table td{ font-size: 12px !important; }
#view-orderprepare .thumb-row table th{ font-size: 11px !important; }
#view-orderprepare .thumb-row table td, #view-orderprepare .thumb-row table th{ padding-left: 4px !important; padding-right: 4px !important; }
#view-orderprepare .thumb-row .status-pill{ padding: 2px 7px; white-space: nowrap; }
#view-orderprepare .thumb-row .status-pill i{ display: none; }
#view-orderprepare .thumb-row .status-pill{ font-size: 11px !important; }
#view-orderprepare .thumb-row .inc-icon, #view-orderprepare .thumb-row .edit-icon{ width: 22px; height: 22px; font-size: 13px; padding: 0; }
#view-orderprepare .thumb-row table{ min-width: 0 !important; }
/* Bảng chi tiết vật tư: căn lề cố định — chữ trái, số phải (tiêu đề cột căn giống dữ liệu); không thừa hưởng căn phải của ô cha */
#view-orderprepare .thumb-row > td{ text-align: left !important; }
#view-orderprepare .thumb-row table th, #view-orderprepare .thumb-row table td{ text-align: left !important; vertical-align: top; }
#view-orderprepare .thumb-row table th:nth-child(6), #view-orderprepare .thumb-row table td:nth-child(6),
#view-orderprepare .thumb-row table th:nth-child(7), #view-orderprepare .thumb-row table td:nth-child(7),
#view-orderprepare .thumb-row table th:nth-child(10), #view-orderprepare .thumb-row table td:nth-child(10){ text-align: right !important; }
#view-orderprepare .thumb-row table th:nth-child(11), #view-orderprepare .thumb-row table td:nth-child(11){ text-align: center !important; }
#view-orderprepare .thumb-row table td:nth-child(2){ word-break: break-all; }
/* 3 thẻ đầu trang */
#view-orderprepare .op-sum-card{ gap: 0; padding: 14px 16px; }
#view-orderprepare .op-sum-title{ display: flex; align-items: center; gap: 6px; margin: 0 0 10px; }
#view-orderprepare .op-sum-title i{ color: var(--accent); }
#view-orderprepare .op-sum-card .op-kv > div > b{ font-size: 13px; font-weight: 600; white-space: normal; overflow: visible; }
#ordTableBody td{ white-space: normal; }
#view-orderprepare .op-lines td:nth-child(2) .sku-mono{ word-break: break-all; }
#view-orderprepare .op-gift-tag{ display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--accent-soft, rgba(152,229,97,.25)); font-size: 11px !important; font-weight: 600; vertical-align: 1px; }
#view-orderprepare .op-gift-row td:nth-child(3){ padding-left: 6px !important; }

/* Thanh năng lực: số nằm trong từng đoạn */
#view-orderprepare .cap-track{ height: 30px; border-radius: 8px; gap: 2px; }
#view-orderprepare .cap-seg{ display: flex; align-items: center; justify-content: center; padding: 0 8px; min-width: 34px; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); }
#view-orderprepare .cap-seg.sb-ok{ background: var(--chart-ok); }
#view-orderprepare .cap-seg.sb-in{ background: var(--chart-in); }
#view-orderprepare .cap-seg.sb-short{ background: repeating-linear-gradient(135deg, var(--chart-bad-bg) 0 6px, color-mix(in srgb, var(--chart-bad) 22%, var(--chart-bad-bg)) 6px 9px); color: var(--danger); box-shadow: inset 0 0 0 1px var(--chart-bad-line); }
#view-orderprepare .op-kv > div.op-kv-total{ border-top: 1px dashed var(--border); padding-top: 7px; margin-top: 2px; }
#view-orderprepare .op-kv > div.op-kv-total > span{ color: var(--text-primary); font-weight: 600; }

/* Thanh năng lực: rê chuột — đoạn nổi lên, các đoạn khác mờ đi, bảng chi tiết hiện phía trên */
#view-orderprepare .cap-track{ overflow: visible; position: relative; }
#view-orderprepare .cap-seg{ position: relative; overflow: visible; cursor: default; transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease; }
#view-orderprepare .cap-track:hover .cap-seg{ opacity: .45; }
#view-orderprepare .cap-track .cap-seg:hover, #view-orderprepare .cap-track .cap-seg:focus{ opacity: 1; transform: translateY(-3px) scaleY(1.12); box-shadow: 0 6px 16px rgba(0,0,0,.14); z-index: 2; outline: none; }
#view-orderprepare .cap-seg:first-child{ border-radius: 8px 0 0 8px; } #view-orderprepare .cap-seg:last-child{ border-radius: 0 8px 8px 0; } #view-orderprepare .cap-seg:only-child{ border-radius: 8px; }
#view-orderprepare .cap-tip{ position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px); min-width: 260px; max-width: 360px; padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 10px 28px rgba(0,0,0,.16); color: var(--text-primary); font-size: 12px; font-weight: 400; white-space: normal; text-align: left; opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; z-index: 20; }
#view-orderprepare .cap-seg:hover .cap-tip, #view-orderprepare .cap-seg:focus .cap-tip{ opacity: 1; transform: translateX(-50%) translateY(0); }
#view-orderprepare .cap-seg:first-child .cap-tip{ left: 0; transform: translateY(4px); } #view-orderprepare .cap-seg:first-child:hover .cap-tip{ transform: translateY(0); }
#view-orderprepare .cap-seg:last-child:not(:first-child) .cap-tip{ left: auto; right: 0; transform: translateY(4px); } #view-orderprepare .cap-seg:last-child:not(:first-child):hover .cap-tip{ transform: translateY(0); }
#view-orderprepare .cap-tip-title{ margin: 0 0 6px; font-weight: 600; font-size: 12.5px; }
#view-orderprepare .cap-tip-row{ display: flex; justify-content: space-between; gap: 14px; padding: 3px 0; border-top: 1px dashed var(--border); }
#view-orderprepare .cap-tip-row span{ color: var(--text-secondary); } #view-orderprepare .cap-tip-row b{ font-weight: 600; white-space: nowrap; }
#view-orderprepare .cap-bar{ padding-top: 4px; }
#view-orderprepare .cap-tip-row b{ text-align: right; }

/* Chi phí trong thẻ Đơn hàng — ngăn cách bằng 1 đường kẻ */
#view-orderprepare .op-sum-cost[hidden]{display:none;}
#view-orderprepare .op-kv > div.op-sum-cost{flex-direction:column;justify-content:flex-start;gap:7px;border-top:1px dashed var(--border);padding-top:8px;margin-top:2px;}

/* Pop-up Thu tiền (27/10/2026) */
.app-modal.modal-pay{ max-width: 460px; }
.modal-pay .pp-remain{ display:flex; justify-content:space-between; align-items:baseline; padding:10px 12px; margin-bottom:14px; border-radius:var(--radius); background:var(--surface-muted); }
.modal-pay .pp-remain span{ font-size:12px; color:var(--text-secondary); }
.modal-pay .pp-remain b{ font-size:16px; font-weight:700; color:var(--danger); }
.modal-pay .pp-money{ position:relative; }
.modal-pay .pp-money input{ width:100%; padding-right:30px; text-align:right; font-variant-numeric:tabular-nums; }
.modal-pay .pp-money span{ position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:13px; }
.modal-pay .field select, .modal-pay .field input{ width:100%; }

/* ===== Khuyến mãi — bố cục mới (27/10/2026) ===== */
.kpi-grid.pm-kpi-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
#view-promodetail .kpi-grid.pm-kpi-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.pm-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:4px 0 12px; }
.pm-toolbar-right{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pm-toolbar-right .search-box{ min-width:240px; }
.pm-toolbar-right select{ width:auto; min-width:190px; }
.pm-tabs{ overflow-x:auto; max-width:100%; }
.pm-tabs button{ font-size:12.5px; padding:6px 14px; white-space:nowrap; }
.pm-list tbody td{ vertical-align: top; }
.pm-list tr.pm-row{ cursor:pointer; }
.pm-list tr.pm-row:hover td{ background: var(--surface-muted); }
.pm-ell{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.pm-list td{ max-width: 0; }
.pm-list td.sd-nowrap, .pm-list td:last-child, .pm-list td:first-child{ max-width:none; }
.pm-usage{ display:flex; align-items:center; gap:8px; }
.pm-bar{ display:inline-block; width:64px; height:5px; border-radius:999px; background: var(--border); overflow:hidden; flex-shrink:0; }
.pm-bar i{ display:block; height:100%; background: var(--accent); border-radius:999px; }
/* Form: cột chính + khung xem trước dính bên phải */
.pm-form-layout{ display:grid; grid-template-columns: minmax(0,1fr) 320px; gap:16px; align-items:start; }
.pm-form-side{ position: sticky; top: 16px; }
.pm-preview .op-kv{ font-size:13px; }
.pm-preview .op-kv > div > span{ font-size:12px; color: var(--text-secondary); }
.pm-preview .op-kv > div > b{ font-size:13px; font-weight:600; text-align:right; }
.pm-preview-scope{ border-top:1px dashed var(--border); margin-top:10px; padding-top:10px; }
.pm-budget-row{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap:16px; align-items:end; margin-top:16px; }
@media (max-width: 1100px){ .pm-form-layout{ grid-template-columns: 1fr; } .pm-form-side{ position: static; } }
@media (max-width: 760px){ .pm-budget-row{ grid-template-columns: 1fr; } .kpi-grid.pm-kpi-3{ grid-template-columns: 1fr; } }
/* Chi tiết */
.pd-title-row #pdStatus{ display:inline-block; margin-left:10px; vertical-align:middle; }
.pd-title-row .status-pill{ font-size:12px; }
.pd-info-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px; }
.pd-info-grid .op-section{ margin-bottom:0; }
.pd-info-grid .op-kv > div > span{ font-size:12px; color: var(--text-secondary); }
.pd-info-grid .op-kv > div > b{ font-size:13px; font-weight:600; text-align:right; }
.pd-tier-table{ margin-top:12px; }
.pd-meta{ margin:10px 0 18px; }
@media (max-width: 900px){ .pd-info-grid{ grid-template-columns: 1fr; } }

/* Khuyến mãi B2B (27/10/2026): KPI 5 ô, cảnh báo, hàng giới hạn, 4 loại */
.kpi-grid.pd-kpi-5{ grid-template-columns: repeat(5, minmax(0,1fr)); }
.pd-kpi-sub{ display:block; font-size:12px; font-weight:500; color: var(--text-secondary); margin-top:2px; }
.pd-warn{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.pd-warn .pm-preview-warn{ margin:0; }
#view-promoform .pm-type-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.pm-limit-row{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; align-items:end; margin-top:16px; }
.pm-preview-warn{ display:flex; gap:8px; align-items:flex-start; margin-top:12px; padding:10px 12px; border-radius: var(--radius); background: var(--warning-bg); color: var(--warning); font-size:12.5px; }
.pm-preview-warn[hidden]{ display:none; }
.pm-preview-warn i{ font-size:16px; margin-top:1px; }
.pd-inline-btn{ width:auto !important; display:inline-flex; margin:0 !important; }
#pdOrdersActions .hesocol{ font-size:12px; }
@media (max-width: 1100px){ .kpi-grid.pd-kpi-5{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 760px){ .pm-limit-row{ grid-template-columns: 1fr; } .kpi-grid.pd-kpi-5{ grid-template-columns: 1fr 1fr; } }

.pd-warn-more{ margin-left:4px; font-weight:600; color:inherit; text-decoration:underline; }
.pd-warn-list{ margin-top:6px; display:grid; gap:2px; }
.pd-warn-list > div{ display:flex; gap:12px; justify-content:space-between; max-width:520px; }
#pmFormHint[hidden]{ display:none; }
/* 28/10/2026 — Tiền sale đã thu, chưa nộp */
.sale-holding{ color: var(--warning); font-weight: 600; }
.op-pay-hist.is-holding{ align-items: center; }
.op-hold-right{ display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.op-hold-right .small{ white-space: nowrap; }
.sc-list{ display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; max-height: 240px; overflow: auto; }
.sc-item{ display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-scale-md, 8px); font-size: 13px; cursor: pointer; }
.sc-item > span{ flex: 1; min-width: 0; }
.sc-item input{ width: auto; margin: 0; }
/* 28/10/2026 — ô chọn tròn / ô tích không dùng quầng sáng focus của ô nhập chữ (bị bóng xanh to khi bấm); bàn phím vẫn có viền focus */
input[type="radio"]:focus, input[type="checkbox"]:focus{ box-shadow: none; }
input[type="radio"]:focus-visible, input[type="checkbox"]:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
/* 28/10/2026 — đơn con nhiều cấp: mỗi cấp thụt thêm 18px */
tr.order-child-deep td:nth-child(2){ padding-left: calc(30px + (var(--child-depth) - 1) * 18px); }
tr.order-child-deep td:nth-child(2):before{ left: calc(12px + (var(--child-depth) - 1) * 18px); }
/* 28/10/2026 — hàng tặng trong bảng chia đơn: không nhập, đi theo đơn con cuối */
.ms-table td.ms-gift-cell{ text-align: right; padding-right: 22px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* 03/11/2026 — Chi phí › Chi phí cố định: định mức chỉ xem, sửa qua nút bút */
.cost-rate-head{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.cost-rate-kv{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 03/11/2026 — Hoa hồng theo chính sách */
.cm-head-left, .cm-head-right{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cp-factor{ border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px; background: var(--surface); }
.cp-factor-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cp-grid-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cp-grid-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cp-tiers{ margin: 4px 0 8px; } .cp-tiers input{ text-align: right; }
@media (max-width: 760px){ .cp-grid-4, .cp-grid-3{ grid-template-columns: 1fr; } }
.emp-pay-title{ font-weight: 600; font-size: 13.5px; margin: 6px 0 8px; color: var(--text-secondary); }
#cmTableBody tr.cm-row-empty td{ color: var(--text-muted); }
/* 03/11/2026 — Trang Chính sách hoa hồng: danh sách · form · diễn giải & tính thử */
.cpp-lock{ display: flex; gap: 8px; align-items: center; padding: 9px 12px; border-radius: var(--radius); background: var(--warning-bg, #fff7e6); color: var(--text-secondary); font-size: 13px; margin: -4px 0 12px; }
.cpp-sec{ font-weight: 600; margin: 14px 0 8px; }
.cpp-to{ color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cpp-tier-foot{ display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12.5px; }
.cpp-people{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cpp-chip{ padding: 5px 10px; border-radius: 999px; background: var(--surface-muted); font-size: 13px; } .cpp-chip em{ font-style: normal; color: var(--text-muted); font-size: 12px; }
.cpp-assign{ display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .cpp-assign select{ width: auto; min-width: 240px; } .cpp-assign input{ width: auto; }
.cpp-foot{ display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.cpp-foot > div{ display: flex; gap: 8px; }
.cpp-trial-res{ display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--radius); background: var(--surface-muted); }
.cpp-trial-res span{ color: var(--text-secondary); font-size: 12.5px; } .cpp-trial-res b{ font-size: 18px; }
.cpp-tpl-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cpp-tpl{ display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; }
.cpp-tpl:hover{ border-color: var(--accent); } .cpp-tpl span{ font-size: 12.5px; color: var(--text-secondary); } .cpp-tpl em{ font-style: normal; font-size: 12px; color: var(--text-muted); }
.ap-tabs{ margin: 0 0 16px; }
/* 03/11/2026 — Chính sách hoa hồng: gọn hơn */
.cpp-frow{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.cpp-frow select{ width: auto; min-width: 200px; } .cpp-frow .cpp-fkind{ min-width: 110px; }
.cpp-fx{ font-weight: 700; color: var(--text-muted); }
.cpp-flabel{ width: 180px !important; font-weight: 600; }
.cpp-grace{ display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); margin: 0; } .cpp-grace input{ width: 64px !important; }
.cpp-fdel{ margin-left: auto; }
.cp-factor .link-btn{ background: none; border: none; padding: 2px 0; color: var(--accent-hover, var(--accent)); font-size: 13px; cursor: pointer; width: auto; box-shadow: none; }
.cpp-formula{ font-weight: 600; }

/* 04/11/2026 — Chính sách hoa hồng: Danh sách → Chi tiết 1 cột */
.cpp-dhead{ display: flex; align-items: center; justify-content: flex-start; gap: 14px; }
.cpp-dhead > button.small, .cpp-verrow button.small, .cpp-assign button.small{ width: auto; flex: 0 0 auto; margin-top: 0; white-space: nowrap; }
.cpp-verrow{ display: flex; gap: 8px; align-items: center; } .cpp-verrow select{ flex: 1; min-width: 0; }
.cpp-desc{ padding: 12px 14px; border-radius: var(--radius); background: var(--surface-muted); margin-bottom: 14px; font-size: 13px; }
.cpp-desc p{ margin: 0 0 4px; line-height: 1.5; } .cpp-desc p:last-child{ margin-bottom: 0; }
.cpp-trialbox > summary{ cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; margin: 0; }
.cpp-trialbox > summary::-webkit-details-marker{ display: none; }
.cpp-trialbox > summary::after{ content: '\203A'; margin-left: auto; font-size: 18px; color: var(--text-muted); transition: transform .15s; }
.cpp-trialbox[open] > summary::after{ transform: rotate(90deg); }
.cpp-trialbox[open] > summary{ margin-bottom: 14px; }
.cpp-trial{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; align-items: end; }
.cpp-trial .field{ margin: 0; }
.cpp-lock{ margin: 0 0 12px; }

/* 04/11/2026 — Pop-up thống nhất: có hành động chính thì nút đóng là nút phụ "Hủy" bên trái; form nhỏ (định mức, điện nước, phiếu chi) dùng khung hẹp */
.app-modal.has-primary #modalClose{ order: -1; margin-right: auto; background: var(--surface); color: var(--text-primary); border: 1px solid var(--border-strong); box-shadow: none; }
.app-modal.has-primary #modalClose:hover{ background: var(--surface-soft); }
.app-modal.wide:is(:has(#crPacking), :has(#ubSave), :has(#spSave), :has(#cpSave), :has(#acpSave), :has(#expSave)){ max-width: 680px; }
.cm-head-right button.small{ width: auto; margin-top: 0; white-space: nowrap; }
.sd-sec td.num, .sd-sec th.num{ text-align: right; }
/* 04/11/2026 — Nhà cung cấp: nút "Trả tiền" + bút sửa cùng hàng (không tràn cột); tiền trong bảng phiếu nhập không xuống dòng */
#supTableBody button.small{ width: auto; margin-top: 0; }
#supReceiptTableBody td[style*="text-align:right"], #view-suppliers th{ white-space: nowrap; }

/* 10/11/2026 — Chính sách hoa hồng: bậc dạng "≥ từ và < đến", hệ số đọc thành câu */
.cpp-base{ max-width: 420px; margin-bottom: 14px; }
.cpp-fx{ font-weight: 600; color: var(--text-primary); }
.cpp-fsub{ display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 0 0 10px; }
.cpp-fsub label{ display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 400; color: var(--text-secondary); }
.cpp-fsub select{ width: auto; min-width: 220px; }
.cpp-fsub .cpp-flabel{ width: 140px !important; font-weight: 400; }
.cpp-range{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.cpp-range input{ width: 170px !important; }
.cpp-op, .cpp-unit{ color: var(--text-secondary); }
.cpp-upper{ white-space: nowrap; }
.cpp-ex{ color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cpp-desc .cpp-formula{ margin: 0; }
@media (max-width: 760px){
  .cpp-range{ gap: 4px 6px; } .cpp-range input{ width: 120px !important; }
  .cp-tiers input[data-t="value"]{ min-width: 64px; }
  .cpp-fsub select{ min-width: 0; }
}

/* 10/11/2026 — Chính sách hoa hồng đơn giản: Tính theo (Thực thu / Doanh số) + bảng bậc Từ · Đến (≤) · % */
.cpp-basis{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 640px; margin-bottom: 14px; }
.cpp-basis-opt{ display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 10px 36px; position: relative; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; margin: 0; font-weight: 400; }
.cpp-basis-opt input{ position: absolute; left: 12px; top: 13px; width: auto; margin: 0; }
.cpp-basis-opt b{ font-size: 14px; color: var(--text-primary); } .cpp-basis-opt span{ font-size: 12.5px; color: var(--text-secondary); }
.cpp-basis-opt.active{ border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.cpp-tt td{ vertical-align: middle; } .cpp-from{ white-space: nowrap; font-variant-numeric: tabular-nums; }
.cpp-to-cell{ display: flex; align-items: center; gap: 6px; } .cpp-to-cell input{ max-width: 200px; }
.cpp-tt input[data-rate]{ max-width: 90px; }
.cpp-note{ display: flex; gap: 6px; align-items: flex-start; margin: 10px 0 0; font-size: 12.5px; color: var(--text-secondary); }
@media (max-width: 760px){ .cpp-basis{ grid-template-columns: 1fr; } .cpp-to-cell input{ max-width: none; min-width: 0; } }
.field .cpp-basis-opt{ display: flex; } .cpp-basis-opt b, .cpp-basis-opt span{ display: block; }

/* 10/11/2026 — Chính sách hoa hồng: bảng Nhân viên áp dụng (chuẩn bảng chung) */
.cpp-people-head{ margin-top: 26px; }
.cpp-people-head .cpp-assign{ margin: 0; }

/* 10/11/2026 — Chính sách hoa hồng: nút gạt trạng thái theo ngày */
.cpp-status{ display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 14px; }

/* 10/11/2026 — Chính sách hoa hồng: pop-up gán nhiều nhân viên + xác nhận lưu */
.cpp-confirm{ margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.cpp-asg-top{ display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 0 12px; margin-bottom: 8px; } .cpp-asg-top .field{ margin-bottom: 0; }
@media (max-width: 560px){ .cpp-asg-top{ grid-template-columns: 1fr; } }
.cpp-people-head > button.small{ width: auto; flex: 0 0 auto; margin-top: 0; white-space: nowrap; }

/* 10/11/2026 — pop-up gán nhân viên: bảng chuẩn (table-wrap) cuộn trong pop-up */
.cpp-asg-list{ max-height: 360px; overflow-y: auto; border: none; }
.cpp-asg-list thead th{ position: sticky; top: 0; z-index: 1; }
.cpp-asg-list tr.cpp-asg-row{ cursor: pointer; } .cpp-asg-list tr[hidden]{ display: none; }
.cpp-asg-list input[type=checkbox]{ width: auto; margin: 0; }

/* 11/11/2026 — Kế toán › Phiếu nhập chờ giá */
.pp-inv{ display: grid; grid-template-columns: minmax(0,1fr) 200px; gap: 0 12px; max-width: 560px; margin-bottom: 4px; }
@media (max-width: 560px){ .pp-inv{ grid-template-columns: 1fr; } }

/* 11/11/2026 — nút ẩn theo quyền */
#btnNewOrder[hidden]{ display: none !important; }

/* 11/11/2026 — Pop-up Tái sản xuất: thông tin hàng · thẻ cách xử lý · bảng kết quả dự kiến */
.tsx-head{ margin-bottom: 14px; grid-template-columns: minmax(0,2fr) minmax(0,.6fr) minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.4fr); }
.tsx-sub{ font-weight: 400; font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.tsx-ok{ color: var(--accent-hover, var(--accent)); }
.tsx-grid{ display: grid; grid-template-columns: 180px 220px minmax(0, 1fr); gap: 0 14px; }
.tsx-modes{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tsx-mode{ display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; margin: 0; font-weight: 400; }
.tsx-mode input{ width: auto; margin: 3px 0 0; }
.tsx-mode b{ display: block; font-size: 14px; color: var(--text-primary); } .tsx-mode em{ display: block; font-style: normal; font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }
.tsx-mode.active{ border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.tsx-sec{ font-weight: 600; font-size: 13px; margin: 18px 0 8px !important; padding-top: 4px; } .tsx-modes{ margin-bottom: 4px; }
.tsx-plan td{ vertical-align: top; } .tsx-plan td.num, .tsx-plan th.num{ text-align: right; white-space: nowrap; }
.tsx-bad{ color: var(--danger); }
@media (max-width: 900px){ .tsx-head{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .tsx-grid, .tsx-modes{ grid-template-columns: 1fr; } }

/* ===== Quản lý bao bì › 2 tab (11/11/2026) — js/35-packaging-stock.js ===== */
#pkgTableBody .pkg-size-count{ background: none; border: none; box-shadow: none; width: auto; padding: 2px 0; color: var(--accent-hover, var(--accent)); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; }
#pkgTableBody .pkg-size-count:hover{ text-decoration: underline; }
.pks-filters{ align-items: flex-end; }
.pks-filters .pks-f{ display: flex; flex-direction: column; gap: 4px; flex: 0 1 190px; margin: 0; }
.pks-filters .pks-f span{ font-size: 11.5px; color: var(--text-secondary); }
.pks-filters .pks-f input, .pks-filters .pks-f select{ width: 100%; min-width: 0; }
.pks-filters .pks-zero{ margin-left: auto; padding-bottom: 8px; }
.pks-chip{ display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 12px; margin-bottom: 2px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface-soft); font-size: 12.5px; }
.pks-chip button{ display: inline-flex; align-items: center; justify-content: center; width: 20px !important; height: 20px; padding: 0 !important; border: none !important; border-radius: 50%; background: transparent; box-shadow: none; cursor: pointer; }
.pks-chip button:hover{ background: var(--surface-muted); }
.pks-table th.num, .pks-table td.num{ text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pks-table tfoot td{ border-top: 1.5px solid var(--border-strong); background: var(--surface-soft); }
.pks-table tr.pks-off td{ opacity: .55; }
#pksMode button{ font-size: 12px; padding: 4px 12px; }
.pks-filters .pks-zero input{ flex: 0 0 auto; min-width: 0; width: auto; margin: 0; }
.pks-table td:nth-child(3){ white-space: nowrap; }
.pks-table td:nth-child(2){ white-space: nowrap; }
.pks-table td:nth-child(5) .pill{ white-space: normal; text-align: left; }

/* ===== Cước tách 2 dòng + công nợ NCC / đơn vị dịch vụ (12/11/2026) — js/28-carriers.js, js/36-partner-ledger.js ===== */
.sd-logi-grid.sd-logi-2{ grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
@media (max-width: 640px){ .sd-logi-grid.sd-logi-2{ grid-template-columns: 1fr; } }
.sup-overdue{ color: var(--danger) !important; }
.pl-cancel{ background: none !important; border: none !important; box-shadow: none !important; width: auto !important; padding: 0 0 0 6px !important; color: var(--danger); font-size: 12px; cursor: pointer; text-decoration: underline; }
.pl-cancel-note{ color: var(--danger); font-size: 11.5px; margin-top: 2px; }
.sp-table-wrap tr.pl-cancelled td{ opacity: .6; }
.pl-month{ padding: 3px 8px !important; font-size: 13px !important; width: auto !important; min-width: 0 !important; }
#supTableBody td[style*="text-align:right"], #supReceiptTableBody td[style*="text-align:right"], #supAdjTableBody td[style*="text-align:right"]{ white-space: nowrap; }
#supReceiptTableBody td.sku-mono{ white-space: nowrap; }
.pl-has-tip{ cursor: help; text-decoration: underline dotted var(--text-muted); text-underline-offset: 3px; }
#supTableBody td:nth-child(3){ min-width: 150px; }
#supTableBody .cr-actions{ white-space: nowrap; }
/* Bảng NCC 11 cột: thu hẹp đệm ngang để vừa màn hình, không cần cuộn ngang */
.sup-table thead th, .sup-table tbody td{ padding-left: 5px; padding-right: 5px; }
.sup-table thead th:first-child, .sup-table tbody td:first-child{ padding-left: 12px; }
.sup-table .cr-actions{ gap: 4px; }

/* ===== Trang Nhà cung cấp & vận chuyển — bố cục mục (12/11/2026) — js/38-partner-page.js ===== */
.pl-toolbar{ display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.pl-tools{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pl-tools .search-box{ min-width: 260px; }
.pl-tools .pl-filter{ width: auto; min-width: 170px; }
.pl-tools #btnNewSupAdj{ width: auto; white-space: nowrap; }
.pl-views button{ font-size: 12.5px; padding: 6px 14px; display: inline-flex; align-items: center; }
.pl-kpi-link{ text-align: left; cursor: pointer; font: inherit; color: inherit; width: 100%; }
.pl-kpi-link:hover{ border-color: var(--border-strong); }
.pl-kpi-link .kpi-label i{ font-size: 13px; vertical-align: -2px; color: var(--text-muted); }
.sup-table td.pl-desc{ min-width: 180px; white-space: normal; }
.sup-table tr.pl-row-off td{ color: var(--text-muted); }
.sup-table tfoot td{ padding: 10px 5px; border-top: 1.5px solid var(--border-strong); background: var(--surface-soft); white-space: nowrap; }
.sup-table tfoot td:first-child{ padding-left: 12px; }
.sup-table td .status-pill{ white-space: nowrap; }
@media (max-width: 760px){ .pl-tools, .pl-tools .search-box{ width: 100%; min-width: 0; } }
.sup-table tbody td, .sup-table tfoot td{ font-size: 12.4px; }
.sup-table thead th{ font-size: 11px; }
.sup-table td .status-pill{ padding: 3px 8px; gap: 4px; }
.pl-view[data-view="receipts"] .sup-table thead th, .pl-view[data-view="receipts"] .sup-table tbody td{ padding-left: 4px; padding-right: 4px; }
.pl-view[data-view="receipts"] .sup-table thead th:first-child, .pl-view[data-view="receipts"] .sup-table tbody td:first-child{ padding-left: 12px; }

/* ===== Trang chi tiết NCC & vận chuyển (12/11/2026) — js/39-partner-detail.js ===== */
#view-partnerdetail .pd-info-grid{ margin-bottom: 20px; }
#view-partnerdetail .page-head-search{ gap: 8px; }
.pt-section-head{ margin-top: 4px; }
.pt-head-right{ display: flex; align-items: center; gap: 8px; }
.pt-link{ color: var(--accent-hover, var(--accent)); font-weight: 600; text-decoration: none; }
.pt-link:hover{ text-decoration: underline; }
.sup-table tr.pt-row-sum td{ background: var(--surface-soft); }
.pt-hint{ margin: 0; align-self: center; }
#view-partnerdetail .sup-table + .pt-section-head, #view-partnerdetail .table-wrap{ margin-bottom: 20px; }
.pd-title-row #ptStatus{ display: inline-block; margin-left: 10px; vertical-align: middle; }
.pd-title-row #ptStatus .status-pill{ font-size: 12px; }
.sd-meta.pl-modal-meta{ grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }