/* FONT TỰ HOST (15/10/2026) — bản variable (1 file mọi độ đậm) từ @fontsource-variable 5.3.0, giấy phép OFL ở src/ui/fonts/.
   Trước đó nạp từ Google Fonts nhưng CSP (server.ts HTML_SECURITY_HEADERS: style-src/font-src 'self') chặn từ ngày thêm font
   (23/7) ⇒ cả app chạy font hệ thống suốt 3 tháng mà không ai biết. Đừng quay lại link Google: CSP sẽ lại chặn im lặng.
   Chỉ 3 bộ ký tự latin / latin-ext / vietnamese, kiểu thường (app không dùng nghiêng); unicode-range → trình duyệt chỉ tải bộ cần. */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('fonts/plus-jakarta-sans-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('fonts/jetbrains-mono-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }

: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 */
  /* THANG CHỮ (7/10/2026, anh chốt phương án B: tăng ~2px so với bản cũ — đo trước khi đổi: 57% chữ hiển thị < 14px, trang
     Lịch sử 98%). MỌI font-size trong src/ui PHẢI dùng biến dưới đây, không ghi px — test src/ui/font-scale.test.ts chặn.
     Chỉnh cả hệ thống = sửa ở đây. Ngoại lệ ghi px: trang in (openPrintReport, tài liệu riêng không có biến) + chữ trong SVG đồ thị. */
  --fs-badge: 11px;  /* CHỈ số đếm trong vòng tròn (chuông, menu) + ký hiệu ▶ trên ảnh thu nhỏ — không phải chữ để đọc */
  --fs-2xs: 13px;    /* nhỏ nhất cho chữ đọc: nhãn, nhãn trạng thái, tiêu đề cột, tag */
  --fs-xs: 14px;     /* chữ phụ: giờ, ghi chú, gợi ý, dòng mờ */
  --fs-sm: 15px;     /* nội dung bảng, thẻ, danh sách, nút */
  --fs-base: 16px;   /* chữ thân trang, ô nhập (≥16px nên iOS không tự phóng to) */
  --fs-md: 18px;
  --fs-lg: 20px;
  --fs-xl: 22px;     /* tiêu đề trang */
  --fs-2xl: 24px;
  --fs-3xl: 26px;
  --fs-4xl: 30px;
  --fs-display: clamp(24px, 2.4vw, 30px);
  --fs-display-lg: clamp(30px, 3.8vw, 38px);

  --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;

  /* KÍCH THƯỚC KHUNG APP — 1 NGUỒN (13/9/2026). Trước đó viết cứng: chiều cao topbar lặp 2 chỗ, bottom nav lặp 3 chỗ
     (lề dưới nội dung + vị trí thanh nút dính đáy) → đổi 1 thanh mà sót 1 chỗ là nội dung bị che. Đổi bố cục khung
     = sửa ở đây. Topbar/bottom nav chỉ hiện ≤900px nhưng biến khai toàn cục (dùng trong calc ở media query). */
  --sidebar-w: 256px;
  --topbar-h: 64px;      /* ≤900px định nghĩa lại 56px */
  --bottomnav-h: 60px;
  /* VÙNG AN TOÀN iPhone (tai thỏ / thanh home / tai thỏ 2 bên khi xoay ngang) — BẬT 13/9/2026 bằng viewport-fit=cover trong
     index.html: app vẽ TRÀN cả vùng đó nên mọi thứ sát mép màn phải chừa. 1 NGUỒN là 4 biến --safe-*; desktop/Android thường = 0.
     Chromium không có tai thỏ ⇒ kiểm bằng cách ghi đè 4 biến này (script giả lập dọc 47/34, ngang 47 hai bên + 21 đáy).
     Thứ sát mép cần chừa: thanh trên (trên + 2 bên), .app (2 bên), ngăn kéo (trái), bottom nav + thanh nút đáy (dưới + 2 bên),
     toast/thanh Lưu (qua --bottom-inset), modal (4 phía), menu tài khoản (phải). Thêm phần tử cố định sát mép = cộng --safe-*. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --topbar-total: calc(var(--topbar-h) + var(--safe-top));
  --bottomnav-total: calc(var(--bottomnav-h) + var(--safe-bottom));
  /* Phần ĐÁY màn bị chiếm: >900px (không bottom nav) = thanh home iPhone (--safe-bottom, desktop = 0), ≤900px = --bottomnav-total. Mọi thứ dính đáy
     (thanh nút Tạo Reel/Ảnh, thanh Lưu, toast) đặt theo biến này — trước 13/9 thanh nút đáy dùng thẳng 60px nên ở
     901–1040px lơ lửng cách đáy 60px dù không có bottom nav. */
  --bottom-inset: var(--safe-bottom);

  /* THANG LỚP CHỒNG cho lớp NỔI/CỐ ĐỊNH toàn app (13/9/2026) — giá trị giữ nguyên như trước khi gom. z-index CỤC BỘ
     trong 1 thành phần (khung kéo-thả khuôn, thumb phóng khi hover, cột dính của bảng) KHÔNG dùng thang này.
     Toast = 90: TRÊN thanh nút đáy (45) + bottom nav (80), dưới modal — trước 13/9 toast = 50 bị bottom nav che nửa dưới. Bottom nav (80) CỐ Ý nằm
     TRÊN ngăn kéo (60) để luôn bấm được; thanh nút đáy (45) nằm DƯỚI nền mờ (50) để ngăn kéo mở là che + làm mờ nó. */
  --z-sticky: 5;       /* save-bar dính đáy trong nội dung */
  --z-dropdown: 30;    /* combobox fanpage, menu nhóm khuôn */
  --z-ptr: 35;         /* vòng kéo-để-làm-mới — DƯỚI thanh trên (trượt ra từ dưới thanh) */
  --z-topbar: 40;
  --z-backdrop: 50;    /* nền mờ sau ngăn kéo menu mobile */
  --z-toast: 90;
  --z-drawer: 60;      /* sidebar thành ngăn kéo ≤900px */
  --z-popover: 60;     /* menu ⋯ (.menu-pop) */
  --z-action-bar: 45;  /* thanh nút dính đáy Tạo Reel/Tạo Ảnh ≤1040px — DƯỚI nền mờ + ngăn kéo (13/9: 75 cũ đè lên ngăn kéo đang mở, không bị làm mờ) */
  --z-bottomnav: 80;
  --z-modal: 100;
  --z-modal-top: 200;  /* modal mở CHỒNG lên modal khác (xem trước media) */

  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%; }
html { scroll-padding-top: calc(var(--topbar-total) + 12px); } /* scrollIntoView / nhảy neo không chui dưới thanh trên cố định */
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;
  word-spacing: var(--word-gap);
}
/* Dấu cách của Plus Jakarta Sans chỉ 0,19em (3px ở 16px; Arial 0,28em) → tiếng Việt nhiều từ ngắn trông dính chữ. Anh chốt
   16/10/2026 nới +0,06em (≈ +1px ở 16px). Ô nhập/nút có `word-spacing: normal` từ UA nên phải khai lại; chữ đơn cách (mono) giữ
   khoảng gốc để cột thẳng hàng. */
:root { --word-gap: 0.06em; }
button, input, select, textarea { word-spacing: var(--word-gap); }
code, kbd, pre, .mono, .log { word-spacing: normal; }
button { font-family: var(--font-sans); cursor: pointer; }
a { color: var(--amber); }

.app { display: flex; min-height: 100vh; padding-top: var(--topbar-total); padding-left: var(--safe-left); padding-right: var(--safe-right); } /* thanh trên CỐ ĐỊNH mọi bề rộng → đẩy menu + nội dung xuống */

/* Menu trái — cùng nền trang, không viền (mô hình Search Console, 13/9/2026). Chế độ ghim/đè theo bề rộng: xem "Khung app v2". */
.sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  background: var(--dark-2);
  padding: 8px 8px 16px; display: flex; flex-direction: column;
  position: sticky; top: var(--topbar-total); height: calc(100dvh - var(--topbar-total));
  overflow-y: auto; overflow-x: hidden;
}
.btn.danger { color: #ff8f8f; }
.btn.danger:hover { background: rgba(255, 80, 80, 0.12); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-name { font-weight: 800; font-size: var(--fs-xl); letter-spacing: -0.01em; }
/* Bộ chọn fanpage ĐANG LÀM VIỆC ở đầu menu (giai đoạn 3 — như bộ chọn tài sản Search Console). Panel thả xuống nằm TRONG menu
   (menu overflow-y:auto → panel cuộn cùng menu, không bị cắt ngang vì rộng bằng khung chọn). */
.nav-fp { padding: 4px 0 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.nav-fp-label { font-size: var(--fs-xs); color: var(--muted); padding: 0 12px 6px; }
.nav-fp .fp-picker { min-height: 50px; border-radius: 12px; background: var(--panel); padding: 6px 12px; }
/* Dòng "logo · tên fanpage · Đổi" thay bộ chọn riêng trong trang (makeFanpageContext) */
.fp-context { display: flex; align-items: center; gap: 8px; min-height: 38px; min-width: 0; }
.fp-context-name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; } /* tên page dài XUỐNG DÒNG thay vì cắt … (7/10/2026) */
.fp-context .btn { flex: 0 0 auto; margin-left: 2px; }
#nav { display: flex; flex-direction: column; gap: 2px; }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
/* Tiêu đề nhóm = NÚT thu gọn/mở (aria-expanded), kẻ ngang ngăn nhóm. Chấm cam = nhóm đang thu mà chứa trang đang xem. */
.nav-section {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin-top: 8px; padding: 14px 12px 6px 16px;
  background: transparent; border: none; border-top: 1px solid var(--line); border-radius: 0;
  color: var(--muted); font-size: var(--fs-sm); font-weight: 600; text-align: left; cursor: pointer;
}
.nav-section:hover { color: var(--text); }
.nav-section-label { flex: 1; min-width: 0; }
.nav-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); flex: 0 0 auto; }
.nav-chev { font-size: var(--fs-base); line-height: 1; width: 16px; text-align: center; transition: transform .15s ease; } /* 11px cũ gần như không thấy (ảnh chụp 13/9) */
.nav-section[aria-expanded="false"] .nav-chev { transform: rotate(-90deg); }
#nav a {
  display: flex; align-items: center; gap: 14px;
  min-height: 40px; padding: 0 16px; border-radius: 999px; width: 100%;
  background: transparent; border: none; color: var(--muted); text-decoration: none; cursor: pointer;
  font-size: var(--fs-base); font-weight: 600; text-align: left;
}
#nav a span { font-size: var(--fs-lg); }
#nav a:hover { background: rgba(255,255,255,.06); color: var(--text); }
#nav a.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: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.page-head h1 { margin: 0; font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.page-head p { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-base); }
/* Thanh tiêu đề GỌN có kẻ dưới (giai đoạn 2, kiểu Search Console). Ngay sau là thanh tab (makeTabView bọc .fp-tabs trong 1 div)
   thì bỏ kẻ của đầu trang — kẻo 2 đường sát nhau (Thông báo, Cài đặt, Sửa Fanpage). */
.page-head:has(+ div > .fp-tabs:first-child) { border-bottom: 0; padding-bottom: 0; }
@media (max-width: 600px) { .page-head h1 { font-size: var(--fs-xl); } }
/* HÀNG LỌC CHUNG (giai đoạn 2): chip + ô chọn cùng 1 hàng, phần phụ (vd "Cập nhật lúc…") đẩy phải. Dùng ở Báo cáo, Lịch sử,
   Thông báo, và bên trong makeTimeFilter. Ô select/search trong hàng lọc KHÔNG giãn full (thắng rule form toàn cục width:100%). */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 14px; }
.filter-bar > select, .filter-lane > select { width: auto; flex: 0 1 200px; min-width: 150px; }
.filter-bar > input[type=search] { width: auto; flex: 1 1 220px; min-width: 160px; }
.filter-bar > .fp-picker-wrap { flex: 0 1 300px; min-width: 220px; }
.filter-bar-end { margin-left: auto; font-size: var(--fs-xs); color: var(--muted); }
/* LÀN chip + select của hàng lọc (makeFilterBar lib.js, giai đoạn 5). Desktop: display:contents → con là flex item thẳng của .filter-bar,
   style.order giữ thứ tự gốc ⇒ bố cục y hệt trước. ≤720px: làn thành 1 HÀNG VUỐT NGANG trên cùng, bộ chọn fanpage + ô tìm chia đôi hàng dưới
   (chúng KHÔNG vào làn: dropdown absolute của picker bị vùng cuộn xén). */
