*, *::before, *::after{ margin:0; padding:0; }
  html, body{ height:100%; }
  [hidden]{ display:none !important; }
  :root{
    --brand-orange:#F4782E;
    --brand-red:#E4262E;
    --brand-gradient: linear-gradient(135deg, var(--brand-orange), var(--brand-red));
    --bg:#FBFAF9;
    --surface:#FFFFFF;
    --surface-2:#F5F3F1;
    --surface-3:#ECE9E5;
    --border:#E4E0DA;
    --text:#1C1917;
    --text-muted:#6F6A62;
    --text-faint:#A39C90;
    --accent:#E4262E;
    --accent-strong:#C21E25;
    --accent-soft:#FCE6E1;
    --accent-contrast:#FFFFFF;
    --good:#2E9B57; --good-soft:#DFF3E5;
    --info:#3272C4; --info-soft:#E1EBFA;
    --new:#8355C9; --new-soft:#EEE5F9;
    --teal:#1F9C93; --teal-soft:#DCF4F1;
    --warn:#C98A12; --warn-soft:#FAEDD1;
    --danger:#B23A2E; --danger-soft:#F6DED9;
    --muted-badge:#6B6558; --muted-soft:#EAE6DE;
    --shadow: 0 1px 2px rgba(30,20,10,0.06), 0 8px 24px -8px rgba(30,20,10,0.16);
    --radius: 10px;
    --glow-orange: rgba(244,120,46,.32);
    --glow-red: rgba(228,38,46,.24);
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#15130F;
      --surface:#1D1A16;
      --surface-2:#232019;
      --surface-3:#2B2720;
      --border:#3A352C;
      --text:#F4F1EA;
      --text-muted:#B3AB9C;
      --text-faint:#7C7566;
      --accent:#FF6A52;
      --accent-strong:#FF8A6E;
      --accent-soft:#3D2019;
      --accent-contrast:#1E0D08;
      --good:#5EB37E; --good-soft:#1E3326;
      --info:#7CA6E3; --info-soft:#20293C;
      --new:#B79CE0; --new-soft:#2A2338;
      --teal:#5FC2B8; --teal-soft:#1A3230;
      --warn:#E3B655; --warn-soft:#382C14;
      --danger:#E2836F; --danger-soft:#3B241D;
      --muted-badge:#ACA494; --muted-soft:#2A271F;
      --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 28px -10px rgba(0,0,0,0.55);
      --glow-orange: rgba(255,106,82,.28);
      --glow-red: rgba(228,38,46,.32);
    }
  }
  :root[data-theme="dark"]{
    --bg:#15130F;
    --surface:#1D1A16;
    --surface-2:#232019;
    --surface-3:#2B2720;
    --border:#3A352C;
    --text:#F4F1EA;
    --text-muted:#B3AB9C;
    --text-faint:#7C7566;
    --accent:#FF6A52;
    --accent-strong:#FF8A6E;
    --accent-soft:#3D2019;
    --accent-contrast:#1E0D08;
    --good:#5EB37E; --good-soft:#1E3326;
    --info:#7CA6E3; --info-soft:#20293C;
    --new:#B79CE0; --new-soft:#2A2338;
    --teal:#5FC2B8; --teal-soft:#1A3230;
    --warn:#E3B655; --warn-soft:#382C14;
    --danger:#E2836F; --danger-soft:#3B241D;
    --muted-badge:#ACA494; --muted-soft:#2A271F;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 28px -10px rgba(0,0,0,0.55);
    --glow-orange: rgba(255,106,82,.28);
    --glow-red: rgba(228,38,46,.32);
  }

  *{box-sizing:border-box;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:"Montserrat",system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
  }
  /* Bố cục theo đúng top.sonnetgroup.vn: nội dung giới hạn chiều rộng, căn giữa,
     2 bên lề là màu nền TRẮNG PHẲNG (không hoạ tiết/ảnh) — xem .view bên dưới
     (max-width:1180px, khớp .wrap của top.sonnetgroup.vn). Vì vậy bỏ hẳn ảnh nền
     trang trải toàn chiều rộng — ảnh trang trí chỉ còn ở banner/popup/trạng thái
     trống (những khối tự giới hạn kích thước, nằm trong cột nội dung 1180px). */
  h1,h2,h3,.display{
    font-family:"Montserrat",system-ui,sans-serif;
    font-weight:800;
    text-wrap:balance;
    letter-spacing:-0.01em;
  }
  .mono{ font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; }
  a{ color:var(--accent); }
  button{ font-family:inherit; }
  ::selection{ background:var(--accent-soft); }

  /* ---------- shell ---------- */
  .app{
    display:flex;
    min-height:100vh;
  }
  .sidebar{
    width:236px;
    flex:none;
    background:var(--surface-2);
    border-right:1px solid var(--border);
    padding:20px 14px;
    display:flex;
    flex-direction:column;
    gap:20px;
    position:sticky;
    top:0;
    align-self:flex-start;
    height:100vh;
    overflow-y:auto;
  }
  .sidebar::before{
    content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--brand-gradient);
  }
  .brand{ padding:2px 6px; display:flex; flex-direction:column; gap:2px;}
  .brand .mark{ display:flex; align-items:center; gap:8px; }
  .brand-mark{ flex:none; width:28px; height:28px; object-fit:contain; display:block; }
  .brand-name{ font-family:"Montserrat",sans-serif; font-weight:800; font-size:1.05rem; line-height:1.1; letter-spacing:-0.01em; }
  .brand-sub{ font-size:0.72rem; color:var(--text-muted); letter-spacing:0.04em; text-transform:uppercase; }

  /* Công tắc chuyển giao diện Nội bộ / KOC — chỉ admin/thành viên thấy. 2 nút
     cạnh nhau kiểu segmented control, bên đang chọn tô nền đậm để luôn rõ đang
     đứng ở bên nào (không dùng khung ngôn ngữ "xem trước" — đây là chuyển hẳn
     giao diện, không phải chế độ preview tạm thời). */
  .view-switch{
    display:flex; width:100%; margin:4px 0 10px; padding:3px; gap:3px;
    border-radius:9px; background:var(--surface-2); border:1px solid var(--border); box-sizing:border-box;
  }
  .view-switch-btn{
    flex:1; padding:7px 8px; border-radius:7px; border:none; background:none;
    color:var(--text-muted); font-size:0.8rem; font-weight:700; cursor:pointer;
  }
  .view-switch-btn:hover{ color:var(--text); }
  .view-switch-btn.active{ background:var(--brand-gradient); color:#fff; }

  .nav{ display:flex; flex-direction:column; gap:2px; }
  .nav-item{
    display:flex; align-items:center; gap:10px;
    padding:9px 10px; border-radius:8px;
    color:var(--text-muted); font-size:0.92rem; font-weight:500;
    cursor:pointer; border:1px solid transparent; background:none; text-align:left;
    width:100%; text-decoration:none; box-sizing:border-box;
  }
  .nav-item svg{ flex:none; opacity:0.8; }
  .nav-item .count{ margin-left:auto; font-size:0.72rem; color:var(--text-faint); font-family:"IBM Plex Mono",monospace; }
  .nav-item:hover{ background:var(--surface-3); color:var(--text); }
  .nav-item.active{ background:var(--accent-soft); color:var(--accent-strong); border-color:var(--accent-soft); }
  .nav-item.active .count{ color:var(--accent-strong); }

  .sidebar-foot{ margin-top:auto; padding:10px; border-top:1px solid var(--border); display:flex; align-items:center; gap:9px; }
  .avatar{
    width:30px; height:30px; border-radius:50%; background:var(--brand-gradient);
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:0.8rem; flex:none;
  }
  .sidebar-foot .who{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
  .sidebar-foot .who b{ font-size:0.82rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .sidebar-foot .who span{ font-size:0.72rem; color:var(--text-muted); }
  .theme-btn{
    margin-left:auto; width:28px; height:28px; border-radius:7px; border:1px solid var(--border);
    background:var(--surface); color:var(--text-muted); display:flex; align-items:center; justify-content:center;
    cursor:pointer; flex:none;
  }
  .theme-btn:hover{ color:var(--text); border-color:var(--text-faint); }

  /* align-self:flex-start — .app là flex row, mặc định .main bị kéo giãn cao bằng
     .sidebar (100vh) dù nội dung ngắn hơn nhiều (VD trang "không có sản phẩm"),
     để lộ khoảng nền trống rất lớn phía dưới trông như khung bị vỡ. */
  .main{ flex:1; min-width:0; padding:26px 30px 60px; align-self:flex-start; }
  /* Banner đầu trang — ảnh nền do team tự thiết kế (assets/bg-header.png, đổi qua
     "🎨 Giao diện" / /api/background/header), fallback var(--brand-gradient) nếu
     ảnh chưa tải xong hoặc lỗi. */
  .topline{
    display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap;
    margin-bottom:22px; padding:24px 26px; border-radius:16px; position:relative; overflow:hidden;
    background-image: url("/api/background/header"), var(--brand-gradient);
    background-size: cover, auto;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    box-shadow: var(--shadow);
  }
  .topline h1{ font-size:1.6rem; margin:0 0 4px; color:#fff; }
  .topline p{ margin:0; color:rgba(255,255,255,0.88); font-size:0.9rem; max-width:60ch; }
  .topline .btn-primary{ background:#fff; color:var(--brand-red); border-color:#fff; }
  .topline .btn-primary:hover{ background:#fff; filter:none; box-shadow:0 3px 12px rgba(0,0,0,0.2); }
  .topline > *{ position:relative; z-index:1; }
  /* Logo SONNET (assets/logo-sonnet.png — nền trắng gốc đã tách trong suốt bằng
     ffmpeg colorkey từ file "Ảnh nhóm zalo.png") là gradient đỏ/cam — đặt thẳng
     lên banner cũng đỏ/cam thì gần như chìm mất. Bọc trong 1 khối nền trắng bo
     góc (badge) để tạo tương phản, logo luôn nổi rõ bất kể banner nền gì. */
  .topline-logo-badge{
    flex:none; align-self:center; background:#fff; border-radius:14px; padding:8px 14px;
    box-shadow:0 2px 10px rgba(0,0,0,0.22); display:flex; align-items:center;
  }
  .topline-logo{ height:64px; width:auto; display:block; }
  @media (max-width:560px){ .topline{ padding:20px; } .topline-logo{ height:46px; } .topline-logo-badge{ padding:6px 10px; } }

  .btn{
    display:inline-flex; align-items:center; gap:7px;
    padding:9px 15px; border-radius:8px; border:1px solid var(--border);
    background:var(--surface); color:var(--text); font-size:0.87rem; font-weight:600;
    cursor:pointer; white-space:nowrap;
  }
  .btn:hover{ border-color:var(--text-faint); }
  .btn-primary{ background:var(--brand-gradient); border-color:transparent; color:#fff; }
  .btn-primary:hover{ filter:brightness(1.08); border-color:transparent; }
  .btn-ghost{ background:none; border-color:transparent; }
  .btn-ghost:hover{ background:var(--surface-3); border-color:transparent; }
  .btn-danger{ color:var(--danger); }
  .btn-sm{ padding:6px 10px; font-size:0.8rem; }
  .btn[disabled]{ opacity:0.5; cursor:not-allowed; }

  /* ---------- stat tiles ---------- */
  .stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:22px; }
  .stat{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:14px 16px; display:flex; flex-direction:column; gap:6px;
  }
  .stat .n{ font-family:"Montserrat",sans-serif; font-size:1.9rem; font-weight:800; line-height:1; }
  .stat .l{ font-size:0.78rem; color:var(--text-muted); display:flex; align-items:center; gap:6px; }
  .stat .dot{ width:8px; height:8px; border-radius:50%; flex:none; }

  /* ---------- toolbar ---------- */
  .toolbar{
    display:flex; flex-wrap:wrap; gap:10px; align-items:center;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:12px; margin-bottom:16px;
  }
  .search{ position:relative; flex:1 1 220px; min-width:180px; }
  .search svg{ position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--text-faint); }
  .search input{ width:100%; padding:8px 10px 8px 32px; }
  /* Các ô lọc (select) trong toolbar vốn tự co theo độ dài nhãn riêng (VD "Vòng
     đời" khác "Nguồn"), nhìn lệch nhau — ép cùng 1 kích thước chuẩn cho đều. */
  .toolbar select{ flex:1 1 140px; min-width:140px; }
  select, input[type=text], input[type=search], textarea{
    background:var(--surface-2); border:1px solid var(--border); color:var(--text);
    border-radius:7px; font-size:0.85rem; font-family:inherit;
  }
  select, input[type=text], input[type=search]{ padding:8px 10px; }
  select:focus, input:focus, textarea:focus, button:focus-visible, .pcard:focus-visible{
    outline:2px solid var(--accent); outline-offset:1px;
  }
  .toolbar select{ flex:0 0 auto; }
  .filter-clear{ font-size:0.78rem; color:var(--text-muted); background:none; border:none; cursor:pointer; text-decoration:underline; }
  .filter-clear:hover{ color:var(--text); }

  /* ---------- table ---------- */
  .table-wrap{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
  table{ width:100%; border-collapse:collapse; font-size:0.86rem; }
  thead th{
    text-align:left; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em;
    color:var(--text-muted); font-weight:600; padding:10px 12px; border-bottom:1px solid var(--border);
    background:var(--surface-2);
  }
  tbody tr{ border-bottom:1px solid var(--border); cursor:pointer; }
  tbody tr:last-child{ border-bottom:none; }
  tbody tr:hover{ background:var(--surface-2); }
  tbody td{ padding:10px 12px; vertical-align:top; }
  .badge{
    display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:99px;
    font-size:0.74rem; font-weight:600; white-space:nowrap;
  }
  .badge .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
  .vd-new{ background:var(--new-soft); color:var(--new); }
  .vd-rising{ background:var(--info-soft); color:var(--info); }
  .vd-win{ background:var(--good-soft); color:var(--good); }
  .vd-seasonal{ background:var(--teal-soft); color:var(--teal); }
  .vd-old{ background:var(--muted-soft); color:var(--muted-badge); }
  .vd-declining{ background:var(--danger-soft); color:var(--danger); }
  .pr-now{ background:var(--danger-soft); color:var(--danger); }
  .pr-test{ background:var(--warn-soft); color:var(--warn); }
  .pr-watch{ background:var(--info-soft); color:var(--info); }
  .pr-stop{ background:var(--muted-soft); color:var(--muted-badge); }
  .chip{
    display:inline-flex; align-items:center; padding:3px 9px; border-radius:99px; font-size:0.74rem;
    border:1px solid var(--border); color:var(--text-muted); background:var(--surface-2);
    max-width:100%; overflow-wrap:anywhere;
  }
  button.chip{ font-family:inherit; cursor:pointer; }
  button.chip:hover{ background:var(--surface-3); color:var(--text); }
  .row-actions{ display:flex; gap:4px; justify-content:flex-end; }
  .icon-btn{
    width:28px; height:28px; border-radius:7px; border:1px solid transparent; background:none;
    color:var(--text-muted); display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .icon-btn:hover{ background:var(--surface-3); color:var(--text); }

  /* Trạng thái trống — ảnh nền do team tự thiết kế (assets/bg-empty.png, đổi qua
     "🎨 Giao diện" / /api/background/empty). Chỉ áp dụng theme sáng. */
  .empty{ padding:50px 20px; text-align:center; color:var(--text-muted); border-radius:var(--radius); min-height:220px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
  :root:not([data-theme="dark"]) .empty{
    background-image:url("/api/background/empty"); background-size:cover; background-position:center; background-repeat:no-repeat;
    background-color:var(--surface);
  }
  .empty svg{ margin-bottom:10px; opacity:0.6; }

  /* responsive table -> cards */
  @media (max-width:760px){
    thead{ display:none; }
    table, tbody, tr, td{ display:block; width:100%; }
    tbody tr{ padding:12px; border-bottom:8px solid var(--bg); }
    tbody td{ padding:6px 0; border:none; }
    tbody td[data-label]::before{
      content:attr(data-label); display:block; font-size:0.68rem; text-transform:uppercase;
      letter-spacing:0.04em; color:var(--text-faint); margin-bottom:3px;
    }
    .row-actions{ justify-content:flex-start; margin-top:4px; }
  }

  /* ---------- page transitions (list <-> detail, same tab) ---------- */
  .page{ min-width:0; }
  @keyframes pageIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
  .page.enter{ animation:pageIn .25s ease; }
  @media (prefers-reduced-motion: reduce){ .page.enter{ animation:none; } }
  .back-btn{ margin-bottom:16px; }

  /* ---------- product card grid ---------- */
  .pcard-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; }
  .pcard{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    overflow:hidden; cursor:pointer; display:flex; flex-direction:column; text-align:left;
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  .pcard:hover{ border-color:var(--text-faint); box-shadow:var(--shadow); }
  /* Khung ảnh tỉ lệ cố định 16:9 (thay vì height cố định 112px) — height cố định
     khiến ảnh trông vuông/lệch tỉ lệ tuỳ độ rộng card thực tế theo số cột; aspect-
     ratio giữ đúng hình chữ nhật ngang dễ nhìn ở MỌI độ rộng màn hình. */
  .pcard-thumb{
    position:relative; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; overflow:hidden;
  }
  .pcard-thumb-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
  .pcard-thumb .life-badge{ position:absolute; top:8px; left:8px; z-index:2; }
  .pcard-actions{ position:absolute; top:6px; right:6px; display:flex; gap:2px; z-index:2; }
  .pcard-actions .icon-btn{ background:rgba(255,255,255,0.85); backdrop-filter:blur(2px); }
  :root[data-theme="dark"] .pcard-actions .icon-btn{ background:rgba(20,18,15,0.7); }
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .pcard-actions .icon-btn{ background:rgba(20,18,15,0.7); } }
  .pcard-body{ padding:12px 14px 14px; display:flex; flex-direction:column; gap:7px; flex:1; }
  .pcard-title{ font-weight:600; font-size:0.9rem; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .pcard-shop{ font-size:0.76rem; color:var(--text-muted); }
  .pcard-breadcrumb{ font-size:0.74rem; color:var(--text-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .pcard-badges{ display:flex; flex-wrap:wrap; gap:5px; }
  .pcard-foot{
    margin-top:auto; padding-top:8px; border-top:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between; gap:6px;
    font-size:0.72rem; color:var(--text-faint);
  }
  /* Cả card đã bấm được (role=button), nhưng để rõ ràng có chỗ bấm xem chi tiết
     thay vì phải đoán, thêm hẳn 1 dòng link cuối card — click vẫn nổi bọt lên
     .pcard nên không cần gắn handler riêng. */
  .pcard-view{
    display:flex; align-items:center; justify-content:flex-end; gap:4px;
    margin-top:8px; font-size:0.78rem; font-weight:700; color:var(--accent);
  }
  .pcard:hover .pcard-view{ color:var(--accent-strong); }

  /* ---------- product detail page ---------- */
  .detail-layout{ display:block; }
  .detail-card{ width:100%; background-color:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 1px 2px rgba(0,0,0,.03); overflow:visible; padding:28px; }
  .detail-header{ display:flex; align-items:flex-start; gap:16px; padding:0 0 20px; border-bottom:1px solid var(--border); }
  .detail-avatar{ width:64px; height:64px; border-radius:12px; overflow:hidden; flex:none; display:flex; align-items:center; justify-content:center; background:var(--surface-2); color:var(--accent-strong); font-size:1.4rem; }
  .detail-avatar img{ width:100%; height:100%; object-fit:cover; }
  .detail-title h1{ font-size:1.15rem; font-weight:800; margin:0 0 4px; line-height:1.35; }
  .detail-id{ font-size:0.72rem; color:var(--text-faint); font-family:"IBM Plex Mono",monospace; margin-bottom:8px; }
  .detail-badges{ display:flex; gap:6px; flex-wrap:wrap; }
  .detail-body{ padding:24px 0 0; display:flex; flex-direction:column; gap:26px; }
  .dsection + .dsection{ border-top:1px solid var(--border); padding-top:24px; }
  .dsection-title{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
  .dsection-icon{ width:30px; height:30px; border-radius:50%; background:var(--brand-gradient); display:flex; align-items:center; justify-content:center; font-size:0.86rem; color:#fff; flex:none; }
  .dsection-title h3{ font-size:1.08rem; font-weight:800; margin:0; letter-spacing:0.01em; }
  .field-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px 20px; }
  /* Gộp nhiều mục ngắn (shop, ngành, giá, doanh thu...) vào chung 1 lưới nhiều
     cột, tự xếp gọn trong 1-2 hàng thay vì xếp thành nhiều khối 2 cột chồng lên
     nhau — đỡ dư khoảng trắng dọc. */
  .field-grid.cols-compact{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
  .field-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
  @media (max-width:640px){ .field-grid, .field-grid.cols-3{ grid-template-columns:1fr; } }
  /* Yêu cầu: toàn bộ mục (shop, ngành, doanh số...) xếp đúng 2 HÀNG, khoảng
     cách đều nhau — grid-auto-flow:column từng bị trình duyệt giãn cột không
     đều (leftover space chia lệch giữa các cột), nên đổi sang flex: JS chia
     sẵn items thành 2 mảng bằng nhau, mỗi hàng là 1 flex row, khoảng cách gap
     cố định và đều tuyệt đối giữa mọi mục, không phụ thuộc track-sizing. */
  .field-row{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px 20px; }
  .field-row + .field-row{ margin-top:16px; }
  .field-row > div{ flex:1 1 0; min-width:110px; }
  .field-row .field-value{ white-space:nowrap; }
  @media (max-width:640px){ .field-row{ justify-content:flex-start; gap:10px 22px; } .field-row > div{ flex:0 0 auto; } }
  .dsection-note{ font-size:0.76rem; color:var(--text-faint); line-height:1.5; margin:-6px 0 14px; }
  /* Tiêu đề con trong mỗi khối chi tiết — trước đây quá nhạt (var(--text-faint),
     0.7rem) nên khó phân biệt với nội dung bên dưới; tăng nhẹ để dễ quét mắt,
     nhưng vẫn PHẢI nhỏ/nhạt hơn tiêu đề lớn (.dsection-title h3, 1.08rem/800) để
     giữ đúng cấp bậc — không dùng weight 800 + màu đậm cùng lúc như trước (nhìn
     nổi hơn cả tiêu đề lớn dù cỡ chữ nhỏ hơn, do màu quá bắt mắt). */
  .field-label{ font-size:0.74rem; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:6px; }
  /* "Cơ hội nội dung" gộp nhiều mục dài (nhiều gạch đầu dòng mỗi mục) liền nhau —
     field-label mặc định (0.74rem, không icon) không đủ tách bạch khi cuộn qua
     nhiều đoạn văn dài. Riêng trong field-stack: label to hơn hẳn + icon riêng +
     viền dưới màu thương hiệu, mỗi mục còn có đường kẻ ngăn phía trên (trừ mục
     đầu) để mắt dừng lại rõ ràng giữa các phần khi lướt nhanh. */
  .field-stack > div{ padding-top:18px; }
  .field-stack > div:first-child{ padding-top:0; }
  .field-stack > div + div{ border-top:1px dashed var(--border); }
  .field-stack .field-label{
    display:flex; align-items:center; gap:7px; font-size:1.05rem; font-weight:800; color:var(--text);
    padding-bottom:6px; border-bottom:2px solid var(--accent-soft); margin-bottom:10px; text-transform:none;
  }
  .field-label-icon{ font-size:1rem; line-height:1; }
  /* white-space:pre-wrap — AI trả về text có \n giữa các gạch đầu dòng, nhưng HTML
     mặc định gộp \n thành khoảng trắng nên nhìn dính liền thành 1 đoạn; pre-wrap
     vừa giữ xuống dòng vừa tự động wrap câu dài như bình thường. */
  .field-value{ font-size:0.86rem; color:var(--text); line-height:1.55; white-space:pre-wrap; }
  /* AI đánh dấu từ khoá quan trọng bằng **...**, đổi thành <strong> — tô màu
     thương hiệu để nổi rõ giữa câu chữ bình thường. */
  .field-value strong, .ai-script strong{ color:var(--accent-strong); font-weight:800; }
  /* Khối "Rủi ro chính sách" — viền/nền vàng nhạt để tách biệt rõ với các field
     mô tả cơ hội bình thường, KOC lướt mắt là nhận ra ngay đây là phần cảnh báo. */
  .field-value.policy-note{ background:rgba(234,179,8,0.1); border:1px solid rgba(234,179,8,0.35); border-radius:10px; padding:10px 12px; }
  .field-stack{ display:flex; flex-direction:column; gap:16px; }
  .ext-link{ color:var(--accent); text-decoration:underline; text-decoration-color:var(--accent-soft); word-break:break-all; }
  .ext-link:hover{ color:var(--accent-strong); }
  .script-box{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; padding:10px 14px; border-radius:10px; border:1px solid var(--border); background:var(--surface-2); text-align:left; cursor:pointer; font-size:0.82rem; color:var(--text); font-family:inherit; }
  .script-box:hover{ border-color:var(--accent); background:var(--accent-soft); }
  .script-box .arrow{ color:var(--accent); font-weight:700; font-size:0.76rem; flex:none; white-space:nowrap; }
  .detail-footer{ display:flex; justify-content:flex-end; gap:8px; padding:20px 0 0; border-top:1px solid var(--border); margin-top:6px; }
  .dsec-label{ font-size:0.8rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--accent); font-weight:800; margin-bottom:8px; }
  .dsec p{ margin:0; font-size:0.92rem; line-height:1.6; color:var(--text); }
  .ai-script{ margin:0 0 10px; padding:14px 16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); font-family:inherit; font-size:0.9rem; line-height:1.6; color:var(--text); white-space:pre-wrap; word-break:break-word; }
  .kv{ display:flex; flex-wrap:wrap; gap:8px 20px; font-size:0.85rem; }
  .kv div{ display:flex; flex-direction:column; gap:2px; }
  .kv .k{ font-size:0.7rem; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.04em; }
  .link-row{ display:flex; gap:8px; flex-wrap:wrap; }
  .videolist{ display:flex; flex-direction:column; gap:6px; }
  .videolist a{
    display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:8px;
    background:var(--surface-2); border:1px solid var(--border); font-size:0.82rem; color:var(--text);
    text-decoration:none; overflow:hidden;
  }
  .videolist a span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .videolist a svg{ flex:none; color:var(--text-faint); }
  .videolist a:hover{ border-color:var(--accent); }

  /* ---------- modal ---------- */
  .modal-wrap{
    position:fixed; inset:0; z-index:50; display:flex; align-items:flex-start; justify-content:center;
    padding:40px 16px; overflow-y:auto;
    opacity:0; pointer-events:none; transition:opacity .18s ease;
  }
  .modal-wrap.show{ opacity:1; pointer-events:auto; }
  .modal-backdrop{ position:fixed; inset:0; background:rgba(20,16,8,0.45); }
  /* Popup/modal — ảnh nền tối giản do team tự thiết kế (assets/bg-modal.png, đổi
     qua "🎨 Giao diện" / /api/background/modal). Đặt ở .modal (không phải
     .modal-body) để ảnh đứng yên khi cuộn nội dung form dài. Chỉ áp dụng theme sáng. */
  .modal{
    position:relative; background-color:var(--surface); border:1px solid var(--border); border-radius:14px;
    width:min(680px,100%); box-shadow:var(--shadow); display:flex; flex-direction:column; max-height:calc(100vh - 80px);
  }
  /* Bảng xem kịch bản (viewer modal) cần rộng/cao hơn modal form thường — nội
     dung là văn bản dài (nhiều kịch bản theo dạng), thu nhỏ như form sẽ khó đọc.
     To thêm lần 2 theo phản hồi "vẫn hơi nhỏ": rộng tối đa 1100px (từ 880px) và
     giảm padding trên/dưới của .modal-wrap riêng cho viewer này để chiếm gần hết
     chiều cao màn hình thay vì chừa margin 40px như modal form. */
  #viewerModalWrap{ padding-top:16px; padding-bottom:16px; }
  #viewerModalWrap .modal{ width:min(1100px,98%); max-height:calc(100vh - 32px); }
  #viewerModalWrap .modal-body{ flex:1; }
  #viewerModalWrap .ai-script{ font-size:0.92rem; line-height:1.7; }
  /* viewerModalBody giờ là <div> chứa HTML có cấu trúc (card/bullet/policy-line)
     thay vì text thuần trong <pre> — bỏ pre-wrap kế thừa từ .ai-script để các thẻ
     khối (p/ul/li) tự xuống dòng/wrap bình thường thay vì bị ép theo whitespace. */
  #viewerModalBody{ white-space:normal; }
  /* Mỗi "### Tên dạng nội dung" AI trả về → 1 khối card riêng, viền + nền nhẹ để
     tiêu đề dạng kịch bản không còn lẫn vào chung với các gạch đầu dòng bên dưới
     — đúng phản hồi "tiêu đề chính đang lẫn với nhiều chữ". */
  .script-card{ border:1px solid var(--border); border-radius:12px; overflow:hidden; margin-bottom:14px; }
  .script-card:last-child{ margin-bottom:0; }
  .script-card-head{ background:var(--brand-gradient); color:#fff; font-weight:800; font-size:0.94rem; padding:10px 14px; }
  .script-card-body{ padding:14px 16px; }
  .script-card-body p{ margin:0 0 10px; }
  .script-card-body > *:last-child{ margin-bottom:0; }
  .script-bullets{ margin:0 0 10px; padding-left:20px; }
  .script-bullets li{ margin-bottom:6px; line-height:1.55; }
  .script-bullets li:last-child{ margin-bottom:0; }
  .policy-line{ font-size:0.86rem; line-height:1.5; padding:8px 10px; border-radius:8px; margin-bottom:8px; }
  .policy-line:last-child{ margin-bottom:0; }
  .policy-line.warn{ background:rgba(234,179,8,0.12); border:1px solid rgba(234,179,8,0.35); }
  .policy-line.safe{ background:rgba(34,197,94,0.12); border:1px solid rgba(34,197,94,0.35); }
  /* Tiểu mục Hook/Thân bài/CTA trong 1 kịch bản — viền trái màu thương hiệu +
     nhãn in hoa nhỏ để tách rõ 3 chặng của kịch bản ngay trong 1 card, không lẫn
     với các gạch đầu dòng cảnh quay bên trong từng chặng. */
  .script-sub{ border-left:3px solid var(--accent); padding-left:12px; margin-bottom:14px; }
  .script-sub:last-child{ margin-bottom:0; }
  .script-sub-head{ font-size:0.76rem; font-weight:800; color:var(--accent-strong); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:6px; }
  .script-sub-body .script-bullets{ margin-bottom:0; }
  :root:not([data-theme="dark"]) .modal{
    background-image:url("/api/background/modal"); background-size:cover; background-position:center; background-repeat:no-repeat;
  }
  .modal-head{ display:flex; align-items:center; gap:10px; padding:18px 20px; border-bottom:1px solid var(--border); }
  .modal-head h2{ margin:0; font-size:1.1rem; flex:1; }
  .modal-body{ padding:18px 20px; overflow-y:auto; display:flex; flex-direction:column; gap:18px; }
  .modal-foot{ padding:14px 20px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px; }
  .fsection{ display:flex; flex-direction:column; gap:14px; }
  .fsection + .fsection{ border-top:1px solid var(--border); padding-top:20px; }
  .fsection h3{ font-size:0.78rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--accent); margin:0; font-weight:700; font-family:"Montserrat",sans-serif; }
  .fsection-title{ display:flex; align-items:center; gap:10px; }
  .fsection-icon{ width:30px; height:30px; border-radius:50%; background:var(--brand-gradient); display:flex; align-items:center; justify-content:center; font-size:0.86rem; color:#fff; flex:none; }
  .fsection-title-text h3{ font-size:0.92rem; text-transform:none; letter-spacing:0; color:var(--text); font-weight:800; margin:0 0 2px; font-family:inherit; }
  .fsection-subtitle{ font-size:0.75rem; color:var(--text-faint); margin:0; }
  .frow{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  @media (max-width:560px){ .frow{ grid-template-columns:1fr; } }
  .field{ display:flex; flex-direction:column; gap:4px; }
  .field label{ font-size:0.78rem; color:var(--text-muted); font-weight:500; }
  .field textarea{ resize:vertical; min-height:64px; padding:8px 10px; line-height:1.4; }
  .hint{ font-size:0.72rem; color:var(--text-faint); }
  /* Gợi ý AI (VD: vòng đời sản phẩm suy từ xu hướng doanh thu) — luôn kèm nút
     "Áp dụng" riêng, KHÔNG tự điền cứng vào select để người dùng chủ động xác
     nhận, tránh ghi đè lựa chọn thủ công một cách âm thầm. */
  .ai-suggest{
    margin-top:6px; font-size:0.78rem; color:var(--text-muted); display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    background:var(--surface-2); border:1px dashed var(--border); border-radius:8px; padding:6px 10px;
  }
  .ai-suggest strong{ color:var(--accent-strong); }
  /* Cảnh báo sắp hết/đã hết hạn mức Gemini miễn phí trong ngày — hiện TRƯỚC khi
     bấm "Phân tích video bằng AI" (không phải sau khi lỗi), để người dùng biết
     trước còn dùng được không và khoảng bao lâu nữa mới hồi lại. */
  .ai-quota-warn{
    margin-bottom:8px; padding:8px 12px; border-radius:8px; font-size:0.8rem; line-height:1.5;
    background:rgba(234,179,8,0.12); border:1px solid rgba(234,179,8,0.35); color:var(--text);
  }
  .ai-quota-warn.exhausted{ background:rgba(220,38,38,0.12); border-color:rgba(220,38,38,0.4); }

  /* ---------- toast ---------- */
  .toast{
    position:fixed; bottom:20px; left:50%; transform:translateX(-50%) translateY(20px);
    background:var(--text); color:var(--bg); padding:10px 16px; border-radius:9px; font-size:0.85rem;
    box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:all .22s ease; z-index:60;
    display:flex; align-items:center; gap:8px;
  }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

  .sample-note{
    display:flex; align-items:center; gap:8px; font-size:0.78rem; color:var(--text-muted);
    background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:8px 12px; margin-bottom:14px;
  }
  .sample-note svg{ flex:none; color:var(--accent); }

  .pending-list{ display:flex; flex-direction:column; gap:8px; }
  .pending-item{
    display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border);
    border-radius:9px; padding:10px 12px; font-size:0.85rem;
  }
  .pending-item .nm{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .section-title{ font-size:1.02rem; margin:26px 0 10px; }

  [hidden]{ display:none !important; }
  /* Giới hạn chiều rộng nội dung + căn giữa trong phần còn lại sau sidebar — giống
     bố cục top.sonnetgroup.vn, tránh bảng/card kéo dãn sát 2 mép màn hình rộng. */
  .view{ display:none; }
  .view.active{ display:block; }
  /* Giới hạn kiểu top.sonnetgroup.vn CHỈ áp dụng cho các trang dạng danh sách/bảng
     (banner, KPI, bộ lọc, lưới thẻ) — trang chi tiết sản phẩm là nội dung dài, cần
     khung rộng hơn (#productDetailPage riêng, xem .detail-card bên dưới), nếu ép
     chung 1180px sẽ để lộ khoảng trống rất lớn 2 bên trên màn hình to. */
  .topline, .stats, .toolbar, .table-wrap, .pcard-grid, #videoWinDetailPage, #bgSlotGrid{ max-width:1180px; margin-left:auto; margin-right:auto; }
  /* Nền trang trí đặt ở PHÍA SAU/XUNG QUANH bảng chi tiết (không phải trên bảng —
     .detail-card vẫn trắng trơn, xem trên) để nổi bật khối trắng lên trên nền này. */
  #productDetailPage{ max-width:1500px; margin:0 auto; padding:20px; border-radius:var(--radius); }
  :root:not([data-theme="dark"]) #productDetailPage{
    background-image:url("/api/background/modal"); background-size:cover; background-position:center; background-repeat:no-repeat;
  }

  @media (max-width:900px){
    .sidebar{ width:76px; padding:16px 8px; }
    .brand-sub, .brand-name, .nav-item .label, .nav-item .count, .sidebar-foot .who, .view-switch{ display:none; }
    .brand{ display:flex; justify-content:center; }
    .brand .mark{ justify-content:center; }
    .nav-item{ justify-content:center; }
    .sidebar-foot{ justify-content:center; }
    .theme-btn{ margin:0; }
  }