:root{
    --wood:#9c7c54; --wood-d:#7a5f3e; --wood-dd:#5e4a32;
    --ivy:#2f5d3a; --ivy-l:#4a8055; --gold:#c8902b;
    --cream:#f6f2e9; --paper:#fffdf8; --ink:#3a3228; --muted:#8a7d68; --line:#e6dcc9;
  }

  /* ============================================================
     IVY HUB DESIGN TOKENS v2 — Brand The Ivy Haus (CHỐT 2026-06-04)
     Override block :root cũ phía trên (CSS cascade — block sau thắng).
     Canonical spec: memory/hub_design_system_v2.md
     ============================================================ */
  :root{
    /* === BRAND CORE === */
    --color-terracotta-50:  #FBF1EA;
    --color-terracotta-100: #F3D8C7;
    --color-terracotta-300: #D99970;
    --color-terracotta-500: #C77D49;
    --color-terracotta-600: #B76B3C;
    --color-terracotta-700: #965533;

    --color-walnut-50:  #F3EFEC;
    --color-walnut-100: #DED5CF;
    --color-walnut-300: #8B7669;
    --color-walnut-500: #4C3A31;
    --color-walnut-700: #2B211C;
    --color-walnut-900: #17110E;

    --color-ivory: #F6F0E8;
    --color-beige: #EAE1D8;
    --color-white: #FFFFFF;

    /* === SEMANTIC === */
    --bg-app:          #F6F0E8;
    --bg-surface:      #FFFFFF;
    --bg-surface-soft: #FBF7F2;
    --bg-muted:        #EAE1D8;

    --text-primary:   #2B211C;
    --text-secondary: #5F5147;
    --text-muted:     #8A7B70;
    --text-inverse:   #F6F0E8;

    --border-soft:   #E6DAD0;
    --border-strong: #CDBFB3;

    --accent:       #C77D49;
    --accent-hover: #B76B3C;
    --accent-soft:  #FBF1EA;

    --danger:       #B84A3A;  --danger-soft:  #F9EDEA;
    --success:      #6F8A57;  --success-soft: #EEF4EA;
    --warning:      #B9852F;  --warning-soft: #FBF2DE;

    /* === RADIUS === */
    --radius-sm: 6px;  --radius-md: 10px;  --radius-lg: 16px;  --radius-xl: 22px;

    /* === SHADOW (walnut tint, warm) === */
    --shadow-xs: 0 1px 2px  rgba(43, 33, 28, 0.06);
    --shadow-sm: 0 6px 18px rgba(43, 33, 28, 0.08);
    --shadow-md: 0 16px 40px rgba(43, 33, 28, 0.12);

    /* === SPACING (4px base) === */
    --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
    --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;

    /* === LAYOUT === */
    --sidebar-width: 260px;
    --topbar-height: 64px;
    --content-max:   1560px;

    /* === FONTS === */
    --font-sans:  "Be Vietnam Pro","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
    --font-serif: "Lora",Georgia,serif;
    --font-mono:  "Roboto Mono","SFMono-Regular",Consolas,monospace;

    /* === BACKWARD-COMPAT ALIASES — 48 chỗ usage cũ tự "khoác áo mới" === */
    --wood-dd: var(--color-walnut-700);   /* #2B211C — text/heading chính */
    --wood-d:  var(--color-walnut-500);   /* #4C3A31 — text phụ */
    --wood:    var(--color-walnut-300);   /* #8B7669 — text muted */
    --cream:   var(--color-ivory);        /* #F6F0E8 — background app */
    --paper:   var(--color-white);        /* #FFFFFF — surface card */
    --ink:     var(--color-walnut-700);   /* #2B211C — body text */
    --muted:   var(--text-muted);         /* #9B8B82 */
    --line:    var(--border-soft);        /* #E6DAD0 — border */
    --ivy:     var(--color-terracotta-500);  /* CTA login: green → TERRACOTTA */
    --ivy-l:   var(--color-terracotta-300);  /* gradient stop */
    --gold:    var(--color-terracotta-500);  /* gold deprecated → terracotta */
  }
  /* ============================================================ */

  /* ============================================================
     LOGIN SPLIT-SCREEN (v2 UI merge) — chỉ apply cho #login
     ============================================================ */
  #login{padding:0;background:var(--c-ivory);min-height:100vh}
  #login.hidden{display:none!important}
  .login-wrap{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background:var(--c-ivory)}
  .login-hero{position:relative;overflow:hidden;background:
    radial-gradient(circle at 30% 20%, rgba(199,125,73,.18) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(139,118,105,.22) 0%, transparent 60%),
    linear-gradient(135deg, #EAE1D8 0%, #DED5CF 50%, #C9B8A8 100%);
    display:flex;align-items:center;justify-content:center;padding:60px}
  .login-hero::before{content:'';position:absolute;inset:0;background-image:
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.1) 0%, transparent 40%),
    radial-gradient(circle at 20% 70%, rgba(43,33,28,.05) 0%, transparent 50%)}
  .hero-content{position:relative;text-align:center;max-width:480px;z-index:2}
  .hero-logo{margin-bottom:24px}
  .hero-logo img{max-width:380px;width:100%;height:auto;display:block;margin:0 auto;filter:drop-shadow(0 4px 12px rgba(43,33,28,.18))}
  .hero-tagline{font-family:'Lora',Georgia,serif;font-style:italic;font-size:20px;color:var(--c-walnut-500);line-height:1.5;margin-top:32px;max-width:380px;margin:32px auto 0}
  .hero-tagline::before,.hero-tagline::after{content:'';display:block;width:40px;height:1px;background:var(--c-walnut-300);margin:18px auto;opacity:.5}
  .hero-meta{position:absolute;bottom:40px;left:60px;right:60px;display:flex;justify-content:space-between;font-size:12px;color:var(--c-walnut-500);font-weight:500;letter-spacing:.1em;text-transform:uppercase;opacity:.7;z-index:2}
  .login-form-wrap{display:flex;align-items:center;justify-content:center;padding:60px;background:var(--c-ivory)}
  .login-form{width:100%;max-width:420px}
  .lf-title{font-family:'Be Vietnam Pro',sans-serif;font-size:28px;font-weight:700;color:var(--text-primary);margin-bottom:8px}
  .lf-sub{font-size:14px;color:var(--text-secondary);margin-bottom:40px}
  .lf-field{margin-bottom:20px}
  .lf-field label{display:block;font-size:12px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;margin-top:0}
  .lf-input{width:100%;height:48px;padding:0 16px;border:1px solid var(--border-soft);border-radius:var(--radius-md,10px);background:#fff;font-family:'Be Vietnam Pro',sans-serif;font-size:15px;color:var(--text-primary);transition:160ms ease;outline:none}
  .lf-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(199,125,73,.14)}
  .lf-input::placeholder{color:var(--text-muted)}
  .lf-row{display:flex;justify-content:space-between;align-items:center;margin:24px 0 28px;font-size:13px}
  .lf-row label{display:inline-flex;align-items:center;gap:8px;color:var(--text-secondary);cursor:pointer;font-weight:500;margin:0}
  .lf-row a{color:var(--accent);font-weight:500;text-decoration:none;cursor:pointer}
  .lf-row a:hover{text-decoration:underline}
  .lf-btn{width:100%;height:52px;border:none;background:linear-gradient(135deg,var(--c-terracotta-500),var(--c-terracotta-300));color:#fff;font-family:'Be Vietnam Pro',sans-serif;font-size:16px;font-weight:600;border-radius:var(--radius-md,10px);cursor:pointer;letter-spacing:.04em;box-shadow:0 8px 20px rgba(199,125,73,.28);transition:transform 160ms ease, box-shadow 160ms ease}
  .lf-btn:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(199,125,73,.36)}
  .lf-btn:disabled{opacity:.6;cursor:wait;transform:none}
  .lf-err{font-size:13px;color:var(--danger);min-height:18px;margin:8px 0;text-align:center}
  .lf-err.ok{color:var(--success)}
  .lf-foot{margin-top:48px;font-size:11px;color:var(--text-muted);text-align:center;line-height:1.7}

  /* Responsive: stack login on small */
  @media (max-width:768px){
    .login-wrap{grid-template-columns:1fr}
    .login-hero{padding:40px 24px;min-height:300px}
    .hero-meta{display:none}
    .login-form-wrap{padding:32px 24px}
  }

  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:'Be Vietnam Pro','Segoe UI',system-ui,sans-serif;color:var(--ink);
    background:var(--cream);
    background-image:radial-gradient(circle at 20% 20%, rgba(156,124,84,.06), transparent 40%),
                     radial-gradient(circle at 80% 70%, rgba(47,93,58,.05), transparent 40%);
    line-height:1.6;min-height:100vh}
  h1,h2,h3,.serif{font-family:'Lora','Times New Roman',serif}
  .hidden{display:none!important}

  /* ===== LOGIN ===== */
  #login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
  .card{background:var(--paper);border:1px solid var(--line);border-radius:20px;max-width:430px;width:100%;
    box-shadow:0 20px 50px rgba(94,74,50,.15);overflow:hidden}
  .card .top{background:linear-gradient(135deg,var(--wood-dd),var(--wood) 90%);color:#fff;padding:34px 32px 28px;text-align:center;position:relative}
  .card .top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;
    background:repeating-linear-gradient(90deg,var(--gold),var(--gold) 8px,transparent 8px,transparent 16px);opacity:.5}
  .seal{width:64px;height:64px;border-radius:50%;background:var(--cream);color:var(--wood-dd);
    display:flex;align-items:center;justify-content:center;font-family:'Lora','Times New Roman',serif;font-size:28px;font-weight:700;
    margin:0 auto 14px;box-shadow:0 4px 12px rgba(0,0,0,.2);border:3px solid var(--gold);overflow:hidden}
  .seal img{width:78%;height:78%;object-fit:contain;display:block}
  .card .top h1{font-size:27px;letter-spacing:1px}
  .card .top p{font-size:13.5px;opacity:.9;margin-top:5px;font-style:italic}
  .card .body{padding:30px 32px 26px}
  .greet{text-align:center;color:var(--wood-d);font-size:14.5px;margin-bottom:20px}
  label{display:block;font-size:13px;color:var(--wood-d);margin:14px 0 6px;font-weight:600}
  input[type=email],input[type=password]{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:11px;
    font-size:14.5px;background:#fffefb;transition:.15s;font-family:inherit}
  input:focus{outline:none;border-color:var(--ivy-l);box-shadow:0 0 0 3px rgba(74,128,85,.12)}
  .row{display:flex;align-items:center;justify-content:space-between;margin-top:14px;font-size:13px}
  .remember{display:flex;align-items:center;gap:7px;color:var(--muted);cursor:pointer}
  .remember input{width:16px;height:16px;accent-color:var(--ivy)}
  .forgot{color:var(--wood);text-decoration:none;cursor:pointer}
  .btn{width:100%;margin-top:22px;padding:13px;border:none;border-radius:12px;cursor:pointer;
    background:linear-gradient(135deg,var(--ivy),var(--ivy-l));color:#fff;font-size:15.5px;font-weight:600;
    font-family:'Lora','Times New Roman',serif;letter-spacing:.5px;transition:.15s;box-shadow:0 4px 14px rgba(47,93,58,.25)}
  .btn:hover{transform:translateY(-2px);box-shadow:0 7px 20px rgba(47,93,58,.35)}
  .btn:disabled{opacity:.6;cursor:wait;transform:none}
  .err{color:#b04a4a;font-size:13px;text-align:center;margin-top:14px;min-height:18px}
  .ok{color:var(--ivy)}

  /* ===== APP (sau login) ===== */
  #app{width:100%;margin:0;padding:0}
  .topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--line);margin-bottom:8px;flex-wrap:wrap;gap:12px}
  .topbar .brand{display:flex;align-items:center;gap:12px}
  .topbar .seal{width:42px;height:42px;font-size:19px;margin:0;border-width:2px}
  .topbar .who{font-size:13px;color:var(--muted)}
  .topbar .who b{color:var(--ivy);font-size:14.5px}
  .logout{background:none;border:1px solid var(--line);color:var(--wood-d);padding:8px 15px;border-radius:10px;cursor:pointer;font-size:13px;font-family:inherit}
  .logout:hover{background:var(--cream)}

  .hero{background:linear-gradient(135deg,#fffaf0,#f3ecdb);border:1px solid var(--line);border-radius:18px;padding:30px 32px;margin:18px 0 8px;position:relative;overflow:hidden}
  .hero::before{content:"🌿";position:absolute;right:24px;top:18px;font-size:64px;opacity:.13}
  .hero h2{font-size:23px;color:var(--wood-dd);margin-bottom:8px}
  .hero .story{font-size:14px;color:#6b5e49;max-width:680px;font-style:italic;border-left:3px solid var(--gold);padding-left:14px;margin:12px 0}
  .hero .motto{font-size:13.5px;color:var(--ivy);margin-top:10px}

  .sec{margin:30px 0 14px;display:flex;align-items:center;gap:10px}
  .sec h3{font-size:17px;color:var(--wood-dd)}
  .sec .ln{flex:1;height:1px;background:var(--line)}

  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:15px}
  .tile{background:var(--paper);border:1px solid var(--line);border-radius:15px;padding:19px;cursor:pointer;transition:.16s;position:relative}
  .tile:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(124,95,62,.14);border-color:var(--wood)}
  .tile .ic{font-size:28px;margin-bottom:8px}
  .tile h4{font-size:15.5px;color:var(--wood-dd);margin-bottom:5px}
  .tile p{font-size:12.5px;color:var(--muted);min-height:40px}
  .tile .badge{position:absolute;top:14px;right:14px;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:9px}
  .badge.run{background:#e3f1e6;color:#3a8a4f}
  .badge.soon{background:#f3eee6;color:var(--wood)}

  /* ===== Việc cần làm (data thật từ Supabase) ===== */
  .tasks{background:var(--paper);border:1px solid var(--line);border-radius:15px;padding:18px 20px;margin-top:6px}
  .tasks .titlebar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
  .tasks h4{font-size:15px;color:var(--wood-dd)}
  .tasks .live{font-size:11px;color:var(--ivy);background:#e3f1e6;padding:2px 8px;border-radius:8px}
  .task{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px dashed var(--line);font-size:13.5px}
  .task:first-of-type{border-top:none}
  .task .st{font-size:11px;font-weight:700;padding:2px 8px;border-radius:7px;white-space:nowrap}
  .st.todo{background:#f3eee6;color:var(--wood)} .st.doing{background:#e8eef6;color:#4a6fa5} .st.done{background:#e3f1e6;color:#3a8a4f}
  .task .due{margin-left:auto;font-size:11.5px;color:var(--muted)}
  .empty{font-size:13px;color:var(--muted);font-style:italic;padding:6px 0}

  .foot{text-align:center;color:var(--muted);font-size:12px;margin-top:36px;padding-top:22px;border-top:1px solid var(--line)}

  /* ===== TILE CLICKABLE + MODULE ===== */
  .tile.clickable{cursor:pointer;transition:transform .12s,box-shadow .12s}
  .tile.clickable:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(94,74,50,.16);border-color:var(--wood)}
  .tile .openhint{position:absolute;right:14px;bottom:12px;font-size:12px;font-weight:700;color:var(--ivy)}
  .tile{position:relative}

  /* ===== MODAL ===== */
  .modal{position:fixed;inset:0;background:rgba(60,48,34,.45);backdrop-filter:blur(3px);
    display:flex;align-items:flex-start;justify-content:center;padding:34px 16px;z-index:50;overflow:auto}
  .modal-card{background:var(--paper);border:1px solid var(--line);border-radius:18px;max-width:1080px;width:100%;
    box-shadow:0 24px 60px rgba(60,48,34,.35);overflow:hidden}
  .modal-card.wide{max-width:min(1560px,96vw)}
  .modal-head{display:flex;align-items:center;gap:12px;padding:18px 24px;
    background:linear-gradient(135deg,var(--wood-dd),var(--wood) 95%);color:#fff}
  .modal-head h3{font-family:'Lora','Times New Roman',serif;font-size:20px;flex:1}
  .modal-x{background:rgba(255,255,255,.18);border:none;color:#fff;width:34px;height:34px;border-radius:9px;
    font-size:16px;cursor:pointer;transition:background .12s}
  .modal-x:hover{background:rgba(255,255,255,.34)}
  /* Badge độ tươi trên header tối (walnut/wood) — pill sáng mờ + chấm màu */
  .modal-fresh-slot{display:inline-flex;align-items:center}
  .ivy-fresh{display:inline-flex;align-items:center;gap:6px;font-family:'Be Vietnam Pro',sans-serif;
    font-size:11.5px;font-weight:600;line-height:1;white-space:nowrap;padding:4px 10px;border-radius:999px;
    background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.22);letter-spacing:.01em}
  .ivy-fresh__dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 2px rgba(255,255,255,.18)}
  .ivy-fresh--green .ivy-fresh__dot{background:#5FB67A}
  .ivy-fresh--amber .ivy-fresh__dot{background:#E6B450}
  .ivy-fresh--grey  .ivy-fresh__dot{background:#B9AC9C}
  .ivy-fresh--grey{opacity:.82}
  .ivy-card .ivy-fresh,.ivy-tip .ivy-fresh{background:rgba(199,125,73,.12);color:var(--color-walnut-700,#2B211C);border-color:rgba(199,125,73,.30)}
  @media(max-width:560px){.ivy-fresh{font-size:10.5px;padding:3px 8px}}
  .modal-body{padding:22px 24px 26px}
  .mb-meta{font-size:12.5px;color:var(--muted);margin-bottom:16px}
  .mb-meta b{color:var(--wood-d)}

  /* ===== KPI CARDS ===== */
  .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px}
  .kpi{background:var(--cream);border:1px solid var(--line);border-radius:13px;padding:14px 16px}
  .kpi .lab{font-size:12px;color:var(--muted);margin-bottom:5px}
  .kpi .val{font-size:23px;font-weight:700;font-family:'Lora','Times New Roman',serif;color:var(--wood-dd);line-height:1.1}
  .kpi .sub{font-size:11.5px;color:var(--muted);margin-top:3px}
  .kpi.good .val{color:var(--ivy)} .kpi.warn .val{color:#b5852b}

  /* ===== TABLE ===== */
  .ftab{width:100%;border-collapse:collapse;font-size:13px}
  .ftab th,.ftab td{padding:9px 8px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
  .ftab th{font-size:11.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.3px}
  .ftab th:first-child,.ftab td:first-child{text-align:left;font-weight:700;color:var(--wood-dd)}
  .ftab tbody tr:hover{background:var(--cream)}
  .ftab .mlow{color:#c0392b;font-weight:700} .ftab .mmid{color:#b5852b} .ftab .mhi{color:#3a8a4f;font-weight:700}
  .loading{text-align:center;color:var(--muted);padding:30px;font-style:italic}
  .denied{text-align:center;color:#b5852b;padding:30px}
  .dutyrow{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px dashed var(--line);font-size:13.5px;cursor:pointer}
  .dutyrow input{width:17px;height:17px;accent-color:var(--ivy);flex:none}
  .dutyrow .dt{flex:1}
  .dutyrow input:checked + .dt{color:var(--muted);text-decoration:line-through}
  .dutyrow .tag{font-size:11px;background:#e8eef6;color:#4a6fa5;padding:2px 8px;border-radius:7px;white-space:nowrap}
  .dutyrow .kpi{font-size:11px;background:#fdf0e3;color:#b5852b;padding:2px 8px;border-radius:7px;white-space:nowrap}

  /* ===== FBADS MODULE ===== */
  .fb-tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:0}
  .fb-tab{padding:9px 16px;border-radius:9px 9px 0 0;border:1px solid transparent;cursor:pointer;font-size:13.5px;font-weight:600;
    background:transparent;color:var(--muted);font-family:inherit;transition:.15s;margin-bottom:-1px}
  .fb-tab:hover{color:var(--wood-dd);background:rgba(156,124,84,.06)}
  .fb-tab.active{background:var(--paper);border-color:var(--line);border-bottom-color:var(--paper);color:var(--ivy)}
  .fb-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--cream);border:1px solid var(--line);
    border-radius:10px;padding:10px 14px;margin-bottom:14px;font-size:13px}
  .fb-bar label{margin:0;font-size:12.5px;color:var(--wood-d);font-weight:600}
  .fb-bar input[type=date]{padding:6px 10px;border:1px solid var(--line);border-radius:7px;font-size:13px;font-family:inherit;background:#fff}
  .fb-bar .preset-btn{padding:5px 10px;border:1px solid var(--line);background:#fff;border-radius:7px;cursor:pointer;
    font-size:12px;color:var(--wood-d);font-family:inherit}
  .fb-bar .preset-btn:hover,.fb-bar .preset-btn.active{background:var(--ivy);color:#fff;border-color:var(--ivy)}
  .fb-bar .spacer{flex:1}
  .fb-bar .vat-edit{padding:5px 9px;border:1px solid var(--gold);background:#fff;border-radius:6px;width:70px;text-align:center;font-weight:700;color:var(--wood-dd);font-family:inherit;font-size:13px}

  /* Bảng nhập số */
  .fb-input-tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
  .fb-input-tbl th{background:var(--c-ivory);color:var(--c-walnut-500);font-weight:700;padding:12px 10px;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;text-align:center;border-bottom:1.5px solid var(--bd-strong);font-family:'Be Vietnam Pro',sans-serif}
  .fb-input-tbl th.sale-col{background:var(--success-soft);color:var(--success)}
  .fb-input-tbl th.ads-col{background:var(--accent-soft);color:var(--accent)}
  .fb-input-tbl td{padding:8px;border-bottom:1px solid var(--line);text-align:right;background:#fff}
  .fb-input-tbl td.sp-name{text-align:left;font-weight:700;color:var(--wood-dd);background:#f7f3eb;padding-left:14px;border-right:1px solid var(--line)}
  .fb-input-tbl td.kpi-cell{font-weight:700;background:#f9f6ee;color:var(--wood-dd)}
  .fb-input-tbl td.readonly-cell{color:#bbb;background:#fafafa}
  .fb-input-tbl input.fb-num{width:100%;padding:7px 8px;border:1px solid var(--line);border-radius:6px;text-align:right;
    font-family:inherit;font-size:13px;background:#fffdf5;color:#0070C0;font-weight:600}
  .fb-input-tbl input.fb-num:focus{outline:none;border-color:var(--ivy-l);box-shadow:0 0 0 2px rgba(74,128,85,.12)}
  .fb-input-tbl input.fb-num.saving{background:#fff8e1}
  .fb-input-tbl input.fb-num.saved{background:#e8f5e9;transition:background .8s}
  .fb-input-tbl input.fb-num.readonly{background:#fafafa;color:#999;cursor:not-allowed}
  .fb-input-tbl tr.total-row td{background:var(--c-walnut-700);color:#fff;font-weight:700;padding:11px 8px;font-family:'Roboto Mono',monospace;font-size:13px}
  .fb-input-tbl tr.total-row td.sp-name{background:var(--c-walnut-900);color:#fff;font-family:'Be Vietnam Pro',sans-serif}
  .fb-status{padding:8px 12px;background:#fff8e1;border:1px solid #ffd54f;border-radius:8px;font-size:12px;color:#9C5700;margin-bottom:10px}
  .fb-status.ok{background:#e8f5e9;border-color:#81c784;color:#1b5e20}

  /* KPI cards */
  .fb-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:14px 0 18px}
  .fb-kpi .card{background:#fff;border:1px solid var(--border-soft);border-radius:14px;padding:18px 20px;box-shadow:0 1px 2px rgba(43,33,28,.04)}
  .fb-kpi .card .lab{font-size:10.5px;color:var(--text-muted);font-weight:700;text-transform:uppercase;letter-spacing:.12em;margin-bottom:10px;font-family:'Be Vietnam Pro',sans-serif}
  .fb-kpi .card .val{font-size:26px;font-weight:600;color:var(--text-primary);font-family:'Roboto Mono',monospace;font-variant-numeric:tabular-nums;line-height:1.1;letter-spacing:-0.01em}
  .fb-kpi .card .sub{font-size:11.5px;color:var(--text-secondary);margin-top:6px;font-weight:500}
  .fb-kpi .card.roas-green{background:#fff;border-left:3px solid var(--success)}
  .fb-kpi .card.roas-yellow{background:#fff;border-left:3px solid var(--warning)}
  .fb-kpi .card.roas-red{background:#fff;border-left:3px solid var(--danger)}
  .fb-kpi .card.roas-green .val{color:var(--success)}
  .fb-kpi .card.roas-yellow .val{color:var(--warning)}
  .fb-kpi .card.roas-red .val{color:var(--danger)}

  /* Heatmap */
  .fb-heatmap{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px}
  .fb-heatmap table{border-collapse:collapse;font-size:11px;width:100%}
  .fb-heatmap th{background:var(--c-ivory);color:var(--c-walnut-500);padding:8px 4px;font-size:10.5px;font-weight:700;border:1px solid var(--border-soft);text-align:center;white-space:nowrap;text-transform:uppercase;letter-spacing:.06em;font-family:'Be Vietnam Pro',sans-serif}
  .fb-heatmap th.sp{background:var(--c-walnut-700);color:#fff;text-align:left;padding-left:10px;min-width:100px;position:sticky;left:0;z-index:2;font-size:11px}
  .fb-heatmap td{padding:7px 3px;text-align:center;border:1px solid var(--border-soft);font-weight:600;min-width:38px;font-family:'Roboto Mono',monospace;font-variant-numeric:tabular-nums}
  .fb-heatmap td.sp{background:var(--bg-soft);color:var(--text-primary);text-align:left;padding-left:10px;font-weight:650;font-size:12px;position:sticky;left:0;z-index:1;border-right:2px solid var(--c-walnut-300);font-family:'Be Vietnam Pro',sans-serif}
  .fb-roas-1{background:#00B050;color:#fff} .fb-roas-2{background:#C6EFCE;color:#006100}
  .fb-roas-3{background:#FFEB9C;color:#9C5700} .fb-roas-4{background:#FFC7CE;color:#9C0006}
  .fb-roas-0{background:#fafafa;color:#bbb}

  /* Bảng tổng kết SP */
  .fb-summary{width:100%;border-collapse:collapse;font-size:13px;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:12px}
  .fb-summary th{background:#4F4F4F;color:#fff;padding:11px 8px;font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.3px}
  .fb-summary td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:right;font-weight:600}
  .fb-summary td:first-child{text-align:left;color:var(--wood-dd);padding-left:14px;background:#f7f3eb}
  .fb-summary td.roas-cell{font-size:15px;text-align:center;font-weight:700}
  .fb-summary tr.total td{background:#4F4F4F;color:#fff;font-weight:700;padding:12px 8px}
  .fb-summary tr.total td:first-child{background:#3a3a3a;color:#fff}
  .fb-verdict{padding:4px 10px;border-radius:14px;font-size:12px;font-weight:700;display:inline-block;white-space:nowrap}
  .fb-verdict.keep{background:#e8f5e9;color:#1b5e20} .fb-verdict.fix{background:#fff8e1;color:#9C5700}
  .fb-verdict.stop{background:#ffebee;color:#b71c1c} .fb-verdict.none{background:#f0f0f0;color:#888}

  /* Ranking sale */
  .fb-rank{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:14px}
  .fb-rank .item{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px}
  .fb-rank .item .name{font-weight:700;color:var(--wood-dd);font-size:14px;margin-bottom:3px}
  .fb-rank .item .pct{font-size:11px;color:var(--muted)}
  .fb-rank .item .ds{font-size:18px;font-weight:700;color:var(--ivy);font-family:'Lora',serif;margin-top:4px}
  .fb-rank .item .target{font-size:11px;color:var(--muted);margin-top:4px}
  .fb-rank .item .bar{height:6px;background:#eee;border-radius:3px;margin-top:6px;overflow:hidden}
  .fb-rank .item .bar > span{display:block;height:100%;background:linear-gradient(90deg,var(--ivy),var(--ivy-l));border-radius:3px}
  .fb-rank .item .bar > span.over{background:linear-gradient(90deg,#c8902b,#e0a040)}

  /* Cảnh báo */
  .fb-alerts{margin-top:14px}
  .fb-alert{padding:10px 14px;border-radius:9px;margin-bottom:6px;font-size:13px;display:flex;align-items:center;gap:10px}
  .fb-alert.red{background:#ffebee;border-left:4px solid #b71c1c;color:#b71c1c}
  .fb-alert.yellow{background:#fff8e1;border-left:4px solid #9C5700;color:#9C5700}
  .fb-alert.green{background:#e8f5e9;border-left:4px solid #1b5e20;color:#1b5e20}
  .fb-alert .lvl{font-weight:700;white-space:nowrap}
  .fb-alert .msg{flex:1}
  .fb-section-title{font-size:14px;color:var(--wood-dd);font-weight:700;margin:18px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line);font-family:'Lora',serif}

  /* ============================================================
     DASHBOARD APP SHELL v2 (sidebar + topbar + welcome + team)
     ============================================================ */
  #app:not(.hidden){display:block !important;background:var(--bg-app)}
  #app.hidden{display:none !important}
  .app-shell{display:grid;grid-template-columns:300px 1fr;min-height:100vh;background:var(--bg-app)}
  .sidebar-v2{background:#fff;color:var(--text-primary);padding:28px 0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;border-right:1px solid var(--border-soft);box-shadow:1px 0 0 rgba(43,33,28,.02)}
  .sb-logo{padding:0 24px 24px;border-bottom:1px solid var(--border-soft);display:flex;align-items:center;gap:12px}
  .sb-logo img{width:34px;height:34px;object-fit:contain;flex-shrink:0}
  .sb-logo .brand{font-family:'Be Vietnam Pro',sans-serif;font-weight:700;font-size:15px;letter-spacing:.14em;line-height:1.2;color:var(--c-walnut-700)}
  .sb-logo .brand .ivy{color:var(--c-terracotta-500)}
  .sb-logo .brand small{display:block;font-weight:500;font-size:9.5px;letter-spacing:.18em;color:var(--text-muted);text-transform:uppercase;margin-top:4px}
  .sb-nav{padding:18px 14px;flex:1;overflow-y:auto}
  .sb-group{margin-bottom:22px}
  .sb-group-title{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8A6F5C;padding:0 16px 10px}
  .sb-item{display:flex;align-items:center;gap:12px;padding:11px 16px;border-radius:10px;color:#5F5147;font-size:15px;font-weight:500;cursor:pointer;transition:120ms ease;margin-bottom:2px;position:relative;font-family:'Be Vietnam Pro',sans-serif}
  .sb-item:hover{background:var(--bg-soft);color:var(--text-primary)}
  .sb-item.active{background:#F4E8DC;color:#3A2B22;font-weight:600}
  .sb-item.active::before{content:'';position:absolute;left:-14px;top:6px;bottom:6px;width:3px;background:#C8733D;border-radius:0 3px 3px 0}
  .sb-item svg.ic{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
  .sb-item .badge{margin-left:auto;background:#dc2626;color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;line-height:1.4;box-shadow:0 1px 5px rgba(220,38,38,.5)}
  .sb-item.active .badge{background:#b91c1c}
  .sb-foot{padding:14px 18px;border-top:1px solid var(--border-soft);display:flex;align-items:center;gap:12px;background:var(--bg-soft)}
  .sb-avatar{width:40px;height:40px;border-radius:50%;background:var(--c-terracotta-500);overflow:hidden;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#fff;flex-shrink:0;position:relative;border:2px solid #fff;box-shadow:0 2px 8px rgba(43,33,28,.12)}
  .sb-avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
  .sb-avatar::after{content:'';position:absolute;bottom:-2px;right:-2px;width:12px;height:12px;border-radius:50%;background:var(--success);border:2px solid #fff;box-sizing:border-box}
  .sb-user{flex:1;min-width:0}
  .sb-user .nm{font-size:13.5px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sb-user .rl{font-size:10.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;margin-top:2px;font-weight:600}
  .sb-foot button.logout-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:6px;border-radius:6px}
  .sb-foot button.logout-btn:hover{color:var(--danger);background:var(--danger-soft)}
  .sb-foot button.logout-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .main-v2{display:flex;flex-direction:column;min-width:0}
  .topbar-v2{height:68px;background:#fff;border-bottom:1px solid var(--border-soft);padding:0 32px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50}
  .tb-title h2{font-size:18px;font-weight:650;color:var(--text-primary);font-family:'Be Vietnam Pro',sans-serif}
  .tb-title .crumb{font-size:12px;color:var(--text-muted);margin-bottom:2px}
  .tb-actions{display:flex;align-items:center;gap:12px}
  .tb-sync{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-secondary);padding:7px 12px;background:var(--success-soft);border-radius:999px;font-weight:500}
  .tb-sync .dot{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px rgba(111,138,87,.18)}
  .tb-logout-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--border-soft);color:var(--text-secondary);padding:7px 14px;border-radius:999px;cursor:pointer;font-size:13px;font-weight:600;font-family:inherit;transition:140ms ease}
  .tb-logout-btn:hover,.tb-logout-btn:active{background:var(--danger-soft);border-color:var(--danger);color:var(--danger)}
  /* Avatar user — desktop: chip góc trên phải (.tb-user) · mobile: cạnh logo (.sb-logo-av) — 2026-06-06 */
  .tb-user{display:flex;align-items:center;gap:9px;padding:4px 13px 4px 5px;background:var(--bg-surface-soft);border:1px solid var(--border-soft);border-radius:999px}
  .tb-user .av{width:32px;height:32px;border-radius:50%;overflow:hidden;border:2px solid #fff;box-shadow:0 1px 5px rgba(43,33,28,.15);position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;font-weight:700;font-size:12px}
  .tb-user .av img{width:100%;height:100%;object-fit:cover;display:block}
  .tb-user .av::after{content:'';position:absolute;bottom:-1px;right:-1px;width:9px;height:9px;border-radius:50%;background:var(--success);border:2px solid #fff;box-sizing:border-box}
  .tb-user .nm{font-size:12.5px;font-weight:650;color:var(--text-primary);line-height:1.15;white-space:nowrap}
  .tb-user .rl{font-size:9px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-top:1px;white-space:nowrap}
  .sb-logo-user{display:none;align-items:center;gap:9px;margin-left:auto;flex-shrink:0}
  .sb-logo-av{width:36px;height:36px;border-radius:50%;overflow:hidden;border:2px solid #fff;box-shadow:0 2px 8px rgba(43,33,28,.12);position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;font-weight:700;font-size:12px}
  .sb-logo-av img{width:100%;height:100%;object-fit:cover;display:block}
  .sb-logo-av::after{content:'';position:absolute;bottom:-1px;right:-1px;width:10px;height:10px;border-radius:50%;background:var(--success);border:2px solid #fff;box-sizing:border-box}
  .sb-logo-meta{min-width:0;max-width:150px}
  .sb-logo-meta .nm{font-size:13px;font-weight:650;color:var(--text-primary);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sb-logo-meta .rl{font-size:9.5px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  @media (max-width:768px){
    .tb-sync{display:none}
    .topbar-v2{padding:0 16px}
    .tb-title h2{font-size:16px}
    .tb-logout-btn{padding:7px 12px}
    .tb-user{display:none}
    .sidebar-v2{max-width:100vw;overflow:hidden}
    .sb-logo{padding:12px 14px;gap:10px;overflow:hidden}
    .sb-logo img{width:30px;height:30px}
    .sb-logo .brand{font-size:13px;letter-spacing:.08em;flex-shrink:0}
    .sb-logo .brand small{display:none}
    .sb-logo-user{display:flex;gap:8px;margin-left:auto}
    .sb-logo-av{width:30px;height:30px}
    .sb-logo-meta{max-width:42vw}
    .sb-logo-meta .nm{font-size:12px}
    .sb-logo-meta .rl{font-size:8.5px}
  }
  .content-v2{padding:28px 44px;flex:1;width:100%}

  .welcome-card{background:linear-gradient(135deg, #fff 0%, var(--bg-soft) 60%, var(--accent-soft) 100%);border-radius:18px;padding:22px 30px;margin-bottom:20px;border:1px solid #E3D4C4;box-shadow:0 1px 2px rgba(43,33,28,.06);position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap}
  .wc-left{flex:1 1 520px;min-width:0;position:relative;z-index:1}
  .wc-right{flex:0 0 auto;position:relative;z-index:1}
  .welcome-card::after{content:'';position:absolute;top:-30px;right:-30px;width:200px;height:200px;background:radial-gradient(circle, rgba(199,125,73,.12) 0%, transparent 70%)}
  .welcome-card h1{font-family:'Be Vietnam Pro',sans-serif;font-size:27px;font-weight:700;color:#2F241D;margin-bottom:9px}
  .welcome-card .quote{color:#6E5C50;font-size:15.5px;max-width:920px;line-height:1.65;font-family:'Lora',serif;font-style:italic;margin-bottom:0}
  .welcome-card .stats-wrap{margin:0}
  .welcome-card .stats-label{font-size:11px;font-weight:700;color:#7A6A5F;text-transform:uppercase;letter-spacing:.12em;margin-bottom:10px;text-align:right}
  .welcome-card .stats{display:flex;gap:28px}
  .welcome-card .stat{text-align:center}
  .welcome-card .stat .v{font-size:28px;font-weight:700;color:#C8733D;font-family:'Roboto Mono',monospace;font-variant-numeric:tabular-nums}
  .welcome-card .stat .l{font-size:12.5px;color:#7A6A5F;font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin-top:5px}

  .tiles-v2{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-bottom:28px}
  .tile-v2{background:#FFFDFB;border:1px solid #E3D4C4;border-radius:16px;padding:22px 24px;cursor:pointer;transition:180ms cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;box-shadow:0 2px 8px rgba(80,55,35,.06);min-height:150px;display:flex;flex-direction:column}
  .tile-v2::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:transparent;transition:200ms}
  .tile-v2:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(80,55,35,.11);border-color:#D8C4B2}
  .tile-v2:hover::before{background:var(--accent)}
  .tile-v2 .tile-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:13px;background:#FFF1E8;color:#C8733D}
  .tile-v2 .tile-icon svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .tile-v2 h3{font-size:17.5px;font-weight:700;color:#2F241D;margin-bottom:7px;font-family:'Be Vietnam Pro',sans-serif}
  .tile-v2 p{font-size:14.5px;color:#5F5147;line-height:1.5;margin-bottom:16px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1 1 auto}
  .tile-v2 .tile-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;margin-top:auto}
  .tile-v2 .tile-foot .status{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:5px 11px;border-radius:999px;background:#EEF6E8;color:#4F7A3A}
  .tile-v2 .tile-foot .status::before{content:'';width:6px;height:6px;border-radius:50%;background:#4F7A3A}
  .tile-v2 .tile-foot .status.soon{background:#FFF3DC;color:#B36B1E}
  .tile-v2 .tile-foot .status.soon::before{background:#B36B1E}
  .tile-v2 .tile-foot .open{font-size:14px;color:#B96834;font-weight:700;white-space:nowrap}
  .tile-v2:hover .tile-foot .open{color:#8F4F28;text-decoration:underline}

  .row2-v2{display:grid;grid-template-columns:2fr 1fr;gap:16px}
  .task-card-v2,.activity-card-v2{background:#fff;border:1px solid var(--border-soft);border-radius:16px;padding:24px;box-shadow:0 1px 2px rgba(43,33,28,.06)}
  .card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
  .card-head h3{font-size:18px;font-weight:700;color:#2F241D;font-family:'Be Vietnam Pro',sans-serif}
  .card-head .live-dot{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--success);font-weight:600}
  .card-head .live-dot::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--success)}
  .task-list-v2{display:flex;flex-direction:column;gap:8px}
  .task-row-v2{display:grid;grid-template-columns:auto 1fr auto auto;gap:14px;align-items:center;padding:12px 14px;background:var(--bg-soft);border:1px solid var(--border-soft);border-radius:10px}
  .task-row-v2:hover{border-color:var(--c-walnut-300);background:#fff}
  .task-tag{font-size:10px;font-weight:700;padding:3px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.08em}
  .task-tag.todo{background:var(--c-walnut-100);color:var(--c-walnut-500)}
  .task-tag.doing{background:var(--accent-soft);color:var(--accent)}
  .task-tag.done{background:var(--success-soft);color:var(--success)}
  .task-title{font-size:14px;color:var(--text-primary);font-weight:500}
  .task-owner-v2{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-secondary);font-weight:500;white-space:nowrap}
  .task-owner-v2 img{width:24px;height:24px;border-radius:50%;object-fit:cover;background:var(--c-terracotta-500)}
  .task-due{font-size:12px;color:var(--text-muted);font-variant-numeric:tabular-nums}
  .activity-list-v2{display:flex;flex-direction:column;gap:14px;max-height:440px;overflow-y:auto;padding-right:6px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--c-beige,#EAE1D8) transparent}
  .activity-list-v2::-webkit-scrollbar{width:5px}
  .activity-list-v2::-webkit-scrollbar-track{background:transparent}
  .activity-list-v2::-webkit-scrollbar-thumb{background:var(--c-beige,#EAE1D8);border-radius:3px}
  .activity-list-v2::-webkit-scrollbar-thumb:hover{background:var(--c-terracotta-500,#C77D49)}
  .act-item-v2{display:flex;gap:14px;font-size:14px}
  .act-item-v2 .av{width:32px;height:32px;border-radius:50%;background:var(--c-terracotta-500);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0;overflow:hidden;border:2px solid #fff;box-shadow:0 1px 4px rgba(43,33,28,.1)}
  .act-item-v2 .av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
  .act-item-v2 .av.nina{background:linear-gradient(135deg,#6B5B95,#9B85C9)}
  .act-item-v2 .av.nina svg{width:18px;height:18px;color:#fff;fill:currentColor}
  .act-item-v2 .ct b{color:var(--text-primary);font-weight:600}
  .act-item-v2 .ct{color:var(--text-secondary);line-height:1.5}
  .act-item-v2 .ts{font-size:11px;color:var(--text-muted);margin-top:2px}

  .team-wall-v2{background:#fff;border:1px solid var(--border-soft);border-radius:16px;padding:22px 24px;box-shadow:0 1px 2px rgba(43,33,28,.06);margin-top:16px}
  .team-list-v2{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-top:14px}
  .team-member-v2{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:12px 6px;border-radius:10px;transition:140ms;cursor:pointer}
  .team-member-v2:hover{background:var(--bg-soft);transform:translateY(-2px)}
  .team-member-v2 .av-wrap{position:relative;width:48px;height:48px}
  .team-member-v2 .av-wrap img{width:100%;height:100%;border-radius:50%;background:var(--c-terracotta-500);object-fit:cover;display:block;border:2px solid #fff;box-shadow:0 2px 8px rgba(43,33,28,.12);box-sizing:border-box}
  .team-member-v2 .av-wrap::after{content:'';position:absolute;bottom:0;right:0;width:12px;height:12px;border-radius:50%;background:var(--success);border:2px solid #fff;box-sizing:border-box}
  .team-member-v2.offline .av-wrap::after{background:#C5BBB1}
  .team-member-v2.busy .av-wrap::after{background:var(--warning)}
  .team-member-v2 .nm{font-size:12px;font-weight:600;color:var(--text-primary);line-height:1.3}
  .team-member-v2 .rl{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600}

  @media (min-width:1800px){
    .tiles-v2{grid-template-columns:repeat(5,1fr)}
  }
  @media (max-width:1439px){
    .tiles-v2{grid-template-columns:repeat(3,1fr)}
  }
  @media (max-width:1099px){
    .tiles-v2{grid-template-columns:repeat(2,1fr)}
    .row2-v2{grid-template-columns:1fr}
  }
  @media (max-width:768px){
    .app-shell{grid-template-columns:1fr}
    .sidebar-v2{position:relative;height:auto;border-right:none;border-bottom:1px solid var(--border-soft)}
    .content-v2{padding:20px}
    .tiles-v2{grid-template-columns:1fr}
    .welcome-card{flex-direction:column;align-items:flex-start;gap:18px}
    .welcome-card .stats-label{text-align:left}
    .welcome-card .stats{gap:24px}
  }

  /* ============================================================
     MODULE MODAL POLISH — override style cũ sang token v2 brand
     ⚠️ DEPRECATED 2026-06-04: Phase A-B5 đã build component library
     `.ivy-*` mới (cuối file). Khu này GIỮ làm CSS COMPAT cho:
       - `.ftab` chuyên Ads table (adsRenderMain/adsRenderSkus)
       - `.ads-*` chuyên Ads decoration (.ads-thumb/.ads-tri/.ads-subrow
         /.ads-funnel/.ads-lchart/.ads-pnl/.ads-srk-*/.ads-roas-*/.ads-mk-*)
       - `.nina-*` chuyên Chat Nina (modal có self-contained CSS riêng)
       - `.dam-*` chuyên DAM
     Sẽ xóa hẳn khi anh confirm v3 hoạt động trên 10 NV KĐG.
     ============================================================ */
  #modal{background:rgba(43,33,28,.55) !important;backdrop-filter:blur(6px)}
  .modal-card{background:#fff !important;border:none !important;border-radius:22px !important;
    box-shadow:0 24px 80px rgba(43,33,28,.25) !important;overflow:hidden}
  .modal-head{background:#fff !important;color:var(--text-primary) !important;
    padding:20px 28px !important;border-bottom:1px solid var(--border-soft) !important;
    display:flex;align-items:center;gap:12px}
  .modal-head h3{font-family:'Be Vietnam Pro',sans-serif !important;font-size:18px !important;
    font-weight:650 !important;color:var(--text-primary) !important;letter-spacing:0 !important;flex:1}
  .modal-x{background:var(--bg-soft) !important;border:1px solid var(--border-soft) !important;
    color:var(--text-secondary) !important;width:34px;height:34px;border-radius:50% !important;
    display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;
    transition:120ms ease}
  .modal-x:hover{background:var(--danger-soft) !important;color:var(--danger) !important;border-color:var(--danger-soft) !important}
  .modal-body{padding:28px 34px !important;background:var(--bg-soft)}

  /* KPI cards style v2 trong modal */
  .modal-body .kpi{background:#fff !important;border:1px solid var(--border-soft) !important;
    border-radius:14px !important;padding:18px 20px !important;box-shadow:0 1px 2px rgba(43,33,28,.04) !important}
  .modal-body .kpi .lab{font-size:12.5px !important;font-weight:700 !important;color:var(--text-muted) !important;
    text-transform:uppercase !important;letter-spacing:.12em !important;margin-bottom:10px !important;
    font-family:'Be Vietnam Pro',sans-serif !important}
  .modal-body .kpi .val{font-size:28px !important;font-weight:600 !important;color:var(--text-primary) !important;
    font-family:'Roboto Mono',monospace !important;font-variant-numeric:tabular-nums !important;
    line-height:1.1 !important;letter-spacing:-0.01em !important}
  .modal-body .kpi .sub{font-size:13px !important;color:var(--text-secondary) !important;
    margin-top:6px !important;font-weight:500 !important;font-family:'Be Vietnam Pro',sans-serif !important}

  /* Filter bar + tabs */
  .modal-body .fb-tabs{border-bottom:1px solid var(--border-soft) !important;gap:2px !important;padding-bottom:0 !important}
  .modal-body .fb-tab{background:transparent !important;border:none !important;border-radius:10px 10px 0 0 !important;
    color:var(--text-secondary) !important;padding:10px 16px !important;font-weight:600 !important;
    font-family:'Be Vietnam Pro',sans-serif !important;font-size:13px !important;
    border-bottom:2px solid transparent !important;margin-bottom:-1px !important}
  .modal-body .fb-tab:hover{background:var(--bg-soft) !important;color:var(--text-primary) !important}
  .modal-body .fb-tab.active{background:#fff !important;color:var(--accent) !important;
    border-bottom-color:var(--accent) !important;font-weight:700 !important}

  .modal-body .fb-bar{background:#fff !important;border:1px solid var(--border-soft) !important;
    border-radius:14px !important;padding:14px 18px !important;gap:12px !important;flex-wrap:wrap;
    box-shadow:0 1px 2px rgba(43,33,28,.04) !important;align-items:center;display:flex}
  .modal-body .fb-bar label{font-size:11px !important;font-weight:700 !important;color:var(--text-muted) !important;
    text-transform:uppercase !important;letter-spacing:.1em !important;font-family:'Be Vietnam Pro',sans-serif !important}
  .modal-body .fb-bar input[type=date]{background:var(--bg-soft) !important;border:1px solid var(--border-soft) !important;
    border-radius:8px !important;padding:7px 11px !important;font-size:13px !important;color:var(--text-primary) !important;
    font-family:'Be Vietnam Pro',sans-serif !important}
  .modal-body .fb-bar input[type=date]:focus{border-color:var(--accent) !important;outline:none !important}
  .modal-body .fb-bar .preset-btn{background:var(--bg-soft) !important;border:1px solid transparent !important;
    border-radius:999px !important;padding:6px 13px !important;font-size:12.5px !important;font-weight:600 !important;
    color:var(--text-secondary) !important;cursor:pointer;font-family:'Be Vietnam Pro',sans-serif !important;
    transition:120ms ease !important}
  .modal-body .fb-bar .preset-btn:hover{background:var(--c-walnut-100) !important;color:var(--text-primary) !important;border-color:transparent !important}
  .modal-body .fb-bar .preset-btn.active{background:var(--c-walnut-700) !important;color:#fff !important;border-color:transparent !important}
  .modal-body .fb-bar .vat-edit{background:#fff !important;border:1px solid var(--accent) !important;
    border-radius:8px !important;color:var(--accent) !important;font-weight:700 !important;font-family:'Roboto Mono',monospace !important}

  /* Tables in modal — softer, brand v2 */
  .modal-body table{border-radius:12px;overflow:hidden}
  .modal-body .ftab{background:#fff;border-radius:14px;overflow:hidden;
    border:1px solid var(--border-soft);box-shadow:0 1px 2px rgba(43,33,28,.04)}
  .modal-body .ftab th{background:var(--c-ivory) !important;color:var(--c-walnut-500) !important;
    font-size:12.5px !important;font-weight:700 !important;text-transform:uppercase !important;
    letter-spacing:.08em !important;font-family:'Be Vietnam Pro',sans-serif !important;
    padding:11px 14px !important;border-bottom:1.5px solid var(--bd-strong) !important}
  .modal-body .ftab td{padding:11px 14px !important;border-bottom:1px solid #F3ECE3 !important;
    font-size:13.5px !important;font-variant-numeric:tabular-nums;color:var(--text-primary)}
  .modal-body .ftab tr:hover td{background:var(--bg-soft)}

  /* Buttons trong modal */
  .modal-body button.btn{font-family:'Be Vietnam Pro',sans-serif !important;
    border-radius:10px !important;font-weight:600 !important;padding:9px 16px !important;
    transition:120ms ease !important;border:1px solid transparent !important;font-size:13.5px !important}
  .modal-body button.btn.primary,.modal-body button.btn-primary{background:var(--accent) !important;color:#fff !important;
    box-shadow:0 4px 12px rgba(199,125,73,.25) !important}
  .modal-body button.btn.primary:hover{background:var(--accent-hover) !important}

  /* Wide modal — adjust max-width cho data-heavy module Ads/FB */
  .modal-card.wide{max-width:min(1700px, 95vw) !important}

  /* ============================================================
     IVY HUB v3 — COMPONENT LIBRARY SHARED (Phase A · 2026-06-04)
     Class prefix `.ivy-*` — clean, no !important, no inline style.
     Mục tiêu: mọi module Phase B1-B5 dùng chung 1 nguồn này.
     Spec: memory/hub_design_system_v2.md
     ============================================================ */

  /* ---------- 1. MODAL ---------- */
  .ivy-modal-card{
    background:var(--bg-surface);
    border-radius:var(--radius-xl);
    box-shadow:0 24px 80px rgba(43,33,28,.25);
    overflow:hidden;
    width:min(1560px, 95vw);
    max-height:92vh;
    display:flex;flex-direction:column;
  }
  .ivy-modal-card.wide{width:min(1700px, 96vw)}
  .ivy-modal-card.narrow{width:min(960px, 92vw)}
  .ivy-modal-header{
    display:flex;align-items:center;gap:var(--space-3);
    padding:var(--space-5) var(--space-6);
    background:var(--bg-surface);
    border-bottom:1px solid var(--border-soft);
    flex-shrink:0;
  }
  .ivy-modal-header__icon{
    width:36px;height:36px;border-radius:10px;
    background:var(--accent-soft);
    display:flex;align-items:center;justify-content:center;
    color:var(--accent);font-size:18px;flex-shrink:0;
  }
  .ivy-modal-header__title{
    flex:1;font-family:var(--font-sans);font-size:18px;
    font-weight:650;color:var(--text-primary);
    letter-spacing:0;margin:0;
  }
  .ivy-modal-header__subtitle{
    font-size:12.5px;color:var(--text-secondary);
    font-weight:500;margin-top:2px;
  }
  .ivy-modal-header__actions{display:flex;align-items:center;gap:var(--space-2)}
  .ivy-modal-close{
    width:34px;height:34px;border-radius:50%;
    background:var(--bg-surface-soft);
    border:1px solid var(--border-soft);
    color:var(--text-secondary);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;font-size:15px;transition:120ms ease;
  }
  .ivy-modal-close:hover{
    background:var(--danger-soft);color:var(--danger);border-color:var(--danger-soft);
  }
  .ivy-modal-body{
    flex:1;overflow:auto;
    padding:var(--space-6) var(--space-6);
    background:var(--bg-surface-soft);
  }
  .ivy-modal-body--flush{padding:0}
  .ivy-modal-footer{
    padding:var(--space-4) var(--space-6);
    background:var(--bg-surface);
    border-top:1px solid var(--border-soft);
    display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);
    flex-shrink:0;
  }

  /* ---------- 2. KPI GRID ---------- */
  .ivy-kpi-grid{
    display:grid;gap:var(--space-3);
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    margin-bottom:var(--space-5);
  }
  .ivy-kpi-grid--4{grid-template-columns:repeat(4, 1fr)}
  .ivy-kpi-grid--6{grid-template-columns:repeat(6, 1fr)}
  @media (max-width:1280px){
    .ivy-kpi-grid--6{grid-template-columns:repeat(3, 1fr)}
    .ivy-kpi-grid--4{grid-template-columns:repeat(2, 1fr)}
  }
  @media (max-width:760px){
    .ivy-kpi-grid--6,.ivy-kpi-grid--4{grid-template-columns:repeat(2, 1fr)}
  }
  /* Mobile net 2026-06-06: ép mọi KPI grid trong modal về 2 cột (đè cả inline repeat(N,1fr)) → không tràn ngang trên điện thoại */
  @media (max-width:600px){
    #modal .ivy-kpi-grid{grid-template-columns:repeat(2,1fr) !important}
  }
  @media (max-width:360px){
    #modal .ivy-kpi-grid{grid-template-columns:1fr !important}
  }
  .ivy-kpi-card{
    background:var(--bg-surface);
    border:1px solid var(--border-soft);
    border-radius:14px;
    padding:var(--space-4) var(--space-5);
    box-shadow:var(--shadow-xs);
    position:relative;
    display:flex;flex-direction:column;gap:6px;
  }
  .ivy-kpi-card__lab{
    font-size:12.5px;font-weight:700;color:var(--text-muted);
    text-transform:uppercase;letter-spacing:.08em;
    font-family:var(--font-sans);
  }
  .ivy-kpi-card__val{
    font-size:29px;font-weight:600;color:var(--text-primary);
    font-family:var(--font-mono);font-variant-numeric:tabular-nums;
    line-height:1.1;letter-spacing:-0.01em;
  }
  .ivy-kpi-card__val--lg{font-size:30px}
  .ivy-kpi-card__val--sm{font-size:20px}
  .ivy-kpi-card__sub{
    font-size:13px;color:var(--text-secondary);
    font-weight:500;font-family:var(--font-sans);
  }
  .ivy-kpi-card__delta{
    font-size:12px;font-weight:600;font-family:var(--font-mono);
    display:inline-flex;align-items:center;gap:4px;
  }
  .ivy-kpi-card__delta.up{color:var(--success)}
  .ivy-kpi-card__delta.down{color:var(--danger)}
  .ivy-kpi-card__delta.flat{color:var(--text-muted)}
  .ivy-kpi-card.accent{border-left:3px solid var(--accent)}
  .ivy-kpi-card.success{border-left:3px solid var(--success)}
  .ivy-kpi-card.warning{border-left:3px solid var(--warning)}
  .ivy-kpi-card.danger{border-left:3px solid var(--danger)}

  /* ---------- 3. FILTER BAR + CHIP ---------- */
  .ivy-filter-bar{
    background:var(--bg-surface);
    border:1px solid var(--border-soft);
    border-radius:14px;
    padding:var(--space-3) var(--space-4);
    box-shadow:var(--shadow-xs);
    display:flex;align-items:center;gap:var(--space-3);
    flex-wrap:wrap;
    margin-bottom:var(--space-4);
  }
  .ivy-filter-bar__label{
    font-size:12px;font-weight:700;color:var(--text-muted);
    text-transform:uppercase;letter-spacing:.1em;
    font-family:var(--font-sans);
  }
  .ivy-filter-bar__sep{
    width:1px;height:24px;background:var(--border-soft);margin:0 var(--space-1);
  }
  .ivy-filter-bar__grow{flex:1}
  .ivy-chip-group{display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center}
  .ivy-chip{
    background:var(--bg-surface-soft);
    border:1px solid transparent;
    border-radius:999px;
    padding:6px 13px;
    font-size:12.5px;font-weight:600;
    color:var(--text-secondary);
    cursor:pointer;
    font-family:var(--font-sans);
    transition:120ms ease;
    display:inline-flex;align-items:center;gap:6px;
  }
  .ivy-chip:hover{
    background:var(--color-walnut-100);color:var(--text-primary);
  }
  .ivy-chip.active{
    background:var(--color-walnut-700);color:#fff;border-color:transparent;
  }
  .ivy-chip.shop-active{
    background:var(--accent);color:#fff;
  }
  .ivy-chip__dot{
    width:8px;height:8px;border-radius:50%;background:var(--text-muted);
  }
  .ivy-chip__dot.on{background:var(--success)}
  .ivy-chip__dot.off{background:var(--text-muted)}

  /* ---------- 4. TABS ---------- */
  .ivy-tab-group{
    display:flex;gap:2px;align-items:flex-end;
    border-bottom:1px solid var(--border-soft);
    margin-bottom:var(--space-4);
    overflow-x:auto;
  }
  .ivy-tab{
    background:transparent;border:none;
    border-radius:10px 10px 0 0;
    color:var(--text-secondary);
    padding:12px 18px;font-weight:600;
    font-family:var(--font-sans);font-size:14px;
    cursor:pointer;
    border-bottom:2px solid transparent;
    margin-bottom:-1px;
    white-space:nowrap;
    transition:120ms ease;
  }
  .ivy-tab:hover{background:var(--bg-surface-soft);color:var(--text-primary)}
  .ivy-tab.active{
    background:var(--bg-surface);color:var(--accent);
    border-bottom-color:var(--accent);
    font-weight:700;
  }
  .ivy-tab__count{
    display:inline-block;margin-left:6px;
    font-size:11px;background:var(--bg-muted);
    color:var(--text-secondary);
    padding:1px 8px;border-radius:999px;
    font-family:var(--font-mono);
  }
  .ivy-tab.active .ivy-tab__count{
    background:var(--accent-soft);color:var(--accent);
  }

  /* ---------- 5. TABLE ---------- */
  .ivy-table-wrap{
    background:var(--bg-surface);
    border:1px solid var(--border-soft);
    border-radius:14px;
    overflow:auto;
    max-height:calc(100vh - 280px);
    box-shadow:var(--shadow-xs);
  }
  .ivy-table{
    width:max-content;min-width:100%;
    border-collapse:separate;border-spacing:0;
    font-size:14px;font-family:var(--font-sans);
  }
  .ivy-table th{
    position:sticky;top:0;z-index:4;
    background:#F4ECDF;color:var(--color-walnut-700);
    font-weight:700;text-align:left;
    border-bottom:1.5px solid var(--color-walnut-300, #C7B59A);
    padding:13px 16px;white-space:nowrap;
    font-size:14px;letter-spacing:.02em;
  }
  .ivy-table th.num{text-align:right}
  .ivy-table td{
    border-bottom:1px solid #E5D8C7;
    padding:12px 16px;white-space:nowrap;
    color:var(--text-primary);
    font-variant-numeric:tabular-nums;
    font-weight:500;
  }
  .ivy-table tr:last-child td{border-bottom:none}
  .ivy-table tr:hover td{background:var(--bg-surface-soft)}
  .ivy-table .num{font-family:var(--font-mono);text-align:right}
  .ivy-table .sticky-col{
    position:sticky;left:0;z-index:3;
    background:var(--bg-surface);
    box-shadow:1px 0 0 var(--border-soft);
  }
  .ivy-table th.sticky-col{z-index:5;background:#F9F5EF}
  .ivy-table tr:hover td.sticky-col{background:var(--bg-surface-soft)}
  .ivy-table tfoot td{
    background:var(--color-walnut-700);color:#fff;
    font-weight:700;font-family:var(--font-mono);
  }
  .ivy-table--compact td,.ivy-table--compact th{padding:9px 12px}
  .ivy-table--ultra td,.ivy-table--ultra th{padding:7px 10px;font-size:13px}
  .ivy-table .row-positive{background:rgba(111,138,87,.06)}
  .ivy-table .row-negative{background:rgba(184,74,58,.06)}

  /* ---------- 6. BUTTON ---------- */
  .ivy-btn{
    height:38px;padding:0 16px;
    border-radius:999px;
    border:1px solid transparent;
    font-family:var(--font-sans);font-size:14px;font-weight:600;
    cursor:pointer;transition:140ms ease;
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    line-height:1;text-decoration:none;
  }
  .ivy-btn.primary{
    background:var(--accent);color:#fff;
    box-shadow:0 4px 12px rgba(199,125,73,.22);
  }
  .ivy-btn.primary:hover{background:var(--accent-hover)}
  .ivy-btn.secondary{
    background:var(--bg-surface);color:var(--text-primary);
    border-color:var(--border-soft);
  }
  .ivy-btn.secondary:hover{background:var(--bg-surface-soft);border-color:var(--border-strong)}
  .ivy-btn.ghost{background:transparent;color:var(--text-secondary)}
  .ivy-btn.ghost:hover{background:var(--bg-surface-soft);color:var(--text-primary)}
  .ivy-btn.danger{background:var(--danger-soft);color:var(--danger)}
  .ivy-btn.danger:hover{background:var(--danger);color:#fff}
  .ivy-btn.sm{height:34px;padding:0 14px;font-size:13px}
  .ivy-btn.lg{height:44px;padding:0 22px;font-size:14.5px}
  .ivy-btn:disabled{opacity:.5;cursor:not-allowed}

  /* ---------- 7. BADGE ---------- */
  .ivy-badge{
    display:inline-flex;align-items:center;gap:4px;
    padding:3px 9px;border-radius:999px;
    font-size:11px;font-weight:700;
    font-family:var(--font-sans);
    text-transform:uppercase;letter-spacing:.06em;
    background:var(--bg-muted);color:var(--text-secondary);
    line-height:1.4;
  }
  .ivy-badge.run{background:var(--success-soft);color:var(--success)}
  .ivy-badge.soon{background:var(--warning-soft);color:var(--warning)}
  .ivy-badge.warning{background:var(--warning-soft);color:var(--warning)}
  .ivy-badge.danger{background:var(--danger-soft);color:var(--danger)}
  .ivy-badge.success{background:var(--success-soft);color:var(--success)}
  .ivy-badge.accent{background:var(--accent-soft);color:var(--accent)}
  .ivy-badge__dot{width:6px;height:6px;border-radius:50%;background:currentColor}

  /* ---------- 8. INPUT / SELECT / DATE ---------- */
  .ivy-input,.ivy-select,.ivy-date-input{
    height:38px;width:100%;
    border:1px solid var(--border-soft);
    border-radius:var(--radius-md);
    background:var(--bg-surface);color:var(--text-primary);
    padding:0 12px;font-size:13.5px;
    font-family:var(--font-sans);
    outline:none;transition:120ms ease;
    box-sizing:border-box;
  }
  .ivy-input:focus,.ivy-select:focus,.ivy-date-input:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(199,125,73,.14);
  }
  .ivy-input::placeholder{color:var(--text-muted)}
  .ivy-input.sm,.ivy-select.sm,.ivy-date-input.sm{height:32px;font-size:12.5px;padding:0 10px}
  .ivy-input--inline,.ivy-date-input--inline{
    background:var(--bg-surface-soft);
    border-radius:8px;height:34px;padding:0 11px;font-size:13px;
    width:auto;min-width:140px;
  }
  .ivy-field{display:flex;flex-direction:column;gap:6px}
  .ivy-field__label{
    font-size:12px;font-weight:700;color:var(--text-muted);
    text-transform:uppercase;letter-spacing:.1em;
    font-family:var(--font-sans);
  }
  .ivy-field__help{font-size:12px;color:var(--text-secondary)}

  /* ---------- 9. CARD ---------- */
  .ivy-card{
    background:var(--bg-surface);
    border:1px solid var(--border-soft);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-xs);
    padding:var(--space-5);
  }
  .ivy-card.soft{background:var(--bg-surface-soft)}
  .ivy-card.accent{border-left:3px solid var(--accent)}
  .ivy-card.flush{padding:0;overflow:hidden}
  .ivy-card__title{
    font-size:15px;font-weight:700;color:var(--text-primary);
    margin:0 0 var(--space-2) 0;
    font-family:var(--font-sans);
    display:flex;align-items:center;gap:8px;
  }
  .ivy-card__subtitle{
    font-size:13.5px;color:var(--text-secondary);
    margin:0 0 var(--space-3) 0;
  }
  .ivy-card__head{
    display:flex;align-items:center;gap:var(--space-3);
    padding:var(--space-3) var(--space-4);
    background:var(--bg-surface);
    border-bottom:1px solid var(--border-soft);
  }
  .ivy-card__head h4{
    flex:1;margin:0;font-size:15px;font-weight:700;color:var(--text-primary);
  }
  .ivy-card__body{padding:var(--space-4)}

  /* ---------- 10. SKELETON ---------- */
  .ivy-skeleton{
    background:linear-gradient(90deg, #F2E9DF 0%, #FBF7F2 50%, #F2E9DF 100%);
    background-size:200% 100%;
    animation:ivy-shimmer 1.3s ease-in-out infinite;
    border-radius:var(--radius-md);
    display:block;
  }
  .ivy-skeleton.line{height:14px;margin:6px 0}
  .ivy-skeleton.card{height:88px}
  .ivy-skeleton.circle{border-radius:50%}
  @keyframes ivy-shimmer{
    from{background-position:200% 0}
    to{background-position:-200% 0}
  }

  /* ---------- 11. UTILITY ---------- */
  .ivy-row{display:flex;align-items:center;gap:var(--space-3)}
  .ivy-row.between{justify-content:space-between}
  .ivy-row.wrap{flex-wrap:wrap}
  .ivy-stack{display:flex;flex-direction:column;gap:var(--space-3)}
  .ivy-stack.sm{gap:var(--space-2)}
  .ivy-stack.lg{gap:var(--space-5)}
  .ivy-grow{flex:1}
  .ivy-section-title{
    font-size:15px;font-weight:700;color:var(--color-walnut-500);
    text-transform:uppercase;letter-spacing:.08em;
    font-family:var(--font-sans);
    margin:var(--space-5) 0 var(--space-3) 0;
    display:flex;align-items:center;gap:8px;
  }
  .ivy-section-title::before{
    content:'';display:block;width:3px;height:14px;
    background:var(--accent);border-radius:2px;
  }
  .ivy-divider{height:1px;background:var(--border-soft);margin:var(--space-4) 0;border:none}
  .ivy-empty{
    text-align:center;color:var(--text-muted);
    padding:var(--space-8) var(--space-4);
    font-family:var(--font-sans);font-size:14px;
  }
  .ivy-empty__icon{font-size:32px;margin-bottom:var(--space-2);opacity:.5}
  .ivy-loading{
    text-align:center;color:var(--text-secondary);
    padding:var(--space-6);font-style:italic;font-size:14px;
  }
  .ivy-num-pos{color:var(--success);font-family:var(--font-mono)}
  .ivy-num-neg{color:var(--danger);font-family:var(--font-mono)}
  .ivy-num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

  /* ---------- 12. MODULE-SPECIFIC HELPERS (FB Ads, Shopee Ads, Rank, Alert, Status) ---------- */
  /* Heatmap ROAS cells — palette đậm phối Terracotta brand (chỉnh 2026-06-05 anh Trung yêu cầu dễ nhìn) */
  .ivy-heat-g{background:#7FB069;color:#10260A;font-weight:800;font-family:var(--font-mono);text-align:center;border:1px solid #5E8C4D}
  .ivy-heat-y{background:#E8A93B;color:#3D2A05;font-weight:800;font-family:var(--font-mono);text-align:center;border:1px solid #B68220}
  .ivy-heat-r{background:#C4533D;color:#FFFFFF;font-weight:800;font-family:var(--font-mono);text-align:center;border:1px solid #8E3A2A}
  .ivy-heat-n{background:#F6F0E8;color:var(--text-muted);text-align:center}
  .ivy-heat-row-label{background:var(--color-walnut-700);color:#fff;font-weight:700;position:sticky;left:0;z-index:3}

  /* Save status banner */
  .ivy-status{
    display:none;padding:9px 14px;margin:8px 0 0 0;
    border-radius:10px;font-size:12.5px;font-weight:600;
    background:var(--danger-soft);color:var(--danger);
    border:1px solid var(--danger-soft);
    font-family:var(--font-sans);
  }
  .ivy-status.ok{background:var(--success-soft);color:var(--success);border-color:var(--success-soft)}
  .ivy-status.shown{display:block}

  /* Input saving/saved feedback */
  .ivy-input.saving{border-color:var(--warning);box-shadow:0 0 0 3px rgba(185,133,47,.14)}
  .ivy-input.saved{border-color:var(--success);box-shadow:0 0 0 3px rgba(111,138,87,.14)}

  /* Ranking list (sale leaderboard) */
  .ivy-rank-grid{
    display:grid;gap:var(--space-3);
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  }
  .ivy-rank-item{
    background:var(--bg-surface);
    border:1px solid var(--border-soft);
    border-radius:14px;
    padding:var(--space-4);
    box-shadow:var(--shadow-xs);
    display:flex;flex-direction:column;gap:6px;
  }
  .ivy-rank-item__name{font-size:14px;font-weight:700;color:var(--text-primary);font-family:var(--font-sans)}
  .ivy-rank-item__pct{font-size:11.5px;color:var(--text-secondary)}
  .ivy-rank-item__ds{font-size:20px;font-weight:600;color:var(--accent);font-family:var(--font-mono);letter-spacing:-0.01em}
  .ivy-rank-item__target{font-size:11.5px;color:var(--text-secondary);margin-top:2px}
  .ivy-progress{
    height:6px;background:var(--bg-muted);
    border-radius:999px;overflow:hidden;margin-top:4px;
  }
  .ivy-progress > span{
    display:block;height:100%;background:var(--accent);
    border-radius:999px;transition:width 300ms ease;
  }
  .ivy-progress > span.over{background:var(--success)}

  /* Alert list (cảnh báo Phòng QC FB) */
  .ivy-alert-list{display:flex;flex-direction:column;gap:var(--space-2)}
  .ivy-alert{
    display:flex;align-items:flex-start;gap:var(--space-3);
    padding:var(--space-3) var(--space-4);
    background:var(--bg-surface);
    border:1px solid var(--border-soft);
    border-left:3px solid var(--text-muted);
    border-radius:10px;font-family:var(--font-sans);font-size:14px;
  }
  .ivy-alert.red{border-left-color:var(--danger);background:var(--danger-soft)}
  .ivy-alert.yellow{border-left-color:var(--warning);background:var(--warning-soft)}
  .ivy-alert.green{border-left-color:var(--success);background:var(--success-soft)}
  .ivy-alert__lvl{
    flex-shrink:0;font-size:11px;font-weight:700;
    text-transform:uppercase;letter-spacing:.06em;
    padding:3px 9px;border-radius:999px;
    background:rgba(255,255,255,.6);
  }
  .ivy-alert.red .ivy-alert__lvl{color:var(--danger)}
  .ivy-alert.yellow .ivy-alert__lvl{color:var(--warning)}
  .ivy-alert.green .ivy-alert__lvl{color:var(--success)}
  .ivy-alert__msg{flex:1;color:var(--text-primary);line-height:1.5}

  /* Tip / note box */
  .ivy-tip{
    margin-top:var(--space-4);padding:var(--space-3) var(--space-4);
    background:var(--warning-soft);border:1px solid #F0DDB8;
    border-left:3px solid var(--warning);
    border-radius:10px;font-size:14px;color:#7A5B1F;
    font-family:var(--font-sans);line-height:1.6;
  }
  .ivy-tip.info{background:var(--accent-soft);border-color:#F0D8C0;border-left-color:var(--accent);color:#7A4422}
  .ivy-tip.success{background:var(--success-soft);border-color:#D7E3CC;border-left-color:var(--success);color:#3F5C2A}

  /* Numeric input dùng trong bảng (nhỏ, align right) */
  .ivy-num-input{
    width:100%;min-width:72px;height:30px;padding:0 8px;
    border:1px solid var(--border-soft);
    border-radius:6px;
    background:var(--bg-surface);
    font-size:12.5px;font-family:var(--font-mono);
    text-align:right;color:var(--text-primary);
    font-variant-numeric:tabular-nums;
    outline:none;transition:120ms ease;box-sizing:border-box;
  }
  .ivy-num-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(199,125,73,.14)}
  .ivy-num-input.saving{border-color:var(--warning);box-shadow:0 0 0 2px rgba(185,133,47,.14)}
  .ivy-num-input.saved{border-color:var(--success);box-shadow:0 0 0 2px rgba(111,138,87,.14)}

  /* Cell helpers cho bảng input */
  .ivy-table td.cell-readonly{color:var(--text-muted);font-family:var(--font-mono);text-align:right}
  .ivy-table td.cell-total{font-weight:700;font-family:var(--font-mono);text-align:right;color:var(--text-primary)}
  .ivy-table .cell-sp{font-weight:600;color:var(--text-primary);text-align:left}

  /* ============================================================
     WELCOME SPLASH v3.1 — fit-content (2026-06-05 sáng)
     Ảnh anh Trung cấp: welcome-desktop.png (1672×941) + welcome-mobile.png (941×1672)
     Avatar + text + button ĐÃ TRONG ẢNH. Em chỉ overlay topbar HTML
     + click hotspot ẩn trên vị trí "Vào hệ thống" trong ảnh.
     FIX 05/06: thay cover→stage có aspect-ratio cố định, ảnh luôn hiện
     trọn vẹn, viền padding 2 bên/trên-dưới dùng màu nền match ảnh.
     ============================================================ */
  #welcome{
    position:fixed;inset:0;
    background-color:#F4ECDE;
    color:var(--text-primary);
    font-family:var(--font-sans);
    overflow:hidden;
    z-index:9000; /* bump lên cao để đè .topbar-v2 (z:50) + mọi element app */
    display:flex;align-items:center;justify-content:center;
    animation:welcome-fade-in 600ms ease-out;
  }
  #welcome.hidden{display:none!important}
  @keyframes welcome-fade-in{
    from{opacity:0}
    to{opacity:1}
  }
  /* Stage = vùng chứa ảnh, giữ đúng aspect-ratio 1672/941. Width = min của
     100vw và 100vh*ratio → ảnh luôn fit gọn trong viewport, không crop. */
  .welcome-stage{
    position:relative;
    aspect-ratio: 1672 / 941;
    width: min(100vw, calc(100vh * 1672 / 941));
    height: auto;
    max-height: 100vh;
    background-image:url('/assets/welcome-desktop.webp');
    background-size:100% 100%;
    background-position:center center;
    background-repeat:no-repeat;
  }

  /* Topbar overlay — ẨN 05/06 sáng (anh Trung yêu cầu): trong ảnh đã có
     logo + brand text + pill "Đang hoạt động" rồi, topbar HTML overlay
     trùng lặp và nền blur trắng hiện xấu trên padding 2 bên màu kem. */
  .welcome-topbar{
    display:none !important;
  }
  .welcome-brand{display:flex;align-items:center;gap:12px}
  .welcome-brand-icon{width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(43,33,28,.12))}
  .welcome-brand-text{display:flex;flex-direction:column;gap:1px;line-height:1.1}
  .welcome-brand-name{font-size:14px;font-weight:800;color:var(--text-primary);letter-spacing:.16em}
  .welcome-brand-sub{font-size:9.5px;color:var(--text-muted);letter-spacing:.22em;font-weight:600}
  .welcome-topright{display:flex;align-items:center;gap:14px}
  .welcome-online-pill{
    display:inline-flex;align-items:center;gap:7px;
    padding:6px 14px;background:rgba(216,229,206,.78);
    color:#52723D;border-radius:999px;
    font-size:12.5px;font-weight:600;
  }
  .welcome-dot-on{
    display:inline-block;width:8px;height:8px;border-radius:50%;
    background:#6F8A57;
    animation:welcome-pulse 2s ease-in-out infinite;
  }
  @keyframes welcome-pulse{
    0%,100%{box-shadow:0 0 0 0 rgba(111,138,87,.5)}
    70%{box-shadow:0 0 0 6px rgba(111,138,87,0)}
  }
  .welcome-icon-btn{
    width:34px;height:34px;border-radius:50%;
    background:rgba(255,253,247,.7);border:1px solid rgba(196,177,150,.45);
    color:var(--text-secondary);cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;
    transition:120ms ease;
  }
  .welcome-icon-btn:hover{background:#fff;color:var(--text-primary)}
  .welcome-user{
    display:flex;align-items:center;gap:10px;
    padding:3px 14px 3px 3px;
    background:rgba(255,253,247,.78);
    border:1px solid rgba(196,177,150,.45);
    border-radius:999px;cursor:pointer;
    transition:120ms ease;
  }
  .welcome-user:hover{background:#fff}
  .welcome-user-avatar{
    width:30px;height:30px;border-radius:50%;
    background:var(--accent-soft);
    border:2px solid #fff;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    color:var(--accent);font-size:11px;font-weight:700;
  }
  .welcome-user-avatar img{width:100%;height:100%;object-fit:cover}
  .welcome-user span{font-size:13px;font-weight:600;color:var(--text-primary)}
  .welcome-caret{font-size:10px;color:var(--text-muted)}

  /* Click hotspot ẩn — đè trên vị trí "Vào hệ thống" trong ảnh.
     Position theo % của .welcome-stage (track ảnh, không phải viewport)
     để luôn đúng vị trí dù viewport tỷ lệ thế nào. */
  .welcome-cta-hotspot{
    position:absolute;
    left:50%;top:72%;
    transform:translate(-50%,-50%);
    width:14%;height:7.5%;
    min-width:180px;min-height:48px;
    background:transparent;
    border:none;
    border-radius:14px;
    cursor:pointer;
    padding:0;
    transition:200ms ease;
    z-index:4;
  }
  .welcome-cta-hotspot:hover{
    background:rgba(255,255,255,.08);
    transform:translate(-50%,-50%) scale(1.04);
    box-shadow:0 8px 24px rgba(199,125,73,.25);
  }
  .welcome-cta-hotspot:active{transform:translate(-50%,-50%) scale(1.0)}
  .welcome-cta-hotspot:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:4px;
  }

  /* Toàn màn cũng nhận click (anh bấm bất kỳ chỗ nào cũng vào — fallback) */
  /* Nhưng không apply mặc định để tránh accident click. Anh confirm sau nếu cần. */

  /* RESPONSIVE: Mobile dùng ảnh portrait + đổi aspect-ratio + reposition hotspot */
  @media (max-width:760px){
    .welcome-stage{
      aspect-ratio: 941 / 1672;
      width: min(100vw, calc(100vh * 941 / 1672));
      background-image:url('/assets/welcome-mobile.webp');
    }
    .welcome-topbar{padding:12px 16px}
    .welcome-brand-sub{display:none}
    .welcome-online-pill{padding:6px 10px}
    .welcome-online-pill span:not(.welcome-dot-on){display:none}
    .welcome-user span:not(.welcome-caret){display:none}
    .welcome-user{padding:3px}
    /* Mobile: button "Vào hệ thống" trong ảnh ở khoảng top 72% (trong card trắng) */
    .welcome-cta-hotspot{
      left:50%;top:72%;
      width:62%;height:5%;
      min-width:200px;min-height:46px;
    }
  }
  @media (max-width:480px){
    .welcome-cta-hotspot{
      top:73%;width:64%;
    }
  }
  /* ===== WELCOME v3 — END ===== */


  /* ===== FULL-BLEED MOBILE cho MOI module (khoi phuc rule 09/6 — bi rot khi tach monolith) =====
     Trieu chung khi thieu: modal mobile bi don vao giua, trong 2 ben (padding desktop 34/28px an ~100px ngang).
     Dat CUOI app.css de thang cascade (de ca rule .modal-body !important dong 562). */
  @media (max-width:760px){
    #modal{padding:0 !important}
    .modal-card, .ivy-modal-card, .ivy-modal-card.wide, .ivy-modal-card.ads-wide, .ivy-modal-card.narrow{
      max-width:100% !important; width:100% !important; border-radius:0 !important; min-height:100dvh;
    }
    .modal-head{
      padding:12px 16px !important;
      padding-left:max(16px, env(safe-area-inset-left)) !important;
      padding-right:max(16px, env(safe-area-inset-right)) !important;
    }
    .modal-body{
      padding:14px 12px !important;
      padding-left:max(12px, env(safe-area-inset-left)) !important;
      padding-right:max(12px, env(safe-area-inset-right)) !important;
      padding-bottom:max(18px, env(safe-area-inset-bottom)) !important;
    }
  }