.filter-lane { display: contents; }
@media (max-width: 720px) {
  .filter-lane { display: flex; align-items: center; gap: 8px; order: -1; flex: 1 1 100%; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .filter-lane::-webkit-scrollbar { display: none; }
  .filter-lane > *, .filter-lane > select { flex: 0 0 auto; min-width: 0; } /* không co — tràn thì VUỐT, không bóp select */
  .filter-lane > .chip-group { max-width: none; overflow: visible; } /* làn là vùng cuộn DUY NHẤT, khỏi cuộn lồng trong dải chip */
  .filter-bar > .fp-picker-wrap, .filter-bar > input[type=search] { flex: 1 1 150px; min-width: 0; }
}
/* makeChipGroup — nút dính liền, đang chọn tô nền + ✓ */
.chip-group { display: inline-flex; flex: 0 0 auto; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.chip-group::-webkit-scrollbar { display: none; }
/* Chip KHÔNG xuống dòng (white-space:nowrap) → dải dài hơn khung (5 chip thời gian ở 430px rộng ~416px > khung 402px) thì TỰ VUỐT NGANG
   trong chính nó thay vì đẩy tràn cả trang (lỗi đo được 13/9). Longhand overscroll-behavior-x — shorthand khoá cả cuộn dọc trang (skill s2r-ui §1). */
.chip { background: transparent; border: 1px solid var(--line); color: var(--muted); font-size: var(--fs-sm); font-weight: 600; height: 34px; padding: 0 14px; margin-left: -1px; white-space: nowrap; }
.chip:first-child { margin-left: 0; border-radius: 8px 0 0 8px; }
.chip:last-child { border-radius: 0 8px 8px 0; }
.chip:only-child { border-radius: 8px; }
.chip:hover { color: var(--text); background: rgba(255,255,255,.04); }
.chip.active { position: relative; z-index: 1; background: rgba(78,165,111,.22); border-color: rgba(78,165,111,.6); color: #fff; }
.chip.active::before { content: '✓ '; }
/* pageHead(title, sub, actions) — vùng nút bên phải (13/9, thay .dashboard-header riêng của Tổng quan) */
.page-head.has-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.page-head-text { min-width: 0; }
.page-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 600px) {
  .page-head.has-actions { flex-direction: column; align-items: flex-start; }
  .page-head-actions { width: 100%; justify-content: space-between; }
}

/* 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; }
/* ≤900px 2 cột xếp dọc: PHẢI stretch — align-items:flex-start cho cột co theo nội dung, tên bài nhạc dài (nowrap) đẩy cột 633px,
   cả trang tràn ngang 257px ở 390px (đo 10/10/2026). */
@media (max-width: 900px) { .settings-cols { flex-direction: column; align-items: stretch; } }

/* `el.hidden = true` / thuộc tính `hidden` bị VÔ HIỆU ở MỌI phần tử có class đặt `display` (.nav-badge inline-flex, .stock-pager
   flex, .btn inline-flex, .notif-bulk-sel…) vì style tác giả thắng `[hidden]{display:none}` của UA — lộ ra 13/9 khi chuông hiện
   "0" đỏ dù không có gì chưa đọc, và pager/nút "Sửa Fanpage" không ẩn được. Đây là rule chuẩn (Tailwind preflight, normalize):
   `!important` ở đây KHÔNG phải che triệu chứng mà là cách DUY NHẤT để thuộc tính `hidden` thắng mọi rule display theo class.
   `until-found` để ngỏ cho trình duyệt (tìm-trong-trang). Bật/tắt phần tử = dùng `hidden`, KHÔNG style.display tay. */
[hidden]:not([hidden="until-found"]) { display: none !important; }

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px;
}
.card h2 { font-size: var(--fs-sm); 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-base); margin-bottom: 7px; }
.field .hint { color: var(--muted); font-size: var(--fs-sm); 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; }
/* Ô cần rộng hơn ô cùng hàng (ô chọn khuôn ở Tạo Reel/Ảnh: "Ảnh chuyện bong bóng (4:5) · 1080×1350") — class, KHÔNG style inline:
   inline flex đè luôn quy tắc xuống dòng ≤720px bên dưới (đã dính: ô bị ép còn 65px ở 390px). */
.row > .field-wide { flex: 2 1 0; min-width: min(100%, 280px); }

input[type=text], input[type=password], input[type=number], input[type=search], input[type=time], input[type=url], 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 */
/* line-height CỐ ĐỊNH 1.25 (22/9/2026) — 2 lỗi cùng gốc: (a) <a class="btn"> kế thừa --lh-normal 1.5 của body nên cao hơn
   <button> kề 4px (35.5 vs 32); (b) với `normal` (UA của button) hộp dòng lấy metric font CAO NHẤT trên dòng → nút có EMOJI
   cao hơn nút không emoji 5px NGAY TRÊN CÙNG HÀNG (đo: "🔎 Xác minh" 37 vs "↻ Tải lại" 32; Sửa Fanpage 45 vs 40). Số cố định
   san bằng mọi .btn một hàng (đo 32.3 hết); đừng đổi về `normal`. */
.btn { background: rgba(255,255,255,.07); border: 1px solid var(--line); color: var(--text); font-size: var(--fs-base); font-weight: 600; padding: 10px 16px; border-radius: 10px; font-family: var(--font-sans); line-height: 1.25; }
.btn:hover { background: rgba(255,255,255,.13); }
a.btn { text-decoration: none; } /* nút dạng link (Mở Group ↗, Mở bài ↗) — không gạch chân như link chữ */
.btn.primary { background: var(--amber); color: #3a2c07; border-color: transparent; font-weight: 700; }
.btn.primary:hover { background: #ecb954; }
.btn.primary:disabled, .btn:disabled { opacity: .5; cursor: default; } /* .btn thường bị khoá (Lưu chưa sửa gì, ↑↓ nhóm ở biên) trước 11/10/2026 trông như bấm được */
.btn.ghost { background: transparent; }
.btn.sm { padding: 7px 12px; font-size: var(--fs-sm); }
.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: var(--fs-lg);
  background: rgba(224, 168, 62, 0.14); border: 1px solid rgba(224, 168, 62, 0.4); border-radius: 8px;
}

/* Select bị khoá (disabled) */
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-sm); 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: var(--bottom-inset); z-index: var(--z-sticky);
  display: flex; gap: 14px; align-items: center;
  margin-top: 20px; padding: 14px 0 18px;
  background: var(--dark-2); border-top: 1px solid var(--line);
}
.save-bar > .btn { flex: 0 0 auto; white-space: nowrap; }
.save-bar-note { font-size: var(--fs-xs); }
/* Điện thoại (15/10/2026): 1 HÀNG gọn ~64px. Câu mô tả ẩn — chỉ hiện ghi chú TRẠNG THÁI ngắn (`.is-status`: "• Còn thay đổi chưa
   lưu" / "Đã lưu ✓"). Bản 10/10 cho câu mô tả xuống dưới nút ⇒ thanh cao 123px + bottom nav = ~180/844px bị che, màn đầu tab Đăng
   bài không thấy nổi ô "Loại đăng". Nút giữ nowrap (.save-bar > .btn) nên không bị bóp gãy dòng như bản trước 10/10. */
@media (max-width: 600px) {
  .save-bar { gap: 12px; padding: 10px 0 12px; }
  .save-bar-note { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .save-bar-note:not(.is-status) { display: none; }
}

/* Tab trang Fanpage (Thương hiệu / Khuôn / Đăng bài / Tự động) + trang Cài đặt (dùng chung makeTabView) */
/* 1 HÀNG VUỐT NGANG ở mọi bề rộng (giai đoạn 5, kiểu Search Console) — trước đó wrap: 5 tab Sửa Fanpage gãy 3 hàng ở 375px.
   Kẻ đáy = box-shadow INSET, không dùng border: vùng overflow xén con tại mép padding-box nên gạch chân 2px của tab (trước kéo đè kẻ
   bằng margin-bottom:-1px) sẽ mất 1px; inset nằm TRONG hộp, tab vẽ đè lên được → desktop giữ nguyên pixel. Longhand overscroll-behavior-x (skill §1). */
.fp-tabs { display: flex; gap: 4px; box-shadow: inset 0 -1px 0 var(--line); margin-bottom: 18px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.fp-tabs::-webkit-scrollbar { display: none; }
.fp-tab { flex: 0 0 auto; white-space: nowrap; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--muted); font-size: var(--fs-base); font-weight: 600; padding: 10px 14px; }
.fp-tab:hover { color: var(--text); }
.fp-tab.active { color: var(--amber); border-bottom-color: var(--amber); font-weight: 700; }
/* Dải vuốt ngang còn nội dung khuất bên phải → mép phải mờ dần (class do scrollFade lib.js bật/tắt theo vị trí cuộn). */
.fade-end { -webkit-mask-image: linear-gradient(to left, transparent, #000 36px); mask-image: linear-gradient(to left, transparent, #000 36px); }
/* Nút lối tắt đầu trang Sửa Fanpage: ≤600px 1 hàng vuốt ngang nút nhỏ thay vì gãy 4 hàng (~200px, đo 15/10/2026). */
@media (max-width: 600px) {
  .fp-edit-links { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; gap: 8px; }
  .fp-edit-links::-webkit-scrollbar { display: none; }
  .fp-edit-links > .btn { flex: 0 0 auto; white-space: nowrap; padding: 7px 12px; font-size: var(--fs-sm); }
}

/* 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-xs); 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; }

.stats-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.stats-table th { text-align: left; font-size: var(--fs-xs); 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-base); }

/* 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); } }
/* Checklist "tự chạy" */
.chk-list { display: grid; gap: 8px; }
.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-xs); 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); }
/* Checklist đủ hết → gập còn 1 dòng (fanpages.js automationChecklist) */
.chk-fold > summary { cursor: pointer; color: var(--muted); font-size: var(--fs-sm); margin-top: 10px; }
.chk-fold[open] > summary { margin-bottom: 10px; }
/* Tab Tự động: hàng nguồn tự tạo = loại · URL · Bật · ✕; ≤560px ô URL xuống hàng riêng full ngang (cùng hàng chỉ còn ~74px ở 390px) */
.ag-src-row { display: grid; grid-template-columns: 144px minmax(0,1fr) auto auto; gap: 8px; align-items: center; margin-bottom: 8px; }
@media (max-width: 560px) {
  .ag-src-row { grid-template-columns: minmax(0,1fr) auto auto; }
  .ag-src-row > .ag-src-url { grid-column: 1 / -1; order: 4; }
}
/* 4 ô số căn theo đáy (align-items:flex-end) — ô cuối mất margin ở .field:last-child nên tụt thấp hơn 3 ô kia 12-16px. Bỏ margin
   cả hàng, khoảng cách dưới hàng do chính hàng giữ. */
.ag-num-row { margin-bottom: 16px; }
.ag-num-row > .field { margin-bottom: 0; }

/* Thống kê */
/* 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: 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); }
.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: var(--fs-xs); }
.st-title { font-weight: 700; font-size: var(--fs-sm); 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: var(--fs-xs); white-space: nowrap; }
.st-content { display: flex; align-items: flex-start; gap: 8px; min-width: 150px; max-width: 220px; }
/* Kẹp 2 dòng dùng CHUNG (bảng desktop + thẻ mobile Lịch sử). Trước 24/9 chỉ khai trong .st-content nên thẻ mobile
   KHÔNG được kẹp (caption hiện nguyên văn, thẻ cao 462px). overflow-wrap: chỉ bẻ giữa chữ khi 1 từ dài hơn cả dòng (URL). */
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.st-content .clamp2 { flex: 1; min-width: 0; font-size: var(--fs-xs); }
.st-content .btn { flex: 0 0 auto; padding: 3px 8px; font-size: var(--fs-2xs); }
/* Cột Link đăng: ô nhập + ↗ CÙNG 1 hàng, bề rộng cố định. Trước 24/9 rule nằm dưới `.st-post .post-url` mà khung
   .st-post đã bị bỏ khỏi stats.js từ 31/7 → rule mồ côi, cột co còn 84px, ↗ rớt xuống dòng dưới. */
.post-url { display: flex; gap: 6px; align-items: center; width: 170px; }
/* Cột Thao tác: nút chính CÙNG bề rộng ở mọi hàng ("Bỏ đánh dấu" = "✓ Đánh dấu đã đăng"), ⋯ dạt sát phải
   → bài đã đăng (ít nút) và chưa đăng (🚀 📅 📤) thẳng cột với nhau thay vì bỏ trống nửa cột lệch nhau. */
