/* Cuộn mượt khi bấm link neo (vd "See how it works" -> #how-it-works) thay vì nhảy thẳng tới.
   Tự tắt nếu khách bật "giảm chuyển động" trong hệ điều hành. */
@media(prefers-reduced-motion: no-preference){html{scroll-behavior:smooth;}}

/* Chuyển trang mượt (crossfade) giữa các trang tĩnh cùng site — trình duyệt hỗ trợ (Safari 18.2+,
   Chrome 126+) sẽ tự crossfade khi bấm link nội bộ, không hỗ trợ thì chuyển trang bình thường như cũ,
   không cần JS, không lỗi gì ở trình duyệt cũ. */
@view-transition{navigation:auto;}

:root{
  --bg:#ffffff;
  --bg-soft:#f7f7fb;
  --card:#ffffff;
  --border:#e8e8f0;
  --text:#13131c;
  --muted:#6b6b7c;
  --accent:#F5F3FF;
  --accent2:#F5F3FF;
  --accent-grad: linear-gradient(135deg,#8B5CF6 0%,#F5F3FF 100%);
  --radius:16px;
  --shadow-card: 0 2px 8px rgba(20,20,45,0.05), 0 1px 2px rgba(20,20,45,0.04);
  --shadow-hover: 0 16px 40px rgba(20,20,45,0.1), 0 2px 8px rgba(20,20,45,0.05);
  --ease: cubic-bezier(.2,.8,.2,1);
  --header-bg: rgba(255,255,255,0.85);
  --dot-pattern: rgba(19,19,28,0.06);

  --warn-text:#b45309; --warn-bg:rgba(217,119,6,0.1); --warn-border:rgba(217,119,6,0.3);
  --danger-text:#c81e3a; --danger-bg:rgba(220,38,38,0.08); --danger-border:rgba(220,38,38,0.25);
  --purple-text:#F5F3FF; --purple-bg:rgba(139,92,246,0.12); --purple-border:rgba(139,92,246,0.35);
  --spike-bg:#fee2e2; --spike-text:#dc2626;
}
:root[data-theme="dark"]{
  --bg:#0a0a0f;
  --bg-soft:#131319;
  --card:#16161f;
  --border:#28282f;
  --text:#f1f1f4;
  --muted:#94949e;
  --accent:#8B5CF6;
  --accent2:#8B5CF6;
  --accent-grad: linear-gradient(135deg,#8B5CF6 0%,#8B5CF6 50%,#F5F3FF 100%);
  --shadow-card: 0 2px 8px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-hover: 0 16px 40px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3);
  --header-bg: rgba(10,10,15,0.85);
  --dot-pattern: rgba(255,255,255,0.05);

  --warn-text:#ffb066; --warn-bg:rgba(255,150,50,0.12); --warn-border:rgba(255,150,50,0.3);
  --danger-text:#ff8080; --danger-bg:rgba(255,80,80,0.08); --danger-border:rgba(255,80,80,0.25);
  --purple-text:#8B5CF6; --purple-bg:rgba(139,92,246,0.14); --purple-border:rgba(139,92,246,0.32);
  --spike-bg:rgba(220,38,38,0.18); --spike-text:#ff8080;
}
*{box-sizing:border-box;margin:0;padding:0;}
.ti{vertical-align:-2px;line-height:1;}
.btn .ti, .row-btn .ti, .group-tab .ti, .niche-chip .ti, .niche-badge .ti,
.badge-age .ti, .badge-hottest .ti, .cache-notice .ti, .scan-counter .ti,
.spike-highlight-label .ti, .saved-note .ti, .paywall-icon .ti{margin-right:4px;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter','Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background .2s ease, color .2s ease;
}
a{color:inherit;text-decoration:none;}
.container{max-width:1120px;margin:0 auto;padding:0 24px;}
section{padding:104px 0;}

/* NAV */
header{
  position:sticky;top:0;z-index:50;
  background:var(--header-bg);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
nav{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;padding:18px 24px;max-width:1120px;margin:0 auto;transition:padding .3s ease;}
.logo{display:flex;align-items:center;gap:9px;font-weight:600;font-size:20px;letter-spacing:-0.3px;transition:font-size .3s ease,gap .3s ease;}
.logo-icon{width:26px;height:26px;border-radius:7px;flex-shrink:0;transition:width .3s ease,height .3s ease;}
.nav-links{display:flex;gap:22px;font-size:14px;font-weight:500;color:var(--muted);align-items:center;}
.nav-links a{position:relative;transition:color .15s ease;}
.nav-links a:hover{color:var(--text);}
.nav-cta{
  padding:10px 20px;border-radius:10px;background:var(--accent-grad);
  font-weight:600;font-size:14px;color:#fff;transition:transform .15s var(--ease), box-shadow .15s var(--ease);
}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(139,92,246,0.3);}
.nav-links{justify-self:start;margin-left:28px;}
/* Nút đăng xuất không hiện ở thanh trên cùng (vẫn có trong thanh bên của app) */
header #authSignOutBtn{display:none;}
.nav-actions{display:flex;align-items:center;gap:16px;justify-self:end;}
.auth-login-link{font-size:14px;font-weight:600;color:var(--text);transition:color .15s ease;}
.auth-login-link:hover{color:var(--accent);}
@media(max-width:768px){.nav-links{display:none;}}

/* APP SHELL (layout sidebar cho app.html) */
.app-shell{display:flex;min-height:100vh;}
.app-sidebar{
  width:240px;flex-shrink:0;background:var(--card);border-right:1px solid var(--border);
  display:flex;flex-direction:column;padding:20px 16px;position:sticky;top:0;height:100vh;
}
.sidebar-logo{display:flex;align-items:center;gap:10px;padding:4px 8px 28px;}
.sidebar-logo .logo-icon{width:30px;height:30px;border-radius:8px;}
.sidebar-logo strong{display:block;font-size:16px;font-weight:600;letter-spacing:-0.2px;}
.sidebar-logo small{display:block;font-size:11px;color:var(--muted);font-weight:500;}
.sidebar-scroll{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;}
.sidebar-nav{display:flex;flex-direction:column;gap:3px;}
.sidebar-link{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;
  font-size:14px;font-weight:500;color:var(--muted);transition:all .15s ease;
}
.sidebar-link:hover{background:var(--bg-soft);color:var(--text);}
.sidebar-link.active{background:var(--purple-bg);color:var(--accent);font-weight:600;}
.sidebar-link i{font-size:18px;width:18px;text-align:center;}
.sidebar-badge{
  margin-left:auto;flex-shrink:0;background:#ef4444;color:#fff;font-size:11px;font-weight:600;
  padding:1px 7px;border-radius:100px;line-height:1.5;
}
.sidebar-group-label{
  font-size:11px;font-weight:600;letter-spacing:0.6px;text-transform:uppercase;color:var(--muted);
  padding:18px 12px 8px;
}
.sidebar-footer{display:flex;flex-direction:column;gap:10px;padding-top:16px;border-top:1px solid var(--border);}
.sidebar-footer .settings-dropdown{width:100%;}
.sidebar-footer .settings-panel{top:auto;bottom:calc(100% + 8px);left:0;right:auto;}
.sidebar-footer .settings-btn{width:100%;border-radius:10px;justify-content:flex-start;gap:8px;padding:0 12px;}
.sidebar-footer .auth-widget{flex-direction:column;align-items:flex-start;gap:8px;}
.app-main{flex:1;min-width:0;}
.app-main section{padding:56px 0;}
@media(max-width:900px){
  .app-shell{flex-direction:column;}
  .app-sidebar{
    width:100%;height:auto;position:relative;flex-direction:row;align-items:center;
    padding:12px 16px;overflow-x:auto;
  }
  .sidebar-logo{padding:0;margin-right:16px;flex-shrink:0;}
  .sidebar-logo small{display:none;}
  .sidebar-scroll{flex-direction:row;overflow:visible;}
  .sidebar-nav{flex-direction:row;}
  .sidebar-group-label, .sidebar-nav-explore{display:none;}
  .sidebar-link span{display:none;}
  .sidebar-link{position:relative;}
  .sidebar-link .sidebar-badge{
    display:block;position:absolute;top:4px;right:8px;margin-left:0;
    width:8px;height:8px;padding:0;border-radius:50%;font-size:0;line-height:0;
  }
  .sidebar-footer{flex-direction:row;margin-left:auto;border-top:none;padding-top:0;flex-shrink:0;}
  .sidebar-footer .auth-widget{flex-direction:row;}
}

/* THEME TOGGLE */
.theme-toggle{display:flex;gap:2px;background:var(--bg-soft);border:1px solid var(--border);border-radius:100px;padding:2px;}
.theme-btn{
  border:none;background:none;padding:5px 10px;border-radius:100px;font-size:14px;line-height:1;
  color:var(--muted);cursor:pointer;transition:all .15s ease;
}
.theme-btn.active{background:var(--card);color:var(--text);box-shadow:0 1px 3px rgba(20,20,40,0.1);}

/* SETTINGS DROPDOWN (gộp theme + ngôn ngữ, đỡ chật header) */
.settings-dropdown{position:relative;}
.settings-btn{
  width:36px;height:36px;border-radius:100px;border:1px solid var(--border);background:var(--bg-soft);
  cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;
  color:var(--text);transition:border-color .15s ease;
}
.settings-btn:hover{border-color:var(--accent);}
.settings-panel{
  display:none;position:absolute;top:calc(100% + 8px);right:0;background:var(--card);
  border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-hover);
  padding:14px;min-width:190px;z-index:60;
}
.settings-panel.open{display:block;}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0;}
.settings-row span{font-size:12.5px;color:var(--muted);font-weight:600;}

