/* Tanomi Pricing Terminal (trước: Zord) — warm-gray dark first, platform-accent theming */
:root {
  /* Be Vietnam Pro cho cả tiêu đề (giữ dáng "tech" bằng chữ HOA + giãn chữ) — dấu tiếng Việt
     chuẩn hơn hẳn Chakra Petch (font gốc Thái/Latin, dấu chồng Ộ/Ế/Ữ xấu). */
  --font-display: 'Be Vietnam Pro', sans-serif;
  --font-body: 'Be Vietnam Pro', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}
[data-theme="dark"] {
  --bg: #1d1a15; --bg-panel: #262219; --bg-inset: #2f2a1f; --bg-hover: #38321f;
  --line: #3d3628; --text: #ece4d3; --text-dim: #a89e87; --text-faint: #b0a48b;
  --green: #8fd47a; --red: #ff7a66; --amber: #e8c268;
}
[data-theme="light"] {
  --bg: #f3efe6; --bg-panel: #fbf8f1; --bg-inset: #ede7d9; --bg-hover: #e5ddc9;
  --line: #d8d0bc; --text: #2a2620; --text-dim: #6f6754; --text-faint: #71674f;
  --green: #2f7521; --red: #cc3a26; --amber: #806218;
}
[data-platform="shopee"] { --accent: #ee4d2d; --accent-soft: rgba(238,77,45,.14); }
[data-platform="tiktok"] { --accent: #23c8be; --accent-soft: rgba(35,200,190,.14); }

* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: 14px; line-height: 1.5;
  background-image: radial-gradient(ellipse 90% 50% at 50% -10%, var(--accent-soft), transparent);
  min-height: 100vh; display: flex; flex-direction: column;
}

/* ---------- Topbar ---------- */
.topbar {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 14px 24px; border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 14px; font-family: var(--font-display); }
.brand-text { display: flex; flex-direction: column; gap: 5px; }
.brand-sub { font-size: 18px; font-weight: 700; letter-spacing: .02em; color: var(--text); line-height: 1; }
.brand-mark { display: inline-flex; flex: none; border-radius: 10px; }
.brand-mark:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.brand-mark img { width: 40px; height: 40px; display: block; }
.brand-mark .bm-d, [data-theme="dark"] .brand-mark .bm-l { display: none; }
[data-theme="dark"] .brand-mark .bm-d { display: block; }
.brand-by { font-family: var(--font-body); font-size: 11.5px; color: var(--text-faint); letter-spacing: .02em; line-height: 1; }
.platform-tabs, .entity-switch, .pv-switch {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; padding: 4px;
  background: var(--bg-inset); border: 1px solid var(--line); border-radius: 12px;
}
.platform-tabs { margin-left: auto; }
.fiscal-group { grid-auto-columns: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
/* Mọi công tắc chọn (sàn, hạng shop, loại hình) cùng một kiểu: các ô bằng nhau, ô đang chọn nổi lên như miếng trắng */
.ptab, .ebtn, .mbtn, .pvbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 8px 12px;
  border: 0; border-radius: 9px; background: transparent; color: var(--text-dim); cursor: pointer; white-space: nowrap;
  font-family: var(--font-display); font-size: 12.5px; font-weight: 600; letter-spacing: .05em;
}
.ptab-ico { height: 22px; width: auto; display: block; flex: none; filter: grayscale(1); opacity: .6; transition: opacity .15s, filter .15s; }
.ptab:hover .ptab-ico, .ptab.active .ptab-ico { filter: none; opacity: 1; }
.ptab.active, .ebtn.active, .mbtn.active, .pvbtn.active { background: var(--bg-panel); color: var(--text); box-shadow: 0 1px 2px rgba(60, 40, 10, .18), 0 4px 10px -4px rgba(60, 40, 10, .25); }
[data-theme="dark"] .ptab.active, [data-theme="dark"] .ebtn.active, [data-theme="dark"] .mbtn.active, [data-theme="dark"] .pvbtn.active { background: var(--bg-hover); box-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.top-right { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.theme-toggle { background: var(--bg-inset); border: 1px solid var(--line); color: var(--text-dim); border-radius: 12px; min-height: 48px; padding: 6px 14px; cursor: pointer; font-size: 15px; }

/* ---------- Layout ---------- */
.layout { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 18px; padding: 18px 24px; flex: 1; align-items: start; min-width: 0; }
.layout > *, .panel, .field, .field-row { min-width: 0; }
@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; }
  .inputs {
    position: static !important; max-height: none !important; overflow: visible !important;
    padding-bottom: 18px; scrollbar-gutter: auto; box-shadow: none !important;
  }
  /* Người mới (màn hình chờ): đưa phần "Bắt đầu tính giá bán" + hướng dẫn lên ĐẦU,
     trên cả form nhập, để không bị chôn dưới dashboard. Có dữ liệu thì về thứ tự thường (form trước).
     KHÔNG áp khi tour đang chạy: animation gõ hay xoá ô về rỗng (is-empty) thoáng qua sẽ làm
     tấm empty-card nhảy lên trên → giật layout, lỗ sáng bị bỏ lại. */
  body:not(.tour-open) .layout:has(.results.is-empty) .results { order: -1; }
}
.panel { background: var(--bg-panel); border: 1px solid var(--line); border-radius: 8px; padding: 18px; }
.panel-title { font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 14px; }
.panel-note { display: block; font-size: 10px; letter-spacing: .02em; text-transform: none; color: var(--text-faint); margin-top: 4px; font-weight: 400; }

/* ---------- Inputs ---------- */
.inputs {
  position: sticky; top: 18px;
  max-height: var(--inputs-max-height, calc(100dvh - 126px)); overflow-y: auto;
  padding-bottom: 28px; scroll-padding-bottom: 28px; scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}
.inputs {
  box-shadow: inset 0 -18px 18px -22px var(--text-faint);
}
/* Màn hình rộng: cụm thông số đơn hàng luôn cao bằng khung nhìn (dính đầu trang, cuộn riêng), nên dài ngang cột kết quả đang xem
   mà kéo cột bên phải không làm cụm này trôi theo. Cuộn trong cụm này không kéo theo trang (overscroll-behavior). */
@media (min-width: 981px) {
  .layout { align-items: start; }
  .inputs { position: sticky; top: 18px; height: calc(100dvh - 36px); max-height: none; overflow-y: auto; overscroll-behavior: contain; box-shadow: none; }
}
.input-head {
  display: block;
  margin-bottom: 14px;
}
.input-head .panel-title { margin-bottom: 4px; }
.mode-hint { font-size: 12px; color: var(--text-faint); margin: 0; line-height: 1.45; }
.input-groups { margin-top: 4px; }
.field { display: block; margin-bottom: 12px; flex: 1; }
.field-label { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 5px; }
.field input[type="number"], .field input[type="text"], .combo input {
  width: 100%; background: var(--bg-inset); border: 1px solid var(--line); border-radius: 5px;
  color: var(--text); font-family: var(--font-mono); font-size: 14px; padding: 9px 10px;
}
.field input:focus, .combo input:focus { outline: none; border-color: var(--accent); }
.field-row { display: flex; gap: 10px; align-items: flex-start; }
.field-row > .field { min-width: 0; }
.field-row .field-label { min-height: 2.6em; align-items: flex-end; }
.field-row + .field-hint { margin: -4px 0 14px; }

/* Ô nhập có đơn vị (đ / %) gắn bên phải */
.input-wrap { position: relative; display: block; }
/* .field ... (dòng trên) có specificity cao hơn nên phải nâng specificity ở đây, không thì padding-right
   bị đè về 10px làm chữ đè lên đơn vị đ/%. Chừa 30px cho đơn vị. */
.field .input-wrap input { width: 100%; padding-right: 30px; }
/* Placeholder dùng font THƯỜNG (hẹp hơn mono) + nhỏ hơn chút → "Ví dụ: 200.000" không tràn/đè đơn vị */
.field input::placeholder, .combo input::placeholder { font-family: var(--font-body); font-size: 12.5px; letter-spacing: 0; }
.input-wrap .unit { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 12px; color: var(--text-faint); pointer-events: none; }
/* Ẩn mũi tên tăng/giảm của ô số — chúng đè lên đơn vị %, gõ số trực tiếp tiện hơn */
.input-wrap input[type="number"]::-webkit-outer-spin-button,
.input-wrap input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.input-wrap input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* Chip "Đang chọn: ngành hàng" — nổi rõ, bấm để mở bảng duyệt danh mục */
.cat-chip {
  display: block; margin-top: 6px; padding: 6px 10px; background: var(--accent-soft);
  border: 1px solid transparent; border-left: 2px solid var(--accent); border-radius: 0 6px 6px 0;
  font-size: 12px; line-height: 1.5; color: var(--text); cursor: pointer;
}
.cat-chip:hover, .cat-chip:focus-visible {
  border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); outline: none;
}
.field-hint { display: block; margin-top: 4px; font-size: 11px; line-height: 1.5; color: var(--text-faint); }
.field-hint + .field-row { margin-top: 8px; }
.cost-vat-field { margin-top: 10px; }
.cost-vat-field select {
  width: 100%; min-height: 40px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 5px;
  background: var(--bg-inset); color: var(--text); font: inherit; font-size: 13px; color-scheme: light;
}
.cost-vat-field select:focus { outline: none; border-color: var(--accent); }
[data-theme="dark"] .cost-vat-field select { color-scheme: dark; }
@media (max-width: 720px) { .cost-vat-field select { font-size: 16px; } }
.badge { font-family: var(--font-mono); font-style: normal; font-size: 11px; background: var(--accent-soft); color: var(--accent); padding: 1px 7px; border-radius: 10px; }
.group-title { font-family: var(--font-display); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 18px 0 10px; }

