/* ============================================================================
 *  MODERN FULL LANDING PAGE DESIGN SYSTEM - TIN HỌC THPT KHMT
 *  Clean, Spacious Glassmorphic Aesthetic with Lucide Vector Icons & Mascot
 * ==========================================================================*/

:root {
  /* Color Palette */
  --bg: #f8fafc;
  --bg-subtle: #f1f5f9;
  --surface: #ffffff;
  --surface-card: #ffffff;
  --surface-glass: rgba(255, 255, 255, 0.85);

  --ink-main: #0f172a;
  --ink-muted: #475569;
  --ink-faint: #94a3b8;
  
  --line: #e2e8f0;
  --line-strong: #cbd5e1;

  /* Accent Colors */
  --brand: #6366f1;
  --brand-light: #818cf8;
  --brand-dark: #4338ca;
  --brand-soft: #eef2ff;
  
  /* Gaming Neon Gradients */
  --grad-hero: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
  --grad-cyan: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
  --grad-emerald: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --grad-amber: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
  --grad-card-glow: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(168, 85, 247, 0.15) 100%);
  
  --accent-teal: #0d9488;
  --accent-teal-soft: #ccfbf1;
  --accent-amber: #d97706;
  --accent-amber-soft: #fef3c7;
  --accent-rose: #e11d48;
  --accent-rose-soft: #ffe4e6;
  --accent-violet: #8b5cf6;
  --accent-violet-soft: #f3e8ff;
  --accent-blue: #3b82f6;
  --accent-blue-soft: #dbeafe;
  --accent-green: #10b981;
  --accent-green-soft: #dcfce7;

  --on-brand: #ffffff;

  /* Shadows & Glows */
  --shadow-xs: 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 12px 28px -6px rgba(99, 102, 241, 0.15), 0 4px 10px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 24px 48px -12px rgba(99, 102, 241, 0.25), 0 8px 16px -4px rgba(15, 23, 42, 0.06);
  --shadow-glow: 0 0 25px rgba(168, 85, 247, 0.35);

  /* Typography chuẩn Tiếng Việt */
  --font-sans: 'Lexend', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Quicksand', var(--font-sans);
  --font-mono: 'JetBrains Mono', monospace;

  /* Corner Radius */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-full: 9999px;
}

/* Dark Theme Overrides */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #090d16;
    --bg-subtle: #0f172a;
    --surface: #141c2e;
    --surface-card: #182238;
    --surface-glass: rgba(20, 28, 46, 0.85);

    --ink-main: #f8fafc;
    --ink-muted: #94a3b8;
    --ink-faint: #64748b;

    --line: #1e293b;
    --line-strong: #334155;

    --brand: #6366f1;
    --brand-light: #818cf8;
    --brand-dark: #4f46e5;
    --brand-soft: #1e1b4b;

    --accent-teal-soft: #134e4a;
    --accent-amber-soft: #451a03;
    --accent-rose-soft: #4c0519;
    --accent-violet-soft: #2e1065;
    --accent-blue-soft: #1e3a8a;
    --accent-green-soft: #14532d;

    --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 24px 50px rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  --bg: #090d16;
  --bg-subtle: #0f172a;
  --surface: #141c2e;
  --surface-card: #182238;
  --surface-glass: rgba(20, 28, 46, 0.85);

  --ink-main: #f8fafc;
  --ink-muted: #94a3b8;
  --ink-faint: #64748b;

  --line: #1e293b;
  --line-strong: #334155;

  --brand: #6366f1;
  --brand-light: #818cf8;
  --brand-dark: #4f46e5;
  --brand-soft: #1e1b4b;

  --accent-teal-soft: #134e4a;
  --accent-amber-soft: #451a03;
  --accent-rose-soft: #4c0519;
  --accent-violet-soft: #2e1065;
  --accent-blue-soft: #1e3a8a;
  --accent-green-soft: #14532d;

  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 24px 50px rgba(0, 0, 0, 0.6);
}

/* Global Reset & Core Styles */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body.lp {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink-main);
  font-family: var(--font-sans);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

p { margin: 0 0 1rem 0; }
p:last-child { margin-bottom: 0; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }

.wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 88px 0;
  position: relative;
}

@media (max-width: 768px) {
  .section { padding: 48px 0; }
}