/* AUTH */
.auth-widget{display:flex;align-items:center;gap:10px;}
.auth-account{display:flex;align-items:center;gap:8px;cursor:default;}
.auth-avatar{
  width:30px;height:30px;border-radius:50%;background:var(--accent-grad);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex-shrink:0;
}
.auth-user-email{display:none;font-size:13px;color:var(--muted);}
img.auth-avatar{object-fit:cover;background:var(--bg-soft);}
.auth-avatar.lg{width:72px;height:72px;font-size:28px;}
.auth-name{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;}
a.auth-account{cursor:pointer;text-decoration:none;}

/* Huy hiệu gói: FREE xám nhẹ, PRO màu vàng-hồng-tím có ánh sáng */
.plan-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;letter-spacing:.6px;padding:4px 10px;border-radius:100px;flex-shrink:0;white-space:nowrap;}
.plan-chip.free{background:var(--bg-soft);color:var(--muted);border:1px solid var(--border);}
.plan-chip.pro{
  color:#fff;background:var(--accent-grad);
  box-shadow:0 0 14px rgba(139,92,246,.55);border:none;
}
.plan-chip.pro i{font-size:13px;}
.profile-avatar-row{display:flex;align-items:center;gap:18px;padding-bottom:16px;margin-bottom:8px;border-bottom:1px solid var(--border);}
.profile-avatar-info{display:flex;flex-direction:column;gap:4px;min-width:0;}
.profile-avatar-actions{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap;}
.btn-sm{padding:7px 14px;font-size:13px;cursor:pointer;}

/* ===== MỘT màu nhận diện: xanh ngọc. Chữ trên nền xanh ngọc phải tối để dễ đọc ===== */
.btn-primary,.nav-cta,.row-btn.save,.group-tab.active,.plan-badge.plan-pro,.auth-avatar,.teaser-reveal-btn:hover,.step-num,
.niche-chip.active,.niche-pick-btn,.ws-form .btn-primary{color:#0a0a0b !important;}
.btn-primary,.nav-cta{box-shadow:0 4px 14px rgba(139,92,246,0.28);}
.btn-primary:hover,.nav-cta:hover{box-shadow:0 8px 22px rgba(139,92,246,0.45);}
.auth-modal-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:100;
  align-items:center;justify-content:center;padding:20px;
}
.auth-modal{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-card);
  padding:32px;width:100%;max-width:360px;position:relative;
}
.auth-modal-close{
  position:absolute;top:16px;right:16px;background:none;border:none;color:var(--muted);
  font-size:18px;cursor:pointer;
}
.auth-modal h3{font-size:20px;font-weight:600;margin-bottom:20px;}
.auth-modal form{display:flex;flex-direction:column;gap:12px;}
.auth-modal input{
  padding:12px 16px;border-radius:10px;border:1px solid var(--border);
  background:var(--bg-soft);color:var(--text);font-size:14px;outline:none;
}
.auth-modal input:focus{border-color:var(--accent);}
.auth-modal .btn{margin-top:4px;}
.btn-google{
  width:100%;justify-content:center;background:#fff;color:#1f1f1f;border:1px solid #dadce0;
  padding:12px 20px;font-size:14px;
}
.btn-google:hover{box-shadow:0 1px 6px rgba(0,0,0,0.15);transform:translateY(-1px);}
.btn-google i{color:#4285F4;font-size:17px;}
.auth-divider{
  display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--muted);
  font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;
}
.auth-divider::before, .auth-divider::after{content:'';flex:1;height:1px;background:var(--border);}
.auth-error{display:none;margin-top:14px;font-size:13px;}
.auth-switch{margin-top:18px;text-align:center;font-size:13px;color:var(--muted);}
.auth-switch-link{
  background:none;border:none;color:var(--accent2);font-weight:600;font-size:13px;
  cursor:pointer;margin-left:6px;
}

/* TOAST */
.toast-container{position:fixed;bottom:24px;right:24px;z-index:200;display:flex;flex-direction:column;gap:10px;}
.toast{
  background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-hover);
  padding:14px 20px;font-size:14px;font-weight:500;color:var(--text);max-width:320px;
  opacity:0;transform:translateY(10px);transition:opacity .25s ease, transform .25s ease;
}
.toast.show{opacity:1;transform:translateY(0);}
.toast-error{border-left:3px solid var(--danger-text);color:var(--danger-text);}
.toast-success{border-left:3px solid var(--accent2);}
.toast-info{border-left:3px solid var(--accent);}