.st-actions { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.st-actions > .btn:first-child { min-width: 158px; } /* ≥ bề rộng tự nhiên của "✓ Đánh dấu đã đăng" (đo 151px) */
.st-actions > .menu-wrap { margin-left: auto; }
/* Cột Thao tác DÍNH mép phải khi bảng Lịch sử cuộn ngang (màn 1440 có menu ghim vẫn thiếu ~250px): nút đăng luôn
   thấy được, phần cuộn là các cột nội dung ở giữa. Nền đặc = nền trang (bảng nằm thẳng trên nền, không trong card);
   kẻ trái + kẻ đáy vẽ bằng inset shadow vì border của bảng border-collapse KHÔNG đi theo ô sticky. Chỉ bảng Lịch sử
   (.stats-desktop-wrap) — các bảng .stats-table ở Báo cáo không đụng. */
.stats-desktop-wrap .stats-table th:last-child,
.stats-desktop-wrap .stats-table td:last-child { position: sticky; right: 0; z-index: 1; background: var(--dark-2); box-shadow: inset 1px 0 0 var(--line), inset 0 -1px 0 var(--line); }
.stats-desktop-wrap .stats-table tbody tr:last-child td:last-child { box-shadow: inset 1px 0 0 var(--line); }
/* z-index:1 của ô dính tạo NGỮ CẢNH XẾP CHỒNG riêng cho từng ô ⇒ menu ⋯ (.menu-pop fixed) bị nhốt trong ô của nó và ô Thao
   tác của dòng DƯỚI (cùng z 1, đứng sau trong DOM) vẽ đè lên: đo 6/10/2026 chỉ thấy mục đầu, "🗑 Xoá" bị che không bấm được
   (lỗi có từ khi cột thành dính 24/9). Ô đang mở menu nổi lên trên các ô dính khác. */
.stats-desktop-wrap .stats-table td:last-child:has(.menu-wrap.open) { z-index: 2; }
.stats-desktop-wrap .stats-table tbody tr:hover td:last-child { background: linear-gradient(rgba(255,255,255,.02), rgba(255,255,255,.02)), var(--dark-2); }
input.posted-url-in { flex: 1; min-width: 0; font-size: var(--fs-xs); 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: var(--fs-base); 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: var(--z-popover); }
.menu-wrap.open .menu-pop { display: block; }
.menu-item { display: block; width: 100%; text-align: left; padding: 8px 10px; font-size: var(--fs-xs); 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: var(--fs-2xs); 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 */
/* Chip TÊN FANPAGE bấm được (tổng quan Khuôn Reel): tên riêng nên bỏ in hoa/giãn chữ của .pill, thêm viền + hover cho thấy là link. */
.pill.fp-chip { white-space: normal; max-width: 100%; overflow-wrap: anywhere; text-transform: none; letter-spacing: 0; font-size: var(--fs-xs); font-weight: 600; background: rgba(255,255,255,.06); border: 1px solid var(--line); color: var(--text); text-decoration: none; cursor: pointer; }
.pill.fp-chip:hover { border-color: var(--amber); color: var(--amber); }
/* Hàng lọc trang Khuôn Reel (Fanpage · Sắp xếp · Tìm khuôn · nút tạo). ≤600px ẩn nhãn field: ô tự nói (picker hiện page, select
   hiện cách sắp, ô tìm có placeholder) — trước 11/10/2026 hàng lọc + dòng giải thích chiếm ~330px trước thẻ đầu trên điện thoại. */
.tpl-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 26px; }
.tpl-filters > .tpl-f-fp { flex: 0 1 340px; min-width: 220px; }
.tpl-filters > .tpl-f-sort { flex: 0 1 300px; min-width: 200px; }
.tpl-filters > .tpl-f-q { flex: 0 1 280px; min-width: 200px; }
.tpl-filters > .tpl-f-btn { margin-left: auto; }
.tpl-filters > .tpl-f-btn:empty { display: none; }
.tpl-filters .field { margin-bottom: 0; }
/* Picker cao bằng <select>/ô tìm cùng hàng (16px chữ + đệm 10px + viền = 43px) — min-height 38px chung làm nhãn "Fanpage" lệch 5px. */
.tpl-filters .fp-picker { min-height: 43px; }
@media (max-width: 600px) {
  .tpl-filters { gap: 8px; margin-bottom: 14px; }
  .tpl-filters > .tpl-f-fp, .tpl-filters > .tpl-f-sort, .tpl-filters > .tpl-f-q, .tpl-filters > .tpl-f-btn { flex: 1 1 100%; min-width: 0; }
  .tpl-filters > .tpl-f-btn { margin-left: 0; }
  .tpl-filters .field > label { display: none; }
}
/* Ảnh thu nhỏ ở Tổng quan khuôn: là NÚT (bấm = xem lớn). */
.tpl-ov-thumb { flex: 0 0 auto; width: 104px; aspect-ratio: 9 / 16; padding: 0; border-radius: 8px; overflow: hidden; background: var(--panel);
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: var(--fs-2xl); cursor: zoom-in; }
.tpl-ov-thumb:hover { border-color: var(--amber); }
.tpl-ov-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Nhóm khuôn (11/10/2026): tiêu đề mục là nút thu gọn + công cụ admin; hàng chip lọc 1 nhóm (chip-group tự vuốt ngang khi hẹp). */
.tpl-group-chips { margin: 0 0 16px; }
.tpl-sec-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.tpl-sec-toggle { display: inline-flex; align-items: baseline; gap: 8px; padding: 4px 6px 4px 0; background: none; border: 0; color: var(--text);
  font: inherit; font-size: var(--fs-base); font-weight: 700; cursor: pointer; text-align: left; min-width: 0; }
.tpl-sec-toggle:disabled { cursor: default; }
.tpl-sec-toggle:not(:disabled):hover .tpl-sec-name { color: var(--amber); }
.tpl-sec-caret { color: var(--muted); width: 1em; flex: 0 0 auto; }
.tpl-sec-name { overflow-wrap: anywhere; }
.tpl-sec-actions { display: flex; gap: 4px; margin-left: auto; }
.tpl-move { width: auto; max-width: 100%; font-size: var(--fs-sm); padding: 6px 30px 6px 10px; }
@media (max-width: 900px) { .tpl-move { font-size: var(--fs-base); } }
.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: calc(var(--topbar-total) + 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: var(--fs-sm); text-align: center; padding: 20px; }
.preview-cap { text-align: center; color: var(--muted); font-size: var(--fs-xs); 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; } /* sticky vô nghĩa ở 1 cột; chừa thanh trên khi scrollIntoView = scroll-padding-top của html */
}

/* 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: var(--fs-xs); font-weight: 600; color: var(--text); border-bottom: 1px solid var(--line); }
.bg-head > span:first-child { flex: 1; }
.bg-badge { font-size: var(--fs-2xs); 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: var(--fs-sm); }
.bg-empty { color: var(--muted); font-size: var(--fs-base); }
.bg-foot { padding: 9px 12px; font-size: var(--fs-2xs); color: var(--muted); border-top: 1px solid var(--line); line-height: 1.45; }

/* Fanpage card */
.fp-card { cursor: pointer; transition: border-color .15s; }
/* Fanpage ĐANG LÀM VIỆC (chọn ở menu — 1A, 13/9): thẻ viền vàng + nhãn ghim; ma trận Tổng quan ghim hàng lên đầu + tô nền */
.fp-card.current { border-color: var(--amber); }
.fp-current-tag { font-size: var(--fs-2xs); font-weight: 700; color: var(--amber); letter-spacing: .2px; margin-bottom: 6px; }
.matrix-row.current > td { background: rgba(224,168,62,.07); }
.matrix-row.current > td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
.matrix-pin { font-size: var(--fs-xs); margin-right: 4px; }
.matrix-mobile-card.current { border-color: var(--amber); box-shadow: inset 3px 0 0 var(--amber); }
.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: var(--fs-md); }
.fp-card .fp-id { color: var(--muted); font-size: var(--fs-xs); 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: var(--fs-sm); line-height: 1.25; }
  .fp-card .fp-id { font-size: var(--fs-2xs); }
  /* Pill trạng thái đăng nowrap ("⚠️ Chưa cấu hình đăng" ~175px) rộng hơn cột thẻ 2 cột ⇒ CẢ TRANG cuộn ngang (đo 13/9: 19px ở 430, 47px ở 375) → cho xuống dòng */
  .fp-card .fp-info .pill { display: inline-block; white-space: normal; border-radius: 8px; line-height: 1.3; }
  .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: var(--fs-2xs); 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: var(--fs-sm);
  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: var(--fs-sm) !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: var(--fs-sm) !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: var(--fs-sm);
  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: var(--fs-sm);
  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: var(--fs-xs);
  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: var(--fs-xs); 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); }
/* Điện thoại: thanh nhóm thành 1 hàng VUỐT NGANG (10/10/2026 — 13 nhóm xếp 6 dòng ở 390px, đẩy nội dung Báo cáo xuống dưới
   màn đầu). Longhand overscroll-behavior-x: shorthand khoá cả cuộn dọc của trang (skill s2r-ui §1). */
@media (max-width: 720px) {
  .tag-filter { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 4px; }
  .tag-filter > * { flex: 0 0 auto; }
}
.tag-clear { background: none; border: none; color: var(--danger-text); font-size: var(--fs-xs); 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: var(--fs-base); 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: var(--fs-2xs); 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: var(--fs-sm); 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: var(--fs-sm); 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: var(--fs-sm); }
.pt-td { display: block; color: var(--muted); font-size: var(--fs-xs); 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; }
/* Ô số / ô chọn của khối comment + Group: nhãn TRÊN ô, lưới 2 cột (≤560px 1 cột) — 11/10/2026. */
.pt-num-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; margin-top: 8px; max-width: 520px; }
.pt-num-grid > .field { margin-bottom: 10px; }
@media (max-width: 560px) { .pt-num-grid { grid-template-columns: minmax(0, 1fr); } }
/* Cột phải (token + hướng dẫn) dính khi cuộn — cột trái dài gấp 3, cột phải bỏ trống nửa dưới. Chỉ khi 2 cột. */
@media (min-width: 1041px) { .pt-grid > :last-child { position: sticky; top: calc(var(--topbar-total) + 16px); } }
.pt-steps { margin: 0; padding-left: 18px; font-size: var(--fs-xs); 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: var(--fs-xs); 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: var(--fs-xs); line-height: 1.6; color: #bcd; max-height: 220px; overflow: auto; white-space: pre-wrap; }

/* toast */
.toast {
  position: fixed; bottom: calc(var(--bottom-inset) + 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: var(--fs-base); box-shadow: 0 14px 34px rgba(0,0,0,.45);
  opacity: 0; transition: transform .25s, opacity .25s; pointer-events: none; z-index: var(--z-toast); max-width: 80vw;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
/* Thanh "Đã có bản mới" (app.js checkForUpdate) — dính đáy như toast nhưng KHÔNG tự tắt, có nút Tải lại. */
.update-bar {
  /* Căn giữa bằng left/right + margin auto + fit-content, KHÔNG left:50% + translate: fixed với left:50% chỉ còn nửa màn để co
     theo nội dung → chữ 3 dòng, nút "Tải lại" gãy đôi ở 390px (đo 10/10/2026). */
  position: fixed; left: 12px; right: 12px; margin: 0 auto; width: fit-content; bottom: calc(var(--bottom-inset) + 16px); z-index: var(--z-toast);
  display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border-radius: 12px;
  background: var(--green-2); color: #fff; font-weight: 600; font-size: var(--fs-sm); box-shadow: 0 14px 34px rgba(0,0,0,.45);
}
.update-bar .btn { white-space: nowrap; flex: 0 0 auto; }
/* Thanh gợi ý "link vừa copy" (app.js showClipBar) — cùng khung .update-bar; link dài cắt "…" (đủ link ở title), nút không gãy. */
.clip-bar { flex-wrap: wrap; max-width: min(720px, calc(100% - 24px)); }
.clip-bar-text { display: flex; align-items: center; gap: 4px; min-width: 0; flex: 1 1 220px; }
.clip-bar-label { flex: 0 0 auto; white-space: nowrap; }
.clip-bar-url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; opacity: .85; }
.clip-bar-acts { display: flex; gap: 6px; flex: 0 0 auto; margin-left: auto; }
.toast.bad { background: var(--danger); }
@media (max-width: 1040px) { body:has(.sticky-action-bar) .toast { bottom: calc(var(--bottom-inset) + 84px); } } /* nổi TRÊN thanh nút đáy */

/* 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); }
/* Link điều hướng NỘI BỘ dựng bằng <a href> (chuột-phải/⌘-click mở tab mới) — reset màu xanh + gạch chân
   mặc định của trình duyệt để trông như phần tử cũ. Phần tử cần màu riêng (chip lỗi…) đặt color INLINE (thắng). */
.navlink { color: inherit; text-decoration: none; }
.divider { height: 1px; background: var(--line); margin: 18px 0; }
details.adv summary { cursor: pointer; color: var(--amber); font-size: var(--fs-sm); font-weight: 600; margin-bottom: 10px; }

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

/* Cụm tô màu khuôn story (form Tạo Reel, 10/10/2026): chip = [loại bấm đổi] cụm [⚠] [✕]. Màu chỉ để phân 2 loại —
   màu thật trên thẻ do khuôn quyết. */
.hl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hl-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 6px 4px 4px; border-radius: 8px;
  border: 1px solid var(--line); background: rgba(255,255,255,.04); font-size: var(--fs-sm); }
.hl-chip .hl-text { overflow-wrap: anywhere; }
.hl-chip button { border: 0; cursor: pointer; font: inherit; border-radius: 6px; }
.hl-chip .hl-tone { padding: 2px 8px; font-size: var(--fs-2xs); font-weight: 700; }
.hl-chip.fact .hl-tone { background: rgba(224,168,62,.22); color: var(--amber); }
.hl-chip.emotion .hl-tone { background: rgba(96,150,255,.2); color: #8fb4ff; }
.hl-chip .hl-del { background: none; color: var(--muted); padding: 2px 6px; }
.hl-chip .hl-del:hover { color: var(--danger-text); }
.hl-chip.missing { border-color: var(--danger-text); }
.hl-chip .hl-miss { color: var(--danger-text); font-size: var(--fs-2xs); }

/* render progress steps */
.progress { display: flex; flex-direction: column; gap: 13px; }
.pstep { display: flex; align-items: center; gap: 12px; font-size: var(--fs-base); 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: var(--fs-sm); 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: calc(40px + var(--safe-top)) calc(20px + var(--safe-right)) calc(40px + var(--safe-bottom)) calc(20px + var(--safe-left)); z-index: var(--z-modal); 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: var(--fs-sm); 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: var(--fs-2xs); color: var(--amber); font-weight: 700; letter-spacing: .3px; margin-bottom: 3px; }
.link-title { font-size: var(--fs-base); 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: var(--fs-xs); 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: var(--fs-xs); 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: var(--fs-base); }
.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: var(--fs-sm); 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; }

/* ---- Khuôn Reel + Khuôn ảnh v5 (14/9/2026): LƯỚI THẺ theo nhóm + NGĂN KÉO editor (lib.js makeTemplateGallery/openEditorDrawer)
   — thay danh sách hàng (thumb 40×71) + editor cột phải luôn mở (xem trước 202px). Thumb mặc định 9:16, khuôn ảnh ghi aspect-ratio
   inline theo khổ thật (4:5 / 1:1 / 2:3). Nhóm chỉ là tiêu đề mục (bỏ kéo-thả/màu/menu ⋯/thu gọn/tìm). ---- */
.tpl-section { margin-bottom: 22px; }
.tpl-section-title { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; font-size: var(--fs-base); font-weight: 700; }
.tpl-count { font-size: var(--fs-2xs); color: var(--muted); font-weight: 500; }
.tpl-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }
.tpl-card { display: flex; flex-direction: column; gap: 6px; padding: 10px; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; color: inherit; font: inherit; cursor: pointer; transition: border-color .12s, transform .12s; }
.tpl-card:hover, .tpl-card:focus-visible { border-color: var(--amber); transform: translateY(-1px); outline: none; }
.tpl-card.current { border-color: var(--amber); box-shadow: 0 0 0 2px rgba(224,168,62,.32); }
/* nền ca-rô như .preview để overlay trong suốt (ô video) nhìn ra là "lỗ" chứ không phải mảng đen */
.tpl-card-thumb { width: 100%; aspect-ratio: 1080/1920; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
  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: 18px 18px; background-position: 0 0, 0 9px, 9px -9px, -9px 0; }
