/* ============================================================
     Design token — sua mau o day, khong rai hex trong markup nua.
     Nang cap 2026-08-24 (xem trao doi "Use the claude_design MCP...
     Làm theo giao diện này nhé" — da doc file thiet ke that "Marketing
     Flow Redesign.dc.html" tu claude.ai/design, project "Urban Tech
     app redesign", va bam CHINH XAC theo bang mau/font/ban kinh cua
     file do): --brand gio la mau "primary" gan den (nut chinh, nav
     dang chon), --accent la mau xanh duong (link, tab dang chon,
     thanh tien do, vien donut) — 2 vai tro khac nhau, KHONG dung
     chung 1 mau nhu truoc. Font tieu de doi Archivo, font than trang
     doi Inter (truoc dung font he thong). Sua 1 CHO DUY NHAT o day,
     .card/.badge/.btn dung CHUNG token nay o KHAP APP nen nang cap
     lan toa ngay. */
  :root {
    --brand:       #15171c;
    --brand-2:     #000000;
    --brand-soft:  #eaf1fe;
    --accent:      #2f6fed;
    --accent-soft: #eaf1fe;
    --line:        #e8e9ee;   /* vien nhat */
    --ink:         #1c2027;
    --ink-2:       #6b7280;   /* chu phu */
    --ink-3:       #8f95a1;   /* chu mo */
    --bg:          #f4f5f7;
    --ok:          #16a34a;
    --ok-soft:     #e8f8ee;
    --warn:        #d97706;
    --warn-soft:   #fdf1e0;
    --danger:      #dc3d3d;
    --danger-soft: #fbe8e7;
    --review:      #7c4dff;
    --radius:      14px;
    --radius-sm:   9px;
    --shadow:      0 1px 2px rgba(16,24,40,.04), 0 4px 14px rgba(16,24,40,.06);
    --font-heading: 'Archivo', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Token nen/surface bo sung cho Sang/Toi (xem trao doi 2026-08-27: "sáng/
       tối/ theo thiết bị") — truoc day toan bo the/popup/input rai hex #fff
       va cac xam gan-trang (#f2f3f5, #f5f6f7, #fafbfc...) thang vao CSS, GAN
       CUNG mau nen trang nen khong doi duoc sang Toi. Gom lai thanh token:
       --card la nen "mat the" (thay #fff), --surface-2 la nen phu/hover (thay
       toan bo dam #f2f3f5/#f2f3f6/#f5f6f7/#fafbfc/#f8f9fa/#f7f8fa/#ebedef/
       #e6e8eb dang rai rac — cac mau nay chi khac nhau vai % xam, gop lam 1
       token khong lam khac gi ve mat nhin thay duoc o che do Sang). */
    --card:        #fff;
    --surface-2:   #f2f3f5;
    --track:       #e8eaed;
    --overlay:     rgba(0,0,0,.35);
    --shadow-pop:  0 6px 20px rgba(0,0,0,.12);
    --badge-todo-bg:     #f0f2f6;
    --badge-review-bg:   #f3edff;
    --badge-review-ink:  #5c33cc;
    --badge-waiting-bg:  #fff8e6;
    --badge-waiting-ink: #996600;
    --danger-hover-bg:   #fdecec;
    --tick-border:       #c4c7ce;
    --tick-hover-ink:    #c9ced6;
  }

  /* Bang mau Toi — mac dinh theo he dieu hanh (prefers-color-scheme) TRU KHI
     nguoi dung da chon tay ('light'/'dark' luu localStorage 'mf_theme', gan
     vao <html data-theme="...">, xem setTheme() trong app()). Script chan
     dau trang (dong 1) gan attribute NGAY truoc khi ve trang de khong bi
     "nhap nhay" doi mau sau khi Alpine khoi dong xong. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      /* --brand duoc dung CA HAI vai: nen nut/active-state (voi chu trang)
         VA mau chu/icon/duong bieu do (vd link "vào Cài đặt...", tieu de the,
         .mf-chip.active, trafficChartSvgMarkup...) — o che do Sang ca 2 vai
         deu hop vi #15171c gan-den vua lam nen-cho-chu-trang vua lam chu-tren-
         nen-trang. Neu o day doi lai thanh mot mau toi (gan mau nen trang xung
         quanh) thi TOAN BO cho dung --brand lam MAU CHU se bien mat/mo tit
         (xem trao doi 2026-08-27: "mấy cái icon ko đổi được màu à" — day
         chinh la nguyen nhan). Phai chon mau DU SANG de doc duoc tren nen toi
         MA VAN DU cho chu trang doc duoc khi lam nen nut. */
      --brand:       #5b7fe0;
      --brand-2:     #4568cc;
      --brand-soft:  #1d2b46;
      --accent:      #5b8dff;
      --accent-soft: #16223d;
      --line:        #2e323c;
      --ink:         #e5e7eb;
      --ink-2:       #9aa0ac;
      --ink-3:       #6b7280;
      --bg:          #14161a;
      --ok:          #22c55e;
      --ok-soft:     #113322;
      --warn:        #f59e0b;
      --warn-soft:   #3a2a0a;
      --danger:      #f87171;
      --danger-soft: #3a1414;
      --review:      #9873ff;
      --shadow:      0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.45);
      --card:        #1c1f26;
      --surface-2:   #262a33;
      --track:       #2e323c;
      --overlay:     rgba(0,0,0,.6);
      --shadow-pop:  0 6px 20px rgba(0,0,0,.5);
      --badge-todo-bg:     #262a33;
      --badge-review-bg:   #241b3d;
      --badge-review-ink:  #b79dff;
      --badge-waiting-bg:  #3a2f0a;
      --badge-waiting-ink: #f0c34d;
      --danger-hover-bg:   #3a1414;
      --tick-border:       #3f4552;
      --tick-hover-ink:    #565d6d;
    }
  }
  :root[data-theme="dark"] {
    --brand:       #5b7fe0;
    --brand-2:     #4568cc;
    --brand-soft:  #1d2b46;
    --accent:      #5b8dff;
    --accent-soft: #16223d;
    --line:        #2e323c;
    --ink:         #e5e7eb;
    --ink-2:       #9aa0ac;
    --ink-3:       #6b7280;
    --bg:          #14161a;
    --ok:          #22c55e;
    --ok-soft:     #113322;
    --warn:        #f59e0b;
    --warn-soft:   #3a2a0a;
    --danger:      #f87171;
    --danger-soft: #3a1414;
    --review:      #9873ff;
    --shadow:      0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.45);
    --card:        #1c1f26;
    --surface-2:   #262a33;
    --track:       #2e323c;
    --overlay:     rgba(0,0,0,.6);
    --shadow-pop:  0 6px 20px rgba(0,0,0,.5);
    --badge-todo-bg:     #262a33;
    --badge-review-bg:   #241b3d;
    --badge-review-ink:  #b79dff;
    --badge-waiting-bg:  #3a2f0a;
    --badge-waiting-ink: #f0c34d;
    --danger-hover-bg:   #3a1414;
    --tick-border:       #3f4552;
    --tick-hover-ink:    #565d6d;
  }

  [x-cloak] { display: none !important; }
  * { box-sizing: border-box; }
  body {
    font-family: 'Inter', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--ink);
    background: var(--bg);
  }
  h1, h2, h3 { font-family: var(--font-heading); }

  /* ---------- Card ---------- */
  .card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
  .card-pad { padding:16px; }

  /* ---------- Badge trang thai (dang vien tron/pill, khop mau voi
       DASH_COLORS trong JS thay vi bo mau rieng nhu truoc) ---------- */
  .badge { display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap; }
  .badge-todo           { background:var(--badge-todo-bg); color:var(--ink-2); }
  .badge-in_progress    { background:var(--warn-soft); color:var(--warn); }
  .badge-pending_review { background:var(--badge-review-bg); color:var(--badge-review-ink); }
  .badge-done           { background:var(--ok-soft); color:var(--ok); }
  .badge-overdue        { background:var(--danger-soft); color:var(--danger); }
  .badge-blocked        { background:var(--danger-soft); color:var(--danger); }
  .badge-waiting        { background:var(--badge-waiting-bg); color:var(--badge-waiting-ink); }

  /* Trang thai noi bat trong drawer: cung bang mau voi .badge-*, nhung to hon
     va boc luon <select> ben trong thay vi mot the badge tro trui. */
  .status-highlight { border-radius:8px; }
  .status-highlight select {
    width:100%; border:none; background:transparent; color:inherit;
    font-size:14px; font-weight:600; padding:7px 8px; cursor:pointer; font-family:inherit;
  }
  .status-highlight select:focus { outline:none; }
  .status-highlight select:disabled { cursor:default; }

  /* ---------- O tick tron kieu Lark ----------
     Dung <button>, khong dung checkbox, de ve duoc dau check va vien mau. */
  .tick {
    width:18px; height:18px; flex:0 0 18px;
    border:1.5px solid var(--tick-border); border-radius:50%;
    background:var(--card); color:transparent;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:11px; line-height:1; cursor:pointer;
    transition:all .12s ease;
  }
  .tick:hover:not(:disabled) { border-color:var(--ok); color:var(--tick-hover-ink); }
  .tick.is-done { background:var(--ok); border-color:var(--ok); color:#fff; }
  .tick.is-review { border-color:var(--review); }
  .tick.is-review.is-done { background:var(--review); border-color:var(--review); }
  .tick:disabled { cursor:default; opacity:.45; }

  /* ---------- Avatar ---------- */
  .av {
    width:24px; height:24px; flex:0 0 24px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:10px; font-weight:600; color:#fff; letter-spacing:.2px;
    user-select:none;
  }
  .av-sm { width:20px; height:20px; flex-basis:20px; font-size:9px; }
  .av-lg { width:32px; height:32px; flex-basis:32px; font-size:12px; }
  .av-ring-done { box-shadow:0 0 0 2px var(--card), 0 0 0 3.5px var(--ok); }

  /* ---------- Dong task: nut hanh dong chi hien khi hover ---------- */
  .row { display:flex; align-items:flex-start; gap:10px; padding:9px 12px; border-bottom:1px solid var(--line); }
  .row:last-child { border-bottom:0; }
  .row:hover { background:var(--surface-2); }
  .row-act { opacity:0; transition:opacity .12s; }
  .row:hover .row-act, .row-act:focus-within { opacity:1; }
  @media (hover:none) { .row-act { opacity:1; } }  /* mobile khong co hover */

  /* ---------- Drawer truot tu phai ---------- */
  .drawer-mask { position:fixed; inset:0; background:var(--overlay); z-index:40; }
  .drawer {
    position:fixed; top:0; right:0; bottom:0; z-index:41;
    width:min(520px, 100vw);
    background:var(--card); border-left:1px solid var(--line);
    box-shadow:-4px 0 24px rgba(0,0,0,.10);
    display:flex; flex-direction:column;
  }
  .drawer-body { flex:1; overflow-y:auto; }

  /* ---------- Field sua tai cho: nhin nhu chu, bam vao moi thanh input ---------- */
  .f-row { display:flex; align-items:flex-start; gap:10px; padding:7px 0; }
  .f-label { width:112px; flex:0 0 112px; font-size:13px; color:var(--ink-2); padding-top:5px; }
  .f-val { flex:1; min-width:0; font-size:13px; }
  .inp {
    width:100%; border:1px solid transparent; border-radius:6px;
    padding:4px 8px; font-size:13px; font-family:inherit; color:var(--ink);
    background:transparent; transition:all .12s;
  }
  .inp:hover { background:var(--surface-2); }
  .inp:focus { outline:none; background:var(--card); border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }
  .inp-boxed { border-color:var(--line); background:var(--card); }
  select.inp { cursor:pointer; }
  /* .inp mac dinh qua nho cho input[type=date] dung ngoai form-row (vd bo loc
     ky tren dashboard) — chu so ngay/thang/nam bi bop chat, nhin xau. */
  input[type="date"].inp { width:auto; min-width:150px; padding:6px 10px; font-size:14px; }

  /* ---------- Nut ---------- */
  .btn { border-radius:var(--radius-sm); font-size:13px; font-weight:700; font-family:var(--font-heading); padding:8px 16px; cursor:pointer; border:1px solid transparent; transition:all .12s; white-space:nowrap; }
  .btn-primary { background:var(--brand); color:#fff; }
  .btn-primary:hover { background:var(--brand-2); }
  .btn-ghost { background:var(--card); border-color:var(--line); color:var(--ink); }
  .btn-ghost:hover { background:var(--surface-2); }
  .btn-text { background:transparent; color:var(--ink-2); padding:4px 8px; }
  .btn-text:hover { background:var(--surface-2); color:var(--ink); }
  .btn-danger-text { background:transparent; color:var(--danger); padding:4px 8px; }
  .btn-danger-text:hover { background:var(--danger-hover-bg); }

  /* ---------- Chip nguoi ---------- */
  .chip { display:inline-flex; align-items:center; gap:6px; padding:3px 8px 3px 4px; border-radius:999px; background:var(--surface-2); font-size:12px; max-width:100%; }
  .chip-done { background:var(--ok-soft); }
  .chip-x { color:var(--ink-3); cursor:pointer; font-size:13px; line-height:1; padding:0 2px; }
  .chip-x:hover { color:var(--danger); }
  /* Nut tron "+" doc lap, khac .chip (nen .chip co padding lech trai/phai
     danh cho tag+nut-x, dung lam nut "+" don le se bi lech tam — trao doi
     2026-08-20 "thẩm mĩ bị sao thế"). */
  .chip-add { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:999px; background:var(--surface-2); color:var(--accent); font-size:14px; line-height:1; cursor:pointer; flex-shrink:0; }
  .chip-add:hover { background:var(--line); }

  /* ---------- Dropdown chon nguoi ---------- */
  .pop { position:absolute; z-index:50; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-pop); width:260px; }
  .pop-item { display:flex; align-items:center; gap:8px; padding:7px 10px; cursor:pointer; font-size:13px; }
  .pop-item:hover { background:var(--brand-soft); }

  /* ---------- Thanh tien do ---------- */
  .bar { height:4px; border-radius:999px; background:var(--track); overflow:hidden; }
  .bar > i { display:block; height:100%; border-radius:999px; background:var(--accent); transition:width .25s; }

  /* ---------- Bao cao kenh: toolbar + bang kieu Meta Ads Manager ---------- */
  .metaTool-btn { display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:500;
    padding:7px 12px; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--ink); }
  .metaTool-btn:hover { background:var(--brand-soft); }
  .metaTable { width:100%; border-collapse:collapse; font-size:13px; }
  .metaTable th { position:sticky; top:0; background:var(--surface-2); color:var(--ink-2); font-weight:600;
    text-align:right; padding:9px 12px; border-bottom:2px solid var(--line); white-space:nowrap; cursor:pointer; user-select:none; }
  .metaTable th:hover { background:var(--line); }
  .metaTable th.metaTable-th-first { text-align:left; }
  .metaTable td { padding:9px 12px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap; }
  .metaTable td.metaTable-td-first { text-align:left; color:var(--accent); font-weight:500; }
  .metaTable tbody tr:hover { background:var(--surface-2); }
  .metaTable tfoot td { padding:10px 12px; border-top:2px solid var(--line); font-weight:700; background:var(--surface-2); }
  .metaSort-arrow { display:inline-block; margin-left:2px; opacity:.35; font-size:10px; }
  .metaSort-arrow.is-active { opacity:1; }
  .metaCol-resize { position:absolute; right:0; top:0; bottom:0; width:7px; cursor:col-resize; z-index:1; }
  .metaCol-resize:hover, .metaCol-resize:active { background:var(--accent); opacity:.4; }
  /* Bang GOP "Bao cao kenh": ghim cot dau (Chien dich) khi cuon ngang, nhung
     KHONG dung .metaTable-raw vi class do ep text-align:left het moi cot
     (hong cho bang nay vi con lai toan chi so can can phai). Trao doi
     2026-09-23: "ghim cho anh cot dau vao". */
  .metaTable-pin-first .metaTable-th-first, .metaTable-pin-first .metaTable-td-first { position:sticky; left:0; z-index:1; background:var(--card); box-shadow:6px 0 6px -6px rgba(0,0,0,.12); }
  .metaTable-pin-first thead .metaTable-th-first { background:var(--surface-2); z-index:3; }
  .metaTable th.metaTable-th-sort { cursor:pointer; }
  .metaTable th .metaSort-btn { display:inline-flex; align-items:center; gap:2px; }
  .metaTable th[draggable="true"] { cursor:grab; }
  .metaTable th.is-dragging { opacity:.4; background:var(--brand-soft); }
  /* Bang "Danh sach khach hang" (Database): can le trai het (khac mac dinh
     phai cua .metaTable — day la du lieu chu, khong phai chi so so), va cot
     Trang thai GHIM cuoi cung khi cuon ngang (xem trao doi 2026-08-24). */
  .metaTable-leads th, .metaTable-leads td { text-align:left; }
  .metaTable-leads .col-sticky-end { position:sticky; right:0; background:var(--card); box-shadow:-6px 0 6px -6px rgba(0,0,0,.12); }
  .metaTable-leads thead .col-sticky-end { background:var(--surface-2); z-index:2; }
  /* Bang "Du lieu tho theo ngay" (Database): ghim cot dau tien (Ngay) khi
     cuon ngang qua nhieu cot chi so — mirror cua .metaTable-leads .col-sticky-end
     o tren nhung ghim cot DAU thay vi cot CUOI (trao doi 2026-08-26: "cố
     định cột này đi, chỉ cuộn được bên phải thôi"). */
  .metaTable-raw .metaTable-th-first, .metaTable-raw .metaTable-td-first { position:sticky; left:0; background:var(--card); box-shadow:6px 0 6px -6px rgba(0,0,0,.12); }
  .metaTable-raw thead .metaTable-th-first { background:var(--surface-2); z-index:2; }
  /* Can le TRAI het (giong .metaTable-leads) — mac dinh .metaTable can PHAI
     (hop cho bang Bao cao kenh, toan chi so). Bang nay CO the chua text dai
     (ten tu khoa/URL trang tu Search Console), can phai doc nhu bang du
     lieu chu, khong phai chi so thuan tuy (trao doi 2026-08-26: "sao chú cứ
     căn lề phải nhỉ, phải cân lề trái chứ"). */
  .metaTable-raw th, .metaTable-raw td { text-align:left; }
  .metaDrag-row { cursor:grab; border-radius:4px; }
  .metaDrag-row.is-dragging { opacity:.4; background:var(--brand-soft); }
  .metaDrag-handle { color:var(--ink-3); margin-right:6px; font-size:11px; flex-shrink:0; }
  .metaGroup-box { border:1px solid var(--line); border-radius:8px; overflow:hidden; }
  .metaGroup-head { display:flex; align-items:center; justify-content:space-between; padding:8px 10px; background:var(--brand-soft); cursor:pointer; }
  .metaGroup-chevron { color:var(--ink-3); font-size:11px; flex-shrink:0; }
  .metaGroup-body { padding:8px 10px; }
  .metaConvTable { width:100%; font-size:12px; border-collapse:collapse; }
  .metaConvTable th { font-weight:600; color:var(--ink-3); padding:4px; text-align:center; }
  .metaConvTable th:first-child { text-align:left; }
  .metaConvTable td { padding:4px; text-align:center; border-top:1px solid var(--line); }
  .metaConvTable-label { text-align:left !important; }

  /* ---------- Nav ---------- */
  .nav-a { display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:6px; font-size:14px; color:rgba(255,255,255,.75); text-decoration:none; }
  .nav-a:hover { background:rgba(255,255,255,.08); color:#fff; }
  .nav-a.on { background:rgba(255,255,255,.14); color:#fff; font-weight:500; }

  /* ============================================================
     Class .mf-* CHEP NGUYEN VAN tu file thiet ke da duyet tren
     claude.ai/design ("Marketing Flow Redesign.dc.html", project
     "Urban Tech app redesign" — xem trao doi 2026-08-24: "Làm y hệt
     bản thiết kế này mà, đã mất công thiết kế cho rồi, sao cứ tự ý
     thay đổi thế nhỉ"). KHONG suy dien/doi lai gia tri — chi map ten
     bien cua file thiet ke (--card/--text/--muted/--border/--primary/
     --blue/--green/--amber/--red...) sang dung ten bien co san cua
     app (--ink/--ink-2/--line/--brand/--accent/--ok/--warn/--danger)
     de tranh 2 bo bien trung nhau, gia tri giu y nguyen tung px/hex
     nhu file goc. Dung .mf-* nay THAY vi .card/.badge/.btn cu o cac
     man hinh dang dung lam lai theo file thiet ke. */
  .mf-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
  .mf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-heading);font-weight:700;font-size:14px;border-radius:var(--radius-sm);padding:10px 18px;cursor:pointer;border:1px solid transparent}
  .mf-btn-primary{background:var(--brand);color:#fff}
  .mf-btn-primary:hover{background:var(--brand-2)}
  .mf-btn-secondary{background:var(--card);color:var(--ink);border-color:var(--line)}
  .mf-btn-secondary:hover{background:var(--surface-2)}
  .mf-input{width:100%;box-sizing:border-box;min-height:40px;padding:8px 12px;font:14px 'Inter',sans-serif;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm)}
  .mf-input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
  .mf-label{display:block;font-size:12.5px;color:var(--ink-2);margin-bottom:6px;font-weight:500}
  .mf-navitem{display:flex;align-items:center;gap:11px;padding:10px 14px;font-size:13.5px;font-weight:500;color:var(--ink-2);border-radius:var(--radius-sm);cursor:pointer}
  .mf-navitem:hover{background:var(--surface-2);color:var(--ink)}
  .mf-navitem.active{background:var(--brand);color:#fff;font-weight:600}
  .mf-tab{padding:12px 2px;font-size:14px;font-weight:600;color:var(--ink-2);border-bottom:2px solid transparent;cursor:pointer}
  .mf-tab:hover{color:var(--ink)}
  .mf-tab.active{color:var(--ink);border-bottom-color:var(--accent)}
  .mf-chip{padding:7px 14px;font-size:12.5px;font-weight:500;border:1px solid var(--line);border-radius:999px;cursor:pointer;color:var(--ink);background:var(--card)}
  .mf-chip.active{background:var(--brand);color:#fff;border-color:var(--brand)}
  /* Vien mo o 2 canh cho dai chip cuon ngang tren mobile (Cai dat, nhom Tich
     hop, danh muc Bao cao kenh...) — bao hieu con noi dung ben ngoai man
     hinh, tranh nguoi dung tuong chi co bay nhieu do la het (xem trao doi
     2026-09-02: "trên điện thoại... khá là khó dùng"). Dung mask-image (mo
     do trong suot) thay vi gradient mau, vi khong phai dai nao cung nam tren
     nen --card giong nhau. */
  .mf-hscroll{-webkit-mask-image:linear-gradient(to right,transparent,black 10px,black calc(100% - 18px),transparent);mask-image:linear-gradient(to right,transparent,black 10px,black calc(100% - 18px),transparent)}
  /* Chip mau rieng cho tung chi so tren bieu do (thay cho popover checkbox
     cu) — dung khi bam chon chi so hien len duong nao, mau chip = mau duong
     cua chinh no de vua la nut chon vua la chu thich, khong can hang mau rieng
     ben duoi nua (xem trao doi 2026-08-27: mau bao cao thiet ke dung dang nay). */
  .metric-chips{display:flex;gap:6px;flex-wrap:wrap}
  .metricChip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:5px 10px;border-radius:999px;border:1px solid var(--line);color:var(--ink-2);background:var(--card);cursor:pointer;user-select:none;transition:opacity .12s}
  .metricChip.on{border-color:transparent;color:#fff}
  .metricChip.maxed{opacity:.4;cursor:not-allowed}
  .metricChip .sw{width:7px;height:7px;border-radius:50%;flex-shrink:0}
  /* Bao cao Traffic (GA4) — donut Nguon traffic/Thiet bi + bang xep hang, dung
     dang GA4 "Reports snapshot > Acquisition" (mot bieu do tron + mot bang
     canh nhau), phong theo dung mau da duyet traffic_report_template.html
     (xem trao doi 2026-08-27: "học thêm GA4 đi" -> mau -> code that). */
  .chan-body{display:flex;gap:22px;align-items:center;padding:18px}
  .donut-hole{font-family:var(--font-heading, inherit)}
  .chan-list{flex:1;min-width:0}
  .chan-row{display:grid;grid-template-columns:132px 1fr 74px 90px;align-items:center;gap:12px;padding:8px 0}
  .chan-row.head{color:var(--ink-3);font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:2px}
  .chan-name{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600}
  .chan-dot{width:9px;height:9px;border-radius:2px;flex-shrink:0}
  .chan-bar-track{background:var(--bg, #f6f7f9);border-radius:5px;height:9px;overflow:hidden}
  .chan-bar-fill{height:100%;border-radius:5px}
  .chan-sessions{font-size:13.5px;font-weight:700;text-align:right}
  .chan-pct{font-size:12px;color:var(--ink-2);text-align:right}
  .conv-row{display:grid;grid-template-columns:150px 1fr 1fr;align-items:center;gap:10px;padding:10px 18px;border-bottom:1px solid var(--line)}
  .conv-row:last-child{border-bottom:none}
  .conv-row.head{color:var(--ink-3);font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;padding-bottom:8px}
  .conv-row.head span{text-align:right} .conv-row.head span:first-child{text-align:left}
  .conv-row span{text-align:right;font-size:13.5px}
  .conv-row .crate{color:var(--ink-2);font-weight:600}
  .page-row{display:grid;grid-template-columns:1fr 90px 56px;align-items:center;gap:14px;padding:10px 18px;border-bottom:1px solid var(--line)}
  .page-row:last-child{border-bottom:none}
  .page-row.head{color:var(--ink-3);font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;padding-bottom:8px}
  .page-row.head span{text-align:right} .page-row.head span:first-child{text-align:left}
  .page-path{min-width:0}
  .page-title{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .page-views{text-align:right;font-size:13.5px;font-weight:700}
  .page-pct{text-align:right;font-size:12px;color:var(--ink-2)}
  .split-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .mini-body{display:flex;gap:18px;align-items:center;padding:16px 18px}
  .mini-list{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px}
  .mini-row{display:grid;grid-template-columns:22px 1fr 44px;align-items:center;gap:8px}
  .mini-row .mname{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600}
  .mini-row .mdot{width:8px;height:8px;border-radius:2px;flex-shrink:0}
  .mini-row .mpct{text-align:right;font-size:12.5px;font-weight:700;color:var(--ink-2)}
  .geo-row{display:grid;grid-template-columns:104px 1fr 48px;align-items:center;gap:10px;padding:7px 0}
  .geo-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .geo-pct{text-align:right;font-size:12.5px;font-weight:700;color:var(--ink-2)}
  .insight-list{display:flex;flex-direction:column;gap:1px;background:var(--line);border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
  .insight-row{background:var(--card);display:flex;gap:12px;padding:13px 16px;align-items:flex-start}
  .insight-row .badge{flex-shrink:0;width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;margin-top:1px}
  .insight-row.pos .badge{background:var(--ok-soft);color:var(--ok)}
  .insight-row.neg .badge{background:var(--danger-soft);color:var(--danger)}
  .insight-row.warn .badge{background:var(--warn-soft);color:var(--warn)}
  .insight-row p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink)}
  @media (max-width:640px){
    .chan-row{grid-template-columns:96px 1fr 60px}
    .chan-row .chan-pct{display:none}
    .chan-row.head span:nth-child(3){display:none}
    .chan-body{flex-direction:column;align-items:stretch}
    .split-grid{grid-template-columns:1fr}
  }
  .mf-settingsnav-item{padding:9px 12px;font-size:13.5px;font-weight:500;cursor:pointer;color:var(--ink-2);border-radius:var(--radius-sm)}
  .mf-settingsnav-item:hover{background:var(--surface-2);color:var(--ink)}
  .mf-settingsnav-item.active{color:var(--ink);font-weight:700;background:var(--surface-2)}
  .mf-eyebrow{color:var(--ink-2);font-size:11px;text-transform:uppercase;letter-spacing:0.07em;font-weight:700}
  .mf-badge{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none}
  /* Dashboard Tong (route overall_dashboard) — tieu de nhom co icon tron
     (thay .mf-eyebrow chu nho suong) + dai KPI hop nhat dau trang, de nhin 1
     phat thay ca suc khoe marketing lan cong viec (xem trao doi 2026-09-23:
     "vẽ lại UI trang này, dashboard dùng để view tất cả công việc"). */
  .od-section{margin-bottom:30px}
  .od-section-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
  .od-section-icon{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:none;font-size:14px}
  .od-section-title{font-family:var(--font-heading);font-weight:800;font-size:15px;color:var(--ink)}
  .od-kpi-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:22px}
  .od-kpi-tile{background:var(--card);padding:16px 18px}
  .od-kpi-label{font-size:11.5px;color:var(--ink-3);margin-bottom:6px}
  .od-kpi-value{font-family:var(--font-heading);font-weight:800;font-size:22px;line-height:1.2}
  /* Hieu suat kenh tra phi: bang diem (kenh = cot) — xem trao doi 2026-09-25 */
  .pf-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-bottom:1px solid var(--line)}
  .pf-kpi{padding:18px 22px;border-right:1px solid var(--line)}
  .pf-kpi:last-child{border-right:0}
  .pf-kpi .l{font-size:11.5px;color:var(--ink-3);margin-bottom:6px}
  .pf-kpi .v{font-family:var(--font-heading);font-weight:800;font-size:24px;line-height:1.15;font-variant-numeric:tabular-nums}
  .pf-kpi .s{font-size:12px;color:var(--ink-2);margin-top:4px}
  .pf-trend{padding:18px 22px 6px;border-bottom:1px solid var(--line)}
  .pf-wk{display:grid;column-gap:0;align-items:end}
  .pf-wk-h{font-size:12px;color:var(--ink-2);padding:7px 0;border-top:1px solid var(--line);align-self:stretch;display:flex;align-items:center}
  .pf-wk-bar{height:110px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;padding-bottom:0}
  .pf-wk > .pf-wk-h:first-child{border-top:0;align-items:flex-end;padding-bottom:0}
  .pf-wk-bar i{display:block;width:min(56px,70%);background:var(--accent);border-radius:5px 5px 0 0;opacity:.85;flex-shrink:0}
  .pf-wk-bar .v{font-size:11.5px;font-weight:600;color:var(--ink-2)}
  .pf-wk-c{text-align:center;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;padding:7px 0;border-top:1px solid var(--line);align-self:stretch}
  .pf-wk-date{font-weight:400;color:var(--ink-3);font-size:12px}
  .pf-wk-cpl.is-best{color:var(--ok)}
  .pf-wk-cpl.is-worst{color:var(--danger)}
  .pf-share{padding:18px 22px;border-bottom:1px solid var(--line)}
  .pf-share .bar{display:flex;height:12px;border-radius:99px;overflow:hidden;gap:2px;background:var(--surface-2)}
  .pf-share .leg{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:10px;font-size:12.5px;color:var(--ink-2)}
  .pf-share .leg b{color:var(--ink);font-variant-numeric:tabular-nums}
  .pf-cap{font-size:11px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;color:var(--ink-3);margin-bottom:10px}
  .pf-wrap{overflow-x:auto}
  table.pf{width:100%;min-width:560px;table-layout:fixed;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
  table.pf th,table.pf td{padding:9px 22px;text-align:right;border-bottom:1px solid var(--line)}
  table.pf th:first-child,table.pf td:first-child{text-align:left;color:var(--ink-2);width:26%}
  table.pf td{color:var(--ink);font-weight:600}
  table.pf tr:last-child td{border-bottom:0}
  table.pf tbody tr:not(.pf-group):hover td{background:var(--surface-2)}
  table.pf thead th{padding:16px 22px 12px;vertical-align:bottom;font-weight:700}
  .pf-ch{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
  .pf-ch .n{display:flex;align-items:flex-start;text-align:right;gap:7px;color:var(--ink);font-size:13.5px}
  .pf-ch .d{width:10px;height:10px;border-radius:3px;flex-shrink:0;margin-top:4px}
  .pf-ch .sp{width:260px;max-width:100%}
  .pf-sp-cap{font-size:11px;font-weight:400;color:var(--ink-3)}
  .pf-group td{background:var(--surface-2);color:var(--ink-3)!important;font-size:11px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;padding:7px 22px}
  .pf-zero{color:var(--ink-3)!important;font-weight:400!important}
  .pf-sub{display:inline-block;width:36px;text-align:right;color:var(--ink-3);font-weight:400;font-size:11.5px;margin-left:6px}
  /* Dong so: o co % luon giu cot % rong 42px; o khong co % (Chi phi, Hien thi, Chi phi/L1) va tieu de
     cot chua san 42px do de moi chu so THANG HANG mep phai — xem trao doi 2026-09-25: "dóng dòng đi" */
  table.pf td:not(:first-child):not(:has(.pf-sub)),table.pf th:not(:first-child){padding-right:64px}
  .pf-best{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:99px;background:var(--ok-soft);color:var(--ok);margin-right:8px}
  .pf-key td{background:var(--surface-2)}
  .pf-key td:first-child{color:var(--ink)!important;font-weight:700}
  .pf-tot{background:var(--surface-2)}
  .mf-pill{display:inline-flex;align-items:center;padding:4px 11px;border-radius:999px;font-size:12px;font-weight:600}
  .mf-table{width:100%;border-collapse:collapse}
  .mf-table th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:0.05em;color:var(--ink-2);font-weight:700;padding:0 14px 10px;border-bottom:1px solid var(--line)}
  .mf-table td{padding:13px 14px;font-size:13.5px;border-bottom:1px solid var(--line)}
  .mf-table tr:last-child td{border-bottom:none}
  .mf-table tr:hover td{background:var(--surface-2)}

  .clamp2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

  /* Logo "UT" den (logo-mark.png) khong doc duoc tren nen toi cua .mf-card/
     aside (den-tren-den) — logo-mark-dark.png la ban dao mau (trang tren nen
     trong suot, xem trao doi 2026-08-28: "logo cho bản tối nè"). Dung 2 the
     <img> xep chong, an/hien bang display qua DUNG 2 duong da co san (media
     prefers-color-scheme + [data-theme]) thay vi doi src bang JS — khop kien
     truc toggle mau da dung cho toan bo file. */
  .logo-mark-alt { display: none; }
  :root[data-theme="dark"] .logo-mark-default { display: none; }
  :root[data-theme="dark"] .logo-mark-alt { display: block; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .logo-mark-default { display: none; }
    :root:not([data-theme="light"]) .logo-mark-alt { display: block; }
  }

  @media print {
    .no-print { display:none !important; }
    body { background:#fff; }
  }

  /* ---------- Toi mau cho class Tailwind rai rac (bg-white, bg-gray-x,
     text-gray-x, border...) ---------- Phan lon markup dung class tien ich
     Tailwind (mau co dinh trong tailwind.css, KHONG doi theo bien CSS) thay
     vi component .card/.mf-x — thay vi sua tay tung the trong ~9000 dong
     markup, ghi de dung tai day cho CA HAI duong (theo he dieu hanh va theo
     lua chon tay). Selector co gan [data-theme]/:root nen ĐO chuyen biet HON
     class Tailwind goc trong tailwind.css -> luon thang, khong can !important
     va khong phu thuoc thu tu file.
     CANH BAO (tu tim ra 2026-08-28): TUYET DOI khong go dau sao roi dau
     gach cheo lien nhau O BAT KY dau trong comment CSS (vd viet "class dau-
     sao" roi xuong dong bat dau bang "gach-cheo ten khac" vo tinh dinh 2 ky
     tu do lai) — no dong comment SOM, bien phan
     con lai (nguyen khoi @media (prefers-color-scheme: dark) { ... } phia
     duoi) thanh CSS that, khien trinh duyet AM THAM bo qua toan bo khoi do —
     day CHINH LA nguyen nhan khien "giao diện hệ thống" (theme='system',
     KHONG gan data-theme) bi loi rieng biet voi "giao diện tối" (theme='dark',
     CO gan data-theme, dung selector rieng ngoai media query nen KHONG dinh
     loi nay) trong nhieu tuan lien tiep ma sua bang code review tay khong
     phat hien duoc — chi lo ra khi dung document.styleSheets[].cssRules
     kiem tra so luong rule THAT SU duoc trinh duyet parse. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .bg-white { background-color: var(--card) !important; }
    :root:not([data-theme="light"]) .bg-gray-50, :root:not([data-theme="light"]) .bg-gray-100 { background-color: var(--surface-2) !important; }
    :root:not([data-theme="light"]) .bg-gray-200 { background-color: var(--line) !important; }
    :root:not([data-theme="light"]) .text-gray-400, :root:not([data-theme="light"]) .text-gray-500, :root:not([data-theme="light"]) .text-gray-600 { color: var(--ink-2) !important; }
    :root:not([data-theme="light"]) .border-gray-200, :root:not([data-theme="light"]) .border-red-200 { border-color: var(--line) !important; }
    :root:not([data-theme="light"]) .border { border-color: var(--line); }
    :root:not([data-theme="light"]) .bg-blue-50 { background-color: var(--accent-soft) !important; }
    :root:not([data-theme="light"]) .bg-yellow-100 { background-color: var(--warn-soft) !important; }
    /* Mau trang thai (danger/ok/warn) dung LAM CHU (tren nen the/box da toi
       qua .bg-white o tren) — vai TEXT nen an toan doi sang token, KHAC voi
       nen nut (bg-red-600/bg-green-600 + chu trang) CO Y GIU NGUYEN vi doi
       sang --danger/--ok (tuned de doc DUOC nhu CHU tren nen toi, vd #f87171
       nhat hon) se lam nut mau nhat + chu trang mat tuong phan — dung 1 loi
       da gap voi --brand (xem feature_light_dark_mode.md, trao doi
       2026-08-27: "mấy cái icon ko đổi được màu à"). Sua vi trao doi
       2026-08-28: "Giao diện tối... đang gặp nhiều lỗi lắm" — vd badge
       "Owner" bg-yellow-100 (-> var(--warn-soft), toi) + text-yellow-800
       (van la vang-tho DANH CHO NEN SANG) = chu gan nhu vo hinh tren nen toi. */
    :root:not([data-theme="light"]) .text-red-500, :root:not([data-theme="light"]) .text-red-600, :root:not([data-theme="light"]) .text-red-700 { color: var(--danger) !important; }
    :root:not([data-theme="light"]) .text-green-600, :root:not([data-theme="light"]) .text-green-700 { color: var(--ok) !important; }
    :root:not([data-theme="light"]) .text-yellow-700, :root:not([data-theme="light"]) .text-yellow-800 { color: var(--warn) !important; }
    :root:not([data-theme="light"]) .text-orange-500 { color: var(--warn) !important; }
    :root:not([data-theme="light"]) .border-red-500 { border-color: var(--danger) !important; }
    :root:not([data-theme="light"]) .border-green-500 { border-color: var(--ok) !important; }
    :root:not([data-theme="light"]) .border-orange-400 { border-color: var(--warn) !important; }
    /* hover:bg-[#hex] la Tailwind arbitrary-value CLASS (khong phai inline
       style) nen KHONG the sua truc tiep thanh var() nhu cac cho khac — phai
       ghi de dung ten class da build san (xem trao doi 2026-08-28). */
    :root:not([data-theme="light"]) .hover\:bg-\[\#f2f3f5\]:hover,
    :root:not([data-theme="light"]) .hover\:bg-\[\#f2f3f6\]:hover,
    :root:not([data-theme="light"]) .hover\:bg-\[\#f4f6f8\]:hover,
    :root:not([data-theme="light"]) .hover\:bg-\[\#fafbfc\]:hover { background-color: var(--surface-2) !important; }
    /* hover:bg-gray-50/200, hover:text-red-500 — cung dang bi bo sot y het
       .bg-gray-50/.text-red-500 goc (chi khac o cho la BIEN THE :hover cua
       Tailwind, phai ghi de rieng, khong tu ke thua tu rule khong-hover — xem
       trao doi 2026-08-28: "chỗ nút đăng xuất... vẫn lỗi" — nut Dang xuat
       trong menu goc tren-trai dung hover:bg-gray-50, sang mau xam SANG khi
       di chuot qua tren nen POPUP DA TOI). */
    :root:not([data-theme="light"]) .hover\:bg-gray-50:hover, :root:not([data-theme="light"]) .hover\:bg-gray-200:hover { background-color: var(--surface-2) !important; }
    :root:not([data-theme="light"]) .hover\:text-red-500:hover { color: var(--danger) !important; }
    :root:not([data-theme="light"]) input, :root:not([data-theme="light"]) select, :root:not([data-theme="light"]) textarea { background-color: var(--card); color: var(--ink); border-color: var(--line); }
  }
  :root[data-theme="dark"] .bg-white { background-color: var(--card) !important; }
  :root[data-theme="dark"] .bg-gray-50, :root[data-theme="dark"] .bg-gray-100 { background-color: var(--surface-2) !important; }
  :root[data-theme="dark"] .bg-gray-200 { background-color: var(--line) !important; }
  :root[data-theme="dark"] .text-gray-400, :root[data-theme="dark"] .text-gray-500, :root[data-theme="dark"] .text-gray-600 { color: var(--ink-2) !important; }
  :root[data-theme="dark"] .border-gray-200, :root[data-theme="dark"] .border-red-200 { border-color: var(--line) !important; }
  :root[data-theme="dark"] .border { border-color: var(--line); }
  :root[data-theme="dark"] .bg-blue-50 { background-color: var(--accent-soft) !important; }
  :root[data-theme="dark"] .bg-yellow-100 { background-color: var(--warn-soft) !important; }
  :root[data-theme="dark"] .text-red-500, :root[data-theme="dark"] .text-red-600, :root[data-theme="dark"] .text-red-700 { color: var(--danger) !important; }
  :root[data-theme="dark"] .text-green-600, :root[data-theme="dark"] .text-green-700 { color: var(--ok) !important; }
  :root[data-theme="dark"] .text-yellow-700, :root[data-theme="dark"] .text-yellow-800 { color: var(--warn) !important; }
  :root[data-theme="dark"] .text-orange-500 { color: var(--warn) !important; }
  :root[data-theme="dark"] .border-red-500 { border-color: var(--danger) !important; }
  :root[data-theme="dark"] .border-green-500 { border-color: var(--ok) !important; }
  :root[data-theme="dark"] .border-orange-400 { border-color: var(--warn) !important; }
  :root[data-theme="dark"] .hover\:bg-\[\#f2f3f5\]:hover,
  :root[data-theme="dark"] .hover\:bg-\[\#f2f3f6\]:hover,
  :root[data-theme="dark"] .hover\:bg-\[\#f4f6f8\]:hover,
  :root[data-theme="dark"] .hover\:bg-\[\#fafbfc\]:hover { background-color: var(--surface-2) !important; }
  :root[data-theme="dark"] .hover\:bg-gray-50:hover, :root[data-theme="dark"] .hover\:bg-gray-200:hover { background-color: var(--surface-2) !important; }
  :root[data-theme="dark"] .hover\:text-red-500:hover { color: var(--danger) !important; }
  :root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background-color: var(--card); color: var(--ink); border-color: var(--line); }
  /* Nut chuyen chieu "Theo kenh / Theo nhan su" (Bao cao kenh -> Performance -> Tong) */
  .pf-seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card)}
  .pf-seg button{padding:7px 16px;font-size:13px;color:var(--ink-2)}
  .pf-seg button.on{background:var(--brand);color:#fff;font-weight:600}

/* ===== Bieu do CHUAN (theo Dashboard Tong): nen luoi mo, duong 2px + vung to nhat, cham cuoi, tooltip khi re chuot.
   Khong dung SVG keo gian cho hinh tron/chu: duong ve bang SVG non-scaling-stroke, cham/chu/tooltip la HTML. ===== */
.lc{position:relative}
.lc-plot{position:relative;margin-left:var(--lc-ml,0px)}
.lc-g{position:absolute;left:0;right:0;height:0;border-top:1px dashed var(--line)}
.lc-g.base{border-top:1px solid var(--line)}
.lc-yl{position:absolute;left:calc(var(--lc-ml,0px) * -1);width:calc(var(--lc-ml,0px) - 8px);text-align:right;font-size:11px;color:var(--ink-3);transform:translateY(-50%);font-variant-numeric:tabular-nums}
.lc-in{position:absolute;left:10px;right:10px;top:0;bottom:0}
.lc-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lc-svg polyline{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.lc-svg polygon{opacity:.11}
.lc-dot{position:absolute;width:9px;height:9px;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 3px var(--card)}
.lc-hit{position:absolute;top:0;bottom:0}
.lc-hit .lc-guide{display:none;position:absolute;left:50%;top:0;bottom:0;border-left:1px solid var(--line)}
.lc-hit .lc-hd{display:none;position:absolute;left:50%;width:9px;height:9px;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 3px var(--card)}
.lc-hit:hover .lc-guide,.lc-hit:hover .lc-hd{display:block}
.lc-tip{display:none;position:absolute;top:-6px;left:50%;transform:translate(-50%,-100%);z-index:30;min-width:130px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 11px;box-shadow:0 6px 22px rgba(0,0,0,.14);font-size:12px;white-space:nowrap;pointer-events:none}
.lc-hit:hover .lc-tip{display:block}
.lc-tip.l{left:0;transform:translate(-14%,-100%)}
.lc-tip.r{left:auto;right:0;transform:translate(14%,-100%)}
.lc-tip .d{font-size:11px;color:var(--ink-3);margin-bottom:5px}
.lc-tip .r1{display:flex;align-items:center;gap:7px;margin-top:3px;color:var(--ink-2)}
.lc-tip .r1 i{width:8px;height:8px;border-radius:2px;flex:none}
.lc-tip .r1 b{margin-left:auto;padding-left:14px;color:var(--ink);font-variant-numeric:tabular-nums}
.lc-x{position:relative;height:24px;margin-top:6px}
.lc-x span{position:absolute;top:0;font-size:11px;color:var(--ink-3);transform:translateX(-50%);white-space:nowrap}
.lc-x span.f{transform:none}
.lc-x span.e{transform:translateX(-100%)}
/* cot so sanh 2 ky (nhom thu hang tu khoa...) */
.cc{display:grid;align-items:end;column-gap:8px}
.cc-bars{height:var(--cc-h,170px);display:flex;align-items:flex-end;justify-content:center;gap:5px;border-bottom:1px solid var(--line)}
.cc-bar{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;width:min(44px,42%);height:100%}
.cc-bar .v{font-size:11.5px;font-weight:600;color:var(--ink-2);margin-bottom:4px;font-variant-numeric:tabular-nums}
.cc-bar i{display:block;width:100%;border-radius:5px 5px 0 0;min-height:2px}
.cc-l{text-align:center;font-size:12px;color:var(--ink-2);padding-top:8px}
.cc-leg{display:flex;gap:16px;font-size:12px;color:var(--ink-2);margin-bottom:10px}
.cc-leg i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:-1px}
/* top N ngang — cung kieu "Trang duoc xem nhieu nhat" cua Dashboard Tong */
.hb-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;align-items:center;margin:11px 0;font-size:13px}
.hb-row .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb-row .val{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.hb-row .track{grid-column:1 / -1;height:6px;border-radius:3px;background:var(--surface-2)}
.hb-row .track div{height:6px;border-radius:3px}

/* Nhan tai khoan quang cao tren dong campaign (khi kenh co >= 2 tai khoan) */
.acct-tag{font-size:10.5px;font-weight:600;line-height:1;padding:3px 7px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line);white-space:nowrap}

/* Dashboard Tong: khoi Performance/SEO/Brand thu gon duoc. Dong tieu de bam duoc; khi dong hien 3-4 so chinh. */
.od-sec-toggle{cursor:pointer;user-select:none;-webkit-user-select:none;flex-wrap:wrap;border-radius:10px;margin-left:-6px;margin-right:-6px;padding:5px 6px}
.od-sec-toggle:hover{background:var(--surface-2)}
.od-sec-toggle:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.od-sec-chev{margin-left:auto;flex:none;width:26px;height:26px;display:flex;align-items:center;justify-content:center;color:var(--ink-2);font-size:16px;line-height:1;transition:transform .15s}
.od-sec-chev.is-closed{transform:rotate(-90deg)}
.od-sec-sum{display:flex;flex-wrap:wrap;gap:2px 18px;margin-left:8px;min-width:0;font-size:12.5px;color:var(--ink-3)}
.od-sec-sum span{white-space:nowrap}
.od-sec-sum b{margin-left:5px;color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
@media (max-width:760px){.od-sec-sum{flex-basis:100%;order:3;margin:2px 0 0 38px}}
@media (prefers-reduced-motion:reduce){.od-sec-chev{transition:none}}

/* Bang "Lead theo vung / san pham" (Bao cao kenh -> Performance -> Tong): nhieu cot (12+) nen bo table-layout co dinh,
   cot toi thieu 108px, cot dau dinh trai khi cuon ngang. */
table.pf.pf-lead{table-layout:auto;min-width:0}
table.pf.pf-lead th,table.pf.pf-lead td{padding:9px 12px}
table.pf.pf-lead thead th{padding:14px 12px 10px}
table.pf.pf-lead td:not(:first-child):not(:has(.pf-sub)),table.pf.pf-lead th:not(:first-child){padding-right:12px}
table.pf.pf-lead th:not(:first-child),table.pf.pf-lead td:not(:first-child){min-width:108px}
table.pf.pf-lead th:first-child,table.pf.pf-lead td:first-child{width:190px;min-width:190px;position:sticky;left:0;z-index:1;background:var(--card)}
table.pf.pf-lead .pf-key td:first-child,table.pf.pf-lead .pf-group td:first-child{background:var(--surface-2)}

/* Chon chieu xem (Theo kenh / nhan su / vung / san pham / hinh thuc chay): 5 nut, man hep thi cuon ngang trong khung */
@media (max-width:760px){.pf-seg{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.pf-seg button{white-space:nowrap;flex:none;padding:7px 12px}}