@media (max-width: 480px) {
  .section { padding: 32px 0; }
  .sec-head { margin-bottom: 28px !important; }
}

/* Thuộc tính hidden phải thắng, kẻo mục đã tắt vẫn chiếm chỗ vì .section có padding. */
.section[hidden] { display: none; }

/* Eyebrows & Section Headers */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
  background: var(--brand-soft);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--brand) 20%, transparent);
}

.sec-head {
  max-width: 680px;
  margin: 0 0 44px;
}

.sec-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.sec-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin: 16px 0 14px;
  color: var(--ink-main);
}

.sec-sub {
  color: var(--ink-muted);
  font-size: clamp(16px, 1.8vw, 18px);
  line-height: 1.6;
}

/* Modern Buttons Gaming Gradient */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  padding: 14px 24px;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  white-space: nowrap;
  text-align: center;
}

/* nowrap giữ nhãn ngắn gọn trên một dòng, nhưng nhãn dài thì chính nó quyết định
   bề rộng TỐI THIỂU của nút: "So sánh nhanh với sách giáo khoa" cộng đệm là
   289px, nhét vào hàng nút rộng 214px của màn 320px là thò ra 75px. Mà body có
   overflow-x:hidden nên phần thò ra bị CẮT chứ không cuộn lại được — mất chữ
   chứ không phải chỉ xấu. Trên điện thoại cho xuống dòng: thêm một dòng còn hơn
   mất một khúc chữ. (Thẻ giá đã phải vá riêng đúng lỗi này, xem .price-card .btn) */
@media (max-width: 560px) {
  .btn { white-space: normal; max-width: 100%; }
}

.btn-primary {
  color: var(--on-brand);
  background: var(--grad-hero);
  box-shadow: 0 4px 20px rgba(168, 85, 247, 0.4);
  position: relative;
  overflow: hidden;
  border: 0;
  padding: 15.5px 25.5px; /* Bù đắp 1.5px viền bị bỏ đi để bằng kích thước btn-ghost */
}

.btn-primary::before {
  content: "";
  position: absolute;
  top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: 0.5s;
}

.btn-primary:hover::before {
  left: 100%;
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 30px rgba(168, 85, 247, 0.6);
}

.btn-ghost {
  background: var(--surface-card);
  color: var(--ink-main);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-xs);
}

.btn-ghost:hover {
  border-color: var(--brand);
  color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.2);
}

.btn-lg {
  padding: 18px 32px;
  font-size: 17px;
  border-radius: var(--radius-md);
}

.btn-sm {
  padding: 9px 16px;
  font-size: 13.5px;
  border-radius: 10px;
}

/* Header Navbar */
.lp-head {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(16px);
  background: var(--surface-glass);
  border-bottom: 1px solid var(--line);
}

.lp-head .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 68px;
}

/* Cụm phải: nút chuyển giao diện + CTA. Không bao giờ co lại hay xuống dòng. */
.head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  color: var(--ink-main);
  letter-spacing: -0.02em;
}

.brand-mark {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 10px;
  background: var(--grad-hero);
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.45);
}

.nav-links {
  display: none;
  gap: 22px;
  align-items: center;
  min-width: 0;
}

.nav-links a {
  font-weight: 650;
  font-size: 14.5px;
  white-space: nowrap;
  color: var(--ink-muted);
  transition: color 0.15s;
}

.nav-links a:hover {
  color: var(--brand);
}

/* Mục phụ: chỉ hiện khi màn hình đủ rộng, để thanh nav không bao giờ vỡ dòng. */
.nav-links .nav-opt { display: none; }

/* --- Nhãn nhóm trong lưới tính năng: 12 thẻ mà không chia nhóm thì người đọc
       phải tự đoán mạch. Nhãn chiếm trọn một hàng của lưới. --- */
