:root {
  --bg: #101613;
  --panel: #141b16;
  --panel2: #182119;
  --border: #243529;
  --text: #e9f2ec;
  --muted: #93a89b;
  --teal: #2dd4bf;
  --copper: #d99a5b;
  --good-bg: #213a30;
  --good-tx: #5be49b;
  --bad-bg: #3d2b31;
  --bad-tx: #ff7b7b;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
}
a { color: var(--teal); text-decoration: none; }
header.topbar {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 12px 20px; background: var(--panel); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
header.topbar .brand { font-weight: 700; font-size: 16px; color: var(--text); }
header.topbar .brand span { color: var(--teal); }
nav.mainnav { display: flex; gap: 6px; }
nav.mainnav a {
  padding: 6px 12px; border-radius: 8px; color: var(--muted); font-weight: 600;
}
nav.mainnav a:hover { background: var(--panel2); color: var(--text); }
main { padding: 18px 20px 40px; max-width: 1440px; margin: 0 auto; }
h1 { font-size: 20px; margin: 4px 0 4px; }
.sub { color: var(--muted); margin-bottom: 14px; }
.panel {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; margin-bottom: 16px;
}
.panel h2 { font-size: 15px; margin: 0 0 12px; color: var(--text); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-bottom: 16px; }
/* Thẻ Tổng quan: 3 hàng 5 + 4 + 4 như Looker */
.cards5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 10px; }
.cards4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 10px; }
.cards-last { margin-bottom: 16px; }
@media (max-width: 1100px) { .cards5, .cards4 { grid-template-columns: repeat(2, 1fr); } }
.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px;
}
.card-label { color: var(--muted); font-size: 12px; letter-spacing: .2px; }
.card-value { font-size: 20px; font-weight: 700; margin: 4px 0 2px; }
.card-delta { font-size: 12px; }
/* Delta kiểu Looker: chữ màu tốt/xấu, KHÔNG pill/nền */
.delta { font-weight: 600; white-space: nowrap; }
.delta.good { color: var(--good-tx); }
.delta.bad { color: var(--bad-tx); }
.delta.neu { color: var(--muted); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 7px 9px; border-bottom: 1px solid var(--border); text-align: right; }
th { color: var(--muted); font-weight: 600; white-space: nowrap; }
td:first-child, th:first-child { text-align: left; }
/* ==== Màu bảng: MỘT scheme phẳng .ftable dùng chung cho CẢ BA bảng
   (nhân sự, miền ở Tổng quan + Cơ sở & Zone) — theo lệnh Sếp 04/11/2026.
   Các cơ chế cũ đều đã loại: heatmap alpha phủ nền tối (màu xỉn/nâu),
   gradient màu đặc theo cột (nhức mắt). ==== */
