/* ===== Insight Hub — Glassmorphism · DARK (tone black) ===== */
:root{
  /* Tông chính toàn site = ĐEN ẤM + CAM (kiểu Nexbit). BKE 2026 đổi sang lam ngọc qua .theme-teal */
  --p:#ff7a1a; --p2:#e8590c; --p-soft:rgba(255,122,26,.14);
  --fill:linear-gradient(135deg,#ff7a1a,#e8590c);  /* nền nút/pill/khối nhấn = cam */
  --fill-ink:#ffffff;
  --bg:#0c0a09; --ink:#f4f1ed; --muted:#9a948c;
  --card:rgba(255,255,255,.045);
  --glass:rgba(255,255,255,.04);
  --glass-line:rgba(255,255,255,.10);
  --shadow:0 16px 44px rgba(0,0,0,.55);
  --shadow-sm:0 6px 20px rgba(0,0,0,.45);
  /* Bo góc đồng bộ toàn site */
  --radius:16px; --radius-sm:10px; --radius-pill:30px;
  --pink:#e879a6; --blue:#6db3f2; --green:#4ade80; --orange:#ff7a1a;
}
/* BKE 2026 — tông lam ngọc (#0d97b9) */
.theme-teal{
  --p:#22b8de; --p2:#0d97b9; --p-soft:rgba(13,151,185,.16);
  --fill:linear-gradient(135deg,#19b2d6,#0d97b9);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:var(--ink);line-height:1.55;
  min-height:100vh;
  background:#0c0a09;
}
/* Lớp nền cố định qua ::before — thay cho background-attachment:fixed
   (iOS Safari KHÔNG hỗ trợ attachment:fixed → nền bị giãn/vỡ trên iPhone) */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1200px 760px at 50% -12%, rgba(255,110,20,.22) 0%, rgba(255,110,20,0) 55%),
    radial-gradient(1000px 720px at 102% 6%, rgba(232,89,12,.18) 0%, rgba(232,89,12,0) 52%),
    radial-gradient(900px 680px at -5% 108%, rgba(180,60,10,.20) 0%, rgba(180,60,10,0) 55%),
    linear-gradient(160deg,#0d0a08 0%,#0a0807 100%);
}
/* nền BKE 2026 ngả ánh teal */
body.theme-teal{background:#0a1014}
body.theme-teal::before{
  background:
    radial-gradient(1000px 720px at 50% -12%, rgba(13,151,185,.24) 0%, rgba(13,151,185,0) 55%),
    radial-gradient(900px 640px at 100% 110%, rgba(13,151,185,.14) 0%, rgba(13,151,185,0) 55%),
    linear-gradient(135deg,#0a1014 0%,#0a1418 100%);
}
a{color:var(--p2);text-decoration:none}
a:hover{color:var(--p)}
img{max-width:100%}

/* ---- shell: sidebar trái + cột nội dung (layout kiểu dashboard) ---- */
.layout{display:flex;min-height:100vh}
.side{width:236px;flex-shrink:0;position:fixed;top:0;bottom:0;left:0;z-index:60;
  display:flex;flex-direction:column;gap:4px;padding:18px 14px;
  background:rgba(16,13,10,.72);backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);border-right:1px solid var(--glass-line)}
.brand{font-weight:800;color:var(--ink);font-size:17px;display:flex;align-items:center;gap:9px;
  padding:4px 8px 16px;margin-bottom:6px;border-bottom:1px solid var(--glass-line)}
.brand .logo{width:30px;height:30px;border-radius:var(--radius-sm);background:var(--fill);
  display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:15px;box-shadow:var(--shadow-sm)}
.snav{display:flex;flex-direction:column;gap:4px}
.snav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);
  color:var(--muted);font-size:13.5px;font-weight:600;transition:.16s}
