/* RunViet CRM — giao diện. Không CDN: font tự host, biểu đồ SVG tay, không thư viện ngoài.
   Bảng màu lấy từ logo: than chì + vàng hổ phách. Vàng CHỈ dùng cho thương hiệu và điểm nhấn;
   màu trạng thái (duyệt/chờ/rác) tách riêng để không lẫn với màu nhận diện. */

@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/bvp-600.woff2") format("woff2");
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/bvp-700.woff2") format("woff2");
}

:root {
  --brand-ink:#232833;  --brand-amber:#FFB300;
  --logo-url:url("/assets/logo.svg");

  --bg:#f5f6f8;  --surface:#fff;  --surface-2:#eef0f4;  --line:#dcdfe6;
  --ink:#232833;  --ink-2:#525a6b;  --ink-3:#858da0;
  --accent:#E39400;  --accent-soft:#fdf0d2;
  --ok:#12805a;  --ok-soft:#dcf0e7;
  --warn:#2f6fd0;  --warn-soft:#e2ecfb;
  --bad:#c2443a;  --bad-soft:#fbe4e2;
  --shadow:0 1px 2px rgba(35,40,51,.06), 0 8px 24px rgba(35,40,51,.06);
  --radius:10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand-ink:#e8eaef;  --brand-amber:#FFC33D;
    --logo-url:url("/assets/logo-dark.svg");
    --bg:#14161c;  --surface:#1c1f27;  --surface-2:#242833;  --line:#333846;
    --ink:#e8eaef;  --ink-2:#a6adbd;  --ink-3:#767e91;
    --accent:#FFC33D;  --accent-soft:#332918;
    --ok:#4cbb8c;  --ok-soft:#132a22;
    --warn:#6fa2f0;  --warn-soft:#16233a;
    --bad:#e07a70;  --bad-soft:#2f1b19;
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.3);
  }
}
[data-theme="dark"] {
  --brand-ink:#e8eaef;  --brand-amber:#FFC33D;
  --logo-url:url("/assets/logo-dark.svg");
  --bg:#14161c;  --surface:#1c1f27;  --surface-2:#242833;  --line:#333846;
  --ink:#e8eaef;  --ink-2:#a6adbd;  --ink-3:#767e91;
  --accent:#FFC33D;  --accent-soft:#332918;
  --ok:#4cbb8c;  --ok-soft:#132a22;
  --warn:#6fa2f0;  --warn-soft:#16233a;
  --bad:#e07a70;  --bad-soft:#2f1b19;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.3);
}

* { box-sizing:border-box; }
/* height:100% trên body (đặt để căn giữa trang đăng nhập) làm hỏng cuộn ở trang app:
   body là grid container nên nội dung tràn ra ngoài vùng cao đúng 100vh. */
html { height:100%; }
body { min-height:100%; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.55 ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}
button, input, select { font:inherit; color:inherit; }
a { color:inherit; text-decoration:none; }
.num, td.num, .kpi-val { font-variant-numeric:tabular-nums; }

/* Chữ thương hiệu + tiêu đề + số KPI dùng font của logo (tự host, có tiếng Việt đầy đủ) */
.brand strong, .login-brand strong, .kpi-val, .card > header h3, .drawer-panel > header h3,
h3, h4, .btn-primary {
  font-family:"Be Vietnam Pro", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing:-.015em;
}
.brand strong, .login-brand strong { font-weight:700; }

/* ───────────── đăng nhập ───────────── */
.login-page { display:grid; place-items:center; padding:24px; min-height:100vh; }
.login-card {
  width:100%; max-width:380px; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:28px; box-shadow:var(--shadow); display:grid; gap:14px;
}
.login-brand { display:flex; gap:12px; align-items:center; margin-bottom:6px; }
.login-brand strong { display:block; font-size:17px; letter-spacing:-.01em; }
.login-brand span { font-size:12.5px; color:var(--ink-3); }
.dot-logo {
  width:30px; height:24px; flex:none;
  background:var(--logo-url) center/contain no-repeat;
}
.login-brand .dot-logo { width:44px; height:36px; }
.brand strong .amber, .login-brand strong .amber { color:var(--brand-amber); }
.field { display:grid; gap:6px; }
.field span { font-size:12.5px; color:var(--ink-2); }
.field input {
  padding:10px 12px; border:1px solid var(--line); border-radius:8px;
  background:var(--bg); outline:none;
}
.field input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.btn-primary {
  padding:11px 14px; border:0; border-radius:9px; cursor:pointer; font-weight:700;
  background:var(--brand-amber); color:#232833;   /* vàng nền -> chữ than mới đủ tương phản */
}
.btn-primary:hover { filter:brightness(1.06); }
.login-error:not(:empty) {
  margin:0; padding:9px 12px; border-radius:8px; font-size:13.5px;
  background:var(--bad-soft); color:var(--bad);
}
.login-error:empty { display:none; }
.login-foot { margin:0; font-size:12px; color:var(--ink-3); text-align:center; }

/* ───────────── khung ứng dụng ───────────── */
body:not(.login-page) { display:grid; grid-template-columns:212px 1fr; }
.sidebar {
  background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; padding:16px 12px; gap:18px; height:100vh; position:sticky; top:0;
}
.brand { display:flex; gap:10px; align-items:center; padding:4px 6px; }
.brand strong { font-size:15px; letter-spacing:-.01em; }
#nav { display:grid; gap:2px; }
#nav a {
  display:flex; gap:10px; align-items:center; padding:9px 10px; border-radius:8px;
  color:var(--ink-2); font-size:14px;
}
#nav a:hover { background:var(--surface-2); color:var(--ink); }
#nav a.on {
  background:var(--surface-2); color:var(--ink); font-weight:600;
  box-shadow:inset 3px 0 0 var(--brand-amber);
}
.ico { width:16px; text-align:center; opacity:.85; }
.side-foot { margin-top:auto; display:grid; gap:8px; padding:10px 8px; border-top:1px solid var(--line); }
.who { display:flex; gap:8px; align-items:center; font-size:13px; }
.chip {
  font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;
  padding:2px 6px; border-radius:999px; background:var(--surface-2); color:var(--ink-3);
}
.logout { font-size:12.5px; color:var(--ink-3); background:none; border:0; padding:0; cursor:pointer; font-family:inherit; }
.logout:hover { color:var(--bad); }