.combo { position: relative; min-width: 0; }
.combo-list {
  position: static; margin-top: 4px; max-height: 240px; overflow: auto;
  background: var(--bg-panel); border: 1px solid var(--line); border-radius: 6px; list-style: none; padding: 4px;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.combo-list li { padding: 7px 10px; border-radius: 4px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.combo-list li:hover { background: var(--bg-hover); }
.combo-list .rate { font-family: var(--font-mono); color: var(--accent); }
.combo-list li.combo-group {
  cursor: default; font-family: var(--font-body); font-size: 10px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-faint); padding: 8px 10px 3px;
}
.combo-list li.combo-group:first-child { padding-top: 4px; }
.combo-list li.combo-group:hover { background: none; }
.combo-list li.combo-browse-link {
  color: var(--accent); font-weight: 700; border: 1px solid var(--line); margin-top: 4px;
  padding: 10px 12px; justify-content: center; background: var(--bg-inset);
}
.combo-list li.combo-browse-link:hover { border-color: var(--accent); background: var(--accent-soft); }

/* Dữ liệu được extension chuyển từ đúng trang sản phẩm người dùng đang xem. Đây là lời nhắc
   để user kiểm tra lại ngành/giá, không khiến họ tưởng tool đã xác nhận biểu phí thay họ. */
.extension-import-notice {
  margin: 0 0 14px;
  padding: 10px 11px;
  border: 1px solid rgba(232, 97, 26, .42);
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--text);
  font-size: 12px;
  line-height: 1.45;
}
.extension-import-notice b { display: block; margin-bottom: 2px; font-size: 12.5px; }
.extension-import-notice em { color: var(--text-faint); font-style: normal; }

/* ---------- Popup trung tâm: duyệt toàn bộ danh mục sàn ---------- */
.cat-modal-overlay {
  position: fixed; inset: 0; z-index: 300; background: rgba(20,16,12,.55);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.cat-modal {
  width: min(980px, calc(100vw - 48px)); max-height: calc(100dvh - 48px); min-height: 0;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px;
  box-shadow: 0 30px 70px rgba(0,0,0,.45);
}
.cat-modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.cat-modal-head span { font-family: var(--font-display); font-size: 15px; font-weight: 700; }
.cat-modal-head button { border: none; background: none; color: var(--text-faint); font-size: 22px; cursor: pointer; line-height: 1; }
.cat-modal-head button:hover { color: var(--accent); }
.cat-modal-search { display: grid; gap: 5px; margin-bottom: 10px; }
.cat-modal-search span {
  color: var(--text-faint); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
}
.cat-modal-search input {
  width: 100%; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-inset); color: var(--text);
  padding: 9px 11px; font: 14px var(--font-body);
}
.cat-modal-search input:focus { outline: none; border-color: var(--accent); }
.cat-search-results { max-height: 280px; margin-bottom: 12px; flex: none; }
.cat-search-results[hidden] { display: none; }
.cat-modal-grid { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 12px; min-height: 0; flex: 1; overflow: hidden; }
.cat-modal-grid section { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.cat-modal-grid h4 {
  color: var(--text-faint); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px;
}
.cat-level { list-style: none; padding: 0; margin: 0; min-height: 0; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-inset); flex: 1; }
.cat-level button {
  width: 100%; border: none; border-bottom: 1px solid var(--line); background: transparent; color: var(--text-dim);
  padding: 9px 10px; display: flex; justify-content: space-between; gap: 8px; text-align: left; cursor: pointer;
  font-family: var(--font-body); font-size: 13px; line-height: 1.4;
}
.cat-level button span:first-child { min-width: 0; }
.cat-level li:last-child button { border-bottom: none; }
.cat-level button:hover, .cat-level button.active { background: var(--accent-soft); color: var(--text); }
.cat-level button.active { box-shadow: inset 3px 0 0 var(--accent); }
.cat-level .rate { color: var(--accent); font-family: var(--font-mono); white-space: nowrap; }
.cat-level .count { color: var(--text-faint); font-family: var(--font-mono); white-space: nowrap; }
@media (max-width: 720px) {
  .cat-modal-overlay {
    padding: max(8px, env(safe-area-inset-top, 0px)) 0 max(8px, env(safe-area-inset-bottom, 0px));
    align-items: flex-end;
  }
  .cat-modal {
    width: 100%; max-height: calc(100dvh - 16px); border-radius: 16px 16px 0 0;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }
  .cat-modal-grid {
    grid-template-columns: 1fr; grid-template-rows: repeat(3, minmax(0, 1fr));
    overflow: hidden; gap: 10px; padding-bottom: 4px;
  }
  .cat-modal-grid section {
    min-height: 0;
  }
  .cat-modal-grid h4 {
    display: block; margin: 0 0 6px; color: var(--text-faint);
    font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
  }
  .cat-level {
    max-height: none; min-height: 0; flex: 1; overflow-y: auto; border-radius: 10px;
    scroll-padding-bottom: 28px;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  }
  .cat-modal-grid .cat-level::after { content: ''; display: block; height: 28px; }
  .cat-modal-overlay:not([hidden]) ~ .mobile-summary { display: none !important; }
}

