/* Đo lường Ads — page-specific styles */

/* Zoom 85% chỉ vùng main (giữ sidebar nguyên kích thước để không phá grid layout) */
.app-main { zoom: 0.85; }

.link-back {
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 6px;
  transition: background .15s, color .15s;
}
.link-back:hover { background: var(--bg); color: var(--accent); }

/* Header */
.dl-header { padding: 20px 0 8px; }
.dl-title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  background: linear-gradient(90deg, var(--accent) 0%, #8b5cf6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dl-subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
}

/* Toolbar */
.dl-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 16px 0;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  /* Pin dưới .topbar (~48-56px) */
  position: sticky;
  top: 56px;
  z-index: 9;
}

.dl-date-presets {
  display: flex;
  gap: 4px;
  background: var(--bg);
  border-radius: 10px;
  padding: 4px;
}
.dl-preset-btn {
  border: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.dl-preset-btn:hover { color: var(--text); }
.dl-preset-btn.active {
  background: #fff;
  color: var(--accent);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
}

.dl-date-custom { display: flex; align-items: center; gap: 6px; }
.dl-date-custom input[type="date"] {
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  font-family: inherit;
  background: #fff;
}

.dl-select, .dl-input-sm {
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  background: #fff;
  font-family: inherit;
}
.dl-input-sm { width: 80px; }

.flex-grow { flex: 1; }

/* KPI grid */
.dl-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.dl-kpi {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s;
}
.dl-kpi:hover { box-shadow: var(--shadow-md); }
.dl-kpi-label { font-size: 11px; color: var(--muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }
.dl-kpi-value { font-size: 22px; font-weight: 800; margin-top: 6px; color: var(--text); }
.dl-kpi-value.blue { color: #2563eb; }
.dl-kpi-value.green { color: #059669; }
.dl-kpi-value.purple { color: #7c3aed; }
.dl-kpi-value.orange { color: #ea580c; }
.dl-kpi-value.red { color: var(--danger); }

@media (max-width: 1100px) {
  .dl-kpi-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .dl-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Verdict bar — filter chips. Pin sát dưới toolbar (top set bằng JS qua --vdb-top) */
.dl-verdict-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 14px;
  padding: 8px 0;
  flex-wrap: wrap;
  position: sticky;
  top: var(--vdb-top, 120px);
  z-index: 8;
  background: var(--bg, #f4f5f9);
  /* Mở rộng bg trùm hết viewport để che content phía sau khi sticky */
  margin-left: calc(-1 * var(--container-pad, 16px));
  margin-right: calc(-1 * var(--container-pad, 16px));
  padding-left: var(--container-pad, 16px);
  padding-right: var(--container-pad, 16px);
}
.dl-verdict-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}
.dl-verdict-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.dl-chip {
  border: 1px solid var(--border);
  background: #fff;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
}
.dl-chip:hover { border-color: var(--border-strong); color: var(--text); }
.dl-chip.active {
  background: var(--text);
  color: #fff;
  border-color: var(--text);
}
.dl-chip .chip-count {
  background: rgba(0,0,0,0.08);
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  min-width: 20px;
  text-align: center;
}
.dl-chip.active .chip-count { background: rgba(255,255,255,0.25); color: #fff; }

.dl-chip.chip-winners {
  background: linear-gradient(to right, #f59e0b, #ef4444);
  color: #fff;
  border-color: #f59e0b;
  font-weight: 700;
}
.dl-chip.chip-winners .chip-count { background: rgba(255,255,255,0.3); color: #fff; }
.dl-chip.chip-winners.active   { background: linear-gradient(to right, #d97706, #dc2626); border-color: #d97706; box-shadow: 0 0 0 2px #fde68a; }

/* Phase 2.0.6: chip filter theo FB status */
.dl-chip-divider {
  width: 1px;
  height: 24px;
  background: #e5e7eb;
  margin: 0 4px;
  display: inline-block;
}
.dl-chip.chip-fb-active        { color: #047857; border-color: #a7f3d0; }
.dl-chip.chip-fb-active.active { background: #10b981; color: #fff; border-color: #10b981; }
.dl-chip.chip-fb-paused        { color: #b91c1c; border-color: #fecaca; }
.dl-chip.chip-fb-paused.active { background: #ef4444; color: #fff; border-color: #ef4444; }

/* Empty row trong table khi filter rỗng */
.dl-table tbody tr td.dl-empty-row {
  text-align: center;
  padding: 24px;
  color: #9ca3af;
  font-style: italic;
  background: #fafbfc;
}
.dl-chip.chip-scale.active     { background: #16a34a; border-color: #16a34a; }
.dl-chip.chip-increase.active  { background: #0891b2; border-color: #0891b2; }
.dl-chip.chip-keep.active      { background: #475569; border-color: #475569; }
.dl-chip.chip-watch.active     { background: #d97706; border-color: #d97706; }
.dl-chip.chip-kill.active      { background: #dc2626; border-color: #dc2626; }

#btn-toggle-cols.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Verdict badges in table */
.verdict-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: help;
  letter-spacing: 0.02em;
}
.verdict-icon { font-size: 12px; }
.verdict-badge.v-scale    { background: #dcfce7; color: #14532d; border-color: #86efac; }
.verdict-badge.v-increase { background: #cffafe; color: #155e75; border-color: #67e8f9; }
.verdict-badge.v-keep     { background: #f1f5f9; color: #334155; border-color: #cbd5e1; }
.verdict-badge.v-watch    { background: #fef3c7; color: #78350f; border-color: #fcd34d; }
.verdict-badge.v-kill     { background: #fee2e2; color: #7f1d1d; border-color: #fca5a5; }
.verdict-badge.v-paused   { background: #1f2937; color: #f3f4f6; border-color: #1f2937; }

/* Paused row — grey out để phân biệt với active ads */
.dl-table tbody tr.row-paused td { opacity: 0.55; background: #fafbfd; }
.dl-table tbody tr.row-paused:hover td { opacity: 0.85; background: #f1f5f9; }
.dl-table tbody tr.row-paused .verdict-badge.v-paused { opacity: 1; }

/* Filter chip "Đã tắt" */
.dl-chip.chip-paused.active { background: #1f2937; border-color: #1f2937; }

/* Phase 2.5.3: chip filter ad mới (có spend) vs ad cũ (long-tail inbox) */
.dl-chip.chip-fresh        { color: #047857; border-color: #a7f3d0; }
.dl-chip.chip-fresh.active { background: #10b981; color: #fff; border-color: #10b981; }
.dl-chip.chip-archived     { color: #92400e; border-color: #fcd34d; }
.dl-chip.chip-archived.active { background: #d97706; color: #fff; border-color: #d97706; }

/* Chip "💬 Có Pancake" — màu tím giống group-header Pancake */
.dl-chip.chip-has-pancake     { color: #6d28d9; border-color: #ddd6fe; }
.dl-chip.chip-has-pancake.active { background: #7c3aed; color: #fff; border-color: #7c3aed; }

/* Breakdown nhỏ dưới số tổng (Pancake INBOX/BOOKING) */
.summary-breakdown {
  font-size: 10px;
  font-weight: 500;
  color: #047857;
  margin-top: 2px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Cột số 0 cho inbox cũ/mới: làm nhạt để chỉ nổi bật cell có giá trị */
.dl-table tbody td.num.zero-dim { color: #cbd5e1; font-weight: 400; }

/* Phase 2.5.5: 3 nút icon-only — Tắt / Bật / Scale ▾ (gọn để không che cột bên phải) */
.dl-action-cluster {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-wrap: nowrap;
}
.dl-act-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 7px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.12s;
  line-height: 1;
  min-width: 28px;
}
.dl-act-btn.dl-act-pause {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}
.dl-act-btn.dl-act-pause:hover:not(.is-disabled) {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}
.dl-act-btn.dl-act-resume {
  background: #f0fdf4;
  color: #047857;
  border-color: #a7f3d0;
}
.dl-act-btn.dl-act-resume.is-active {
  background: #d1fae5;
  color: #065f46;
  border-color: #34d399;
  animation: pulse-resume 2s infinite;
}
@keyframes pulse-resume {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.3); }
  50%      { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0); }
}
.dl-act-btn.dl-act-resume:hover:not(.is-disabled) {
  background: #16a34a;
  color: #fff;
  border-color: #16a34a;
}
.dl-act-btn.is-disabled {
  background: #f9fafb;
  color: #cbd5e1;
  border-color: #e5e7eb;
  cursor: not-allowed;
}
.dl-action-trigger.dl-act-scale {
  background: #f5f3ff;
  color: #6d28d9;
  border-color: #ddd6fe;
  font-size: 13px;
  padding: 4px 7px;
  min-width: 36px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.dl-action-trigger.dl-act-scale:hover {
  background: #ddd6fe;
  color: #5b21b6;
}
.dl-action-trigger.dl-act-scale .dl-trigger-caret { font-size: 9px; }

/* Dropdown ở row cuối → mở UP thay vì DOWN để không bị che cuối table */
.dl-action-dropdown.open-up {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 6px;
  animation: dlMenuFadeInUp 0.15s ease-out;
}
@keyframes dlMenuFadeInUp {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Table polish — wrapper có scroll RIÊNG (cả X và Y) → table không tràn body.
   Sticky thead dính top của wrapper (không phải viewport). */
/* ==================== Col Picker (Plan C Phase 1) ==================== */
.dl-colpicker { position: relative; }
.dl-colpicker-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 320px;
  max-height: 70vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 200;
  display: flex;
  flex-direction: column;
}
/* Override display:flex khi attribute hidden = true (BUG fix v=98) */
.dl-colpicker-panel[hidden] { display: none !important; }
.dl-cp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid #f3f4f6;
  font-size: 13px;
}
/* Preset selector bar (Plan C Phase 1.5) */
.dl-cp-preset-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-bottom: 1px solid #f3f4f6;
  background: #fafbfc;
  font-size: 11.5px;
}
.dl-cp-select {
  flex: 1;
  padding: 4px 8px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 12px;
  background: #fff;
  cursor: pointer;
}
.dl-cp-select:focus { outline: none; border-color: #6366f1; }
.dl-cp-danger { color: #dc2626 !important; }
.dl-cp-danger:disabled { color: #d1d5db !important; cursor: not-allowed; }
.dl-cp-body {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}
.dl-cp-section { padding: 8px 14px; }
.dl-cp-section-label {
  font-size: 10.5px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.dl-cp-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  cursor: pointer;
  border-radius: 6px;
  font-size: 12.5px;
  color: #374151;
  transition: background .1s;
}
.dl-cp-item:hover { background: #f9fafb; }
.dl-cp-item input { cursor: pointer; }
.dl-cp-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid #f3f4f6;
  font-size: 11.5px;
}
.dl-cp-foot .btn-link {
  background: none;
  border: none;
  color: #4f46e5;
  font-weight: 600;
  cursor: pointer;
  font-size: 11.5px;
  padding: 2px 4px;
}
.dl-cp-foot .btn-link:hover { text-decoration: underline; }
.dl-cp-foot .flex-grow { flex: 1; }

/* Wrap container — min-height để empty state không collapse layout */
#dl-table-wrap, #dl-bypost-wrap { min-height: 600px; position: relative; }

/* Loading state — fade view cũ thay vì xoá → hết nhảy layout khi đổi preset */
.dl-loading { opacity: 0.55; pointer-events: none; transition: opacity .15s; }
.dl-loading::after {
  content: '⏳ Đang tải…';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 1px solid var(--border);
  padding: 8px 16px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  z-index: 50;
  opacity: 1;
}

.dl-table-scroll {
  overflow: auto;
  max-height: calc(100vh - 200px);
  min-height: 360px;
  border-radius: 10px;
  position: relative;
}

/* Table — table-layout fixed → cột có width đều nhau, không co giãn theo data */
.dl-table {
  table-layout: fixed;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.dl-table th, .dl-table td { white-space: nowrap; }
/* Mặc định td overflow:hidden để text dài bị ellipsis, KHÔNG dồn cột bên cạnh */
.dl-table td { overflow: hidden; text-overflow: ellipsis; }
/* Action cell phải overflow:visible để dropdown popup không bị clip */
.dl-table td[data-key="__action"], .dl-table th[data-key="__action"] { overflow: visible; position: relative; }
/* Cell verdict cũng có popup tooltip (phòng hờ) */
.dl-table td[data-key="verdict"] { overflow: visible; position: relative; }
/* Width cố định per column — gọn để fit nhiều cột trên màn hình */
.dl-table th.num                   { width: 76px; }
.dl-table th[data-key="ad_name"]   { width: 280px; }
.dl-table th[data-key="verdict"]   { width: 96px; }
.dl-table th[data-key="__action"]  { width: 88px; }
.dl-table th[data-key="__post"]    { width: 60px; text-align: center; }
.dl-table th[data-key="__bulk"]    { width: 36px; }
.dl-table th[data-key="spend_usd"] { width: 86px; }
.dl-table th[data-key="cpm"],
.dl-table th[data-key="ctr"],
.dl-table th[data-key="frequency"] { width: 68px; }
.dl-table th[data-key="cost_per_inbox"],
.dl-table th[data-key="cost_per_booking"],
.dl-table th[data-key="cost_per_arrived"],
.dl-table th[data-key="revenue_actual_usd"] { width: 86px; }
/* Padding ô tighter để chữ + số gọn */
.dl-table tbody td, .dl-table thead th { padding-left: 8px; padding-right: 8px; }
/* Ad name cell vẫn cho wrap để hiển thị tên dài */
.dl-table .ad-cell { white-space: normal; overflow: visible; text-overflow: clip; }
/* Sticky cả khối <thead> để 2 tầng group + label dính như 1 cục, không có khe hở */
.dl-table thead {
  position: sticky;
  top: 0;
  z-index: 11;
}
.dl-table thead th {
  background: var(--bg);
  box-shadow: inset 0 -2px 0 var(--border);
  padding: 11px 12px;
  text-align: left;
  font-weight: 700;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.dl-table thead th:hover { color: var(--accent); }
.dl-table thead th.num { text-align: right; }
.dl-table thead th.sort-asc::after { content: ' ↑'; color: var(--accent); }
.dl-table thead th.sort-desc::after { content: ' ↓'; color: var(--accent); }
.dl-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.dl-table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.dl-table tbody tr { transition: background .1s; }
.dl-table tbody tr:hover td { background: #f8fafc; }
.dl-table tbody tr.summary-row td {
  background: #ecfdf5;
  font-weight: 700;
  color: #065f46;
  border-top: 2px solid #10b981;
  border-bottom: 2px solid #10b981;
  position: sticky;
  top: 63px;  /* hơi overlap với thead để không có gap; thead z-index 11 cover */
  z-index: 5;
}
.dl-table tbody tr.summary-row td:first-child::before {
  content: '📊 ';
  margin-right: 4px;
}
.dl-table .ad-cell { min-width: 280px; max-width: 360px; }
.dl-table .ad-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.dl-table .ad-name {
  font-weight: 600;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  flex: 1;
  min-width: 0;
}
.dl-table .ad-meta {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  align-items: center;
  flex-wrap: wrap;
}
.dl-table .acc-tag,
.dl-table .ad-id-full {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 5px;
  white-space: nowrap;
  user-select: text;
}
.dl-table .acc-tag {
  background: var(--accent-soft);
  color: var(--accent);
}
.dl-table .ad-id-full {
  background: #f1f5f9;
  color: #475569;
}
.dl-table .copyable {
  cursor: pointer;
  transition: filter .15s, transform .05s;
}
.dl-table .copyable:hover { filter: brightness(0.92); }
.dl-table .copyable:active { transform: scale(0.97); }
.dl-table .empty-cell { color: var(--muted-light); }
.dl-table .summary-label { font-weight: 700; color: var(--accent); }

/* Note */
.dl-note {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 12px;
  padding: 14px 18px;
  margin-top: 18px;
  font-size: 12.5px;
}
.dl-note h3 { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: #92400e; }
.dl-note ul { margin: 0; padding-left: 22px; line-height: 1.7; color: #78350f; }
.dl-note code { background: #fef3c7; color: #78350f; }

#dl-cache-tag {
  background: var(--warn-soft);
  color: #92400e;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
}

/* "Xem" button per row — rõ ràng hơn click số */
.btn-view-row {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.btn-view-row:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Row action buttons cluster */
.row-actions {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.btn-action {
  border: 1px solid var(--border-strong);
  background: #fff;
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: all .15s;
}
.btn-action:hover { border-color: var(--text); }
.btn-action:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-action.btn-pause {
  background: #fff;
  color: #94a3b8;
  border-color: #e2e8f0;
}
.btn-action.btn-pause:hover { background: #dc2626; color: #fff; border-color: #dc2626; }
/* Highlight pause button khi verdict là KILL/WATCH (chú ý cho user) */
.btn-action.btn-pause.btn-pause-highlight {
  background: #fef2f2;
  color: #991b1b;
  border-color: #fca5a5;
}
.btn-action.btn-pause.btn-pause-highlight:hover { background: #dc2626; color: #fff; border-color: #dc2626; }

.btn-action.btn-resume {
  background: #fff;
  color: #94a3b8;
  border-color: #e2e8f0;
}
.btn-action.btn-resume:hover { background: #16a34a; color: #fff; border-color: #16a34a; }
/* Highlight resume khi ad đang ở trạng thái paused */
.btn-action.btn-resume.btn-resume-highlight {
  background: #f0fdf4;
  color: #14532d;
  border-color: #86efac;
}
.btn-action.btn-resume.btn-resume-highlight:hover { background: #16a34a; color: #fff; border-color: #16a34a; }

/* Disabled look — nút không relevant ở state hiện tại (vẫn click được) */
.btn-action.btn-disabled-look {
  background: #f8fafc !important;
  color: #cbd5e1 !important;
  border-color: #e2e8f0 !important;
}
.btn-action.btn-disabled-look:hover {
  background: #fff !important;
  color: #64748b !important;
  border-color: #94a3b8 !important;
}

.btn-action-done {
  background: var(--ok-soft) !important;
  color: var(--ok) !important;
  border-color: var(--ok) !important;
}

/* Toast notification */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #1e293b;
  color: #fff;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.2);
  z-index: 200;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .3s, transform .3s;
  max-width: 480px;
}
.toast.toast-show { opacity: 1; transform: translateY(0); }
.toast.toast-ok { background: #16a34a; }
.toast.toast-err { background: #dc2626; }
.toast.toast-warn { background: #d97706; }

/* Safeguards badge in topbar */
.sg-pill {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sg-pill.sg-ok       { background: var(--ok-soft); color: var(--ok); }
.sg-pill.sg-warn     { background: var(--warn-soft); color: #b45309; }
.sg-pill.sg-disabled { background: var(--danger-soft); color: var(--danger); }

/* Drill-down link */
.drill-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 1px dashed var(--accent);
  padding-bottom: 1px;
}
.drill-link:hover { color: #4f46e5; border-bottom-style: solid; }

/* Drill-down modal */
.modal-card-wide { width: min(960px, calc(100vw - 32px)); max-height: calc(100vh - 64px); }

.drill-summary {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-bottom: 16px;
}
.drill-summary-item {
  background: var(--bg);
  border-radius: 10px;
  padding: 10px 14px;
}
.drill-summary-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.drill-summary-value { font-size: 18px; font-weight: 700; margin-top: 2px; }

.drill-tabs {
  display: flex; gap: 6px;
  background: var(--bg);
  padding: 4px;
  border-radius: 10px;
  margin-bottom: 12px;
}
.drill-tab {
  flex: 1;
  border: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  padding: 8px;
  border-radius: 7px;
  cursor: pointer;
  color: var(--muted);
  font-family: inherit;
}
.drill-tab:hover { color: var(--text); }
.drill-tab.active {
  background: #fff;
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.drill-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.drill-table thead th {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 8px 10px;
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.drill-table tbody td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.drill-table tr.row-skip { opacity: 0.5; }
.drill-table .mono { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }

[class*="status-"] {
  display: inline-block;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  background: var(--bg);
  color: var(--muted);
}
.status-pending   { background: #fef3c7; color: #92400e; }
.status-confirmed { background: #dbeafe; color: #1e40af; }
.status-arrived   { background: #d1fae5; color: #065f46; }
.status-done      { background: #dcfce7; color: #166534; }
.status-cancelled { background: #fee2e2; color: #991b1b; }
.status-no_show   { background: #fce7f3; color: #831843; }

.hashtag-chip {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  margin-right: 2px;
}

.drill-hint { font-size: 11px; color: var(--muted); margin-top: 10px; }

/* ============ View tabs (Theo Ad / Theo Bài viết) ============ */
.dl-view-tabs {
  display: flex;
  gap: 2px;
  background: #f3f4f6;
  border-radius: 8px;
  padding: 3px;
}
.dl-view-tab {
  background: transparent;
  border: 0;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  border-radius: 6px;
  cursor: pointer;
  transition: all .15s;
}
.dl-view-tab:hover { color: var(--text); }
.dl-view-tab.active {
  background: #fff;
  color: var(--accent);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ============ By-post view (port từ pancake-dashboard adperf.js renderCreativeView) ============ */
.bp-list { display: flex; flex-direction: column; gap: 14px; }

/* Filter bar cho view "Theo Bài viết / Creative" */
.bp-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-size: 13px;
}
.bp-filter-bar input[type="text"].bp-f-search {
  flex: 1 1 220px;
  min-width: 180px;
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
}
.bp-filter-bar select,
.bp-filter-bar input[type="number"] {
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
  cursor: pointer;
}
.bp-filter-bar input[type="number"] {
  width: 70px;
  cursor: text;
}
.bp-filter-bar .bp-f-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.bp-filter-bar .bp-f-num {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #6b7280;
  white-space: nowrap;
}
.bp-filter-bar .bp-f-count {
  margin-left: auto;
  color: #6b7280;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* ===== Card ===== */
.bp-card {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* Card head: thumb + name+chips + stats + mini-bars + chevron */
.bp-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #f9fafb;
  border-bottom: 1px solid #f3f4f6;
  cursor: pointer;
  transition: background .15s;
}
.bp-card-head:hover { background: #f3f4f6; }

.bp-thumb {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
}
.bp-thumb-fb { background: #fff; padding: 4px; }
.bp-thumb-fb svg { display: block; }
.bp-thumb-camp {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  font-size: 18px;
  border: none;
}
.bp-thumb img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
  display: block;
}

/* Top posts widget: thumbnail + name */
.top-post-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 140px;
}
.top-thumb {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
}
.top-thumb-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #9ca3af;
}
.top-post-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.top-post-name {
  font-size: 12px;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.top-post-link { line-height: 1; margin-top: 2px; }

/* Subtitle line — full account ID + ad name */
.bp-head-subtitle {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 3px;
  font-size: 11.5px;
  color: #6b7280;
  font-family: var(--font-mono);
}
.bp-acc-full { color: #6b7280; font-weight: 500; }
.bp-acc-link { text-decoration: none; transition: color .15s, background .15s; }
.bp-acc-link:hover { color: #4f46e5; text-decoration: underline; }
a.bp-mini-chip.bp-chip-acc:hover { background: #ddd6fe; color: #4c1d95; text-decoration: none; }
.bp-ad-name {
  color: #4b5563;
  font-family: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 480px;
}

/* Post link as small icon button (replaces "🔗 Xem bài" text button) */
.bp-post-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #eef2ff;
  color: #4338ca;
  border: 1px solid #c7d2fe;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  margin-left: 4px;
  transition: all .15s;
}
.bp-post-link-icon:hover {
  background: #4338ca;
  color: #fff;
  border-color: #4338ca;
}

.bp-head-info { flex: 1; min-width: 0; }
.bp-head-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-weight: 700;
  font-size: 13.5px;
  color: #1f2937;
}
.bp-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
}
.bp-head-stats {
  display: flex;
  gap: 16px;
  margin-top: 4px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: #6b7280;
}
.bp-stat-item strong { color: #1f2937; font-variant-numeric: tabular-nums; }
.bp-spend { color: #2563eb !important; }
.bp-bk { color: #4f46e5; font-weight: 600; }

/* Chips trong header (Facebook / Account / Video Ad / N Ad ID) */
.bp-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
}
.bp-chip-fb { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
.bp-chip-camp { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.bp-chip-acc { background: #ede9fe; color: #5b21b6; border-color: #c4b5fd; }
.bp-chip-type { background: #f0f9ff; color: #0369a1; border-color: #bae6fd; }
.bp-chip-image { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.bp-chip-share { background: #ede9fe; color: #5b21b6; border-color: #c4b5fd; }
.bp-chip-count {
  display: inline-block;
  font-size: 10.5px;
  color: #9ca3af;
  font-weight: 500;
  margin-left: auto;
}

/* Quality bar — 3 segments: chất / tỉnh / spam */
.bp-quality-bar {
  width: 200px;
  flex-shrink: 0;
}
.bp-qb-track {
  display: flex;
  height: 14px;
  border-radius: 99px;
  overflow: hidden;
  gap: 1px;
  background: #e5e7eb;
}
.bp-qb-seg { transition: width .3s; }
.bp-qb-good { background: #10b981; }
.bp-qb-warn { background: #f59e0b; }
.bp-qb-bad  { background: #ef4444; }
.bp-qb-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 11.5px;
  font-weight: 600;
}
.bp-qb-lbl-good { color: #059669; }
.bp-qb-lbl-warn { color: #d97706; }
.bp-qb-lbl-bad  { color: #dc2626; }

/* Big stats block — Ads / Booking / Spend / Doanh số / Tỷ lệ */
.bp-bigstats {
  display: flex;
  gap: 18px;
  flex-shrink: 0;
  align-items: center;
  padding: 0 8px;
}
.bp-bs-item {
  text-align: center;
  min-width: 64px;
}
.bp-bs-num {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  line-height: 1.1;
  letter-spacing: -0.3px;
}
.bp-bs-lbl {
  font-size: 10.5px;
  color: #9ca3af;
  font-weight: 500;
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.bp-bs-spend { color: #2563eb; }
.bp-bs-rev   { color: #059669; }
.bp-bs-bk    { color: #4f46e5; }
.bp-bs-good  { color: #059669; }
.bp-bs-warn  { color: #d97706; }
.bp-bs-bad   { color: #dc2626; }
.bp-bs-muted { color: #9ca3af; }

/* Post link button — nổi bật cạnh title */
.bp-post-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: #eef2ff;
  color: #4338ca;
  border: 1px solid #c7d2fe;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
  margin-left: 6px;
  transition: all .15s;
}
.bp-post-link-btn:hover {
  background: #4338ca;
  color: #fff;
  border-color: #4338ca;
}
.bp-chevron {
  font-size: 11px;
  color: #9ca3af;
  flex-shrink: 0;
  transition: transform .2s;
}
.bp-card.expanded .bp-chevron { transform: rotate(180deg); }

/* Card body — table list ads */
.bp-card-body { display: none; }
.bp-card.expanded .bp-card-body { display: block; }

/* Horizontal scroll wrapper cho table 12 cột */
.bp-table-scroll {
  overflow-x: auto;
}

.bp-ads-table {
  width: 100%;
  min-width: 1380px;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}
/* Fix width per column type — không bị nhảy khi data thay đổi */
.bp-ads-table th, .bp-ads-table td.bp-td-num { white-space: nowrap; }
.bp-ads-table td.bp-td-ad { white-space: normal; word-break: break-word; }
.bp-th-ad      { width: 360px; }
.bp-th-num     { width: 110px; }
.bp-th-action  { width: 130px; }
.bp-ads-table thead th { padding: 10px 14px; font-size: 11px; }
.bp-ad-row td { padding: 12px 14px; }
.bp-foot-row td { padding: 12px 14px !important; }

.bp-th-sub {
  display: block;
  font-size: 9px;
  font-weight: 500;
  color: #9ca3af;
  margin-top: 1px;
  text-transform: lowercase;
}

/* Footer row tổng kết — render ở top để dễ scan */
.bp-foot-row {
  background: #f0fdf4;
  border-bottom: 2px solid #4ade80;
}
.bp-foot-row td {
  padding: 10px 12px !important;
  color: #047857;
}
.bp-foot-row .bp-td-ad {
  font-size: 12.5px;
}
.bp-ads-table thead tr {
  background: #eef2ff;
}
.bp-ads-table thead th {
  padding: 8px 12px;
  font-size: 10.5px;
  font-weight: 600;
  color: #6b7280;
  text-transform: none;
  letter-spacing: 0;
}
.bp-th-ad { text-align: left; padding-left: 48px !important; }
.bp-th-num { text-align: center; }
.bp-th-good { color: #047857 !important; }
.bp-th-bad { color: #dc2626 !important; }
.bp-th-bk { color: #4338ca !important; }
.bp-th-action { text-align: center; }

.bp-ad-row {
  border-bottom: 1px solid #f3f4f6;
  transition: background .1s;
}
.bp-ad-row:hover { background: #f9fafb; }
.bp-ad-row.bp-row-best { background: #f0fdf4; border-left: 4px solid #4ade80; }
.bp-ad-row.bp-row-best:hover { background: #dcfce7; }
.bp-ad-row.bp-row-bad { background: #fef2f2; border-left: 4px solid #fca5a5; }
.bp-ad-row.bp-row-bad:hover { background: #fee2e2; }
.bp-ad-row td { vertical-align: middle; padding: 10px 12px; }

.bp-td-ad { padding-left: 48px !important; }
.bp-td-num { text-align: center; }

.bp-ad-id {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  color: #2563eb;
}
.bp-ad-label {
  font-size: 11px;
  color: #6b7280;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}
.bp-ad-chips { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.bp-mini-chip {
  display: inline-block;
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 4px;
  font-weight: 700;
}
.bp-mini-chip.bp-chip-acc { background: #ede9fe; color: #5b21b6; }
.bp-mini-chip.bp-chip-best { background: #dcfce7; color: #15803d; }
.bp-mini-chip.bp-chip-spam { background: #fee2e2; color: #dc2626; }

.bp-ad-spend {
  font-size: 11px;
  color: #2563eb;
  font-weight: 600;
  margin-top: 4px;
}

/* Metrics strip (pills bench) */
.bp-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  align-items: center;
}
.bp-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 99px;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid;
}
.bp-strip-score { margin-left: 4px; }
.bp-score {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 99px;
  font-weight: 700;
  white-space: nowrap;
}

/* Quality / spam progress mini bars trong cell */
.bp-pct-num {
  font-size: 13px;
  font-weight: 600;
}
.bp-pct-suffix {
  font-size: 10.5px;
  font-weight: 400;
  color: inherit;
  opacity: .8;
}
.bp-pbar {
  height: 6px;
  background: #f3f4f6;
  border-radius: 99px;
  margin: 4px auto 0;
  width: 56px;
  overflow: hidden;
}
.bp-pbar > div { height: 100%; border-radius: 99px; transition: width .3s; }

.bp-bk-num {
  font-size: 13px;
  color: #4338ca;
  font-weight: 700;
}

/* Quality / spam color text */
.q-good { color: #047857; font-weight: 700; }
.q-warn { color: #ca8a04; font-weight: 600; }
.q-bad { color: #dc2626; font-weight: 600; }
.s-bad { color: #dc2626; font-weight: 700; }
.s-warn { color: #ea580c; font-weight: 600; }
.s-mute { color: #9ca3af; }

/* Verdict pill (giữ tương đương cũ) */
.verdict-pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}
.verdict-pill.verdict-scale    { background: #d1fae5; color: #065f46; }
.verdict-pill.verdict-increase { background: #dbeafe; color: #1e40af; }
.verdict-pill.verdict-keep     { background: #f3f4f6; color: #374151; }
.verdict-pill.verdict-watch    { background: #fef3c7; color: #92400e; }
.verdict-pill.verdict-kill     { background: #fee2e2; color: #991b1b; }

/* Audit tab — so sánh Pancake vs FB */
.audit-range {
  margin-bottom: 12px;
  font-size: 12px;
}
.audit-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 16px;
}
.audit-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  background: #fff;
}
.audit-pancake { border-left: 4px solid #06b6d4; background: linear-gradient(180deg, #ecfeff 0%, #fff 60%); }
.audit-fb      { border-left: 4px solid #3b82f6; background: linear-gradient(180deg, #eff6ff 0%, #fff 60%); }
.audit-card-head { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.audit-card-num { font-size: 32px; font-weight: 800; margin: 4px 0 8px; line-height: 1; color: var(--text); }
.audit-card-meta { font-size: 12px; color: var(--text); }
.audit-card-meta > div + div { margin-top: 2px; }
.audit-vs {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border-radius: 8px;
  min-width: 100px;
  text-align: center;
}
.audit-vs-label { font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: 0.1em; }
.audit-vs-diff { font-size: 13px; font-weight: 700; margin-top: 4px; }
.audit-ok      { background: #ecfdf5; color: #065f46; }
.audit-warn    { background: #fef3c7; color: #92400e; }
.audit-neutral { background: #f3f4f6; color: var(--muted); }
.audit-diagnosis {
  background: #fffbeb;
  border-left: 4px solid #f59e0b;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  color: #78350f;
  margin-bottom: 16px;
}
.audit-section { margin-top: 18px; }
.audit-section h4 { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--text); }

.customer-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px dashed transparent;
  transition: border-color .15s;
}
.customer-link:hover {
  border-bottom-color: var(--accent);
  color: #4f46e5;
}

/* Thresholds config section */
#thresholds-caret { color: var(--muted); margin-left: 6px; }
.thresholds-body { padding: 8px 4px 4px; }
.th-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 1000px) { .th-grid { grid-template-columns: 1fr; } }

.th-group {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  background: #fafbfd;
}
.th-group-title {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}
.th-group-title.v-scale { color: #14532d; }
.th-group-title.v-kill { color: #7f1d1d; }
.th-group-title.v-watch { color: #78350f; }

.th-row {
  display: grid;
  grid-template-columns: 1fr 90px;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.th-row label {
  font-size: 12px;
  color: var(--text);
  font-weight: 500;
  line-height: 1.3;
}
.th-suffix {
  font-size: 10px;
  color: var(--muted);
  font-weight: 400;
}
.th-row input {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
  font-family: var(--font-mono);
  text-align: right;
  background: #fff;
}
.th-row input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.th-default {
  grid-column: 1 / -1;
  font-size: 10px;
  color: var(--muted-light);
  margin-top: -4px;
  margin-bottom: 4px;
  text-align: right;
}

.th-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
#thresholds-save-status.ok { color: var(--ok); }
#thresholds-save-status.err { color: var(--danger); }

/* ==== Phase 1.9: Top Bài viết + Top Ads ID + cột link ==== */
.dl-tops-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 1100px) {
  .dl-tops-row { grid-template-columns: 1fr; }
}
.dl-top-card { padding: 0; }
.dl-top-card .card-head { padding: 12px 14px; border-bottom: 1px solid var(--border); }
.dl-top-card h2 { font-size: 14px; margin: 0; }

.dl-top-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.dl-top-table th,
.dl-top-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #f3f4f6;
  text-align: left;
  vertical-align: middle;
}
.dl-top-table th {
  background: #f9fafb;
  font-weight: 600;
  font-size: 11px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dl-top-table td.num,
.dl-top-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.dl-top-table .medal { font-size: 14px; }
.dl-top-table .booking-cell { font-weight: 700; color: #059669; }
.dl-top-table .post-link {
  color: #2563eb;
  font-size: 11px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.dl-top-table .post-link:hover { text-decoration: underline; }
.dl-top-table .ad-id-mono { font-family: monospace; font-size: 11px; color: #6b7280; }

/* Cột "Bài viết" trong main table */
.dl-post-link {
  color: #2563eb;
  text-decoration: none;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.dl-post-link:hover { text-decoration: underline; }
.dl-post-link.loading { color: #94a3b8; font-style: italic; }
.dl-post-link.empty { color: #94a3b8; }

/* Thumbnail trong cột Bài viết (main table) — 65x65 (-10% từ 72px) */
.dl-post-thumb {
  width: 65px;
  height: 65px;
  border-radius: 8px;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 9px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
}

/* Phase 2.0 — Clone buttons inline + bulk checkbox */
.btn-clone-cam,
.btn-clone-ad {
  font-size: 11px;
  padding: 4px 6px;
  background: #f3f4f6;
  color: #4b5563;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
}
.btn-clone-cam:hover,
.btn-clone-ad:hover {
  background: #e0e7ff;
  color: #4338ca;
}
.btn-clone-highlight {
  background: #ddd6fe;
  color: #6d28d9;
  font-weight: 600;
  animation: pulse-clone 2s infinite;
}
@keyframes pulse-clone {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.3); }
  50% { box-shadow: 0 0 0 4px rgba(139, 92, 246, 0); }
}
.dl-bulk-cb {
  width: 14px;
  height: 14px;
  cursor: pointer;
  margin-right: 2px;
}

/* Phase 2.0.5: icon-only post link */
.dl-icon-link {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
  color: #2563eb;
  transition: color 0.15s, transform 0.15s;
}
a.dl-post-link,
a.post-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 6px;
  text-decoration: none;
}
a.dl-post-link:hover,
a.post-link:hover {
  background: #eff6ff;
}
a.dl-post-link:hover .dl-icon-link,
a.post-link:hover .dl-icon-link {
  color: #1d4ed8;
  transform: translate(1px, -1px);
}

/* Phase 2.0.7: tên TKQC dưới ad cell */
.dl-table .acc-name-line {
  font-size: 11px;
  color: #4f46e5;
  background: #eef2ff;
  display: inline-block;
  padding: 1px 8px;
  border-radius: 4px;
  margin-top: 4px;
  font-weight: 500;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Phase 2.0.7: verdict cell — badge + score nổi bật */
.verdict-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.verdict-score {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
  cursor: help;
  letter-spacing: 0.02em;
}
.verdict-score.pos { background: #d1fae5; color: #065f46; }
.verdict-score.neg { background: #fee2e2; color: #991b1b; }

/* Phase 2.1b: Edit nhanh button */
.btn-edit-adset {
  background: #f3e8ff;
  color: #7c3aed;
  border: 1px solid transparent;
}
.btn-edit-adset:hover {
  background: #ddd6fe;
  color: #5b21b6;
}

/* Phase 2.3.1: Pancake Tokens modal */
.pancake-tokens-intro {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 12px;
}
.pancake-tokens-intro p { margin: 0; line-height: 1.5; color: #1e40af; }
.pancake-tokens-intro a { color: #2563eb; text-decoration: underline; }

.pancake-tokens-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pancake-page-row {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 12px;
}
.pancake-page-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 8px;
}
.pancake-page-info strong { font-size: 13px; }
.pancake-page-info code {
  background: #f3f4f6;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
}
.token-status.ok { color: #047857; font-size: 11px; font-weight: 600; }
.token-status.missing { color: #b91c1c; font-size: 11px; font-weight: 600; }

.pancake-page-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.pancake-token-input {
  flex: 1;
  min-width: 200px;
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-family: monospace;
  font-size: 11px;
}
.pancake-enabled-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #4b5563;
  cursor: pointer;
  white-space: nowrap;
}

.pancake-add-new {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #e5e7eb;
}
.pancake-add-new h4 { font-size: 13px; margin: 0 0 8px; color: #374151; }
.pancake-add-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.pancake-add-row input,
.pancake-add-row select {
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 12px;
}
.pancake-add-row input { flex: 1; min-width: 130px; }

/* Phase 2.3.2: Pancake user token section */
.pancake-user-token-section {
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.pancake-user-token-section h4 {
  font-size: 13px;
  margin: 0 0 6px;
  color: #92400e;
}
.pancake-user-token-section p {
  margin: 0 0 10px;
  font-size: 12px;
  color: #78350f;
  line-height: 1.5;
}
.pancake-user-token-section a {
  color: #b45309;
  text-decoration: underline;
}
.pancake-user-token-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.pancake-user-token-row input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid #fcd34d;
  border-radius: 6px;
  font-family: monospace;
  font-size: 11px;
  background: #fff;
}

/* Phase 2.3.3 — Action dropdown menu (gộp 5 nút thành 1) */
.dl-action-menu {
  position: relative;
  display: inline-block;
}

.dl-action-trigger {
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  color: #374151;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  white-space: nowrap;
}
.dl-action-trigger .dl-trigger-caret {
  color: #9ca3af;
  font-size: 10px;
}
.dl-action-trigger:hover {
  background: #f3f4f6;
  color: #111827;
}
.dl-action-trigger.is-winner {
  background: linear-gradient(135deg, #fde68a, #fbcfe8);
  border-color: #f59e0b;
  animation: pulse-winner 2s infinite;
}
@keyframes pulse-winner {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251, 146, 60, 0.4); }
  50% { box-shadow: 0 0 0 4px rgba(251, 146, 60, 0); }
}

.dl-action-dropdown {
  position: absolute;
  left: 0;                  /* mở sang phải, không bị clip cột Tên Ad */
  top: 100%;
  margin-top: 6px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.06);
  min-width: 240px;
  z-index: 100;
  padding: 6px;
  animation: dlMenuFadeIn 0.15s ease-out;
}
@keyframes dlMenuFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.dl-action-dropdown[hidden] { display: none; }

.dl-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 9px 14px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  border-radius: 6px;
  color: #374151;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s;
  font-weight: 500;
}
.dl-menu-item:hover {
  background: #f3f4f6;
  color: #111827;
}
.dl-menu-item:active {
  background: #e5e7eb;
}
.dl-menu-item.item-danger { color: #b91c1c; }
.dl-menu-item.item-danger:hover { background: #fee2e2; }
.dl-menu-item.item-success { color: #047857; }
.dl-menu-item.item-success:hover { background: #d1fae5; }
.dl-menu-item.item-winner {
  color: #6d28d9;
  font-weight: 600;
}
.dl-menu-item.item-winner:hover { background: #ede9fe; }
.dl-menu-item.item-disabled {
  color: #9ca3af;
  cursor: not-allowed;
}
.dl-menu-divider {
  height: 1px;
  background: #e5e7eb;
  margin: 4px 0;
}

/* Cột bulk checkbox đầu tiên — gọn */
.dl-table tbody td:first-child {
  width: 32px;
  text-align: center;
}
.dl-table thead th:first-child {
  width: 32px;
}

/* Phase 2.5: Group headers theo source data */
.dl-table thead .dl-group-row th {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 8px;
  box-shadow: inset 0 -2px 0 #d1d5db;
  text-transform: none;
  letter-spacing: 0.02em;
  cursor: default;
}
.dl-table thead .dl-group-row .dl-group-core {
  background: #f9fafb;
  box-shadow: inset 0 -2px 0 #e5e7eb;
}

.dl-table thead .dl-group-header.group-pancake {
  background: linear-gradient(180deg, #ecfeff 0%, #cffafe 100%);
  color: #0e7490;
  box-shadow: inset 0 -3px 0 #06b6d4;
}
.dl-table thead .dl-group-header.group-crm {
  background: linear-gradient(180deg, #f5f3ff 0%, #ede9fe 100%);
  color: #6d28d9;
  box-shadow: inset 0 -3px 0 #8b5cf6;
}
.dl-table thead .dl-group-header.group-fb {
  background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
  color: #1e40af;
  box-shadow: inset 0 -3px 0 #3b82f6;
}

/* Phase 2.5.2: tint mảng màu theo group (đậm hơn ~35%), KHÔNG có vạch chia dọc */
.dl-table .col-pancake { background: rgba(207, 250, 254, 0.65); }   /* cyan */
.dl-table .col-crm     { background: rgba(237, 233, 254, 0.70); }   /* violet */
.dl-table .col-fb      { background: rgba(219, 234, 254, 0.65); }   /* blue */

/* Sticky thead: dùng màu OPAQUE tương đương (alpha→solid) để không thấy row chui qua khi scroll */
.dl-table thead th.col-pancake { background: #e0fcfe; }
.dl-table thead th.col-crm     { background: #f2f0fe; }
.dl-table thead th.col-fb      { background: #e8f1fe; }

/* Hover row → tint đậm thêm 1 chút */
.dl-table tbody tr:hover td.col-pancake { background: rgba(165, 243, 252, 0.75); }
.dl-table tbody tr:hover td.col-crm     { background: rgba(221, 214, 254, 0.78); }
.dl-table tbody tr:hover td.col-fb      { background: rgba(191, 219, 254, 0.75); }

/* Group header (super-header row) giữ gradient nhưng làm dịu */
.dl-table thead .dl-group-header.group-pancake {
  background: linear-gradient(180deg, #f0fdfa 0%, #cffafe 100%);
  color: #0e7490;
  box-shadow: inset 0 -2px 0 #67e8f9;
}
.dl-table thead .dl-group-header.group-crm {
  background: linear-gradient(180deg, #faf5ff 0%, #ede9fe 100%);
  color: #6d28d9;
  box-shadow: inset 0 -2px 0 #c4b5fd;
}
.dl-table thead .dl-group-header.group-fb {
  background: linear-gradient(180deg, #f5f9ff 0%, #dbeafe 100%);
  color: #1e40af;
  box-shadow: inset 0 -2px 0 #93c5fd;
}