table.mtable th, table.mtable td { border-bottom: 1px solid rgba(255,255,255,0.06); }
table.mtable thead th { background: rgba(255,255,255,0.06); color: #c9d4cc; }
table.mtable td:first-child { color: #f4f8f5; }
/* .ftable — scheme phẳng: KHÔNG màu theo cột, KHÔNG heatmap, KHÔNG gradient.
   Thân bảng nền #2C2F38 đồng nhất mọi ô, kẻ ngang mảnh tối phân cách dòng;
   tiêu đề #263238 chữ trắng + đường cam mảnh ngay bên dưới; viền cam mảnh
   bao quanh cả bảng; KẺ DỌC mảnh rgba(255,255,255,0.09) giữa các cột (áp
   cho tiêu đề, dòng thường, dòng Tổng Zone và dòng Tổng toàn quốc).
   Riêng bảng cơ sở có dòng Tổng Zone: nền #434343, TOÀN BỘ chữ cam #F59E52
   in đậm, viền cam mảnh trên/dưới dòng; dòng Tổng toàn quốc: nền cam đặc
   #F59E52 phủ kín, chữ ĐEN in đậm (hai bảng Tổng quan không có dòng tổng).
   Class phụ .wfix (chỉ bảng cơ sở): table-layout fixed + colgroup tỉ lệ
   % chốt trong co-so/page.tsx. */
table.ftable { border: 1px solid #F59E52; }
table.ftable th, table.ftable td {
  border-bottom: 1px solid rgba(0,0,0,0.35);
  border-left: 1px solid rgba(255,255,255,0.09);
}
table.ftable th:first-child, table.ftable td:first-child { border-left: none; }
table.ftable.wfix { table-layout: fixed; }
table.ftable thead th {
  background: #263238; color: #fff; font-weight: 700; text-align: center;
  border-bottom: 1px solid #F59E52;
}
table.ftable thead th:first-child { text-align: left; }
table.ftable tbody td { background: #2C2F38; }
table.ftable td:first-child { color: #fff; }
table.ftable tr.zone td {
  background: #434343; color: #F59E52; font-weight: 700;
  border-top: 1px solid #F59E52; border-bottom: 1px solid #F59E52;
}
table.ftable tr.total td { background: #F59E52; color: #000; font-weight: 700; }
/* Khép khung cạnh dưới (lệnh Sếp 04/11/2026): với border-collapse, viền
   dưới của ô dòng cuối (rgba(0,0,0,0.35)) thắng viền cam của thẻ table
   nên hai bảng Tổng quan trông như thiếu cạnh dưới. Ép border-bottom
   của dòng cuối thành cam #F59E52 cho mọi bảng .ftable — ở bảng cơ sở
   dòng cuối là Tổng toàn quốc nền cam sẵn nên liền mạch, không đổi hình.
   CHỐT :last-of-type (05/11/2026): bảng Post trang 4 có NHIỀU tbody (mỗi
   post một <tbody class="postgroup">) — chỉ tbody CUỐI mới khép cạnh
   dưới cam, các tbody giữa giữ viền ngăn dòng thường. */
table.ftable tbody:last-of-type tr:last-child td { border-bottom: 1px solid #F59E52; }
/* Tô đỏ/xanh DÒNG CƠ SỞ theo chênh Tiến độ KPI so với mốc toàn quốc (quy
   tắc Looker, chốt 04/11/2026 — class do co-so/page.tsx gán, chỉ dòng cơ
   sở): màu nằm chủ yếu ở CHỮ — xanh lá nhạt tông mint #7ee2a8 khi chênh
   ≥ +10 điểm %, đỏ hồng nhạt tông salmon #ffa4a4 khi chênh ≤ −10 điểm % —
   kèm nền pha cùng tông rất nhẹ (alpha 0,07). Không áp dòng zone/total. */
table.ftable tr.prog-good td { background: rgba(126, 226, 168, 0.07); color: #7ee2a8; }
table.ftable tr.prog-bad td { background: rgba(255, 164, 164, 0.07); color: #ffa4a4; }
td.good { background: var(--good-bg); color: var(--good-tx); }
td.bad { background: var(--bad-bg); color: var(--bad-tx); }
td.good, td.bad { font-weight: 600; }
form.filters { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin-bottom: 16px; }
form.filters label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 12px; }
/* Đầu trang kiểu Looker: tiêu đề trái, MỘT control chọn ngày ở phía trên bên phải */
.pagehead { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.pagehead h1 { margin: 6px 0 0; }
form.filters.topctl {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 0;
}
.foot-note { color: var(--muted); font-size: 12px; margin-top: 2px; }
/* Bảng MKT (Tổng quan) + bảng Cơ sở: tiêu đề cột số căn giữa, cột đầu căn trái */
table.mtable th { text-align: center; }
table.mtable th:first-child { text-align: left; }
.legend i.line { height: 3px; width: 16px; border-radius: 2px; vertical-align: middle; }
input[type="date"], input[type="month"], input[type="text"], select {
  background: var(--panel2); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 9px; font-size: 13px; color-scheme: dark;
}
/* Trang So sánh nhanh: 3 nhóm điều khiển + màu nhóm cột bảng trộn (khớp Looker).
   Hàng điều khiển và bảng trộn dùng CHUNG một lưới 6 cột trong cùng panel:
   Chỉ số 18% | Kỳ chọn 17% | SS1 19% | Tỉ lệ % 11% | SS2 20% | Tỉ lệ % 15%.
   Nhóm "Kỳ chọn" phủ cột 1–2, "Kỳ so sánh 1" phủ cột 3–4, "Kỳ so sánh 2" phủ cột 5–6
   (nút "So sánh" nằm trong nhóm SS2) — các nhóm nằm đúng phía trên nhóm cột tương ứng. */
form.cmp-controls {
  display: grid;
  grid-template-columns: 18% 17% 19% 11% 20% 15%;
  margin-bottom: 14px;
}
.grp {
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px 12px;
  background: var(--panel);
}
.grp-chon { grid-column: 1 / 3; }
/* Mép trái hộp "Kỳ chọn" thụt đúng 17px (padding 16 + border 1 của panel)
   so với mép trái bảng trộn bên dưới — bù -17px cho riêng hộp này và nới
   bề rộng tương ứng để mép phải (và toàn bộ lưới còn lại) giữ nguyên. */
@media (min-width: 901px) {
  .grp-chon { margin-left: -17px; width: calc(100% + 17px); }
}
.grp-ss1 { grid-column: 3 / 5; background: #152a4d; border-color: #2a4a80; }
.grp-ss2 { grid-column: 5 / 7; background: #33182e; border-color: #5f2c52; }
.grp-title {
  font-weight: 700; font-size: 12px; color: var(--text);
  text-transform: uppercase; letter-spacing: .4px; margin-bottom: 8px;
}
.grp-fields { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.grp-fields label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 12px; }
@media (max-width: 900px) {
  form.cmp-controls { grid-template-columns: 1fr; }
  .grp-chon, .grp-ss1, .grp-ss2 { grid-column: 1 / -1; }
}
/* Khung viền cam mảnh đồng nhất cả 3 trang (lệnh Sếp 04/11/2026): bảng
   trộn + 3 bảng KPI của trang So sánh nhanh cũng có khung quanh bảng và
   đường cam dưới hàng tiêu đề, đúng màu/độ mảnh của bảng cơ sở (.ftable:
   1px solid #F59E52). Chỉ thêm khung — tint SS1/SS2, tô đỏ/xanh toàn
   dòng và tỉ lệ cột đã khóa giữ nguyên. */
table.mixtable { table-layout: fixed; min-width: 760px; border: 1px solid #F59E52; }
/* Tiêu đề cột số căn GIỮA như Looker; số liệu vẫn căn phải, nhãn/cột đầu căn trái */
table.mixtable th, table.kpitable th { text-align: center; }
table.mixtable th:first-child, table.kpitable th:first-child { text-align: left; }
/* Bảng trộn — tiêu đề #263238 chữ trắng, thân bảng #2C2F38, kẻ dọc mảnh
   như .ftable; riêng 2 nhóm cột Kỳ so sánh mang tint ĐỒNG BỘ với hộp điều
   khiển phía trên (lệnh Sếp 04/11/2026 — hộp + cột là cùng một khối):
   tiêu đề nhóm dùng ĐÚNG mã nền của hộp (.grp-ss1 #152a4d / .grp-ss2
   #33182e), thân bảng là tint nhạt hơn (trộn 55% màu gốc + 45% nền
   #2C2F38 → SS1 #1F2C44 / SS2 #302233), chữ số trắng vẫn đọc rõ.
   Nhóm [Chỉ số | Kỳ chọn] giữ phẳng tối. Tỉ lệ cột 18/17/19/11/20/15
   trong colgroup (so-sanh/page.tsx) GIỮ NGUYÊN để thẳng hàng với hàng
   điều khiển. */
table.mixtable thead th { background: #263238; color: #fff; font-weight: 700; border-bottom: 1px solid #F59E52; }
table.mixtable tbody td { background: #2C2F38; }
table.mixtable thead th.col-ss1 { background: #152a4d; }
table.mixtable tbody td.col-ss1 { background: #1F2C44; }
table.mixtable thead th.col-ss2 { background: #33182e; }
table.mixtable tbody td.col-ss2 { background: #302233; }
table.mixtable th, table.mixtable td { border-left: 1px solid rgba(255,255,255,0.09); }
table.mixtable th:first-child, table.mixtable td:first-child { border-left: none; }
/* Bảng KPI tháng — đồng nhất scheme phẳng + kẻ dọc + bề rộng cột cân đều
   (colgroup trong so-sanh/page.tsx), nhưng GIỮ NGUYÊN tô màu đỏ/xanh
   TOÀN DÒNG (tr.good/tr.bad bên dưới — màu ngữ nghĩa khớp Looker):
   nền phẳng chỉ áp cho hàng tiêu đề và các dòng KHÔNG tô màu. */
table.kpitable { table-layout: fixed; border: 1px solid #F59E52; }
table.kpitable thead th { background: #263238; color: #fff; font-weight: 700; border-bottom: 1px solid #F59E52; }
table.kpitable tbody tr:not(.good):not(.bad) td { background: #2C2F38; }
table.kpitable th, table.kpitable td { border-left: 1px solid rgba(255,255,255,0.09); }
table.kpitable th:first-child, table.kpitable td:first-child { border-left: none; }
/* Khép khung cạnh dưới cho bảng trộn + 3 bảng KPI (sửa dứt điểm 04/11/2026,
   cùng cơ chế ghim dòng cuối như .ftable ở trên): với border-collapse,
   đặt `border` cho thẻ table là CHƯA ĐỦ để cạnh dưới hiện ra — border-bottom
   của td ở dòng cuối (màu --border tối, từ rule th/td chung) thắng viền cam
   của thẻ table nên khung trông như thiếu cạnh dưới. Bắt buộc ép
   border-bottom cam #F59E52 cho td của dòng cuối trong tbody. */
table.mixtable tbody tr:last-child td,
table.kpitable tbody tr:last-child td { border-bottom: 1px solid #F59E52; }
/* Tô màu toàn dòng bảng KPI tháng (trang So sánh nhanh) */
tr.good td { background: var(--good-bg); color: var(--good-tx); }
tr.bad td { background: var(--bad-bg); color: var(--bad-tx); }
button.apply {
  background: var(--teal); color: #06231e; border: 0; border-radius: 8px;
  padding: 8px 16px; font-weight: 700; cursor: pointer;
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1100px) { .grid2, .grid3 { grid-template-columns: 1fr; } }
.loading { padding: 40px 20px; color: var(--muted); }
.legend { display: flex; gap: 16px; color: var(--muted); font-size: 12px; margin-top: 8px; flex-wrap: wrap; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; }
.note { color: var(--muted); font-size: 12px; margin-top: 8px; }
.scrollx { overflow-x: auto; }
/* Tooltip hover biểu đồ kiểu Looker (lệnh Sếp 04/11/2026): mỗi hạng mục là
   một <g class="tipg"> gồm rect .tip-guide phủ cả slot (vừa là vùng hover
   vừa là vệt sáng mờ khi hover) + hộp .chart-tip (component ChartTip trong
   lib/ui.tsx). Thuần CSS :hover — chạm trên cảm ứng cũng kích hoạt :hover. */
.tip-guide { fill: #ffffff; fill-opacity: 0; }
.tipg:hover .tip-guide { fill-opacity: 0.05; }
.chart-tip { opacity: 0; pointer-events: none; transition: opacity 0.12s ease; }
.tipg:hover .chart-tip { opacity: 1; }
.chart-tip rect { fill: #1f242e; stroke: rgba(255, 255, 255, 0.16); stroke-width: 1; }
.chart-tip text { fill: #e8ecef; font-size: 12px; }
.chart-tip .tip-title { fill: #ffffff; font-weight: 700; }

/* --- Trang 4 (Hiệu quả Ads/Post) + mục Cảnh báo — bản xem trước snapshot T10/2026 --- */
.sample-banner {
  border: 1px solid #F59E52; color: #F59E52; background: rgba(245, 158, 82, 0.08);
  border-radius: 8px; padding: 8px 12px; font-size: 13px; font-weight: 600;
  margin-bottom: 14px;
}
.sample-chip {
  border: 1px solid #F59E52; color: #F59E52; border-radius: 999px;
  padding: 1px 8px; font-size: 11px; font-weight: 600; white-space: nowrap;
}
.xscroll { overflow-x: auto; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.postcell { display: flex; gap: 10px; min-width: 320px; max-width: 460px; }
.postcell img, .postthumb-empty {
  width: 54px; height: 54px; object-fit: cover; border-radius: 6px; flex: none;
  background: #1c2129;
}
.post-title { color: #fff; font-weight: 600; font-size: 12px; margin-bottom: 2px; }
.post-excerpt {
  color: var(--muted); font-size: 12px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.post-id { color: var(--muted); font-size: 11px; margin-top: 3px; }
.post-id a { color: #F59E52; }
/* KHUNG THÔNG TIN POST trong ô Post (lệnh Sếp 05/11/2026): hộp viền mảnh,
   nền tối hơn ô một bậc, ngay dưới dòng "Post {id} · Mở link bài" — 5 ô
   ngang: NGÀY ĐĂNG · TỔNG AD · LIKE · SHARE · CMT, mỗi ô nhãn nhỏ viết
   hoa ở trên + số đậm ở dưới (dữ liệu dim_post_social, xem chain_range). */
.postframe {
  display: grid; grid-template-columns: 1.32fr 0.82fr 0.95fr 0.85fr 0.85fr;
  gap: 6px; width: 100%; margin-top: 6px; padding: 6px 8px;
  background: #23262e; border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
}
.pf-cell { min-width: 0; }
.pf-cell span {
  display: block; color: #9aa3af; font-size: 9px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap;
}
.pf-cell b {
  display: block; margin-top: 1px; color: var(--text); font-size: 13px;
  font-weight: 700; white-space: nowrap;
}
/* Khối THỐNG KÊ AD trong ô Post (lệnh Sếp 05/11/2026; trình bày lại cùng
   ngày cho dễ nhìn + bổ sung nút riêng): thẻ gọn nền tối hơn ô Post một
   bậc, bo góc nhẹ, nằm trong <details class="statdetail"> NGAY TRÊN nút
   "Xem N ad của post" và mặc định ĐÓNG. Bốn cụm có tiêu đề riêng: THEO C2
   (thanh xếp chồng 4 màu + chú thích) · VÒNG ĐỜI (4 ô số) · NHÂN BẢN (ô số
   gốc/mới + nhãn kết luận có màu + pill các đợt) · CHI PHÍ TỚI MỐC C2
   (3 hộp nối bằng mũi tên). */
details.statdetail { margin-top: 5px; width: 100%; }
details.statdetail summary {
  cursor: pointer; list-style: none; display: inline-flex; gap: 5px;
  align-items: center; color: #F59E52; font-size: 12px; font-weight: 600;
  border: 1px solid rgba(245, 158, 82, 0.55); border-radius: 6px;
  padding: 2px 8px; background: rgba(245, 158, 82, 0.08);
}
details.statdetail summary::-webkit-details-marker { display: none; }
details.statdetail .statdetail-tri { transition: transform 0.15s ease; font-size: 11px; }
details.statdetail[open ] .statdetail-tri { transform: rotate(90deg); }
details.statdetail .statdetail-open { display: none; }
details.statdetail[open ] .statdetail-open { display: inline; }
details.statdetail[open ] .statdetail-closed { display: none; }
details.statdetail:not([open ]) .poststats { display: none; }
.poststats {
  width: 100%; margin-top: 7px; padding: 10px; font-size: 11px;
  line-height: 1.4; color: var(--muted); background: #262a32;
  border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 10px;
}
.poststats b { color: var(--text); font-weight: 700; }
.stats-section + .stats-section { margin-top: 11px; }
.stats-heading {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 6px; color: #9aa3af; font-size: 10px;
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.stats-total { color: var(--muted); letter-spacing: 0; text-transform: none; }
.c2bar {
  display: flex; width: 100%; height: 8px; overflow: hidden;
  border-radius: 999px; background: #171a20;
}
.c2seg { display: block; height: 100%; flex: none; }
.c2seg.c2-0, .stats-dot.c2-0 { background: #ffa4a4; }
.c2seg.c2-1, .stats-dot.c2-1 { background: #f5c542; }
.c2seg.c2-2, .stats-dot.c2-2 { background: #7cc4ff; }
.c2seg.c2-ge3, .stats-dot.c2-ge3 { background: #7ee2a8; }
.c2legend {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px; margin-top: 6px;
}
.c2legend-item { min-width: 0; }
.c2legend-label {
  display: flex; align-items: center; gap: 4px; color: #c7ced6;
  font-size: 10px; white-space: nowrap;
}
.stats-dot { width: 7px; height: 7px; border-radius: 999px; flex: none; }
.c2legend-value { display: flex; align-items: baseline; gap: 4px; margin-top: 1px; }
.c2legend-value b { font-size: 13px; }
.c2legend-value span { font-size: 10px; }
.stats-chips {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
}
.stats-chips.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat-chip {
  min-width: 0; padding: 6px 4px; text-align: center; background: #23262E;
  border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 8px;
}
.stat-chip b { display: block; font-size: 15px; line-height: 1.15; }
.stat-chip span { display: block; margin-top: 2px; font-size: 10px; line-height: 1.2; }
.clone-counts .stat-chip {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 7px 9px; text-align: left;
}
.clone-counts .stat-chip span { margin-top: 0; }
.clone-counts .stat-chip b { display: inline; }
.clone-verdict {
  margin-top: 7px; padding: 7px 8px; border-radius: 8px;
  font-size: 11px; font-weight: 700; line-height: 1.3; text-align: center;
}
.clone-verdict.bad {
  color: #ffb1b1; background: rgba(255, 164, 164, 0.13);
  border: 1px solid rgba(255, 164, 164, 0.35);
}
.clone-verdict.good {
  color: #8be9b5; background: rgba(126, 226, 168, 0.12);
  border: 1px solid rgba(126, 226, 168, 0.35);
}
.clone-verdict.neutral {
  color: #f5cf6b; background: rgba(245, 197, 66, 0.11);
  border: 1px solid rgba(245, 197, 66, 0.32);
}
.clone-compare { margin-top: 7px; }
.clone-compare-row {
  display: grid; grid-template-columns: 1.15fr 0.9fr 0.9fr; gap: 6px;
  align-items: baseline; padding: 2px 0;
}
.clone-compare-row > span:first-child { color: #c7ced6; }
.clone-compare-row > :not(:first-child) { text-align: right; }
.clone-compare-row b { font-size: 11px; font-weight: 600; }
.clone-compare-head {
  color: #9aa3af; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.clone-waves { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.wave-pill {
  padding: 2px 7px; color: #d7dde5; background: #23262E;
  border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 999px;
  font-size: 10px; line-height: 1.35; white-space: nowrap;
}
.stats-more { align-self: center; font-size: 10px; }
/* Bảng HIỆU QUẢ TỪNG ĐỢT TẠO trong cụm Nhân bản (lệnh Sếp tối
   05/11/2026): mỗi đợt tạo của post một dòng, số căn phải, chữ 11px;
   đợt Giá C2 tốt nhất (trong các đợt ≥3 ad) nền mint nhẹ, tệ nhất nền
   salmon nhẹ, kèm chấm màu ở ô Đợt; đợt gốc có nhãn "Gốc" viền cam. */
.wavetable { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 11px; }
.wavetable th, .wavetable td { padding: 2px 3px; white-space: nowrap; }
.wavetable thead th {
  color: #9aa3af; font-size: 10px; font-weight: 700; text-align: right;
  text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.wavetable thead th:first-child { text-align: left; }
.wavetable tbody td {
  color: #d7dde5; text-align: right;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.wavetable tbody td:first-child { text-align: left; }
.wavetable tbody tr:last-child td { border-bottom: none; }
.wavetable tbody tr.wv-best td { background: rgba(126, 226, 168, 0.1); }
.wavetable tbody tr.wv-worst td { background: rgba(255, 164, 164, 0.1); }
.wv-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 999px;
  margin-right: 4px; vertical-align: 1px;
}
.wv-dot.best { background: #7ee2a8; }
.wv-dot.worst { background: #ffa4a4; }
.wv-orig {
  margin-left: 5px; padding: 0 5px; color: #F59E52; font-size: 9px;
  font-weight: 700; border: 1px solid rgba(245, 158, 82, 0.5);
  border-radius: 999px; vertical-align: 1px;
}
.wave-verdict { margin-top: 7px; color: var(--text); font-size: 11px; line-height: 1.45; }
.cost-flow {
  display: grid; grid-template-columns: 1fr 14px 1fr 14px 1fr;
  align-items: center; gap: 3px;
}
.cost-box {
  min-width: 0; padding: 6px 3px; text-align: center; background: #23262E;
  border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 8px;
}
.cost-box span { display: block; color: #c7ced6; font-size: 10px; }
.cost-box b { display: block; margin-top: 2px; font-size: 12px; white-space: nowrap; }
.cost-box small { display: block; margin-top: 1px; color: var(--muted); font-size: 10px; }
.cost-arrow { color: #9aa3af; font-size: 13px; text-align: center; }
/* --- Trang 4: chi tiết ad lồng dưới dòng post (lệnh Sếp 05/11/2026 —
   bảng Ad riêng đã gộp vào bảng Post; pattern này dựng đầu tiên cho
   trang 5 "Theo MKT", tối 05/11 trang 5 bị xoá và gộp vào trang 4 nên
   nay chỉ còn trang 4 dùng). Nút mở là <details>/<summary> thuần HTML
   trong ô Post, CSS :has() hiện/ẩn khi details mở.
   Tối 05/11/2026 (lệnh Sếp tiếp): BỎ hẳn bảng con riêng 9 cột — mỗi ad
   là MỘT HÀNG <tr class="adrow"> trong CÙNG bảng Post, đủ 13 ô thẳng
   cột với hàng post. Mỗi post gói trong <tbody class="postgroup"> gồm
   hàng post + các hàng ad; hàng ad mặc định ẩn, hiện khi tbody có
   details[open]. Nội dung ad nằm sẵn trong HTML nên kiểm chứng được
   không cần JS. --- */
details.addetail { margin-top: 5px; }
details.addetail summary {
  cursor: pointer; list-style: none; display: inline-flex; gap: 5px;
  align-items: center; color: #F59E52; font-size: 12px; font-weight: 600;
  border: 1px solid rgba(245, 158, 82, 0.55); border-radius: 6px;
  padding: 2px 8px; background: rgba(245, 158, 82, 0.08);
}
details.addetail summary::-webkit-details-marker { display: none; }
details.addetail .addetail-tri { transition: transform 0.15s ease; font-size: 11px; }
details.addetail[open ] .addetail-tri { transform: rotate(90deg); }
details.addetail .addetail-open { display: none; }
details.addetail[open ] .addetail-open { display: inline; }
details.addetail[open ] .addetail-closed { display: none; }
/* Hàng ad trong bảng Post: mặc định ẩn; hiện khi <tbody class="postgroup">
   của post chứa details.addetail đang mở. Hàng ad dùng CHUNG colgroup
   .posttable với hàng post nên thẳng cột tuyệt đối (cùng một bảng). */
table.ftable tbody.postgroup tr.adrow { display: none; }
table.ftable tbody.postgroup:has(details.addetail[open ]) tr.adrow { display: table-row; }
/* Phân cấp thị giác: nền tối hơn hàng post một bậc (#2C2F38 -> #23262E),
   nội dung ô Post thụt vào 18px. Bề rộng/vị trí cột KHÔNG đổi. */
table.ftable tr.adrow > td { background: #23262E; }
.adcell { margin-left: 18px; }
.adrow-name { color: #fff; font-size: 12px; }
/* --- Trang 4: KHÓA bề rộng cột bảng Post (lệnh Sếp 05/11/2026 — bấm mở
   chi tiết ad thì vị trí/định dạng các cột bên trên phải giữ nguyên,
   không lệch cột). Bảng Post dùng table-layout: fixed + colgroup % chốt
   trong ads-post/page.tsx: bề rộng cột chỉ theo bề rộng bảng, KHÔNG theo
   nội dung bất kỳ dòng nào — hàng ad hiện/ẩn không còn khả năng kéo cột.
   Class .posttable áp cho bảng Post trang 4 (trước đây là trang 5, đã
   gộp); các bảng .ftable khác giữ nguyên layout tự động.
   min-width 1100px: ở màn hẹp .xscroll cuộn cả bảng thay vì bóp cột
   (ô Post vốn cần tối thiểu ~338px cho .postcell). --- */
table.ftable.posttable { table-layout: fixed; min-width: 1100px; }
/* Trang 4: mọi ô của bảng Post (hàng post + hàng ad) DỒN LÊN TRÊN —
   lệnh Sếp 05/11/2026: khi mở thẻ thống kê / chi tiết ad làm hàng post
   cao lên, số liệu các cột còn lại (Angle, MKT, Me, C2... ROAS) phải
   dính đỉnh hàng, thẳng hàng với tiêu đề post, khoảng trống dồn xuống
   dưới — không căn giữa theo chiều dọc. */
table.ftable.posttable td { vertical-align: top; }
h3.alert-group { font-size: 13px; margin: 16px 0 8px; color: var(--text); }
h3.alert-group:first-of-type { margin-top: 4px; }
.alert-list { max-height: 560px; overflow-y: auto; }
.alert-item {
  display: flex; gap: 8px; align-items: baseline; padding: 6px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 13px;
}
.alert-item:last-child { border-bottom: none; }
.sev {
  flex: none; font-size: 11px; font-weight: 700; line-height: 1.5;
  padding: 0 7px; border-radius: 999px; border: 1px solid;
}
.sev.do { color: #ff7b7b; border-color: #ff7b7b; background: rgba(255, 123, 123, 0.12); }
.sev.vang { color: #F59E52; border-color: #F59E52; background: rgba(245, 158, 82, 0.10); }

/* --- Trang 5 (Theo MKT): bộ chọn mốc thời gian kiểu Meta Ads Manager
   (component lib/datepicker.tsx, preset ở lib/presets.ts). Panel thả xuống
   dưới nút hiển thị khoảng đang áp dụng: cột preset trái + lịch 2 tháng +
   chân khoảng đang chọn / Hủy / Cập nhật. Ngày trong khoảng tô xanh nhạt,
   ngày biên tô đậm #1877f2 như ảnh mẫu của Sếp. --- */
.drp { position: relative; }
.drp-btn {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 14px; color: var(--text); font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.drp-btn:hover { border-color: #36543f; }
.drp-caret { color: var(--muted); font-size: 11px; }
.drp-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
  width: 680px; max-width: 94vw;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}
.drp-main { display: flex; gap: 18px; }
.drp-presets {
  display: flex; flex-direction: column; gap: 2px; flex: none;
  min-width: 172px; padding-right: 14px; border-right: 1px solid var(--border);
}
.drp-preset {
  text-align: left; background: none; border: 0; border-radius: 6px;
  color: var(--muted); font-size: 13px; font-weight: 600;
  padding: 7px 10px; cursor: pointer; white-space: nowrap;
}
.drp-preset:hover { background: var(--panel2); color: var(--text); }
.drp-preset.active { background: rgba(24, 119, 242, 0.16); color: #8ab8ff; }
.drp-cals {
  display: flex; gap: 22px; flex: 1; flex-wrap: wrap;
  border-radius: 8px; padding: 2px;
}
.drp-cals.focus-cal { box-shadow: 0 0 0 1px rgba(24, 119, 242, 0.55); }
.drp-cal { width: 228px; }
.drp-cal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.drp-cal-title { font-weight: 700; font-size: 13px; }
.drp-nav {
  width: 24px; height: 24px; flex: none;
  background: var(--panel2); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); font-size: 15px; line-height: 1; cursor: pointer;
}
.drp-nav:disabled { opacity: 0.35; cursor: default; }
.drp-nav-sp { width: 24px; flex: none; }
.drp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.drp-dow span {
  text-align: center; color: var(--muted); font-size: 11px; font-weight: 700;
  padding: 3px 0;
}
.drp-day {
  background: none; border: 0; border-radius: 5px;
  color: var(--text); font-size: 12.5px; padding: 5px 0;
  text-align: center; cursor: pointer;
}
.drp-day:hover:not(:disabled) { background: var(--panel2); }
.drp-day.inrange { background: rgba(24, 119, 242, 0.18); }
.drp-day.edge { background: #1877f2; color: #fff; font-weight: 700; }
.drp-day:disabled { color: var(--muted); opacity: 0.4; cursor: default; }
.drp-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap;
  border-top: 1px solid var(--border); margin-top: 12px; padding-top: 12px;
}
.drp-range-line { font-weight: 600; font-size: 13px; }
.drp-tz { color: var(--muted); font-size: 12px; margin-top: 2px; }
.drp-actions { display: flex; gap: 8px; }
.drp-cancel {
  background: var(--panel2); color: var(--muted);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 16px; font-weight: 600; cursor: pointer;
}
.drp-apply {
  background: #F59E52; color: #1a1206; border: 0; border-radius: 8px;
  padding: 8px 16px; font-weight: 700; cursor: pointer;
}
.drp-apply:disabled { opacity: 0.5; cursor: default; }
@media (max-width: 760px) {
  .drp-panel {
    position: fixed; left: 8px; right: 8px; top: 60px; width: auto;
    max-height: 86vh; overflow-y: auto;
  }
  .drp-main { flex-direction: column; }
  .drp-presets {
    flex-direction: row; flex-wrap: wrap; min-width: 0;
    padding-right: 0; padding-bottom: 10px;
    border-right: none; border-bottom: 1px solid var(--border);
  }
}

/* --- Điều hướng: SIDEBAR DỌC BÊN TRÁI (Sếp chốt tối 04/11/2026, thay thanh ngang cũ) --- */
.sidebar {
  position: fixed; left: 0; top: 0; bottom: 0; width: 228px; z-index: 20;
  background: var(--panel); border-right: 1px solid var(--border);
  padding: 16px 12px; display: flex; flex-direction: column;
}
.side-brand {
  font-weight: 700; font-size: 16px; color: var(--text);
  padding: 2px 8px 14px; margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.side-brand span { color: var(--teal); }
nav.sidenav { display: flex; flex-direction: column; gap: 2px; }
.sidenav-link {
  display: block; padding: 9px 12px; border-radius: 8px;
  color: var(--muted); font-weight: 600; white-space: nowrap;
  border-left: 3px solid transparent;
}
.sidenav-link:hover { background: var(--panel2); color: var(--text); }
.sidenav-link.active {
  background: rgba(245, 158, 82, 0.12); color: #F59E52;
  border-left-color: #F59E52;
}
.sidenav-link.active:hover { color: #F59E52; }
.shell main { margin: 0 0 0 228px; max-width: none; }
/* Màn hình hẹp (điện thoại): sidebar thành thanh ngang trên cùng, nav cuộn ngang */
@media (max-width: 820px) {
  .sidebar {
    position: static; width: auto; height: auto;
    border-right: none; border-bottom: 1px solid var(--border);
    padding: 10px 12px;
  }
  .side-brand { padding-bottom: 8px; margin-bottom: 8px; }
  nav.sidenav { flex-direction: row; gap: 6px; overflow-x: auto; flex-wrap: nowrap; }
  .sidenav-link {
    border-left: none; border-bottom: 3px solid transparent; flex: none;
  }
  .sidenav-link.active { border-bottom-color: #F59E52; }
  .shell main { margin: 0; }
}

/* ==== BẢN CLIENT TĨNH (bổ sung riêng, không có trong app gốc) ==== */
/* Panel thông báo các trang đang chuyển đổi ở Giai đoạn 2 */
.client-note-panel { text-align: left; }
.client-badge {
  display: inline-block; border: 1px solid #F59E52; color: #F59E52;
  background: rgba(245, 158, 82, 0.08); border-radius: 999px;
  padding: 2px 10px; font-size: 12px; font-weight: 700; margin-bottom: 10px;
}
.client-error {
  border: 1px solid var(--bad-tx); color: #ffb1b1;
  background: rgba(255, 123, 123, 0.10); border-radius: 8px;
  padding: 10px 12px; font-size: 13px; margin-bottom: 14px;
}
/* Ảnh post lỗi tải: JS thay <img> bằng ô trống .postthumb-empty như bản thật */
.postcell img.postthumb-img { background: #1c2129; }