/* SAVE GROUP MODAL */
.save-group-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;max-height:220px;overflow-y:auto;}
.save-group-item{
  text-align:left;padding:12px 16px;border-radius:10px;border:1px solid var(--border);
  background:var(--bg-soft);color:var(--text);font-size:14px;font-weight:500;cursor:pointer;
  transition:border-color .15s ease;
}
.save-group-item:hover{border-color:var(--accent);}
.save-group-new{display:flex;gap:8px;}
.save-group-new input{
  flex:1;padding:12px 16px;border-radius:10px;border:1px solid var(--border);
  background:var(--bg-soft);color:var(--text);font-size:14px;outline:none;
}
.save-group-new input:focus{border-color:var(--accent);}

/* CHART MODAL */
.chart-modal{max-width:560px;}
#chartModalBody{min-height:100px;}

/* RELATED CHANNELS MODAL */
#relatedModalBody{display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow-y:auto;}
.related-channel-card{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;
  border:1px solid var(--border);color:var(--text);transition:border-color .15s ease;
}
.related-channel-card:hover{border-color:var(--accent);}
.related-channel-card img{width:38px;height:38px;border-radius:50%;flex-shrink:0;}
.related-channel-card .related-channel-info{flex:1;min-width:0;}
.related-channel-card .name{font-weight:600;font-size:14px;}
.related-channel-card .ti-brand-youtube{font-size:18px;color:var(--muted);flex-shrink:0;}
.related-channel-card .related-yt{display:inline-flex;padding:6px;border-radius:8px;}
.related-channel-card .related-yt:hover .ti-brand-youtube{color:var(--accent);}
.related-channel-card .related-save{flex-shrink:0;cursor:pointer;}

/* APP GATE */
.app-gate{display:none;padding:140px 0;}
.app-gate-box{
  max-width:480px;margin:0 auto;text-align:center;background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius);padding:48px 40px;box-shadow:var(--shadow-card);
}
.app-gate-box h2{font-size:26px;font-weight:600;margin-bottom:14px;}
.app-gate-box p{color:var(--muted);font-size:15px;margin-bottom:28px;}

/* HERO */
.hero{padding:112px 0 84px;text-align:center;position:relative;}
.hero::before{
  content:'';position:absolute;top:-140px;left:50%;transform:translateX(-50%);
  width:720px;height:720px;background:radial-gradient(circle,rgba(139,92,246,0.13) 0%,transparent 68%);
  z-index:-1;pointer-events:none;
}
.hero::after{
  content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:radial-gradient(var(--dot-pattern) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(ellipse 60% 50% at 50% 0%, black 0%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 60% 50% at 50% 0%, black 0%, transparent 75%);
}
/* Hero trang chủ luôn nền đen kiểu Viddar, không phụ thuộc theme sáng/tối người dùng chọn —
   ghi đè lại các biến màu, mọi rule bên dưới (badge/tag/nút/link) đã dùng var() nên tự đổi theo. */
.hero-split{
  --bg-soft:#131319; --card:#16161f; --border:#28282f;
  --text:#f1f1f4; --muted:#a0a0ac; --accent2:#8B5CF6; --dot-pattern:rgba(255,255,255,0.06);
  background:#0a0a0f; color:var(--text);
}
.hero-split::before{background:radial-gradient(circle,rgba(139,92,246,0.22) 0%,transparent 68%);}

.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:100px;border:1px solid var(--border);
  background:var(--bg-soft);font-size:13px;color:var(--accent2);font-weight:600;
  letter-spacing:0.5px;margin-bottom:28px;
}
.badge::before{content:'●';color:var(--accent2);animation:pulse 1.5s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.3;}}
h1{
  font-size:60px;font-weight:600;line-height:1.12;letter-spacing:-1.5px;
  max-width:820px;margin:0 auto 24px;
}
h1 span{background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero-sub{
  font-size:18.5px;color:var(--muted);max-width:600px;margin:0 auto 40px;line-height:1.65;
}
.hero-tags{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:36px;}
.tag{
  font-size:13px;font-weight:500;color:var(--muted);border:1px solid var(--border);
  padding:6px 14px;border-radius:100px;background:var(--bg-soft);
}
.cta-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:20px;}
.btn{
  padding:15px 30px;border-radius:12px;font-weight:600;font-size:15px;letter-spacing:-0.1px;
  display:inline-flex;align-items:center;gap:8px;transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
  cursor:pointer;border:none;
}
.btn-primary{background:var(--accent-grad);color:#fff;box-shadow:0 4px 14px rgba(139,92,246,0.3);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(139,92,246,0.45);}
.btn-primary:active{transform:translateY(0);}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text);}
.btn-ghost:hover{border-color:var(--accent);background:var(--bg-soft);transform:translateY(-1px);}
.btn-lg{padding:18px 40px;font-size:16.5px;}
.hero-link{
  display:inline-block;font-size:13.5px;font-weight:600;color:var(--muted);
  margin-bottom:20px;transition:color .15s ease;
}
.hero-link:hover{color:var(--accent);}
.hero-note{font-size:13px;color:var(--muted);}

.hero-growth-graphic{display:none;width:100%;max-width:280px;height:auto;pointer-events:none;}
@media(min-width:1180px){
  .hero-split{text-align:left;}
  .hero-split .container{
    display:grid;grid-template-columns:1fr 300px;align-items:center;gap:56px;
  }
  .hero-content{grid-column:1;}
  .hero-split h1{margin-left:0;}
  .hero-split .hero-sub{margin-left:0;}
  .hero-split .hero-tags, .hero-split .cta-row{justify-content:flex-start;}
  .hero-growth-graphic{display:block;grid-column:2;justify-self:center;}
}
.hero-bar{
  transform-box:fill-box;transform-origin:bottom;
  animation:barGrow .6s cubic-bezier(.2,.8,.2,1) var(--d) both,
            barBreathe 2.2s ease-in-out calc(var(--d) + .6s) infinite;
}
@keyframes barGrow{from{transform:scaleY(0);}to{transform:scaleY(1);}}
@keyframes barBreathe{0%,100%{transform:scaleY(1);}50%{transform:scaleY(0.88);}}
.hero-dot{animation:dotPop .5s ease .6s both, dotPulse 2s ease-in-out 1.2s infinite;}
.hero-dot-ring{
  transform-box:fill-box;transform-origin:center;
  animation:ringPulse 2s ease-out 1.2s infinite;
}
@keyframes dotPop{from{transform:scale(0);}to{transform:scale(1);}}
@keyframes dotPulse{0%,100%{opacity:1;}50%{opacity:0.6;}}
@keyframes ringPulse{
  0%{transform:scale(1);opacity:0.8;}
  100%{transform:scale(2.4);opacity:0;}
}

/* DASHBOARD (đầu trang app.html — chỉ dùng số liệu thật) */
.dash-welcome-line{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:20px;
  font-size:14px;color:var(--muted);
}
.dash-welcome-line strong{color:var(--text);font-weight:600;}
.dash-welcome-line .dot{color:var(--border);}