.toggle { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; cursor: pointer; font-size: 13px; }
.cofund-field { margin-top: 4px; }
.cofund-field .field-label { white-space: nowrap; }
.toggle { position: relative; }
.toggle input { display: block; position: absolute; width: 1px; height: 1px; opacity: 0; }
.toggle input:focus-visible + .tg { outline: 2px solid var(--accent); outline-offset: 3px; }
.tg { width: 34px; height: 18px; border-radius: 10px; background: var(--bg-inset); border: 1px solid var(--line); position: relative; flex-shrink: 0; transition: background .15s; }
.tg::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--text-faint); transition: all .15s; }
.toggle input:checked + .tg { background: var(--accent); border-color: var(--accent); }
.toggle input:checked + .tg::after { left: 18px; background: #fff; }

/* Nhắc rõ 4 thẻ KPI + bảng so sánh loại hình đang tính theo NGUỒN ĐƠN nào (đổi khi bấm thẻ nguồn) */
.source-note { font-size: 12px; color: var(--text-dim); margin: 0 2px 8px; }

/* ---------- Quyết định giá sàn: đưa câu trả lời chính lên trước KPI ---------- */
.decision-strip {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px;
}
.decision-card {
  background: var(--bg-panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 14px; min-width: 0;
}
.decision-main { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.decision-label {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: 4px;
}
.decision-card strong {
  display: block; font-family: var(--font-mono); font-size: 19px; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.decision-card small { display: block; color: var(--text-faint); margin-top: 4px; font-size: 11.5px; line-height: 1.35; }
.decision-state.pos strong { color: var(--green); }
.decision-state.neg strong { color: var(--red); }
@media (max-width: 900px) { .decision-strip { grid-template-columns: 1fr; } }

/* ---------- KPI strip ---------- */
.kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.kpi {
  background: var(--bg-panel); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 7px; padding: 10px 14px; min-width: 0;
}
.kpi-label { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); white-space: normal; overflow-wrap: anywhere; line-height: 1.4; min-height: 2.8em; }
.kpi-value { font-family: var(--font-mono); font-weight: 700; font-size: 17px; white-space: nowrap; margin-top: 2px; }
.kpi-value.pos { color: var(--green); } .kpi-value.neg { color: var(--red); }
.kpi-sub { font-size: 10px; color: var(--text-faint); white-space: nowrap; }

/* ---------- Source cards ---------- */
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
@media (max-width: 1180px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } }
.scard {
  background: var(--bg-panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px;
  cursor: pointer; transition: border-color .15s, transform .1s;
}
.scard:hover { transform: translateY(-2px); }
.scard.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 8px 24px rgba(0,0,0,.25); }
.scard-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.scard-title { font-family: var(--font-display); font-weight: 600; font-size: 14px; flex: none; }
.scard-hint { font-size: 10px; color: var(--text-faint); text-align: right; }
.scard-status {
  display: inline-flex; align-items: center; max-width: 100%; margin: 0 0 8px;
  padding: 3px 7px; border-radius: 999px; font-size: 10.5px; line-height: 1.25;
  color: var(--text-faint); background: var(--bg-inset); border: 1px solid var(--line);
}
.scard-status.warn { color: var(--amber); border-color: rgba(154,122,26,.45); background: rgba(154,122,26,.09); }
.scard-status.ok { color: var(--green); border-color: rgba(61,143,43,.35); background: rgba(61,143,43,.08); }
.scard-profit { font-family: var(--font-mono); font-weight: 700; font-size: 21px; }
.scard-profit.pos { color: var(--green); } .scard-profit.neg { color: var(--red); }
.scard-pct { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); margin-left: 6px; }
.scard-rows { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 8px; font-size: 12px; }
.scard-row { display: flex; justify-content: space-between; gap: 8px; color: var(--text-dim); margin-bottom: 3px; }
.scard-row span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scard-row b { font-family: var(--font-mono); font-weight: 600; color: var(--text); white-space: nowrap; }
.scard-row.suggest b { color: var(--amber); }
.scard-pct-inline { margin-left: 6px; font-family: var(--font-body); font-size: 11.5px; font-weight: 600; letter-spacing: 0; }
.scard-pct-inline.pos { color: var(--green); }
.scard-pct-inline.neg { color: var(--red); }
.scard-row b.pos { color: var(--green); }
.scard-row b.neg { color: var(--red); }
.scard-row b.pos .scard-pct-inline, .scard-row b.neg .scard-pct-inline { color: inherit; }
.scard-row.suggest b.pos { color: var(--green); }
.cmp-col.less-loss { border-color: var(--red); }
.cmp-win.neg { color: var(--red); }

/* ---------- Waterfall ---------- */
.waterfall-panel { margin-bottom: 18px; }
.wf-bar { display: flex; height: 40px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); margin-bottom: 12px; }
.wf-seg { min-width: 2px; position: relative; }
.wf-seg.profit-pos { background: var(--green); } .wf-seg.profit-neg { background: var(--red); }
.wf-legend { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 26px; }
@media (max-width: 700px) { .wf-legend { grid-template-columns: 1fr; } }
.wf-legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; column-gap: 8px; font-size: 12.5px; padding: 3px 0; min-width: 0; }
.wf-dot { width: 10px; height: 10px; border-radius: 3px; grid-column: 1; grid-row: 1; }
.wf-legend .lbl { grid-column: 2; grid-row: 1; min-width: 0; overflow-wrap: anywhere; }
.wf-legend .amt { grid-column: 3; grid-row: 1; font-family: var(--font-mono); font-weight: 600; white-space: nowrap; }
.wf-legend .note { grid-column: 2 / 4; grid-row: 2; color: var(--text-faint); font-size: 11px; line-height: 1.35; }
.wf-legend .note:empty { display: none; }

