/* ===== Hệ thống lên đơn hải sản — giao diện ===== */
:root {
  /* Màu chủ đạo: xanh dương sáng, vàng, trắng */
  --blue: #0077e6;
  --blue-2: #2b95f5;
  --blue-deep: #0059b3;
  --blue-soft: #e4f1ff;
  --yellow: #ffc720;
  --yellow-2: #ffd85c;
  --yellow-soft: #fff6d6;
  --white: #ffffff;
  /* Màu phụ: đỏ, cam, nâu */
  --red: #e0342b;
  --red-soft: #fde7e5;
  --orange: #f57c00;
  --orange-soft: #ffefd9;
  --brown: #8b5a2b;
  --brown-soft: #f3e8dc;

  --bg: #f3f8fd;
  --surface: #ffffff;
  --surface-2: #f6faff;
  --ink: #13263a;
  --ink-2: #3b5168;
  --muted: #6a7d90;
  --line: #d8e4ef;
  --line-2: #eaf1f7;
  --deep: var(--blue-deep);
  --deep-2: #0a6cd0;
  --brand: var(--blue);
  --brand-2: var(--blue-2);
  --brand-soft: var(--blue-soft);
  --ice: #cfe5fb;
  --warn: #c25f00;
  --warn-soft: var(--orange-soft);
  --danger: var(--red);
  --danger-soft: var(--red-soft);
  --ok: #2e8b4e;
  --ok-soft: #e2f3e8;
  --radius: 10px;
  --radius-sm: 7px;
  --shadow: 0 1px 2px rgba(0, 89, 179, .06), 0 4px 14px rgba(0, 89, 179, .05);
  --sidebar: 236px;
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: 14px; line-height: 1.45; color: var(--ink);
  background: var(--bg); -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand); }
svg { width: 18px; height: 18px; flex: none; }
[hidden] { display: none !important; }
.num, td.num, .tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.grow { flex: 1; }
.row { display: flex; align-items: center; gap: 8px; }
.row.wrap { flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 12px; }
:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; }