/* TÌM KÊNH (hợp nhất ngách + duyệt) */
.browse-box{max-width:760px;}
.quick-filter-row{display:grid;grid-template-columns:repeat(2, 1fr);gap:12px;margin-bottom:16px;}
@media(max-width:600px){.quick-filter-row{grid-template-columns:1fr;}}
.quick-filter-tile{
  text-align:left;background:var(--bg-soft);border:1px solid var(--border);border-radius:12px;
  padding:14px 16px;cursor:pointer;transition:border-color .15s ease, background .15s ease;
  font-family:inherit;color:var(--text);
}
.quick-filter-tile:hover{border-color:var(--accent);}
.quick-filter-tile.active{background:var(--purple-bg);border-color:var(--accent);}
.quick-filter-icon{
  width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:var(--card);border:1px solid var(--border);color:var(--accent);font-size:15px;margin-bottom:10px;
}
.quick-filter-name{font-weight:600;font-size:14px;margin-bottom:3px;}
.quick-filter-desc{font-size:12.5px;color:var(--muted);line-height:1.4;}
.browse-toolbar{display:flex;gap:12px;margin-bottom:16px;}
.browse-toolbar input{
  flex:1;padding:14px 18px;border-radius:12px;border:1px solid var(--border);
  background:var(--card);color:var(--text);font-size:15px;outline:none;
}
.browse-toolbar input:focus{border-color:var(--accent);}
@media(max-width:600px){.browse-toolbar{flex-direction:column;}}
.browse-toolbar .btn-ghost.active{background:var(--purple-bg);border-color:var(--accent);color:var(--accent);}

/* DEMO */
.demo-box{max-width:640px;margin:0 auto;}
.demo-search{display:flex;gap:12px;margin-bottom:24px;}
.demo-search input{
  flex:1;padding:14px 18px;border-radius:12px;border:1px solid var(--border);
  background:var(--card);color:var(--text);font-size:15px;outline:none;
}
.demo-search input:focus{border-color:var(--accent);}
.demo-search .btn{padding:14px 24px;}
@media(max-width:600px){.demo-search{flex-direction:column;}}
.demo-result{min-height:20px;}
.demo-hint{color:var(--muted);font-size:13.5px;text-align:center;}
.demo-error{
  color:var(--danger-text);background:var(--danger-bg);border:1px solid var(--danger-border);
  padding:14px 18px;border-radius:12px;font-size:14px;text-align:center;
}
.channel-card{
  display:flex;gap:20px;align-items:flex-start;background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-card);
  transition:box-shadow .2s var(--ease);
}
.channel-card:hover{box-shadow:var(--shadow-hover);}
.channel-card img{width:72px;height:72px;border-radius:50%;flex-shrink:0;}
.channel-info h3{font-size:19px;font-weight:600;margin-bottom:4px;}
.channel-info .handle{color:var(--muted);font-size:13.5px;margin-bottom:12px;}
.channel-stats{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:12px;}
.channel-stats div{font-size:13px;color:var(--muted);}
.channel-stats strong{display:block;font-size:18px;color:var(--text);font-weight:600;}
.channel-desc{color:var(--muted);font-size:13.5px;line-height:1.5;}