/* ---------- Charts ---------- */
.chart-row { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 14px; }
.profit-curve svg { width: 100%; max-width: 800px; height: auto; display: block; margin: 0 auto; }
.chart-label { font-family: var(--font-body); font-size: 13px; font-weight: 600; }
.chart-num { font-family: var(--font-mono); font-size: 14px; font-weight: 700; }
.source-bars { display: flex; flex-direction: column; gap: 12px; padding-top: 6px; }
.sbar-row { display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 10px; cursor: pointer; border-radius: 5px; padding: 4px 6px; }
.sbar-row:hover, .sbar-row.selected { background: var(--bg-inset); }
.sbar-label { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.sbar-track { height: 12px; background: var(--bg-inset); border-radius: 6px; overflow: hidden; }
.sbar-fill { display: block; height: 100%; border-radius: 6px; }
.sbar-fill.pos { background: var(--green); } .sbar-fill.neg { background: var(--red); }
.sbar-val { font-family: var(--font-mono); font-size: 12px; font-weight: 700; white-space: nowrap; }
.sbar-val.pos { color: var(--green); } .sbar-val.neg { color: var(--red); }

/* ---------- Compare ---------- */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.platform-compare-panel { grid-column: 1 / -1; }
@media (max-width: 700px) { .compare-grid { grid-template-columns: 1fr; } }
/* Badge kết luận gọn ở đầu dashboard — câu trả lời liếc-1-giây, viền trái đổi màu theo mức */
.decision-badge {
  display: flex; align-items: center; gap: 14px; margin-bottom: 12px;
  padding: 11px 16px; border: 1px solid var(--line);
  border-left: 4px solid var(--tier, var(--accent));
  border-radius: 8px; background: var(--bg-panel);
}
.decision-badge.is-good { --tier: var(--green); }
.decision-badge.is-ok, .decision-badge.is-warn { --tier: var(--amber); }
.decision-badge.is-bad { --tier: var(--red); }
.db-score { display: flex; align-items: baseline; flex: 0 0 auto; color: var(--tier, var(--accent)); font-family: var(--font-display); }
.db-score b { font-size: 26px; line-height: 1; font-weight: 700; }
.db-score i { font-size: 12px; font-style: normal; color: var(--text-faint); margin-left: 2px; }
.db-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.db-text strong { font-family: var(--font-display); font-size: 15px; line-height: 1.2; color: var(--text); }
.db-text span { font-size: 12px; color: var(--text-dim); line-height: 1.3; }
@media (max-width: 560px) {
  details.collapsible > summary:has(.db-score) { flex-wrap: wrap; row-gap: 4px; }
  details.collapsible > summary .db-score { flex-basis: 100%; padding-left: 20px; }
  .db-score b { font-size: 22px; }
  .db-text strong { font-size: 14px; }
}

.decision-advice-panel {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .72fr);
  gap: 18px 28px; align-items: start; padding: 0 18px 18px;
}
.decision-advice-kicker {
  display: block; color: var(--accent); font: 700 10.5px var(--font-display);
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 5px;
}
.decision-advice-panel h2 {
  font-family: var(--font-display); font-size: 18px; line-height: 1.25; margin-bottom: 5px;
}
.decision-advice-panel p { color: var(--text-dim); font-size: 12.5px; line-height: 1.45; max-width: 76ch; }
.decision-advice-list {
  list-style: none; display: grid; gap: 7px; padding: 0; margin: 0;
}
.decision-advice-list li {
  display: flex; align-items: flex-start; gap: 8px; color: var(--text-dim);
  font-size: 12px; line-height: 1.35;
}
.decision-advice-list li::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); flex: 0 0 auto; margin-top: 5px;
}
/* Breakdown điểm nhập hàng — thanh mini theo từng thành phần điểm */
.decision-score-breakdown { display: grid; gap: 5px; margin-top: 10px; max-width: 340px; }
.score-missing {
  margin-top: 12px; padding: 10px 12px; border: 1px solid var(--amber); border-radius: 6px;
  background: color-mix(in srgb, var(--amber) 10%, transparent); display: flex; align-items: center; gap: 12px;
}
.score-missing[hidden] { display: none; }
.score-missing p { margin: 0; font-size: 12px; line-height: 1.45; color: var(--text); max-width: none; }
.score-missing .tbtn { flex: none; }
@media (max-width: 560px) { .score-missing { flex-direction: column; align-items: stretch; } }
.dsb-row {
  display: grid; grid-template-columns: 118px minmax(0, 1fr) 44px;
  align-items: center; gap: 8px; font-size: 11px; color: var(--text-dim);
}
.dsb-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsb-bar {
  height: 5px; border-radius: 3px; background: var(--bg-inset);
  border: 1px solid var(--line); overflow: hidden;
}
.dsb-bar i { display: block; height: 100%; border-radius: 2px; background: var(--green); }
.dsb-bar.is-mid i { background: var(--amber); }
.dsb-bar.is-low i { background: var(--red); }
.dsb-num { font-family: var(--font-mono); font-size: 10.5px; text-align: right; }
@media (max-width: 1100px) {
  .decision-advice-panel { grid-template-columns: 1fr; }
}
.cmp-mkt-box {
  border: 1px dashed var(--line); background: var(--bg-inset); border-radius: 7px;
  padding: 10px 12px; margin: -4px 0 12px;
}
.cmp-mkt-toggle {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  color: var(--text); font-size: 12.5px; font-weight: 700;
}
.cmp-mkt-toggle input { accent-color: var(--accent); }
.cmp-mkt-note { color: var(--text-faint); font-size: 11.5px; line-height: 1.45; margin-top: 4px; }
.cmp-mkt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.cmp-mkt-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px;
  align-items: end; min-width: 0;
}
.cmp-mkt-col b {
  grid-column: 1 / -1; color: var(--text-dim); font-family: var(--font-display);
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
}
.cmp-mkt-col label { display: grid; gap: 4px; min-width: 0; }
.cmp-mkt-col label span {
  color: var(--text-dim); font-size: 10.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.cmp-mkt-col input {
  width: 100%; background: var(--bg-panel); border: 1px solid var(--line); border-radius: 5px;
  color: var(--text); font-family: var(--font-mono); font-size: 12.5px; padding: 7px 8px;
}
.cmp-mkt-col input:focus { outline: none; border-color: var(--accent); }
.cmp-mkt-col input::placeholder { color: var(--text-faint); font-family: var(--font-body); }
.cmp-col { background: var(--bg-inset); border: 1px solid var(--line); border-radius: 7px; padding: 14px 16px; }
.cmp-col.winner { border-color: var(--green); }
.cmp-col.needs-confirm { border-style: dashed; }
.cmp-confirm-note {
  grid-column: 1 / -1; border: 1px solid rgba(154,122,26,.45);
  background: rgba(154,122,26,.09); color: var(--text-dim); border-radius: 8px;
  padding: 10px 12px; font-size: 12.5px; line-height: 1.45;
}
.cmp-confirm-note b { color: var(--amber); margin-right: 4px; }
.cmp-title { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: .08em; margin-bottom: 10px; display: flex; justify-content: space-between; }
.cmp-win { color: var(--green); font-size: 11px; }
.cmp-row { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-dim); padding: 3px 0; }
.cmp-row b { font-family: var(--font-mono); color: var(--text); }
.cmp-row.main b { font-size: 16px; }
.cmp-row .pos { color: var(--green); } .cmp-row .neg { color: var(--red); }
/* Dòng ngành đã khớp + nút chỉnh tay (khớp tên tự động có thể sai — phải cho user thấy & sửa) */
.cmp-cat {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
  font-size: 12px; color: var(--text-dim); padding: 7px 0 2px;
  border-top: 1px dashed var(--line); margin-top: 6px;
}
.cmp-cat b { color: var(--text); font-weight: 600; }
.cmp-cat-tag { font-style: normal; color: var(--text-faint); font-size: 10.5px; white-space: nowrap; }
.cmp-edit {
  flex-shrink: 0; border: 1px solid var(--line); background: var(--bg-panel); color: var(--text-dim);
  border-radius: 6px; padding: 3px 9px; font: 600 11px var(--font-body); cursor: pointer; white-space: nowrap;
}
.cmp-edit:hover { border-color: var(--accent); color: var(--accent); }
.cmp-edit.needs-confirm { border-color: var(--amber); color: var(--amber); background: rgba(154,122,26,.08); }
.cmp-warn { font-size: 11.5px; color: var(--amber); padding: 4px 0 0; line-height: 1.45; }

.foot {
  display: flex; align-items: center; justify-content: flex-start; gap: 12px;
  min-height: 38px; padding: 7px 24px; border-top: 1px solid var(--line);
  font-size: 11.5px; line-height: 1.35; color: var(--text-faint);
}
.foot-main { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* Select quy mô doanh thu (bậc thuế) trên topbar */
/* Ô chọn doanh thu/năm: nhãn nổi bên trên để user mới hiểu ngay phải chọn gì */
/* "Quy mô doanh thu" gộp vào cụm loại hình (cùng khung viền) — quy mô là con của HKD/Công ty,
   dùng để tính bậc thuế. Dropdown liền mạch, cùng chiều cao nút pill (hết cảnh nhãn 2 tầng lệch). */
.scale-inline {
  display: inline-flex; align-items: center; gap: 6px;
  border-left: 1px solid var(--line); padding: 0 8px 0 12px; margin-left: 4px;
  background: transparent; cursor: help; white-space: nowrap;
}
.scale-inline-cap { font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); }
.scale-select {
  font-family: var(--font-body); font-size: 12px; padding: 6px 2px;
  border: none; background: transparent; color: var(--text); cursor: pointer; max-width: 108px;
}
.scale-select:hover { color: var(--accent); }

/* ---------- Empty state (user mới / chưa nhập đủ ngành + giá) ---------- */
#emptyState { display: none; }
.results.is-empty > *:not(#emptyState) { display: none; }
.results.is-empty #emptyState { display: flex; }
.empty-state { align-items: center; justify-content: center; min-height: 60vh; padding: 24px; }
.empty-card {
  max-width: 440px; text-align: center; background: var(--bg-panel);
  border: 1px solid var(--line); border-radius: 16px; padding: 40px 32px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.empty-ico { line-height: 0; }
.empty-ico svg { width: 42px; height: 42px; fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.empty-ico circle { fill: var(--accent); stroke: none; }
.empty-card h2 { font-family: var(--font-display); font-size: 20px; letter-spacing: .02em; color: var(--text); margin: 0; }
.empty-card p { font-size: 14px; color: var(--text-dim); line-height: 1.6; margin: 0; }
.empty-steps { list-style: none; padding: 0; margin: 6px 0 4px; display: flex; flex-direction: column; gap: 10px; text-align: left; width: 100%; max-width: 300px; }
.empty-steps li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text); }
.empty-steps li span {
  flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft);
  color: var(--accent); font-family: var(--font-display); font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}