.feat-group {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 10px 0 -6px;
}
.feat-group:first-child { margin-top: 0; }
.feat-group b {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.feat-group i { flex: 1; height: 1px; background: var(--line); }

/* --- Khối giá: giá gốc phải ĐỌC RA NGAY, không chìm thành chữ xám mờ --- */
.p-old {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0 2px;
  font-size: 15px;
  color: var(--ink-muted);
}
.p-old s { font-size: 19px; font-weight: 750; color: var(--ink-faint); text-decoration-thickness: 2px; }
.p-save {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 800;
  color: #fff;
  background: var(--accent-green);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* --- Bảng so sánh hai gói: đối chiếu theo TỪNG DÒNG, hai cột cùng thước đo --- */
.so-sanh-wrap { overflow-x: auto; margin-top: 34px; }
.so-sanh {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  min-width: 520px;
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.so-sanh th, .so-sanh td { padding: 13px 16px; border-bottom: 1px solid var(--line); text-align: left; }
.so-sanh thead th {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--bg-subtle);
}
.so-sanh th:nth-child(2), .so-sanh td:nth-child(2),
.so-sanh th:nth-child(3), .so-sanh td:nth-child(3) { text-align: center; white-space: nowrap; width: 25%; }
.so-sanh thead th:nth-child(3) { color: var(--brand); }
.so-sanh tbody tr:last-child td { border-bottom: 0; }
.so-sanh td:first-child { color: var(--ink-main); font-weight: 600; }
.ss-co { color: var(--accent-green); font-weight: 800; }
.ss-han { color: var(--ink-faint); }
.ss-khong { color: var(--ink-faint); font-weight: 700; }

/* Hero Section Gaming Visuals */
.hero {
  position: relative;
  padding: 64px 0 88px;
  overflow: hidden;
}

.hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hero-glow::before {
  content: "";
  position: absolute;
  top: -160px;
  right: -100px;
  width: 650px;
  height: 650px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.25) 0%, transparent 70%);
  filter: blur(90px);
}

.hero-glow::after {
  content: "";
  position: absolute;
  bottom: -120px;
  left: -120px;
  width: 550px;
  height: 550px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.2) 0%, transparent 70%);
  filter: blur(80px);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: var(--surface-card);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-xs);
}

.pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5.5vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin: 0 0 20px;
}

/* Chữ tô gradient — dùng ở tiêu đề hero VÀ tiêu đề từng mục (.sec-title). */
.hero h1 .hl,
.sec-title .hl {
  background: var(--grad-hero);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 10px rgba(168, 85, 247, 0.3));
}

.lead {
  font-size: clamp(16.5px, 2vw, 19px);
  color: var(--ink-muted);
  max-width: 540px;
  margin: 0 0 32px;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
}

.goals {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.goal-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 650;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  background: var(--surface-card);
  border: 1px solid var(--line);
}

.trust {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13.5px;
  color: var(--ink-muted);
  background: var(--surface-card);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  max-width: 520px;
}

/* Hero Stage & Mascot */
.hero-stage {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 420px;
}

.mascot-hero-wrap {
  position: relative;
  text-align: center;
  margin-bottom: -32px;
  z-index: 3;
}

/* Bong bóng NẰM HẲN TRÊN ĐẦU mascot, không nhoài lên đè vào chỗ khác.
   Trước đây là position:absolute; top:-42px — hợp với bộ ảnh cũ vì ảnh đó chừa
   sẵn khoảng trống phía trên đầu. Bộ ảnh mới vẽ sát mép: mái tóc chạm ngay cạnh
   trên của ảnh nên đè lên chữ trong bong bóng. Cho về dòng bình thường thì cao
   bao nhiêu dòng chữ cũng không bao giờ chồng lên nhau (điện thoại đã làm vậy
   từ trước, nay dùng chung một cách cho cả hai khổ màn). */
.mascot-speech-popup {
  display: table;              /* co đúng bằng chữ mà vẫn căn giữa được */
  margin: 0 auto 10px;
  background: var(--surface-card);
  border: 2px solid var(--brand);
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 750;
  color: var(--ink-main);
  /* Câu chào đo được ~385px hồi còn dùng Nunito 13px, mà .hero-stage trên màn
     320–375px chỉ rộng 272–328px và .hero có overflow:hidden — để nowrap là bị
     xén cụt cả hai đầu, đúng thứ học sinh nhìn thấy đầu tiên. Đổi sang Lexend
     không cứu được: Lexend rộng ngang hoặc hơn Nunito ở cùng cỡ chữ. */
  white-space: normal;
  max-width: min(300px, calc(100vw - 48px));
  text-align: center;
  box-shadow: 0 8px 20px rgba(168, 85, 247, 0.3);
  animation: bouncePopup 3s ease-in-out infinite;
}

.mascot-speech-popup::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: var(--surface-card);
  border-right: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
}