.main { min-width:0; display:flex; flex-direction:column; }
.topbar {
  position:sticky; top:0; z-index:5; display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  padding:12px 20px; background:var(--surface); border-bottom:1px solid var(--line);
}
.preset {
  padding:7px 11px; border:1px solid var(--line); border-radius:9px; background:var(--surface);
  font-size:13.5px; font-weight:600; cursor:pointer; min-width:132px;
}
.preset:focus { outline:none; border-color:var(--brand-amber); box-shadow:0 0 0 3px var(--accent-soft); }

.ranges { display:flex; gap:4px; background:var(--surface-2); padding:3px; border-radius:9px; }
.ranges button {
  border:0; background:transparent; padding:6px 11px; border-radius:7px; cursor:pointer;
  font-size:13px; color:var(--ink-2);
}
.ranges button.on { background:var(--surface); color:var(--ink); font-weight:600; box-shadow:var(--shadow), inset 0 -2px 0 var(--brand-amber); }
.ranges button:disabled { opacity:.35; cursor:not-allowed; }
.ranges .sm { display:none; }
.cur-switch button { padding:6px 9px; font-size:12px; font-weight:600; letter-spacing:.01em; }
.dates { display:flex; gap:6px; align-items:center; font-size:13px; color:var(--ink-3); }
.dates input { padding:6px 8px; border:1px solid var(--line); border-radius:7px; background:var(--bg); }
.top-actions { margin-left:auto; display:flex; gap:8px; align-items:center; }
.toggle { display:flex; gap:6px; align-items:center; font-size:12.5px; color:var(--ink-2); cursor:pointer; }
.btn-ghost {
  border:1px solid var(--line); background:var(--surface); border-radius:8px;
  padding:6px 10px; cursor:pointer; color:var(--ink-2);
}
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); }

.view { padding:20px; display:grid; gap:16px; align-content:start; }
/* Grid item mặc định có min-width:auto nên KHÔNG co dưới kích thước nội dung — bảng rộng
   hay dãy nút dài sẽ phình cả thẻ ra ngoài khung. Đây là gốc của mọi vụ tràn ngang. */
.view > *, .grid-2 > *, .page-bar > * { min-width:0; }
.loading, .empty { padding:40px; text-align:center; color:var(--ink-3); }

/* ───────────── KPI ───────────── */
.kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(178px,1fr)); gap:12px; }
.kpi {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:13px 14px; box-shadow:var(--shadow);
}
.kpi-label { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); }
.kpi-val { font-size:24px; font-weight:700; letter-spacing:-.02em; margin-top:3px; }
.kpi-sub { font-size:12px; color:var(--ink-3); margin-top:2px; }
.kpi-sub.up { color:var(--ok); } .kpi-sub.down { color:var(--bad); }

/* ───────────── thẻ ───────────── */
.card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden;
}
.card > header {
  display:flex; align-items:center; gap:10px; padding:15px 20px; border-bottom:1px solid var(--line);
}
.card > header h3 { margin:0; font-size:14px; font-weight:600; }
.card > header .muted { margin-left:auto; font-size:12px; color:var(--ink-3); }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:1000px) { .grid-2 { grid-template-columns:1fr; } }

/* ───────────── bảng ───────────── */
.tablewrap { overflow-x:auto; }
table { border-collapse:collapse; width:100%; }
th {
  position:sticky; top:0; background:var(--surface-2); z-index:1;
  font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3);
  text-align:left; font-weight:600; padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap;
}
/* Chữ ở cột đầu và cột cuối dính sát mép thẻ trông như bị cắt. Đẩy vào cho bằng
   khoảng thở của phần đầu thẻ. */
th:first-child, td:first-child { padding-left:20px; }
th:last-child,  td:last-child  { padding-right:20px; }
td { padding:10px 12px; border-bottom:1px solid var(--line); font-size:13.5px; white-space:nowrap; }
tbody tr:last-child td { border-bottom:0; }
tbody tr.click { cursor:pointer; }
tbody tr.click:hover { background:var(--surface-2); }
td.right, th.right { text-align:right; }
.mono { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12.5px; }
.dim { color:var(--ink-3); }

/* ───────────── pill trạng thái ───────────── */
.pill {
  display:inline-block; padding:2px 9px; border-radius:999px; font-size:11.5px; font-weight:600;
  background:var(--surface-2); color:var(--ink-2);
}
.pill.approved, .pill.paid, .pill.shipped { background:var(--ok-soft); color:var(--ok); }
.pill.pending, .pill.new, .pill.hold { background:var(--warn-soft); color:var(--warn); }
.pill.trash, .pill.rejected, .pill.cancelled, .pill.duplicate { background:var(--bad-soft); color:var(--bad); }
.tag {
  font-size:11px; padding:1px 6px; border-radius:5px; background:var(--surface-2); color:var(--ink-3);
}