/* NICHE SCAN */
.niche-suggestions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:18px;}
.niche-suggest-label{font-size:12.5px;color:var(--muted);font-weight:600;}
.niche-chip{
  font-size:12.5px;font-weight:500;padding:6px 13px;border-radius:100px;border:1px solid var(--border);
  background:var(--bg-soft);color:var(--text);cursor:pointer;transition:all .15s ease;
}
.niche-chip:hover{border-color:var(--accent);background:var(--card);}
.niche-chip.scanned{border-color:var(--purple-border);color:var(--purple-text);background:var(--purple-bg);}
.niche-chip-locked{
  cursor:default;user-select:none;color:transparent;text-shadow:0 0 8px rgba(120,120,140,0.7);
  position:relative;padding-left:28px;
}
.niche-chip-locked .ti{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted);text-shadow:none;}
.niche-chip-upgrade{
  border-color:transparent;background:var(--accent-grad);color:#fff;font-weight:600;cursor:pointer;
}
.niche-chip-upgrade:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(139,92,246,0.3);}
.niche-filters{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;align-items:center;}
.niche-sort{
  margin-left:auto;padding:8px 14px;border-radius:100px;border:1px solid var(--border);
  background:var(--bg-soft);color:var(--text);font-size:13px;font-weight:600;cursor:pointer;
}
.filter-count-badge{
  display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;
  padding:0 4px;margin-left:5px;border-radius:100px;background:var(--accent);color:#fff;
  font-size:10px;font-weight:600;
}
.search-lock-notice{
  display:flex;align-items:center;gap:8px;background:var(--purple-bg);border:1px solid var(--purple-border);
  border-radius:12px;padding:12px 16px;margin-bottom:14px;font-size:13px;color:var(--purple-text);
}
.search-lock-notice a{color:var(--accent);font-weight:600;text-decoration:underline;}
.active-filters-bar{display:flex;gap:6px;flex-wrap:wrap;margin:-8px 0 16px;}
.active-filters-bar:empty{display:none;}
.filter-chip{
  display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:100px;
  background:var(--purple-bg);color:var(--accent);border:1px solid var(--purple-border);
  font-size:12px;font-weight:600;cursor:pointer;
}
.filter-chip .ti{font-size:12px;}
.filter-chip-clear{background:none;border:1px solid var(--border);color:var(--muted);}
.filter-chip-clear:hover{border-color:var(--danger-text);color:var(--danger-text);}
.niche-advanced{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;}
.niche-advanced select, .niche-advanced input{
  padding:8px 12px;border-radius:10px;border:1px solid var(--border);
  background:var(--bg-soft);color:var(--text);font-size:13px;outline:none;
}
.niche-advanced input{width:130px;}
.niche-advanced input:focus, .niche-advanced select:focus{border-color:var(--accent);}
.filter-panel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;align-items:end;}
.filter-group{display:flex;flex-direction:column;gap:5px;}
.filter-group label{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.4px;}
.filter-group select{width:100%;}
.filter-range{display:flex;align-items:center;gap:6px;}
.filter-range input{width:0;flex:1;}
.filter-range span{color:var(--muted);font-size:12px;flex-shrink:0;}
.filter-panel-grid .btn{grid-column:1/-1;justify-self:start;}
.howto-video-slot{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:var(--bg-soft);border:1px dashed var(--border);border-radius:var(--radius);
  padding:48px 24px;margin-bottom:28px;text-align:center;
}
.howto-video-slot .ti{font-size:32px;color:var(--muted);}
.howto-video-slot p{color:var(--muted);font-size:13.5px;max-width:420px;}
.niche-result{display:flex;flex-direction:column;gap:10px;margin-top:8px;}
.niche-card{
  display:flex;gap:16px;align-items:center;background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius);padding:18px 22px;
  flex-wrap:wrap;box-shadow:var(--shadow-card);
}
.niche-card img{width:52px;height:52px;border-radius:50%;flex-shrink:0;}
.niche-main{flex:1;min-width:200px;}
.niche-main h4{font-size:15.5px;font-weight:600;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.niche-meta{color:var(--muted);font-size:12.5px;display:flex;gap:14px;flex-wrap:wrap;}
.niche-side{display:flex;align-items:center;gap:12px;flex-shrink:0;flex-wrap:wrap;}
.niche-badges{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap;}
.niche-badge{
  font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:100px;white-space:nowrap;
}
.niche-badge.hot{background:var(--warn-bg);color:var(--warn-text);border:1px solid var(--warn-border);}
.niche-badge.unstable{background:var(--purple-bg);color:var(--purple-text);border:1px solid var(--purple-border);}
.niche-progress{color:var(--muted);font-size:13.5px;text-align:center;padding:20px 0;}

/* NICHE ROW (bảng kiểu dashboard) */
.niche-row{
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:14px 18px;box-shadow:var(--shadow-card);transition:border-color .15s ease, box-shadow .15s ease;
}
.niche-row:hover{border-color:var(--accent);box-shadow:0 6px 20px rgba(20,20,40,0.08);}
.niche-row-top{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;}
.niche-row-top img{width:38px;height:38px;border-radius:50%;flex-shrink:0;}
.niche-row-identity{flex:1;min-width:180px;}
.niche-row-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.niche-row-name .name{font-weight:600;font-size:15.5px;}
.badge-age{
  font-size:11px;font-weight:600;padding:3px 10px;border-radius:100px;
  background:rgba(14,156,120,0.1);color:var(--accent2);border:1px solid rgba(14,156,120,0.25);
}
.badge-hottest{
  font-size:10.5px;font-weight:600;letter-spacing:0.3px;padding:4px 10px;border-radius:100px;
  background:var(--warn-bg);color:var(--warn-text);border:1px solid var(--warn-border);
}
.niche-row-handle{color:var(--muted);font-size:12.5px;margin-top:3px;}

/* Doanh thu ước tính — cố tình tách riêng, nổi bật hơn hẳn các thông số khác để tạo FOMO, nhưng không
   choán quá nhiều chỗ (đã có phản hồi to quá ở bản đầu, nay chỉnh lại cho tinh tế/sang hơn thay vì to hơn) */
.niche-revenue-spotlight{
  position:relative;display:flex;align-items:center;gap:12px;margin-top:10px;padding:11px 16px;border-radius:12px;
  background:linear-gradient(120deg, rgba(34,197,94,0.20) 0%, rgba(163,230,53,0.10) 55%, rgba(34,197,94,0.04) 100%);
  border:1px solid rgba(74,222,128,0.5);
  box-shadow:0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px -10px rgba(34,197,94,0.5);
  overflow:hidden;
}
.niche-revenue-spotlight::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,#22C55E,#A3E635);
}
.niche-revenue-icon{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#22C55E,#A3E635);color:#06140d;font-size:14px;
  box-shadow:0 0 0 3px rgba(74,222,128,0.18);
  animation:pulseGlow 2.4s ease-in-out infinite;
}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 3px rgba(74,222,128,0.18);}50%{box-shadow:0 0 0 8px rgba(74,222,128,0);}}
.niche-revenue-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.niche-revenue-label{
  display:flex;align-items:center;gap:4px;font-size:10px;font-weight:700;letter-spacing:0.6px;
  color:#4ADE80;text-transform:uppercase;opacity:0.95;
}
.niche-revenue-value{
  font-size:20px;font-weight:800;line-height:1.15;letter-spacing:-0.3px;
  background:linear-gradient(90deg,#22C55E,#A3E635);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:#4ADE80;
}
.niche-revenue-value .niche-revenue-per{
  font-size:12px;font-weight:600;letter-spacing:0;margin-left:2px;color:var(--muted);-webkit-text-fill-color:var(--muted);
}
.niche-revenue-dash{margin:0 2px;opacity:0.6;font-weight:600;}
@media(max-width:520px){
  .niche-revenue-value{font-size:17px;}
  .niche-revenue-icon{width:28px;height:28px;font-size:12px;}
}

/* Lưới thông số kênh (subscribers, RPM, tuổi kênh, tổng video, ngôn ngữ) */
.niche-stat-grid{
  display:grid;grid-template-columns:repeat(5, 1fr);gap:8px;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--border);
}
@media(max-width:700px){.niche-stat-grid{grid-template-columns:repeat(auto-fit, minmax(90px, 1fr));}}
.niche-stat-label{
  display:block;font-size:9.5px;font-weight:600;letter-spacing:0.4px;color:var(--muted);
  text-transform:uppercase;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.niche-stat-value{display:block;font-size:13px;font-weight:600;color:var(--text);line-height:1.3;}
.niche-stat-value.revenue{color:var(--accent2);}

/* Video nổi bật của kênh (thumbnail + thời lượng + view) */
.niche-video-row{display:grid;grid-template-columns:repeat(3, 1fr);gap:10px;margin-top:10px;}
@media(max-width:640px){.niche-video-row{grid-template-columns:1fr 1fr;}}
.niche-video-empty-note{
  grid-column:1 / -1;
  display:flex;align-items:center;gap:8px;padding:14px 16px;border-radius:12px;
  background:var(--bg-soft);border:1px dashed var(--border);color:var(--muted);font-size:13px;width:100%;
}
.niche-video-card{display:block;border-radius:10px;transition:opacity .15s ease;}
.niche-video-card:hover{opacity:0.85;}
.niche-video-thumb-wrap{position:relative;border-radius:10px;overflow:hidden;background:var(--bg-soft);aspect-ratio:16/9;}
.niche-video-thumb-wrap img{width:100%;height:100%;object-fit:cover;display:block;}
.niche-video-duration{
  position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,0.8);color:#fff;
  font-size:10.5px;font-weight:600;padding:2px 6px;border-radius:4px;
}
.niche-video-title{
  font-size:12px;font-weight:600;color:var(--text);margin-top:5px;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.niche-video-meta{font-size:11px;color:var(--muted);margin-top:2px;}

.niche-row-stats{display:flex;gap:26px;flex-wrap:wrap;margin-left:auto;}
.stat-col{text-align:right;}
.stat-label{
  display:block;font-size:10px;font-weight:600;letter-spacing:0.5px;color:var(--muted);
  text-transform:uppercase;margin-bottom:3px;
}
.stat-value{display:block;font-size:15px;font-weight:600;color:var(--text);}
.stat-value.score-high{color:var(--accent2);}
.stat-value.score-mid{color:var(--warn-text);}
.stat-value.score-low{color:var(--muted);}
.stat-value.revenue{color:var(--accent2);}
.revenue-disclaimer{font-size:12px;color:var(--muted);font-style:italic;margin-top:4px;}
.whats-new-panel{
  background:var(--purple-bg);border:1px solid var(--accent);border-radius:14px;
  padding:16px 20px;margin-bottom:20px;
}
.whats-new-title{font-size:13px;font-weight:600;color:var(--accent);margin-bottom:10px;}
.whats-new-item{display:flex;align-items:center;gap:10px;padding:6px 0;flex-wrap:wrap;}
.whats-new-item .name{font-size:13.5px;font-weight:600;flex:1;min-width:120px;}
.scan-meta-line{font-size:12.5px;color:var(--muted);margin-top:10px;}
.scan-counter{color:var(--accent2);font-weight:600;}
.meta-dot{margin:0 6px;opacity:0.5;}
.niche-advanced{display:none;}
.niche-advanced.open{display:flex;}
.niche-advanced.open.filter-panel-grid{display:grid;}

/* "Quét thêm" (external scan) — kết quả sống ngoài dữ liệu crawler, chưa qua lọc đầy đủ */
.external-scan-box{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px;}
.ext-scan-header{font-size:13px;font-weight:600;color:var(--muted);margin:16px 0 10px;display:flex;align-items:center;gap:6px;}
.ext-scan-badge{
  display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);
  background:var(--bg-soft);border:1px solid var(--border);border-radius:10px;padding:8px 12px;margin-top:10px;
}
.ext-scan-badge .ti{color:var(--accent2);flex-shrink:0;}