@keyframes bouncePopup {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.mascot-hero-img {
  width: 150px;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 12px 24px rgba(79, 70, 229, 0.22));
  animation: floatMascot 4s ease-in-out infinite;
}

@keyframes floatMascot {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

.game-card-preview {
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 24px 20px;
  position: relative;
  z-index: 2;
}

.game-hud-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.hud-user {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 750;
  font-size: 14.5px;
}

.hud-avatar {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--brand-soft);
  color: var(--brand);
  display: grid;
  place-items: center;
}

.hud-streak {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent-amber);
  background: var(--accent-amber-soft);
  padding: 5px 12px;
  border-radius: var(--radius-full);
}

/* Learning Path Nodes */
.quest-path {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.quest-node {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: transform 0.2s, border-color 0.2s;
}

.quest-node.active {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: var(--shadow-sm);
}

.quest-node.done {
  border-color: color-mix(in srgb, var(--accent-teal) 40%, var(--line));
  background: var(--accent-teal-soft);
}

.node-icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  flex-shrink: 0;
}

.quest-node.active .node-icon { background: var(--brand); }
.quest-node.done .node-icon { background: var(--accent-teal); }
.quest-node.locked .node-icon { background: var(--ink-faint); opacity: 0.5; }

.node-info { flex: 1; }
.node-title { font-weight: 750; font-size: 14.5px; margin-bottom: 2px; }
.node-sub { font-size: 12px; color: var(--ink-muted); }

/* Python Code Card */
.codecard {
  margin-top: 16px;
  background: #0b1020;
  color: #e2e8f0;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  border: 1px solid #1e293b;
}

.codecard pre {
  margin: 0;
  line-height: 1.6;
}

.codecard .k { color: #c084fc; }
.codecard .f { color: #60a5fa; }
.codecard .n { color: #fbbf24; }

.codecard .outrow {
  margin-top: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Stats Display Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 44px;
}

.stat-card {
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-xs);
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--accent);
}

.stat-val {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 6px;
}

.stat-lbl {
  font-size: 13.5px;
  color: var(--ink-muted);
  font-weight: 600;
}

/* Feature Grid (8 Features) */
.feat-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.feat-card {
  background: var(--surface-card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.feat-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: var(--c);
  opacity: 0.8;
}

.feat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px -10px color-mix(in srgb, var(--c) 30%, transparent), 0 0 20px color-mix(in srgb, var(--c) 15%, transparent);
  border-color: var(--c);
}

.feat-icon-badge {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 70%, #000));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--c) 35%, transparent);
  margin-bottom: 20px;
}

.feat-card h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  margin: 0 0 8px;
}

.feat-card p {
  color: var(--ink-muted);
  font-size: 14.5px;
  line-height: 1.6;
}

/* 3 Step Section Gaming Quest Design */
.steps-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.step-card {
  background: var(--surface-card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-xs);
}

.step-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand);
}

.step-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.step-num {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 75%, #000));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--c) 40%, transparent);
}

.step-title {
  font-family: var(--font-display);
  font-size: 18.5px;
  font-weight: 800;
}

.step-mascot-img {
  width: 110px;
  height: auto;
  align-self: center;
  margin: 10px 0 18px;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.08));
}

/* Curriculum Showcase Box */
.curr-inner {
  position: relative;
  overflow: hidden;
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 44px);
  box-shadow: var(--shadow-sm);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-subtle);
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 650;
}

.chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand);
  font-weight: 750;
  font-size: 15.5px;
  transition: gap 0.15s;
}

.link-arrow:hover { gap: 12px; }

.disclaimer {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px dashed var(--line);
  color: var(--ink-faint);
  font-size: 13px;
  max-width: 720px;
  /* Đoạn này bẻ dòng đúng luật vẫn ra một từ lẻ loi trên dòng cuối (ví dụ chỉ còn
     "nào." một mình) — không sai kỹ thuật nhưng nhìn như lỗi dàn trang. text-wrap:
     pretty được sinh ra đúng để tránh việc này; trình duyệt chưa hỗ trợ thì bỏ qua
     thuộc tính, quay về cách bẻ dòng bình thường như trước, không có gì tệ hơn. */
  text-wrap: pretty;
}

