:root {
  --green: #275c42;
  --green-2: #2f6d4f;
  --amber: #E0A83E;
  --dark: #1e3a2a;
  --dark-2: #162c20;
  --panel: #1b3327;
  --danger: #C0392B;
  --danger-text: #f0a79e; /* đỏ nhạt cho chữ cảnh báo/nút xoá trên nền tối — 1 nguồn thay vì hardcode rải rác */
  --ok: #4ea56f;
  --text: #f3f6f2;
  --muted: rgba(243, 246, 242, 0.65);
  --line: rgba(255, 255, 255, 0.1);
  --radius: 14px;

  /* Typography Design Tokens */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Typography Scale */
  --fs-2xs: 12px;
  --fs-xs: 13px;
  --fs-sm: 14px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: clamp(22px, 2.4vw, 28px);
  --fs-2xl: clamp(28px, 3.8vw, 36px);

  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  /* App CHỈ có giao diện tối. Khai báo này để trình duyệt vẽ mọi thành phần NATIVE theo tông tối:
     popup xổ của <select> (danh sách option — trước đây nền trắng, lạc hẳn tông), thanh cuộn,
     ô autofill, date/color picker. Không có nó, CSS chỉ tô được cái ô select đóng, còn popup do
     OS/trình duyệt vẽ nên vẫn sáng. */
  /* Ảnh đại diện bài đăng: CHỈ khoá CHIỀU CAO, bề ngang do TỈ LỆ quyết định (xem `.post-thumb`).
     Khoá chiều cao để mọi hàng danh sách cao bằng nhau bất kể reel 9:16 hay ảnh 1:1. 1 NGUỒN DUY
     NHẤT cho mọi nơi hiển thị (Tổng quan "Bài đăng nổi bật", lịch sử trang Fanpage, Top 3 + bảng
     thư viện của Báo cáo) — trước 28/7 cùng một thứ mà 4 nơi 4 cỡ, và đều là cỡ CỨNG nên ảnh 4:5
     bị nhét vào ô ngang 68×51 rồi cắt mất đầu/chân. */
  --post-thumb-h: 84px;

  color-scheme: dark;
}
/* Màn hẹp thu nhỏ ĐỒNG LOẠT qua chính biến trên — khỏi phải nhớ override ở từng view. */
@media (max-width: 600px) {
  :root { --post-thumb-h: 54px; }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--dark-2);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button { font-family: var(--font-sans); cursor: pointer; }
a { color: var(--amber); }

.app { display: flex; min-height: 100vh; }

/* Sidebar */
.sidebar {
  width: 236px; flex: 0 0 236px;
  background: linear-gradient(180deg, #1c3628 0%, var(--dark-2) 100%);
  border-right: 1px solid var(--line);
  padding: 22px 16px; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  overflow-y: auto; overflow-x: hidden;
}
.side-user { margin-top: auto; padding: 12px 8px 4px; border-top: 1px solid var(--line); }
.su-name { font-size: var(--fs-sm); font-weight: 600; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.su-actions { display: flex; gap: 6px; }
.su-actions .btn { flex: 1; justify-content: center; }
.btn.danger { color: #ff8f8f; }
.btn.danger:hover { background: rgba(255, 80, 80, 0.12); }
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; padding: 0 6px; }
.brand .leaf { width: 38px; height: 38px; }
.brand-name { font-weight: 800; font-size: var(--fs-lg); letter-spacing: -0.01em; }
.brand-sub { color: var(--muted); font-size: var(--fs-xs); }
#nav { display: flex; flex-direction: column; gap: 4px; }
.nav-section { font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 14px 10px 4px; }
.nav-section:first-child { padding-top: 4px; }
#nav button {
  display: flex; align-items: center; gap: 12px;
  background: transparent; border: none; color: var(--muted);
  font-size: var(--fs-base); font-weight: 600; text-align: left;
  padding: 12px 14px; border-radius: 10px; width: 100%;
}
#nav button span { font-size: 18px; }
#nav button:hover { background: rgba(255,255,255,.05); color: var(--text); }
#nav button.active { background: var(--green); color: #fff; }

/* Main — padding co mượt theo bề ngang: đạt 34/40px từ ~970/1250px trở lên, hẹp hơn thì co dần tới 18/14px */
.main { flex: 1; min-width: 0; padding: clamp(18px, 3.5vw, 34px) clamp(14px, 3.2vw, 40px) 80px; }
.page-head { margin-bottom: 24px; }
.page-head h1 { margin: 0; font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.02em; }
.page-head p { margin: 6px 0 0; color: var(--muted); font-size: var(--fs-base); }

/* Layout helpers */
.grid-2 { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 26px; align-items: start; }
.grid-2 > * { min-width: 0; } /* grid item mặc định min-width:auto → nội dung rộng làm tràn track */
@media (max-width: 1040px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.settings-cols { display: flex; gap: 18px; align-items: flex-start; }
.settings-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 900px) { .settings-cols { flex-direction: column; } }

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px;
}
.card h2 { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--amber); margin: 0 0 16px; }

/* Fields */
.field { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
.field > label { display: block; font-weight: 600; font-size: var(--fs-sm); margin-bottom: 7px; }
.field .hint { color: var(--muted); font-size: var(--fs-xs); margin: -3px 0 8px; }
.row { display: flex; gap: 12px; }
.row > * { flex: 1; min-width: 0; }
/* Con CỐ ĐỊNH cỡ trong .row — rule flex:1 ở trên kéo giãn cả pill/badge (space-between vô hiệu) lẫn
   ô logo 64px (flex-basis:0 đè width inline). Chặn ở MỌI bề ngang, không chỉ mobile. */
.row > .pill, .row > .fp-logo { flex: 0 0 auto; }

input[type=text], input[type=password], input[type=number], input[type=search], input[type=time], textarea, select {
  width: 100%; background: rgba(0,0,0,.28); border: 1px solid var(--line);
  border-radius: 10px; color: var(--text); font-size: var(--fs-base); padding: 10px 12px;
  font-family: var(--font-sans);
}
input[type=search] { -webkit-appearance: none; appearance: none; }
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }
textarea { resize: vertical; min-height: 62px; line-height: 1.45; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(224,168,62,.15); }
input::placeholder, textarea::placeholder { color: rgba(255,255,255,.3); }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: right 15px center, right 10px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
/* Windows/Linux vẽ popup select bằng widget native — tô thẳng option (macOS bỏ qua và đi theo
   color-scheme:dark ở :root). Hai lớp này bù nhau để danh sách xổ luôn tối trên mọi hệ. */
select option, select optgroup { background-color: var(--panel); color: var(--text); }
.mono { font-family: var(--font-mono); }

/* Buttons */
.btn { background: rgba(255,255,255,.07); border: 1px solid var(--line); color: var(--text); font-size: var(--fs-sm); font-weight: 600; padding: 10px 16px; border-radius: 10px; font-family: var(--font-sans); }
.btn:hover { background: rgba(255,255,255,.13); }
.btn.primary { background: var(--amber); color: #3a2c07; border-color: transparent; font-weight: 700; }
.btn.primary:hover { background: #ecb954; }
.btn.primary:disabled { opacity: .5; cursor: default; }
.btn.ghost { background: transparent; }
.btn.sm { padding: 7px 12px; font-size: var(--fs-xs); }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 6px; }

/* Verdict rows */
.verdict-row { display: flex; gap: 10px; margin-bottom: 10px; }
.verdict-row select { flex: 0 0 130px; }
.verdict-text { flex: 1; min-width: 0; }
.benefit-badge {
  flex: 0 0 130px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--amber); font-weight: 800; font-size: 18px;
  background: rgba(224, 168, 62, 0.14); border: 1px solid rgba(224, 168, 62, 0.4); border-radius: 8px;
}

/* Template lock (chốt) */
.tpl-lock-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; min-height: 20px; }
.tpl-lock-note { color: var(--amber); font-size: var(--fs-xs); font-weight: 600; }
select:disabled { opacity: 0.55; cursor: not-allowed; }