.tpl-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tpl-card-wait { color: var(--muted); font-size: var(--fs-sm); }
.tpl-card-name { font-weight: 700; font-size: var(--fs-sm); line-height: 1.3; }
.tpl-card-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.tpl-card-pills .pill { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* .pill nowrap: nhãn dài tràn khỏi thẻ 2 cột ở 390px (tên đầy đủ ở title) */
.tpl-card-sub { font-size: var(--fs-2xs); }
@media (max-width: 560px) { .tpl-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

/* Ngăn kéo editor: phủ phải, z = modal (trên bottom nav 80); trong holder của trang nên chuyển trang là tự gỡ. */
.tpl-drawer-wrap { position: fixed; inset: 0; z-index: var(--z-modal); }
.tpl-drawer-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.tpl-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(960px, 100%); background: var(--panel); border-left: 1px solid var(--line); box-shadow: -18px 0 40px rgba(0,0,0,.45); display: flex; flex-direction: column; }
.tpl-drawer-head { display: flex; align-items: center; gap: 12px; padding: calc(12px + var(--safe-top)) calc(16px + var(--safe-right)) 12px 18px; border-bottom: 1px solid var(--line); }
.tpl-drawer-title { flex: 1; min-width: 0; font-size: var(--fs-base); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.tpl-drawer-close { flex: 0 0 auto; background: none; border: 1px solid var(--line); color: inherit; border-radius: 8px; width: 34px; height: 34px; cursor: pointer; font-size: var(--fs-base); }
.tpl-drawer-close:hover { background: rgba(255,255,255,.08); }
.tpl-drawer-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; padding: 16px 18px calc(20px + var(--safe-bottom)); }
.tpl-drawer-body > .card { margin: 0; }
.tpl-drawer .preview-wrap { top: 8px; } /* sticky trong vùng cuộn của ngăn kéo, không phải trang */
.tpl-drawer .preview { max-width: 400px; }
body:has(.tpl-drawer-wrap) { overflow: hidden; } /* khoá cuộn nền khi ngăn kéo mở */
@media (max-width: 1040px) { /* .grid-2 sập 1 cột → xem trước lên TRÊN form, thôi dính (kẻo che form khi cuộn) */
  .tpl-drawer .grid-2 > .preview-wrap { order: -1; position: static; margin-bottom: 14px; }
  .tpl-drawer .preview { max-width: 250px; }
}

/* 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: var(--fs-2xs); 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; }

/* ============ Khung app v2 (giai đoạn 1 đổi bố cục, 13/9/2026 — mô hình Search Console) ============
   Thanh ứng dụng CỐ ĐỊNH ở MỌI bề rộng; menu trái cùng nền trang. 3 chế độ menu — mốc 1280 PHẢI khớp NAV_PIN_MIN (app.js,
   JS dùng matchMedia cùng mốc để quyết định nút ☰ làm gì):
   • ≥1280px : menu GHIM trong luồng; ☰ = .app.nav-collapsed ẩn hẳn (nhớ localStorage s2r_nav_collapsed).
   • 901–1279: menu ẨN sẵn; ☰ = .app.nav-open mở ĐÈ ngay dưới thanh trên + nền mờ (Esc / chạm nền / chọn mục thì đóng).
   • ≤900px  : như 901–1279 + thanh trên 56px + bottom nav + chữ ô nhập 16px (chống iOS tự phóng to). */
.topbar {
  display: flex; align-items: center; gap: 4px;
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-topbar);
  height: var(--topbar-total); padding: var(--safe-top) calc(12px + var(--safe-right)) 0 calc(8px + var(--safe-left));
  background: var(--dark-2); border-bottom: 1px solid var(--line);
}
.topbar .brand { gap: 10px; padding: 0 6px; }
.topbar .brand .leaf { width: 28px; height: 28px; }
.topbar .brand-name { font-size: var(--fs-lg); }
.nav-toggle {
  background: transparent; border: none; color: var(--text); flex: 0 0 auto;
  width: 48px; height: 48px; font-size: var(--fs-xl); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.nav-toggle:hover { background: rgba(255,255,255,.07); }
.topbar .brand { flex: 0 0 auto; }
/* Ô DÁN LINK giữa thanh (giai đoạn 4 — như ô "Kiểm tra URL" của Search Console, app.js mountLinkBox). ≤900px thu vào nút 🔗. */
.topbar-center { flex: 1; min-width: 0; display: flex; justify-content: center; padding: 0 12px; }
.linkbox { display: flex; align-items: center; gap: 6px; width: 100%; max-width: 680px; height: 44px; padding: 0 5px 0 14px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); }
.linkbox:focus-within { border-color: var(--amber); }
.linkbox-icon { flex: 0 0 auto; opacity: .7; }
.linkbox-input { flex: 1; min-width: 0; height: 100%; padding: 0 4px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: var(--fs-base); outline: none; }
.linkbox-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.linkbox-paste { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; cursor: pointer; font-size: var(--fs-base); opacity: .7; }
.linkbox-paste:hover, .linkbox-paste:focus-visible { opacity: 1; background: rgba(255, 255, 255, .07); }
.topbar-icon { display: none; background: transparent; border: none; color: var(--text); width: 44px; height: 44px; font-size: var(--fs-lg); border-radius: 50%; cursor: pointer; align-items: center; justify-content: center; }
.topbar-icon:hover, .app.linkbox-open .topbar-icon { background: rgba(255,255,255,.07); }
/* margin-left:auto ĐẨY cụm nút sát phải ở MỌI bề rộng — ≤900px ô giữa (.topbar-center) display:none, và khi mở hàng dán link
   nó là position:fixed (rời flow) nên không còn khối flex:1 nào chiếm chỗ trống → cụm nút từng đứng ngay sau logo, hở 56-96px
   bên phải (ảnh iPhone 13/9). Desktop ô giữa vẫn ăn hết chỗ trống nên margin auto = 0, không đổi. */