/* Pricing Section */
/* Pricing Section Gaming Edition */
.pricing-grid {
  display: grid;
  /* minmax(0,1fr) chứ KHÔNG phải 1fr: track "1fr" có mức tối thiểu ngầm là
     min-content, nên thẻ giá không co được dưới bề rộng nút CTA và đẩy cả trang
     rộng ra 388px. Màn 320px vì thế bị tràn 68px, mà body có overflow-x:hidden
     nên phần thừa bị CẮT MẤT chứ không cuộn lại được. */
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  max-width: 840px;
  margin: 0 auto;
}

/* Nút CTA trong thẻ giá phải xuống dòng được: nhãn dài ("Xem cách mua — nhận mã
   qua Zalo") mà giữ nowrap thì nó quyết định luôn bề rộng tối thiểu của cả thẻ. */
.price-card .btn { white-space: normal; }

.price-card {
  background: var(--surface-card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px 30px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.3s ease;
}

.price-card.featured {
  border-color: var(--brand);
  box-shadow: 0 16px 40px -10px rgba(168, 85, 247, 0.35);
  background: linear-gradient(180deg, var(--surface-card) 0%, color-mix(in srgb, var(--brand) 6%, var(--surface-card)) 100%);
}

.price-card.featured:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px -10px rgba(168, 85, 247, 0.45);
}

.price-badge {
  position: absolute;
  top: -14px;
  right: 28px;
  background: var(--grad-hero);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  font-family: var(--font-mono);
  padding: 6px 16px;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.4);
}

.p-amount {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 16px 0 8px;
  background: var(--grad-hero);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.p-amount span {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-muted);
}

.p-features {
  list-style: none;
  padding: 0;
  margin: 24px 0 32px;
  display: grid;
  gap: 14px;
}

.p-features li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
}

.p-features li .check-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--grad-hero);
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 2px;
  box-shadow: 0 3px 8px rgba(168, 85, 247, 0.3);
}

.guarantee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 28px auto 0;
  max-width: 840px;
  color: var(--ink-muted);
  font-size: 14.5px;
  background: var(--accent-teal-soft);
  border: 1px solid color-mix(in srgb, var(--accent-teal) 30%, transparent);
  border-radius: var(--radius-md);
  padding: 14px 20px;
}

.guarantee svg {
  flex-shrink: 0;
}

/* Testimonials Cards */
.tcards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.tcard {
  background: var(--surface-card);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  padding: 24px;
}

.tcard .quote {
  color: var(--ink-muted);
  font-size: 15px;
  margin: 14px 0 18px;
  font-style: italic;
  min-height: 54px;
}

.tcard .who {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tcard .ava {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--grad-hero);
  flex-shrink: 0;
}

.tcard .nm {
  font-size: 14px;
  color: var(--ink-muted);
  font-weight: 650;
}

.owner-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 24px;
  color: var(--accent-amber);
  font-size: 13.5px;
  background: var(--accent-amber-soft);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
}

/* Author Section */
.author-card {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
  background: var(--surface-card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 36px);
}

.author-photo-img {
  width: 132px;
  height: 132px;
  border-radius: 22px;
  object-fit: cover;
  object-position: top;
  flex-shrink: 0;
  background: var(--brand-soft);
}

.author-photo {
  width: 96px;
  height: 96px;
  border-radius: 20px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  gap: 4px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: center;
  background: var(--brand-soft);
  border: 1px dashed var(--line-strong);
}

.author-info {
  flex: 1;
  /* min(…, 100%) chứ không phải 240px cứng: trên màn 320px ruột thẻ chỉ còn
     224px, một mức tối thiểu lớn hơn thế là đẩy khối ra ngoài mép. */
  min-width: min(240px, 100%);
}

.author-info .nm {
  font-size: 20px;
  font-weight: 800;
  margin: 8px 0 8px;
  color: var(--ink-main);
}

/* FAQ Details */
.faq-list {
  max-width: 780px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

details.faq {
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.2s;
}

details.faq[open] {
  border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
}

details.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 22px;
  font-weight: 750;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

details.faq summary::-webkit-details-marker { display: none; }

details.faq summary .ic {
  flex-shrink: 0;
  color: var(--brand);
  transition: transform 0.2s ease;
}

details.faq[open] summary .ic {
  transform: rotate(45deg);
}

details.faq .faq-a {
  padding: 0 22px 22px;
  color: var(--ink-muted);
  font-size: 15px;
  line-height: 1.65;
}

/* Final CTA Section Gaming Glow Banner */
.final-cta {
  background: var(--grad-hero);
  border-radius: var(--radius-lg);
  padding: 68px 30px;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 50px -10px rgba(168, 85, 247, 0.45);
}

.final-cta::before {
  content: "";
  position: absolute;
  top: -50%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 60%);
  pointer-events: none;
}

