/* ============================================================
   P.Thai Capital — Mystery Quant Theme
   Dark mode · Neon accents · Lofi/Chill
   ============================================================ */

:root {
  /* Palette — tuned 2026-04-21 for readability (lifted bg + brighter dim text) */
  --bg:            #0c1118;
  --bg-2:          #111824;
  --bg-3:          #16202d;
  --surface:       #161e2a;
  --surface-2:     #1c2535;
  --border:        #283444;
  --border-2:      #36465e;

  --text:          #f0f4fa;
  --text-dim:      #b3bdcc;
  --text-mute:     #8694a8;

  --neon:          #00ff9f;   /* primary neon green */
  --neon-2:        #00d9ff;   /* cyan */
  --neon-3:        #b388ff;   /* violet accent */
  --gold:          #e2bf52;   /* brand gold — brightened slightly for readability on dark */
  --gold-2:        #f4d97a;
  --navy:          #0d1b3a;
  --red:           #ff7a8e;   /* brightened for contrast */
  --amber:         #ffc566;

  --gradient:      linear-gradient(135deg, var(--neon) 0%, var(--neon-2) 100%);
  --gradient-2:    linear-gradient(135deg, var(--neon-2) 0%, var(--neon-3) 100%);
  --gradient-gold: linear-gradient(135deg, var(--gold-2) 0%, var(--gold) 100%);

  --radius:        14px;
  --radius-sm:     8px;
  --shadow:        0 20px 60px rgba(0, 255, 159, 0.06);
  --shadow-hover:  0 30px 80px rgba(0, 217, 255, 0.10);

  --font-sans:     'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', Menlo, Consolas, monospace;

  --max-w:         1240px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-image:
    radial-gradient(ellipse at 20% -10%, rgba(0, 255, 159, 0.08), transparent 50%),
    radial-gradient(ellipse at 80% 10%, rgba(0, 217, 255, 0.07), transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(179, 136, 255, 0.05), transparent 60%);
}

/* Matrix background canvas */
#matrix-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0.35;
  pointer-events: none;
}

/* ============================================================
   Mobile utilities — show/hide sections per viewport
   .m-only : CHỈ hiển thị trên mobile (≤720px)
   .d-only : CHỈ hiển thị trên desktop (>720px)
   Breakpoint 720px chọn vì iPad portrait và Chromebook nhỏ = 768-820px
   → giữ trải nghiệm desktop cho tablet, mobile chỉ cho phone thật.

   Show-state KHÔNG set display explicitly — để CSS gốc của element áp dụng
   (btn vẫn inline-flex, div vẫn block, span vẫn inline). Chỉ hide-state dùng
   display:none !important để override mọi display khác.
   ============================================================ */
.m-only { display: none !important; }
@media (max-width: 720px) {
  .m-only { display: revert !important; }
  /* revert hoạt động tốt cho phần lớn element (div/p/section → block, span/a → inline),
     nhưng với button-like có display: inline-flex từ .btn, revert sẽ về UA default.
     Thêm rule cụ thể cho .btn để giữ nguyên inline-flex: */
  .btn.m-only, a.btn.m-only, button.m-only { display: inline-flex !important; }
  .d-only { display: none !important; }
}

/* Mobile performance: disable heavy effects */
@media (max-width: 960px) {
  #matrix-bg { display: none !important; }
  body::before { display: none !important; }
  .ticker__track {
    animation: none !important;
    flex-wrap: wrap !important;
    width: auto !important;
  }
  /* Marquee tắt trên mobile → ẩn bản clone để không lặp 2 lần (4 dòng → 2 dòng) */
  .ticker__track .tk-clone { display: none !important; }
  * {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .hero__logo { animation: none !important; }
  .nav {
    background: rgba(7, 9, 13, 0.95) !important;
  }
  .dash-top {
    background: rgba(11, 15, 22, 0.95) !important;
  }
  /* Body bg gradient nặng khi scroll trên mobile -> đơn giản hoá */
  body {
    background-image: none !important;
    background: var(--bg) !important;
  }
  /* iOS Safari momentum scroll + cho phép scroll dọc 1 ngón trên mọi vị trí */
  html, body {
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior-y: auto;
    /* CHẶN tràn ngang — fix bug "bố cục bị ẩn qua bên phải, không bấm vào được".
       Element nào có width quá viewport sẽ bị clip về 100vw thay vì tạo scrollbar
       ngang vô hình. */
    overflow-x: hidden !important;
    max-width: 100vw;
    width: 100%;
  }
  /* Ép mọi section / container con không vượt viewport ngang.
     LOẠI TRỪ position:fixed elements (FAB, to-top, modal) — chúng cần
     dùng right/left/transform tự do, không bị max-width clip. */
  body > *:not(.fab):not(.to-top):not(.modal):not([data-fixed]),
  main > section,
  .container,
  .nav__inner,
  .hero,
  .footer,
  .footer__inner {
    max-width: 100vw;
    box-sizing: border-box;
  }
  /* Override mạnh cho FAB + back-to-top: position fixed chuẩn, không bị
     containing block ancestor làm shift hoặc clip. */
  .fab {
    position: fixed !important;
    right: 16px !important;
    left: auto !important;
    bottom: max(20px, env(safe-area-inset-bottom, 20px)) !important;
    z-index: 100 !important;
    max-width: none !important;
    width: auto !important;
  }
  .to-top {
    position: fixed !important;
    left: 16px !important;
    right: auto !important;
    bottom: max(20px, env(safe-area-inset-bottom, 20px)) !important;
    z-index: 99 !important;
    max-width: none !important;
    width: 44px !important;
  }
  /* FAB toggle button không bị scale hay box-shadow vượt clip */
  .fab__toggle {
    transform: none !important;
    animation: none !important;
  }
  /* Image, video, embed không tràn parent */
  img, video, iframe, svg, canvas, picture, object {
    max-width: 100%;
    height: auto;
  }
  /* Element thường tràn: pricing grid, services grid, testimonial, table */
  .grid, .pricing-grid, .services-grid, .pm-table,
  .nav__auth-cluster, .testimonials {
    max-width: 100%;
  }
  /* Cho phép pan-y xuyên qua canvas/iframe/svg để scroll trang bình thường */
  canvas, iframe, svg {
    touch-action: pan-y;
  }
  /* Tap highlight luxury */
  * { -webkit-tap-highlight-color: rgba(212, 175, 55, 0.1); }
  /* Disable smooth scroll trên mobile (stutter khi page dài + nhiều fixed elements) */
  html { scroll-behavior: auto !important; }
  /* Tap targets đủ lớn cho ngón tay (Apple HIG: 44px, Material: 48px) */
  .btn, .nav__links a, .footer__legal a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* Bỏ box-shadow nặng khi scroll */
  .card, .strat, .panel, .rs-strat, .rs-chart-panel {
    box-shadow: none !important;
  }
  /* Tránh hover effects sticky trên touch devices */
  .card:hover, .strat:hover, .rs-strat:hover {
    transform: none !important;
  }
}

/* Tablet — giữ một số effects nhưng giảm cường độ */
@media (max-width: 768px) and (orientation: portrait) {
  .container { padding-left: 16px !important; padding-right: 16px !important; }
  .hero h1, .rs-hero h1 { font-size: clamp(1.6rem, 8vw, 2.4rem) !important; }
  table { font-size: 0.82rem; }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  #matrix-bg { display: none !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.1s !important;
  }
}

/* Noise overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity: 0.06;
  mix-blend-mode: overlay;
}

/* Layout */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}