/* PAYWALL BANNER (giới hạn xem trước cho tài khoản free) */
.niche-locked-stack{
  position:relative;filter:blur(7px);pointer-events:none;user-select:none;opacity:0.75;margin-top:16px;
}
.paywall-banner{
  display:flex;align-items:center;gap:16px;background:var(--purple-bg);
  border:1px solid var(--accent);border-radius:14px;padding:18px 22px;margin-bottom:16px;
}
.paywall-icon{font-size:22px;flex-shrink:0;}
.paywall-text{flex:1;}
.paywall-text strong{font-size:14px;}
.paywall-text p{font-size:13px;color:var(--muted);margin-top:4px;line-height:1.5;}
.paywall-cta{flex-shrink:0;white-space:nowrap;}
@media(max-width:600px){.paywall-banner{flex-direction:column;align-items:flex-start;}}

.niche-tag-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;}
.niche-tag-label{
  font-size:10px;font-weight:600;letter-spacing:0.5px;color:var(--muted);text-transform:uppercase;
}
.niche-tag{
  font-size:12px;font-weight:600;padding:4px 12px;border-radius:100px;
  background:var(--bg-soft);border:1px solid var(--border);color:var(--text);
}
.niche-row-bottom{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--border);
}
.spike-desc{font-size:12.5px;color:var(--muted);flex:1;min-width:140px;}
.niche-row-actions{display:flex;gap:8px;flex-shrink:0;}
.niche-row-actions button.row-btn{font-family:inherit;}

/* Dòng nhấn mạnh "vừa mới quét" + "đột biến" ngay dưới tên kênh — làm nổi bật tín hiệu thời
   gian thực & cơ hội, thay vì chôn trong lưới thông số như trước. */
.niche-highlight-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px;}
.niche-freshness{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--accent2);}
.pulse-dot{
  width:7px;height:7px;border-radius:50%;background:var(--accent2);flex-shrink:0;
  animation:pulseDot 1.8s ease-in-out infinite;
}
@keyframes pulseDot{
  0%,100%{box-shadow:0 0 0 0 rgba(139,92,246,0.5);}
  50%{box-shadow:0 0 0 5px rgba(139,92,246,0);}
}
.niche-spike-highlight{
  display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;
  padding:4px 12px;border-radius:100px;background:var(--spike-bg);color:var(--spike-text);
}
.row-btn{
  font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:8px;border:1px solid var(--border);
  color:var(--text);background:var(--bg-soft);cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:4px;transition:border-color .15s ease;
}
.row-btn:hover{border-color:var(--accent);}
.row-btn.save{background:var(--accent-grad);color:#fff;border-color:transparent;font-weight:600;}
.cache-notice{
  font-size:13px;color:var(--accent2);background:rgba(139,92,246,0.08);
  border:1px solid rgba(139,92,246,0.25);border-radius:12px;padding:10px 16px;margin-bottom:4px;
}
.niche-save-btn, .channel-save-btn, .saved-remove{padding:8px 16px;font-size:13px;}

.opportunity-score-wrap{display:flex;flex-direction:column;align-items:center;gap:3px;flex-shrink:0;}
.opportunity-score{
  width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:16px;flex-shrink:0;
}
.opportunity-score.score-high{background:rgba(139,92,246,0.15);color:var(--accent2);border:1px solid rgba(139,92,246,0.35);}
.opportunity-score.score-mid{background:rgba(217,119,6,0.1);color:#b45309;border:1px solid rgba(217,119,6,0.3);}
.opportunity-score.score-low{background:rgba(148,148,158,0.1);color:var(--muted);border:1px solid var(--border);}
.opportunity-grade{font-size:10.5px;font-weight:600;letter-spacing:0.3px;}
.opportunity-grade.score-high{color:var(--accent2);}
.opportunity-grade.score-mid{color:#b45309;}
.opportunity-grade.score-low{color:var(--muted);}

/* SAVED CHANNELS */
.saved-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;flex-wrap:wrap;}
.group-tabs{display:flex;gap:8px;flex-wrap:wrap;}
.group-tab{
  padding:8px 16px;border-radius:100px;border:1px solid var(--border);background:var(--card);
  color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;transition:all .15s ease;
}
.group-tab:hover{border-color:var(--accent);color:var(--text);}
.group-tab.active{background:var(--accent-grad);color:#fff;border-color:transparent;}
.saved-list{display:flex;flex-direction:column;gap:14px;}
.saved-card{
  display:flex;gap:16px;align-items:center;background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius);padding:16px 22px;flex-wrap:wrap;
  box-shadow:var(--shadow-card);transition:box-shadow .2s var(--ease);
}
.saved-card:hover{box-shadow:var(--shadow-hover);}
.saved-card img{width:48px;height:48px;border-radius:50%;flex-shrink:0;}
.saved-main{flex:1;min-width:200px;}
.saved-main h4{font-size:15px;font-weight:600;margin-bottom:4px;}
.saved-actions{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap;}
.saved-note{
  margin-top:8px;font-size:13px;color:var(--text);background:var(--bg-soft);
  border-left:3px solid var(--accent);padding:8px 12px;border-radius:6px;
}
.growth-up{color:var(--accent2);font-weight:600;}
.growth-down{color:var(--danger-text);font-weight:600;}

/* COMPARE MY CHANNEL */
.compare-box{margin-bottom:20px;}
.compare-box h3{display:flex;align-items:center;gap:8px;font-size:16px;margin-bottom:6px;}
.compare-desc{font-size:13.5px;color:var(--muted);margin-bottom:16px;}
.compare-form{display:flex;gap:10px;flex-wrap:wrap;}
.compare-form input{
  flex:1;min-width:220px;padding:12px 16px;border-radius:10px;border:1px solid var(--border);
  background:var(--card);color:var(--text);font-size:14px;outline:none;
}
.compare-form input:focus{border-color:var(--accent);}
.compare-form select{
  padding:12px 14px;border-radius:10px;border:1px solid var(--border);
  background:var(--card);color:var(--text);font-size:14px;
}
#compareResult{margin-top:16px;}
.compare-result-card{
  background:var(--bg-soft);border:1px solid var(--border);border-radius:14px;padding:20px;
}
.compare-result-top{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.compare-result-top img{width:44px;height:44px;border-radius:50%;flex-shrink:0;}
.compare-result-top .name{font-weight:600;font-size:15px;}
.compare-result-top .handle{color:var(--muted);font-size:12.5px;}
.compare-score-row{display:flex;align-items:center;gap:16px;margin-bottom:16px;}
.compare-percentile{
  font-size:15px;font-weight:600;padding:10px 16px;border-radius:12px;
  background:var(--purple-bg);color:var(--purple-text);flex:1;
}
.compare-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px;}
.compare-stat{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 12px;}
.compare-stat-label{display:block;font-size:10px;font-weight:600;color:var(--muted);text-transform:uppercase;margin-bottom:3px;}
.compare-stat-value{display:block;font-size:14px;font-weight:600;color:var(--text);}

.group-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px;}
.group-spike-result{margin-bottom:20px;}
.spike-highlight{
  display:flex;gap:18px;align-items:center;background:var(--card);
  border:1px solid var(--accent);border-radius:var(--radius);padding:22px 26px;
  box-shadow:0 12px 40px rgba(139,92,246,0.12);
}
.spike-highlight img{width:56px;height:56px;border-radius:50%;flex-shrink:0;}
.spike-highlight-label{font-size:12px;font-weight:600;color:var(--accent2);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px;}
.spike-highlight h4{font-size:16px;font-weight:600;margin-bottom:8px;}

.saved-toolbar-actions{display:flex;gap:8px;flex-wrap:wrap;}

/* PROFILE & QUYỀN LỢI */
.profile-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-card);padding:24px 26px;margin-bottom:18px;
}
.profile-card h3{font-size:16px;font-weight:600;margin-bottom:6px;display:flex;align-items:center;gap:8px;}
.profile-hint{color:var(--muted);font-size:13.5px;line-height:1.6;margin-bottom:16px;}
.profile-row{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--border);font-size:14px;
}
.profile-row:last-child{border-bottom:none;}
.profile-row span{color:var(--muted);}
.plan-badge{padding:3px 12px;border-radius:100px;font-size:12.5px;font-weight:600;}
.plan-badge.plan-pro{background:var(--accent-grad);color:#fff;}
.plan-badge.plan-free{background:var(--bg-soft);color:var(--muted);border:1px solid var(--border);}
.profile-password-form{display:flex;gap:10px;flex-wrap:wrap;}
.profile-password-form input{
  flex:1;min-width:220px;padding:12px 16px;border-radius:10px;border:1px solid var(--border);
  background:var(--card);color:var(--text);font-size:14px;outline:none;
}
.profile-password-form input:focus{border-color:var(--accent);}

/* SO SÁNH NGÁCH */
.demo-box.wide-box{max-width:920px;}
.compare-picker{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
.compare-select{
  flex:1;min-width:180px;padding:12px 14px;border-radius:10px;border:1px solid var(--border);
  background:var(--card);color:var(--text);font-size:14px;outline:none;
}
.compare-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:24px;}
.compare-col{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-card);padding:20px 22px;
}
.compare-col h3{font-size:15px;font-weight:600;margin-bottom:14px;text-transform:capitalize;}
.compare-stat{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:8px 0;border-bottom:1px solid var(--border);font-size:13.5px;
}
.compare-stat:last-child{border-bottom:none;}
.compare-stat span{color:var(--muted);display:flex;align-items:center;gap:5px;}