.topbar-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; margin-left: auto; }
/* Menu tài khoản (thay khối tên user + Tài khoản/Đăng xuất ở cuối sidebar cũ) — tái dùng .menu-wrap/.menu-pop/.menu-item */
.user-avatar {
  width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 2px solid transparent;
  background: var(--green); color: #fff; font-weight: 700; font-size: var(--fs-sm); letter-spacing: .02em;
  display: inline-flex; align-items: center; justify-content: center;
}
.user-avatar:hover, .user-menu.open .user-avatar { border-color: var(--amber); }
.user-menu .menu-pop { top: calc(var(--topbar-total) - 6px); right: calc(10px + var(--safe-right)); min-width: 220px; }
.user-menu-head { padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.user-menu-name { font-weight: 700; font-size: var(--fs-base); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-sub { font-size: var(--fs-xs); color: var(--muted); }
.backdrop { display: none; }

@media (min-width: 1280px) {
  .app.nav-collapsed .sidebar { display: none; } /* chỉ chế độ GHIM — dưới 1280 menu là ngăn kéo, cờ này bỏ qua */
}
@media (max-width: 1279px) {
  /* Menu → ngăn kéo trượt từ trái, ĐÈ nội dung, nằm DƯỚI thanh trên (☰ vẫn bấm được để đóng). */
  .sidebar {
    position: fixed; top: var(--topbar-total); bottom: 0; left: 0; height: auto; z-index: var(--z-drawer);
    background: var(--panel); box-shadow: 0 0 44px rgba(0,0,0,.5);
    transform: translateX(-105%); transition: transform .22s ease;
    padding-bottom: calc(var(--bottom-inset) + 16px); /* mục cuối không chui dưới bottom nav */
    width: calc(var(--sidebar-w) + var(--safe-left)); padding-left: calc(8px + var(--safe-left)); /* ngăn kéo sát mép trái: chừa tai thỏ khi xoay ngang */
  }
  .app.nav-open .sidebar { transform: translateX(0); }
  .backdrop {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; top: var(--topbar-total); z-index: var(--z-backdrop);
    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 ngăn kéo mở */
}
@media (max-width: 900px) {
  :root { --topbar-h: 56px; --bottom-inset: var(--bottomnav-total); }
  /* Ô dán link thu vào nút 🔗; mở ra = hàng full ngang ngay dưới thanh trên (cùng lớp thanh trên) */
  .topbar-center { display: none; }
  .topbar-icon { display: inline-flex; }
  .app.linkbox-open .topbar-center {
    display: flex; position: fixed; left: 0; right: 0; top: var(--topbar-total); z-index: var(--z-topbar);
    padding: 8px calc(10px + var(--safe-right)) 8px calc(10px + var(--safe-left));
    background: var(--dark-2); border-bottom: 1px solid var(--line);
  }
  .app.linkbox-open .linkbox { max-width: none; }
  .linkbox-input { font-size: var(--fs-base); } /* iOS tự phóng to khi focus ô <16px — giữ ĐÚNG 16px, đừng lên --fs-md */
  .topbar .brand .leaf { width: 26px; height: 26px; }
  .topbar .brand-name { font-size: var(--fs-md); }
  /* 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], input[type=url], textarea, select { font-size: var(--fs-base); } /* 16px chống iOS phóng to */
}

@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 > .field-wide { flex: 1 1 220px; min-width: 0; }
  .row > :has(select) { flex-basis: 220px; } /* ô chọn cần chỗ cho chữ đang chọn — 2 ô chọn/hàng ở 390px cắt "Did You Know? (nền đen)" còn 118px (thang chữ 7/10/2026); ô số vẫn 2 ô/hàng */
  .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: calc(14px + var(--safe-top)) calc(10px + var(--safe-right)) calc(14px + var(--safe-bottom)) calc(10px + var(--safe-left)); }
  .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: var(--fs-xs); 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: var(--fs-4xl); }
.stock-meta { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 6px 8px; font-size: var(--fs-xs); 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: var(--fs-sm); font-weight: 700; margin-bottom: 8px; color: var(--muted); }
/* Biểu đồ theo ngày (makeDailyChart lib.js, 11/10/2026): SVG vẽ đúng bề rộng thật nên chữ trục giữ đúng --fs-2xs; số từng ngày ở ô .dchart-tip */
.dchart { margin-bottom: 12px; }
.dchart .chip-group { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.dchart-hint { font-size: var(--fs-xs); margin: 8px 0 4px; }
.dchart-wrap { position: relative; margin-top: 8px; touch-action: pan-y; cursor: crosshair; user-select: none; }
.dchart-plot svg { display: block; }
.dchart-empty { font-size: var(--fs-sm); padding: 24px 0; }
.dchart-axis { font-size: var(--fs-2xs); fill: var(--muted); font-variant-numeric: tabular-nums; }
.dchart-grid { stroke: rgba(255, 255, 255, .07); }
.dchart-guide { stroke: rgba(255, 255, 255, .35); stroke-dasharray: 3 3; pointer-events: none; }
.dchart-bar { fill-opacity: .85; stroke-width: 0; transition: fill-opacity .1s; }
.dchart-bar.on { fill-opacity: 1; }
.dchart-bar.open { fill-opacity: .3; stroke-width: 1; stroke-dasharray: 3 2; } /* hôm nay chưa hết ngày */
.dchart-bar.open.on { fill-opacity: .45; }
.dchart-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.dchart-line.open { stroke-dasharray: 5 4; }
.dchart-tip { position: absolute; top: 0; z-index: var(--z-dropdown); pointer-events: none; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: var(--fs-xs); line-height: 1.45; white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.dchart-tip-date { font-weight: 700; }
.dchart-sum { font-size: var(--fs-xs); margin-top: 6px; }
.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: var(--fs-xs); margin-top: 2px; }
.report-msg { max-width: 420px; font-size: var(--fs-xs); 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; }
/* Thư viện nội dung: điện thoại (≤600px) hiện THẺ thay bảng cuộn ngang (cột Lượt xem từng nằm ngoài màn hình, 10/10/2026) */
.report-content-cards, .report-mobile-only { display: none; }
.report-content-card { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); cursor: pointer; }
.report-content-card:first-child { border-top: 0; }
.report-content-card-main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.report-content-card-msg { font-size: var(--fs-xs); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.report-content-card-stats { font-size: var(--fs-xs); font-weight: 600; color: var(--amber); }
@media (max-width: 600px) {
  .report-content-cards { display: block; }
  .report-mobile-only { display: inline-block; }
  .report-desktop-only { display: none; }
}
/* 8 cột → 10 (thêm Khuôn + Tự động 16/9/2026). min-width là SÀN cho bảng cuộn ngang trong
   .stats-table-wrap: cột tên page dính trái nên vuốt ngang vẫn biết hàng của page nào. Mốc 900 (khớp
   topbar/bottom-nav) thu hẹp 2 cột chữ lại để điện thoại bớt một nhịp vuốt, KHÔNG ẩn cột — ẩn đi thì
   người dùng mở trên điện thoại không thấy đúng thứ vừa xin. */
/* min-width = SÀN cho màn hẹp (dưới mức này mới cuộn ngang) — đặt sát bề rộng tự nhiên; sàn cao hơn nội dung (1.280px tới 7/10/2026)
   làm trình duyệt chia phần dư cho mọi cột, kéo cột số rộng ra lại. */
.report-overview-table { min-width: 980px; }
/* Gọn bảng (7/10/2026, anh yêu cầu): tiêu đề cột được XUỐNG DÒNG ("REACH / 28 NGÀY") và ▲▼% đứng DƯỚI con số thay vì cùng
   hàng — 2 cột Reach/Tương tác từng rộng theo chữ tiêu đề khoá 1 dòng + "4.299 ▲ 12%" trên 1 hàng. */
.report-overview-table th { white-space: normal; vertical-align: bottom; line-height: 1.3; }
.report-overview-table td.num .report-delta { display: block; margin-left: 0; }
.report-overview-table td:first-child { max-width: 180px; } /* tên page + dòng lỗi xuống dòng thay vì kéo cột rộng */
.report-overview-table th, .report-overview-table td { padding-left: 8px; padding-right: 8px; } /* 9 cột (bỏ cột "Chi tiết →" 10/10/2026 — cả hàng bấm được): bảng vừa khung 1440px (cột đầu/cuối giữ đệm 14px của .stats-table) */
/* ---- Cột "Khuôn" (2 dòng reel/ảnh) + "Tự động" (pill chế độ + dòng phụ) ---- */
.report-tpl-cell, .report-auto-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.report-tpl-line { display: flex; align-items: center; gap: 5px; font-size: var(--fs-xs); min-width: 0; }
.report-tpl-line.off { opacity: .4; } /* loại fanpage KHÔNG đăng — vẫn đọc được, không ẩn */
.report-tpl-ico { flex: 0 0 auto; font-size: var(--fs-2xs); }
/* Tên khuôn là chuỗi TỰ DO (người dùng đặt) → cắt ellipsis + title đầy đủ, đừng để kéo giãn cột */
.report-tpl-name { max-width: 150px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; } /* tên dài xuống tối đa 2 dòng thay vì cắt "…" (10/10/2026) */
.report-tpl-stale { color: var(--danger-text); font-size: var(--fs-2xs); font-weight: 700; white-space: nowrap; }
/* CỐ Ý không dùng .pill (uppercase + letter-spacing, xem bẫy ở skill §1) — đây là nhãn câu ngắn có emoji */
.report-auto-pill { align-self: flex-start; max-width: 100%; font-size: var(--fs-xs); font-weight: 600; padding: 2px 9px;
  border-radius: 999px; white-space: nowrap; border: 1px solid var(--line); color: var(--muted); }
.report-auto-pill.on { color: var(--ok); border-color: rgba(78,165,111,.45); background: rgba(78,165,111,.12); }
.report-auto-pill.warn { color: var(--amber); border-color: rgba(224,168,62,.45); background: rgba(224,168,62,.10); }
.report-auto-sub { font-size: var(--fs-2xs); color: var(--muted); white-space: nowrap; }
.report-ok { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.report-health { display: flex; flex-direction: column; gap: 3px; }
.report-issue { font-size: var(--fs-xs); font-weight: 700; line-height: 1.3; } /* nhãn ngắn cột Sức khoẻ — chữ xuống dòng được (không .pill: in hoa + nowrap làm cột phình) */
@media (max-width: 900px) {
  .report-overview-table { min-width: 940px; }
  .report-tpl-name { max-width: 104px; }
  .report-tpl-line, .report-auto-pill { font-size: var(--fs-xs); }
  .report-auto-sub, .report-tpl-stale { font-size: var(--fs-2xs); }
}
/* ---- 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: var(--fs-2xs); 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; }
a.report-attn-row { display: block; color: inherit; text-decoration: none; } /* dòng là <a href> (mở được tab mới) — giữ màu chữ thường */
a.report-attn-row.note { color: var(--muted); } /* dòng xám (noteItems) */
.report-attn-row { font-size: var(--fs-sm); padding: 5px 0; border-top: 1px solid var(--line); cursor: pointer; }
.report-attn-row:first-of-type { border-top: 0; margin-top: 6px; }
a.report-attn-row:hover { color: var(--amber); } /* sau .note — dòng xám cũng sáng khi rê */
.report-chart-sum { font-size: var(--fs-2xs); margin-top: 6px; }
.report-slot-grid { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; }
/* Điện thoại: 14 ngày xếp 2 hàng × 7 thay vì vuốt ngang (trước chỉ thấy 8 ngày đầu, 10/10/2026) */
@media (max-width: 600px) { .report-slot-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); overflow: visible; } .report-slot-day { width: auto; } }
.report-slot-day { flex: 0 0 auto; width: 38px; text-align: center; }
.report-slot-day.empty { opacity: .5; }
.report-slot-date { font-size: var(--fs-2xs); 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: var(--fs-xs); 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: var(--fs-lg); flex: 0 0 auto; }
.report-funnel-table { min-width: 640px; }
/* Báo cáo Group (24/9/2026 khuya): bảng nhỏ trong thẻ nửa trang (theo chủ đề / theo part) co theo thẻ thay vì 1080px mặc định của
   .stats-table; bảng top bài + bảng so sánh Group cuộn ngang trong .stats-table-wrap dưới bề rộng này. */
.report-mini-table { min-width: 0; }
.group-top-table { min-width: 640px; }
.group-ov-table { min-width: 860px; }
/* 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: var(--fs-2xs); }
.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: var(--z-dropdown); 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: var(--fs-2xs); padding: 1px 6px; }
/* Ô chọn Group (makeGroupPicker, 24/9/2026 khuya): vòng chữ cái khi Group chưa có ảnh bìa + dòng phụ nhịp · thành viên thay chip tag. */
.fp-picker-mono { display: grid; place-items: center; color: #fff; font-weight: 700; font-size: var(--fs-xs); }
.fp-picker-sub { font-size: var(--fs-2xs); color: var(--muted); margin-top: 2px; }
/* 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: var(--fs-base);
  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: var(--fs-md);
}
.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: var(--fs-md);
}
.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: var(--fs-md);
}
.dashboard-rank-badge.rank-other {
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  font-size: var(--fs-xs);
  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: var(--fs-xl);
  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: var(--fs-badge);
  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: var(--fs-sm);
  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: var(--fs-xs);
  color: var(--muted);
  flex-wrap: wrap;
}
.dashboard-post-fanpage {
  font-size: var(--fs-2xs);
  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: var(--fs-xs);
  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: var(--bottomnav-total);
    z-index: var(--z-bottomnav);
    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 calc(4px + var(--safe-right)) var(--safe-bottom) calc(4px + var(--safe-left));
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.35);
  }
  .bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--muted);
    text-decoration: none;
    padding: 6px 0;
    font-size: var(--fs-2xs);
    font-weight: 600;
    gap: 3px;
    border-radius: 8px;
    transition: color 0.15s, background 0.15s;
    cursor: pointer;
  }
  .bottom-nav a .bnav-icon {
    font-size: var(--fs-lg);
    line-height: 1;
  }
  .bottom-nav a.active {
    color: var(--amber);
    background: rgba(224, 168, 62, 0.12);
  }
  .main {
    padding-bottom: calc(var(--bottom-inset) + 30px);
  }
}

@media (max-width: 1040px) {
  .sticky-action-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-action-bar);
    padding: 10px calc(14px + var(--safe-right)) calc(10px + var(--safe-bottom)) calc(14px + var(--safe-left)); /* sát đáy màn: chừa thanh home + tai thỏ 2 bên */
    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;
  }
}
/* ≤900px có bottom nav: thanh nút đứng NGAY TRÊN bottom nav (bottom nav đã tự chừa thanh home) — ĐẶT SAU khối ≤1040 kẻo bị ghi đè */
@media (max-width: 900px) {
  .sticky-action-bar { bottom: var(--bottomnav-total); padding-bottom: 10px; }
}

/* 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: var(--fs-base);
  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: var(--fs-xs);
  color: var(--muted);
  transition: transform 0.2s ease;
}
.form-accordion.collapsed .form-accordion-icon {
  transform: rotate(-90deg);
}

/* Dashboard & Cards Mobile Optimization */
@media (max-width: 600px) {
  .card {
    padding: 14px 12px;
    border-radius: 12px;
  }
  .card h2 {
    margin-bottom: 12px;
    font-size: var(--fs-2xs);
  }
  .field {
    margin-bottom: 12px;
  }


  .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: var(--fs-2xs) !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: var(--fs-xs) !important;
    line-height: 1.3 !important;
    -webkit-line-clamp: 2 !important;
  }
  /* Viên số liệu xuống hàng riêng dưới tiêu đề (10/10/2026 — cùng hàng thì tiêu đề Top bài ở 390px chỉ còn "My boss…") */
  .dashboard-post-item { flex-wrap: wrap; }
  .dashboard-post-main { flex: 1 1 0; min-width: 0; }
  .dashboard-post-submeta {
    font-size: var(--fs-2xs) !important;
    gap: 4px !important;
  }
  .dashboard-post-fanpage {
    font-size: var(--fs-2xs) !important;
    padding: 1px 6px !important;
  }
  .dashboard-post-actions {
    flex: 1 1 100%;
    justify-content: flex-end;
    margin-left: 0;
    gap: 6px !important;
  }
  .dashboard-post-engagement {
    font-size: var(--fs-2xs) !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(--tone, var(--amber));
}
/* Ô dẫn tới trang admin mà người xem không phải admin → ô tĩnh, không sáng viền như thể bấm được. */
.health-subcard.static:hover {
  border-color: var(--line);
}

.health-subcard-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--tone, var(--amber)); /* màu của khối chứa (Tổng quan: .tone-green) */
  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: var(--fs-sm);
}

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

.health-pill {
  font-size: var(--fs-2xs);
  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: var(--fs-xs) !important;
  }
  .health-status-row {
    font-size: var(--fs-xs) !important;
  }
}

/* === Tổng quan kiểu Pulse (11/10/2026, anh chốt theo pulse.egoist.dev) ===
   Mỗi khối 1 MÀU (--tone) dùng lại ở ô icon, tiêu đề, biểu đồ; 1 số lớn + 3 chỉ số phụ chia cột; biểu đồ chấm ở đáy thẻ.
   Thẻ số: 4 cột → 2 (≤1200) → 1 (≤600). Ở 390px 2 cột chỉ còn ~170px/thẻ, không đủ chỗ cho 3 chỉ số phụ — nên 1 cột,
   mọi thẻ vẫn đúng 1 ô (không span lửng lơ, quy tắc §7 skill s2r-ui). */