/* ───────────── biểu đồ ───────────── */
.chart { position:relative; }
.hit { fill:transparent; cursor:crosshair; }
.guide { stroke:var(--ink-3); stroke-width:1; stroke-dasharray:3 3; opacity:0; pointer-events:none; }
.bar { transition:fill-opacity .12s; }
.bar.hot { fill-opacity:.75; }
.dot-pt { fill:var(--warn); opacity:0; }
.dot-pt.hot { opacity:1; r:4; }
.chart-tip {
  position:absolute; z-index:9; pointer-events:none; min-width:132px;
  background:var(--surface); border:1px solid var(--line); border-radius:9px;
  padding:8px 10px; box-shadow:var(--shadow); font-size:12.5px; line-height:1.6;
}
.chart-tip .tip-title { font-weight:700; margin-bottom:3px; font-size:13px; }
.chart-tip b { font-variant-numeric:tabular-nums; }
.sw { display:inline-block; width:9px; height:3px; border-radius:2px; margin-right:6px; vertical-align:middle; }
.sw-amber { background:var(--brand-amber); }
.sw-blue  { background:var(--warn); }
.legend { font-size:12px; display:flex; gap:16px; padding-top:6px; flex-wrap:wrap; }
.chart { padding:14px; }
.chart svg { display:block; width:100%; height:210px; overflow:visible; }
.bar { fill:var(--brand-amber); }
.bar.current {
  fill:var(--brand-amber); fill-opacity:.22;
  stroke:var(--brand-amber); stroke-width:1.5; stroke-dasharray:4 3;
}
.barcell { width:110px; padding-right:14px; }
.minibar { display:block; height:6px; border-radius:3px; background:var(--brand-amber); opacity:.7; min-width:2px; }
.gridline { stroke:var(--line); stroke-width:1; }
.axis-label { fill:var(--ink-3); font-size:10px; }
.spark { width:100%; height:26px; margin-top:6px; display:block; }

/* ───────────── bộ lọc ───────────── */
.filters { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.filters select, .filters input[type="search"] {
  padding:7px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface); font-size:13px;
}
.filters input[type="search"] { min-width:220px; }

/* ───────────── thanh công cụ của từng trang ───────────── */
.page-bar {
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.range-picker {
  display:flex; gap:6px; align-items:center; margin-left:auto; flex-wrap:wrap; max-width:100%;
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:4px 6px; box-shadow:var(--shadow);
}
.range-picker select {
  border:0; background:transparent; font-size:13.5px; font-weight:600;
  padding:5px 6px; cursor:pointer; outline:none;
}
.range-picker input[type="date"] {
  border:0; background:transparent; font-size:13px; padding:5px 4px; outline:none;
  color:var(--ink-2); font-variant-numeric:tabular-nums;
}
.range-picker .dash { color:var(--ink-3); font-size:12px; }
.card > header .range-picker { margin-left:auto; }

.page-title { margin:0; font-size:17px; font-weight:700; letter-spacing:-.01em;
  font-family:"Be Vietnam Pro", ui-sans-serif, sans-serif; }

/* ───────────── mini tab trong Báo cáo ───────────── */

.ranges.tabs { align-self:start; }
.ranges.tabs button { padding:7px 14px; }

/* ───────────── danh mục offer gộp theo sản phẩm ───────────── */
.group-table td { vertical-align:middle; }
.group-table tr.grp { cursor:pointer; }
.group-table tr.grp:hover { background:var(--surface-2, rgba(0,0,0,.02)); }
.group-table .caret { display:inline-block; width:14px; color:var(--ink-3); font-size:11px; }
.group-table .g-name b { font-weight:600; }
.group-table .g-sub { font-size:11.5px; margin-left:14px; }
.group-table .g-geo { line-height:1.9; }
.group-table .g-pack { margin-top:3px; }
.group-table .g-pack .tag { font-size:10.5px; }

/* Dòng chi tiết bị ẩn bằng thuộc tính `hidden`, mà ở khổ điện thoại `tbody tr` được đặt
   display:grid — quy tắc của mình luôn thắng display:none của trình duyệt, nên phải ẩn
   lại bằng CSS. Bỏ dòng này là mọi nhóm bung hết trên điện thoại. */
.group-table tbody tr[hidden] { display:none; }

.chip {
  display:inline-block; padding:1px 4px; margin-right:2px; border-radius:5px;
  background:var(--surface-2, rgba(0,0,0,.04)); font-size:13px; line-height:1.5;
}
.chip.more { font-size:11px; color:var(--ink-3); padding:2px 5px; }

.subtable { width:100%; border-collapse:collapse; margin:2px 0 6px 14px; }
.subtable thead th {
  text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-3); font-weight:600; padding:2px 10px 4px 0; border-bottom:1px solid var(--line);
}
.subtable thead th.right { text-align:right; }
.subtable td { padding:5px 10px 5px 0; border-bottom:1px solid var(--line); font-size:12.5px; }
.subtable tr:last-child td { border-bottom:0; }

/* ───────────── danh mục offer ───────────── */
.offers-table td { vertical-align:top; }
.offers-table .o-meta { display:none; }   /* dòng gộp chỉ dùng cho thẻ trên điện thoại */
.offers-table td b { font-weight:600; }
.btn-sm { padding:4px 9px; font-size:12px; display:inline-block; }
.card > header input[type="search"] {
  padding:7px 10px; border:1px solid var(--line); border-radius:8px;
  background:var(--surface); font-size:13px; flex:1; min-width:180px;
}

/* ───────────── chọn cột ───────────── */
.cols-box { position:relative; }
.cols-box > summary { list-style:none; cursor:pointer; user-select:none; }
.cols-box > summary::-webkit-details-marker { display:none; }
.cols-box > summary::after { content:" ▾"; }
.cols-list {
  position:absolute; right:0; top:calc(100% + 6px); z-index:12; width:260px;
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow); padding:10px; display:grid; gap:2px; max-height:60vh; overflow:auto;
}
.cols-list label {
  display:flex; gap:8px; align-items:center; padding:5px 7px; border-radius:6px;
  font-size:13px; cursor:pointer;
}
.cols-list label:hover { background:var(--surface-2); }
.cols-list button { margin-top:6px; }