/* TEASER — dùng nguyên layout .niche-row thật của app, chỉ mờ avatar + tên (xem supabase-client.js) */
.teaser-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));align-items:start;gap:16px;margin-bottom:32px;max-width:1160px;margin-left:auto;margin-right:auto;}
@media(max-width:760px){.teaser-grid{grid-template-columns:1fr;}}
.teaser-row{position:relative;}
.teaser-blur-wrap{position:relative;width:44px;height:44px;flex-shrink:0;}
.teaser-blur-wrap img{width:44px;height:44px;border-radius:50%;}
.teaser-blurred{filter:blur(6px);user-select:none;}
.teaser-video-card{cursor:pointer;}
.teaser-lock{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:15px;cursor:pointer;color:var(--text);
}
.teaser-reveal-btn{
  width:100%;margin-top:14px;padding:12px;border-radius:10px;border:1px dashed var(--accent);
  background:var(--purple-bg);color:var(--accent);font-size:13px;font-weight:600;cursor:pointer;
}
.teaser-reveal-btn:hover{background:var(--accent-grad);color:#fff;border-style:solid;}
a.teaser-reveal-btn{display:flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;box-sizing:border-box;}
.teaser-cta{text-align:center;}

/* INSIGHT */
.insight{background:var(--bg-soft);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.eyebrow{
  font-size:12.5px;font-weight:600;letter-spacing:1.6px;color:var(--accent2);
  text-transform:uppercase;margin-bottom:16px;text-align:center;
}
.insight h2{
  font-size:36px;font-weight:600;text-align:center;max-width:680px;margin:0 auto 20px;
  line-height:1.28;letter-spacing:-0.5px;
}
.insight p{
  font-size:16.5px;color:var(--muted);text-align:center;max-width:640px;margin:0 auto;line-height:1.7;
}

/* CALLOUT BOX (khung nhấn mạnh) */
.callout-box{
  display:flex;align-items:flex-start;gap:12px;margin:28px auto 0;max-width:600px;
  background:var(--purple-bg);border-left:3px solid var(--accent);border-radius:12px;
  padding:18px 22px;text-align:left;
}
.callout-box i{color:var(--accent);font-size:19px;flex-shrink:0;margin-top:2px;}
.callout-box p{font-size:15.5px;font-weight:600;color:var(--text);line-height:1.6;margin:0;max-width:none;text-align:left;}
.callout-box-center{margin-left:auto;margin-right:auto;}
.callout-box-dark{border-left-color:var(--accent2);}

/* FEATURES */
.section-head{text-align:center;max-width:640px;margin:0 auto 64px;}
.section-head h2{font-size:36px;font-weight:600;margin-bottom:16px;letter-spacing:-0.5px;line-height:1.25;}
.section-head p{color:var(--muted);font-size:16.5px;line-height:1.6;}

/* ĐÁNH GIÁ — khung rỗng, chờ có khách hàng thật để đổ nội dung thật vào, không bịa lời khách hàng giả */
.testimonial-empty{
  max-width:480px;margin:0 auto;text-align:center;padding:40px 32px;
  background:var(--card);border:1px dashed var(--border);border-radius:var(--radius);
}
.testimonial-empty i{font-size:28px;color:var(--accent);margin-bottom:14px;display:block;}
.testimonial-empty p{color:var(--muted);font-size:15px;line-height:1.6;}
.features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
@media(max-width:768px){.features-grid{grid-template-columns:1fr;}}
.feature-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-card);
  padding:32px;transition:border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.feature-card:hover{border-color:var(--accent);transform:translateY(-5px);box-shadow:var(--shadow-hover);}
.feature-icon-tile{
  width:52px;height:52px;border-radius:14px;background:var(--purple-bg);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:20px;
}
.feature-card h3{font-size:19px;font-weight:600;margin-bottom:10px;letter-spacing:-0.2px;}
.feature-card p{color:var(--muted);font-size:14.5px;line-height:1.65;}

/* STATS */
.stats{background:var(--bg-soft);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:44px 0;}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center;}
@media(max-width:768px){.stats-grid{grid-template-columns:1fr;gap:28px;}}
.stat-num{
  font-size:40px;font-weight:600;letter-spacing:-1px;background:var(--accent-grad);-webkit-background-clip:text;
  background-clip:text;color:transparent;margin-bottom:6px;
}
.stat-label{color:var(--muted);font-size:13.5px;line-height:1.5;}
.stats-freshness{
  text-align:center;margin-top:24px;font-size:13px;font-weight:600;color:var(--accent2);
}