.section {
  padding: 120px 0;
  position: relative;
  z-index: 2;
}
.section--alt {
  background: linear-gradient(180deg, transparent 0%, var(--bg-2) 20%, var(--bg-2) 80%, transparent 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.section__head {
  max-width: 720px;
  margin: 0 auto 64px;
  text-align: center;
}
.section__head p { color: var(--text-dim); font-size: 1.05rem; margin-top: 12px; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  color: var(--neon);
  margin-bottom: 18px;
  text-transform: uppercase;
}

h1, h2, h3, h4 { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
h3 { font-size: 1.3rem; }

.gradient {
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

a { color: var(--text); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--neon); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: rgba(7, 9, 13, 0.7);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, background 0.3s;
}
.nav.scrolled { border-bottom-color: var(--border); background: rgba(7, 9, 13, 0.85); }
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px;
}
.brand {
  display: inline-flex; align-items: center; gap: 12px;
  font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em;
}
.brand__logo {
  width: 44px; height: 44px;
  border-radius: 10px;
  object-fit: contain;
  background: #06090f;
  border: 1px solid rgba(212, 175, 55, 0.42);
  box-shadow: 0 4px 22px rgba(212, 175, 55, 0.18), inset 0 1px 0 rgba(255, 242, 194, 0.18);
  transition: box-shadow 0.3s, transform 0.3s;
}
/* Wordmark variant: image rộng có cả chữ — ẩn brand__text bên cạnh.
   !important vì cần chắc chắn ẩn trên mọi breakpoint, tránh bị spec khác override
   khiến brand width quá lớn → đẩy hamburger ra ngoài viewport. */
.brand--wordmark .brand__logo {
  width: auto;
  height: 48px;
  max-width: 180px;
  border-radius: 8px;
  object-fit: contain;
  border: 1px solid rgba(212, 175, 55, 0.32);
}
.brand--wordmark .brand__text,
.brand--wordmark .brand__name,
.brand--wordmark .brand__tag {
  display: none !important;
}
@media (max-width: 480px) {
  .brand--wordmark .brand__logo { height: 36px; max-width: 120px; }
}
.brand:hover .brand__logo { box-shadow: 0 6px 32px rgba(212, 175, 55, 0.36); transform: translateY(-1px); }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  background: var(--gradient-gold);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  font-size: 1.18rem;
  letter-spacing: 0.3px;
}
.brand__tag {
  margin-top: 2px;
  font-family: var(--font-mono); font-size: 0.62rem;
  color: #d4af37; letter-spacing: 0.18em;
  opacity: 0.85;
}
.nav__links {
  display: flex; gap: 28px; align-items: center;
  font-size: 0.95rem;
}
.nav__links a { color: var(--text-dim); }
.nav__links a:hover { color: var(--text); }

/* ============================================================
   FIX: [hidden] attribute không thắng .btn { display: inline-flex }
   Ép luôn để không bị show cả nav__guest + nav__auth cùng lúc.
   ============================================================ */
[hidden] { display: none !important; }

/* ============================================================
   NAV AUTH CLUSTER — guest/auth buttons (chuyên nghiệp, quant-style)
   Gom đăng nhập + đăng ký thành cluster với visual separator,
   thay vì lẫn vào nav links.
   ============================================================ */
.nav__auth-cluster {
  display: inline-flex; align-items: center; gap: 10px;
  margin-left: 14px;
  padding-left: 20px;
  border-left: 1px solid var(--border);
}
.nav__auth-cluster .btn {
  padding: 8px 16px;
  font-size: 0.86rem;
}
.nav__auth-cluster .btn--ghost {
  padding: 8px 14px;
  color: var(--text-dim);
}
.nav__auth-cluster .btn--ghost:hover { color: var(--text); border-color: var(--border-2); }

/* Logged-in user pill (avatar + tier) */
.nav__user-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 5px 14px 5px 5px;
  background: rgba(0, 255, 159, 0.04);
  border: 1px solid rgba(0, 255, 159, 0.18);
  border-radius: 100px;
  text-decoration: none;
  color: var(--text);
  font-size: 0.85rem;
  transition: all 0.2s ease;
  font-family: var(--font-sans);
}
.nav__user-pill:hover {
  background: rgba(0, 255, 159, 0.08);
  border-color: var(--neon);
  box-shadow: 0 0 18px rgba(0, 255, 159, 0.18);
  color: var(--text);
}
.nav__user-avatar {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gradient);
  color: #001410;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}
.nav__user-meta { display: flex; flex-direction: column; line-height: 1.1; gap: 2px; }
.nav__user-name {
  font-weight: 500;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav__user-tier {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--neon);
  text-transform: uppercase;
}

/* Logout icon button — compact, không chiếm chỗ */
.nav__logout-btn {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-mute);
  cursor: pointer;
  transition: all 0.18s ease;
}
.nav__logout-btn:hover {
  color: var(--red);
  border-color: rgba(255, 85, 119, 0.4);
  background: rgba(255, 85, 119, 0.06);
}
.nav__logout-btn svg { width: 16px; height: 16px; }
.nav__toggle {
  display: none;
  flex-direction: column; gap: 5px;
  width: 32px; height: 32px; padding: 0;
  background: transparent; border: none; cursor: pointer;
}
.nav__toggle span {
  display: block; width: 22px; height: 2px; background: var(--text);
  transition: transform 0.25s;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px;
  font-family: var(--font-sans); font-weight: 500; font-size: 0.95rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer; transition: all 0.2s ease;
  text-decoration: none;
}
.btn--primary {
  background: var(--gradient);
  color: #001410;
  font-weight: 600;
  box-shadow: 0 0 0 rgba(0, 255, 159, 0.5);
}
.btn--primary:hover {
  box-shadow: 0 0 40px rgba(0, 255, 159, 0.35);
  transform: translateY(-2px);
  color: #001410;
}
.btn--outline {
  background: transparent;
  border-color: var(--border-2);
  color: var(--text);
}
.btn--outline:hover {
  border-color: var(--neon);
  color: var(--neon);
  box-shadow: 0 0 20px rgba(0, 255, 159, 0.15);
}
.btn--ghost { padding: 10px 18px; background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn--ghost:hover { border-color: var(--neon); color: var(--neon); }
.btn--block { width: 100%; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height: 100vh;
  padding: 140px 0 80px;
  position: relative;
  display: flex; align-items: center;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
}
.hero__logo {
  width: 120px;
  border-radius: 16px;
  border: 1px solid rgba(212, 175, 55, 0.3);
  box-shadow: 0 20px 60px rgba(212, 175, 55, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  margin-bottom: 28px;
  opacity: 0.95;
  animation: float 6s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.hero__badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 0.82rem;
  color: var(--neon);
  padding: 6px 14px;
  border: 1px solid var(--border-2);
  border-radius: 100px;
  margin-bottom: 28px;
  background: rgba(0, 255, 159, 0.04);
}
.hero__badge .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--neon); box-shadow: 0 0 10px var(--neon);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}
.hero__title { margin-bottom: 24px; }
.hero__sub {
  color: var(--text-dim);
  font-size: 1.1rem;
  max-width: 520px;
  margin-bottom: 36px;
}
.hero__sub b { color: var(--text); font-weight: 600; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 56px; }
.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.hero__stats > div { display: flex; flex-direction: column; gap: 2px; }
.hero__stats b {
  font-family: var(--font-mono);
  font-size: 1.6rem; font-weight: 700;
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero__stats span { font-size: 0.8rem; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.08em; }
.hero__stat-num { display: inline-flex; align-items: flex-start; gap: 1px; line-height: 1; }
.hero__stat-num b {
  font-family: var(--font-mono);
  font-size: 1.6rem; font-weight: 700;
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.hero__stat-plus {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--neon, #d4ac5c);
  margin-top: -2px;
  margin-left: 2px;
  line-height: 1;
  font-family: var(--font-mono);
}
.hero__scroll {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-mute);
  animation: bounce 2s ease-in-out infinite;
}
@keyframes bounce {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.5; }
  50% { transform: translate(-50%, 6px); opacity: 1; }
}