.tone-green  { --tone: #4ade80; }
.tone-amber  { --tone: #f5b041; }
.tone-blue   { --tone: #60a5fa; }
.tone-violet { --tone: #c084fc; }
.tone-red    { --tone: #f87171; }
.tone-teal   { --tone: #2dd4bf; }

.ov-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1200px) { .ov-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .ov-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; } }

.ov-icon {
  width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm); line-height: 1;
  background: color-mix(in srgb, var(--tone) 18%, transparent);
}

.ov-card {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 16px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--line);
  color: var(--text); text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.ov-card:hover { border-color: color-mix(in srgb, var(--tone) 55%, transparent); }
.ov-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.ov-card-title { font-size: var(--fs-base); font-weight: 700; color: var(--tone); flex: 1; min-width: 0; }
.ov-chev { color: var(--muted); font-size: var(--fs-lg); line-height: 1; transition: transform .15s ease, color .15s ease; }
.ov-card:hover .ov-chev { color: var(--tone); transform: translateX(2px); }

.ov-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; }
.ov-label { font-size: var(--fs-xs); color: var(--muted); }
.ov-flag {
  font-size: var(--fs-2xs); font-weight: 700; padding: 1px 8px; border-radius: 999px; white-space: nowrap;
  border: 1px solid currentColor;
}
.ov-flag.error   { color: #f87171; background: rgba(248, 113, 113, .12); }
.ov-flag.warning { color: #f5b041; background: rgba(245, 176, 65, .12); }
.ov-flag.ok      { color: #4ade80; background: rgba(74, 222, 128, .12); }
.go-ov-grid { margin-bottom: 16px; }
/* Giá trị ô phụ có thể là chữ dài (tên page/Group) — xuống dòng, không tràn thẻ */
.ov-sub-val { overflow-wrap: anywhere; }
.ov-label-row .report-delta { margin: 0; } /* huy hiệu ▲▼ dùng làm flag */

.ov-big { display: flex; align-items: baseline; gap: 6px; line-height: 1.05; }
.ov-num { font-size: var(--fs-display-lg); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ov-unit { font-size: var(--fs-base); color: var(--muted); font-weight: 600; }

.ov-subs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
/* Nhãn được XUỐNG DÒNG (4 thẻ/hàng ở 1440px chỉ ~70px mỗi ô: "Lịch đang bật" bị cắt …); giá trị canh ĐÁY ô nên các số
   cùng hàng vẫn thẳng nhau dù nhãn 1 hay 2 dòng. */
.ov-sub { min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.ov-sub-label { font-size: var(--fs-2xs); color: var(--muted); line-height: 1.25; overflow-wrap: anywhere; }
.ov-sub-val { font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }
.ov-sub-val.error   { color: #f87171; }
.ov-sub-val.warning { color: #f5b041; }

/* Biểu đồ chấm. Cột: chấm xếp dọc trong 1 cột của grid; ô tô nền nhạt theo màu khối như ô biểu đồ của Pulse. */
.ov-dots {
  margin-top: auto; padding: 10px; border-radius: 10px;
  background: color-mix(in srgb, var(--tone) 7%, rgba(0, 0, 0, .18));
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 3px;
}
.ov-card > .ov-subs { margin-bottom: 12px; } /* ô chấm margin-top:auto → luôn chạm đáy thẻ, 4 thẻ cùng hàng thẳng đáy */
.ov-col { display: grid; grid-template-rows: repeat(6, 6px); row-gap: 3px; justify-items: center; }
.ov-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .09); }
.ov-dots i.on { background: var(--tone); }
.ov-dots i.alert { background: #f87171; }
.ov-col.open i.on { opacity: .45; } /* hôm nay chưa hết ngày — số còn tăng */
.ov-waffle { grid-template-columns: repeat(auto-fill, 8px); justify-content: start; gap: 6px; }
.ov-waffle i { width: 8px; height: 8px; }
.ov-waffle i.on.ok      { background: var(--tone); }
.ov-waffle i.on.warning { background: #f5b041; }
.ov-waffle i.on.error   { background: #f87171; }
.ov-waffle i.on.off     { background: rgba(255, 255, 255, .22); } /* page chưa kết nối — không có số */

/* Thẻ LỌC (filterCard lib.js — Lịch sử, Lịch sử Group): gọn, số căn trái, không dải chấm. Thay .stat-card căn giữa (11/10/2026).
   Lưới auto-fit ≥150px/thẻ (4 thẻ Lịch sử, 6 thẻ Lịch sử Group); ≤600px 2 cột đều nhau. */
.ov-fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
@media (max-width: 600px) { .ov-fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.ov-fcard {
  display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 14px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line); transition: border-color .15s ease, background-color .15s ease; outline: none;
}
.ov-fcard.clickable { cursor: pointer; }
.ov-fcard.clickable:hover, .ov-fcard.clickable:focus-visible { border-color: color-mix(in srgb, var(--tone) 55%, transparent); }
.ov-fcard.active { border-color: var(--tone); background: color-mix(in srgb, var(--tone) 12%, var(--panel)); }
.ov-fcard-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ov-fcard-label { font-size: var(--fs-sm); font-weight: 700; color: var(--tone); line-height: 1.25; overflow-wrap: anywhere; }
.ov-fcard-num { font-size: var(--fs-3xl); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .ov-fcard { padding: 10px 12px; } .ov-fcard-num { font-size: var(--fs-2xl); } }

/* Thẻ fanpage (/fanpages): ô số + dải chấm tương tác 30 ngày cùng kiểu thẻ số trang chủ (11/10/2026 — thay chip .pill + sparkline). */
.fp-subs { margin-top: 6px; }
.fp-sub { padding: 6px; border-radius: 8px; background: rgba(255, 255, 255, .04); text-decoration: none; color: var(--text); min-width: 0; }
.fp-sub .ov-sub-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
@media (max-width: 600px) { /* thẻ 2 cột ~170px → mỗi ô ~46px: bỏ nhãn chữ, số 1 dòng chữ nhỏ hơn */
  .fp-sub { padding: 4px; }
  .fp-sub .ov-sub-label { display: none; }
  .fp-sub .ov-sub-val { margin-top: 0; white-space: nowrap; font-size: var(--fs-xs); }
}
.fp-sub:hover { background: rgba(255, 255, 255, .08); }
.fp-eng { margin-top: 10px; }
.fp-eng-label { font-size: var(--fs-2xs); color: var(--muted); margin-bottom: 6px; }

/* Khối lớn bên dưới: đầu khối cùng kiểu thẻ số. `.card .ov-sec-title` thắng `.card h2` (chữ in hoa màu hổ phách). */
.ov-sec { display: flex; flex-direction: column; gap: 14px; padding: 18px; }
.ov-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.card .ov-sec-title {
  margin: 0; display: flex; align-items: center; gap: 10px;
  font-size: var(--fs-md); font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--tone);
}
.ov-sec-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ov-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1040px) { .ov-two { grid-template-columns: minmax(0, 1fr); } }

/* Top Fanpage: hàng xếp hạng + thanh tỉ lệ lượt xem so với page dẫn đầu. */
.ov-rank-list { display: flex; flex-direction: column; gap: 4px; }
.ov-rank {
  display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px;
  color: var(--text); text-decoration: none; transition: background-color .15s ease;
}
.ov-rank:hover { background: rgba(255, 255, 255, .05); }
.ov-rank-no { width: 22px; flex: 0 0 22px; text-align: center; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.ov-rank-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ov-rank-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ov-rank-name { font-size: var(--fs-sm); font-weight: 600; overflow-wrap: anywhere; line-height: 1.3; }
.ov-rank-val { font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ov-rank-val small { font-size: var(--fs-2xs); color: var(--muted); font-weight: 600; }
.ov-bar { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.ov-bar > span { display: block; height: 100%; border-radius: 2px; background: var(--tone); }

/* --- 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: var(--fs-xs);
  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: var(--fs-xs);
  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 bị kẹp bề rộng: nhãn trạng thái cắt bằng ellipsis (chuỗi đầy đủ ở tooltip), tên fanpage
   XUỐNG DÒNG (7/10/2026, khi tăng thang chữ — trước cắt …). Không kẹp thì bảng phình quá khung chứa và cột "Thao tác" phải
   cuộn mới tới (đo 1440px sau khi tăng chữ: bảng 1.125px trong khung 1.051px, riêng cột tên 291px).
   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 {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 380px;
}
.matrix-name-cell { max-width: 220px; overflow-wrap: anywhere; }

@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;
  flex-wrap: wrap;
  gap: 6px 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: 100%; }

.matrix-mobile-card-title {
  font-weight: 700;
  font-size: var(--fs-base);
  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-wrap: anywhere; /* tên page dài XUỐNG DÒNG (header flex-wrap) thay vì cắt … — 7/10/2026 khi tăng thang chữ */
}

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

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

.matrix-mobile-info-label {
  color: var(--muted);
  font-size: var(--fs-2xs);
  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: var(--fs-sm);
}

/* 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: var(--fs-base);
  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: var(--fs-xs);
  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: var(--fs-xs);
  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: var(--fs-xs);
  overflow-wrap: anywhere; /* KHÔNG word-break:break-all — nó cắt giữa MỌI từ ("fou / nd"); anywhere chỉ bẻ từ dài hơn dòng */
}

.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;
  }
}

/* ── 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. */



/* ---------- Thông báo: badge nav + chuông topbar + trang Hộp thư ---------- */
.nav-badge {
  min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; line-height: 1; color: #fff; background: var(--danger); border-radius: 999px;
}
/* thắng `#nav a span{font-size:var(--fs-lg)}` bằng specificity (id+class+type), KHÔNG !important */
#nav a .nav-badge { margin-left: auto; font-size: var(--fs-badge); }
/* Kéo xuống để làm mới (initPullToRefresh app.js, chỉ app PWA đã cài). --pull = quãng kéo (đã cản); vòng nằm khuất dưới thanh
   trên, trượt xuống theo ngón tay, xoay theo quãng kéo; .ready = qua mốc (nhấc tay là làm mới), .busy = đang tải (xoay đều). */
.ptr {
  --pull: 0px; --p: 0;
  position: fixed; left: 50%; top: var(--topbar-total); z-index: var(--z-ptr);
  width: 40px; height: 40px; margin-left: -20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel); border: 1px solid var(--line); box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  color: var(--muted); font-size: var(--fs-lg); pointer-events: none;
  transform: translateY(calc(var(--pull) - 48px)); opacity: min(1, calc(var(--p) * 1.75));
}
.ptr-icon { display: inline-block; transform: rotate(calc(var(--p) * 270deg)); }
.ptr.ready { color: var(--amber); }
.ptr.busy { color: var(--amber); }
.ptr.busy .ptr-icon { animation: ptr-spin .8s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }
/* Số sống cạnh mục menu (kiểu Pulse, 11/10/2026 — paintNavStats app.js). Chữ số mờ canh phải; `#nav a .nav-stat` thắng
   `#nav a span{font-size:var(--fs-lg)}` bằng specificity. warn = đỏ (thiếu bài / page chưa kết nối), busy = xanh có chấm nhịp. */
/* Nhãn mục menu: 1 dòng, chiếm chỗ trống, đẩy số/badge sát phải. `#nav a .nav-label` thắng `#nav a span{font-size:var(--fs-lg)}`
   (rule đó dành cho icon). Mục 256px chỉ còn 208px nội dung: icon 22 + gap 14 + "Lịch sử & hàng đợi" ~137 + gap + "180" ~26 —
   gap 14 thì lố 5px nên số kéo sát lại 8px (margin âm bù gap của hàng flex). Không vừa nữa thì cắt "…", không gãy dòng. */
#nav a .nav-label { font-size: inherit; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#nav a .nav-stat {
  margin-left: -6px; font-size: var(--fs-xs); font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 6px;
}
#nav a .nav-stat.warn { color: #f87171; }
#nav a .nav-stat.busy { color: #60a5fa; }
#nav a .nav-stat.busy::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
  animation: nav-stat-pulse 1.4s ease-in-out infinite;
}
@keyframes nav-stat-pulse { 50% { opacity: .3; } }
#nav a.active .nav-stat { color: rgba(255, 255, 255, .85); }
#nav a.active .nav-stat.warn { color: #fecaca; }
.topbar-bell {
  position: relative; background: transparent; border: none; color: var(--text);
  width: 44px; height: 44px; font-size: var(--fs-xl); border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.topbar-bell:hover { background: rgba(255,255,255,.07); }
.topbar-bell .nav-badge { position: absolute; top: 5px; right: 5px; min-width: 16px; height: 16px; padding: 0 4px; font-size: var(--fs-badge); }

.notif-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
/* select lọc: nhỏ vừa đủ + cùng hàng (thắng global select{width:100%}) → không còn chiếm nguyên dòng.
   Nhờ vậy chips + 2 select nằm trái, .notif-toolbar-actions (margin-left:auto) nằm phải, TẤT CẢ 1 hàng. */
.notif-toolbar select { flex: 0 0 auto; width: auto; min-width: 150px; max-width: 210px; }
.notif-toolbar-actions { margin-left: auto; display: inline-flex; gap: 8px; flex-wrap: wrap; }

/* Hộp thư v2 (13/9/2026 chiều — bố cục chỉnh theo ảnh iPhone): lưới 4 select bằng nhau, thanh chọn 1 hàng + menu ⋯,
   dòng 3 tầng head/meta/body với nút CÙNG hàng meta ở mọi breakpoint (không còn cột nút dọc bên phải). */
.notif-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.notif-filters select { width: 100%; min-width: 0; }
.tf-custom { margin-top: 8px; } /* ô Từ/đến của makeTimeFilter (chips: cách dãy chip 8px) */
.notif-filters-custom > .tf-custom { margin: 0 0 10px; } /* trong lưới lọc Hộp thư: sát lưới, cách thanh chọn */
@media (max-width: 900px) { .notif-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.notif-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; padding: 0 2px 10px; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); color: var(--muted); }
.notif-bulk-all { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; color: var(--text); }
.notif-bulk-ctx { font-variant-numeric: tabular-nums; }
.notif-bulk-actions { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.notif-bulk-info { font-variant-numeric: tabular-nums; color: var(--amber); font-weight: 600; margin-right: 4px; }
/* gợi ý mở rộng phạm vi (Gmail-style) — hàng riêng dưới thanh, thụt bằng ô tick */
.notif-bulk-hint { width: 100%; font-size: var(--fs-xs); color: var(--muted); padding-left: 26px; }
.linklike { background: none; border: none; padding: 0; font: inherit; color: var(--amber); font-weight: 600; text-decoration: underline; cursor: pointer; }
.linklike:hover { color: var(--text); }
.notif-list { display: flex; flex-direction: column; gap: 8px; }
.notif-empty { padding: 28px 8px; text-align: center; }
.notif-item {
  display: flex; gap: 10px; align-items: flex-start;
  background: rgba(255,255,255,.02); border: 1px solid var(--line);
  border-left: 3px solid var(--muted); border-radius: 10px; padding: 10px 12px;
}
.notif-item.unread { background: rgba(224,168,62,.06); }
.notif-item.selected { border-color: var(--amber); background: rgba(224,168,62,.12); }
.notif-check { flex: 0 0 auto; width: 16px; height: 16px; margin: 3px 0 0; cursor: pointer; accent-color: var(--amber); }
.notif-main { flex: 1; min-width: 0; }
.notif-head { display: flex; align-items: flex-start; gap: 8px; }
.notif-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); flex: 0 0 auto; margin-top: 6px; }
.notif-level { font-size: var(--fs-2xs); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; flex: 0 0 auto; margin-top: 3px; }
.notif-title { font-weight: 700; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.notif-time { margin-left: auto; font-size: var(--fs-2xs); color: var(--muted); white-space: nowrap; flex: 0 0 auto; margin-top: 2px; }
/* ≤600px: giờ ra dòng riêng + được xuống dòng — dòng nhóm "lần cuối … · lần đầu …" rộng ~320px từng đẩy cả thẻ tràn ngang 67px (119px
   sau khi tăng thang chữ 7/10/2026). */
@media (max-width: 600px) { .notif-head { flex-wrap: wrap; } .notif-time { flex-basis: 100%; margin-left: 0; white-space: normal; } }
.notif-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; min-width: 0; flex-wrap: wrap; } /* nút thao tác xuống dòng thay vì tràn khỏi thẻ ở 390px */
.notif-fp { font-size: var(--fs-2xs); color: var(--muted); background: rgba(255,255,255,.06); padding: 2px 8px; border-radius: 999px; font-family: var(--font-mono); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-actions { margin-left: auto; display: flex; gap: 6px; flex: 0 0 auto; }
.notif-body { margin-top: 6px; color: var(--muted); font-size: var(--fs-sm); white-space: pre-wrap; word-break: break-word; }
.notif-pager select { width: auto; min-width: 0; font-size: var(--fs-xs); padding: 4px 8px; }
/* Dòng ngữ cảnh "Đang xem thông báo của <fanpage đang làm việc> · Xem tất cả" (1A, 13/9) */
.notif-fpctx { font-size: var(--fs-sm); color: var(--muted); margin: -6px 0 12px; }
.notif-fpctx b { color: var(--text); }
/* ---- BẢNG THÔNG BÁO TRƯỢT phải (2A, 13/9 — app.js mountNotifPanel; như bảng thông báo Search Console) ----
   Cố định dưới thanh trên, cao tới --bottom-inset (đứng TRÊN bottom nav ở ≤900px), thân tự cuộn; z = popover (60: trên thanh trên 40
   và nội dung, dưới bottom nav 80 / toast 90 / modal 100). ≤600px phủ toàn bề ngang. */
.notif-panel { position: fixed; top: var(--topbar-total); right: 0; bottom: var(--bottom-inset); width: min(460px, 100vw); z-index: var(--z-popover); display: flex; flex-direction: column; background: var(--dark-2); border-left: 1px solid var(--line); box-shadow: -18px 0 40px rgba(0,0,0,.45); padding-right: var(--safe-right); }
.notif-panel-head { display: flex; align-items: center; gap: 8px; padding: 12px 10px 12px 16px; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.notif-panel-titles { flex: 1; min-width: 0; }
.notif-panel-title { font-size: var(--fs-md); font-weight: 700; line-height: 1.2; }
.notif-panel-unread { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.notif-panel-close { background: transparent; border: none; color: var(--text); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: var(--fs-md); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.notif-panel-close:hover { background: rgba(255,255,255,.07); }
.notif-panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px 16px; }
/* Hộp thư chế độ compact (trong bảng ~460px): lưới lọc 1 cột (chỉ lọc loại), dòng gọn hơn */
.notif-inbox.compact .notif-filters { grid-template-columns: minmax(0, 1fr); }
.notif-inbox.compact .notif-toolbar { margin-bottom: 10px; }
.notif-inbox.compact .notif-item { padding: 8px 10px; }
@media (max-width: 600px) { .notif-panel { width: 100vw; border-left: 0; box-shadow: none; } }
/* Tab Cấu hình (13/9 chiều): ma trận loại × kênh, đầu card có pill, bảng thiết bị push */
.notif-cfg-info { margin-bottom: 12px; }
.notif-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.notif-card-head h2 { margin: 0; }
.notif-matrix-head, .notif-matrix-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px 110px 110px; align-items: center; gap: 8px; } /* 3 cột kênh: 🔔 Chuông · Telegram · Push (22/9/2026) */
.notif-matrix-head { font-size: var(--fs-xs); color: var(--muted); font-weight: 700; padding: 6px 0; border-bottom: 1px solid var(--line); }
.notif-matrix-head > span:not(:first-child) { text-align: center; }
.notif-matrix-quick { display: block; font-weight: 400; font-size: var(--fs-2xs); }
.notif-matrix-row { padding: 8px 0; border-top: 1px solid var(--line); }
.notif-matrix-row:first-of-type { border-top: 0; }
.notif-matrix-label { min-width: 0; }
.notif-matrix-cell { display: flex; justify-content: center; cursor: pointer; }
.notif-matrix-cell input { width: 18px; height: 18px; accent-color: var(--amber); cursor: pointer; }
.notif-devices { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.notif-devices-head { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.notif-device-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; padding: 6px 0; font-size: var(--fs-sm); border-top: 1px solid var(--line); }
.notif-device-row:first-of-type { border-top: 0; }
.notif-device-row.mine .notif-device-name { color: var(--amber); font-weight: 600; }
.notif-device-name { min-width: 0; overflow-wrap: anywhere; }
.notif-matrix-cell-lbl { display: none; } /* nhãn kênh cạnh ô tick — chỉ hiện ≤600px (đầu cột ở xa) */
.notif-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-xs); color: var(--muted); margin: 0 0 10px; }
/* ≤600px: tên + mô tả loại chiếm TRỌN hàng, 3 ô tick xuống hàng dưới có nhãn kênh (10/10/2026 — trước cột chữ chỉ 132px, mỗi
   mô tả xuống 5-8 dòng, cả bảng cao 2.493px ở 390px). Hàng đầu cột giữ 3 cột để còn lối tắt "hết · không". */
@media (max-width: 600px) {
  .notif-matrix-head, .notif-matrix-row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 6px; }
  .notif-matrix-head > span:first-child { display: none; }
  .notif-matrix-label { grid-column: 1 / -1; }
  .notif-matrix-cell { justify-content: flex-start; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--muted); }
  .notif-matrix-cell-lbl { display: inline; white-space: nowrap; }
  .notif-device-row { grid-template-columns: minmax(0, 1fr) auto; }
  .notif-device-row > .muted { display: none; }
}

.notif-cfg-list { display: flex; flex-direction: column; gap: 2px; }
.notif-cfg-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; cursor: pointer; }
.notif-cfg-row input { margin-top: 3px; flex: 0 0 auto; }
.notif-cfg-title { font-weight: 700; display: block; }
.notif-cfg-desc { font-size: var(--fs-xs); color: var(--muted); display: block; margin-top: 1px; }

/* ===== Truyện Group (24/9/2026) — views/group-stories.js ===== */
.gs-form-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px 18px; margin-bottom: 16px; } /* field cuối mỗi cột mất margin (.field:last-child) → khoảng cách do gap/margin của lưới lo */
.gs-form-grid > * { min-width: 0; }
.gs-meta { font-size: var(--fs-xs); color: var(--muted); }
/* Hôm nay đăng gì */
.gs-today { margin-bottom: 22px; border-color: rgba(224,168,62,.45); }
.gs-today-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 6px; }
.gs-today-head h2 { margin: 0; }
.gs-today-note { margin: 4px 0 8px; }
.gs-today-sub { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; margin: 14px 0 8px; }
.gs-today-empty { padding: 10px 0 2px; color: var(--muted); }
.gs-today-more { margin-top: 12px; }
.gs-today-more > .gs-kit { margin-top: 10px; }
.gs-kit { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 18px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(0,0,0,.16); }
.gs-kit + .gs-kit { margin-top: 12px; }
.gs-kit-pic { display: block; align-self: start; }
.gs-kit-body { min-width: 0; }
.gs-kit-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 8px; font-size: var(--fs-md); }
.gs-kit-text { margin-top: 8px; max-height: 320px; overflow-y: auto; overscroll-behavior-y: contain; }
.gs-steps { margin: 0; padding: 0; list-style: none; counter-reset: gs-step; display: flex; flex-direction: column; gap: 12px; }
.gs-steps > li { counter-increment: gs-step; position: relative; padding-left: 34px; min-width: 0; }
.gs-steps > li::before { content: counter(gs-step); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: rgba(224,168,62,.18); color: var(--amber); font-weight: 700; font-size: var(--fs-sm); display: flex; align-items: center; justify-content: center; }
.gs-step-label { display: block; font-weight: 600; font-size: var(--fs-base); margin: 2px 0 6px; }
.gs-steps .btn-row { margin-top: 0; }
/* Nhãn tiến độ part */
.gs-pchip { display: inline-flex; align-items: center; font-size: var(--fs-xs); font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; background: rgba(255,255,255,.07); color: var(--muted); border: 1px solid var(--line); }
.gs-pchip.posted { background: rgba(78,165,111,.18); color: var(--ok); border-color: rgba(78,165,111,.4); }
.gs-pchip.due { background: rgba(224,168,62,.18); color: var(--amber); border-color: rgba(224,168,62,.45); }
.gs-pchip.wait { color: var(--text); }
.gs-prog { display: inline-flex; flex-wrap: wrap; gap: 4px; }
/* Hàng dán link / đã đăng */
.gs-link-row { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gs-link-edit { display: flex; gap: 8px; align-items: center; min-width: 0; }
.gs-link-edit > input { flex: 1 1 auto; min-width: 0; }
.gs-link-edit > .btn { flex: 0 0 auto; }
.gs-link-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.gs-posted-at { color: var(--ok); font-weight: 600; font-size: var(--fs-base); margin-right: 4px; }
.gs-textlink { background: none; border: 0; padding: 0; color: var(--muted); font-size: var(--fs-sm); text-align: left; text-decoration: underline; cursor: pointer; font-family: var(--font-sans); align-self: flex-start; }
.gs-textlink:hover { color: var(--text); }
/* Danh sách truyện */
.gs-list-head { margin: 6px 0 4px; min-width: 0; } /* KHÔNG flex: hàng lọc làm flex item sẽ bị min-content của làn vuốt kéo rộng → tràn cả trang ở 390px (đo 24/9) */
.gs-list-head > .gs-list-title { margin-bottom: 10px; }
.gs-empty .btn { margin-left: 8px; }
.gs-list-title { font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--amber); margin: 0; }
.gs-story { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 14px; }
.gs-sum { list-style: none; cursor: pointer; padding: 14px 18px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.gs-sum::-webkit-details-marker { display: none; }
.gs-sum::before { content: '▸'; color: var(--muted); }
.gs-story[open] > .gs-sum::before { content: '▾'; }
.gs-title { font-weight: 700; font-size: var(--fs-md); }
.gs-body { padding: 0 18px 18px; }
.gs-controls { display: flex; flex-wrap: wrap; gap: 0 14px; align-items: flex-end; }
.gs-controls > .field { flex: 0 1 260px; min-width: 200px; }
.gs-controls-btns { margin-left: auto; margin-bottom: 14px; }
.gs-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 8px; }
.gs-part { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: rgba(0,0,0,.16); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gs-part.gs-state-posted { border-color: rgba(78,165,111,.45); }
.gs-part.gs-state-due { border-color: rgba(224,168,62,.45); }
.gs-part-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.gs-part-head > b { margin-right: auto; }
.gs-img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; background: rgba(255,255,255,.04); }
.gs-img-empty { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: var(--fs-base); }
.gs-part textarea.gs-text { min-height: 240px; font-size: var(--fs-base); line-height: 1.5; }
.gs-more > summary { cursor: pointer; color: var(--muted); font-size: var(--fs-sm); padding: 2px 0; }
.gs-more[open] > summary { margin-bottom: 8px; }
@media (max-width: 1040px) { .gs-form-grid { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 720px) {
  .gs-kit { grid-template-columns: minmax(0,1fr); }
  .gs-kit-pic { max-width: 240px; width: 100%; justify-self: center; } /* ảnh nhỏ lại để 4 bước đăng hiện sớm trên điện thoại */
}
@media (max-width: 560px) {
  .gs-sum, .gs-body { padding-left: 12px; padding-right: 12px; }
  .gs-parts { grid-template-columns: minmax(0,1fr); }
  .gs-controls-btns { margin-left: 0; }
  .gs-kit { padding: 10px; }
}

/* ===== Khu Group — ô "Group đang làm việc" ở menu + trang Group (views/groups.js: danh sách + trang Sửa có tab) ===== */
.nav-group-empty { padding: 6px 12px; font-size: var(--fs-sm); color: var(--muted); }
.gr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; }
.gr-card { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.gr-card.current { border-color: rgba(224,168,62,.55); }
.gr-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.gr-name { font-size: var(--fs-md); font-weight: 700; margin-right: auto; min-width: 0; overflow-wrap: anywhere; }
.gr-url { font-size: var(--fs-sm); color: var(--muted); overflow-wrap: anywhere; }
.gr-body { display: flex; flex-direction: column; gap: 10px; }
.gr-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs-base); color: var(--muted); }
.gr-stats b { color: var(--text); }
.gr-stats .gr-today b { color: var(--amber); }
.gr-audience { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.gr-del-modal { max-width: 520px; padding: 20px 22px; }
.gr-del-modal h3 { margin: 0 0 10px; }
.gr-del-modal ul { margin: 0 0 10px; padding-left: 20px; }
@media (max-width: 560px) { .gr-list { grid-template-columns: minmax(0,1fr); } }

/* ---- Tổng quan Group (views/group-overview.js) ---- */
.go-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; align-items: start; }
.go-summary { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--fs-base); color: var(--muted); }
.go-summary b { color: var(--text); }
.go-card { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.go-card.current { border-color: rgba(224,168,62,.55); }
.go-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.go-name { font-size: var(--fs-md); font-weight: 700; margin-right: auto; min-width: 0; overflow-wrap: anywhere; }
.go-pill { display: inline-flex; align-items: center; font-size: var(--fs-xs); font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; border: 1px solid var(--line); }
.go-pill.ok { background: rgba(78,165,111,.18); color: var(--ok); border-color: rgba(78,165,111,.4); }
.go-pill.todo { background: rgba(224,168,62,.18); color: var(--amber); border-color: rgba(224,168,62,.45); }
.go-pill.warn { background: rgba(255,120,80,.14); color: #ffb08f; border-color: rgba(255,120,80,.4); }
.go-sub { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.go-due { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 10px; background: rgba(255,255,255,.04); color: var(--text); text-decoration: none; min-width: 0; }
.go-due:hover { background: rgba(255,255,255,.08); }
.go-due.later { opacity: .75; }
.go-thumb { width: 48px; height: 60px; flex: 0 0 48px; object-fit: cover; border-radius: 6px; background: var(--panel); }
.go-thumb-empty { display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-lg); }
.go-due-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.go-due-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.go-empty { font-size: var(--fs-base); color: var(--muted); }
.go-later summary { cursor: pointer; font-size: var(--fs-sm); color: var(--muted); margin-bottom: 8px; }
.go-later { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 560px) { .go-list { grid-template-columns: minmax(0,1fr); } }
/* 2 chế độ Tổng quan Group (24/9/2026 khuya): thẻ số 4 ô (2 cột ≤600 như .kpi-grid) · biểu đồ 2 cột · 2 cột thẻ nội dung (≤1040 1 cột) */
.go-stats { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--fs-base); color: var(--muted); }
.go-stats b { color: var(--text); }
.go-warn { color: #ffb08f; }
.go-error { border-color: rgba(255,120,80,.45); margin-bottom: 16px; font-size: var(--fs-base); }
.go-cols { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; margin-bottom: 16px; align-items: start; }
.go-cols > .card { margin: 0; }
.go-post { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px; border-radius: 10px; background: rgba(255,255,255,.03); }
.go-metrics { font-size: var(--fs-sm); color: var(--text); }
.go-cover { width: 100%; max-height: 180px; object-fit: cover; border-radius: 10px; }
.go-info-rows { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px 16px; }
.go-info-rows > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
@media (max-width: 1040px) { .go-cols { grid-template-columns: minmax(0,1fr); } }

/* ---- Form các tab trang Sửa Group (views/groups.js) — lưới 2 cột như form Fanpage, sập 1 cột ở 1040 ---- */
.gp-form { display: flex; flex-direction: column; gap: 16px; }
.gp-form .card { margin: 0; }
.gp-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 16px; align-items: start; }
.gp-grid > * { min-width: 0; }
.gp-col { display: flex; flex-direction: column; gap: 16px; } /* cột phải: 2 thẻ xếp dọc (chỉ wrapper, không áp lên thẻ — thẻ tự giãn theo margin của .field) */
.gp-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; max-width: 420px; }
.gp-readonly { margin: 0 0 12px; }
.gr-danger { border-color: rgba(255,120,120,.35); }
.gp-themes { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.gp-theme { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.gp-theme-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.gp-theme-acts { display: flex; gap: 4px; flex: 0 0 auto; }
@media (max-width: 1040px) { .gp-grid { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 560px) { .gp-theme { flex-direction: column; align-items: stretch; } .gp-theme-acts { align-self: flex-end; } } /* stretch: xếp dọc mà giữ flex-start thì ô nhập co theo nội dung */

/* ---- Viết truyện (views/group-write.js): kết quả = từng part 1 hàng ảnh nhỏ + câu trên ảnh ---- */
.gw-result { margin-top: 18px; }
.gw-parts { display: flex; flex-direction: column; gap: 12px; }
.gw-part { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.gw-thumb { width: 96px; height: 120px; flex: 0 0 96px; object-fit: cover; border-radius: 8px; background: var(--panel); }
.gw-thumb-empty { display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); color: var(--muted); text-align: center; }
.gw-part-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gw-overlay { font-weight: 600; overflow-wrap: anywhere; }

/* ---- Công tắc KHU làm việc ở đầu menu (app.js paintWsSwitch): 2 nút dính liền, khu đang chọn nền xanh ---- */
.ws-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 0 12px; border-radius: 12px; background: var(--panel); }
.ws-btn { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; border-radius: 9px; color: var(--muted); text-decoration: none; font-size: var(--fs-base); font-weight: 600; }
.ws-btn:hover { color: var(--text); background: rgba(255,255,255,.06); }
.ws-btn.active { background: var(--green); color: #fff; }
.bottom-nav a.bnav-ws { border-left: 1px solid rgba(255,255,255,.12); border-radius: 0; }

/* ===== Thư viện nhạc (views/music.js) — bố cục THƯ VIỆN kiểu Media Library WordPress (11/10/2026 tối) =====
 * Lưới thẻ bìa màu + dạng sóng ⇄ danh sách; ngăn kéo chi tiết (tpl-drawer thu về 480px); thanh nghe dính đáy; kéo thả file vào trang. */
.ml-page { position: relative; }
.ml-page.with-player { padding-bottom: 84px; } /* chừa chỗ thanh nghe — thẻ cuối không bị che */
.ml-main { display: flex; flex-direction: column; gap: 12px; }
.ml-main .filter-bar input[type=search] { flex: 1 1 220px; min-width: 0; }
.ml-summary { font-size: var(--fs-xs); font-weight: 600; }
.ml-empty { padding: 24px 4px; }
.ml-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border-radius: 10px; background: rgba(224, 168, 62, .1); border: 1px solid rgba(224, 168, 62, .35); font-size: var(--fs-sm); font-weight: 600; }
.ml-bulk > span { margin-right: auto; }
.ml-more { display: flex; justify-content: center; padding-top: 6px; }

/* Vùng tải lên: hiện khi bấm nút đầu trang, khi đang tải, hoặc khi kéo file vào trang */
.ml-drop {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 26px 18px; margin-bottom: 16px; border-radius: var(--radius);
  border: 2px dashed rgba(224, 168, 62, .45); background: rgba(224, 168, 62, .05);
}
.ml-page.ml-dragging .ml-drop { border-color: var(--amber); background: rgba(224, 168, 62, .14); } /* JS bỏ `hidden` lúc kéo file vào trang */
.ml-drop-icon { font-size: var(--fs-4xl); line-height: 1; color: var(--amber); }
.ml-drop-title { font-size: var(--fs-md); font-weight: 700; }
.ml-drop-sub { font-size: var(--fs-xs); color: var(--muted); }
.ml-drop-note { font-size: var(--fs-sm); color: var(--amber); font-weight: 600; min-height: 1em; }

/* Dạng sóng: 2 lớp chồng, lớp sáng cắt theo --prog */
.ml-wave { position: relative; height: 40px; --prog: 0%; }
.ml-wave > div { position: absolute; inset: 0; }
.ml-wave svg { width: 100%; height: 100%; display: block; }
.ml-wave-base svg { fill: rgba(255, 255, 255, .38); }
.ml-wave-on { clip-path: inset(0 calc(100% - var(--prog)) 0 0); }
.ml-wave-on svg { fill: #fff; }
.ml-wave.sm { height: 28px; }
.ml-wave.lg { height: 72px; cursor: pointer; }

/* Lưới thẻ */
.ml-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.ml-tile { min-width: 0; cursor: pointer; border-radius: 12px; padding: 6px; margin: -6px; outline: none; }
.ml-tile:hover, .ml-tile:focus-visible { background: rgba(255, 255, 255, .05); }
.ml-cover { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; display: flex; align-items: center; padding: 0 10px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.ml-cover .ml-wave { flex: 1; }
.ml-tile.playing .ml-cover, .ml-tile.selected .ml-cover { box-shadow: inset 0 0 0 2px var(--amber); }
.ml-cover-play {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: var(--fs-base); line-height: 1;
  background: var(--amber); color: #3a2c07; box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
  opacity: 0; transform: scale(.85); transition: opacity .15s, transform .15s;
}
.ml-tile:hover .ml-cover-play, .ml-tile:focus-visible .ml-cover-play, .ml-tile.playing .ml-cover-play { opacity: 1; transform: scale(1); }
@media (hover: none) { .ml-cover-play { opacity: .92; transform: scale(.8); } } /* điện thoại không rê chuột — nút luôn hiện */
.ml-cover-play.big { position: static; margin: 0; opacity: 1; transform: none; flex: 0 0 auto; width: 52px; height: 52px; }
.ml-dur, .ml-pin { position: absolute; bottom: 6px; padding: 1px 6px; border-radius: 6px; background: rgba(0, 0, 0, .55); font-size: var(--fs-2xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.ml-dur { right: 6px; }
.ml-pin { left: 6px; color: var(--amber); }
.ml-check { position: absolute; top: 6px; left: 6px; width: 22px; height: 22px; border-radius: 6px; border: 2px solid rgba(255, 255, 255, .7); background: rgba(0, 0, 0, .35); display: flex; align-items: center; justify-content: center; font-size: var(--fs-2xs); font-weight: 800; }
.ml-check.on { background: var(--amber); border-color: var(--amber); color: #3a2c07; }
.ml-tile-name { margin-top: 8px; font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Danh sách */
.ml-list { display: flex; flex-direction: column; }
.ml-item { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 10px; cursor: pointer; outline: none; border-top: 1px solid var(--line); }
.ml-item:first-child { border-top-color: transparent; }
.ml-item:hover, .ml-item:focus-visible { background: rgba(255, 255, 255, .05); }
.ml-item.playing, .ml-item.selected { background: rgba(224, 168, 62, .1); }
.ml-item .ml-check { position: static; flex: 0 0 auto; }
.ml-item-cover { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.ml-item-play { width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer; background: rgba(0, 0, 0, .45); color: #fff; font-size: var(--fs-2xs); }
.ml-item-main { flex: 1 1 auto; min-width: 0; }
.ml-item-name { font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.ml-item-meta { font-size: var(--fs-2xs); color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ml-item-pin { color: var(--amber); }
.ml-item .ml-wave { flex: 0 1 220px; min-width: 80px; cursor: pointer; }
.ml-item .ml-wave-base svg { fill: rgba(255, 255, 255, .22); }
.ml-item .ml-wave-on svg { fill: var(--amber); }
@media (max-width: 600px) { .ml-item .ml-wave { display: none; } }

/* Ngăn kéo chi tiết: tpl-drawer dùng chung rộng 960px — chi tiết 1 bài nhạc chỉ cần cột hẹp */
.tpl-drawer:has(.ml-detail) { width: min(480px, 100%); }
.ml-detail-title { overflow-wrap: anywhere; font-weight: 700; }
.ml-detail { display: flex; flex-direction: column; gap: 16px; }
.ml-detail-cover { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 12px; }
.ml-detail-cover .ml-wave { flex: 1; }
.ml-detail-name { display: flex; gap: 8px; }
.ml-detail-name input { flex: 1; min-width: 0; }
.ml-detail-meta { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: var(--fs-sm); }
.ml-detail-meta dt { color: var(--muted); }
.ml-detail-meta dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ml-detail-meta .mono { font-family: var(--font-mono); font-size: var(--fs-xs); }
.ml-detail-pages { display: flex; flex-wrap: wrap; gap: 6px; }
.ml-detail-use { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; border-radius: 10px; background: rgba(255, 255, 255, .04); }
.ml-detail-danger { padding-top: 12px; border-top: 1px solid var(--line); }

/* Thanh nghe dính đáy — nổi giữa vùng nội dung, trên bottom nav điện thoại (--bottom-inset) */
.ml-player {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--bottom-inset) + 12px); z-index: var(--z-action-bar);
  width: min(760px, calc(100% - 24px)); display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-radius: 14px; background: rgba(13, 22, 17, .94); border: 1px solid var(--line); box-shadow: 0 8px 28px rgba(0, 0, 0, .5);
  backdrop-filter: blur(12px);
}
.ml-player-btn { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: none; background: transparent; color: var(--text); cursor: pointer; font-size: var(--fs-sm); }
.ml-player-btn:hover { background: rgba(255, 255, 255, .08); }
.ml-player-toggle { background: var(--amber); color: #3a2c07; width: 40px; height: 40px; } /* KHÔNG đặt tên class `main`: trùng .main khung nội dung app (padding 18/14/90px) → nút phình cao 108px */
.ml-player-cover { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 8px; }
.ml-player-mid { flex: 0 1 200px; min-width: 0; cursor: pointer; }
.ml-player-name { font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-player-time { font-size: var(--fs-2xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.ml-player-wave { flex: 1 1 auto; min-width: 0; cursor: pointer; }
.ml-player-wave .ml-wave-base svg { fill: rgba(255, 255, 255, .22); }
.ml-player-wave .ml-wave-on svg { fill: var(--amber); }
@media (max-width: 600px) {
  .ml-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ml-player-wave, .ml-player-cover { display: none; }
  .ml-player-mid { flex: 1 1 auto; }
}