/* ───────────── drawer ───────────── */
.drawer { position:fixed; inset:0; z-index:20; }
.drawer-bg { position:absolute; inset:0; background:rgba(8,16,15,.45); }
.drawer-panel {
  position:absolute; top:0; right:0; height:100%; width:min(520px, 100%);
  background:var(--surface); border-left:1px solid var(--line);
  display:flex; flex-direction:column; animation:slide .18s ease-out;
}
@keyframes slide { from { transform:translateX(24px); opacity:.4; } to { transform:none; opacity:1; } }
@media (prefers-reduced-motion: reduce) { .drawer-panel { animation:none; } }
.drawer-panel > header {
  display:flex; align-items:center; padding:14px 16px; border-bottom:1px solid var(--line);
}
.drawer-panel > header h3 { margin:0; font-size:15px; }
.drawer-panel > header button { margin-left:auto; }
#drawer-body { padding:16px; overflow:auto; display:grid; gap:16px; }
.kv { display:grid; grid-template-columns:130px 1fr; gap:6px 12px; font-size:13.5px; }
.kv dt { color:var(--ink-3); }
.kv dd { margin:0; word-break:break-word; }
.timeline { display:grid; gap:0; }
.tl-item { display:grid; grid-template-columns:16px 1fr; gap:10px; padding-bottom:14px; position:relative; }
.tl-item::before {
  content:""; position:absolute; left:7px; top:16px; bottom:0; width:1px; background:var(--line);
}
.tl-item:last-child::before { display:none; }
.tl-dot { width:9px; height:9px; border-radius:50%; background:var(--accent); margin-top:5px; }
.tl-body { font-size:13px; }
.tl-time { font-size:11.5px; color:var(--ink-3); }