.snav a:hover{background:var(--p-soft);color:var(--p)}
.snav a.on{background:var(--fill);color:#fff;box-shadow:var(--shadow-sm)}
.snav a.soon{color:#5f5a52;cursor:default}
.snav a.soon:hover{background:transparent;color:#5f5a52}
.snav a .ic{width:20px;text-align:center;flex-shrink:0}
.badge-soon{font-size:9px;background:rgba(255,255,255,.08);color:#8d8780;border-radius:8px;padding:1px 6px;margin-left:auto}
.sgrp{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:#6f6960;font-weight:800;padding:16px 12px 8px}
.side-cta{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--fill);
  color:#fff;font-weight:700;font-size:13.5px;padding:11px 14px;border-radius:var(--radius-sm);box-shadow:var(--shadow-sm)}
.side-cta:hover{filter:brightness(1.1);color:#fff}
.side-sp{flex:1}
.side-help{display:flex;align-items:center;gap:8px;width:100%;background:rgba(255,255,255,.05);
  border:1px solid var(--glass-line);color:var(--muted);font-size:12.5px;font-weight:600;
  padding:10px 12px;border-radius:var(--radius-sm);cursor:pointer;font-family:inherit;text-align:left}
.side-help:hover{color:var(--p);border-color:var(--p)}
.side-user{display:flex;align-items:center;gap:10px;margin-top:10px;padding:12px 8px 2px;border-top:1px solid var(--glass-line);font-size:12.5px}
.side-user .nm{font-weight:800;color:var(--ink)}
.side-user .rl{color:var(--muted);font-size:11px;text-transform:capitalize}
.side-user a{margin-left:auto;color:var(--muted);font-size:15px}
.side-user a:hover{color:var(--p)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--fill);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0}
.maincol{flex:1;margin-left:236px;min-width:0}
.topbar2{display:flex;align-items:center;gap:12px;padding:13px 26px;position:sticky;top:0;z-index:50;
  border-bottom:1px solid var(--glass-line);background:rgba(16,13,10,.5);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%)}
.topbar2 .sp{flex:1}
.topbar2 .hello{font-size:13px;color:var(--muted)}
.topbar2 .hello b{color:var(--ink)}
@media(max-width:900px){
  .layout{flex-direction:column}   /* QUAN TRỌNG: sidebar xếp TRÊN nội dung, không ép nội dung về 0px */
  .side{position:static;width:100%;height:auto;flex:none;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;
    border-right:0;border-bottom:1px solid var(--glass-line);padding:10px 12px}
  .brand{border:0;padding:2px 4px;margin:0;flex:1;font-size:15.5px}
  .side-cta{padding:8px 13px;font-size:12px}
  /* nav 1 hàng, cuộn ngang mượt — không wrap chiếm nửa màn hình */
  .snav{order:3;flex:1 1 100%;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:6px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .snav::-webkit-scrollbar{display:none}
  .snav a{white-space:nowrap;flex-shrink:0;padding:8px 12px;font-size:12.5px}
  .badge-soon{margin-left:5px}
  .side-sp,.side-user,.side-help,.sgrp{display:none}
  .maincol{margin-left:0}
  .topbar2{display:none}  /* mobile: header đã có nút đăng nhập/quản trị, khỏi lặp */
}

/* ---- layout ---- */
.wrap{max-width:1240px;margin:0 auto;padding:30px 22px}
.crumb{font-size:12.5px;color:var(--muted);margin-bottom:14px}
.crumb a{color:var(--muted)} .crumb a:hover{color:var(--p)}
h1{font-size:27px;font-weight:800;color:var(--ink);letter-spacing:-.3px}
.lead{color:var(--muted);margin:6px 0 24px;font-size:14.5px}
.lead a{color:var(--p2)}
h2.sec{font-size:19px;color:var(--ink);margin:12px 0 15px;font-weight:800;letter-spacing:-.2px}

/* ---- hero (dark glass) ---- */
.hero{position:relative;overflow:hidden;border-radius:var(--radius);padding:42px 36px;color:#fff;margin-bottom:28px;
  background:linear-gradient(125deg,#3a2113 0%,#1c1410 56%,#120d0a 100%);
  border:1px solid var(--glass-line);box-shadow:var(--shadow)}
.theme-teal .hero{background:linear-gradient(125deg,#0f5a6e 0%,#0d3f50 60%,#0a2630 100%)}
.hero::after{content:"";position:absolute;inset:0;background:
  radial-gradient(440px 260px at 92% -25%, rgba(255,122,26,.35), transparent 60%),
  radial-gradient(360px 220px at 0% 120%, rgba(255,140,40,.18), transparent 60%);pointer-events:none}
.theme-teal .hero::after{background:
  radial-gradient(440px 260px at 92% -25%, rgba(120,220,240,.22), transparent 60%),
  radial-gradient(360px 220px at 0% 120%, rgba(120,200,220,.18), transparent 60%)}
.hero h1{color:#fff;font-size:31px;position:relative}
.hero p{opacity:.92;margin-top:10px;font-size:15px;max-width:700px;position:relative}

/* ---- cards grid (dark glass tiles) ---- */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.tile{position:relative;background:var(--glass);
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);
  border:1px solid var(--glass-line);transition:.2s;display:block;overflow:hidden}
a.tile:hover{transform:translateY(-4px);box-shadow:0 20px 48px rgba(0,0,0,.55);border-color:rgba(255,255,255,.28)}
.tile .ico{width:48px;height:48px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;
  font-size:23px;margin-bottom:14px;background:rgba(255,255,255,.08)!important;box-shadow:var(--shadow-sm)}
.tile h3{font-size:16.5px;color:var(--ink);font-weight:800;letter-spacing:-.2px}
.tile p{font-size:13px;color:var(--muted);margin-top:6px}
.tile .tag{display:inline-block;margin-top:13px;font-size:11px;font-weight:700;padding:4px 11px;border-radius:var(--radius-pill)}
.tag.live{background:rgba(74,222,128,.16);color:#4ade80}.tag.soon{background:rgba(255,255,255,.09);color:#a0a6ba}
.tile.disabled{opacity:.6;pointer-events:none}

/* ---- stat cards (dark glass) ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:15px;margin-bottom:24px}
.stat{background:var(--glass);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-sm);border:1px solid var(--glass-line)}
.stat .n{font-size:28px;font-weight:800;color:var(--ink);letter-spacing:-.5px} .stat .l{font-size:12px;color:var(--muted);margin-top:4px}
.stat.hl{background:var(--fill);border:1px solid var(--glass-line);box-shadow:var(--shadow)}
.stat.hl .n,.stat.hl .l{color:#fff}

/* ---- panel + chart (dark glass) ---- */
.panel{background:var(--glass);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm);border:1px solid var(--glass-line)}
.panel h2{font-size:15px;color:var(--ink);margin-bottom:12px;font-weight:800}
canvas{max-height:240px}

/* ---- table ---- */
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid rgba(255,255,255,.10)}
th{color:var(--muted);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.3px}
td.v{text-align:right;font-weight:700;color:var(--p);white-space:nowrap}
.chip{display:inline-block;padding:2px 9px;border-radius:var(--radius-pill);font-size:11px;font-weight:700}
.cA{background:rgba(232,121,166,.18);color:#f0a3c4}.cB{background:rgba(109,179,242,.18);color:#9cc9f7}.cC{background:rgba(255,255,255,.10);color:#a8aec2}
a.reel{color:var(--p2);font-weight:700}

/* ---- controls/filter (glass pills) ---- */
.controls{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.controls button{border:1px solid var(--glass-line);background:rgba(255,255,255,.06);color:var(--p);
  padding:7px 15px;border-radius:var(--radius-pill);font-size:12.5px;cursor:pointer;font-weight:600;backdrop-filter:blur(8px);transition:.16s}
.controls button:hover{background:rgba(255,255,255,.12)}
.controls button.on{background:var(--fill);color:var(--fill-ink);border-color:transparent;box-shadow:var(--shadow-sm)}

/* ---- reel analysis cards (dark glass) ---- */
.cardgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.rcard{background:var(--glass);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  border-radius:var(--radius);padding:17px;box-shadow:var(--shadow-sm);border:1px solid var(--glass-line)}
.rcard .ch{display:flex;gap:13px;margin-bottom:10px}
.rcard .thumb{width:88px;height:150px;object-fit:cover;border-radius:var(--radius-sm);flex-shrink:0;background:#1a1d26}
.rcard .rank{font-size:15px;font-weight:800;color:var(--p)} .rcard .views{font-size:12px;color:var(--muted);font-weight:600}
.rcard .ctitle{font-size:14px;font-weight:700;margin:3px 0 7px;color:var(--ink)}
.badges{display:flex;flex-wrap:wrap;gap:5px}
.b{font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:var(--radius-sm)}
.b.fmt{background:rgba(146,128,231,.20);color:#b6abf0}.b.vo{background:rgba(232,121,166,.18);color:#f0a3c4}.b.novo{background:rgba(109,179,242,.18);color:#9cc9f7}.b.dur{background:rgba(255,255,255,.10);color:#a8aec2}
.hookline{font-size:12.5px;background:rgba(245,176,114,.14);border-radius:var(--radius-sm);padding:8px 11px;margin-bottom:8px}
.scriptx{font-size:12.5px;color:#c2c6d6;margin-bottom:8px}
.why{font-size:12.5px}.why ul{margin:5px 0 0 16px}.why li{margin-bottom:3px}
.why b,.scriptx b,.hookline b{color:var(--p)}
.sb{margin-top:10px}.sb summary{cursor:pointer;font-size:12px;color:var(--p2);font-weight:600}
.sb img{width:100%;border-radius:var(--radius-sm);margin-top:8px}

/* ---- formula (dark glass) ---- */
.formula{background:var(--glass);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm);border:1px solid var(--glass-line);margin-bottom:24px}
.formula h2{font-size:18px;color:var(--p);margin-bottom:14px;font-weight:800}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fitem{border-left:3px solid var(--p2);padding:8px 14px;background:rgba(255,255,255,.05);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:13px}
.fitem b{color:var(--p)}

.callout{background:rgba(245,176,114,.12);border:1px solid rgba(245,176,114,.30);border-radius:var(--radius);padding:14px 17px;font-size:13px;margin-bottom:20px;backdrop-filter:blur(8px);color:#e7d3bd}
.foot{text-align:center;color:#727890;font-size:12px;margin:34px 0 10px}

@media(max-width:820px){
  .g2,.g3,.cardgrid,.fgrid{grid-template-columns:1fr}
  .nav-in{flex-wrap:wrap}
  .hero{padding:32px 24px}.hero h1{font-size:25px}
}

/* ===== Motion layer — cảm giác iOS (spring easing, phản hồi tức thì) ===== */
:root{
  --ease-ios:cubic-bezier(.16,1,.3,1);       /* bật nhanh đầu, lướt mượt về cuối */
  --ease-ios-soft:cubic-bezier(.22,1,.36,1);
}

/* Chuyển trang mượt (View Transitions — Safari/Chrome mới, nơi khác tự bỏ qua) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .22s var(--ease-ios-soft) both}
::view-transition-new(root){animation:vt-in .38s var(--ease-ios) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}

/* Mọi phần tử tương tác: easing lò xo thay cho linear/ease khô */
body a,body button,body .tile,body .stat,body .sx,body .mcard,body .dash-card,
body .snav a,body .side-cta,body .side-help,body .hbtn,body .subtabs a,
body .controls button,body .tk-btn,body .btn-add,body .tk,body .nitem,body .act-item{
  transition:transform .5s var(--ease-ios),box-shadow .5s var(--ease-ios),
    background-color .28s var(--ease-ios-soft),color .28s var(--ease-ios-soft),
    border-color .28s var(--ease-ios-soft),opacity .28s var(--ease-ios-soft),
    filter .28s var(--ease-ios-soft)}
a,button{-webkit-tap-highlight-color:transparent}

/* Phản hồi tức thì khi nhấn — co 4% ngay lập tức, nhả ra nảy về bằng lò xo */
body a.tile:active,body a.mcard:active,body a.dash-card:active,
body .snav a:active,body .side-cta:active,body .side-help:active,
body .hbtn:active,body .subtabs a:active,body .controls button:active,
body .tk-btn:active,body .btn-add:active,body .sgo:active,body .hint a:active{
  transform:scale(.96);transition-duration:.08s}

/* Hover nâng nhẹ — lướt bằng spring */
body a.tile:hover,body a.mcard:hover{transform:translateY(-4px)}
body a.dash-card:hover{transform:translateY(-4px)}
body .snav a:hover{transform:translateX(2px)}
body .side-cta:hover{transform:translateY(-1px)}

/* Vào trang: các khối trồi lên lần lượt (stagger) */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.wrap>*{animation:rise .55s var(--ease-ios) backwards}
.wrap>*:nth-child(1){animation-delay:.02s}
.wrap>*:nth-child(2){animation-delay:.07s}
.wrap>*:nth-child(3){animation-delay:.12s}
.wrap>*:nth-child(4){animation-delay:.17s}
.wrap>*:nth-child(5){animation-delay:.22s}
.wrap>*:nth-child(6){animation-delay:.27s}
.statx>*,.grid>*,.dash-grid>*,.stats>*,.cardgrid>*,.tklist>*{animation:rise .5s var(--ease-ios) backwards}
.statx>*:nth-child(1),.grid>*:nth-child(1),.dash-grid>*:nth-child(1),.stats>*:nth-child(1),.cardgrid>*:nth-child(1),.tklist>*:nth-child(1){animation-delay:.08s}
.statx>*:nth-child(2),.grid>*:nth-child(2),.dash-grid>*:nth-child(2),.stats>*:nth-child(2),.cardgrid>*:nth-child(2),.tklist>*:nth-child(2){animation-delay:.14s}
.statx>*:nth-child(3),.grid>*:nth-child(3),.dash-grid>*:nth-child(3),.stats>*:nth-child(3),.cardgrid>*:nth-child(3),.tklist>*:nth-child(3){animation-delay:.20s}
.statx>*:nth-child(4),.grid>*:nth-child(4),.dash-grid>*:nth-child(4),.stats>*:nth-child(4),.cardgrid>*:nth-child(4),.tklist>*:nth-child(4){animation-delay:.26s}
.statx>*:nth-child(5),.grid>*:nth-child(5),.dash-grid>*:nth-child(5),.stats>*:nth-child(5),.cardgrid>*:nth-child(5),.tklist>*:nth-child(5){animation-delay:.32s}
.statx>*:nth-child(6),.grid>*:nth-child(6),.dash-grid>*:nth-child(6),.stats>*:nth-child(6),.cardgrid>*:nth-child(6),.tklist>*:nth-child(6){animation-delay:.38s}

/* Sidebar trượt vào lần đầu */
@keyframes slideIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
.side{animation:slideIn .5s var(--ease-ios) backwards}
.topbar2{animation:rise .45s var(--ease-ios) .05s backwards}

/* Thanh tiến độ & checkbox lướt bằng spring */
body .pbar>i,body .tk-bar>i{transition:width .7s var(--ease-ios)}
body .nitem input{transition:transform .3s var(--ease-ios)}
body .nitem input:active{transform:scale(.85)}

/* Cuộn quán tính kiểu iOS cho khung cuộn nội bộ */
#ai-msgs,.sb-nav{-webkit-overflow-scrolling:touch}

/* Tôn trọng người dùng tắt chuyển động */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ===== Mobile polish — iPhone (≤700px) ===== */
@media(max-width:700px){
  html,body{overflow-x:hidden;max-width:100%}  /* lưới an toàn: chặn mọi tràn ngang */
  .wrap{padding:18px 14px}
  h1{font-size:22px}
  .lead{font-size:13.5px;margin-bottom:18px}
  .hero{padding:26px 20px}
  .hero h1{font-size:24px}
  /* bảng rộng: cuộn ngang BÊN TRONG panel, không phá khung trang */
  .panel{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .panel table{min-width:520px}
  .stats{gap:10px}
  .foot{margin:24px 0 8px}
}