/* Copyable posting text (caption / hashtags) */
.copy-box { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: var(--fs-xs); line-height: 1.45; white-space: pre-wrap; word-break: break-word; }

/* Save bar dính đáy (Cài đặt) — sửa ô nào cũng thấy nút Lưu */
.save-bar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; gap: 14px; align-items: center;
  margin-top: 20px; padding: 14px 0 18px;
  background: var(--dark-2); border-top: 1px solid var(--line);
}

/* Tab trang Fanpage (Thương hiệu / Khuôn / Đăng bài / Tự động) + trang Cài đặt (dùng chung makeTabView) */
.fp-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; flex-wrap: wrap; }
.fp-tab { background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--muted); font-size: var(--fs-base); font-weight: 600; padding: 10px 14px; margin-bottom: -1px; }
.fp-tab:hover { color: var(--text); }
.fp-tab.active { color: var(--amber); border-bottom-color: var(--amber); font-weight: 700; }

/* Checklist tự động (Fanpage Đăng bài / Tự động) */
.chk-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.chk-item { display: flex; align-items: center; gap: 10px; font-size: var(--fs-base); color: var(--danger-text); }
.chk-item.ok { color: var(--text); }
.chk-mark { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-size: var(--fs-2xs); font-weight: 800; flex: 0 0 20px; background: rgba(255,255,255,.06); color: var(--muted); }
.chk-item.ok .chk-mark { background: var(--ok); color: #0b1f13; }
.chk-item.fail .chk-mark { background: var(--danger); color: #fff; }

/* Thống kê (Dashboard & Lịch sử & Báo cáo) */
.stats-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.stat-num { font-size: var(--fs-2xl); font-weight: 800; color: var(--amber); line-height: 1.1; }
.stat-label { font-size: var(--fs-xs); color: var(--muted); margin-top: 4px; }

.stats-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.stats-table th { text-align: left; font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); padding: 11px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.stats-table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: var(--fs-sm); }

/* Thân tab FULL WIDTH (21/7 bỏ cap 1040 theo yêu cầu): màn rộng lấp bằng BỐ CỤC nhiều cột
   (fp-brand-grid / pt-grid / fp-auto-grid) thay vì kéo giãn ô nhập 1 cột. */
/* Tab Tự động 2 cột trên màn rộng: trái = checklist Điều kiện + Sức khoẻ (trạng thái), phải = form Tự tạo */
.fp-auto-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.25fr); gap: 18px; align-items: start; }
.fp-auto-grid > * { min-width: 0; }
@media (max-width: 1200px) { .fp-auto-grid { grid-template-columns: minmax(0,1fr); } }
/* Mobile: 4 tab wrap 2 hàng làm underline hàng trên lơ lửng — đổi sang pill, bỏ kẻ đáy */
@media (max-width: 560px) {
  .fp-tabs { border-bottom: none; gap: 6px; }
  .fp-tab { border: 1px solid var(--line); border-radius: 999px; margin-bottom: 0; padding: 8px 13px; }
  .fp-tab.active { border-color: var(--amber); background: rgba(224,168,62,.14); }
}
/* Checklist "tự chạy" */
.chk-list { display: grid; gap: 8px; }
.chk-item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--danger-text); }
.chk-item.ok { color: var(--text); }
.chk-mark { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-size: 12px; font-weight: 800; flex: 0 0 20px; background: rgba(255,255,255,.06); color: var(--muted); }
.chk-item.ok .chk-mark { background: rgba(78,165,111,.2); color: var(--ok); }

/* Thống kê */
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat-card { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); border-radius: 12px; padding: 14px; text-align: center; transition: border-color .12s, background .12s; }
.stat-card.clickable { cursor: pointer; }
.stat-card.clickable:hover { border-color: rgba(224,168,62,.5); background: rgba(255,255,255,.05); }
.stat-card.active { border-color: var(--amber); background: rgba(224,168,62,.1); }
.stat-num { font-size: 28px; font-weight: 800; color: var(--amber); line-height: 1.1; }
.stat-label { font-size: 12px; color: var(--muted); margin-top: 4px; }
/* Bảng thống kê — mỗi thông tin 1 cột (cuộn ngang nếu màn hẹp) */
.stats-table-wrap { border: 1px solid var(--line); border-radius: 12px; overflow-x: auto; }
.stats-table { width: 100%; min-width: 1080px; border-collapse: collapse; }
.stats-table th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); padding: 11px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.stats-table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: 13px; }
.stats-table th:first-child, .stats-table td:first-child { padding-left: 14px; }
.stats-table th:last-child, .stats-table td:last-child { padding-right: 14px; }
.stats-table tbody tr:last-child td { border-bottom: 0; }
.stats-table tbody tr:hover td { background: rgba(255,255,255,.02); }
.stats-table tbody tr.is-posted td:first-child { box-shadow: inset 3px 0 0 rgba(78,165,111,.6); } /* vạch xanh trái = đã đăng */
.st-time { white-space: nowrap; color: var(--muted); font-size: 12px; }
.st-title { font-weight: 700; font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; min-width: 150px; max-width: 240px; }
.st-fanpage { font-size: 12.5px; white-space: nowrap; }
.st-content { display: flex; align-items: flex-start; gap: 8px; min-width: 150px; max-width: 220px; }
.st-content .clamp2 { flex: 1; min-width: 0; font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.st-content .btn { flex: 0 0 auto; padding: 3px 8px; font-size: 11px; }
.st-post { display: flex; flex-direction: column; gap: 6px; min-width: 190px; }
.st-post .pill { align-self: flex-start; }
.st-post .post-url { display: flex; gap: 6px; align-items: center; }
.st-actions { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
input.posted-url-in { flex: 1; min-width: 0; font-size: 12px; padding: 6px 8px; border-radius: 8px; } /* specificity (0,1,1) thắng input[type=text] chung */
/* Nút icon vuông + menu ⋯ (thao tác phụ) */
.icon-btn { width: 34px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--text); font-size: 15px; text-decoration: none; }
.icon-btn:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); }
.icon-btn:disabled { opacity: .5; cursor: default; }
.menu-wrap { display: inline-flex; }
.menu-pop { position: fixed; min-width: 184px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 5px; box-shadow: 0 12px 30px rgba(0,0,0,.4); display: none; z-index: 60; }
.menu-wrap.open .menu-pop { display: block; }
.menu-item { display: block; width: 100%; text-align: left; padding: 8px 10px; font-size: 12.5px; color: var(--text); background: transparent; border: 0; border-radius: 7px; cursor: pointer; }
.menu-item:hover { background: rgba(255,255,255,.06); }
.menu-item.danger { color: var(--danger-text); }
.menu-sep { height: 1px; background: var(--line); margin: 4px 2px; }