/* Terminal */
.terminal {
  background: #0a0e14;
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5), 0 0 60px rgba(0, 255, 159, 0.07);
  overflow: hidden;
  transform: perspective(1000px) rotateY(-2deg) rotateX(2deg);
  transition: transform 0.6s;
}
.terminal:hover { transform: perspective(1000px) rotateY(0) rotateX(0); }
.terminal__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: #0f141c;
  border-bottom: 1px solid var(--border);
}
.terminal__dot {
  width: 12px; height: 12px; border-radius: 50%;
}
.terminal__dot.red { background: #ff5f57; }
.terminal__dot.yellow { background: #febc2e; }
.terminal__dot.green { background: #28c840; }
.terminal__title {
  margin-left: auto; margin-right: auto;
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-mute);
}
.terminal__body {
  padding: 22px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.7;
  color: #c9d1d9;
  min-height: 340px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ============================================================
   GRID / CARDS
   ============================================================ */
.grid { display: grid; gap: 24px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

.card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 32px;
  transition: all 0.3s ease;
}
.card--bordered { border: 1px solid var(--border); }
.card--bordered:hover {
  border-color: var(--neon);
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.card__icon {
  font-size: 1.6rem;
  color: var(--neon);
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 1px solid var(--border-2);
  border-radius: 10px;
  margin-bottom: 20px;
  background: rgba(0, 255, 159, 0.04);
}
.card h3 { margin-bottom: 10px; }
.card p { color: var(--text-dim); font-size: 0.95rem; }

/* ============================================================
   PERFORMANCE
   ============================================================ */
.perf {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 28px;
  align-items: stretch;
}
.perf__chart {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  position: relative;
  overflow: hidden;
}
/* Canvas không có CSS width → JS set canvas.width = clientWidth*dpr cũng làm CSS
   display-size bị nhân theo dpr, vượt container → overflow:hidden cắt → mobile
   chỉ thấy 1 góc. Ép display 100% container, internal bitmap vẫn được scale
   riêng theo dpr ở drawChart(). */
#equityChart {
  display: block;
  width: 100%;
  height: 260px;
  max-width: 100%;
}
@media (max-width: 560px) {
  .perf__chart { padding: 18px; }
  #equityChart { height: 200px; }
  .perf__chart-head { flex-direction: column; gap: 12px; align-items: stretch; }
  .perf__range { justify-content: flex-start; }
  .perf__value { font-size: 1.6rem; }
}
.perf__chart::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at top right, rgba(0, 255, 159, 0.08), transparent 50%);
  pointer-events: none;
}
.perf__chart-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 20px;
  position: relative; z-index: 1;
}
.perf__label { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-mute); letter-spacing: 0.1em; }
.perf__value {
  font-family: var(--font-mono); font-size: 2rem; font-weight: 700;
  color: var(--neon); margin-top: 6px;
}
.perf__value .up { font-size: 1.1rem; }
.perf__range { display: flex; gap: 6px; }
.chip {
  padding: 6px 12px;
  background: transparent; border: 1px solid var(--border-2);
  border-radius: 6px;
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-dim);
  cursor: pointer; transition: all 0.2s;
}
.chip:hover { border-color: var(--neon-2); color: var(--neon-2); }
.chip.active { background: var(--neon); border-color: var(--neon); color: #001410; }

.perf__metrics {
  display: flex; flex-direction: column; gap: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}
.metric { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.metric__label { grid-column: 1; color: var(--text-dim); font-size: 0.88rem; }
.metric__value { grid-column: 2; font-family: var(--font-mono); font-weight: 600; color: var(--text); }
.metric__bar {
  grid-column: 1 / -1;
  height: 4px; background: var(--bg-3); border-radius: 100px;
  overflow: hidden;
}
.metric__bar i {
  display: block; height: 100%;
  background: var(--gradient);
  border-radius: 100px;
  transition: width 1s ease;
}
.perf__note {
  margin-top: 8px;
  font-size: 0.78rem; color: var(--text-mute); font-style: italic;
}
.perf__note b { color: var(--neon); font-style: normal; font-weight: 600; }
.perf__unit {
  font-size: 1rem;
  color: var(--text-dim);
  font-weight: 400;
  margin-left: 4px;
}

/* Legend */
.perf__legend {
  display: flex; gap: 24px; flex-wrap: wrap;
  padding: 14px 0 4px;
  margin-top: 10px;
  border-top: 1px dashed var(--border);
}
.legend-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.legend-dot {
  display: inline-block;
  width: 12px; height: 3px;
  border-radius: 2px;
}

/* Milestone ladder */
.milestones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dashed var(--border);
}
.milestone {
  background: rgba(7, 9, 13, 0.4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  transition: all 0.25s;
}
.milestone:hover {
  border-color: var(--neon);
  transform: translateY(-2px);
}
.milestone--target {
  border-color: var(--neon);
  background: linear-gradient(180deg, rgba(0, 255, 159, 0.06), rgba(7, 9, 13, 0.4));
  box-shadow: 0 0 30px rgba(0, 255, 159, 0.08);
}
.milestone__period {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-mute);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.milestone__value {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 700;
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.1;
  margin-bottom: 8px;
}
.milestone__bar {
  display: block;
  height: 3px;
  background: var(--bg-3);
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 8px;
}
.milestone__bar i {
  display: block;
  height: 100%;
  background: var(--gradient);
  border-radius: 100px;
}
.milestone__note {
  display: block;
  font-size: 0.78rem;
  color: var(--text-dim);
}
.milestone--target .milestone__note { color: var(--neon); font-weight: 500; }

@media (max-width: 560px) {
  .milestones { grid-template-columns: 1fr; gap: 8px; }
  .milestone__value { font-size: 1.3rem; }
}

/* ============================================================
   ABOUT
   ============================================================ */
.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.about__left .lead { color: var(--text-dim); font-size: 1.1rem; margin: 20px 0 28px; }
.about__left .lead b { color: var(--neon); }
.bullets { list-style: none; margin-bottom: 32px; }
.bullets li {
  position: relative; padding: 12px 0 12px 28px;
  color: var(--text-dim);
  border-bottom: 1px dashed var(--border);
}
.bullets li::before {
  content: '▸'; position: absolute; left: 0; color: var(--neon);
  font-family: var(--font-mono);
}
.bullets li b { color: var(--text); }

.about__right { display: flex; flex-direction: column; gap: 20px; }
.profile-card {
  display: flex; gap: 20px; align-items: center;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.profile-card__avatar {
  width: 72px; height: 72px;
  display: grid; place-items: center;
  background: var(--gradient);
  color: #001410;
  font-family: var(--font-mono); font-weight: 700; font-size: 1.4rem;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 30px rgba(0, 255, 159, 0.3);
}
.profile-card__info h4 { margin-bottom: 4px; }
.profile-card__info p { color: var(--text-dim); font-size: 0.9rem; margin-bottom: 10px; }
.profile-card__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.profile-card__tags span {
  font-family: var(--font-mono); font-size: 0.72rem;
  padding: 3px 8px; background: rgba(0, 217, 255, 0.08);
  color: var(--neon-2); border: 1px solid rgba(0, 217, 255, 0.2);
  border-radius: 4px;
}
.codeblock {
  background: #0a0e14;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  font-family: var(--font-mono); font-size: 0.85rem; line-height: 1.7;
  color: #c9d1d9;
  overflow-x: auto;
}
.codeblock .k  { color: #ff79c6; }
.codeblock .c  { color: var(--neon-2); }
.codeblock .f  { color: var(--neon); }
.codeblock .s  { color: var(--amber); }
.codeblock .co { color: var(--text-mute); font-style: italic; }

/* ============================================================
   SERVICES
   ============================================================ */
.services { margin-top: 16px; }
.service {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 32px;
  transition: all 0.3s ease;
  display: flex; flex-direction: column;
}
.service:hover {
  transform: translateY(-6px);
  border-color: var(--border-2);
  box-shadow: var(--shadow-hover);
}
.service--featured {
  border-color: var(--neon);
  background: linear-gradient(180deg, rgba(0, 255, 159, 0.05), var(--surface));
  box-shadow: 0 0 40px rgba(0, 255, 159, 0.1);
}
.service__ribbon {
  position: absolute; top: -12px; right: 24px;
  padding: 5px 14px;
  background: var(--gradient);
  color: #001410;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 100px;
}
.service__tag {
  font-family: var(--font-mono); font-size: 0.75rem;
  color: var(--neon-2); letter-spacing: 0.1em;
  margin-bottom: 14px;
}
.service h3 { margin-bottom: 10px; }
.service > p { color: var(--text-dim); margin-bottom: 22px; font-size: 0.95rem; }
.service__list { list-style: none; margin-bottom: 28px; flex-grow: 1; }
.service__list li {
  padding: 10px 0 10px 24px; position: relative;
  color: var(--text-dim); font-size: 0.93rem;
  border-bottom: 1px dashed var(--border);
}
.service__list li::before {
  content: '✓'; position: absolute; left: 0; color: var(--neon);
}
.service__list li b { color: var(--text); }

/* ============================================================
   POSTS / INSIGHTS
   ============================================================ */
.post {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all 0.3s;
  display: flex; flex-direction: column;
}
.post:hover {
  transform: translateY(-4px);
  border-color: var(--neon-2);
  box-shadow: var(--shadow);
}
.post__img {
  height: 180px;
  position: relative;
  overflow: hidden;
  display: flex; align-items: flex-end; padding: 16px;
}
.post__img--1 {
  background:
    linear-gradient(180deg, transparent 0%, rgba(7, 9, 13, 0.9) 100%),
    repeating-linear-gradient(45deg, rgba(0, 255, 159, 0.08) 0, rgba(0, 255, 159, 0.08) 2px, transparent 2px, transparent 10px),
    linear-gradient(135deg, #0a1a14, #0a1420);
}
.post__img--2 {
  background:
    linear-gradient(180deg, transparent 0%, rgba(7, 9, 13, 0.9) 100%),
    repeating-linear-gradient(-45deg, rgba(0, 217, 255, 0.08) 0, rgba(0, 217, 255, 0.08) 2px, transparent 2px, transparent 10px),
    linear-gradient(135deg, #0a141e, #0f1e2a);
}
.post__img--3 {
  background:
    linear-gradient(180deg, transparent 0%, rgba(7, 9, 13, 0.9) 100%),
    repeating-linear-gradient(90deg, rgba(179, 136, 255, 0.08) 0, rgba(179, 136, 255, 0.08) 2px, transparent 2px, transparent 10px),
    linear-gradient(135deg, #14102a, #1a1430);
}
.post__img--photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.post__img--photo::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,9,13,0.15) 0%, rgba(7,9,13,0.55) 55%, rgba(7,9,13,0.92) 100%);
  pointer-events: none;
}
.post__img--photo > * { position: relative; z-index: 1; }
.insights__more { text-align: center; margin-top: 32px; }
.insights__more a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 28px;
  border: 1px solid var(--border-2);
  border-radius: 8px;
  font-family: var(--font-mono); font-size: 0.88rem;
  color: var(--neon);
  transition: border-color 0.2s, transform 0.2s;
}
.insights__more a:hover {
  border-color: var(--neon);
  transform: translateY(-2px);
}
.post__cat {
  font-family: var(--font-mono); font-size: 0.72rem;
  padding: 4px 10px;
  background: rgba(7, 9, 13, 0.8);
  border: 1px solid var(--border-2);
  border-radius: 4px;
  color: var(--neon);
  letter-spacing: 0.12em;
}
.post__body { padding: 24px; display: flex; flex-direction: column; flex-grow: 1; }
.post__meta { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-mute); margin-bottom: 10px; }
.post__body h3 { margin-bottom: 10px; line-height: 1.3; }
.post__body p { color: var(--text-dim); font-size: 0.92rem; margin-bottom: 16px; flex-grow: 1; }
.post__more { color: var(--neon); font-family: var(--font-mono); font-size: 0.88rem; }

/* ============================================================
   CTA / FORM
   ============================================================ */
.cta {
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  border-top: 1px solid var(--border);
}
.cta__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.cta__left h2 { margin: 10px 0 20px; }
.cta__left p { color: var(--text-dim); font-size: 1.05rem; margin-bottom: 28px; }

.form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px;
  box-shadow: var(--shadow);
}
.form__row { margin-bottom: 18px; }
.form__row label {
  display: block;
  font-family: var(--font-mono); font-size: 0.78rem;
  color: var(--text-dim); letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 8px;
}
.form input, .form select {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-3);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-sans); font-size: 0.95rem;
  transition: all 0.2s;
}
.form input:focus, .form select:focus {
  outline: none;
  border-color: var(--neon);
  box-shadow: 0 0 0 3px rgba(0, 255, 159, 0.1);
}
.form input::placeholder { color: var(--text-mute); }
.form__hint { text-align: center; margin-top: 14px; font-size: 0.8rem; color: var(--text-mute); }
.form__ok {
  margin-top: 18px; padding: 14px;
  background: rgba(0, 255, 159, 0.08);
  border: 1px solid var(--neon);
  border-radius: var(--radius-sm);
  color: var(--neon); font-size: 0.9rem; text-align: center;
}
.form__err {
  margin-top: 18px; padding: 14px;
  background: rgba(255, 85, 119, 0.08);
  border: 1px solid var(--red);
  border-radius: var(--radius-sm);
  color: var(--red); font-size: 0.9rem; text-align: center;
}
/* Honeypot: ẩn khỏi user nhưng vẫn trong DOM để bot thấy */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important; height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  padding: 72px 0 28px;
  position: relative; z-index: 2;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 48px;
  margin-bottom: 48px;
}
.footer h5 {
  font-family: var(--font-mono); font-size: 0.82rem;
  color: var(--text); letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 16px;
}
.footer__grid > div > a {
  display: block;
  color: var(--text-dim);
  padding: 6px 0;
  font-size: 0.9rem;
}
.footer__about { color: var(--text-dim); font-size: 0.9rem; max-width: 320px; margin-top: 16px; }
.footer__bottom {
  padding-top: 28px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  flex-wrap: wrap;
  font-size: 0.85rem; color: var(--text-mute);
}
.footer__legal { display: flex; gap: 20px; }
.footer__legal a { color: var(--text-mute); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .hero__grid, .about, .cta__grid, .perf, .grid--3 {
    grid-template-columns: 1fr !important;
  }
  .footer__grid { grid-template-columns: 1fr 1fr; }

  /* Mobile density: compress vertical whitespace để đỡ "lướt dài không nội dung" */
  .hero {
    min-height: auto !important;
    padding: 90px 0 40px !important;
  }
  .hero__logo { width: 84px !important; margin-bottom: 18px !important; animation: none !important; }
  .hero__title { margin-bottom: 16px !important; }
  .hero__sub { font-size: 0.98rem !important; margin-bottom: 22px !important; }
  .hero__cta { margin-bottom: 28px !important; gap: 10px !important; }
  .hero__stats { padding-top: 20px !important; gap: 14px !important; }
  .hero__stats b { font-size: 1.3rem !important; }
  .section__head { margin-bottom: 36px !important; }
  .section__head p { font-size: 0.95rem !important; }

  /* Tắt reveal-on-scroll trên mobile — render chậm tạo cảm giác "trống" khi scroll.
     .no-reveal class được JS gắn vào <html> khi mobile (xem main.js). */
  html.no-reveal .card,
  html.no-reveal .service,
  html.no-reveal .post,
  html.no-reveal .perf__chart,
  html.no-reveal .perf__metrics,
  html.no-reveal .profile-card,
  html.no-reveal .codeblock {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .nav__links {
    position: fixed; top: 70px; left: 0; right: 0;
    flex-direction: column; gap: 0; padding: 20px;
    background: var(--bg-2); border-bottom: 1px solid var(--border);
    transform: translateY(-120%); transition: transform 0.3s;
  }
  .nav__links.open { transform: translateY(0); }
  .nav__links a { padding: 14px 0; width: 100%; border-bottom: 1px solid var(--border); }
  /* Hamburger: ưu tiên hiển thị, không bị shrink, có vùng tap đủ lớn */
  .nav__toggle {
    display: flex !important;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    margin-left: auto;
  }
  /* Padding nav__inner gọn hơn, brand không stretch hết width */
  .nav__inner {
    padding: 12px 14px !important;
    gap: 8px;
  }
  .brand { flex-shrink: 1; min-width: 0; }
  /* Ticker: nâng z-index thấp hơn nav, opaque background để không xuyên qua nav blur */
  .ticker {
    position: relative;
    z-index: 1 !important;
  }
  /* Nav opaque đậm trên mobile để không thấy ticker xuyên qua */
  .nav, .nav.scrolled {
    background: rgba(7, 9, 13, 0.96) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Mobile: auth cluster bung dọc, full-width, không border-left */
  .nav__auth-cluster {
    flex-direction: column;
    width: 100%;
    gap: 10px;
    margin-left: 0; padding-left: 0;
    padding-top: 16px;
    border-left: none;
    border-top: 1px solid var(--border);
    align-items: stretch;
  }
  .nav__auth-cluster .btn,
  .nav__user-pill { width: 100%; justify-content: center; }
  .nav__user-pill { padding: 10px 14px; }
  .nav__logout-btn { width: 100%; height: 42px; justify-content: center; }
  .nav__logout-btn::after {
    content: 'Đăng xuất';
    margin-left: 8px;
    font-family: var(--font-sans);
    font-size: 0.88rem;
  }
  .section { padding: 56px 0 !important; }
  .terminal { transform: none; }
}
@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; }
  .hero__stats { grid-template-columns: 1fr 1fr; gap: 12px !important; }
  .form { padding: 20px !important; }
  .section { padding: 48px 0 !important; }
  .section__head { margin-bottom: 28px !important; }
}