/* Nút "Chỉ số mẫu theo ngành" — điền nhanh cho user mới chưa biết đặt số */
.preset-select {
  width: 100%; font-family: var(--font-body); font-size: 13px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg-inset);
  color: var(--text); cursor: pointer;
}
.preset-select:hover { border-color: var(--accent); }
.need-margin { color: var(--text-faint); font-weight: 400; font-size: 12px; }

/* Phương án B — "Công cụ nâng cao" gập lại: cái chính luôn hiện, mấy cái này bấm mới mở */
.collapse-head {
  font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-dim); margin: 24px 2px 4px; display: flex; align-items: baseline; gap: 10px;
}
.collapse-head span { font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-faint); }
details.collapsible { padding: 0; }
details.collapsible > summary {
  list-style: none; cursor: pointer; padding: 15px 18px; display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-dim); user-select: none;
}
details.collapsible > summary::-webkit-details-marker { display: none; }
details.collapsible > summary::before {
  content: '›'; font-size: 17px; color: var(--accent); line-height: 1; flex: none; transition: transform .18s ease;
}
details.collapsible[open] > summary::before { transform: rotate(90deg); }
details.collapsible > summary:hover { color: var(--accent); }
.col-tag { margin-left: auto; font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-faint); }
details.collapsible[open] > summary .col-tag { display: none; }
.col-body { padding: 0 18px 18px; }
.col-note { font-size: 12px; color: var(--text-faint); margin: 0 0 12px; }

/* Icon SVG trong nút toolbar (thay emoji cho tông nhất quán) */
.tbtn .ic {
  width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; margin-right: 6px; flex: none;
}

/* ---------- Toolbar hành động ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.toolbar-gap { flex: 1; }
.tbtn { display: inline-flex; align-items: center; font-family: var(--font-body); font-size: 13px; padding: 7px 12px; border-radius: 7px; border: 1px solid var(--line); background: var(--bg-panel); color: var(--text); cursor: pointer; text-decoration: none; }
.tbtn:hover { border-color: var(--accent); color: var(--accent); }
.tbtn:disabled { opacity: .7; cursor: default; }

.tbtn-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.tbtn-primary:hover { color: #fff; filter: brightness(1.04); }

/* ---------- Product tour: spotlight + bong bóng chú thích ---------- */
.tour-layer { position: fixed; inset: 0; z-index: 310; }
/* Lỗ sáng: khoét bằng box-shadow khổng lồ làm mờ toàn bộ phần còn lại. */
.tour-hole {
  position: absolute; border-radius: 8px; pointer-events: none;
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft), 0 0 0 9999px rgba(15,12,8,.66);
  transition: top .28s ease, left .28s ease, width .28s ease, height .28s ease;
}
.tour-pop {
  position: absolute; width: 366px; max-width: calc(100vw - 24px);
  background: var(--bg-panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px 12px; box-shadow: 0 20px 50px rgba(0,0,0,.4);
  transition: top .28s ease, left .28s ease;
}
.tour-pop-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.tour-count { font-family: var(--font-mono); font-size: 11px; color: var(--accent); font-weight: 700; letter-spacing: .04em; }
.tour-close { border: none; background: none; color: var(--text-faint); font-size: 20px; line-height: 1; cursor: pointer; }
.tour-close:hover { color: var(--accent); }
.tour-pop h3 { font-family: var(--font-display); font-size: 17px; line-height: 1.25; margin: 0 0 6px; text-wrap: balance; }
.tour-pop p { font-size: 13px; line-height: 1.5; color: var(--text-dim); margin: 0 0 12px; text-wrap: pretty; }
.tour-dots { display: flex; gap: 6px; margin-bottom: 12px; }
.tour-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background .2s, transform .2s; }
.tour-dot.active { background: var(--accent); transform: scale(1.25); }
/* Footer LUÔN 2 tầng: "Không hiện lại" 1 dòng trên, 3 nút dàn hàng dưới. Tránh cảnh
   nhồi 4 thứ 1 hàng làm nhãn vỡ "Bỏ / qua", "Quay / lại", "Không hiện / lại". */
.tour-foot { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.tour-dontshow { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-faint); cursor: pointer; white-space: nowrap; }
.tour-dontshow input { accent-color: var(--accent); }
.tour-actions { display: flex; align-items: center; gap: 8px; }
.tour-btn-ghost, .tour-btn-primary { white-space: nowrap; }
#tourSkip { margin-right: auto; } /* "Bỏ qua" tách sang trái, "Quay lại"+"Tiếp" dồn phải */
.tour-btn-ghost { border: 1px solid var(--line); background: none; color: var(--text-dim); border-radius: 7px; padding: 7px 13px; font: 600 12.5px var(--font-body); cursor: pointer; }
.tour-btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.tour-btn-primary { border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: 7px; padding: 7px 15px; font: 700 12.5px var(--font-body); cursor: pointer; }
.tour-btn-primary:hover { filter: brightness(1.05); }
@media (max-width: 560px) {
  .tour-pop { width: calc(100vw - 24px); }
}

/* ---------- Bảng ROI Ads ---------- */
.roi-scroll { overflow-x: auto; }
.roi-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.roi-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); padding: 6px 10px; border-bottom: 1px solid var(--line); }
.roi-table td { padding: 7px 10px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); }
.roi-table tr.roi-current td { background: var(--accent-soft); font-weight: 700; }
.roi-table tr.roi-dead td { color: var(--text-faint); }
.roi-table .roi-toggle-row td { text-align: center; border-bottom: none; padding-top: 10px; }

/* ---------- Bảng nhiều SP ---------- */
.sku-actions { display: flex; gap: 8px; margin-bottom: 10px; }
.sku-scroll { overflow-x: auto; }
.sku-modal { width: min(880px, calc(100vw - 48px)); }
.sku-modal .sku-scroll { flex: 1; min-height: 0; overflow: auto; }
.sku-modal-note { margin: 0 0 12px; }
.sku-modal-note p { margin: 0 0 6px; line-height: 1.5; }
.sku-modal-note p:last-child { margin-bottom: 0; }
.sku-note-tip { background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 8px; padding: 8px 11px; color: var(--text); }
.empty-bulk { font-size: 13px; color: var(--text-dim); margin: 4px 0 0; }
.empty-bulk-link { background: none; border: none; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; padding: 0; }
.empty-bulk-link:hover { text-decoration: underline; }
.sku-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
.sku-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.sku-table td { padding: 5px 8px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); white-space: nowrap; }
.sku-table td.pos { color: var(--green); } .sku-table td.neg { color: var(--red); }
.sku-table input { width: 100px; background: var(--bg-inset); border: 1px solid var(--line); border-radius: 5px; color: var(--text); padding: 4px 8px; font-family: var(--font-mono); font-size: 13px; }
.sku-table input.sku-name { width: 130px; font-family: var(--font-body); }
.sku-del { background: none; border: none; color: var(--text-faint); cursor: pointer; }
.sku-del:hover { color: var(--red); }
.sku-empty { color: var(--text-faint); font-family: var(--font-body); padding: 14px 8px; }
.sku-cat { color: var(--text-dim); }

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
  .brand, .platform-tabs, .top-right { width: 100%; margin-left: 0; }
  .platform-tabs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ptab { padding-inline: 8px; }
  .top-right { gap: 6px; }
  .top-right .entity-switch { flex: 1 1 auto; }
  /* Cụm thuế (loại hình + quy mô) chiếm nguyên hàng; quy mô đẩy về phải cho cân.
     Chỗ hẹp: ẩn chữ "Quy mô" (ⓘ + dropdown đã đủ rõ) + thu padding nút để không bị cắt. */
  .top-right .fiscal-group { flex: 1 1 100%; }
  .fiscal-group .scale-inline { margin-left: auto; padding: 0 6px 0 8px; gap: 4px; }
  .fiscal-group .scale-inline-cap { display: none; }
  .ebtn, .mbtn { padding-inline: 6px; letter-spacing: .03em; }
  /* Xếp lại: hàng 1 = THƯỜNG/MALL + nút sáng-tối (◐ hết lẻ loi 1 hàng); hàng 2 = cụm thuế */
  .top-right > .entity-switch:not(.fiscal-group) { order: 1; }
  #themeToggle { order: 2; }
  .top-right .fiscal-group { order: 3; }
  .layout { padding: 12px; gap: 12px; }
  .kpi-strip { grid-template-columns: repeat(2, 1fr) !important; }
  .cards { grid-template-columns: 1fr !important; }
  .compare-grid { grid-template-columns: 1fr !important; }
  .cmp-mkt-grid, .cmp-mkt-col { grid-template-columns: 1fr !important; }
  .toolbar { display: grid; grid-template-columns: 1fr 1fr; }
  .toolbar-gap { display: none; }
  .toolbar .tbtn { width: 100%; box-sizing: border-box; justify-content: center; }
  .panel-note { display: block; margin-left: 0; margin-top: 3px; }
  .tip-popover { max-width: calc(100vw - 20px); }

  /* Bảng nhiều SP + ROI: khoá tiêu đề/ô không vỡ dòng, cho vuốt ngang (giữ dạng bảng) */
  .sku-table th { white-space: nowrap; }
  .roi-table th, .roi-table td { white-space: nowrap; }

  /* 2 nút thao tác bảng SP: xếp dọc full-width để nhãn dài đủ 1 dòng (hết vỡ 2 dòng) */
  .sku-actions { flex-direction: column; }
  .sku-actions .tbtn { width: 100%; justify-content: center; }
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .foot { align-items: flex-start; padding: 9px 12px; min-height: 0; }
  .foot-main { white-space: normal; }
}