/* Pills / badges */
.pill { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.pill.set { background: rgba(78,165,111,.18); color: var(--ok); }
.pill.unset { background: rgba(255,255,255,.08); color: var(--muted); }
.pill.default { background: rgba(224,168,62,.18); color: var(--amber); }
.pill.warn { background: rgba(240,167,158,.16); color: var(--danger-text); } /* cờ posted không bằng chứng FB (postedBadge lib.js) — cảnh báo, khác hẳn 'set' đã xác minh */
.swatches { display: flex; gap: 6px; margin: 10px 0; }
.swatch { width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(0,0,0,.3); }

/* Preview surface: checkerboard shows where the transparent video hole is */
.preview-wrap { position: sticky; top: 20px; }
.preview {
  width: 100%; max-width: 340px; aspect-ratio: 1080/1920; margin: 0 auto;
  border-radius: 16px; overflow: hidden; border: 1px solid var(--line);
  background-color: #2a2a2a;
  background-image:
    linear-gradient(45deg, #3a3a3a 25%, transparent 25%),
    linear-gradient(-45deg, #3a3a3a 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #3a3a3a 75%),
    linear-gradient(-45deg, transparent 75%, #3a3a3a 75%);
  background-size: 26px 26px;
  background-position: 0 0, 0 13px, 13px -13px, -13px 0;
  display: flex; align-items: center; justify-content: center;
}
.preview img, .preview video { width: 100%; height: 100%; object-fit: contain; display: block; }
.preview .empty { color: var(--muted); font-size: 13px; text-align: center; padding: 20px; }
.preview-cap { text-align: center; color: var(--muted); font-size: 12px; margin-top: 10px; }
/* Mobile (1 cột): preview nằm CUỐI trang — khung 9:16 TRỐNG cao ~614px chỉ để hiện 1 câu placeholder
   là phí cả màn cuộn → co theo nội dung khi đang trống/tiến trình; có ảnh/video thật thì nở lại 9:16. */
@media (max-width: 1040px) {
  .preview:has(> .empty) { aspect-ratio: auto; min-height: 130px; }
  .preview-wrap { position: static; scroll-margin-top: 70px; } /* sticky vô nghĩa ở 1 cột; chừa topbar khi scrollIntoView */
}

/* Thử clip nền */
.bg-card { margin-top: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(0,0,0,.18); overflow: hidden; }
.bg-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 12.5px; font-weight: 600; color: var(--text); border-bottom: 1px solid var(--line); }
.bg-head > span:first-child { flex: 1; }
.bg-badge { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--muted); letter-spacing: .2px; }
.bg-badge.ok { background: rgba(70,180,120,.18); color: #7ddba3; }
.bg-badge.free { background: rgba(224,168,62,.16); color: var(--amber); }
.bg-frame { aspect-ratio: 16/9; background: #0d0d0d; display: flex; align-items: center; justify-content: center; }
.bg-frame video { width: 100%; height: 100%; object-fit: cover; display: block; background: #0d0d0d; }
.bg-skel { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.bg-empty { color: var(--muted); font-size: 14px; }
.bg-foot { padding: 9px 12px; font-size: 11.5px; color: var(--muted); border-top: 1px solid var(--line); line-height: 1.45; }

/* Fanpage card */
.fp-card { cursor: pointer; transition: border-color .15s; }
.fp-card:hover { border-color: var(--amber); }
.fp-card .fp-top { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.fp-logo { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 9px; background: var(--dark-2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.fp-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fp-card .fp-name { font-weight: 700; font-size: 16px; }
.fp-card .fp-id { color: var(--muted); font-size: 12px; font-family: ui-monospace, monospace; }
/* Khối tên/id phải co được trong flex (min-width:0) + cắt gọn khi cột hẹp — chống tràn ở 2 cột mobile */
.fp-card .fp-info { min-width: 0; }
.fp-card .fp-name { overflow-wrap: break-word; }
.fp-card .fp-id { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Mobile: danh sách fanpage 2 cột thay vì rơi về 1 — thu gọn card cho vừa bề ngang điện thoại */
@media (max-width: 560px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .fp-card { padding: 13px; }
  .fp-card .fp-top { gap: 8px; margin-bottom: 2px; }
  .fp-logo { width: 32px; height: 32px; }
  .fp-card .fp-name { font-size: 13.5px; line-height: 1.25; }
  .fp-card .fp-id { font-size: 11.5px; }
  .swatches { gap: 5px; margin: 8px 0; }
  .swatch { width: 20px; height: 20px; }
}

/* Tags — nhãn gom nhóm fanpage (free-form). Chip đọc-only trên card + chip bấm-lọc + ô sửa trong form. */
.fp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tag-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-weight: 600; font-size: 11.5px; line-height: 1; letter-spacing: .2px;
  padding: 4px 9px; border-radius: 999px; white-space: nowrap;
  background: rgba(224,168,62,.14); color: var(--amber); border: 1px solid rgba(224,168,62,.28);
}
/* Unified Toolbar Card cho trang Fanpages */
.fp-toolbar {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.fp-toolbar-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.fp-search-box {
  position: relative;
  display: flex;
  align-items: center;
  width: 250px;
  flex: 0 0 250px;
}
.fp-search-icon {
  position: absolute;
  left: 10px;
  font-size: 13px;
  opacity: 0.6;
  pointer-events: none;
}
.fp-search-input {
  width: 100%;
  padding-left: 30px !important;
  border-radius: 8px !important;
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid var(--line) !important;
  font-size: 13px !important;
  color: var(--text) !important;
}
.fp-search-input:focus {
  border-color: var(--amber) !important;
  box-shadow: 0 0 0 2px rgba(224, 168, 62, 0.15);
}
.fp-select {
  cursor: pointer;
  border-radius: 8px !important;
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid var(--line) !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
  color: var(--text) !important;
}
.fp-status-select {
  width: 170px !important;
  flex: 0 0 170px;
}
.fp-select:focus {
  border-color: var(--amber) !important;
}
.fp-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-left: auto;
}
.fp-sort-group {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  background: rgba(0, 0, 0, 0.2);
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid var(--line);
}
.fp-sort-group .fp-select {
  border: none !important;
  background: transparent !important;
  padding: 2px 24px 2px 4px !important;
  width: auto !important;
}
.fp-dir-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 6px;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.06);
  color: var(--amber);
  border: 1px solid rgba(224, 168, 62, 0.3);
  transition: all 0.15s ease;
}
.fp-dir-btn:hover {
  background: rgba(224, 168, 62, 0.2);
  border-color: var(--amber);
}
.fp-counter {
  font-size: 12.5px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  background: rgba(0, 0, 0, 0.15);
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
}
.fp-toolbar-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

/* Responsive cho Mobile / Tablet */
@media (max-width: 768px) {
  .fp-toolbar {
    padding: 10px 12px;
    gap: 8px;
  }
  .fp-toolbar-top {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .fp-search-box {
    width: 100%;
    max-width: 100%;
    flex: 1 1 100%;
  }
  .fp-status-select {
    width: 100% !important;
    max-width: 100%;
    flex: 1 1 100%;
  }
  .fp-toolbar-right {
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: 0;
  }
  .fp-sort-group {
    flex: 1 1 auto;
    justify-content: space-between;
  }
  .fp-sort-group .fp-select {
    width: auto !important;
    flex: 1 1 auto;
  }
  .fp-toolbar-bottom {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .fp-toolbar-bottom::-webkit-scrollbar {
    height: 3px;
  }
  .fp-toolbar-bottom::-webkit-scrollbar-thumb {
    background: rgba(224, 168, 62, 0.4);
    border-radius: 4px;
  }
}

/* Thanh lọc nhóm (đầu danh sách) — chip là <button> bấm để lọc AND */
.tag-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; }
.tag-filter-label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.tag-filter .tag-chip { cursor: pointer; background: rgba(255,255,255,.05); color: var(--muted); border-color: var(--line); transition: color .12s, border-color .12s, background .12s; }
.tag-filter .tag-chip:hover { color: var(--text); border-color: var(--amber); }
.tag-filter .tag-chip.active { background: rgba(224,168,62,.2); color: var(--amber); border-color: var(--amber); font-weight: 700; box-shadow: 0 0 8px rgba(224,168,62,.15); }
.tag-clear { background: none; border: none; color: var(--danger-text); font-size: 12px; cursor: pointer; padding: 4px 6px; border-radius: 8px; font-weight: 600; }
.tag-clear:hover { background: rgba(255,255,255,.08); }
/* Ô sửa tags trong form — input trong suốt (2-class specificity thắng input[type=text], khỏi !important) */
.tag-edit { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 7px 8px; background: rgba(0,0,0,.28); border: 1px solid var(--line); border-radius: 10px; }
.tag-edit .tag-chip.removable { padding-right: 5px; }
.tag-edit .tag-x { background: none; border: none; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 0 0 1px; opacity: .65; }
.tag-edit .tag-x:hover { opacity: 1; }
.tag-edit .tag-edit-input { flex: 1 1 120px; min-width: 100px; width: auto; border: none; background: transparent; padding: 4px 2px; border-radius: 0; }
.tag-edit .tag-edit-input::-webkit-calendar-picker-indicator,
.tag-edit .tag-edit-input::-webkit-list-button { display: none !important; -webkit-appearance: none; }
.tag-edit .tag-edit-input:focus { outline: none; }
/* Gợi ý tag đã dùng (dưới ô sửa) — chip nét đứt bấm để thêm */
.tag-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.tag-suggest-label { font-size: 11.5px; color: var(--muted); }
.tag-chip.suggest { cursor: pointer; background: transparent; color: var(--muted); border-style: dashed; }
.tag-chip.suggest:hover { color: var(--amber); border-color: var(--amber); border-style: solid; }

/* Form Sửa Fanpage — tab Thương hiệu 2 cột (chữ | nhận diện). Bề ngang cap chung ở .fp-tab-body;
   breakpoint 1040 khớp .pt-grid/.grid-2 — hết cảnh 2 tab cùng trang sập cột ở 2 ngưỡng khác nhau. */
.fp-brand-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; align-items: start; }
.fp-brand-grid > * { min-width: 0; }
@media (max-width: 1040px) { .fp-brand-grid { grid-template-columns: minmax(0,1fr); } }

/* color picker row */
.color-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.color-row label { flex: 0 0 92px; font-size: 13px; color: var(--muted); }
.color-row input[type=color] { width: 40px; height: 34px; padding: 2px; background: transparent; border: 1px solid var(--line); border-radius: 8px; }
.color-row input[type=text] { flex: 0 1 240px; } /* đủ hex 8 ký tự + placeholder — không giãn hết cột */

/* Đăng bài lên Fanpage (posting card) — 2 cột: cấu hình+lịch | token+hướng dẫn */
.pt-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 22px; align-items: start; }
@media (max-width: 1040px) { .pt-grid { grid-template-columns: minmax(0,1fr); } }
.pt-sub { font-weight: 700; font-size: 13.5px; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
/* Toggle có mô tả: checkbox size cố định (KHÔNG dùng .row kẻo bị flex:1 kéo giãn), nhãn + mô tả xám */
.pt-toggle { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.pt-toggle input[type=checkbox] { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; accent-color: var(--amber); }
.pt-tt { font-weight: 600; font-size: 13.5px; }
.pt-td { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; font-weight: 400; }
.pt-panel { background: rgba(0,0,0,.18); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.pt-sched { transition: opacity .15s; }
.pt-sched.off { opacity: .45; }
.pt-help { margin-top: 14px; padding: 0 4px; }
.pt-steps { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--muted); line-height: 1.7; }
.pt-steps b { color: var(--text); font-weight: 600; }
code { background: rgba(255,255,255,.08); border-radius: 4px; padding: 1px 5px; font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* log */
.log { background: #0d1a12; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-family: ui-monospace, monospace; font-size: 12px; line-height: 1.6; color: #bcd; max-height: 220px; overflow: auto; white-space: pre-wrap; }

/* toast */
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(90px);
  background: var(--green-2); color: #fff; padding: 13px 24px; border-radius: 12px;
  font-weight: 600; font-size: 14px; box-shadow: 0 14px 34px rgba(0,0,0,.45);
  opacity: 0; transition: transform .25s, opacity .25s; pointer-events: none; z-index: 50; max-width: 80vw;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast.bad { background: var(--danger); }

/* spinner */
.spinner { width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,.25); border-top-color: #fff; border-radius: 50%; display: inline-block; animation: spin .7s linear infinite; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }

.muted { color: var(--muted); }
.divider { height: 1px; background: var(--line); margin: 18px 0; }
details.adv summary { cursor: pointer; color: var(--amber); font-size: 13px; font-weight: 600; margin-bottom: 10px; }

/* word counters */
.wc { display: inline-block; font-size: 11px; color: var(--muted); margin: 6px 10px 0 2px; }
.wc.over { color: var(--danger-text); font-weight: 600; }
.wc-line { margin-top: 2px; }

/* render progress steps */
.progress { display: flex; flex-direction: column; gap: 13px; }
.pstep { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); }
.pstep .pdot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.15); flex: 0 0 auto; }
.pstep.active { color: var(--text); font-weight: 600; }
.pstep.active .pdot { background: var(--amber); box-shadow: 0 0 0 4px rgba(224,168,62,.2); animation: pulse 1s infinite; }
.pstep.done { color: var(--ok); }
.pstep.done .pdot { background: var(--ok); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* render history */
.hist-row { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); }
.hist-title { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* "source selected" banner in the Tạo Reel form */

/* library browse modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px; z-index: 100; overflow: auto; }
.modal { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; width: 100%; max-width: 660px; max-height: 86vh; display: flex; flex-direction: column; position: relative; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.lib-body { padding: 8px 22px 22px; overflow: auto; }
.src-text { white-space: pre-wrap; font-size: 13px; line-height: 1.6; color: var(--text); max-height: 46vh; overflow-y: auto; padding: 12px 14px; background: rgba(0,0,0,.22); border: 1px solid var(--line); border-radius: 10px; }

/* Link card (ảnh + tiêu đề của nguồn) */
.link-card { display: flex; gap: 12px; align-items: center; padding: 10px; background: rgba(0,0,0,.2); border: 1px solid var(--line); border-radius: 12px; }
.link-card.loading { align-items: center; gap: 10px; padding: 14px; }
.link-thumb { width: 140px; height: 79px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; background: #0d0d0d; }
.link-meta { flex: 1; min-width: 0; }
.link-type { font-size: 11px; color: var(--amber); font-weight: 700; letter-spacing: .3px; margin-bottom: 3px; }
.link-title { font-size: 14px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Cảnh báo fanpage đã sản xuất video từ nguồn này (chống trùng content) */
.link-dup-warn { font-size: 12.5px; color: var(--amber); background: rgba(224,168,62,.12); border: 1px solid rgba(224,168,62,.35); border-radius: 8px; padding: 6px 10px; margin-top: 8px; }
.lib-sec { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--amber); margin: 18px 0 6px; }
.lib-acc { border-top: 1px solid var(--line); }
.lib-acc summary { cursor: pointer; font-weight: 600; padding: 10px 2px; font-size: 14px; }
.lib-group { padding: 0 2px 6px 6px; }
.lib-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); }
.lib-title { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-loading { position: absolute; inset: 0; background: rgba(22,44,32,.78); display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 16px; font-weight: 600; }

/* template list row + thumbnail */
.tpl-row { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.tpl-thumb { flex: 0 0 auto; width: 40px; height: 71px; border-radius: 6px; overflow: hidden; background: var(--dark-2); border: 1px solid var(--line); }
.tpl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Nhóm khuôn reel v4: dải màu + chấm màu + menu ⋯ gọn; co giãn cho NHIỀU chủ đề (--gc theo nhóm) ---- */
.tpl-search input { width: 100%; }
.tpl-group { position: relative; overflow: visible; border: 1px solid var(--line); border-left: 4px solid var(--gc, #4ea8de); border-radius: 12px; margin-bottom: 10px; background: rgba(255,255,255,.02); }
.tpl-group.dragover { box-shadow: 0 0 0 2px var(--gc, #4ea8de) inset; border-color: var(--gc, #4ea8de); }
.tpl-group-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; user-select: none; }
.tpl-caret { font-size: 10px; opacity: .6; flex: 0 0 auto; width: 10px; transition: transform .15s; }
.tpl-group.collapsed .tpl-caret { transform: rotate(-90deg); }
.tpl-group.collapsed .tpl-group-body { display: none; }
.tpl-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--gc, #4ea8de); flex: 0 0 auto; cursor: pointer; border: 2px solid rgba(255,255,255,.18); box-sizing: content-box; }
.tpl-group-name { font-size: 14px; font-weight: 700; letter-spacing: .1px; }
.tpl-count { font-size: 11px; color: var(--muted); flex: 0 0 auto; }
.tpl-menu-btn { margin-left: auto; flex: 0 0 auto; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 18px; line-height: 1; padding: 2px 9px; border-radius: 7px; }
.tpl-menu-btn:hover { background: rgba(255,255,255,.08); color: var(--fg, #e8efe9); }
.tpl-menu { position: absolute; right: 10px; top: 42px; z-index: 30; min-width: 156px; background: var(--dark-2); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 34px rgba(0,0,0,.45); padding: 5px; display: none; flex-direction: column; gap: 1px; }
.tpl-menu.open { display: flex; }
.tpl-menu-item { display: block; width: 100%; text-align: left; background: none; border: 0; color: inherit; padding: 8px 11px; border-radius: 7px; cursor: pointer; font-size: 13px; }
.tpl-menu-item:hover { background: rgba(255,255,255,.08); }
.tpl-menu-item.danger { color: var(--danger-text); }
.tpl-group-summary { padding: 0 14px 11px 32px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.tpl-group-body { padding: 2px 14px 10px; }
.tpl-group-body.empty::after { content: "Kéo khuôn vào đây"; display: block; text-align: center; color: var(--muted); font-size: 12px; opacity: .5; padding: 14px; }
.tpl-group-body .tpl-row:first-child { border-top: 0; margin-top: 2px; padding-top: 6px; }
.tpl-drag { flex: 0 0 auto; cursor: grab; color: var(--muted); font-size: 15px; padding: 0 2px; opacity: .4; }
.tpl-group:hover .tpl-drag { opacity: .8; }
.tpl-drag:active { cursor: grabbing; }
.tpl-row[draggable] { position: relative; }
.tpl-row.dragging { opacity: .4; }
.tpl-row.drop-before::before { content: ""; position: absolute; left: 6px; right: 6px; top: -1px; height: 2px; background: var(--gc, #4ea8de); border-radius: 2px; }
.tpl-row.filtered-out { display: none; }
.tpl-noresult { color: var(--muted); font-size: 13px; padding: 12px; text-align: center; }

/* draggable video_area box on the template preview */
.va-box { position: absolute; border: 2px solid var(--amber); background: rgba(224,168,62,.14); box-sizing: border-box; cursor: move; touch-action: none; border-radius: 4px; }
.va-handle { position: absolute; right: -8px; bottom: -8px; width: 16px; height: 16px; background: var(--amber); border: 2px solid var(--dark-2); border-radius: 4px; cursor: nwse-resize; touch-action: none; }
/* Khung kéo-thả từng thành phần template (move-only). Video (.vert) chỉ kéo dọc. */
.lay-box { position: absolute; box-sizing: border-box; cursor: move; touch-action: none; border: 2px dashed rgba(224,168,62,.85); background: rgba(224,168,62,.10); border-radius: 4px; }
.lay-box.vert { cursor: ns-resize; border-style: solid; }
.lay-box:hover { background: rgba(224,168,62,.2); z-index: 4; }
.lay-box.dragging { z-index: 10; background: rgba(224,168,62,.28); }
.lay-tag { position: absolute; top: -1px; left: -1px; font-size: 11px; font-weight: 700; line-height: 1; padding: 3px 6px; background: var(--amber); color: var(--dark-2); border-radius: 4px 0 6px 0; pointer-events: none; white-space: nowrap; }

/* ============ Responsive (mobile/tablet) ============ */
/* Topbar + backdrop chỉ dùng ở màn hẹp; desktop ẩn hẳn, layout cũ giữ nguyên. */
.topbar { display: none; }
.backdrop { display: none; }

@media (max-width: 900px) {
  /* Topbar cố định trên cùng: nút ☰ + logo */
  .topbar {
    display: flex; align-items: center; gap: 4px;
    position: fixed; top: 0; left: 0; right: 0; height: 54px; z-index: 40;
    background: #1c3628; border-bottom: 1px solid var(--line); padding: 0 10px;
  }
  .topbar .brand { margin: 0; padding: 0; gap: 9px; }
  .topbar .brand .leaf { width: 26px; height: 26px; }
  .topbar .brand-name { font-size: 16px; }
  .nav-toggle {
    background: transparent; border: none; color: var(--text);
    width: 44px; height: 44px; font-size: 20px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .nav-toggle:hover { background: rgba(255,255,255,.07); }

  /* Sidebar → drawer trượt từ trái, đè lên nội dung.
     overflow-y: nội dung sidebar ~460px — điện thoại xoay ngang (dvh ~390px) phải cuộn được tới nút cuối. */
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; height: 100dvh; z-index: 60;
    overflow-y: auto;
    transform: translateX(-105%); transition: transform .22s ease;
    box-shadow: 0 0 44px rgba(0,0,0,.5);
  }
  .app.nav-open .sidebar { transform: translateX(0); }
  .backdrop {
    display: block; position: fixed; inset: 0; z-index: 50;
    background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .22s;
  }
  .app.nav-open .backdrop { opacity: 1; pointer-events: auto; }
  body:has(.app.nav-open) { overflow: hidden; } /* khoá cuộn nền khi drawer mở */

  /* Chừa chỗ cho topbar */
  .main { padding-top: calc(54px + 16px); }

  /* iOS Safari tự phóng to khi focus input <16px — nâng cỡ chữ form trên mobile */
  input[type=text], input[type=password], input[type=number], input[type=search], input[type=time], textarea, select { font-size: 16px; }
}

@media (max-width: 720px) {
  /* Hàng field (bộ lọc Thống kê, hàng input link…) xuống dòng thay vì bóp méo */
  .row { flex-wrap: wrap; }
  .row > * { flex: 1 1 160px; }
  .row > .pill, .row > .fp-logo { flex: 0 0 auto; } /* giữ đồng bộ rule global (mobile re-set vì dòng trên đè) */
  /* Verdict: nhãn ở dòng trên, ô nội dung full-width dòng dưới */
  .verdict-row { flex-wrap: wrap; }
  .verdict-text { flex: 1 1 100%; }
  /* Modal sát mép màn hình hơn */
  .modal-overlay { padding: 14px 10px; }
  .modal { max-height: 94dvh; }
  .link-thumb { width: 104px; height: 59px; }
}

/* Màn cảm ứng: nút bấm đủ lớn cho ngón tay */
@media (pointer: coarse) {
  .btn { min-height: 40px; }
  .btn.sm { min-height: 36px; }
}

/* Panel tìm & chọn clip nền (form Tạo Reel) */
.stock-panel { margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: var(--dark-2); }
/* Thanh tìm: từ khoá full-width; hàng 2 = Nguồn (co giãn) + nút Tìm canh ĐÁY khớp dropdown */
.stock-searchbar { margin-bottom: 12px; }
.stock-searchbar > .field { margin-bottom: 10px; }
.stock-searchbar-row2 { display: flex; gap: 12px; align-items: flex-end; }
.stock-searchbar-row2 > .field { flex: 1; margin-bottom: 0; }
.stock-searchbar-row2 > .btn { flex: 0 0 auto; }
.stock-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 4px; }
.stock-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; }
.stock-pageinfo { font-size: 12.5px; color: var(--muted); }
.stock-item { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; background: var(--panel); }
.stock-item.picked { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
.stock-thumb { aspect-ratio: 16 / 9; background: #000; cursor: pointer; }
.stock-thumb img, .stock-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.stock-noimg { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 28px; }
.stock-meta { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 6px 8px; font-size: 12px; color: var(--muted); }
.stock-item .btn { margin: 0 8px 8px; }

/* ---- Báo cáo Fanpage (trang /bao-cao, admin) ---- */
.report-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 12px; }
@media (max-width: 1040px) { .report-charts { grid-template-columns: minmax(0, 1fr); } }
.report-chart { background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 0; }
.report-chart svg { display: block; width: 100%; height: auto; }
.report-chart-title { font-size: 13px; font-weight: 700; margin-bottom: 8px; color: var(--muted); }
.report-thumb {
  object-fit: cover;
  border-radius: 8px;
  background: #000;
  display: block;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s, box-shadow 0.2s;
}
.report-thumb:hover {
  transform: scale(1.08);
  border-color: var(--amber);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  z-index: 5;
}
/* CỠ của .report-thumb khai chung với .dashboard-post-thumb ở trên (bộ biến --post-thumb-*).
   ĐỪNG đặt lại width/height theo ngữ cảnh ở đây: 4 dòng `.report-top-row`/`.report-content-table`
   cũ có specificity CAO HƠN rule chung nên chúng âm thầm vô hiệu hoá cỡ chuẩn — đó chính là lý do
   cùng một ảnh bài đăng mà Tổng quan, Top 3 và bảng thư viện ra 3 cỡ khác nhau (28/7). */
.report-ava { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.report-fp { display: flex; gap: 10px; align-items: center; min-width: 180px; }
.report-err { color: var(--danger-text); font-size: 12px; margin-top: 2px; }
.report-msg { max-width: 420px; font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.report-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.report-content-table { min-width: 900px; }
.report-overview-table { min-width: 980px; }
/* ---- Báo cáo v2 (22/7): delta, triage, lưới lịch, top bài ---- */
.num { text-align: right; font-variant-numeric: tabular-nums; }
.report-delta { display: block; font-size: 11px; font-weight: 700; margin-top: 2px; }
.report-delta.up { color: var(--ok); }
.report-delta.down { color: var(--danger-text); }
.report-delta.muted { color: var(--muted); }
td .report-delta { display: inline-block; margin-left: 6px; }
.report-dim { opacity: .55; } /* hàng chưa kết nối chìm xuống — mắt dồn vào page có số */
.report-dim-warn td { background: rgba(192,57,43,.07); }
.report-attn { border-color: rgba(224,168,62,.55); margin-bottom: 16px; }
.report-attn-row { font-size: 13px; padding: 5px 0; border-top: 1px solid var(--line); cursor: pointer; }
.report-attn-row:first-of-type { border-top: 0; margin-top: 6px; }
.report-attn-row:hover { color: var(--amber); }
.report-chart-sum { font-size: 11.5px; margin-top: 6px; }
.report-slot-grid { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; }
.report-slot-day { flex: 0 0 auto; width: 38px; text-align: center; }
.report-slot-day.empty { opacity: .5; }
.report-slot-date { font-size: 10px; color: var(--muted); line-height: 1.2; white-space: nowrap; }
.report-slot-marks { display: flex; flex-direction: column; align-items: center; gap: 1px; margin-top: 3px; min-height: 34px; }
.report-slot { font-size: 12px; line-height: 1.25; cursor: default; white-space: nowrap; }
.report-slot.none { color: var(--muted); font-weight: 700; }
.report-top-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.report-top-row:first-of-type { border-top: 0; margin-top: 8px; }
.report-top-rank { font-size: 18px; flex: 0 0 auto; }
.report-funnel-table { min-width: 640px; }
/* Cột tên page DÍNH khi cuộn ngang — mobile ≤560 không mất ngữ cảnh hàng nào của page nào */
.report-overview-table th:first-child, .report-overview-table td:first-child { position: sticky; left: 0; background: var(--panel); z-index: 1; box-shadow: 1px 0 0 var(--line); }
.report-overview-table tbody tr:hover td:first-child { background: #223c2e; } /* hover đồng bộ với overlay rgba của hàng */
/* Header cột SỐ căn phải khớp giá trị (header trái + số phải giữa cột rộng = nhìn như "lệch cột");
   th sort bấm được — hover/active tô amber, mũi tên ↓↑ nói rõ chiều. */
.stats-table th.num { text-align: right; }
.report-th-sort { cursor: pointer; user-select: none; }
.report-th-sort:hover, .report-th-sort.active { color: var(--amber); }
/* ---- Combobox chọn fanpage (makeFanpagePicker) — tìm tên/tag, thay <select>. Báo cáo/Tạo Reel/Ảnh. ---- */
.fp-picker-wrap { position: relative; width: 100%; }
/* min-height khớp CHIỀU CAO native <select> (~38.5px) — picker có logo 24px nên cao hơn nếu chỉ dùng padding;
   min-height + align-items:center giữ 1 chiều cao ỔN ĐỊNH bất kể dòng có logo (24px) hay text-only (~18px). */
.fp-picker { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  min-height: 38px; padding: 4px 11px; box-sizing: border-box; background: rgba(0,0,0,.28); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.fp-picker:hover, .fp-picker-wrap.open .fp-picker { border-color: var(--amber); }
.fp-picker-cur { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fp-picker-label { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fp-picker-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-picker-arrow { color: var(--muted); flex: 0 0 auto; font-size: 11px; }
.fp-picker-logo { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: #000; }
.fp-picker-allicon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.fp-picker-panel { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; display: none;
  background: var(--panel); border: 1px solid var(--amber); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.5); overflow: hidden; }
.fp-picker-wrap.open .fp-picker-panel { display: block; }
.fp-picker-search { width: 100%; border: none; border-bottom: 1px solid var(--line); border-radius: 0;
  background: rgba(0,0,0,.25); padding: 10px 12px; }
.fp-picker-search:focus { outline: none; border-bottom-color: var(--amber); }
.fp-picker-list { max-height: 320px; overflow-y: auto; }
.fp-picker-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; }
.fp-picker-row.active { background: rgba(224,168,62,.14); }
.fp-picker-row.picked { box-shadow: inset 3px 0 0 var(--amber); }
.fp-picker-main { min-width: 0; flex: 1; }
.fp-picker-main .fp-picker-name { font-weight: 600; }
.fp-picker-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.fp-picker-tags .tag-chip { font-size: 10px; padding: 1px 6px; }
/* Giá trị-link trong card fanpage (badge/khuôn/chip số/sparkline) — con trỏ + sáng lên khi hover báo bấm được. */
.fp-card-link { cursor: pointer; }
.fp-card-link:hover { filter: brightness(1.25); }

.dashboard-post-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-subtle);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.dashboard-post-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-left: auto;
}
.dashboard-post-item:hover {
  background: var(--bg-hover);
  border-color: rgba(224, 168, 62, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Rank Badges */
.dashboard-rank-badge {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
  user-select: none;
}
.dashboard-rank-badge.rank-1 {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(251, 191, 36, 0.45));
  border: 1px solid #f59e0b;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
  font-size: 17px;
}
.dashboard-rank-badge.rank-2 {
  background: linear-gradient(135deg, rgba(156, 163, 175, 0.2), rgba(229, 231, 235, 0.35));
  border: 1px solid #9ca3af;
  font-size: 17px;
}
.dashboard-rank-badge.rank-3 {
  background: linear-gradient(135deg, rgba(180, 83, 9, 0.2), rgba(217, 119, 6, 0.35));
  border: 1px solid #d97706;
  font-size: 17px;
}
.dashboard-rank-badge.rank-other {
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  font-size: 12.5px;
  border: 1px solid var(--line);
}

/* Thumbnails */
.dashboard-post-thumb {
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  background: #111;
  border: 1px solid var(--line);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s, box-shadow 0.2s;
}
.dashboard-post-thumb:hover {
  transform: scale(1.06);
  border-color: var(--amber);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  z-index: 5;
}
/* CHIỀU CAO chung + BỀ NGANG theo tỉ lệ. Dùng CHUNG với `.report-thumb` bên trang Báo cáo. */
.dashboard-post-thumb,
.report-thumb {
  height: var(--post-thumb-h);
  width: auto;
  flex-shrink: 0;
}
/* REEL luôn 9:16 — kể cả khi ảnh bìa FB trả về khổ khác, `object-fit:cover` cắt về đúng khổ reel. */
.dashboard-post-thumb.reel,
.report-thumb.reel { aspect-ratio: 9 / 16; }

/* ẢNH: khuôn S2I có nhiều khổ (4:5, 1:1, 9:16) nên KHÔNG ép một tỉ lệ.
   - `.report-thumb` là thẻ <img> THẬT ⇒ `aspect-ratio: auto 4/5` cho trình duyệt tự dùng tỉ lệ
     GỐC của file, 4/5 chỉ là khổ tạm lúc chưa tải xong (chống nhảy bố cục).
   - `.dashboard-post-thumb` là KHUNG BỌC (div/a) nên `auto` vô nghĩa với nó — 4/5 là mặc định,
     rồi `applyImageRatio()` (lib.js) ghi đè bằng tỉ lệ thật khi ảnh tải xong. */
.dashboard-post-thumb.image { aspect-ratio: 4 / 5; }
.report-thumb.image { aspect-ratio: auto 4 / 5; }

.dashboard-post-thumb:not(.reel):not(.image),
.report-thumb:not(.reel):not(.image) { aspect-ratio: 1 / 1; }
.dashboard-post-thumb img,
.dashboard-post-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dashboard-thumb-fallback {
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.04);
}
.dashboard-thumb-overlay {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 9px;
  padding: 1px 4px;
  border-radius: 4px;
  backdrop-filter: blur(2px);
}

/* Content Main */
.dashboard-post-main {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
}
.dashboard-post-title {
  font-size: 13.5px;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  line-height: 1.35;
  color: var(--fg);
}
.dashboard-post-submeta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  flex-wrap: wrap;
}
.dashboard-post-fanpage {
  font-size: 11px;
  font-weight: 500;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--fg);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color 0.15s;
}
.dashboard-post-fanpage:hover {
  border-color: var(--amber);
  color: var(--amber);
}

/* Engagement Pill */
.dashboard-post-engagement {
  font-size: 12px;
  font-weight: 700;
  color: #f97316;
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.12), rgba(239, 68, 68, 0.18));
  border: 1px solid rgba(249, 115, 22, 0.35);
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
  justify-self: end;
  text-align: center;
}

/* ================= MOBILE UI OPTIMIZATIONS ================= */
.bottom-nav {
  display: none;
}
.sticky-action-bar {
  display: none;
}

@media (max-width: 900px) {
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    z-index: 80;
    background: rgba(18, 30, 23, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    align-items: center;
    justify-content: space-around;
    padding: 0 4px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.35);
  }
  .bottom-nav button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--muted);
    padding: 6px 0;
    font-size: 11px;
    font-weight: 600;
    gap: 3px;
    border-radius: 8px;
    transition: color 0.15s, background 0.15s;
    cursor: pointer;
  }
  .bottom-nav button .bnav-icon {
    font-size: 18px;
    line-height: 1;
  }
  .bottom-nav button.active {
    color: var(--amber);
    background: rgba(224, 168, 62, 0.12);
  }
  .main {
    padding-bottom: calc(60px + 30px);
  }
}

@media (max-width: 1040px) {
  .sticky-action-bar {
    display: flex;
    position: fixed;
    bottom: 60px;
    left: 0;
    right: 0;
    z-index: 75;
    padding: 10px 14px;
    background: rgba(13, 22, 17, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    gap: 10px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3);
  }
  .sticky-action-bar .btn {
    flex: 1;
  }
}

/* Accordion Form Grouping */
.form-accordion {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  margin-bottom: 14px;
  overflow: hidden;
}
.form-accordion-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 14.5px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.03);
  user-select: none;
  transition: background 0.15s;
}
.form-accordion-head:hover {
  background: rgba(255, 255, 255, 0.06);
}
.form-accordion-body {
  padding: 16px;
  border-top: 1px solid var(--line);
}
.form-accordion.collapsed .form-accordion-body {
  display: none;
}
.form-accordion-icon {
  font-size: 12px;
  color: var(--muted);
  transition: transform 0.2s ease;
}
.form-accordion.collapsed .form-accordion-icon {
  transform: rotate(-90deg);
}

/* Dashboard & Cards Mobile Optimization */
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

/* Mốc 600 (không phải 560 như bộ mốc chung) là CỐ Ý và load-bearing: nền .kpi-grid là
   auto-fit minmax(180px,1fr) nên ở 560-600px nó tự ra 3 CỘT, phá quy tắc "KPI 2 cột đối xứng"
   (skill s2r-ui §7). Hạ mốc này xuống 560 là tái sinh lỗi đó — đừng "chuẩn hoá" nó. */
@media (max-width: 600px) {
  .card {
    padding: 14px 12px;
    border-radius: 12px;
  }
  .card h2 {
    margin-bottom: 12px;
    font-size: 11px;
  }
  .field {
    margin-bottom: 12px;
  }

  .dashboard-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px;
    margin-bottom: 14px !important;
  }
  .dashboard-header h1 {
    font-size: 20px !important;
  }
  .dashboard-header .btn-row {
    width: 100%;
    justify-content: space-between;
  }

  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .kpi-card {
    padding: 12px 10px !important;
    gap: 8px !important;
    border-radius: 12px !important;
  }
  .kpi-card-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 18px !important;
    border-radius: 10px !important;
  }
  .kpi-card-title {
    font-size: 11px !important;
  }
  .kpi-card-val {
    font-size: 15px !important;
    margin-top: 2px !important;
  }
  .kpi-card-sub {
    font-size: 10px !important;
    margin-top: 2px !important;
  }
  .kpi-card-split-btns {
    gap: 4px !important;
    margin-top: 2px !important;
    flex-wrap: wrap;
  }
  .kpi-split-btn {
    font-size: 10.5px !important;
    padding: 2px 5px !important;
  }

  .card-head-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .dashboard-post-item {
    padding: 8px 10px !important;
    gap: 8px !important;
    border-radius: 10px !important;
  }
  .dashboard-rank-badge {
    width: 24px !important;
    height: 24px !important;
    font-size: 11px !important;
  }
  /* Cỡ thumbnail màn hẹp nay do bộ biến --post-thumb-* ở :root lo (áp cho MỌI view), không override
     riêng ở đây nữa — override riêng là đường quay lại cảnh mỗi trang một cỡ. */
  .dashboard-post-title {
    font-size: 12px !important;
    line-height: 1.3 !important;
    -webkit-line-clamp: 1 !important;
  }
  .dashboard-post-submeta {
    font-size: 10.5px !important;
    gap: 4px !important;
  }
  .dashboard-post-fanpage {
    font-size: 10px !important;
    padding: 1px 6px !important;
  }
  .dashboard-post-actions {
    flex-direction: column;
    align-items: flex-end !important;
    gap: 3px !important;
  }
  .dashboard-post-engagement {
    font-size: 10px !important;
    padding: 2px 6px !important;
  }
}

/* Health Sub-cards Layout — 3 cột → 2 (≤1040, cùng mốc mọi grid 2-cột khác) → 1 (≤720).
   Trước đây giữ 3 cột CỨNG tới tận 768px nên cả dải 768-1040px (tablet ngang, cửa sổ hẹp)
   ba thẻ bị bóp lại. */
.health-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 1040px) {
  .health-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.health-subcard {
  padding: 14px 16px;
  background: var(--bg-subtle);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.15s;
}

.health-subcard:hover {
  border-color: var(--amber);
}

.health-subcard-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--amber);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.health-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}

.health-label {
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.health-pill {
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .health-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }
  .health-subcard {
    padding: 12px 14px !important;
    gap: 8px !important;
  }
  .health-subcard-title {
    font-size: 12px !important;
  }
  .health-status-row {
    font-size: 12px !important;
  }
}

/* Quick Actions Section */
.quick-actions-card {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quick-actions-title {
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--amber);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.quick-actions-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.quick-action-btn {
  font-size: 13px !important;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .quick-actions-card {
    padding: 14px 12px !important;
    gap: 10px !important;
  }
  .quick-actions-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .quick-action-btn {
    width: 100% !important;
    font-size: 12px !important;
    padding: 8px 6px !important;
    justify-content: center !important;
  }
  .quick-action-btn.full-span {
    grid-column: span 2 !important;
  }
}

/* --- Fanpage Activity Matrix Mobile & Pagination --- */
.matrix-desktop-wrap {
  display: block;
}

.matrix-mobile-wrap {
  display: none;
}

/* Nhãn trạng thái của ma trận. CỐ Ý không dùng .pill: .pill là nhãn enum NGẮN (uppercase +
   letter-spacing + nowrap không cắt), còn chuỗi ở đây là CÂU tiếng Việt, có khi kèm URL feed lỗi —
   .pill biến nó thành chuỗi IN HOA dài vô tận kéo giãn cả bảng. Ngoài ra .pill.danger/.warning/
   .success CHƯA TỪNG tồn tại trong file này, nên 3 mức trạng thái vốn hiện y hệt nhau: nền trong
   suốt, cùng một màu chữ, phân biệt được mỗi cái emoji đầu chuỗi. */
.matrix-status-pill {
  display: inline-block;
  max-width: 100%;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  box-sizing: border-box;
}
.matrix-status-pill.danger { background: rgba(239, 68, 68, 0.15); color: var(--danger-text); border: 1px solid rgba(239, 68, 68, 0.3); }
.matrix-status-pill.warning { background: rgba(245, 158, 11, 0.15); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); }
.matrix-status-pill.success { background: rgba(16, 185, 129, 0.15); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); }

/* Dòng giải thích dưới thẻ mobile (desktop dùng tooltip). ĐƯỢC xuống dòng — khác pill — nhưng kẹp 2
   dòng + `overflow-wrap:anywhere` để chuỗi lỗi chứa URL dài không khoảng trắng vẫn không đẩy thẻ rộng ra. */
.matrix-status-detail {
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Hai cột dài nhất của bảng desktop (tên fanpage, nhãn trạng thái) bị kẹp bề rộng + cắt bằng ellipsis.
   Không kẹp thì cả 7 cột đều nowrap ⇒ bảng phình quá khung chứa và cột "Thao tác" phải cuộn mới tới.
   Dưới 1250px siết mạnh hơn vì đó là dải bảng còn hiện nhưng đã hẹp (mốc 900 mới đổi sang thẻ mobile). */
.matrix-status-cell,
.matrix-name-cell {
  overflow: hidden;
  text-overflow: ellipsis;
}
.matrix-status-cell { max-width: 380px; }
.matrix-name-cell { max-width: 320px; }

@media (max-width: 1250px) {
  .matrix-status-cell { max-width: 190px; }
  .matrix-name-cell { max-width: 170px; }
}

.matrix-mobile-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background 0.15s ease;
  /* Rào chắn tràn — đồng bộ .stats-mobile-card. Thiếu bộ này thì mọi trường dài bất thường (tên page
     dài, thông báo lỗi, URL không có khoảng trắng) xuyên qua thẻ và đẩy CẢ TRANG cuộn ngang. */
  box-sizing: border-box;
  max-width: 100%;
  overflow: hidden;
}

.matrix-mobile-card:hover {
  background: rgba(255, 255, 255, 0.05);
}

.matrix-mobile-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
/* Pill trạng thái được co tối đa 60% bề ngang thẻ; phần dư cắt bằng ellipsis (chuỗi đầy đủ ở tooltip). */
.matrix-mobile-card-header .matrix-status-pill { flex: 0 1 auto; min-width: 0; max-width: 60%; }

.matrix-mobile-card-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--fg);
  text-decoration: none;
  cursor: pointer; /* là <a> không href nên không tự có con trỏ tay — bản desktop đã set inline */
  /* min-width:0 để tên page chịu co nhường chỗ cho pill trạng thái, thay vì cả hai cùng đẩy thẻ rộng ra */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.matrix-mobile-card-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  font-size: 12.5px;
}

.matrix-mobile-info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.matrix-mobile-info-label {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.matrix-mobile-info-val {
  font-weight: 600;
}

.matrix-mobile-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: 2px;
}

.matrix-pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
  font-size: 13px;
}

/* Bảng ma trận 7 cột nhường chỗ cho thẻ khi ứng dụng vào CHẾ ĐỘ MOBILE — dùng đúng mốc 900 mà
   topbar + drawer + bottom-nav đang dùng, thay vì mốc 767 lẻ loi không khớp thứ gì. */
@media (max-width: 900px) {
  .matrix-desktop-wrap {
    display: none !important;
  }
  .matrix-mobile-wrap {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
  }
}

/* --- Stats / Lịch sử Render Mobile Responsive --- */
.stats-desktop-wrap {
  display: block;
}

.stats-mobile-list {
  display: none;
}

.stats-mobile-card {
  background: var(--bg-card, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--line, var(--border-subtle));
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  box-sizing: border-box;
  max-width: 100%;
  overflow: hidden;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.stats-mobile-card.is-posted {
  border-left: 4px solid var(--accent, #2ecc71);
}

.stats-mobile-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.stats-mobile-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--fg);
  line-height: 1.35;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.stats-mobile-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.stats-mobile-fp-tag {
  font-weight: 600;
  color: var(--accent);
  background: rgba(46, 204, 113, 0.1);
  padding: 2px 7px;
  border-radius: 4px;
}

.stats-mobile-status-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  font-size: 12.5px;
  width: 100%;
  box-sizing: border-box;
}

.stats-mobile-content-box {
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed var(--border-subtle);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  word-break: break-all;
  overflow-wrap: anywhere;
}

.stats-mobile-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

@media (max-width: 767px) {
  .stats-desktop-wrap {
    display: none !important;
  }
  .stats-mobile-list {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
  }
  .stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .stat-card {
    padding: 8px 10px !important;
  }
  .stat-num {
    font-size: 18px !important;
  }
  .stat-label {
    font-size: 11px !important;
  }
}

/* ── Toolbar header trang Báo cáo (Fanpage · Khoảng thời gian · Làm mới/Xuất) ──
   Desktop: 1 hàng, picker co giãn, nút đẩy sát phải. ≤720: xếp DỌC full-width — nút ngày (3) + nút
   hành động (2) giãn đều lấp không gian, ẩn nhãn NBSP rỗng. Field target theo :nth-child (thứ tự cố định
   ở report.js: 1 Fanpage · 2 Khoảng thời gian · 3 nút). Trước dùng .row → dải 390-500px thành 2 cột hẹp
   khiến 3 nút ngày WRAP 2 dòng lệch + field nút bị đẩy xa. */
.report-toolbar { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.report-toolbar > .field { margin-bottom: 0; }
.report-toolbar > .field:nth-child(1) { flex: 1 1 240px; min-width: 200px; }  /* Fanpage picker — rộng */
.report-toolbar > .field:nth-child(2) { flex: 0 1 auto; }                     /* Khoảng thời gian */
.report-toolbar > .field:nth-child(3) { flex: 0 0 auto; margin-left: auto; }  /* Làm mới / Xuất — đẩy phải */
.report-toolbar .btn-row { flex-wrap: nowrap; margin-top: 0; }                /* nút ngày/hành động 1 hàng */
@media (max-width: 720px) {
  .report-toolbar { flex-direction: column; align-items: stretch; gap: 14px; }
  /* Column flex: PHẢI reset flex-grow/basis — `flex:1 1 240px` (desktop, trục ngang) sang column bị hiểu là
     240px CHIỀU CAO + grow DỌC → field Fanpage phình cao, hở khoảng trống lớn (đã bắt bằng render mock). */
  .report-toolbar > .field:nth-child(1),
  .report-toolbar > .field:nth-child(2),
  .report-toolbar > .field:nth-child(3) { flex: 0 0 auto; min-width: 0; margin-left: 0; }
  .report-toolbar .btn-row > .btn { flex: 1; }                               /* 3 nút ngày + 2 nút hành động giãn đều */
  .report-toolbar > .field:nth-child(3) > label { display: none; }           /* ẩn nhãn NBSP rỗng → hết khoảng trống */
}