/* HOW IT WORKS */
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.steps-grid-2{grid-template-columns:repeat(2,1fr);max-width:760px;}
@media(max-width:768px){.steps-grid{grid-template-columns:1fr;}}
.step-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:32px 28px;position:relative;box-shadow:var(--shadow-card);
}
.step-num{
  position:absolute;top:-14px;left:28px;width:30px;height:30px;border-radius:50%;background:var(--accent-grad);
  color:#fff;font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;
}
.step-icon{font-size:26px;color:var(--accent);margin:10px 0 18px;display:block;}
.step-card h3{font-size:17px;font-weight:600;margin-bottom:10px;letter-spacing:-0.2px;}
.step-card p{color:var(--muted);font-size:14px;line-height:1.65;}

/* PRICING */
.pricing-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:760px;margin:0 auto;}
@media(max-width:768px){.pricing-grid{grid-template-columns:1fr;}}
.price-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-card);
  padding:36px 32px;position:relative;transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.price-card:hover{transform:translateY(-4px);}
.price-card.featured{
  background:#0f0f18;border-color:transparent;color:#f1f1f4;overflow:hidden;
  box-shadow:0 0 0 1px rgba(139,92,246,0.4), 0 24px 60px rgba(139,92,246,0.22);
}
.price-card.featured:hover{box-shadow:0 0 0 1px rgba(139,92,246,0.5), 0 28px 70px rgba(139,92,246,0.3);}
.price-card.featured .price-label{color:#a8a8ba;}
.price-card.featured .price-desc{color:#c4c4d2;}
.price-card.featured .price-amount small{color:#a8a8ba;}
.price-card.featured .price-note{color:#C9B8FD;}
.price-decor{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;}
.price-card.featured > *:not(.price-decor){position:relative;z-index:1;}
.price-label{font-size:13px;color:var(--muted);font-weight:600;margin-bottom:16px;text-transform:uppercase;letter-spacing:0.5px;}
.price-amount{font-size:38px;font-weight:600;margin-bottom:4px;letter-spacing:-0.5px;}
.price-amount small{font-size:16px;font-weight:500;color:var(--muted);}
.price-desc{color:var(--muted);font-size:14px;margin-bottom:24px;min-height:44px;line-height:1.6;}
.price-card .btn{width:100%;justify-content:center;margin-bottom:16px;}
.price-note{font-size:12.5px;color:var(--accent2);text-align:center;font-weight:500;margin-top:20px;}
.price-features{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px;}
.price-features li{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text);line-height:1.4;}
.price-features li i{color:var(--accent2);font-size:15px;flex-shrink:0;}
.price-feature-tag{
  margin-left:auto;font-size:11px;font-weight:600;color:var(--accent);background:var(--purple-bg);
  padding:2px 9px;border-radius:100px;flex-shrink:0;white-space:nowrap;
}
.price-card.featured .price-features li{color:#e4e4ec;}
.price-card.featured .price-features li i{color:#C9B8FD;}
.price-card.featured .price-feature-tag{background:rgba(255,255,255,0.12);color:#c9c9ff;}

/* FAQ */
.faq-list{max-width:720px;margin:0 auto;}
.faq-item{border-bottom:1px solid var(--border);}
.faq-q{
  width:100%;text-align:left;background:none;border:none;color:var(--text);
  padding:22px 4px;font-size:16px;font-weight:600;display:flex;justify-content:space-between;
  align-items:center;cursor:pointer;transition:color .15s ease;
}
.faq-q:hover{color:var(--accent);}
.faq-q .plus{transition:transform .25s var(--ease);color:var(--accent);font-size:20px;flex-shrink:0;margin-left:16px;}
.faq-item.open .faq-q .plus{transform:rotate(45deg);transition:transform .4s cubic-bezier(.22,1,.36,1);}
.faq-q .plus{transition:transform .3s ease;}
.faq-a{max-height:0;opacity:0;overflow:hidden;transition:max-height .45s cubic-bezier(.22,1,.36,1), opacity .3s ease;}
.faq-item.open .faq-a{opacity:1;}
.faq-a p{color:var(--muted);font-size:14.5px;line-height:1.65;padding:0 4px 22px;}
@media(prefers-reduced-motion:reduce){.faq-a,.faq-q .plus{transition:none !important;}}

/* FINAL CTA */
.final-cta{text-align:center;}
.final-cta h2{font-size:38px;font-weight:600;margin-bottom:16px;letter-spacing:-0.5px;}
.final-cta p{color:var(--muted);font-size:16.5px;margin-bottom:36px;}
.finalcta-note{margin-top:18px;font-size:13px;color:var(--muted);}

footer{border-top:1px solid var(--border);padding:32px 0;text-align:center;color:var(--muted);font-size:13px;}
.footer-links{display:flex;justify-content:center;gap:20px;margin-top:12px;}
.footer-links a{color:var(--muted);font-size:12.5px;transition:color .15s ease;}
.footer-links a:hover{color:var(--accent);}

@media(max-width:600px){
  h1{font-size:38px;}
  .insight h2, .section-head h2, .final-cta h2{font-size:27px;}
  section{padding:64px 0;}
}

/* NICHE REPORT (in trực tiếp qua window.print(), không cần thư viện PDF) */
#reportPrintArea{display:none;}
.report-page{max-width:760px;margin:0 auto;padding:40px;font-family:'Inter',sans-serif;color:#13131c;}
.report-page h1{font-size:24px;margin-bottom:4px;}
.report-meta{color:#6b6b7c;font-size:13px;margin-bottom:24px;}
.report-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:28px;}
.report-summary-item{border:1px solid #e8e8f0;border-radius:10px;padding:12px;}
.report-summary-label{display:block;font-size:10px;font-weight:600;text-transform:uppercase;color:#6b6b7c;margin-bottom:4px;}
.report-summary-value{display:block;font-size:18px;font-weight:600;}
.report-table{width:100%;border-collapse:collapse;font-size:12.5px;}
.report-table th{text-align:left;padding:8px;border-bottom:2px solid #13131c;font-size:11px;text-transform:uppercase;}
.report-table td{padding:8px;border-bottom:1px solid #e8e8f0;}
.report-footer{margin-top:24px;font-size:11px;color:#6b6b7c;font-style:italic;}
@media print{
  body > *:not(#reportPrintArea){display:none !important;}
  #reportPrintArea{display:block !important;}
  @page{margin:16mm;}
}