.final-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 800;
  margin: 16px 0;
}

.final-mascot-img {
  width: 130px;
  height: auto;
  margin: 0 auto 10px;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.25));
}

/* Footer */
.foot {
  background: var(--bg-subtle);
  border-top: 1px solid var(--line);
  padding: 50px 0 60px;
}

.foot-top {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  margin-bottom: 28px;
}

.foot .tagline {
  color: var(--ink-muted);
  font-size: 14px;
  max-width: 320px;
  margin-top: 12px;
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
}

/* Link chân trang cao 23px — dưới nửa chuẩn ngón tay. */
.foot-links a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--ink-muted);
  font-size: 14px;
  font-weight: 550;
}

.foot-links a:hover {
  color: var(--brand);
}

.foot-note {
  color: var(--ink-faint);
  font-size: 13px;
  line-height: 1.65;
  border-top: 1px dashed var(--line);
  padding-top: 20px;
  max-width: 820px;
}

.copy {
  color: var(--ink-faint);
  font-size: 13px;
  margin-top: 14px;
}

/* Responsive Media Queries */
@media (min-width: 680px) {
  .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  .nav-links { display: flex; }
  .hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 60px; }
  .feat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1120px) {
  .nav-links { gap: 26px; }
  .nav-links .nav-opt { display: inline; }
}

/* ---------------- Header trên điện thoại nhỏ (≤ 430px) ----------------
   Thanh đầu trang gồm logo + chữ + nút Sáng/Tối + nút CTA. Ở khổ 375px tổng bề
   ngang ~440px nên ĐẨY CẢ TRANG trượt ngang — mà đây đúng là khổ máy của phần
   lớn khách vào từ Google. Thu đệm và cỡ nút cho vừa, không giấu thứ gì. */
@media (max-width: 520px) {
  .lp-head .wrap { padding-left: 14px; padding-right: 14px; gap: 10px; }
  .lp-head .brand { font-size: 15px; gap: 8px; }
  .lp-head .head-actions { gap: 6px; }
  .lp-head .head-actions .btn { padding: 7px 11px; font-size: 13px; min-height: 40px; }
}

/* Máy rất hẹp (≤ 390px): chỉ còn logo, bỏ chữ thương hiệu trên thanh đầu trang.
   Giữ cả chữ thì header rộng ~395px, tràn ở mọi máy 360–375px. Chữ vẫn nằm
   trong DOM nên trình đọc màn hình và Google vẫn thấy. */
@media (max-width: 390px) {
  .lp-head .brand { font-size: 0; gap: 0; }
  .lp-head .brand .brand-mark { font-size: 15px; }
  .lp-head .head-actions .btn { padding: 7px 10px; font-size: 12.5px; min-height: 40px; }
}

/* ---------------- Ba khối chiếm chỗ vô lối trên điện thoại (≤ 560px) ----------
   Trang này cao 15.700px trên khổ 375px — hơn 19 màn hình. Ba chỗ dưới đây vừa
   dài vừa khó đọc, sửa để ngắn lại mà không bỏ bớt thông tin nào. */
