/* =====================================================================
   VIROO HUB — bộ giao diện "Viroo Red" (đồng bộ với CRM Viroo · Soft Aurora)
   Nạp SAU style.css. Tắt ở Team & cài đặt → Giao diện (về bộ "Cổ điển").
   Màu: đỏ Viroo #D22220 · đỏ đậm #950006 · hồng #FF4F72 · vàng #FCCA03 — font Inter
   ===================================================================== */
:root, html[data-theme] {
  --p50:#fff2f1; --p100:#ffe1df; --p200:#ffc7c3; --p300:#ff9f98; --p400:#f5645b; --p500:#e83a32;
  --p600:#d22220; --p700:#b01815; --p800:#950006; --pink:#ff4f72; --gold:#fcca03;
  --bg:#fff7f6; --panel:rgba(255,255,255,.82); --soft:#fff2f1; --line:rgba(210,34,32,.14); --ink:#1d1212; --muted:#8a7472;
  --red:#d22220; --red-hover:#b01815; --red-deep:#950006; --red-soft:#ffe9e7; --link:#b01815; --black:#1d1212;
  --side:rgba(255,255,255,.66); --side-ink:#4a3a3a;
  --s-planning:#f3dcda; --s-production:#ffc7c3; --s-client:#ff9f98; --s-ready:#e83a32; --s-posted:#950006;
  --r:20px; --glass:blur(14px) saturate(150%);
  --shadow:0 1px 2px rgba(64,0,3,.04),0 10px 30px rgba(210,34,32,.08);
  --glow:0 8px 22px rgba(210,34,32,.32);
  --grad:linear-gradient(90deg,var(--p600),var(--p400));
  --grad-hero:linear-gradient(135deg,#ff6b5e 0%,var(--p600) 45%,#a3083a 100%);
  --f-display:'Inter',-apple-system,"Segoe UI",Arial,sans-serif;
  --f-body:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color-scheme:light;
  letter-spacing:-.005em;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#fff7f6; --panel:rgba(255,255,255,.82); --soft:#fff2f1; --line:rgba(210,34,32,.14); --ink:#1d1212; --muted:#8a7472;
  --red-soft:#ffe9e7; --link:#b01815; --side:rgba(255,255,255,.66); --side-ink:#4a3a3a; --agent:#57534E;
  --s-planning:#f3dcda; --s-production:#ffc7c3; --s-client:#ff9f98; --s-ready:#e83a32; --s-posted:#950006;
  --ok-bg:#E3F4EA; --warn-bg:#FDF0DC; --bad-bg:#FDE7E6; color-scheme:light;
  --shadow:0 1px 2px rgba(64,0,3,.04),0 10px 30px rgba(210,34,32,.08);
}}
html,body{background:var(--bg)}
body{
  background:
    radial-gradient(900px 520px at 8% -10%,rgba(255,120,110,.26),transparent 60%),
    radial-gradient(800px 520px at 100% 0%,rgba(255,79,114,.13),transparent 60%),
    radial-gradient(900px 600px at 60% 110%,rgba(252,202,3,.12),transparent 60%),
    linear-gradient(180deg,#fff8f7 0%,#fff5f3 100%);
  background-attachment:fixed;
}
h1{font-weight:850;letter-spacing:-.03em}
h1 em{color:var(--p600)}

/* thanh bên kính mờ sáng */
.side{background:var(--side);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);border-right:1px solid rgba(255,255,255,.8);box-shadow:4px 0 30px rgba(210,34,32,.06);color:var(--side-ink)}
.logo .wm,.auth-logo .wm{color:var(--p600);letter-spacing:.06em;font-weight:850}
.logo .hub,.auth-logo .hub{background:none;color:var(--ink);font-size:12px;letter-spacing:.12em;padding:0;font-weight:800}
.side a{color:var(--side-ink);border-radius:14px;font-weight:550}
.side a .ic{color:var(--p500)}
.side a:hover{background:rgba(210,34,32,.08);color:var(--p800)}
.side a.on{background:var(--grad);color:#fff;box-shadow:var(--glow)}
.side a.on .ic,.side a.on:hover .ic{color:#fff}
.side a:hover .ic{color:var(--p700)}
.nav-group{color:var(--muted)}
.nav-more{color:var(--muted)}
.nav-more:hover{background:rgba(210,34,32,.06);color:var(--p700)}
.app-switch{background:var(--p50);color:var(--p700)!important;border:1px solid var(--p100)}
.side .me{color:var(--muted)}
.side .me button{color:var(--p700)}
.bell{color:var(--ink)}
.bell b{background:var(--p600)}

/* thẻ kính mờ */
.card,.tile2,.modal,.dep,.shoot-card,.sg-i,.todo-i,.tl-box{background:var(--panel);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass)}
.card,.tile2{border-radius:var(--r);border:1px solid rgba(255,255,255,.85);box-shadow:var(--shadow)}
.card h2,.card-h h2{font-weight:750;letter-spacing:-.015em}
.hic,.t-ic{background:linear-gradient(135deg,var(--p50),#fff);color:var(--p600);box-shadow:inset 0 0 0 1px var(--p100)}
.tbl th,.sheet th{background:rgba(255,240,239,.85);color:var(--muted)}
.tbl td{border-color:rgba(210,34,32,.08)}
.tbl tr.click:hover td,.sheet tr:hover td{background:rgba(255,242,241,.7)}

/* ô số đầu tiên: "hero" đỏ chuyển sắc như CRM */
.c360-tiles > .tile2:first-child,.tiles > .tile:first-child{background:var(--grad-hero);color:#fff;border-color:transparent;box-shadow:0 14px 34px rgba(210,34,32,.3);position:relative;overflow:hidden}
.c360-tiles > .tile2:first-child::before,.tiles > .tile:first-child::before{content:"";position:absolute;width:180px;height:180px;right:-60px;top:-80px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.35),transparent 70%);pointer-events:none}
.c360-tiles > .tile2:first-child *,.tiles > .tile:first-child *{color:#fff!important}
.c360-tiles > .tile2:first-child .t-ic{background:rgba(255,255,255,.2);box-shadow:none}
.c360-tiles > .tile2:first-child .bar,.c360-tiles > .tile2:first-child .ln-bar{background:rgba(255,255,255,.25)}
.c360-tiles > .tile2:first-child .ln-bar i{background:#fff}
.tile2.hot{border-color:var(--p300)}
.tile2.hot .t-ic{background:var(--grad);color:#fff;box-shadow:var(--glow)}

/* nút viên thuốc */
.btn{border-radius:999px;border:1px solid rgba(210,34,32,.18);background:rgba(255,255,255,.85);color:var(--ink);font-weight:600;transition:all .15s}
.btn:hover{border-color:var(--p300);background:#fff;color:var(--p700);box-shadow:0 4px 14px rgba(210,34,32,.12)}
.btn.primary{background:var(--grad);border-color:transparent;color:#fff;box-shadow:var(--glow)}
.btn.primary:hover{background:linear-gradient(90deg,var(--p700),var(--p500));color:#fff}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
.btn.danger{color:var(--p700)}

/* ô nhập */
input,select,textarea{border-radius:12px;border-color:rgba(210,34,32,.18);background:rgba(255,255,255,.92)}
input:focus,select:focus,textarea:focus{border-color:var(--p400);box-shadow:0 0 0 4px rgba(210,34,32,.14);outline:none}
.sheet td input,.sheet td select{border-radius:0;background:transparent}
.sheet td input:focus,.sheet td select:focus{box-shadow:none}

/* tab / bộ lọc dạng viên thuốc */
.seg button,.kind-tabs button,.tabs a{border-radius:999px}
.seg button.on,.kind-tabs button.on{background:var(--grad);border-color:transparent;color:#fff;box-shadow:var(--glow)}
.seg button.on b{background:#fff;color:var(--p700)}
.tabs a.on{color:var(--p700);border-color:var(--p600)}

/* chip, nhãn */
.chip{border-radius:999px}
.chip.st-posted{background:var(--p800);color:#fff}
.pr.high{background:var(--p100);color:var(--p700)}
.chip.lane-facebook{background:var(--grad);color:#fff}
.chip.lane-tiktok{background:var(--ink);color:#fff}

/* biểu đồ thanh: đỏ chuyển sắc */
.hb-bar i,.fn-bar i,.ubar i,.sc-prog i,.ln-bar i{background:var(--grad)}
.ubar i.low{background:#e9d6d5}

/* khối nền đậm → đỏ chuyển sắc */
.me-hero{background:var(--grad-hero);box-shadow:0 18px 40px rgba(210,34,32,.28)}
.me-norm{background:rgba(255,255,255,.14)}
.bulk{background:linear-gradient(90deg,var(--p800),var(--p600));box-shadow:var(--glow)}
.bulk select{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3)}
.musk{border-color:var(--p200)}
.mq li::before{background:var(--grad)}
.sg-card{border-color:var(--p200)}

/* modal & thông báo */
.modal{border-radius:22px;background:rgba(255,255,255,.97)}
.modal-bg{background:rgba(64,0,3,.25);backdrop-filter:blur(4px)}
.toast{border-radius:14px}

/* trang đăng nhập: thẻ trắng giữa nền ánh hồng — như CRM */
.auth{display:grid;grid-template-columns:1fr;place-items:center;background:transparent;min-height:100vh}
.auth .hero{display:none}
.auth form{background:#fff;border:0;border-radius:18px;box-shadow:0 10px 40px rgba(60,30,10,.12);margin:24px}
.auth-logo{display:flex;align-items:baseline;gap:8px;font-size:24px}
.auth form h2{font-size:22px}
.auth form .btn.primary{width:100%;justify-content:center;padding:12px}

/* thẻ "Việc của bạn" (vốn nền đen) → đỏ chuyển sắc */
.card.mine{background:var(--grad-hero);border:0;box-shadow:0 14px 34px rgba(210,34,32,.3)}
.card.mine::after{background:radial-gradient(circle,rgba(255,255,255,.35),transparent 70%)}
.card.mine .hic{background:rgba(255,255,255,.2);color:#fff;box-shadow:none}
.card.mine .btn{background:rgba(255,255,255,.95);color:var(--p700);border-color:transparent}
/* thẻ khách đầu tiên trong danh sách KHÔNG tô hero (chỉ ô số liệu) */
.client-grid > .card:first-child{background:var(--panel)}
.card.mine,.card.mine h2,.card.mine b,.card.mine span,.card.mine small,.card.mine .muted{color:#fff!important}
.card.mine .btn{color:var(--p700)!important}