/* Sticky mini-summary chỉ hiện trên mobile sau khi có kết quả. Cộng thêm
   env(safe-area-inset-bottom) (vùng an toàn iPhone có thanh cử chỉ/toolbar Safari) vào bottom,
   tránh đè lên/bị đè bởi thanh công cụ hệ thống — lần trước bị bỏ vì thiếu đúng dòng này. */
.mobile-summary { display: none; }
@media (max-width: 720px) {
  .mobile-summary:not([hidden]) {
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 120;
    display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center;
    border: 1px solid var(--accent); border-radius: 12px; padding: 10px 12px;
    background: var(--bg-panel); color: var(--text); box-shadow: 0 14px 40px rgba(0,0,0,.28);
    text-align: left; cursor: pointer;
  }
  .mobile-summary-label {
    grid-row: 1 / span 3; align-self: center; font-size: 10px; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
    max-width: 68px; line-height: 1.4;
  }
  .mobile-summary strong { font-family: var(--font-mono); font-size: 15px; line-height: 1.1; }
  .mobile-summary strong.pos { color: var(--green); }
  .mobile-summary strong.neg { color: var(--red); }
  .mobile-summary-sub { font-size: 12px; color: var(--text-dim); }
}

/* ---------- In / Xuất PDF ---------- */
@media print {
  :root, [data-theme="dark"] { --bg: #fff; --bg-panel: #fff; --bg-inset: #f4f2ee; --text: #1a1713; --text-dim: #555; --text-faint: #888; --line: #ccc; }
  body { background: #fff; }
  .topbar .top-right, .toolbar, .tour-layer, .sku-actions, .inputs { display: none !important; }
  .layout { display: block; padding: 0; }
  .panel, .kpi, .scard { break-inside: avoid; border-color: #ccc; }
}

/* ---------- Tooltip (rê chuột/bấm hiện chú giải cho người mới) ---------- */
[data-tip]:not([data-tip=""]) { position: relative; cursor: help; }
[data-tip]:not([data-tip=""])::before { content: 'ⓘ'; font-size: 10px; color: var(--text-faint); margin-right: 4px; }
.scard-title[data-tip]::before, .kpi-label[data-tip]::before { content: ''; margin: 0; }
[data-tip]:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
/* Phần tử BẤM ĐƯỢC có data-tip → giữ con trỏ bấm (không phải dấu ?) và bỏ ⓘ ở đầu nhãn */
.tbtn[data-tip], button[data-tip], a[data-tip], .scard[data-tip], [role="button"][data-tip] { cursor: pointer; }
.tbtn[data-tip]::before, button[data-tip]::before, a[data-tip]::before { content: ''; margin: 0; }

/* Dòng chú thích biểu phí đang áp dụng — nằm dưới KPI, giải thích cho các con số */
.fee-active-note {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin: 10px 2px 24px; font-size: 12px; color: var(--text-faint);
}
.fee-active-note > span { flex: 0 1 auto; min-width: 0; }
.fee-active-note b { color: var(--text-dim); font-weight: 600; }
.fee-fresh { color: var(--green); font-weight: 600; }
.fee-fresh.is-stale { color: var(--amber); font-weight: 700; }
.fee-feedback { color: var(--accent); font-weight: 600; text-decoration: none; }
.fee-feedback:hover { text-decoration: underline; }
.source-disclosure { position: relative; flex: 0 1 auto; min-width: 0; }
.source-disclosure summary {
  list-style: none; display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  color: var(--accent); border: 1px solid rgba(35,200,190,.28); border-radius: 999px;
  background: var(--accent-soft); padding: 3px 9px; font-size: 11px; font-weight: 700; line-height: 1.2;
}
.source-disclosure summary .ic {
  width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; flex: none;
}
.fee-summary-short { display: none; }
.source-disclosure summary::-webkit-details-marker { display: none; }
.source-disclosure summary::after { content: '↗'; font-size: 12px; }
.source-disclosure[open] summary::after { content: '×'; }
.source-disclosure summary:hover { border-color: var(--accent); }
.source-popover {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 130;
  width: min(760px, calc(100vw - 72px)); max-height: min(60dvh, 520px); overflow: auto;
  background: var(--bg-panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 16px 18px; box-shadow: 0 22px 60px rgba(0,0,0,.28);
  color: var(--text-dim);
}
.source-popover h3 {
  font-family: var(--font-display); font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text); margin-bottom: 10px;
}
.source-popover section + section { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.source-popover h4 {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 4px;
}
.source-popover p { margin-top: 4px; }
.source-popover a { color: var(--accent); text-decoration: none; }
.source-popover a:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .source-disclosure { flex-basis: 100%; }
  .source-disclosure summary { max-width: 100%; }
  .toolbar .source-disclosure {
    flex-basis: auto; width: 100%; min-width: 0;
  }
  .toolbar .source-disclosure summary {
    width: 100%; box-sizing: border-box; justify-content: center;
    border-radius: 7px; border-color: var(--line); background: var(--bg-panel);
    color: var(--text); padding: 7px 12px; font-size: 13px; font-weight: 400; line-height: normal;
  }
  .toolbar .source-disclosure summary::after { display: none; }
  .toolbar .source-disclosure summary:hover,
  .toolbar .source-disclosure[open] summary {
    border-color: var(--accent); color: var(--accent);
  }
  .toolbar .source-disclosure .fee-summary-full { display: none; }
  .toolbar .source-disclosure .fee-summary-short { display: inline; }
  .source-popover { width: calc(100vw - 48px); max-height: 56dvh; padding: 14px; }
}
.tip-popover {
  position: fixed; z-index: 1000; max-width: 320px;
  background: var(--bg-inset); color: var(--text); border: 1px solid var(--accent);
  padding: 9px 12px; border-radius: 6px;
  font-family: var(--font-body); font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none;
  /* pre-line: giữ xuống dòng trong data-tip (cho bullet nhiều mức) nhưng vẫn tự wrap khi dài */
  white-space: pre-line; line-height: 1.55; text-align: left;
  box-shadow: 0 10px 26px rgba(0,0,0,.4); pointer-events: none;
}

/* Version tool ở header (cạnh "by Hoàng Tô") — bấm xem changelog. Dùng lại pattern
   .source-disclosure/.source-popover (details/summary): cuộn được + tự đóng khi bấm ra ngoài,
   thay vì hệ tooltip ngắn data-tip (không cuộn, dễ tràn khi changelog dài). */
.version-disclosure { position: relative; display: inline-block; margin-left: 10px; }
.brand-ver {
  cursor: pointer; color: var(--accent); font-family: var(--font-mono); font-weight: 600; font-size: 10px;
  padding: 2px 6px; border: 1px solid var(--line); border-radius: 5px; white-space: nowrap;
  display: inline-block; vertical-align: middle; list-style: none;
}
.brand-ver::-webkit-details-marker { display: none; }
.brand-ver:hover { border-color: var(--accent); background: var(--accent-soft); }
.version-popover h4 { font-family: var(--font-display); font-size: 12px; letter-spacing: .04em; color: var(--text); margin-bottom: 4px; }
.version-popover ul { margin: 0 0 4px; padding-left: 18px; }
.version-popover li { margin-bottom: 3px; }
.version-history { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.version-history > summary {
  list-style: none; cursor: pointer; color: var(--accent); font-weight: 800;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
.version-history > summary::-webkit-details-marker { display: none; }
.version-history > summary::after { content: ' +'; }
.version-history[open] > summary::after { content: ' ×'; }

@media (max-width: 720px) {
  .version-disclosure[open]::before {
    content: ''; position: fixed; inset: 0; z-index: 129;
    background: rgba(28, 22, 15, .18);
  }
  .version-popover {
    position: fixed; left: 16px !important; right: 16px; top: 86px; z-index: 130;
    width: auto; max-height: min(58dvh, 520px); overflow: auto;
    padding: 16px 18px; border-radius: 14px;
    font-size: 12.5px; line-height: 1.45;
    box-shadow: 0 18px 48px rgba(0,0,0,.22);
  }
  .version-popover h3 { font-size: 12px; margin-bottom: 12px; }
  .version-popover h4 { font-size: 13px; line-height: 1.35; margin-bottom: 8px; }
  .version-popover ul { padding-left: 17px; }
  .version-popover li { margin-bottom: 7px; }
  .version-popover section + section { margin-top: 10px; padding-top: 10px; }
}

/* Cảnh báo chính sách hết hạn / sắp hết hạn — hiện ngay trên caption biểu phí */
.policy-warn {
  display: flex; flex-direction: column; gap: 6px;
  margin: 10px 2px 0; padding: 9px 12px;
  border: 1px solid rgba(154, 122, 26, .45); border-radius: 8px;
  background: rgba(154, 122, 26, .09);
  font-size: 12px; line-height: 1.5; color: var(--amber);
}

/* Rà UI 05/10: các trường chi tiết dùng cùng hệ ô nhập, không thay giá trị tính. */
.policy-notes > summary { cursor: pointer; color: var(--text-dim); font-weight: 600; line-height: 1.5; }
.policy-group { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.policy-group h4 { font-size: 12px; color: var(--accent); margin-bottom: 10px; }
.policy-config .field-label { text-transform: none; letter-spacing: 0; font-size: 12px; line-height: 1.5; }
.policy-config input[type="date"], .policy-config select {
  width: 100%; min-height: 40px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 5px;
  background: var(--bg-inset); color: var(--text); font: inherit; color-scheme: light;
}
[data-theme="dark"] .policy-config input[type="date"], [data-theme="dark"] .policy-config select { color-scheme: dark; }
.policy-config .tgrow { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0; line-height: 1.5; font-size: 12px; }
.policy-config .tgrow input { flex: none; margin-top: 3px; accent-color: var(--accent); }
.policy-notes { margin-top: 16px; }
.policy-notes .note { margin-top: 8px; }
.field-error { display: block; margin-top: 5px; color: var(--red); font-size: 12px; line-height: 1.4; }
.field input[aria-invalid="true"] { border-color: var(--red); }
.scard:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.policy-config input:focus-visible, .policy-config select:focus-visible, .ptab:focus-visible,
.cat-modal button:focus-visible, .tour-pop button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 720px) { .policy-config input:not([type="checkbox"]), .policy-config select { font-size: 16px; } }

/* UI audit 05/10: prioritise decisions, keep details available without repeated summaries. */
.source-note { font-size: 12px; line-height: 1.6; margin-bottom: 10px; }
.section-heading { font-size: 13px; margin: 18px 0 10px; font-weight: 600; }
.decision-card strong { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; font-size: clamp(17px, 1.5vw, 22px); }
.decision-label { font-size: 11px; min-height: 2.8em; }
.decision-card small, .kpi-sub, .panel-note, .scard-status { font-size: 12px; white-space: normal; }
.decision-badge { padding: 10px 14px; margin-bottom: 12px; }
.calculation-details { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; background: var(--bg-panel); }
.calculation-details > summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.calculation-details[open] > summary { margin-bottom: 12px; }
.help-label { background: none; border: 0; padding: 0; text-align: left; cursor: help; font-family: inherit; }
.kpi-label { font-size: 11px; letter-spacing: .04em; }
.kpi-value { white-space: normal; overflow-wrap: anywhere; font-size: clamp(14px, 1.3vw, 18px); }
.calculation-help { font-size: 12px; line-height: 1.6; }
.calculation-help dl { max-height: 360px; overflow: auto; padding: 12px; }
.calculation-help dt { font-weight: 600; margin-top: 12px; }
.calculation-help dd { white-space: pre-line; color: var(--text-dim); }
.scard { min-width: 0; padding: 12px; }
.scard-head { display: block; min-height: 3.6em; margin-bottom: 4px; }
.scard-title { font-size: 13px; display: block; }
.scard-selected { display: block; color: var(--accent); font-size: 11px; min-height: 1.5em; }
.scard-status { display: block; min-height: 4.5em; border: 0; border-radius: 4px; padding: 4px 6px; margin-bottom: 8px; }
.scard-profit { font-size: clamp(14px, 1.4vw, 20px); overflow-wrap: anywhere; }
.scard-pct { margin-left: 0; font-size: 12px; }
.source-details { display: block; overflow-x: auto; }
/* Bảng theo nguồn: nhãn dòng ở cột trái, 4 cột nguồn rộng bằng nhau, mọi dòng cao đều theo ô cao nhất */
.src-table { width: 100%; min-width: 620px; table-layout: fixed; border-collapse: collapse; }
.src-table th, .src-table td { padding: 9px 10px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.src-table thead th { border-top: 0; font-size: 13px; font-weight: 600; color: var(--text); vertical-align: bottom; }
.src-table th:first-child { width: 25%; font-size: 12px; font-weight: 500; color: var(--text-dim); position: sticky; left: 0; background: var(--bg-panel); }
.src-table th:first-child small { display: block; font-size: 11px; color: var(--text-faint); font-weight: 400; margin-top: 2px; }
.src-table .num b { display: block; font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; }
.src-table .num small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.src-table .num .pos { color: var(--green); }
.src-table .num .neg { color: var(--red); }
.src-table .sel { background: var(--bg-inset); }
.scard-row { display: block; margin: 10px 0; }
.scard-row span:first-child { white-space: normal; overflow: visible; font-size: 12px; }
.scard-row b { display: block; white-space: normal; overflow-wrap: anywhere; font-size: 13px; }
.platform-compare-panel { margin-bottom: 14px; }
.sbar-row { width: 100%; background: transparent; border: 1px solid transparent; font-family: inherit; text-align: left; min-height: 44px; }
.sbar-row:focus-visible, .help-label:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.mobile-jump { display: none; }
.input-group { border-top: 1px solid var(--line); margin-top: 12px; }
.input-group > summary { list-style: none; position: relative; padding: 12px 0 12px 18px; font-weight: 600; min-height: 44px; cursor: pointer; }
.input-group > summary::-webkit-details-marker { display: none; }
.input-group > summary::before {
  content: '›'; position: absolute; left: 2px; top: 9px; font-size: 17px; line-height: 1; color: var(--accent); transition: transform .18s ease;
}
.input-group[open] > summary::before { transform: rotate(90deg); }
.input-group > summary:hover { color: var(--accent); }
.input-group .group-title { display: none; }
.input-group[open] > summary { padding-bottom: 8px; }
.source-jump { margin: 8px 0; }
@media (max-width: 980px) {
 .mobile-jump { display: flex; gap: 8px; padding: 10px 12px 0; }
 .mobile-jump button { flex: 1; min-height: 44px; background: var(--bg-panel); color: var(--text); border: 1px solid var(--line); border-radius: 6px; font: inherit; }
 .decision-strip { scroll-margin-top: 12px; }
}
@media (max-width: 720px) {
 .ptab, .ebtn, .mbtn, .pvbtn, .theme-toggle, .tbtn, .source-disclosure summary { min-height: 44px; }
 .theme-toggle { min-width: 44px; }
 .decision-card strong { font-size: 22px; }
 .decision-label { min-height: 0; }
 .cards { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px; }
 .scard-head { min-height: 4.5em; }
 .scard-profit { font-size: 16px; }
 .scard-status { font-size: 11px; min-height: 4.7em; }
 .calculation-details { padding: 12px; }
 .db-score { display: block; }
}
@media print {
 details:not(.input-group) > :not(summary) { display: block !important; }
 .mobile-jump, .source-jump { display:none !important; }
 .input-group > :not(summary) { display: block; }
}

.scard-head { height: 62px; min-height: 0; }
.scard-status { height: 64px; min-height: 0; }
.group-state { display:block; font-weight:400; font-size:12px; color:var(--text-dim); line-height:1.5; margin-top:2px; }
.group-state.is-warn, .policy-status.is-warn { color: var(--amber); }
.policy-status:empty { display: none; }
@media (max-width: 720px) { .scard-head { height:78px; } .scard-status { height:64px; min-height:0; } }

@media (min-width: 721px) { .scard-status { height:44px; } }

.scard-head { display:grid; grid-template-columns: minmax(0,1fr) 14px; align-items:start; height:44px; }
.scard-selected { font-size:14px; min-height:0; }
.scard-status { line-height:1.4; }


/* Thanh thương hiệu Tanomi (thay thanh Zord dùng chung) */

/* Biên an toàn dưới 3 thẻ quyết định + cảnh báo ô VXP gộp (v1.4.2) */
.price-cushion { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; }
.price-cushion:empty { display: none; }
.cushion-line { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-panel); font-size: 12.5px; line-height: 1.55; color: var(--text-dim); }
.cushion-line.warn { border-color: rgba(154, 122, 26, .45); background: rgba(154, 122, 26, .09); color: var(--amber); }
.field-warn { color: var(--amber); }

/* Đối chiếu đơn thật (v1.4.2) */
.recon-text { width: 100%; min-height: 120px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-inset); color: var(--text); font-family: var(--font-mono); font-size: 12px; line-height: 1.5; resize: vertical; }
.recon-fields { margin: 10px 0; }
.recon-result { margin-top: 12px; }
.recon-scroll { overflow-x: auto; }
.recon-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.recon-table th, .recon-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.recon-table .num { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.recon-table tr.recon-ok td:last-child { color: var(--green); }
.recon-table tr.recon-warn td:last-child { color: var(--amber); }
.recon-table tr.recon-bad td:last-child { color: var(--red); }
.recon-sum { margin: 8px 0; font-size: 12.5px; line-height: 1.55; color: var(--text-dim); }
.recon-msg { margin: 8px 0; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-panel); font-size: 12.5px; line-height: 1.55; color: var(--text-dim); }
.recon-msg.warn { border-color: rgba(154, 122, 26, .45); background: rgba(154, 122, 26, .09); color: var(--amber); }

/* Lưu ý sử dụng / miễn trừ trách nhiệm (v1.4.3) */
.disclaimer-line { margin: 0 0 12px; padding: 8px 12px; border-left: 3px solid var(--amber); border-radius: 4px; background: var(--bg-panel); font-size: 12px; line-height: 1.55; color: var(--text-dim); }
.disclaimer-line b { color: var(--amber); }
.disclaimer-line a { color: var(--accent); white-space: nowrap; }
.foot-legal { align-items: flex-start; }
.foot-legal .foot-main { white-space: normal; overflow: visible; text-overflow: clip; font-size: 12px; line-height: 1.6; }
.foot-title { margin: 0 0 4px; font-weight: 700; color: var(--text-dim); }
.foot-list { margin: 0 0 6px; padding-left: 18px; }
.foot-list li { margin: 0 0 3px; }
.foot-note { margin: 0; color: var(--text-faint); }
.recon-foot { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--text-faint); }

/* Mô phỏng SFR (v1.4.5) */
.sfr-sim { margin: 6px 0 12px; }
.sfr-sim .field-hint { margin-top: 6px; }

/* Danh sách khoản phí đã/chưa kiểm chứng (v1.4.6) */
.verify-note { margin: 4px 0 8px; }
.verify-note > summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.verify-note p { margin: 6px 0 0; }

/* Dải báo có bản mới (v1.4.7) */
.update-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; padding: 8px 16px; border-bottom: 1px solid rgba(154, 122, 26, .45); background: rgba(154, 122, 26, .16); color: var(--amber); font-size: 13px; line-height: 1.5; }
.update-banner b { font-weight: 700; }
@media print { .update-banner { display: none !important; } }

/* Đối chiếu đơn thật: tải ảnh + hướng dẫn chụp */
.recon-photo { margin: 10px 0 12px; padding: 12px; border: 1px dashed var(--line); border-radius: 10px; background: var(--bg-inset); }
.recon-photo-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.recon-file { cursor: pointer; display: inline-flex; align-items: center; }
.recon-photo-tip { font-size: 12px; color: var(--text-faint); flex: 1 1 220px; }
.recon-ocr-status { margin-top: 8px; font-size: 12.5px; color: var(--text-dim); }
.recon-ocr-status.bad { color: var(--red); }
.recon-guide { margin-top: 8px; font-size: 12.5px; }
.recon-guide > summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.recon-guide-body { margin-top: 8px; color: var(--text-dim); }
.recon-guide-body p { margin: 8px 0 4px; color: var(--text); }
.recon-guide-body ol, .recon-guide-body ul { margin: 0 0 6px; padding-left: 20px; }
.recon-guide-body li { margin: 3px 0; }

.recon-guide-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.recon-guide-cols img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); margin-top: 6px; display: block; }
.recon-guide-note { font-size: 11.5px; color: var(--text-faint); margin-top: 8px; }
@media (max-width: 720px) { .recon-guide-cols { grid-template-columns: 1fr; } }

/* Hộp Đối chiếu đơn thật dài (ảnh, hướng dẫn, bảng kết quả): cho cuộn trong hộp thay vì bị cắt */
#reconModal .cat-modal { display: block; overflow-y: auto; overscroll-behavior: contain; }
#reconModal .cat-modal-head { position: sticky; top: -18px; z-index: 2; background: var(--bg-panel); padding: 18px 0 8px; margin: -18px 0 4px; }

.view-switch { width: fit-content; max-width: 100%; margin: 4px 0 12px; }
.view-switch .pvbtn { font-size: 12px; padding: 7px 12px; min-height: 34px; }
@media (max-width: 720px) { .view-switch { width: 100%; } .view-switch .pvbtn { padding-inline: 6px; white-space: normal; line-height: 1.2; } }