/* ============================================================
   SCROLL PROGRESS BAR
   ============================================================ */
.progress {
  position: fixed; top: 0; left: 0;
  height: 2px; width: 0;
  background: var(--gradient);
  z-index: 100;
  box-shadow: 0 0 12px rgba(0, 255, 159, 0.5);
  transition: width 0.1s linear;
}

/* ============================================================
   MARKET TICKER
   ============================================================ */
.ticker {
  position: relative;
  z-index: 3;
  background: linear-gradient(90deg, rgba(10, 14, 20, 0.95), rgba(15, 21, 30, 0.95));
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  backdrop-filter: blur(10px);
}
.ticker__track {
  display: flex;
  gap: 48px;
  padding: 10px 0;
  white-space: nowrap;
  animation: tickerScroll 60s linear infinite;
  width: max-content;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes tickerScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.tk-item { display: inline-flex; align-items: center; gap: 8px; }
.tk-sym { color: var(--text-dim); font-weight: 500; }
.tk-price { color: var(--text); font-weight: 600; }
.tk-chg.up { color: var(--neon); }
.tk-chg.down { color: var(--red); }

/* ============================================================
   HERO BUTTON ICONS
   ============================================================ */
.btn-icon { flex-shrink: 0; vertical-align: -3px; }

/* ============================================================
   CREDENTIALS STRIP
   ============================================================ */
.credentials {
  padding: 40px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: rgba(10, 14, 20, 0.4);
  position: relative; z-index: 2;
}
.credentials__title {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-mute);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.credentials__logos {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 40px;
}
.cred-logo {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0.05em;
  opacity: 0.7;
  transition: all 0.3s;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 6px;
}
.cred-logo:hover {
  opacity: 1;
  color: var(--gold-2);
  border-color: rgba(212, 175, 55, 0.25);
  background: rgba(212, 175, 55, 0.04);
}

/* TradingView accent inside the strip — same visual weight as siblings, but
   uses TV brand blue + icon so the partner relationship reads at a glance. */
.cred-logo--tv {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #2962FF;
  border-color: rgba(41, 98, 255, 0.18);
  background: rgba(41, 98, 255, 0.04);
}
.cred-logo--tv .cred-logo__icon { color: #2962FF; }
.cred-logo--tv:hover {
  color: #2962FF;
  border-color: rgba(41, 98, 255, 0.5);
  background: rgba(41, 98, 255, 0.08);
}

/* Lightweight Charts™ partnership row — shown right under the logo strip.
   Required attribution per TradingView open-source license; styled as a
   subtle, professional partner card (not a CTA), readable on dark theme. */
.tv-partner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px auto 0;
  padding: 12px 18px;
  max-width: 560px;
  border: 1px solid rgba(41, 98, 255, 0.22);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(41, 98, 255, 0.06), rgba(41, 98, 255, 0.02));
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.25s, background 0.25s, transform 0.25s;
}
.tv-partner:hover {
  border-color: rgba(41, 98, 255, 0.55);
  background: linear-gradient(135deg, rgba(41, 98, 255, 0.10), rgba(41, 98, 255, 0.04));
  transform: translateY(-1px);
}
.tv-partner__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 8px;
  color: #fff;
  background: #2962FF;
  flex-shrink: 0;
}
.tv-partner__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.tv-partner__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #2962FF;
}
.tv-partner__title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
}
.tv-partner__by {
  font-weight: 400;
  color: var(--text-dim);
}
.tv-partner__cta {
  font-size: 1.1rem;
  color: #2962FF;
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.25s;
}
.tv-partner:hover .tv-partner__cta { transform: translateX(3px); }
@media (max-width: 540px) {
  .tv-partner { margin-top: 18px; padding: 10px 14px; gap: 10px; }
  .tv-partner__title { font-size: 0.85rem; }
  .tv-partner__badge { width: 32px; height: 32px; }
}