/* ----- Đăng nhập ----- */
.login { min-height: 100dvh; display: grid; place-items: center; padding: 24px; background:
  radial-gradient(1200px 500px at 50% 110%, #cfe5fb 0, transparent 60%), var(--deep); }
.login-card { width: min(380px, 100%); background: var(--surface); border-radius: 16px; padding: 32px 28px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.login-card h1 { margin: 16px 0 4px; font-size: 22px; }
.login-card p { margin: 0 0 20px; }
.form-error { color: var(--danger); min-height: 1.2em; font-size: 13px; margin: 4px 0 8px !important; }

/* ----- Khung ứng dụng ----- */
.app { display: flex; flex-direction: column; min-height: 100dvh; }
/* Thanh menu ngang trên cùng (trước đây là sidebar bên trái) */
.sidebar {
  position: sticky; top: 0; z-index: 30; background: var(--deep); color: #ffffff;
  display: flex; flex-direction: row; align-items: center; gap: 20px; padding: 0 20px; height: 60px;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 0; flex: none; }
.brand strong { display: block; color: #fff; font-size: 15px; letter-spacing: .1px; white-space: nowrap; }
.brand small { color: #d6e9ff; font-size: 11.5px; white-space: nowrap; }
.brand-mark { width: 36px; height: 36px; border-radius: 10px; background: var(--brand); color: #ffffff; display: grid; place-items: center; }
.brand-mark svg { width: 24px; height: 24px; }
.brand-mark.lg { width: 52px; height: 52px; border-radius: 14px; background: var(--deep); }
.brand-mark.lg svg { width: 34px; height: 34px; }
.nav { display: flex; flex-direction: row; align-items: center; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; color: #eaf4ff;
  text-decoration: none; font-weight: 500; position: relative; white-space: nowrap; flex: none;
}
.nav a:hover { background: var(--deep-2); color: #fff; }
.nav a.active { background: #fff; color: var(--deep); }
.nav .badge { margin-left: 2px; }
.badge { background: #e0342b; color: #fff; font-size: 11px; font-weight: 700; border-radius: 99px; padding: 1px 7px; min-width: 20px; text-align: center; }
.sidebar-foot { flex: none; font-size: 12px; color: #d6e9ff; display: flex; gap: 8px; align-items: center; white-space: nowrap; }
@media (max-width: 1360px) { .sidebar-foot { display: none; } }
@media (max-width: 1180px) { .brand small { display: none; } .nav a svg { display: none; } .nav a { padding: 8px 10px; } }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #3fc28a; box-shadow: 0 0 0 3px rgba(63,194,138,.18); flex: none; }

.main { min-width: 0; flex: 1; }
.view { padding: 22px 28px 48px; max-width: 1760px; margin: 0 auto; }
.page-head { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head h1 { font-size: 22px; margin: 0; letter-spacing: -.2px; }
.page-head .sub { color: var(--muted); font-size: 13px; }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.tabbar { display: none; }

/* ----- Nút & ô nhập ----- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 14px;
  border-radius: 8px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; cursor: pointer;
  white-space: nowrap; text-decoration: none; color: var(--ink); transition: background .12s, border-color .12s;
}
.btn:hover { border-color: #a9c7e6; background: var(--surface-2); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-2); }
.btn.deep { background: var(--deep); border-color: var(--deep); color: #fff; }
.btn.danger { color: var(--danger); }
.btn.danger:hover { background: var(--danger-soft); border-color: #f5bdb8; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--line-2); }
.btn.sm { height: 31px; padding: 0 10px; font-size: 13px; border-radius: 7px; }
.btn.icon { width: 38px; padding: 0; }
.btn.icon.sm { width: 31px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.icon-btn { border: 0; background: transparent; width: 30px; height: 30px; border-radius: 7px; display: inline-grid; place-items: center; cursor: pointer; color: var(--muted); }
.icon-btn:hover { background: var(--line-2); color: var(--ink); }
.icon-btn.danger:hover { background: var(--danger-soft); color: var(--danger); }
.icon-btn svg { width: 16px; height: 16px; }

.field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.field > span { color: var(--ink-2); font-weight: 500; }
.input, .field input, .field select, .field textarea, select.input {
  height: 38px; border: 1px solid var(--line); border-radius: 8px; padding: 0 11px; background: var(--surface); width: 100%; min-width: 0;
}
.field textarea, textarea.input { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.55; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand-2); outline: none; box-shadow: 0 0 0 3px rgba(0,119,230,.18); }
.search { position: relative; }
.search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); width: 16px; }
.search input { padding-left: 32px; }

.seg { display: inline-flex; background: var(--line-2); border-radius: 9px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; height: 32px; padding: 0 12px; border-radius: 7px; font-weight: 600; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,89,179,.12); }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--line); background: var(--surface); border-radius: 99px; height: 30px; padding: 0 12px;
  font-size: 13px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2);
}
.chip b { font-weight: 600; color: var(--muted); font-size: 12px; }
.chip.on { background: var(--deep); border-color: var(--deep); color: #fff; }
.chip.on b { color: #d6e9ff; }

.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; border-radius: 5px; padding: 1px 7px; background: var(--line-2); color: var(--ink-2); white-space: nowrap; }
.tag.ok { background: var(--ok-soft); color: var(--ok); }
.tag.warn { background: var(--warn-soft); color: var(--warn); }
.tag.danger { background: var(--danger-soft); color: var(--danger); }
.tag.brand { background: var(--brand-soft); color: var(--brand); }
.tag.aios { background: #ffefd9; color: #c25f00; }

/* ----- Thẻ / khối ----- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.card-pad { padding: 18px; }
.card-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.card-head h2, .card-head h3 { font-size: 15px; margin: 0; }
.card-head .actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.empty { padding: 36px 20px; text-align: center; color: var(--muted); }
.empty strong { display: block; color: var(--ink); font-size: 15px; margin-bottom: 4px; }

/* ----- Điều hướng ngày ----- */
.datenav { display: inline-flex; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.datenav .dn-label { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 12px; min-width: 150px; line-height: 1.2; cursor: pointer; }
.datenav .dn-label strong { font-size: 14px; }
.datenav .dn-label small { color: var(--muted); font-size: 11.5px; }
.datenav .dn-label input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.datenav .icon-btn { width: 32px; height: 32px; }
.dn-quick { display: inline-flex; gap: 4px; }
.rel { color: var(--brand); font-weight: 600; }

/* ----- Bảng chung ----- */
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 9px 10px; border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.tbl td { padding: 8px 10px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.tbl tr:hover td { background: #f7fbff; }
.tbl th.num, .tbl td.num { text-align: right; }
.tbl tr.click { cursor: pointer; }

/* ----- Dashboard ----- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { padding: 16px 18px; }
.kpi .k-label { color: var(--muted); font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.kpi .k-value { font-size: 28px; font-weight: 700; letter-spacing: -.5px; margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.kpi .k-value small { font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.kpi .k-sub { font-size: 12.5px; color: var(--muted); }
.kpi:first-child { background: var(--deep); border-color: var(--deep); color: #fff; }
.kpi:first-child .k-label, .kpi:first-child .k-sub { color: #d6e9ff; }
.delta { font-weight: 600; font-size: 12.5px; }
.delta.up { color: var(--ok); }
.delta.down { color: var(--danger); }
.kpi:first-child .delta.up { color: #ffe27a; }
.kpi:first-child .delta.down { color: #ffc1bb; }
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.rank { list-style: none; margin: 0; padding: 6px 0; }
.rank li { display: grid; grid-template-columns: 24px 1fr auto; gap: 4px 10px; align-items: center; padding: 8px 18px; }
.rank .r-n { color: var(--muted); font-weight: 600; font-size: 12.5px; }
.rank .r-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank .r-val { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.rank .r-bar { grid-column: 2 / 4; height: 5px; background: var(--line-2); border-radius: 3px; overflow: hidden; }
.rank .r-bar i { display: block; height: 100%; background: var(--brand); border-radius: 3px; }
.rank .r-meta { grid-column: 2 / 4; font-size: 12px; color: var(--muted); margin-top: -2px; }

/* Lịch */
.cal-wrap { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); }
.cal { padding: 14px 18px 18px; border-right: 1px solid var(--line-2); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-dow { font-size: 12px; font-weight: 600; color: var(--muted); text-align: center; padding: 4px 0; }
.cal-day {
  min-height: 92px; border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 7px; background: var(--surface);
  cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 2px; font-size: 12px; position: relative;
}
.cal-day:hover { border-color: #9cc3ea; }
.cal-day .d-num { font-weight: 700; font-size: 13px; color: var(--ink-2); }
.cal-day.other { opacity: .38; }
.cal-day.past .d-num { color: var(--muted); }
.cal-day.today { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.cal-day.today .d-num::after { content: 'Hôm nay'; font-size: 10.5px; font-weight: 600; color: var(--brand); margin-left: 5px; }
.cal-day.sel { background: var(--brand-soft); border-color: var(--brand); }
.cal-day.has.future { background: #f2f8ff; }
.cal-day .d-cnt { font-weight: 700; color: var(--deep); font-size: 13px; }
.cal-day .d-rev { color: var(--muted); font-variant-numeric: tabular-nums; }
.cal-day .d-names { color: var(--ink-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; margin-top: 2px; }
.cal-detail { padding: 16px 18px; max-height: 640px; overflow: auto; }
.cal-detail h3 { margin: 0 0 2px; font-size: 17px; }
.cust-block { border: 1px solid var(--line-2); border-radius: 8px; margin-top: 10px; }
.cust-block header { display: flex; gap: 8px; align-items: center; padding: 8px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line-2); border-radius: 8px 8px 0 0; }
.cust-block header strong { flex: 1; }
.cust-block ul { list-style: none; margin: 0; padding: 4px 12px 8px; }
.cust-block li { display: flex; gap: 8px; padding: 3px 0; font-size: 13px; }
.cust-block li span:first-child { flex: 1; }

.week-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line-2); }
.week-grid > div { padding: 14px 18px; border-right: 1px solid var(--line-2); }
.week-grid > div:last-child { border-right: 0; }
.week-grid .w-label { color: var(--muted); font-size: 12.5px; }
.week-grid .w-val { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; margin: 2px 0; }
.week-grid .w-prev { font-size: 12px; color: var(--muted); }
.chart { padding: 14px 18px 8px; }
.chart svg { width: 100%; height: auto; display: block; }
.legend { display: flex; gap: 16px; font-size: 12px; color: var(--muted); padding: 0 18px 14px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }

.period { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.period .p-nav { display: inline-flex; align-items: center; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 2px; }
.period .p-label { min-width: 150px; text-align: center; font-weight: 600; font-size: 13.5px; }
.period .p-custom { display: inline-flex; gap: 6px; align-items: center; }
.period .p-custom input { height: 36px; width: 150px; }

/* ----- Lên đơn ----- */
.compose { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.compose textarea { min-height: 210px; font-size: 14.5px; }
.compose .hint { font-size: 12.5px; color: var(--muted); }
.compose .hint code { background: var(--line-2); padding: 1px 5px; border-radius: 4px; font-family: inherit; }
.date-pick { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.date-pick input[type=date] { height: 36px; width: 160px; }
.date-pick .chosen { font-weight: 600; color: var(--brand); }

.inbox-item { display: flex; gap: 12px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--line-2); flex-wrap: wrap; }
.inbox-item:first-child { border-top: 0; }
.inbox-item .ib-icon { width: 36px; height: 36px; border-radius: 9px; background: #ffefd9; color: #c25f00; display: grid; place-items: center; }
.inbox-item .ib-main { flex: 1; min-width: 200px; }
.inbox-item .ib-main strong { display: block; }

.preview-order { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin-bottom: 12px; }
.po-head { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-bottom: 1px solid var(--line-2); flex-wrap: wrap; background: var(--surface-2); border-radius: var(--radius) var(--radius) 0 0; }
.po-head .po-num { width: 28px; height: 28px; border-radius: 7px; background: var(--deep); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; margin-top: 4px; }
.po-head .po-cust { flex: 1 1 260px; min-width: 0; }
.po-head .po-cust input { font-weight: 600; font-size: 15px; }
.po-head .po-code { flex: 0 1 200px; }
.match-note { font-size: 12px; margin-top: 4px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sugg { border: 1px dashed var(--brand); color: var(--brand); background: transparent; border-radius: 6px; font-size: 12px; padding: 1px 8px; cursor: pointer; font-weight: 600; }
.sugg:hover { background: var(--brand-soft); }

table.edit { width: 100%; border-collapse: collapse; }
.edit th { font-size: 12px; color: var(--muted); font-weight: 600; text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.edit td { padding: 4px 4px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.edit th.num, .edit td.num { text-align: right; }
.cell {
  width: 100%; height: 34px; border: 1px solid transparent; border-radius: 6px; padding: 0 8px; background: transparent; min-width: 0;
}
.cell:hover { border-color: var(--line); background: var(--surface); }
.cell:focus { border-color: var(--brand-2); background: #fff; outline: none; box-shadow: 0 0 0 3px rgba(0,119,230,.15); }
.cell.num { text-align: right; font-variant-numeric: tabular-nums; }
.cell.strong { font-weight: 600; }
.cell.warn { background: var(--warn-soft); }
.cell.bad { background: var(--danger-soft); }
.amount { font-weight: 600; font-variant-numeric: tabular-nums; padding: 8px 8px 0; display: block; text-align: right; white-space: nowrap; }
.line-hint { font-size: 11.5px; padding: 0 8px 4px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.po-foot { display: flex; gap: 10px; align-items: center; padding: 8px 14px; flex-wrap: wrap; }
.po-foot .total { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.sticky-save {
  position: sticky; bottom: 0; z-index: 5; background: rgba(243,248,253,.94); backdrop-filter: blur(8px);
  padding: 12px 0; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--line);
}
.sticky-save .sum { font-weight: 600; }
.sticky-save .sum b { font-size: 17px; }
.sticky-save .actions { margin-left: auto; display: flex; gap: 8px; }
.warn-box { border: 1px solid #ffd29a; background: var(--warn-soft); color: #8a4400; border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-bottom: 12px; }
.warn-box ul { margin: 4px 0 0; padding-left: 18px; }

/* ----- Bảng đơn hàng ngày ----- */
.summary-strip { display: flex; gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; flex-wrap: wrap; }
.summary-strip > div { padding: 10px 18px; border-right: 1px solid var(--line-2); }
.summary-strip > div:last-child { border-right: 0; }
.summary-strip small { display: block; color: var(--muted); font-size: 12px; }
.summary-strip b { font-size: 18px; font-variant-numeric: tabular-nums; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.toolbar .search { width: 240px; }

table.orders { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); }
.orders th { position: sticky; top: 60px; z-index: 2; background: var(--deep); color: #ffffff; font-size: 12px; font-weight: 600; text-align: left; padding: 10px 8px; white-space: nowrap; }
.orders th:first-child { border-top-left-radius: var(--radius); }
.orders th:last-child { border-top-right-radius: var(--radius); }
.orders th.num { text-align: right; }
.orders td { border-bottom: 1px solid var(--line-2); padding: 2px 4px; vertical-align: middle; }
.orders tbody.cust td.c-stt, .orders tbody.cust td.c-name { vertical-align: top; padding-top: 8px; background: var(--surface-2); border-right: 1px solid var(--line-2); }
.orders tbody.cust:nth-of-type(even) td.c-stt, .orders tbody.cust:nth-of-type(even) td.c-name { background: #eef5fc; }
.orders tbody.cust tr.sub td { background: var(--surface-2); font-size: 12.5px; padding: 6px 8px; border-bottom: 2px solid var(--line); }
.orders .c-stt { width: 64px; text-align: center; }
.stt-in { width: 40px; height: 30px; text-align: center; font-weight: 700; font-size: 15px; border: 1px solid transparent; border-radius: 6px; background: transparent; }
.stt-in:hover, .stt-in:focus { border-color: var(--line); background: #fff; outline: none; }
.stt-move { display: flex; justify-content: center; gap: 0; margin-top: 2px; }
.stt-move .icon-btn { width: 24px; height: 22px; }
.orders .c-name { width: 210px; min-width: 170px; }
.orders .c-name .cn { font-weight: 700; font-size: 14px; line-height: 1.3; word-break: break-word; }
.orders .c-name .cn-meta { display: flex; gap: 4px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.route-sel { height: 26px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; padding: 0 4px; background: #fff; max-width: 120px; }
.orders .c-prod { min-width: 200px; }
.orders .c-qty { width: 76px; }
.orders .c-unit { width: 66px; }
.orders .c-price { width: 110px; }
.orders .c-amt { width: 118px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; padding-right: 10px; white-space: nowrap; }
.orders .c-note { min-width: 150px; }
.orders .c-act { width: 40px; text-align: center; }
.orders tr.line.flash td:not(.c-stt):not(.c-name) { animation: flash 1.6s ease-out; }
@keyframes flash { 0% { background: #fff1b8; } 100% { background: transparent; } }
.orders tr.line.saving .c-amt { opacity: .5; }
.orders tr.add-row td { background: #fbfdff; }
.orders tr.add-row .cell { border-color: var(--line); background: #fff; }
.add-link { border: 0; background: transparent; color: var(--brand); font-weight: 600; cursor: pointer; padding: 6px 8px; font-size: 13px; }
.add-link:hover { text-decoration: underline; }
.orders tfoot td { padding: 10px 8px; background: var(--surface); border-top: 2px solid var(--deep); }
.orders tfoot tr.grand td { font-weight: 700; font-size: 15px; }
.orders-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: visible; }
.new-row-grid { display: grid; grid-template-columns: 1.3fr 1.5fr 80px 80px 120px 1fr auto; gap: 6px; align-items: center; }
.new-row-grid .cell { border-color: var(--line); background: #fff; }

/* ----- Soạn kho ----- */
.pick-cat { margin-bottom: 16px; }
.pick-cat-head { display: flex; align-items: baseline; gap: 12px; padding: 12px 16px; background: var(--deep); color: #fff; border-radius: var(--radius) var(--radius) 0 0; flex-wrap: wrap; }
.pick-cat-head h2 { margin: 0; font-size: 16px; }
.pick-cat-head .pc-sum { color: #d6e9ff; font-size: 13px; }
.pick-cat-head .pc-sum b { color: #fff; }
.pick-table { width: 100%; border-collapse: collapse; background: var(--surface); }
.pick-table td { border-bottom: 1px solid var(--line-2); padding: 10px 12px; vertical-align: top; }
.pick-table tr:last-child td { border-bottom: 0; }
.pick-table .pk-chk { width: 44px; }
.pick-table .pk-name { width: 26%; font-weight: 700; font-size: 14.5px; }
.pick-table .pk-name small { display: block; font-weight: 500; color: var(--muted); font-size: 12px; }
.pick-table .pk-total { width: 120px; text-align: right; font-weight: 700; font-size: 18px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pick-table .pk-total small { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-left: 3px; }
.pk-custs { display: flex; flex-wrap: wrap; gap: 6px; }
.pk-c { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 7px; padding: 3px 9px; font-size: 13px; background: var(--surface-2); }
.pk-c i { font-style: normal; font-size: 11px; color: var(--muted); font-weight: 600; }
.pk-c b { font-variant-numeric: tabular-nums; }
.pk-c em { font-style: normal; color: var(--warn); font-size: 12px; }
.pick-table tr.done td { opacity: .45; }
.pick-table tr.done .pk-name { text-decoration: line-through; }
.chk { width: 24px; height: 24px; border: 2px solid #9fb6cc; border-radius: 6px; display: inline-grid; place-items: center; background: #fff; cursor: pointer; color: transparent; }
.chk.on { background: var(--ok); border-color: var(--ok); color: #fff; }
.chk svg { width: 16px; height: 16px; }

/* ----- Ngăn kéo / Modal ----- */
.overlay { position: fixed; inset: 0; background: rgba(10,30,55,.45); z-index: 50; display: flex; justify-content: center; align-items: flex-start; padding: 5vh 16px; overflow: auto; animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
.modal { background: var(--surface); border-radius: 14px; width: min(560px, 100%); box-shadow: 0 24px 70px rgba(0,0,0,.25); }
.modal.wide { width: min(1100px, 100%); }
.modal-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--line-2); }
.modal-head h2 { margin: 0; font-size: 17px; flex: 1; }
.modal-body { padding: 18px 20px; }
.modal-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 20px 16px; flex-wrap: wrap; }
.drawer-overlay { position: fixed; inset: 0; background: rgba(10,30,55,.4); z-index: 50; animation: fade .15s; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(760px, 100%); background: var(--bg); z-index: 51; display: flex; flex-direction: column; box-shadow: -10px 0 40px rgba(0,0,0,.18); animation: slidein .2s ease-out; }
@keyframes slidein { from { transform: translateX(40px); opacity: 0; } }
.drawer-head { display: flex; gap: 10px; align-items: center; padding: 14px 20px; background: var(--surface); border-bottom: 1px solid var(--line); }
.drawer-head h2 { margin: 0; font-size: 18px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-body { flex: 1; overflow: auto; padding: 16px 20px 32px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid .full { grid-column: 1 / -1; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 18px 0 12px; overflow-x: auto; }
.tabs button { border: 0; background: transparent; padding: 10px 14px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.tabs button.on { color: var(--ink); border-bottom-color: var(--brand); }
.alias-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.alias { display: inline-flex; align-items: center; gap: 2px; background: var(--brand-soft); color: var(--brand); border-radius: 6px; padding: 2px 4px 2px 9px; font-size: 12.5px; font-weight: 500; }
.alias button { border: 0; background: transparent; color: inherit; cursor: pointer; width: 20px; height: 20px; border-radius: 4px; display: grid; place-items: center; }
.alias button:hover { background: rgba(0,119,230,.15); }
.alias button svg { width: 12px; height: 12px; }
.alias-add { height: 28px; width: 160px; border: 1px dashed #9cc3ea; border-radius: 6px; padding: 0 8px; font-size: 12.5px; background: transparent; }

/* ----- Menu bật lên ----- */
.menu { position: fixed; z-index: 60; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,89,179,.18); padding: 5px; min-width: 210px; }
.menu button { display: flex; width: 100%; gap: 9px; align-items: center; border: 0; background: transparent; padding: 9px 11px; border-radius: 7px; cursor: pointer; text-align: left; font-weight: 500; }
.menu button:hover { background: var(--surface-2); }
.menu button.danger { color: var(--danger); }
.menu hr { border: 0; border-top: 1px solid var(--line-2); margin: 4px 0; }

/* ----- Thông báo ----- */
.toast-root { position: fixed; z-index: 70; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { pointer-events: auto; background: var(--deep); color: #fff; border-radius: 10px; padding: 11px 16px; box-shadow: 0 10px 30px rgba(0,0,0,.25); display: flex; gap: 14px; align-items: center; font-weight: 500; max-width: calc(100vw - 32px); animation: rise .2s ease-out; }
.toast.error { background: var(--danger); }
.toast button { border: 0; background: transparent; color: #ffd85c; font-weight: 700; cursor: pointer; padding: 0; }
@keyframes rise { from { transform: translateY(10px); opacity: 0; } }

/* ----- Cài đặt ----- */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.settings-grid .full { grid-column: 1 / -1; }
.keybox { display: flex; gap: 6px; align-items: center; }
.keybox code { flex: 1; background: var(--deep); color: #ffe27a; padding: 9px 12px; border-radius: 8px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, Menlo, Consolas, monospace; }
pre.code { background: var(--deep); color: #e4f1ff; padding: 14px 16px; border-radius: 9px; font-size: 12.5px; overflow: auto; line-height: 1.55; margin: 8px 0 0; font-family: ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-all; }
.switch { display: inline-flex; gap: 10px; align-items: center; cursor: pointer; font-weight: 500; }
.switch input { appearance: none; width: 40px; height: 23px; background: #c6d4e2; border-radius: 99px; position: relative; cursor: pointer; transition: background .15s; flex: none; margin: 0; }
.switch input::after { content: ''; position: absolute; width: 17px; height: 17px; border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: left .15s; }
.switch input:checked { background: var(--brand); }
.switch input:checked::after { left: 20px; }
.api-list { margin: 0; padding: 0; list-style: none; font-size: 13px; }
.api-list li { padding: 6px 0; border-bottom: 1px solid var(--line-2); display: flex; gap: 10px; }
.api-list code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; background: var(--line-2); border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.method { font-weight: 700; font-size: 11px; width: 48px; flex: none; }
.method.get { color: var(--ok); } .method.post { color: var(--brand); } .method.patch { color: var(--warn); } .method.delete { color: var(--danger); }

.loading { padding: 60px; text-align: center; color: var(--muted); }
.spinner { width: 22px; height: 22px; border: 3px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===================== Responsive ===================== */
@media (max-width: 1180px) {
  .cal-wrap { grid-template-columns: 1fr; }
  .cal { border-right: 0; border-bottom: 1px solid var(--line-2); }
  .cal-detail { max-height: none; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  body { font-size: 14.5px; }
  .app { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .sidebar { display: none; }
  .view { padding: 14px 12px 32px; }
  .page-head { margin-bottom: 12px; gap: 10px; }
  .page-head h1 { font-size: 20px; }
  .page-head .actions { margin-left: 0; width: 100%; }
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--surface); border-top: 1px solid var(--line); padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
  }
  .tabbar a, .tabbar button { display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; color: var(--muted); font-size: 11px; font-weight: 600; padding: 6px 0; border: 0; background: transparent; position: relative; cursor: pointer; }
  .tabbar svg { width: 22px; height: 22px; }
  .tabbar .active { color: var(--brand); }
  .tab-plus { width: 40px; height: 32px; border-radius: 10px; background: var(--brand); color: #fff; display: grid; place-items: center; margin-top: -2px; }
  .tab-primary.active .tab-plus { background: var(--deep); }
  .tabbar .badge { position: absolute; top: 0; right: 14%; font-size: 10px; padding: 0 5px; }
  .kpis { gap: 8px; }
  .kpi { padding: 12px 14px; }
  .kpi .k-value { font-size: 22px; }
  .dash-grid { grid-template-columns: 1fr; }
  .week-grid { grid-template-columns: repeat(2, 1fr); }
  .week-grid > div:nth-child(2) { border-right: 0; }
  .week-grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--line-2); }
  .cal { padding: 10px; }
  .cal-grid { gap: 3px; }
  .cal-day { min-height: 58px; padding: 4px; font-size: 10.5px; }
  .cal-day .d-names, .cal-day .d-rev { display: none; }
  .cal-day.today .d-num::after { content: ''; }
  .cal-day .d-cnt { font-size: 12px; }
  .settings-grid, .form-grid { grid-template-columns: 1fr; }
  .toolbar .search { width: 100%; }
  .seg { max-width: 100%; overflow-x: auto; }
  .date-pick { width: 100%; }
  .date-pick .seg { width: 100%; }
  .date-pick .seg button { flex: 1; padding: 0 8px; }
  .summary-strip > div { flex: 1 1 45%; padding: 8px 12px; }
  .summary-strip > div:nth-child(2) { border-right: 0; }
  .datenav { width: 100%; justify-content: space-between; }
  .datenav .dn-label { flex: 1; }
  .dn-quick { width: 100%; }
  .dn-quick .btn { flex: 1; }
  .period { width: 100%; }
  .period .seg { width: 100%; }
  .period .seg button { flex: 1; }
  .period .p-nav { width: 100%; justify-content: space-between; }
  .modal-body { padding: 14px; }
  .overlay { padding: 0; align-items: flex-end; }
  .modal, .modal.wide { border-radius: 16px 16px 0 0; max-height: 92dvh; overflow: auto; }
  .drawer { width: 100%; }
  .drawer-body { padding: 12px 12px 32px; }
  .toast-root { bottom: calc(80px + env(safe-area-inset-bottom)); width: calc(100% - 24px); }
  .sticky-save { bottom: calc(62px + env(safe-area-inset-bottom)); padding: 10px 0; }
  .sticky-save .actions { width: 100%; margin: 0; }
  .sticky-save .actions .btn { flex: 1; }

  /* Bảng sửa xem trước -> dạng thẻ */
  table.edit thead { display: none; }
  table.edit, table.edit tbody, table.edit tr, table.edit td { display: block; }
  table.edit tr { display: grid; grid-template-columns: 1fr 1fr 1fr 36px; gap: 2px 6px; padding: 8px 8px; border-bottom: 1px solid var(--line-2); }
  table.edit td { border: 0; padding: 0; }
  table.edit td.e-prod { grid-column: 1 / 4; }
  table.edit td.e-del { grid-column: 4; grid-row: 1; }
  table.edit td.e-amt { grid-column: 1 / 4; }
  table.edit td.e-note { grid-column: 1 / -1; }
  table.edit td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; color: var(--muted); padding: 0 8px; }
  table.edit .cell { border-color: var(--line); background: #fff; }
  .amount { text-align: left; padding-top: 4px; }

  /* Bảng đơn hàng ngày -> dạng thẻ theo khách */
  .orders-card { border: 0; background: transparent; }
  table.orders, table.orders tbody, table.orders tfoot { display: block; background: transparent; }
  table.orders thead { display: none; }
  table.orders tbody.cust { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; }
  table.orders tr { display: grid; grid-template-columns: 62px 54px minmax(0,1fr) minmax(0,1fr) 34px; gap: 0 4px; padding: 6px 8px; border-bottom: 1px solid var(--line-2); }
  table.orders td { display: block; border: 0; padding: 0; }
  table.orders tr.line.first { grid-template-areas: "stt stt stt stt stt" "prod prod prod prod act" "qty unit price amt amt" "note note note note note"; padding-top: 0; }
  table.orders tr.line { grid-template-areas: "prod prod prod prod act" "qty unit price amt amt" "note note note note note"; }
  table.orders td.c-stt { grid-area: stt; display: none; }
  table.orders td.c-name { grid-area: stt; width: auto; background: var(--surface-2) !important; margin: 0 -8px 6px; padding: 10px 12px; border-bottom: 1px solid var(--line-2); border-right: 0; }
  table.orders td.c-name .cn { font-size: 15.5px; }
  table.orders .mob-stt { display: inline-grid !important; }
  table.orders td.c-prod { grid-area: prod; }
  table.orders td.c-qty { grid-area: qty; width: auto; }
  table.orders td.c-unit { grid-area: unit; width: auto; }
  table.orders td.c-price { grid-area: price; width: auto; }
  table.orders td.c-amt { grid-area: amt; width: auto; text-align: right; padding: 0 6px; align-self: center; font-size: 15px; }
  table.orders td.c-note .cell { height: 30px; font-size: 13px; color: var(--muted); }
  table.orders td.c-note .cell:placeholder-shown { height: 26px; }
  table.orders td.c-note { grid-area: note; }
  table.orders td.c-act { grid-area: act; width: auto; }
  table.orders .cell { height: 36px; }
  table.orders td.c-prod .cell { font-weight: 600; }
  table.orders tr.sub { display: flex; justify-content: space-between; background: var(--surface-2); border-bottom: 0; }
  table.orders tr.sub td { background: transparent !important; border: 0; padding: 4px 0; }
  table.orders tr.sub td:empty { display: none; }
  table.orders tr.add-row td.c-amt { display: none; }
  table.orders tr.add-row { grid-template-areas: "prod prod prod prod act" "qty unit price price price" "note note note note note"; }
  table.orders tfoot { background: var(--surface); border-radius: var(--radius); border: 1px solid var(--line); }
  table.orders tfoot tr { display: block; }
  table.orders tfoot td { display: block; border: 0; }
  .new-row-grid { grid-template-columns: 1fr 1fr; }
  .new-row-grid > :first-child, .new-row-grid > :nth-child(2) { grid-column: 1 / -1; }
  .new-row-grid > :last-child { grid-column: 1 / -1; }

  .pick-table, .pick-table tbody, .pick-table tr, .pick-table td { display: block; }
  .pick-table tr { display: grid; grid-template-columns: 40px 1fr auto; gap: 6px 8px; padding: 10px 12px; border-bottom: 1px solid var(--line-2); }
  .pick-table td { border: 0; padding: 0; }
  .pick-table .pk-name, .pick-table .pk-total { width: auto; }
  .pick-table td.pk-custs-td { grid-column: 1 / -1; }

  .tbl.responsive thead { display: none; }
  .tbl.responsive, .tbl.responsive tbody, .tbl.responsive tr, .tbl.responsive td { display: block; }
  .tbl.responsive tr { padding: 10px 14px; border-bottom: 1px solid var(--line-2); display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
  .tbl.responsive td { border: 0; padding: 1px 0; text-align: left !important; }
  .tbl.responsive td.t-main { grid-column: 1 / -1; font-size: 15px; }
  .tbl.responsive td[data-label]::before { content: attr(data-label) ': '; color: var(--muted); font-size: 12px; }
  .tbl.responsive td.t-hide-m { display: none; }
}
.mob-stt { display: none !important; width: 26px; height: 26px; border-radius: 7px; background: var(--deep); color: #fff; place-items: center; font-weight: 700; font-size: 13px; margin-right: 8px; vertical-align: middle; }

/* ===================== In ấn ===================== */
#print-root { display: none; }
@media print {
  @page { size: A4; margin: 10mm 9mm; }
  body { background: #fff; font-size: 11.5pt; }
  #app, #login, #modal-root, #toast-root { display: none !important; }
  #print-root { display: block; color: #000; }
  .p-doc { page-break-after: always; }
  .p-doc:last-child { page-break-after: auto; }
  .p-head { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid #000; padding-bottom: 6px; margin-bottom: 8px; }
  .p-head h1 { font-size: 16pt; margin: 0; }
  .p-head .p-shop { font-size: 10pt; text-align: right; }
  .p-meta { font-size: 10pt; margin-bottom: 6px; }
  table.p-tbl { width: 100%; border-collapse: collapse; font-size: 10.5pt; }
  .p-tbl th, .p-tbl td { border: 1px solid #555; padding: 4px 6px; vertical-align: top; }
  .p-tbl th { background: #e8e8e8 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; text-align: left; font-size: 9.5pt; }
  .p-tbl td.n, .p-tbl th.n { text-align: right; white-space: nowrap; }
  .p-tbl tr.p-sub td { font-weight: 700; background: #f3f3f3 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .p-tbl tbody { page-break-inside: avoid; }
  .p-cat { font-size: 12.5pt; font-weight: 700; margin: 10px 0 4px; padding: 3px 6px; background: #222 !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .p-box { display: inline-block; width: 12px; height: 12px; border: 1.5px solid #000; }
  .p-total { text-align: right; font-size: 12pt; font-weight: 700; margin-top: 8px; }
  .p-sign { display: flex; justify-content: space-around; margin-top: 24px; text-align: center; font-size: 10pt; }
  .p-sign div { min-height: 70px; }
  .p-c { display: inline-block; margin: 1px 10px 1px 0; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* ===================== Bảng màu thương hiệu ===================== */
/* Thanh menu trên cùng: nền xanh, mục đang mở màu vàng */
.sidebar { background: var(--blue); box-shadow: 0 2px 10px rgba(0,89,179,.25); }
.brand-mark { background: var(--yellow); color: var(--blue-deep); }
.nav a { color: #eaf4ff; }
.nav a:hover { background: rgba(255,255,255,.16); color: #fff; }
.nav a.active { background: var(--yellow); color: var(--ink); font-weight: 600; }
.sidebar-foot { color: #eaf4ff; }

/* Icon menu có màu riêng, đặt trong ô vuông bo góc */
.nav a svg, .tabbar [data-route] > svg { width: 26px; height: 26px; padding: 4px; border-radius: 7px; }
:is(.nav, .tabbar) [data-route="dashboard"] > svg { background: #fff; color: var(--blue); }
:is(.nav, .tabbar) [data-route="new"] > svg       { background: var(--orange); color: #fff; }
:is(.nav, .tabbar) [data-route="orders"] > svg    { background: var(--yellow); color: var(--brown); }
:is(.nav, .tabbar) [data-route="picking"] > svg   { background: var(--brown); color: #fff; }
:is(.nav, .tabbar) [data-route="customers"] > svg { background: var(--red); color: #fff; }
:is(.nav, .tabbar) [data-route="products"] > svg  { background: #fff; color: var(--orange); }
:is(.nav, .tabbar) [data-route="settings"] > svg  { background: var(--blue-soft); color: var(--blue-deep); }
.nav a.active > svg { box-shadow: 0 0 0 1.5px rgba(19,38,58,.25); }

/* Thanh menu dưới (điện thoại) */
.tabbar [data-route] > svg { width: 30px; height: 30px; padding: 5px; }
.tabbar [data-route="dashboard"] > svg, .tabbar [data-route="more"] > svg { background: var(--blue-soft); color: var(--blue); }
.tabbar .active { color: var(--blue); }
.tabbar .active > svg { box-shadow: 0 0 0 2px var(--yellow); }
.tab-plus { background: var(--orange); }
.tab-primary.active .tab-plus { background: var(--blue); box-shadow: 0 0 0 2px var(--yellow); }

/* Đăng nhập */
.login { background: radial-gradient(900px 420px at 50% 115%, var(--yellow-2) 0, transparent 60%), linear-gradient(160deg, var(--blue) 0%, var(--blue-deep) 100%); }
.brand-mark.lg { background: var(--yellow); color: var(--blue-deep); }

/* Thẻ doanh thu, lịch, bảng */
.kpi:first-child { background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%); border-color: var(--blue); }
.kpi:nth-child(2) { border-top: 4px solid var(--yellow); }
.kpi:nth-child(3) { border-top: 4px solid var(--orange); }
.kpi:nth-child(4) { border-top: 4px solid var(--brown); }
.rank .r-bar i { background: var(--blue); }
.cal-day.today { border-color: var(--yellow); box-shadow: inset 0 0 0 2px var(--yellow); background: var(--yellow-soft); }
.cal-day.today .d-num::after { color: var(--brown); }
.cal-day .d-cnt { color: var(--blue-deep); }
.cal-day.sel { background: var(--blue-soft); border-color: var(--blue); }
.rel { color: var(--orange); }
.orders th { background: var(--blue); color: #fff; }
.orders tfoot td { border-top-color: var(--blue); }
.orders tfoot tr.grand td { color: var(--blue-deep); }
.chip.on { background: var(--blue); border-color: var(--blue); }
.chip.on b { color: var(--yellow-2); }
.badge { background: var(--red); }
.po-head .po-num, .mob-stt { background: var(--orange); }
.toast { background: var(--ink); }
.toast button { color: var(--yellow); }
.btn.primary { background: var(--blue); border-color: var(--blue); }
.btn.primary:hover { background: var(--blue-2); border-color: var(--blue-2); }
.inbox-item .ib-icon { background: var(--orange-soft); color: var(--orange); }
.tag.aios { background: var(--orange-soft); color: var(--warn); }
.tag.brand { background: var(--blue-soft); color: var(--blue-deep); }
.tag.warn { background: var(--orange-soft); color: var(--warn); }
.alias { background: var(--yellow-soft); color: var(--brown); }
.alias button:hover { background: rgba(139,90,43,.15); }
.sugg { border-color: var(--orange); color: var(--warn); }
.sugg:hover { background: var(--orange-soft); }
.chk.on { background: var(--ok); border-color: var(--ok); }
.keybox code, pre.code { background: #10233a; }
.cust-block header .tag { background: var(--orange); color: #fff; }

/* Bảng soạn kho: mỗi nhóm hàng một màu */
.pick-cat-head { background: var(--cat, var(--blue)); color: var(--cat-ink, #fff); }
.pick-cat-head .pc-sum { color: inherit; opacity: .85; }
.pick-cat-head .pc-sum b { color: inherit; }

/* Chống tràn ngang trong lưới Cài đặt */
.settings-grid > *, .form-grid > *, .keybox { min-width: 0; }
.api-list li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 860px) {
  [data-install-card] { order: -1; }
  .keybox { flex-wrap: wrap; }
  .keybox code { flex: 1 1 100%; }
}
/* Khi mở dạng ứng dụng đã cài: chừa vùng tai thỏ/thanh trạng thái */
@media (display-mode: standalone) {
  .sidebar { padding-top: env(safe-area-inset-top); }
  .view { padding-top: calc(14px + env(safe-area-inset-top)); }
}

/* ===================== Tình trạng giao hàng ===================== */
.status-seg button b { font-weight: 700; margin-left: 3px; color: var(--muted); }
.status-seg button.st-pending.on { background: var(--orange); color: #fff; }
.status-seg button.st-delivered.on { background: var(--ok); color: #fff; }
.status-seg button.on b { color: inherit; }
.deliv { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; padding: 5px 10px 5px 6px; border-radius: 8px;
  border: 1.5px solid #ffc27a; background: var(--orange-soft); color: var(--warn); font-weight: 700; font-size: 13px; cursor: pointer; user-select: none; position: relative; }
.deliv input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.deliv-box { width: 22px; height: 22px; border-radius: 6px; border: 2px solid #f0a050; background: #fff; display: grid; place-items: center; color: transparent; flex: none; }
.deliv-box svg { width: 15px; height: 15px; }
.deliv.on { border-color: #9fd3b0; background: var(--ok-soft); color: var(--ok); }
.deliv.on .deliv-box { background: var(--ok); border-color: var(--ok); color: #fff; }
.deliv-time { font-weight: 500; font-size: 11.5px; opacity: .8; }
.deliv:focus-within { outline: 2px solid var(--blue-2); outline-offset: 2px; }
.deliv:hover { filter: brightness(.97); }
.orders tbody.cust.is-delivered td:not(.c-stt):not(.c-name) { opacity: .55; }
.orders tbody.cust.is-delivered td.c-stt, .orders tbody.cust.is-delivered td.c-name { background: #eaf6ee !important; }
.orders tbody.cust.is-delivered .cn { color: var(--ok); }
.ss-status b { color: var(--ok); }
.ss-bar { display: block; height: 4px; background: var(--line-2); border-radius: 2px; margin-top: 4px; overflow: hidden; width: 90px; }
.ss-bar i { display: block; height: 100%; background: var(--ok); border-radius: 2px; }
@media (max-width: 860px) {
  .status-seg { width: 100%; }
  .status-seg button { flex: 1; }
  table.orders td.c-name .cn { display: flex; align-items: center; }
  table.orders td.c-name { position: relative; }
  .deliv { margin-top: 8px; }
  .summary-strip > div.ss-status { flex-basis: 100%; border-top: 1px solid var(--line-2); }
  .ss-bar { width: 100%; }
}

/* ===================== Âm lịch trên lịch ===================== */
.cal-day .d-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; }
.cal-day .d-lunar { color: var(--red); font-size: 11.5px; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; }
.cal-day .d-lunar.key { font-weight: 800; }
.cal-day.other .d-lunar { opacity: .8; }
.lunar-line { color: var(--red); font-size: 12.5px; font-weight: 600; margin: 1px 0 3px; }
@media (max-width: 860px) {
  .cal-day .d-top { flex-direction: column; gap: 0; }
  .cal-day .d-lunar { font-size: 10px; align-self: flex-end; margin-top: -2px; }
}
.tb-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tb-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.orders .c-unit { width: 74px; }
@media (max-width: 860px) {
  .tb-group { width: 100%; }
  .tb-group .status-seg { flex: 1; }
  .tb-label { width: 100%; margin-bottom: -4px; }
}

/* Màu ngày trên lịch: dương lịch đỏ, âm lịch đen */
.cal-day .d-num, .cal-day.past .d-num { color: var(--red); }
.cal-day .d-lunar { color: #111; }
.cal-day.today .d-num::after { color: var(--brown); }
.lunar-line { color: #111; }

/* ===================== Thông báo & Nhắc nhở ===================== */
.notif-root { position: fixed; right: 22px; bottom: 22px; z-index: 45; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none; }
.notif-root > * { pointer-events: auto; }
.notif-bell {
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer; position: relative;
  background: var(--yellow); color: var(--blue-deep); display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(0,89,179,.28), 0 0 0 3px #fff;
}
.notif-bell svg { width: 26px; height: 26px; }
.notif-bell:hover { background: var(--yellow-2); }
.notif-bell.has { background: var(--blue); color: #fff; }
.notif-bell.ring svg { animation: ring 1s ease-in-out 2; transform-origin: 50% 10%; }
@keyframes ring { 0%,100% { transform: rotate(0); } 15% { transform: rotate(16deg); } 30% { transform: rotate(-14deg); } 45% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } }
.notif-count { position: absolute; top: -4px; right: -4px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px;
  background: var(--red); color: #fff; font-size: 12.5px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px #fff; }

.notif-bubble {
  width: min(360px, calc(100vw - 32px)); background: #fff; border-radius: 14px; box-shadow: 0 12px 34px rgba(10,30,55,.22);
  border-left: 5px solid var(--tone, var(--blue)); padding: 12px 14px 14px; display: flex; gap: 11px; cursor: pointer; position: relative; overflow: hidden;
  opacity: 0; transform: translateY(8px) scale(.98); transition: opacity .2s, transform .2s;
}
.notif-bubble.show { opacity: 1; transform: none; }
.nb-icon, .ni-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--tone, var(--blue)); color: #fff; }
.nb-icon svg, .ni-icon svg { width: 19px; height: 19px; }
.nb-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.nb-text strong { color: var(--ink); font-size: 14px; }
.nb-text em { font-style: normal; color: var(--muted); font-size: 12px; }
.nb-timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--tone, var(--blue)); transform-origin: left; opacity: .6; }
.notif-bubble.show .nb-timer { animation: nbtimer 10s linear forwards; }
@keyframes nbtimer { from { transform: scaleX(1); } to { transform: scaleX(0); } }

.notif-panel { width: min(400px, calc(100vw - 24px)); max-height: min(560px, calc(100dvh - 140px)); background: #fff; border-radius: 14px;
  box-shadow: 0 16px 44px rgba(10,30,55,.25); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); }
.notif-panel header { display: flex; align-items: center; gap: 4px; padding: 12px 10px 12px 16px; border-bottom: 1px solid var(--line-2); background: var(--blue); color: #fff; }
.notif-panel header h2 { margin: 0; font-size: 15px; flex: 1; }
.notif-panel header .btn.ghost { color: #fff; }
.notif-panel header .btn.ghost:hover { background: rgba(255,255,255,.16); }
.notif-panel header .icon-btn { color: #fff; }
.notif-panel header .icon-btn:hover { background: rgba(255,255,255,.16); color: #fff; }
.notif-list { overflow: auto; }
.notif-item { display: flex; gap: 11px; width: 100%; border: 0; background: #fff; text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--line-2); cursor: pointer; }
.notif-item:hover { background: var(--surface-2); }
.notif-item.unread { background: #f4f9ff; }
.notif-item.unread .ni-text strong::after { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); margin-left: 6px; vertical-align: 2px; }
.notif-item:not(.unread) .ni-icon { opacity: .55; }
.ni-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.ni-text strong { color: var(--ink); font-size: 13.5px; }
.ni-text small { color: var(--muted); font-size: 11.5px; }
.tone-orange { --tone: var(--orange); }
.tone-green { --tone: var(--ok); }
.tone-brown { --tone: var(--brown); }
.tone-red { --tone: var(--red); }
.tone-blue { --tone: var(--blue); }
.notif-root.open .notif-bubble { display: none; }

@media (max-width: 860px) {
  .notif-root { right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); }
  .notif-bell { width: 50px; height: 50px; }
  .notif-panel { max-height: calc(100dvh - 190px); }
  .sticky-save .actions { padding-right: 60px; }
}
@media print { .notif-root { display: none !important; } }
.notif-cfg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nc-row { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.nc-row .switch { flex: 1 1 260px; align-items: flex-start; }
.nc-row .switch > span, .nc-foot .switch > span { display: flex; flex-direction: column; gap: 2px; }
.nc-time { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.nc-time input { width: 118px; height: 34px; font-weight: 700; color: var(--blue-deep); }
.nc-days { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; padding-left: 50px; }
.nc-days .chip { cursor: pointer; }
.nc-foot { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 860px) {
  .notif-cfg { grid-template-columns: 1fr; }
  .nc-days { padding-left: 0; }
}
.notif-panel { order: -1; }
.notif-panel { position: absolute; right: 0; bottom: 68px; }
@media (max-width: 860px) {
  .notif-panel { position: fixed; left: 8px; right: 8px; width: auto; top: calc(8px + env(safe-area-inset-top)); bottom: calc(138px + env(safe-area-inset-bottom)); max-height: none; }
}

/* ===================== Phần mềm bán hàng: menu nhóm, trang mới ===================== */
.nav-group { position: relative; flex: none; }
.nav-group > button { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; color: #eaf4ff; background: transparent; border: 0; font-weight: 500; cursor: pointer; white-space: nowrap; }
.nav-group > button .caret { font-size: 10px; opacity: .8; }
.nav-group > button:hover, .nav-group.open > button { background: var(--deep-2); color: #fff; }
.nav-group.active > button { background: var(--yellow); color: var(--brown); font-weight: 700; }
.nav-drop { position: fixed; min-width: 230px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 40px rgba(0,40,90,.18); padding: 6px; z-index: 60; display: none; }
.nav-group.open .nav-drop { display: block; }
.nav-drop a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 500; white-space: nowrap; }
.nav-drop a:hover { background: var(--blue-soft); }
.nav-drop a.active { background: var(--blue-soft); color: var(--blue-deep); font-weight: 700; }
.nav-drop a small { color: var(--muted); font-weight: 400; margin-left: auto; padding-left: 12px; }
.nav { overflow: visible; }
.user-chip { flex: none; display: flex; align-items: center; gap: 8px; color: #eaf4ff; font-size: 12.5px; background: rgba(255,255,255,.1); border: 0; border-radius: 99px; padding: 5px 12px 5px 6px; cursor: pointer; white-space: nowrap; }
.user-chip .av { width: 26px; height: 26px; border-radius: 50%; background: var(--yellow); color: var(--brown); display: grid; place-items: center; font-weight: 800; font-size: 12px; }
.user-chip small { color: #bcdcff; display: block; font-size: 11px; line-height: 1.1; }
@media (max-width: 1180px) { .user-chip b, .user-chip small { display: none; } .nav-group > button svg { display: none; } }

.subnav { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: -6px 0 16px; overflow-x: auto; }
.subnav a { padding: 10px 14px; font-weight: 600; color: var(--muted); border-bottom: 3px solid transparent; text-decoration: none; white-space: nowrap; }
.subnav a.on { color: var(--ink); border-bottom-color: var(--yellow); }
.crumb { font-size: 13px; color: var(--muted); margin-bottom: 6px; } .crumb a { color: var(--muted); text-decoration: none; } .crumb a:hover { color: var(--blue); } .crumb b { color: var(--ink); }

.rangebar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin-bottom: 14px; }
.rangebar .rb-label { font-weight: 700; font-size: 13px; }
.rangebar input[type=date] { width: 150px; height: 34px; }
.kpis.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpis.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi .k-value.sm { font-size: 22px; }
.kpi.red .k-value { color: var(--red); } .kpi.orange .k-value { color: var(--orange); } .kpi.green .k-value { color: var(--ok); }
.grid-2-1 { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .grid-2-1, .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.kv { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; padding: 3px 0; }
.kv.big { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 4px; font-size: 15px; }
.kv b.red, .red { color: var(--red); } .green { color: var(--ok); } .blue { color: var(--blue-deep); } .orange { color: var(--orange); }
.tbl td.c, .tbl th.c { text-align: center; }
.tbl tr.sub td { background: var(--surface-2); font-size: 12.5px; color: var(--ink-2); }
.tbl tr.hl td { background: #fff1f0; } .tbl tr.ed td { background: #fffdf3; } .tbl tr.pay td { background: #effaf2; } .tbl tr.lock td { background: #f3f0ff; }
.tbl tfoot td { font-weight: 700; background: var(--surface-2); border-top: 1px solid var(--line); }
.tbl input.cell-in { width: 100%; min-width: 64px; height: 32px; border: 1px solid var(--line); border-radius: 6px; padding: 0 8px; text-align: right; background: #fff; }
.tbl input.cell-in.l { text-align: left; }
.tbl input.cell-in:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(0,119,230,.15); }
.tbl input.cell-in.blue { border: 2px solid var(--blue); color: var(--blue-deep); font-weight: 700; }
.tbl input.cell-in.green { border: 2px solid var(--ok); color: var(--ok); font-weight: 700; }
.tbl input.cell-in.orange { border: 2px solid var(--orange); font-weight: 700; }
.tbl input.cell-in.red { border: 2px solid var(--red); color: var(--red); font-weight: 700; }
.tbl select.cell-in { text-align: left; }
.tag.bad { background: var(--red); color: #fff; } .tag.edit { background: #fff3e0; color: #b25a00; } .tag.pm2 { background: #e3f0ff; color: #0a5bb5; }
.tag.live { background: #e2f3e8; color: #2e8b4e; } .tag.dong { background: #e8f1ff; color: #2b5aa0; } .tag.lock { background: #f3f0ff; color: #5a3fb0; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.note-y { background: var(--yellow-soft); border-radius: 8px; padding: 8px 12px; font-size: 13px; color: #6b4a1f; }
.note-b { background: var(--blue-soft); border-radius: 8px; padding: 8px 12px; font-size: 13px; color: var(--blue-deep); }
.note-r { background: var(--red-soft); border-radius: 8px; padding: 8px 12px; font-size: 13px; color: #a8201a; }
.steps { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.steps .st { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 5px 14px 5px 5px; font-size: 13px; }
.steps .st i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; background: var(--line-2); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; }
.steps .st.done i { background: var(--ok); color: #fff; } .steps .st.on { border: 2px solid var(--blue); font-weight: 700; } .steps .st.on i { background: var(--blue); color: #fff; }
.phieu { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; background: #fff; }
.phieu-h { display: flex; align-items: center; gap: 10px; font-size: 13.5px; flex-wrap: wrap; } .phieu-h .ml { margin-left: auto; }
.phieu .ln { display: grid; grid-template-columns: 1fr auto 110px; gap: 12px; font-size: 13px; padding: 2px 0; color: var(--ink-2); } .phieu .ln b { text-align: right; color: var(--ink); }
.cats { display: flex; flex-wrap: wrap; gap: 6px; }
.cats button { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 13px; background: #fff; cursor: pointer; }
.cats button.on { border: 2px solid var(--blue); background: var(--blue-soft); font-weight: 700; color: var(--blue-deep); }
.form-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 13.5px; }
.form-row > span:first-child { color: var(--ink-2); }
.ph-hd { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-radius: 8px; font-size: 15px; font-weight: 700; }
.ph-hd.red { background: #fdecea; color: #b3261e; } .ph-hd.green { background: #e2f3e8; color: #1f6b3a; } .ph-hd.blue { background: #e3f0ff; color: #0a5bb5; }
.ta-mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.7; min-height: 340px; border: 2px solid var(--blue) !important; }
.att td.dc { text-align: center; font-size: 12px; font-weight: 700; padding: 3px 1px !important; cursor: pointer; min-width: 26px; height: 38px; user-select: none; }
.att td.dc i { display: block; font-style: normal; font-size: 9.5px; color: #fff; background: var(--blue); border-radius: 4px; margin: 1px 2px 0; }
.att td.dc.w { color: var(--ok); } .att td.dc.p { background: #fff7d6 !important; color: #8b5a2b; } .att td.dc.n { background: #fdecea !important; color: #b3261e; }
.att td.dc.off { color: var(--muted); font-size: 10px; background: #f3f5f8 !important; } .att td.dc.tet { background: #ffe9c7 !important; color: #a35a00; font-size: 10px; }
.att td.dc.fut { background: #fafbfc; cursor: default; } .att td.dc.today { box-shadow: inset 0 0 0 2px #f5c400; }
.att th.dh { font-size: 11px; text-align: center; padding: 4px 1px !important; } .att th.dh small { display: block; font-size: 9px; color: var(--muted); font-weight: 500; } .att th.dh.sun { color: var(--red); }
.att td.nm { white-space: nowrap; min-width: 150px; position: sticky; left: 0; background: #fff; z-index: 1; }
.perm td, .perm th { padding: 5px 6px !important; font-size: 13px; }
.ck2 { display: inline-flex; width: 22px; height: 22px; border-radius: 5px; border: 2px solid #c9d3de; align-items: center; justify-content: center; font-size: 12px; color: #fff; cursor: pointer; background: #fff; }
.ck2.on { background: var(--blue); border-color: var(--blue); } .ck2.dis { cursor: default; opacity: .7; }
.opt { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13.5px; cursor: pointer; }
.opt.on { border: 2px solid var(--blue); background: var(--blue-soft); } .opt b, .opt .r { margin-left: auto; }
.lifebar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--line-2); font-size: 13px; }
.funds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.fund { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; border-top: 4px solid var(--blue); }
.fund.TM { border-top-color: var(--ok); } .fund.CN { border-top-color: var(--orange); } .fund.all { border-top-color: var(--brown); background: #fffdf6; }
.fund span { font-size: 12.5px; color: var(--muted); } .fund b { display: block; font-size: 21px; margin: 2px 0; } .fund .fl { display: flex; gap: 10px; font-size: 12px; flex-wrap: wrap; color: var(--muted); }
@media (max-width: 860px) {
  .kpis.k4, .kpis.k3, .funds { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr; gap: 4px; }
  .rangebar input[type=date] { width: 130px; }
  .phieu .ln { grid-template-columns: 1fr auto; } .phieu .ln b { grid-column: 2; }
}
/* In: khổ giấy theo từng mẫu */
@media print {
  .p-a5 { font-family: 'Times New Roman', Times, serif; color: #000; font-size: 11.5pt; line-height: 1.38; }
  .p-a5 .shop { text-align: center; border-bottom: 1.5px solid #000; padding-bottom: 5px; font-size: 10.5pt; }
  .p-a5 .shop .sn { font-size: 13.5pt; font-weight: 700; }
  .p-a5 h1 { text-align: center; font-size: 15.5pt; margin: 8px 0 0; }
  .p-a5 .no { text-align: center; font-size: 10.5pt; margin: 1px 0 7px; }
  .p-a5 table.info { width: 100%; border-collapse: collapse; font-size: 11pt; margin-bottom: 7px; } .p-a5 .info td { padding: 1.5px 0; vertical-align: top; } .p-a5 .info td.k { width: 34%; white-space: nowrap; }
  .p-a5 table.pt { width: 100%; border-collapse: collapse; font-size: 10pt; } .p-a5 .pt thead { display: table-header-group; } .p-a5 .pt tr { break-inside: avoid; }
  .p-a5 .pt th, .p-a5 .pt td { border: 1px solid #333; padding: 3px 4px; } .p-a5 .pt th { background: #eee !important; font-size: 9pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .p-a5 .r { text-align: right; white-space: nowrap; } .p-a5 .c { text-align: center; } .p-a5 .b { font-weight: 700; } .p-a5 tr.empty td { height: 18px; }
  .p-a5 .end { break-inside: avoid; } .p-a5 .note { font-size: 9.5pt; margin: 6px 0 0; }
  .p-a5 .sign { display: grid; text-align: center; margin-top: 12mm; font-size: 10.5pt; } .p-a5 .sign > div { display: flex; flex-direction: column; align-items: center; }
  .p-a5 .sign i { font-size: 9pt; } .p-a5 .sign .space { height: 20mm; }
  .p-a5 .slip { break-after: page; } .p-a5 .slip:last-child { break-after: auto; }
  .p-a4 { font-family: 'Times New Roman', Times, serif; font-size: 12.5pt; color: #000; line-height: 1.35; }
  .p-a4 .top { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; font-size: 11.5pt; } .p-a4 .top .r { text-align: center; } .p-a4 .top .q { font-weight: 700; white-space: nowrap; }
  .p-a4 h1 { text-align: center; font-size: 17pt; margin: 22px 0 12px; } .p-a4 p { margin: 4px 0; text-align: justify; }
  .p-a4 table { width: 100%; border-collapse: collapse; margin: 10px 0 4px; } .p-a4 th, .p-a4 td { border: 1px solid #000; padding: 6px 8px; } .p-a4 th { background: #f0f0f0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .p-a4 .c { text-align: center; } .p-a4 .r { text-align: right; } .p-a4 .bank { border: 1px solid #000; padding: 6px 10px; margin: 12px 0 8px; }
  .p-a4 .sign { display: grid; grid-template-columns: 1fr 1fr; text-align: center; margin-top: 16px; } .p-a4 .sign i { font-size: 11pt; } .p-a4 .sp { height: 30mm; }
}
/* Form khách hàng: 2 khối thông tin */
.cf { display: flex; flex-direction: column; gap: 14px; }
.cf-sec { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; background: #fff; }
.cf-sec + .cf-sec { background: #fbfcfe; }
.cf-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .cf-h b { font-size: 14px; }
.cf-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 10px; }
@media (max-width: 600px) { .cf-row { grid-template-columns: 1fr; } }
/* hộp thoại mở từ trong ngăn kéo phải nằm trên ngăn kéo */
.overlay { z-index: 56; }
/* ===== Module Báo cáo ===== */
.rp { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 18px; align-items: start; --rp-s1: #2a78d6; --rp-s2: #eb6834; --rp-s3: #1baf7a; }
.rp-side { position: sticky; top: 76px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.rp-side .rp-h { font-size: 11.5px; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; padding: 8px 10px 6px; font-weight: 600; }
.rp-side a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px; color: var(--ink); text-decoration: none; font-weight: 500; }
.rp-side a svg { width: 18px; height: 18px; color: var(--blue-deep); } .rp-side a:hover { background: var(--blue-soft); }
.rp-side a.on { background: var(--blue-deep); color: #fff; font-weight: 700; } .rp-side a.on svg { color: #fff; }
.rp-side small { margin-left: auto; font-size: 10px; background: #f3f0ff; color: #5a3fb0; padding: 1px 6px; border-radius: 5px; } .rp-side a.on small { background: rgba(255,255,255,.2); color: #fff; }
.kpis.rp-k5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; } .rp-grid.rp-g21 { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } .rp-grid.rp-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rp-pad { padding: 6px 16px 14px; }
.rp-hb { display: grid; grid-template-columns: minmax(90px, 150px) 1fr auto; gap: 10px; align-items: center; padding: 4px 0; font-size: 13px; }
.rp-hb .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rp-hb .tr { height: 12px; background: var(--line-2); border-radius: 4px; overflow: hidden; } .rp-hb .tr i { display: block; height: 100%; background: var(--rp-s1); border-radius: 0 4px 4px 0; }
.rp-legend { display: flex; gap: 14px; font-size: 12px; color: var(--ink-2); padding: 0 16px; } .rp-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.rp-mini { display: inline-block; width: 60px; height: 6px; background: var(--line-2); border-radius: 3px; vertical-align: middle; margin-right: 6px; overflow: hidden; } .rp-mini i { display: block; height: 100%; background: var(--rp-s1); }
.rp-up { color: var(--ok); font-weight: 700; } .rp-down { color: var(--red); font-weight: 700; }
.kpi:first-child .rp-up { color: #b9f5cc; } .kpi:first-child .rp-down { color: #ffd0cc; }
.rp-pl .kv.ind { padding-left: 16px; color: var(--ink-2); font-size: 13px; }
.rp-tip { position: fixed; pointer-events: none; background: #13263a; color: #fff; font-size: 12px; padding: 7px 10px; border-radius: 8px; z-index: 70; display: none; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.2); }
@media (max-width: 1100px) { .rp { grid-template-columns: 1fr; } .rp-side { position: static; flex-direction: row; flex-wrap: wrap; } .rp-side .rp-h { display: none; } .rp-grid, .rp-grid.rp-g21, .rp-grid.rp-g3 { grid-template-columns: 1fr; } .kpis.rp-k5 { grid-template-columns: 1fr 1fr; } }

.qty-sub{font-size:11.5px;line-height:1.2;text-align:right;padding:0 8px 4px;white-space:nowrap}.qty-sub.orange{color:#c2410c;font-weight:600}

.sh-tbl tr.sh-off td{background:#fbfdff}.sh-tbl tr.sh-off .cell-in,.sh-tbl tr.sh-off input[type=date]{opacity:.45}
.sh-tbl tr.sh-on td{background:#f4f9ff}.sh-tbl td{vertical-align:middle}.sh-tbl .cell-in{width:100%}
.linkbtn{background:none;border:0;padding:2px 0 0;color:var(--blue,#0077e6);cursor:pointer;font:inherit;font-size:12px;display:block}
.sh-sum{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line,#d8e4ef);border-radius:10px;padding:10px 12px;background:#fff}
.sh-g{display:grid;grid-template-columns:92px 170px 90px 1fr 120px;gap:10px;align-items:center;font-size:13px}.sh-g .r{text-align:right}

.aios-card .card-head b{font-size:15px}.aios-o{padding:3px 0;font-size:13.5px}

/* chuông: phân biệt rõ chưa đọc / đã xem / chưa xử lý */
.notif-tabs{display:flex;gap:4px;padding:8px 10px;border-bottom:1px solid var(--line-2);background:#f7fbff}
.notif-tabs button{border:0;background:transparent;padding:6px 10px;border-radius:8px;font:inherit;font-size:13px;color:var(--ink-2,#3b5168);cursor:pointer}
.notif-tabs button.on{background:#fff;color:var(--blue,#0077e6);font-weight:700;box-shadow:0 1px 3px rgba(0,40,90,.12)}
.notif-tabs button b{display:inline-block;min-width:18px;padding:0 5px;border-radius:9px;background:var(--red,#e0342b);color:#fff;font-size:11px;line-height:18px;text-align:center}
.notif-tabs button b.warn{background:var(--orange,#f57c00)}
.notif-item{position:relative}
.notif-item.unread{background:#eaf4ff;box-shadow:inset 4px 0 0 var(--blue,#0077e6)}
.notif-item.unread .ni-text strong{color:var(--ink,#13263a);font-weight:700}
.notif-item.read{background:#fff}
.notif-item.read .ni-text strong{font-weight:500;color:var(--ink-2,#3b5168)}
.notif-item.read .ni-text>span{color:var(--muted,#6a7d90)}
.notif-item.read .ni-icon{opacity:.45;filter:grayscale(1)}
.notif-item.is-todo.read{box-shadow:inset 4px 0 0 var(--orange,#f57c00)}
.notif-item.is-done .ni-text strong{text-decoration:line-through;text-decoration-color:rgba(46,139,78,.5)}
.ni-st{display:inline-block;margin-left:6px;padding:0 6px;border-radius:6px;font-size:11px;font-weight:700;line-height:17px}
.ni-st.ok{background:var(--ok-soft,#e2f3e8);color:var(--ok,#2e8b4e)}.ni-st.todo{background:var(--orange-soft,#ffefd9);color:#b45309}
.ni-new{color:var(--red,#e0342b)}
.notif-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 14px;border-top:1px solid var(--line-2);font-size:11.5px;color:var(--muted,#6a7d90);background:#fafcff}
.notif-bell.todo::after{content:'';position:absolute;top:2px;right:2px;width:14px;height:14px;border-radius:50%;background:var(--orange,#f57c00);border:2px solid #fff}
.tbl.pn-fixed{table-layout:fixed;width:100%}.tbl.pn-fixed td{overflow:hidden;text-overflow:ellipsis}.tbl.pn-fixed td .input,.tbl.pn-fixed td select{max-width:100%}.tbl.pn-fixed .cell-in{width:100%!important;max-width:110px}
/* ---------- Kế toán AI & Trạm in ---------- */
.ai-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px;align-items:start}
@media(max-width:1000px){.ai-grid{grid-template-columns:1fr}}
.ai-log{padding:2px 0 6px}
.ai-item{display:grid;grid-template-columns:46px 28px minmax(0,1fr) auto;gap:10px;align-items:start;padding:10px 18px;border-top:1px solid var(--line-2)}
.ai-item:first-child{border-top:0}.ai-item.undone{opacity:.55}.ai-item.undone b{text-decoration:line-through}
.ai-t{font-variant-numeric:tabular-nums;color:var(--muted);font-size:12.5px;padding-top:2px}.ai-ic{font-size:17px;line-height:1.2}
.ai-c .small{margin-top:2px;color:var(--ink-2)}.ai-a{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
@media(max-width:640px){.ai-item{grid-template-columns:38px minmax(0,1fr)}.ai-ic{display:none}.ai-a{grid-column:2;flex-direction:row;justify-content:flex-start}}
.ai-flow div{background:var(--surface-2,#f6faff);border:1px solid var(--line-2);border-radius:9px;padding:6px 10px;font-size:13px}.ai-flow i{display:block;text-align:center;color:var(--muted);font-style:normal;font-size:12px;line-height:16px}
.ai-rules{padding:0 18px 8px}
.ai-rule{display:grid;grid-template-columns:minmax(0,1.2fr) auto minmax(0,1.3fr);gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line-2)}
.ai-rule:first-child{border-top:0}
@media(max-width:900px){.ai-rule{grid-template-columns:1fr}}
.ai-num{display:inline-block;width:120px;height:30px;padding:0 8px;text-align:right}.ai-num.sm{width:56px}
.ai-station{display:flex;gap:12px;align-items:center;padding:12px 18px;margin-bottom:14px}
.ai-station .dot{width:12px;height:12px;border-radius:50%;background:var(--ok,#2e8b4e);box-shadow:0 0 0 4px var(--ok-soft,#e2f3e8)}
.ai-station.off .dot{background:var(--orange,#f57c00);box-shadow:0 0 0 4px var(--orange-soft,#ffefd9)}
.ai-code{display:block;background:#13263a;color:#e8f1ff;padding:8px 10px;border-radius:8px;font-size:11.5px;word-break:break-all;margin:4px 0}
@media (max-width: 1640px) { .user-chip b, .user-chip small { display: none; } }
@media (max-width: 1480px) { .nav a svg, .nav-group > button svg { display: none; } .nav a, .nav-group > button { padding-left: 9px; padding-right: 9px; } }
.ai-a{flex-direction:row;flex-wrap:wrap;justify-content:flex-end;max-width:210px}
.kpi:first-child .k-value small{color:#d6e9ff}
/* ---------- Tổng quan (dashboard) ---------- */
.view { --ov-s1: #2a78d6; --ov-s1b: #a9c9ef; --ov-s2: #eb6834; --ov-s3: #1baf7a; --ov-s4: #eda100; --ov-grid: #e6edf4; }
.ov-head .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ov-today { display: grid; grid-template-columns: 1.3fr repeat(calc(var(--n, 6) - 1), minmax(0, 1fr)); margin-bottom: 14px; overflow: hidden; }
.ov-today > div { padding: 12px 16px; border-left: 1px solid var(--line-2); min-width: 0; }
.ov-today > div:first-child { border-left: 0; background: var(--deep); color: #fff; }
.ov-today .l { font-size: 12px; color: var(--muted); font-weight: 500; }
.ov-today > div:first-child .l, .ov-today > div:first-child .s { color: #cfe4ff; }
.ov-today .v { font-size: 20px; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; }
.ov-today .v small { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.ov-today > div:first-child .v small { color: #cfe4ff; }
.ov-today .s { font-size: 12px; color: var(--muted); margin-top: 2px; }
.ov-today .prog { height: 6px; background: rgba(255,255,255,.25); border-radius: 4px; margin-top: 8px; overflow: hidden; }
.ov-today .prog i { display: block; height: 100%; background: var(--yellow, #ffc720); border-radius: 4px; }
.ov-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.ov-k { padding: 14px 16px; display: block; color: inherit; text-decoration: none; min-width: 0; }
a.ov-k:hover { border-color: var(--brand); }
.ov-k .l { font-size: 12.5px; color: var(--muted); font-weight: 500; display: flex; gap: 6px; align-items: center; }
.ov-k .v { font-size: 23px; font-weight: 800; margin: 5px 0 3px; letter-spacing: -.4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ov-k .v small { font-size: 13px; color: var(--muted); font-weight: 600; }
.ov-k .s { font-size: 12px; color: var(--muted); }
.ov-k.hero { background: linear-gradient(135deg, #0077e6, #0059b3); border: 0; color: #fff; }
.ov-k.hero .l, .ov-k.hero .s, .ov-k.hero .v small { color: #d6e9ff; }
.ov-k.hero .up { color: #b9f5cc; } .ov-k.hero .down { color: #ffd0cc; }
.view .up { color: var(--ok, #1d7a45); font-weight: 700; } .view .down { color: var(--red, #d93025); font-weight: 700; }
.ov-lock { font-size: 10px; background: #f3f0ff; color: #5a3fb0; padding: 1px 6px; border-radius: 5px; font-weight: 600; }
.ov-grid { display: grid; gap: 14px; margin-bottom: 14px; }
.ov-grid.g21 { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
.ov-grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ov-grid.g2 { grid-template-columns: 1fr 1fr; }
.ov-grid.g12 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.ov-ch { display: flex; align-items: baseline; gap: 8px; padding: 14px 16px 6px; flex-wrap: wrap; }
.ov-ch h2 { margin: 0; font-size: 15px; } .ov-ch .m { color: var(--muted); font-size: 12px; }
.ov-ch .r { margin-left: auto; font-size: 12.5px; font-weight: 600; text-decoration: none; }
.ov-pad { padding: 4px 16px 14px; }
.ov-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); padding: 0 16px; }
.ov-legend b { font-weight: 500; }
.ov-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.ov-legend i.ln { height: 2px; width: 14px; border-radius: 1px; vertical-align: 3px; }
.ov-chart { padding: 4px 8px 6px; min-height: 250px; }
.ov-chart rect[data-i] { cursor: pointer; }
.ov-single { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 30px 16px; }
.ov-single .l { font-size: 12px; color: var(--muted); } .ov-single b { display: block; font-size: 20px; margin: 4px 0; }
.ov-tip { position: fixed; pointer-events: none; background: #13263a; color: #fff; font-size: 12px; padding: 7px 10px; border-radius: 8px; z-index: 300; display: none; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.2); line-height: 1.5; }
.ov-hb { display: grid; grid-template-columns: minmax(90px, 1fr) 1.3fr auto; gap: 10px; align-items: center; padding: 5px 0; font-size: 13px; }
.ov-hb[data-href] { cursor: pointer; }
.ov-hb .tr { height: 12px; background: var(--line-2); border-radius: 4px; overflow: hidden; }
.ov-hb .tr i { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.ov-hb .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-hb .n { font-variant-numeric: tabular-nums; text-align: right; min-width: 92px; font-weight: 600; }
.ov-hb .n small { color: var(--muted); display: block; font-size: 11px; font-weight: 400; }
.ov-t { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ov-t th { text-align: left; font-size: 11.5px; color: var(--muted); font-weight: 600; padding: 7px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ov-t td { padding: 7px 8px; border-bottom: 1px solid var(--line-2); font-size: 13px; }
.ov-t .n { text-align: right; white-space: nowrap; }
.ov-t tr.click { cursor: pointer; } .ov-t tr.click:hover td { background: var(--line-2); }
.ov-sub { font-size: 12.5px; color: var(--muted); margin: 12px 0 4px; font-weight: 600; }
.ov-kv { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 13.5px; border-bottom: 1px solid var(--line-2); font-variant-numeric: tabular-nums; }
.ov-kv .ind { padding-left: 14px; color: var(--ink-2); }
.ov-kv.t { font-weight: 800; border-top: 2px solid var(--line); border-bottom: 0; padding-top: 9px; }
.ov-aging { display: flex; height: 16px; border-radius: 5px; overflow: hidden; gap: 2px; margin: 6px 0 8px; }
.ov-aging i { display: block; height: 100%; min-width: 3px; }
.ov-alert { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--line-2); font-size: 13px; color: inherit; text-decoration: none; }
.ov-alert:last-child { border-bottom: 0; }
.ov-alert .ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; font-size: 14px; }
.ov-alert .tx { min-width: 0; } .ov-alert .tx b { display: block; } .ov-alert .tx span { color: var(--muted); font-size: 12px; }
.ov-alert .go { margin-left: auto; font-size: 12.5px; font-weight: 600; white-space: nowrap; color: var(--brand); }
.ov-alert:hover .go { text-decoration: underline; }
.ov-reps { padding: 14px 16px; margin-bottom: 14px; }
.ov-reps-h { font-weight: 700; margin-bottom: 10px; }
.ov-rep { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.ov-rep a { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink); }
.ov-rep a:hover { border-color: var(--brand); } .ov-rep a b { font-size: 13.5px; } .ov-rep a span { font-size: 12px; color: var(--muted); }
@media (max-width: 1280px) { .ov-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ov-today { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ov-today > div:nth-child(3n+1) { border-left: 0; } .ov-today > div:nth-child(n+4) { border-top: 1px solid var(--line-2); } .ov-rep { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .ov-grid.g21, .ov-grid.g3, .ov-grid.g2, .ov-grid.g12 { grid-template-columns: 1fr !important; } }
@media (max-width: 640px) {
  .ov-kpis { grid-template-columns: 1fr 1fr; gap: 10px; } .ov-k .v { font-size: 20px; }
  .ov-today { grid-template-columns: 1fr 1fr; } .ov-today > div { border-left: 0 !important; border-top: 1px solid var(--line-2); } .ov-today > div:first-child { grid-column: 1 / -1; border-top: 0; }
  .ov-rep { grid-template-columns: 1fr 1fr; } .ov-single { grid-template-columns: 1fr 1fr; }
  .ov-hb { grid-template-columns: minmax(80px, 1fr) 1fr auto; } .ov-hb .n { min-width: 70px; }
  .ov-hide-m { display: none; } .ov-head .actions { width: 100%; }
}
.ov-chart svg { width: auto; height: auto; display: block; max-width: 100%; }
/* Phiếu nhập chờ duyệt: tên nhà cung cấp nổi bật */
.pn-sup { display: flex; align-items: center; gap: 10px; padding: 11px 14px; margin-top: 12px; background: linear-gradient(90deg, #e4f1ff, #f6faff); border: 1px solid #c9def5; border-radius: 10px 10px 0 0; }
.pn-sup .ic { width: 30px; height: 30px; border-radius: 8px; background: var(--deep); color: #fff; display: grid; place-items: center; font-size: 15px; flex: none; }
.pn-sup .nm { font-size: 17px; font-weight: 800; color: var(--deep); }
.pn-sup .r { margin-left: auto; text-align: right; font-size: 12px; color: var(--muted); } .pn-sup .r b { display: block; font-size: 14px; color: var(--ink); }
.pn-sup-t { border: 1px solid #c9def5; border-top: 0; border-radius: 0 0 10px 10px; }
.sort-tbl .input { height: 34px; } .sort-tbl input.num { text-align: right; }

/* chọn ngày chốt công nợ */
.cd-days { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; }
.cd-days button { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 6px 0; font-weight: 600; font-size: 13px; cursor: pointer; color: var(--ink); }
.cd-days button.on { background: var(--blue); color: #fff; border-color: var(--blue); }
.cd-days button.eom { grid-column: span 2; }