/* ───────────── responsive ───────────── */
@media (max-width:820px) {
  body:not(.login-page) {
    grid-template-columns:1fr;
    /* chừa chỗ cho thanh tab dưới đáy */
    padding-bottom:58px;
  }

  /* Menu ngang cuộn được thì người dùng không biết còn mục bị khuất.
     Trên điện thoại chuyển hẳn thành thanh tab dưới đáy, vừa tầm ngón cái. */
  .sidebar {
    position:fixed; bottom:0; left:0; right:0; top:auto; z-index:20;
    height:auto; flex-direction:row; align-items:stretch; gap:0; padding:0;
    border-right:0; border-top:1px solid var(--line);
    box-shadow:0 -2px 12px rgba(0,0,0,.06);
  }
  .brand { display:none; }
  /* minmax(0,1fr) + min-width:0 để mục tab co được; nếu không, bề rộng tối thiểu của
     chữ ("Tổng quan") đặt sàn cho cả thanh và kéo TOÀN TRANG tràn ngang. */
  #nav { flex:1; min-width:0; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:0; }
  #nav a {
    min-width:0; flex-direction:column; justify-content:center; gap:2px; padding:7px 2px;
    border-radius:0; font-size:10.5px; text-align:center; line-height:1.2;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .sidebar { max-width:100%; overflow:hidden; }
  #nav a.on { background:transparent; box-shadow:inset 0 2px 0 var(--brand-amber); color:var(--ink); }
  .ico { width:auto; font-size:15px; }
  .side-foot { display:none; }

  .topbar { padding:9px 12px; gap:8px; }
  /* Ô ngày có bề rộng nội tại khá lớn; không cho co thì nó đẩy cả trang tràn ngang. */
  .page-bar { max-width:100%; }
  .range-picker { margin-left:0; width:100%; box-sizing:border-box; }
  .range-picker select { width:100%; }
  .range-picker input[type="date"] { flex:1 1 40%; min-width:0; width:auto; font-size:12.5px; }
  .range-picker .dash { display:none; }
  .page-title { font-size:15px; }
  .ranges {
    flex:1; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .ranges::-webkit-scrollbar { display:none; }
  .ranges button { padding:6px 9px; font-size:12.5px; white-space:nowrap; }
  .ranges .lg { display:none; }
  .ranges .sm { display:inline; }
  .ranges { overflow:visible; }
  .top-actions { margin-left:0; }
  .cur-switch button { padding:5px 7px; font-size:11.5px; }

  /* Chỉ rút gọn nhãn công tắc TRÊN THANH CÔNG CỤ; công tắc trong trang giữ nguyên chữ. */
  .top-actions .toggle span { display:none; }
  .top-actions .toggle::after { content:"test"; font-size:12px; color:var(--ink-2); }

  .view { padding:12px; gap:12px; }

  /* Hai cột; thẻ cuối lẻ thì cho chiếm trọn hàng, khỏi trơ trọi một mình */
  .kpis { grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
  .kpi { padding:10px 11px; }
  .kpi:last-child:nth-child(odd) { grid-column:span 2; }
  .kpi-val { font-size:19px; }
  .chart { padding:10px; }
  .chart svg { height:190px; }
  .grid-2 { gap:12px; }

  /* Bảng đơn 10 cột trên điện thoại phải kéo ngang mới đọc được -> đổi thành thẻ.
     Ẩn cột phụ, gom thông tin chính thành 3 dòng. */
  #leads-table thead { display:none; }
  #leads-table tbody tr {
    display:grid; grid-template-columns:1fr auto; gap:1px 10px;
    padding:11px 12px; border-bottom:1px solid var(--line);
  }
  /* Thẻ trên điện thoại chỉ giữ 4 ô cốt lõi + dòng gộp; cột tuỳ chọn bật thêm ở máy tính
     sẽ không hiện ở đây để thẻ không vỡ. Muốn xem đủ thì mở drawer. */
  #leads-table td { display:none; border:0; padding:0; white-space:normal; font-size:13px; }
  #leads-table td.c-offer, #leads-table td.c-status,
  #leads-table td.c-meta, #leads-table td.c-payout, #leads-table td.c-cust { display:block; }
  /* Ô thông báo (đang tải / không có đơn) không mang class cột nên phải cho hiện lại,
     nếu không bảng rỗng trông như bị treo. */
  #leads-table td.c-full { display:block; grid-column:1 / -1; text-align:center; padding:22px 0; }

  /* Bảng gộp trên điện thoại: tên + trạng thái một hàng, GEO và tiền hàng dưới. */
  .group-table thead { display:none; }
  .group-table tbody tr.grp {
    display:grid; grid-template-columns:1fr auto; gap:2px 10px;
    padding:12px; border-bottom:1px solid var(--line);
  }
  .group-table tbody tr.grp td { border:0; padding:0; white-space:normal; font-size:13px; }
  .group-table td.g-name   { grid-column:1; grid-row:1; }
  .group-table td.g-status { grid-column:2; grid-row:1; text-align:right; }
  .group-table td.g-geo    { grid-column:1 / -1; grid-row:2; }
  .group-table td.g-pay    { grid-column:1; grid-row:3; text-align:left; }
  .group-table td.g-rev    { grid-column:2; grid-row:3; text-align:right; }
  .group-table tbody tr.grp-detail td { padding:0 12px 10px; }
  .subtable { margin-left:0; }
  .subtable thead { display:none; }
  .subtable td { display:inline-block; padding:2px 8px 2px 0; border:0; }
  .subtable tr { display:block; padding:5px 0; border-bottom:1px solid var(--line); }

  /* Danh mục offer cũng đổi thành thẻ, khỏi kéo ngang 10 cột */
  .offers-table thead { display:none; }
  .offers-table tbody tr {
    display:grid; grid-template-columns:1fr auto; gap:2px 10px;
    padding:12px; border-bottom:1px solid var(--line);
  }
  .offers-table td { display:none; border:0; padding:0; white-space:normal; font-size:13px; }
  .offers-table td.o-name   { display:block; grid-column:1; grid-row:1; }
  .offers-table td.o-status { display:block; grid-column:2; grid-row:1; text-align:right; }
  .offers-table td.o-meta   { display:block; grid-column:1; grid-row:2; color:var(--ink-3); font-size:12px; }
  .offers-table td.o-payout { display:block; grid-column:2; grid-row:2; text-align:right; }
  .offers-table td.o-act    { display:block; grid-column:1 / -1; grid-row:3; text-align:left; padding-top:6px; }
  .offers-table td.o-name .o-sku { font-size:11.5px; }
  td.c-offer  { grid-column:1; grid-row:1; font-weight:600; }
  td.c-status { grid-column:2; grid-row:1; text-align:right; }
  td.c-meta   { grid-column:1; grid-row:2; color:var(--ink-3); font-size:12px; }
  td.c-payout { grid-column:2; grid-row:2; text-align:right; }
  td.c-cust   { grid-column:1 / -1; grid-row:3; color:var(--ink-3); font-size:12px; padding-top:2px; }

  .filters { display:grid; grid-template-columns:1fr 1fr; gap:6px; width:100%; }
  .filters-box > summary {
    list-style:none; cursor:pointer; padding:9px 12px; font-size:13px; color:var(--ink-2);
    display:flex; gap:8px; align-items:center;
  }
  .filters-box > summary::-webkit-details-marker { display:none; }
  .filters-box > summary::after { content:"▾"; margin-left:auto; }
  .filters-box[open] > summary::after { content:"▴"; }
  .filters-box > .filters { padding:0 12px 12px; }
  .filters input[type="search"] { grid-column:1 / -1; min-width:0; }
  .filters select { min-width:0; font-size:12.5px; }
  .card > header { flex-wrap:wrap; }

  /* Bảng báo cáo: bỏ cột phụ để cột "± kỳ trước" không bị đẩy khuất khỏi màn hình */
  .report-table .c-vnd, .report-table .barcell { display:none; }
  /* Bảng nhỏ ở Tổng quan: bỏ cột phụ cho khỏi cắt ngang màn hình */
  .c-hide-sm { display:none; }
  /* Dãy mini tab không co được sẽ kéo cả trang tràn ngang; ép nó thành một hàng riêng
     và cho phép cuộn bên trong chính nó. */
  .page-bar { flex-wrap:wrap; }
  .ranges.tabs {
    flex:1 1 100%; width:100%; min-width:0; max-width:100%;
    overflow-x:auto; scrollbar-width:none;
  }
  .ranges.tabs::-webkit-scrollbar { display:none; }
  .ranges.tabs button { padding:6px 10px; font-size:12.5px; white-space:nowrap; }
  .report-table td, .report-table th { padding:9px 8px; }

  .cols-list { width:min(280px, calc(100vw - 32px)); }
  .drawer-panel { width:100%; }
  .kv { grid-template-columns:104px 1fr; gap:5px 10px; font-size:13px; }
}

/* Máy tính: bỏ ô meta gộp (chỉ dùng cho thẻ mobile) và luôn mở khối lọc */
@media (min-width:821px) {
  td.c-meta { display:none; }
  .filters-box > summary { display:none; }
  .filters-box > .filters { display:flex; }
}

/* ─────────── cài đặt ─────────── */
.set-note {
  padding:9px 12px; border-radius:8px; font-size:13px; margin-bottom:2px;
  background:var(--ok-soft); color:var(--ok); border:1px solid transparent;
}
.set-note.bad { background:var(--bad-soft); color:var(--bad); }

.setlist { display:grid; }

/* Hai cột: thông tin | nút. URL nằm ở hàng riêng bên dưới và mặc định ẩn.
   Nhét URL vào một cột giữa thì cột đó phải co lại được, mà chuỗi URL không xuống dòng
   nên nó không co — nút bị đẩy ra ngoài và đè lên chữ. */
.setrow {
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"main act" "body body";
  gap:10px 16px; align-items:center; padding:16px 20px;
  border-top:1px solid var(--line);
}
.setrow:first-child { border-top:0; }
.setrow:hover { background:var(--surface-2); }
.setrow > * { min-width:0; }
.setrow-main  { grid-area:main; display:grid; gap:4px; }
.setrow-title { display:flex; flex-wrap:wrap; gap:7px; align-items:center; font-size:14px; }
.setrow-meta  { font-size:12px; color:var(--ink-3); line-height:1.5; }
/* `display:grid` của tác giả THẮNG thuộc tính hidden của trình duyệt (hidden chỉ là
   display:none trong stylesheet mặc định). Không có dòng dưới thì bấm Xem URL một hàng
   là cả ba hàng cùng hiện. Cùng họ với cái bẫy <details> đã gặp trước đây. */
.setrow-body[hidden] { display:none; }
.setrow-body  { grid-area:body; display:grid; gap:6px; min-width:0; }
.setrow-body > * { min-width:0; }
.setrow-act   { grid-area:act; display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
/* Nút hành động chỉ đậm lên khi rê vào hàng — bình thường để chúng lùi lại phía sau. */
.setrow-act .btn-ghost { opacity:.72; transition:opacity .12s; }
.setrow:hover .btn-ghost, .setrow-act .btn-ghost:focus-visible,
.setrow-act .btn-ghost.on { opacity:1; }
.setrow-act .btn-ghost.on { border-color:var(--accent); color:var(--accent); }

/* Giới hạn bề ngang: màn 27 inch mà để ô URL kéo hết 1200px thì mắt phải chạy
   ngang cả gang tay để đọc một chuỗi chẳng cần đọc. */
/* Giới hạn bề ngang: màn 27 inch mà để ô URL kéo hết 1200px thì mắt phải chạy
   ngang cả gang tay để đọc một chuỗi chẳng cần đọc. */
.copybox {
  display:flex; gap:8px; align-items:center; background:var(--surface-2);
  border:1px solid var(--line); border-radius:8px; padding:5px 5px 5px 12px;
  max-width:min(100%, 760px); overflow:hidden;
}
.copybox code {
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:11.5px;
  color:var(--ink-2); overflow-x:auto; white-space:nowrap; flex:1; min-width:0;
}
.copybox button { flex:none; }
.setrow-body input[data-key] {
  width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:8px;
  background:var(--surface-2); color:var(--ink); font:inherit; font-size:13px;
}
.setrow-body input[data-key]:focus {
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
.ep { display:block; font-size:11.5px; color:var(--ink-2); word-break:break-all; }
.tag.todo { background:var(--warn-soft); color:var(--warn); }
.cardhint { margin:0; padding:14px 20px 0; font-size:12.5px; color:var(--ink-3); line-height:1.55; max-width:min(100%, 900px); }

/* Ô nhập cấu hình chung: giá trị chỉ vài ký tự ("4", "12"), kéo ô rộng cả màn hình thì
   vừa xấu vừa gợi ý sai rằng phải điền dài. Ghép luôn với nút Lưu cho khỏi lạc nhau. */
.kv-edit { align-items:center; }
.kv-edit input { flex:none; }
.kv-edit input {
  width:260px; max-width:46vw; padding:7px 10px; border:1px solid var(--line);
  border-radius:8px; background:var(--surface-2); color:var(--ink); font:inherit; font-size:13px;
}
.kv-edit input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.warnline {
  font-size:12.5px; color:var(--warn); background:var(--warn-soft);
  border-radius:8px; padding:8px 12px; max-width:min(100%, 760px); line-height:1.5;
}
.setnote-body { font-size:13px; color:var(--ink-2); padding:16px 20px; }
.setnote-body p { margin:0 0 8px; line-height:1.55; }
.setnote-body p:last-child { margin-bottom:0; }

/* form thêm/sửa trong drawer */
.editor { display:grid; gap:14px; }
.ed-field select, .ed-field textarea, .ed-field input:not([type="checkbox"]) {
  width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:8px;
  background:var(--surface-2); color:var(--ink); font:inherit; font-size:13px;
}
.ed-field textarea { resize:vertical; line-height:1.5; }
.ed-field select:focus, .ed-field textarea:focus, .ed-field input:not([type="checkbox"]):focus {
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
.ed-field .toggle { justify-self:start; }
.ed-hint { font-size:11.5px; color:var(--ink-3); font-style:normal; line-height:1.45; }
.ed-actions { display:flex; gap:8px; align-items:center; position:sticky; bottom:0;
  background:var(--surface); padding:12px 0 2px; border-top:1px solid var(--line); }
.ed-err { font-size:12.5px; color:var(--bad); }

@media (max-width:820px) {
  .setrow { grid-template-columns:1fr; grid-template-areas:"main" "act" "body"; gap:10px; padding:14px 16px; }
  .setrow-act { justify-content:flex-start; }
  .setrow-act .btn-ghost { opacity:1; }     /* điện thoại không có chuột để rê */
  .card > header, .filterbar, .pager, .cardhint { padding-left:16px; padding-right:16px; }
  th:first-child, td:first-child { padding-left:16px; }
  th:last-child,  td:last-child  { padding-right:16px; }
}

/* ─────────── thanh lọc + phân trang ─────────── */
.filterbar {
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  padding:14px 20px; border-bottom:1px solid var(--line);
}
.filterbar > * { min-width:0; }
.filterbar input[type="search"] {
  flex:1 1 220px; max-width:300px; padding:7px 11px; border:1px solid var(--line);
  border-radius:8px; background:var(--surface-2); color:var(--ink); font:inherit; font-size:13px;
}
.filt {
  padding:7px 10px; border:1px solid var(--line); border-radius:8px;
  background:var(--surface-2); color:var(--ink); font:inherit; font-size:13px; max-width:170px;
}
.filterbar input:focus, .filt:focus {
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
.pager {
  display:flex; gap:12px; align-items:center; justify-content:center;
  padding:14px 20px; border-top:1px solid var(--line); font-size:13px;
}
.pager button[disabled] { opacity:.4; cursor:default; }
.pager button[disabled]:hover { border-color:var(--line); color:inherit; }
/* Nút khoá ở mọi chỗ (vd. Trước/Sau trang Đơn hàng khi đã hết trang) phải trông như khoá, không thì bấm tưởng hỏng. */
.btn-ghost:disabled { opacity:.4; cursor:default; pointer-events:none; }

@media (max-width:640px) {
  .filterbar input[type="search"] { flex-basis:100%; max-width:none; }
  .filt { flex:1 1 calc(50% - 4px); max-width:none; }
}

/* ───────────── cảnh báo offer network đã đóng ───────────── */
.warn-card { border-color: var(--bad); }
.warn-card > header h3 { color: var(--bad); }
.warn-card td.bad { color: var(--bad); font-weight: 600; }

/* ───────────── bốn trạng thái offer ───────────── */
/* Xanh chạy được, hổ phách tạm đóng, xanh dương chờ người duyệt, đỏ dừng hẳn.
   Bốn màu phải phân biệt được ngay khi liếc, vì cả cột chỉ còn MỘT nhãn để đọc. */
.pill.tt-active  { background:var(--ok-soft);     color:var(--ok); }
.pill.tt-pending { background:var(--accent-soft); color:var(--accent); }
.pill.tt-confirm { background:var(--warn-soft);   color:var(--warn); }
.pill.tt-stop    { background:var(--bad-soft);    color:var(--bad); }

/* ───────────── ảnh sản phẩm trong danh mục ───────────── */
.thumb {
  width:36px; height:36px; object-fit:contain; vertical-align:middle;
  margin-right:9px; border-radius:6px;
  /* Ảnh hộp thuốc gần như luôn nền trắng: để nền xám thì ở chế độ sáng nhìn như ô rỗng,
     ở chế độ tối thì chói. Cho nền trắng cố định + viền mảnh, cả hai chế độ đều rõ. */
  background:#fff; border:1px solid var(--line); padding:1px;
}
.thumb-empty { display:inline-block; background:var(--surface-2); border-style:dashed; opacity:.5; }
.tag.warn { background:var(--warn-soft); color:var(--warn); }
.group-table .g-name b, .offers-table td.o-name b { vertical-align:middle; }
.tag.bad-tag { background:var(--bad-soft); color:var(--bad); font-weight:600; }

/* So payout cùng sản phẩm giữa các network */
.tag.nb-best { background: var(--ok-soft, #e7f6ec); color: var(--ok, #1a7f37); }
.tag.nb-kem  { background: var(--warn-soft); color: var(--warn); }

.warnbar { margin: 0 16px 8px; padding: 10px 14px; border-radius: 10px; cursor: pointer;
           background: var(--bad-soft, #fdecec); color: var(--bad, #b42318); font-size: 14px; }
.warnbar:hover { filter: brightness(.97); }

.g-tr-top { font-size: 12px; white-space: nowrap; margin-top: 2px; }

/* ── Tab Thông báo ── */
.nav-badge { margin-left: auto; min-width: 20px; padding: 1px 7px; border-radius: 10px; font-size: 12px;
             background: var(--bad); color: #fff; text-align: center; }
.tb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .tb-grid { grid-template-columns: 1fr; } }
.tb-live { padding: 0 16px 8px; display: grid; gap: 10px; }
.tb-live-item { border: 1px solid var(--bad-soft); background: var(--bad-soft); border-radius: 10px; padding: 10px 12px; }
.tb-live-item b { color: var(--bad); }
.tb-mau { margin: 6px 0 8px 16px; padding: 0; font-size: 13px; }
.tb-ok { padding: 10px 12px; border-radius: 10px; background: var(--ok-soft); color: var(--ok); }
.tb-sub { padding: 12px 16px 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #888); }
.tb-chips { padding: 4px 16px 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn { border: 1px solid var(--line, #ddd); background: transparent; border-radius: 16px; padding: 3px 10px; font-size: 13px; cursor: pointer; color: inherit; }
.chip-btn.on { background: var(--accent-soft, #eef); border-color: var(--accent, #66f); }
.tb-list { list-style: none; margin: 0; padding: 0 16px 12px; max-height: 70vh; overflow: auto; }
.tb-item { padding: 10px 8px; border-bottom: 1px solid var(--line, #eee); }
.tb-item.moi { background: var(--accent-soft, #f3f6ff); cursor: pointer; border-left: 3px solid var(--accent, #66f); }
.tb-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.tb-time { margin-left: auto; font-size: 12px; white-space: nowrap; }
.tb-body { font-size: 13px; margin-top: 4px; white-space: normal; }
.tb-ref { font-size: 12px; margin-top: 2px; }

/* Tài khoản (v1.0) */
.acc-form { display:grid; gap:12px; max-width:420px; padding:4px 16px 16px; }
.acc-pass { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:15px; letter-spacing:.5px;
            background:var(--surface-2); padding:6px 10px; border-radius:6px; user-select:all; }
.acc-nudge { margin:0 0 12px; padding:10px 14px; border-radius:10px; background:rgba(255,179,0,.14);
             border:1px solid rgba(255,179,0,.45); font-size:13.5px; }
.acc-nudge a { font-weight:600; }
#acc-nudge-top { margin:16px 20px -4px; }
@media (max-width: 760px) { #acc-nudge-top { margin:12px 12px -4px; } }

/* Đợt C: dải trạng thái, cột gửi network / chờ bao lâu, phễu, thao tác admin trong chi tiết đơn */
.tt-strip { display:flex; flex-wrap:wrap; gap:6px; padding:10px 14px; border-top:1px solid var(--line); }
.tt-strip:empty { display:none; }
.chip-btn.chip-loi { border-color:var(--bad); color:var(--bad); }
.chip-btn.chip-loi.on { background:var(--bad); color:#fff; }
.chip-btn.chip-loi.on .dim { color:#fff; }
.lag-tre { color:var(--bad); font-weight:600; }
.gui-loi { color:var(--bad); font-weight:600; }
.gui-giu { color:#b7791f; font-weight:600; }
td.c-lag, td.c-sent { white-space:nowrap; font-size:12.5px; }
.drawer-act { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:12px 0 4px; border-top:1px solid var(--line); margin-top:8px; }
.warn-card header.click { cursor:pointer; flex-wrap:wrap; }
.phe-bar { display:flex; height:14px; border-radius:7px; overflow:hidden; margin:4px 16px 10px; gap:2px; }
.phe-bar a { display:block; min-width:4px; }
.phe-leg { display:flex; flex-wrap:wrap; gap:6px 16px; padding:0 16px 14px; font-size:13px; }
.phe-leg a { color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.phe-leg a:hover b { text-decoration:underline; }
.phe-leg i { width:10px; height:10px; border-radius:3px; display:inline-block; }
.phe-new   { background:#8ea3c7; }
.phe-cho   { background:var(--warn); }
.phe-duyet { background:var(--ok); }
.phe-rac   { background:var(--bad); }
.phe-huy   { background:#f59e0b; }
.phe-trung { background:#a855f7; }
.audit-diff { font-size:11.5px; max-width:520px; white-space:normal; word-break:break-word; }
.tb-live-item.tb-live-xem { opacity:.6; }

/* Đang tải lại theo bộ lọc / ô tìm: giữ bảng cũ, làm mờ phần kết quả — ô tìm vẫn rõ để gõ tiếp. */
#view.dang-tai table, #view.dang-tai .pager, #view.dang-tai .empty { opacity:.45; transition:opacity .15s; }
#view.dang-tai { cursor:progress; }

/* Telegram riêng (Cài đặt → Tài khoản): 4 bước, bước xong có dấu ✓ — giống dashboard ads. */
#acc-tg-card { margin-top:14px; }
.tg-wrap { padding:14px 16px 18px; }
.tg-steps { margin:0; padding:0; list-style:none; counter-reset:s; display:grid; gap:16px; }
.tg-steps > li { counter-increment:s; position:relative; padding-left:34px; font-size:13.5px; line-height:1.55; }
.tg-steps > li::before { content:counter(s); position:absolute; left:0; top:0; width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center; font-size:12px; font-weight:700; background:var(--surface-2); color:var(--ink-3); }
.tg-steps > li.done::before { content:"✓"; background:var(--ok-soft); color:var(--ok); }
.tg-steps .row { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:8px; }
.tg-steps .tg-in { flex:1 1 240px; max-width:420px; padding:8px 10px; border:1px solid var(--line); border-radius:8px;
  background:var(--surface); color:var(--ink); font:inherit; }
.tg-steps .sm { font-size:12.5px; }
.tg-steps .mono { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12.5px; }
.tg-loai { display:grid; gap:6px; margin:8px 0 4px; }
.tg-loai .chk { display:inline-flex; align-items:center; gap:8px; font-size:13px; }
@media (max-width:600px) { .tg-steps > li { padding-left:30px; } .tg-steps .tg-in { flex-basis:100%; } }

/* ───────────── tab Network ───────────── */
.kpis-in { padding:0 14px 12px; }
.kpis-in .kpi { box-shadow:none; background:var(--surface-2); border-color:transparent; }
.ok-tag { background:var(--ok-soft); color:var(--ok); }
.bar-mini { height:3px; margin-top:5px; background:var(--surface-2); border-radius:2px; overflow:hidden; max-width:220px; }
.bar-mini i { display:block; height:100%; background:var(--accent); border-radius:2px; }
tbody tr.click.on { background:var(--accent-soft); }
.chip-filter { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; padding:3px 4px 3px 10px;
  background:var(--accent-soft); border-radius:999px; }
.note-sm { padding:8px 14px 12px; font-size:12px; }
td .up, .kpi-sub .up { color:var(--ok); }
td .down, .kpi-sub .down { color:var(--bad); }
.tay-tag { background:var(--accent-soft); color:var(--ink-2, inherit); }
.note-xs { font-size:11px; font-weight:400; margin-top:2px; }
tr.mo-nhat td { opacity:.72; }
tr.sua-row td { background:var(--surface-2); }
.sua-form { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; font-size:13px; }
.sua-form label { display:inline-flex; align-items:center; gap:6px; }
.sua-form input { width:9em; }
button[data-sua] { padding:1px 7px; font-size:11.5px; margin-left:4px; }
tr.mo-nhat button[data-sua] { opacity:1; }
.sm-only { display:none; }
@media (max-width: 640px) {
  .sm-only { display:block; }
  .sua-form { position:sticky; left:0; max-width:calc(100vw - 64px); }
  .sua-form input { width:7em; }
}
td .note-xs { white-space:normal; }

.tr-pct { font-size: 11px; font-weight: 600; margin-left: 3px; white-space: nowrap; }
.tr-up { color: var(--ok, #16a34a); }
.tr-down { color: var(--bad); }
.tag-low { background: rgba(234, 88, 12, .13); color: #d9580d; font-weight: 600; }

/* ───────────── yêu cầu thêm offer ───────────── */
.yc-form .yc-row { display:flex; gap:8px; margin:0 0 8px; flex-wrap:wrap; }
.yc-form input { padding:9px 11px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); font-size:13.5px; }
.yc-form #yc-nd, .yc-form #yc-note { flex:1; min-width:220px; }
.yc-form #yc-geo { width:130px; text-transform:uppercase; }
.yc-help { font-size:12px; margin-top:6px; }
.yc-res { margin:6px 0 8px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; display:flex; gap:8px; flex-wrap:wrap; align-items:baseline; }
.yc-kq { margin:4px 0 0; padding-left:16px; font-size:12.5px; width:100%; }
.yc-kq li { margin:2px 0; }
.yc-table td { vertical-align:top; }
.yc-table .yc-nd { max-width:360px; word-break:break-all; }
.yc-lydo { font-size:11.5px; margin-top:3px; max-width:260px; }
.yc-xong { margin-top:6px; display:flex; gap:6px; }
.yc-xong input { padding:4px 8px; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--ink); font-size:12px; width:150px; }