/* In-chart attribution overlay — small, unobtrusive "Charts by TradingView"
   link rendered absolutely inside chart containers. Use by adding the
   <a class="tv-attrib"> element as a child of the chart wrapper, and
   ensuring the wrapper has position:relative. */
.tv-attrib {
  position: absolute;
  right: 8px;
  bottom: 6px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-family: var(--font-mono, monospace);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: rgba(139, 152, 172, 0.55);
  background: rgba(10, 14, 20, 0.55);
  border: 1px solid rgba(28, 38, 53, 0.6);
  border-radius: 4px;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  pointer-events: auto;
}
.tv-attrib:hover {
  color: #2962FF;
  border-color: rgba(41, 98, 255, 0.4);
  background: rgba(10, 14, 20, 0.85);
}

/* ============================================================
   PROFILE CARD - IMAGE AVATAR
   ============================================================ */
.profile-card__avatar--img {
  padding: 0;
  object-fit: cover;
  background: transparent;
}

/* ============================================================
   ABOUT CTA ROW
   ============================================================ */
.about__cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   PROCESS / HOW IT WORKS
   ============================================================ */
.process {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  position: relative;
}
.process__step {
  position: relative;
  background:
    linear-gradient(180deg, rgba(15, 20, 28, 0.6), rgba(15, 20, 28, 0.9)),
    radial-gradient(circle at top right, rgba(0, 255, 159, 0.05), transparent 60%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 30px;
  transition: all 0.35s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.process__step::before {
  /* subtle accent bar on top */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gradient);
  opacity: 0.5;
  transition: opacity 0.3s;
}
.process__step:hover {
  border-color: var(--neon);
  transform: translateY(-4px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(0, 255, 159, 0.1);
}
.process__step:hover::before { opacity: 1; }

.process__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--border-2);
}
.process__num {
  font-family: var(--font-mono);
  font-size: 2.6rem;
  font-weight: 700;
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  letter-spacing: -0.02em;
}
.process__icon {
  width: 52px; height: 52px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(0, 255, 159, 0.06);
  border: 1px solid rgba(0, 255, 159, 0.2);
  color: var(--neon);
  flex-shrink: 0;
  transition: all 0.3s;
}
.process__step:hover .process__icon {
  background: rgba(0, 255, 159, 0.12);
  transform: rotate(6deg) scale(1.05);
  box-shadow: 0 0 30px rgba(0, 255, 159, 0.2);
}

.process__step h3 {
  font-size: 1.3rem;
  margin-bottom: 12px;
  line-height: 1.3;
  color: var(--text);
  font-weight: 600;
}

.process__desc {
  color: var(--text-dim);
  font-size: 0.98rem;
  line-height: 1.65;
  margin-bottom: 18px;
}

.process__list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
}
.process__list li {
  position: relative;
  padding: 6px 0 6px 24px;
  color: var(--text-dim);
  font-size: 0.9rem;
  line-height: 1.55;
}
.process__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 13px;
  width: 10px; height: 2px;
  background: var(--neon);
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(0, 255, 159, 0.5);
}
.process__list li b {
  color: var(--gold-2);
  font-weight: 600;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  padding: 1px 5px;
  background: rgba(212, 175, 55, 0.08);
  border-radius: 3px;
}

.process__time {
  display: inline-flex;
  align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--neon-2);
  padding: 6px 14px;
  border: 1px solid rgba(0, 217, 255, 0.25);
  border-radius: 100px;
  letter-spacing: 0.05em;
  background: rgba(0, 217, 255, 0.04);
  align-self: flex-start;
}
.process__time::before {
  content: '⏱';
  font-size: 0.85rem;
}

/* Step numbering connector (only >= 1024px, 4-col layout) */
@media (min-width: 1100px) {
  .process { grid-template-columns: repeat(4, 1fr); }
  .process__step {
    padding: 28px 24px;
  }
  .process__step h3 { font-size: 1.12rem; }
  .process__num { font-size: 2.2rem; }
  .process__icon { width: 42px; height: 42px; padding: 9px; }
  .process__desc { font-size: 0.9rem; }
  .process__list li { font-size: 0.84rem; }
  .process__step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 58px; right: -16px;
    width: 24px; height: 2px;
    background: linear-gradient(90deg, var(--neon), transparent);
    z-index: 1;
    opacity: 0.5;
  }
}