@media (max-width: 560px) {

  /* 1) BONG BÓNG LỜI CHÀO CỦA MASCOT nay đã nằm trong dòng ở quy tắc chung
        (xem .mascot-speech-popup), không còn nhoài lên đè vào thẻ phía trên nữa
        — ở đây chỉ nới thêm chút khoảng cách cho khổ hẹp. */
  .mascot-speech-popup { margin-bottom: 12px; }
  .mascot-hero-wrap { margin-bottom: -20px; }
  .mascot-hero-img { width: 128px; }

  /* 2) HÀNG CHIP CHỦ ĐỀ: chip rộng 133–167px trong khung 327px nên hai cái không
        bao giờ đứng chung một hàng — sáu chủ đề thành sáu dòng, cao 294px. Thu
        đệm và cỡ chữ cho hai chip vừa một hàng: cùng chừng ấy thông tin, còn
        non nửa chiều cao. */
  .chips { gap: 8px; margin: 16px 0; }
  .chip { padding: 6px 12px; font-size: 13px; gap: 6px; }
  .chip-dot { width: 7px; height: 7px; }

  /* 3) BẢNG SO SÁNH GÓI rộng cứng 520px nên phải cuộn ngang, mà cuộn sang là cột
        "Bạn được gì" trôi mất — còn lại hai con số không biết của dòng nào. Trên
        điện thoại xếp lại thành từng thẻ: tên quyền lợi một dòng, rồi Miễn phí và
        Premium nằm cạnh nhau bên dưới, mỗi ô tự mang nhãn của nó (lấy từ
        data-label trong landing.html). Hết cuộn ngang, và còn thấp hơn bảng cũ. */
  .so-sanh-wrap { overflow-x: visible; margin-top: 22px; }
  .so-sanh {
    display: block;
    min-width: 0;
    border: 0;
    background: none;
    font-size: 14px;
  }
  .so-sanh thead { display: none; }   /* tiêu đề cột đã thành nhãn trong từng ô */
  .so-sanh tbody { display: block; }
  .so-sanh tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px 12px;
    background: var(--surface-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 11px 13px;
    margin-bottom: 8px;
  }
  .so-sanh td { display: block; padding: 0; border: 0; line-height: 1.35; }
  .so-sanh td:first-child { grid-column: 1 / -1; line-height: 1.4; font-size: 13.5px; }
  /* Ghi đè luật của bản máy tính: căn giữa + nowrap + width 25% đều vô nghĩa
     khi ô đã thành một khối tự do trong lưới. */
  .so-sanh th:nth-child(2), .so-sanh td:nth-child(2),
  .so-sanh th:nth-child(3), .so-sanh td:nth-child(3) {
    text-align: left;
    white-space: normal;
    width: auto;
  }
  .so-sanh td[data-nhan]::before {
    content: attr(data-nhan);
    display: block;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 3px;
  }
  .so-sanh td:nth-child(3)[data-nhan]::before { color: var(--brand); }

  /* 4) BẢNG GIÁ: Thẻ giá trên điện thoại quá to, padding 30px làm hẹp không gian, chữ số 42px bị vỡ dòng. */
  .price-card { padding: 24px 20px; }
  .p-amount { font-size: 34px; margin: 12px 0 6px; }
  .p-amount span { font-size: 13.5px; }
  .price-badge { right: 14px; font-size: 11px; padding: 4px 12px; }
  .p-old { font-size: 14px; }
  .p-old s { font-size: 17px; }
  .p-save { font-size: 11px; padding: 2px 8px; }

  /* 5) 12 THẺ TÍNH NĂNG là khối cao nhất trang — 3.800px, gần một phần tư cả
        trang. Mỗi thẻ 240px mà hết 72px chỉ để xếp huy hiệu icon NẰM TRÊN tiêu
        đề. Trên màn hẹp cho icon về đứng CẠNH tiêu đề, đoạn mô tả xuống dưới ăn
        trọn bề ngang: chữ nghĩa không mất câu nào, thẻ còn khoảng 150px. */
  .feat-grid { gap: 12px; }
  .feat-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 7px;
    align-items: center;
    padding: 16px 16px 18px;
  }
  .feat-icon-badge {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    margin-bottom: 0;
    grid-column: 1;
    grid-row: 1;
  }
  .feat-icon-badge svg { width: 22px; height: 22px; }
  .feat-card h3 { font-size: 16.5px; margin: 0; grid-column: 2; grid-row: 1; }
  .feat-card p { grid-column: 1 / -1; margin: 0; font-size: 13.5px; line-height: 1.5; }
  .feat-group { margin: 8px 0 -4px; }
}

/* Chip ở khối Lộ trình nay là LIÊN KẾT (mở danh sách bài đã lọc theo chủ đề),
   nên phải bỏ gạch chân và có phản hồi khi rê chuột — nếu không, trông vẫn như
   chữ chết và không ai bấm. */
a.chip { text-decoration: none; transition: border-color .15s, color .15s, transform .1s; }
a.chip:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-1px); }
.curr-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 24px; }

/* Xem chú thích ở styles.css — landing có floatMascot và bouncePopup chạy vô hạn. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}