@media (max-width: 560px) {
  .process__step { padding: 24px 22px; }
  .process__num { font-size: 2rem; }
  .process__icon { width: 42px; height: 42px; padding: 9px; }
  .process__step h3 { font-size: 1.1rem; }
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials { margin-top: 16px; }
.testimonial {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
  position: relative;
  transition: all 0.3s;
}
.testimonial::before {
  content: '"';
  position: absolute;
  top: -16px; left: 20px;
  font-family: Georgia, serif;
  font-size: 5rem;
  line-height: 1;
  color: var(--neon);
  opacity: 0.25;
  font-weight: 700;
}
.testimonial:hover {
  transform: translateY(-4px);
  border-color: var(--neon-2);
  box-shadow: var(--shadow);
}
.testimonial--highlight {
  border-color: var(--neon);
  background: linear-gradient(180deg, rgba(0, 255, 159, 0.04), var(--surface));
}
.testimonial blockquote {
  color: var(--text);
  font-size: 0.98rem;
  line-height: 1.7;
  margin: 0 0 22px;
  font-style: italic;
}
.testimonial figcaption {
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.testimonial figcaption strong { color: var(--neon); font-weight: 600; font-size: 0.95rem; }
.testimonial figcaption span { color: var(--text-mute); font-size: 0.82rem; font-family: var(--font-mono); }

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faq {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.faq__item {
  background:
    linear-gradient(180deg, rgba(15, 20, 28, 0.7), rgba(15, 20, 28, 0.95));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0;
  transition: all 0.3s;
  overflow: hidden;
  position: relative;
}
.faq__item::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 3px;
  background: var(--neon);
  opacity: 0;
  transition: opacity 0.3s;
}
.faq__item:hover { border-color: var(--border-2); }
.faq__item:hover::before { opacity: 0.5; }
.faq__item[open] {
  border-color: var(--neon);
  box-shadow: 0 0 40px rgba(0, 255, 159, 0.08), 0 10px 30px rgba(0, 0, 0, 0.2);
}
.faq__item[open]::before { opacity: 1; }

.faq__item summary {
  padding: 20px 56px 20px 24px;
  cursor: pointer;
  font-weight: 500;
  font-size: 1rem;
  color: var(--text);
  list-style: none;
  position: relative;
  transition: color 0.2s, background 0.2s;
  display: flex;
  align-items: center;
  gap: 14px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '+';
  position: absolute;
  top: 50%; right: 22px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--neon);
  background: rgba(0, 255, 159, 0.08);
  border: 1px solid rgba(0, 255, 159, 0.25);
  border-radius: 50%;
  transform: translateY(-50%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s;
  line-height: 0;
}
.faq__item[open] summary::after {
  content: '×';
  transform: translateY(-50%) rotate(90deg);
  background: var(--gradient);
  color: #001410;
  border-color: transparent;
}
.faq__item[open] summary {
  background: rgba(0, 255, 159, 0.03);
}
.faq__item[open] summary { color: var(--neon); }
.faq__item summary:hover { color: var(--neon-2); }

/* Category tag on each FAQ question */
.faq__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 4px 8px;
  background: rgba(212, 175, 55, 0.1);
  color: var(--gold-2);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 4px;
  flex-shrink: 0;
}
.faq__item[open] .faq__tag {
  background: rgba(0, 255, 159, 0.1);
  color: var(--neon);
  border-color: rgba(0, 255, 159, 0.3);
}

.faq__body {
  padding: 4px 24px 22px;
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1.75;
  border-top: 1px dashed var(--border);
  margin-top: -2px;
  padding-top: 18px;
}
.faq__body p {
  margin-bottom: 10px;
}
.faq__body p:last-child { margin-bottom: 0; }

.faq__steps {
  list-style: none;
  counter-reset: faq-step;
  padding: 0;
  margin: 14px 0 0;
}
.faq__steps li {
  counter-increment: faq-step;
  padding: 10px 14px 10px 44px;
  margin-bottom: 8px;
  background: rgba(7, 9, 13, 0.5);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  position: relative;
  color: var(--text-dim);
  font-size: 0.92rem;
}
.faq__steps li::before {
  content: counter(faq-step);
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  display: grid; place-items: center;
  background: var(--gradient);
  color: #001410;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 50%;
}

/* Highlight classes for bold terms in FAQ body */
.hl-neon {
  color: var(--neon) !important;
  font-weight: 600;
}
.hl-gold {
  color: var(--gold-2) !important;
  font-weight: 600;
  background: rgba(212, 175, 55, 0.08);
  padding: 1px 6px;
  border-radius: 3px;
}
.hl-red {
  color: var(--red) !important;
  font-weight: 600;
  background: rgba(255, 85, 119, 0.08);
  padding: 1px 6px;
  border-radius: 3px;
}
.hl-mono {
  font-family: var(--font-mono) !important;
  font-size: 0.88em;
  color: var(--neon-2) !important;
  background: rgba(0, 217, 255, 0.08);
  padding: 1px 6px;
  border-radius: 3px;
}

/* ============================================================
   CONTACT DIRECT CHIPS
   ============================================================ */
.contact-direct {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px dashed var(--border);
}
.contact-direct__title {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-mute);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.contact-direct__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.contact-chip {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all 0.25s;
  color: var(--text);
}
.contact-chip svg {
  flex-shrink: 0;
  width: 20px; height: 20px;
}
.contact-chip span { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; min-width: 0; }
.contact-chip b { color: var(--text); font-size: 0.88rem; font-weight: 600; }
.contact-chip em {
  color: var(--text-mute);
  font-size: 0.75rem;
  font-style: normal;
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact-chip:hover {
  transform: translateY(-2px);
  border-color: var(--neon);
  box-shadow: 0 10px 30px rgba(0, 255, 159, 0.08);
}
.contact-chip--zalo svg { color: #0068ff; }
.contact-chip--zalo:hover svg { filter: drop-shadow(0 0 8px #0068ff); }
.contact-chip--tg svg { color: #2aabee; }
.contact-chip--tg:hover svg { filter: drop-shadow(0 0 8px #2aabee); }
.contact-chip--fb svg { color: #1877f2; }
.contact-chip--fb:hover svg { filter: drop-shadow(0 0 8px #1877f2); }
.contact-chip--mail svg { color: var(--gold); }
.contact-chip--mail:hover svg { filter: drop-shadow(0 0 8px var(--gold)); }

/* ============================================================
   FOOTER SOCIAL ICONS
   ============================================================ */
.footer__brand { display: flex; flex-direction: column; gap: 16px; }
.footer__social {
  display: flex; gap: 10px; margin-top: 8px;
}
.footer__social a {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--border-2);
  border-radius: 50%;
  color: var(--text-dim);
  transition: all 0.25s;
  padding: 0 !important;
}
.footer__social a:hover {
  color: var(--neon);
  border-color: var(--neon);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 255, 159, 0.15);
}

/* ============================================================
   FLOATING ACTION BUTTON (FAB)
   ============================================================ */
.fab {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 60;
}
.fab__toggle {
  width: 58px; height: 58px;
  border-radius: 50%;
  border: none;
  background: var(--gradient);
  color: #001410;
  cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 10px 30px rgba(0, 255, 159, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  transition: transform 0.3s, box-shadow 0.3s;
  position: relative;
  animation: fabPulse 2.5s ease-in-out infinite;
}
@keyframes fabPulse {
  0%, 100% { box-shadow: 0 10px 30px rgba(0, 255, 159, 0.35), 0 0 0 0 rgba(0, 255, 159, 0.4); }
  50%      { box-shadow: 0 10px 30px rgba(0, 255, 159, 0.35), 0 0 0 18px rgba(0, 255, 159, 0); }
}
.fab__toggle:hover { transform: scale(1.05); }
.fab__icon-close { display: none; }
.fab.open .fab__toggle { animation: none; transform: rotate(180deg); }
.fab.open .fab__icon-open { display: none; }
.fab.open .fab__icon-close { display: block; }
.fab__items {
  position: absolute;
  bottom: 72px; right: 0;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
}
.fab__item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 10px 10px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 100px;
  color: var(--text);
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateX(16px) scale(0.9);
  transition: opacity 0.3s var(--d, 0s), transform 0.3s var(--d, 0s), border-color 0.2s;
  white-space: nowrap;
}
.fab__item svg { flex-shrink: 0; }
.fab__item:nth-child(1) svg { color: #0068ff; }
.fab__item:nth-child(2) svg { color: #2aabee; }
.fab__item:nth-child(3) svg { color: #1877f2; }
.fab__item:nth-child(4) svg { color: var(--gold); }
.fab__label {
  font-weight: 500;
  font-size: 0.88rem;
}
.fab.open .fab__items { pointer-events: auto; }
.fab.open .fab__item {
  opacity: 1;
  transform: translateX(0) scale(1);
}
.fab__item:hover { border-color: var(--neon); }

/* ============================================================
   BACK TO TOP
   ============================================================ */
.to-top {
  position: fixed;
  left: 24px; bottom: 24px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-2);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: 1.1rem;
  display: grid; place-items: center;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s;
  z-index: 59;
}
.to-top.visible { opacity: 1; transform: translateY(0); }
.to-top:hover {
  border-color: var(--neon);
  color: var(--neon);
  transform: translateY(-2px);
}

/* ============================================================
   RESPONSIVE OVERRIDES FOR NEW SECTIONS
   ============================================================ */
@media (max-width: 960px) {
  .process { grid-template-columns: 1fr 1fr; }
  .process__step::after { display: none; }
  .testimonials, .services { gap: 20px; }
  .contact-direct__grid { grid-template-columns: 1fr; }
  .fab { bottom: 16px; right: 16px; }
  .to-top { bottom: 16px; left: 16px; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { justify-content: center; }
  .credentials__logos { gap: 14px 24px; }
  .cred-logo { font-size: 0.82rem; padding: 6px 10px; }
}
@media (max-width: 560px) {
  .process { grid-template-columns: 1fr; }
  .ticker { font-size: 0.72rem; }
  .ticker__track { gap: 28px; padding: 8px 0; }
  .faq__item summary { padding: 18px 20px; padding-right: 44px; font-size: 0.95rem; }
  .faq__item summary::after { right: 18px; }
  .fab__item .fab__label { display: none; }
  .fab__item { padding: 10px; border-radius: 50%; width: 44px; height: 44px; justify-content: center; }
}

/* ============================================================
   PROFESSIONAL BIO
   ============================================================ */
.bio-header {
  padding: 20px 0 18px;
  margin-bottom: 20px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.bio-name {
  font-size: 1.6rem;
  margin-bottom: 6px;
  background: var(--gradient-gold);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bio-role {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: var(--text-dim);
  margin: 0;
  letter-spacing: 0.02em;
}
.bio-role b { color: var(--text); font-weight: 600; }
.bio-sep { color: var(--neon); margin: 0 6px; }
.bio-paragraph {
  color: var(--text-dim);
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 24px;
}
.bio-paragraph b { color: var(--text); font-weight: 600; }
.bio-disclaimer {
  background: rgba(0, 255, 159, 0.04);
  border-left: 3px solid var(--neon);
  padding: 14px 16px;
  font-size: 0.95rem;
  border-radius: var(--radius-sm);
}

/* ============================================================
   CAREER TIMELINE
   ============================================================ */
.career-timeline {
  display: flex; flex-direction: column; gap: 14px;
}
.career-item {
  position: relative;
  padding: 18px 20px 18px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
  transition: all 0.25s;
}
.career-item:hover {
  border-color: var(--border-2);
  border-left-color: var(--gold-2);
  transform: translateX(2px);
}
.career-year {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--gold-2);
  padding: 3px 10px;
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 4px;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  background: rgba(212, 175, 55, 0.05);
}
.career-item h5 {
  font-size: 1rem;
  margin-bottom: 4px;
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.career-item p {
  color: var(--text-dim);
  font-size: 0.88rem;
  line-height: 1.55;
}

/* ============================================================
   STOIC / INVESTMENT PHILOSOPHY
   ============================================================ */
.stoic {
  padding: 100px 0;
  position: relative;
  z-index: 2;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(212, 175, 55, 0.08), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 50%, var(--bg) 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.stoic::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M 0 80 Q 25 60 50 68 T 100 50' stroke='%23d4af37' stroke-width='0.4' fill='none' opacity='0.15'/></svg>");
  background-size: 120% 100%;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}
.stoic__inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
.stoic__title {
  margin-bottom: 40px;
  background: var(--gradient-gold);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stoic__quote {
  margin: 0 0 56px;
  position: relative;
  padding: 40px 30px;
}
.stoic__mark {
  color: var(--gold);
  opacity: 0.6;
  margin: 0 auto 24px;
  display: block;
}
.stoic__quote blockquote {
  margin: 0 0 24px;
  font-size: 1.2rem;
  line-height: 1.8;
  color: var(--text);
  font-weight: 300;
}
.stoic__quote blockquote p { margin-bottom: 16px; }
.stoic__quote blockquote p:last-child { margin-bottom: 0; }
.stoic__quote blockquote b {
  color: var(--text);
  font-weight: 600;
}
.stoic__highlight {
  color: var(--gold-2) !important;
  border-bottom: 1px dashed rgba(212, 175, 55, 0.5);
  padding-bottom: 2px;
}
.stoic__quote figcaption {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: var(--gold);
  letter-spacing: 0.06em;
}
.stoic__pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px dashed var(--border-2);
}
.stoic__pillar {
  padding: 24px 20px;
  background: rgba(15, 20, 28, 0.6);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: all 0.3s;
}
.stoic__pillar:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(212, 175, 55, 0.1);
}
.stoic__latin {
  display: block;
  font-family: 'Georgia', serif;
  font-style: italic;
  font-size: 1.2rem;
  color: var(--gold-2);
  margin-bottom: 10px;
  font-weight: 600;
}
.stoic__pillar p {
  color: var(--text-dim);
  font-size: 0.9rem;
  line-height: 1.65;
}

/* Responsive overrides */
@media (max-width: 960px) {
  .stoic__pillars { grid-template-columns: 1fr; gap: 14px; margin-top: 32px; padding-top: 28px; }
  .stoic__quote blockquote { font-size: 1.05rem; }
  .stoic__quote { padding: 20px 10px; }
  .bio-name { font-size: 1.35rem; }
  .bio-role { font-size: 0.82rem; }
  .stoic { padding: 70px 0; }
}

/* ============================================================
   PRICING / MEMBERSHIP TIERS
   ============================================================ */
.pricing-section { padding: 100px 0; }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
  margin-top: 40px;
}
.pricing-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 26px;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.pricing-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 255, 159, 0.4);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.pricing-card--featured {
  border-color: var(--neon);
  background: linear-gradient(180deg, rgba(0, 255, 159, 0.03), var(--surface) 60%);
  box-shadow: 0 0 0 1px rgba(0, 255, 159, 0.2), 0 20px 60px rgba(0, 255, 159, 0.08);
}
.pricing-card--inner {
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.04), var(--surface) 60%);
  border-color: rgba(212, 175, 55, 0.35);
}
.pricing-card__ribbon {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  background: var(--gradient);
  color: #001410;
  padding: 5px 14px;
  border-radius: 20px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.pricing-card__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--text-mute);
  margin-bottom: 12px;
}
.pricing-card--featured .pricing-card__tag { color: var(--neon); }
.pricing-card--inner    .pricing-card__tag { color: var(--gold); }
.pricing-card__name {
  font-size: 1.7rem;
  margin: 0 0 8px;
  line-height: 1.15;
}
.pricing-card__role {
  color: var(--text-dim);
  font-size: 0.92rem;
  line-height: 1.55;
  margin-bottom: 22px;
  min-height: 3.1em;
}
.pricing-card__price {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
  margin-bottom: 20px;
}
.price-option {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 0;
}
.price-option__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--text-mute);
  text-transform: uppercase;
}
.price-option__value {
  font-family: var(--font-mono);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}
.price-option__value sup { font-size: 0.9rem; color: var(--text-dim); margin-left: -2px; vertical-align: super; }
.price-option__value em {
  font-style: normal;
  font-size: 0.82rem;
  color: var(--text-mute);
  font-weight: 400;
  margin-left: 4px;
}
.price-option__cond {
  font-size: 0.82rem;
  color: var(--text-dim);
  line-height: 1.5;
}
.price-option--free .price-option__value { color: var(--neon); }
.price-divider {
  display: flex; align-items: center;
  margin: 8px 0;
  color: var(--text-mute);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}
.price-divider::before, .price-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.price-divider span { padding: 0 12px; }
.price-fees {
  display: grid; grid-template-columns: 1fr; gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}
.price-fee {
  display: flex; flex-direction: column; gap: 2px;
}
.price-fee span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  text-transform: uppercase;
}
.price-fee b {
  font-size: 1.05rem;
  color: var(--text);
  font-weight: 600;
}
.price-fee__zero { color: var(--neon) !important; font-size: 1.3rem !important; }
.price-fee small {
  font-size: 0.78rem;
  color: var(--text-dim);
  line-height: 1.5;
  margin-top: 2px;
}
.price-private {
  margin-top: 14px;
  padding: 14px;
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 8px;
  text-align: center;
}
.price-private b {
  display: block;
  font-family: var(--font-mono);
  color: var(--gold);
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}
.price-private span {
  font-size: 0.82rem;
  color: var(--text-dim);
}
.pricing-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  flex: 1;
}
.pricing-card__list li {
  position: relative;
  padding: 10px 0 10px 24px;
  font-size: 0.92rem;
  color: var(--text-dim);
  line-height: 1.55;
  border-bottom: 1px dashed var(--border);
}
.pricing-card__list li:last-child { border-bottom: none; }
.pricing-card__list li::before {
  content: '▸';
  position: absolute;
  left: 0; top: 10px;
  color: var(--neon);
  font-family: var(--font-mono);
}
.pricing-card--inner .pricing-card__list li::before { color: var(--gold); }
.pricing-card__list li b { color: var(--text); font-weight: 600; }
.pricing-card__cta {
  display: flex; flex-direction: column; gap: 10px;
}
.pricing-card__note {
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--text-mute);
  text-align: center;
}
.pricing-card__list li.pricing-card__limit {
  margin-top: 12px;
  padding: 12px 12px 12px 32px;
  background: rgba(255, 85, 119, 0.06);
  border-left: 3px solid var(--red);
  border-radius: 0 6px 6px 0;
  font-size: 0.85rem;
  color: var(--text-dim);
  border-bottom: none;
}
.pricing-card__list li.pricing-card__limit::before {
  content: '✕';
  color: var(--red);
  left: 10px;
  top: 12px;
}
.pricing-card__list li.pricing-card__limit b { color: var(--red); }
.pricing-card__list li.pricing-card__limit u { color: var(--text); text-decoration: underline dotted rgba(255, 85, 119, 0.4); }

.pricing-card__list li.pricing-card__note-item {
  margin-top: 12px;
  padding: 12px 12px 12px 32px;
  background: rgba(0, 255, 159, 0.05);
  border-left: 3px solid var(--neon);
  border-radius: 0 6px 6px 0;
  font-size: 0.85rem;
  color: var(--text-dim);
  border-bottom: none;
}
.pricing-card__list li.pricing-card__note-item::before {
  content: 'i';
  color: var(--neon);
  font-family: serif;
  font-style: italic;
  font-weight: 700;
  left: 13px;
  top: 10px;
}
.pricing-card__list li.pricing-card__note-item b { color: var(--neon); }

.pricing-compare {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 36px;
  padding: 22px 24px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.pricing-compare__item {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 12px;
  border-left: 3px solid var(--neon);
}
.pricing-compare__item:nth-child(2) { border-left-color: #00d9ff; }
.pricing-compare__item:nth-child(3) { border-left-color: var(--gold); }
.pricing-compare__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  text-transform: uppercase;
}
.pricing-compare__val {
  font-size: 0.95rem;
  color: var(--text);
  font-weight: 600;
}
@media (max-width: 720px) {
  .pricing-compare { grid-template-columns: 1fr; }
}

.pricing-disclaimer {
  margin-top: 30px;
  font-size: 0.88rem;
  color: var(--text-mute);
  text-align: center;
  max-width: 780px;
  margin-left: auto; margin-right: auto;
  line-height: 1.6;
}
.pricing-disclaimer a { color: var(--neon); }
@media (max-width: 960px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-card__role { min-height: auto; }
}

/* ============================================================
   PRICING v2 — hero strip · persona · upgrade · matrix · trust
   ============================================================ */
.pricing-hero-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 30px 0 40px;
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 12px;
  overflow: hidden;
}
.phs-item {
  background: var(--bg-2, #0c1118);
  padding: 22px 18px;
  text-align: center;
  transition: background 180ms;
}
.phs-item:hover { background: rgba(212, 175, 55, 0.05); }
.phs-num {
  display: block;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--gold, #d4af37);
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.phs-num em {
  font-size: 1.1rem;
  color: var(--text-mute);
  font-style: normal;
  margin-left: 1px;
}
.phs-label {
  font-size: 0.78rem;
  color: var(--text-dim, #c0cad8);
  line-height: 1.4;
}
@media (max-width: 800px) {
  .pricing-hero-strip { grid-template-columns: repeat(2, 1fr); }
}

/* Persona badge trong card head */
.pricing-card__persona {
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid var(--neon, #00ff9f);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.pricing-card--featured .pricing-card__persona { border-left-color: var(--neon, #00ff9f); }
.pricing-card--inner .pricing-card__persona { border-left-color: var(--gold, #d4af37); }
.persona-badge {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--neon, #00ff9f);
  letter-spacing: 0.04em;
}
.pricing-card--inner .persona-badge { color: var(--gold, #d4af37); }
.persona-text {
  font-size: 0.82rem;
  color: var(--text-dim, #c0cad8);
  line-height: 1.55;
}

/* Upgrade trigger block */
.pricing-card__upgrade {
  margin: 14px 0 10px;
  padding: 10px 12px;
  background: rgba(212, 175, 55, 0.05);
  border: 1px dashed rgba(212, 175, 55, 0.3);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.upgrade-trigger {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gold, #d4af37);
  letter-spacing: 0.06em;
}
.upgrade-text {
  font-size: 0.8rem;
  color: var(--text-dim, #c0cad8);
  line-height: 1.5;
}

/* Ribbon variant cho Inner card */
.pricing-card--inner .pricing-card__ribbon {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.9), rgba(212, 175, 55, 0.6));
  color: #0c1118;
}

/* ============================================================
   Feature comparison matrix
   ============================================================ */
.pricing-matrix {
  margin: 50px 0 30px;
  padding: 32px 28px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 16px;
}
.pricing-matrix__head { text-align: center; margin-bottom: 24px; }
.pricing-matrix__title {
  font-size: 1.4rem;
  color: var(--text, #e6edf3);
  margin-bottom: 6px;
}
.pricing-matrix__sub {
  font-size: 0.9rem;
  color: var(--text-mute, #8fa1bd);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.5;
}

.pricing-matrix__table {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.06));
}
.pm-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 150ms;
}
.pm-row:last-child { border-bottom: none; }
.pm-row:hover:not(.pm-head):not(.pm-section) {
  background: rgba(212, 175, 55, 0.03);
}
.pm-col {
  padding: 12px 16px;
  font-size: 0.86rem;
  line-height: 1.45;
  border-right: 1px solid rgba(255, 255, 255, 0.04);
}
.pm-col:last-child { border-right: none; }
.pm-col-label {
  color: var(--text, #e6edf3);
  font-weight: 500;
}
.pm-col-tier {
  text-align: center;
  color: var(--text-dim, #c0cad8);
  font-size: 0.82rem;
}
.pm-head {
  background: rgba(212, 175, 55, 0.08);
  border-bottom: 2px solid rgba(212, 175, 55, 0.25);
}
.pm-head .pm-col {
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gold, #d4af37);
  font-family: var(--font-mono, "JetBrains Mono", monospace);
}
.pm-col-diamond { color: var(--neon, #00ff9f) !important; }
.pm-col-inner { color: var(--gold, #d4af37) !important; }

.pm-section {
  grid-column: 1 / -1;
  display: block;
  padding: 14px 16px 10px;
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(212, 175, 55, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold, #d4af37);
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-weight: 700;
}

.pm-check {
  display: inline-block;
  width: 24px; height: 24px;
  line-height: 24px;
  border-radius: 50%;
  background: rgba(0, 255, 159, 0.12);
  color: var(--neon, #00ff9f);
  font-weight: 800;
  font-size: 0.92rem;
  font-style: normal;
}
.pm-inner-check .pm-check {
  background: rgba(212, 175, 55, 0.15);
  color: var(--gold, #d4af37);
}
.pm-x {
  color: rgba(255, 255, 255, 0.2);
  font-size: 1.2rem;
  font-weight: 600;
}

@media (max-width: 900px) {
  .pricing-matrix { padding: 20px 14px; }
  .pm-row { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .pm-col { padding: 10px 8px; font-size: 0.76rem; }
  .pm-head .pm-col { font-size: 0.68rem; }
}
@media (max-width: 640px) {
  /* Stack matrix vertically on phones */
  .pm-row {
    grid-template-columns: 1fr;
    padding: 10px 14px;
  }
  .pm-col { border-right: none; padding: 5px 0; text-align: left !important; }
  .pm-col-label { font-weight: 700; color: var(--gold, #d4af37); }
  .pm-col-tier::before {
    content: attr(data-tier-label) "  ";
    color: var(--text-mute);
    font-weight: 600;
    margin-right: 4px;
  }
  .pm-head { display: none; }
  .pm-section { padding: 12px 14px; }
}

/* Mobile-only note thay thế matrix trên điện thoại — gợi ý xem desktop */
.pricing-mobile-note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-top: 30px;
}
.pmn-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 217, 255, 0.08);
  border: 1px solid rgba(0, 217, 255, 0.25);
  border-radius: 8px;
  color: var(--neon-2, #00d9ff);
  font-family: var(--font-mono);
  font-size: 1.2rem;
}
.pricing-mobile-note b {
  display: block;
  color: var(--text);
  font-size: 0.96rem;
  margin-bottom: 4px;
}
.pricing-mobile-note span {
  display: block;
  color: var(--text-dim);
  font-size: 0.86rem;
  line-height: 1.6;
}

/* ============================================================
   Trust signals row
   ============================================================ */
.pricing-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 30px 0 20px;
}
.pt-item {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  align-items: flex-start;
}
.pt-icon {
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
}
.pt-item b {
  display: block;
  font-size: 0.92rem;
  color: var(--text, #e6edf3);
  margin-bottom: 4px;
}
.pt-item span {
  font-size: 0.82rem;
  color: var(--text-dim, #c0cad8);
  line-height: 1.5;
}
@media (max-width: 900px) {
  .pricing-trust { grid-template-columns: 1fr; }
}

/* ============================================================
   CHECKOUT PAGE
   ============================================================ */
.checkout-wrap {
  max-width: 920px;
  margin: 40px auto;
  padding: 0 24px;
}
.checkout-head { text-align: center; margin-bottom: 40px; }
.checkout-head h1 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); margin-bottom: 10px; }
.checkout-head p { color: var(--text-dim); }
.checkout-tier-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}
.checkout-tier-badge.tier-VIP     { background: rgba(0, 255, 159, 0.12); color: var(--neon); border: 1px solid rgba(0, 255, 159, 0.3); }
.checkout-tier-badge.tier-DIAMOND { background: rgba(0, 217, 255, 0.12); color: #00d9ff; border: 1px solid rgba(0, 217, 255, 0.3); }
.checkout-tier-badge.tier-INNER   { background: rgba(212, 175, 55, 0.12); color: var(--gold); border: 1px solid rgba(212, 175, 55, 0.3); }

.checkout-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 24px;
  margin-bottom: 20px;
}
.checkout-panel h3 { margin: 0 0 6px; font-size: 1.2rem; }
.checkout-panel p.desc { color: var(--text-dim); margin-bottom: 16px; font-size: 0.94rem; }
.checkout-field {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 14px;
}
.checkout-field label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  text-transform: uppercase;
}
.checkout-field input, .checkout-field select, .checkout-field textarea {
  padding: 12px;
  background: var(--bg-3);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.94rem;
}
.checkout-field textarea { min-height: 80px; resize: vertical; }

.vps-link-box {
  background: rgba(0, 255, 159, 0.05);
  border: 1px solid rgba(0, 255, 159, 0.22);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.vps-link-box b { color: var(--neon); display: block; margin-bottom: 4px; }
.vps-link-box p { color: var(--text-dim); margin: 4px 0 10px; font-size: .9rem; }
.vps-link-box code {
  padding: 2px 8px;
  background: rgba(212, 175, 55, 0.12);
  color: var(--gold);
  border-radius: 4px;
  font-family: var(--font-mono);
}

.vietqr-box {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  align-items: start;
  background: rgba(0, 255, 159, 0.04);
  border: 1px solid rgba(0, 255, 159, 0.2);
  border-radius: 10px;
  padding: 20px;
}
.vietqr-box img { width: 100%; border-radius: 8px; background: #fff; padding: 6px; }
.vietqr-info b { color: var(--text); display: block; margin-bottom: 4px; }
.vietqr-info .row {
  display: flex; justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 0.92rem;
}
.vietqr-info .row span { color: var(--text-mute); }
.vietqr-info .row code {
  font-family: var(--font-mono);
  color: var(--neon);
  font-size: 0.95rem;
  user-select: all;
}
.vietqr-info .row code.copyable { cursor: pointer; }
.vietqr-info .row code.copyable:hover { text-decoration: underline; }
.vietqr-warning {
  margin-top: 12px;
  padding: 10px 12px;
  font-size: 0.85rem;
  color: var(--amber);
  background: rgba(255, 184, 77, 0.08);
  border-left: 3px solid var(--amber);
  border-radius: 4px;
  line-height: 1.55;
}
.checkout-status {
  margin-top: 16px;
  padding: 14px;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 0.9rem;
}
.checkout-status--pending { background: rgba(255, 184, 77, 0.08); color: var(--amber); border: 1px solid rgba(255, 184, 77, 0.3); }
.checkout-status--ok      { background: rgba(0, 255, 159, 0.08); color: var(--neon);  border: 1px solid rgba(0, 255, 159, 0.3); }
.checkout-status--err     { background: rgba(255, 85, 119, 0.08); color: var(--red);   border: 1px solid rgba(255, 85, 119, 0.3); }

@media (max-width: 720px) {
  .vietqr-box { grid-template-columns: 1fr; }
}

/* ============================================================
   TikTok Video Series (#video-series)
   ============================================================ */
.vs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
  justify-items: center;
}
.vs-card {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  padding: 12px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.vs-card:hover { border-color: var(--border-2); transform: translateY(-2px); }
.vs-card .tiktok-embed {
  margin: 0 auto !important;
  width: 100%;
  min-width: 0 !important;
  max-width: 100% !important;
}
.vs-handle {
  color: var(--neon-2);
  text-decoration: none;
  font-weight: 600;
}
.vs-handle:hover { text-decoration: underline; color: var(--neon); }
.vs-cta { text-align: center; margin-top: 36px; }

@media (max-width: 900px) {
  .vs-grid { grid-template-columns: 1fr; gap: 16px; }
}