:root {
    --green: #00A651;
    --green-dark: #00623a;
    --orange: #FF8C42;
    --orange-dark: #c9530f;
    --yellow: #FFD54F;
    --ink: #1a1a1a;
    --bg: #f5f7f6;
    --card: #ffffff;
  }
  * { margin:0; padding:0; box-sizing:border-box; font-family:'Be Vietnam Pro',-apple-system,"Helvetica Neue",Arial,sans-serif; }
  body {
    background:linear-gradient(180deg, #FFFDF6 0%, #F3FBF7 45%, #EFFAF4 100%);
    color:var(--ink); min-height:100vh; position:relative; overflow-x:hidden;
  }
  body::before, body::after {
    content:''; position:fixed; border-radius:50%; filter:blur(60px); pointer-events:none; z-index:0;
  }
  body::before { width:340px; height:340px; top:-80px; right:-80px; background:rgba(255,213,79,0.35); }
  body::after { width:420px; height:420px; bottom:-120px; left:-120px; background:rgba(0,166,81,0.12); }
  header, .hero, main, footer, section, #home-view, #lesson-view, #bonus-view, #translate-view { position:relative; z-index:1; }

  header {
    background:linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
    color:white; padding:16px 32px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
    box-shadow:0 6px 24px rgba(0,98,58,0.25); position:sticky; top:0; z-index:100;
    border-radius:0 0 22px 22px;
  }
  .brand { display:flex; align-items:center; gap:14px; }
  .brand .logo { width:48px; height:48px; border-radius:50%; background:white; display:flex; align-items:center; justify-content:center; font-weight:900; color:var(--green); font-size:20px; flex-shrink:0; }
  .brand h1 { font-size:22px; font-weight:900; }
  .brand span { font-size:13px; opacity:0.85; display:block; }
  .nav-menu { display:flex; gap:6px; }
  .nav-menu button {
    background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.3); color:white; font-weight:700; font-size:13px;
    padding:8px 16px 8px 8px; border-radius:20px; cursor:pointer; transition:background .15s ease; white-space:nowrap;
    display:flex; align-items:center; gap:7px;
  }
  .nav-menu button img { width:22px; height:22px; border-radius:50%; object-fit:cover; flex-shrink:0; }
  .nav-menu button:hover { background:rgba(255,255,255,0.28); }
  @media (max-width:760px) {
    header { padding:14px 18px; justify-content:center; }
    .nav-menu { width:100%; justify-content:flex-start; overflow-x:auto; padding-bottom:2px; -webkit-overflow-scrolling:touch; }
    .nav-menu button { flex-shrink:0; }
  }

  .hero {
    background:linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%);
    color:white; padding:64px 32px 72px; position:relative; overflow:hidden; border-radius:0 0 40px 40px;
  }
  .hero::before {
    content:''; position:absolute; width:260px; height:260px; border-radius:50%;
    background:rgba(255,255,255,0.12); top:-100px; left:-60px;
  }
  .hero::after {
    content:''; position:absolute; width:180px; height:180px; border-radius:50%;
    background:rgba(255,213,79,0.25); bottom:-70px; right:8%; filter:blur(2px);
  }
  .hero-inner { max-width:1100px; margin:0 auto; display:flex; align-items:center; gap:48px; position:relative; z-index:1; }
  .hero-text { flex:1; min-width:280px; text-align:left; }
  .hero h2 { font-size:38px; font-weight:900; margin-bottom:14px; line-height:1.25; }
  .hero p { font-size:18px; opacity:0.95; max-width:640px; line-height:1.6; }
  .hero-photo { flex-shrink:0; position:relative; animation:heroFloat 5s ease-in-out infinite; }
  .hero-photo::before {
    content:''; position:absolute; inset:-14px; border-radius:28px; border:3px dashed rgba(255,255,255,0.5);
  }
  .hero-photo img {
    width:280px; height:280px; object-fit:cover; border-radius:28px; box-shadow:0 20px 44px rgba(0,0,0,0.28);
    border:4px solid rgba(255,255,255,0.5); position:relative;
  }
  .hero-photo .hero-badge {
    position:absolute; bottom:-14px; left:50%; transform:translateX(-50%);
    background:linear-gradient(135deg,#fff,#fff8ec); color:var(--green-dark);
    font-size:12px; font-weight:900; padding:9px 18px; border-radius:20px; box-shadow:0 8px 18px rgba(0,0,0,0.22); white-space:nowrap;
  }
  @keyframes heroFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
  @media (max-width:760px) {
    .hero { border-radius:0 0 28px 28px; }
    .hero-inner { flex-direction:column; text-align:center; gap:28px; }
    .hero-text { text-align:center; }
    .hero p { margin:0 auto; }
    .hero-photo img { width:220px; height:220px; }
  }

  .community-banner {
    max-width:1040px; margin:-32px auto 0; padding:28px 32px; display:flex; align-items:center; gap:28px;
    background:var(--card); border-radius:24px; box-shadow:0 16px 40px rgba(0,0,0,0.1); position:relative; z-index:2;
  }
  .community-banner img { width:220px; height:150px; object-fit:cover; border-radius:18px; box-shadow:0 8px 24px rgba(0,0,0,0.1); flex-shrink:0; }
  .community-banner p { font-size:15px; color:#555; line-height:1.7; }
  .community-banner strong { color:var(--green-dark); }
  @media (max-width:760px) {
    .community-banner { flex-direction:column; text-align:center; margin:-24px 16px 0; padding:24px; }
  }

  .bonus-promo {
    max-width:1100px; margin:32px auto 0; padding:24px 28px; border-radius:20px; cursor:pointer;
    background:linear-gradient(120deg, var(--orange), var(--orange-dark)); color:#fff;
    display:flex; align-items:center; gap:20px; box-shadow:0 10px 30px rgba(255,140,66,0.35);
    transition:transform .15s ease;
  }
  .bonus-promo:hover { transform:translateY(-2px); }
  .bonus-promo-badge {
    flex-shrink:0; background:rgba(255,255,255,0.25); font-weight:900; font-size:13px;
    padding:8px 14px; border-radius:30px; letter-spacing:0.5px;
  }
  .bonus-promo-text { flex:1; }
  .bonus-promo-text h3 { font-size:19px; margin:0 0 4px; }
  .bonus-promo-text p { font-size:14px; margin:0; opacity:0.95; line-height:1.5; }
  .bonus-promo-btn {
    flex-shrink:0; background:#fff; color:var(--orange-dark); border:none; font-weight:800;
    padding:12px 20px; border-radius:30px; cursor:pointer; font-size:14px;
  }
  @media (max-width:760px) {
    .bonus-promo { flex-direction:column; text-align:center; margin:24px 16px 0; }
  }

  .bonus-sub { color:#666; font-size:15px; margin:-12px 0 28px; }
  .bonus-cat-section { margin-bottom:36px; }
  .bonus-cat-title {
    font-size:18px; font-weight:900; color:var(--orange-dark); margin-bottom:14px;
    padding-bottom:8px; border-bottom:2px solid #ffe4cc;
  }

  .translate-promo { background:linear-gradient(120deg, #2E9CCA, #1a5f7a); box-shadow:0 10px 30px rgba(46,156,202,0.35); }
  .translate-promo .bonus-promo-btn { color:#1a5f7a; }
  .translate-tabs { display:flex; gap:10px; margin-bottom:24px; flex-wrap:wrap; }
  .translate-tab {
    background:var(--card); border:2px solid #2E9CCA; color:#1a5f7a; font-weight:800; font-size:14px;
    padding:10px 20px; border-radius:24px; cursor:pointer;
  }
  .translate-tab.active { background:linear-gradient(135deg, #2E9CCA, #1a5f7a); color:white; }
  .translate-cat-section { margin-bottom:32px; }
  .translate-cat-title {
    font-size:17px; font-weight:900; color:#1a5f7a; margin-bottom:12px;
    padding-bottom:8px; border-bottom:2px solid #cfe9f5;
  }
  .translate-block { background:var(--card); border-radius:14px; padding:18px 22px; margin-bottom:14px; box-shadow:0 3px 10px rgba(0,0,0,0.05); }
  .translate-item { font-size:14px; margin-bottom:14px; line-height:1.6; }
  .translate-input {
    width:100%; margin-top:6px; padding:9px 12px; border:2px solid #dceefa; border-radius:10px;
    font-size:14px; font-family:inherit; box-sizing:border-box; color:var(--ink);
  }
  .translate-input:focus { outline:none; border-color:#2E9CCA; }
  .translate-item .t-num { font-weight:800; margin-right:4px; color:#1a5f7a; }
  .translate-answer { display:none; background:#eaf6fb; border:2px solid #2E9CCA; border-radius:10px; padding:12px 16px; font-size:14px; margin-top:10px; line-height:1.8; }
  .translate-answer.shown { display:block; }
  .translate-reveal-btn {
    background:linear-gradient(135deg, #2E9CCA, #1a5f7a); color:white; font-weight:800; font-size:13px;
    padding:9px 22px; border:none; border-radius:20px; cursor:pointer; display:block; margin:6px auto 0;
  }

  main { max-width:1100px; margin:0 auto; padding:40px 24px 80px; }
  .section-title { font-size:24px; font-weight:900; margin-bottom:24px; color:var(--green-dark); }

  .method-section { max-width:1100px; margin:0 auto; padding:48px 24px 0; }
  .method-slogan {
    display:inline-block; background:linear-gradient(135deg, var(--green), var(--green-dark)); color:white;
    font-size:16px; font-weight:900; padding:10px 22px; border-radius:24px; margin-bottom:18px;
  }
  .method-intro { font-size:15px; color:#666; max-width:760px; margin-bottom:28px; line-height:1.7; }
  .method-steps { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:18px; }
  .method-step { background:var(--card); border-radius:20px; padding:22px 18px; box-shadow:0 6px 18px rgba(0,98,58,0.08); position:relative; transition:transform .15s ease, box-shadow .15s ease; }
  .method-step:hover { transform:translateY(-3px); box-shadow:0 12px 26px rgba(0,98,58,0.14); }
  .method-step .step-num {
    position:absolute; top:-10px; left:18px; width:26px; height:26px; border-radius:50%;
    background:linear-gradient(135deg, var(--green), var(--green-dark)); color:white; font-size:13px; font-weight:900;
    display:flex; align-items:center; justify-content:center;
  }
  .method-step .step-icon {
    width:64px; height:64px; border-radius:14px; overflow:hidden; margin-bottom:12px; margin-top:6px;
    box-shadow:0 4px 10px rgba(0,0,0,0.12);
  }
  .method-step .step-icon img { width:100%; height:100%; object-fit:cover; display:block; }
  .method-step h4 { font-size:15px; font-weight:900; color:var(--ink); margin-bottom:6px; }
  .method-step p { font-size:13px; color:#777; line-height:1.6; }
  .method-forgetting { margin-top:20px; background:linear-gradient(135deg, #FFF7E6, #FFEFC7); border:2px dashed var(--yellow);
    border-radius:14px; padding:16px 20px; font-size:14px; color:#8a6300; line-height:1.7; }
  .method-forgetting b { color:#6b4d00; }

  .painpoint-section { max-width:1100px; margin:0 auto; padding:48px 24px 0; }
  .painpoint-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; margin-bottom:20px; }
  .painpoint-item {
    background:#fff5f4; border:2px solid #ffd3ce; border-radius:18px; padding:16px 18px;
    font-size:14px; color:#a83a2e; line-height:1.6; display:flex; align-items:flex-start; gap:10px;
    box-shadow:0 4px 14px rgba(168,58,46,0.08);
  }
  .painpoint-item .pp-x { flex-shrink:0; font-size:16px; }
  .painpoint-bridge {
    background:linear-gradient(135deg, #E8F8EF, #D4F3E0); border:2px solid var(--green); border-radius:18px;
    padding:18px 22px; font-size:15px; color:var(--green-dark); font-weight:700; line-height:1.7;
    box-shadow:0 6px 18px rgba(0,166,81,0.12);
  }

  .roadmap-section { max-width:1100px; margin:0 auto; padding:48px 24px 0; }
  .roadmap-intro-row { display:flex; align-items:center; gap:32px; margin-bottom:32px; }
  .roadmap-intro-row img { width:180px; height:220px; object-fit:cover; border-radius:16px; box-shadow:0 10px 28px rgba(0,0,0,0.12); flex-shrink:0; }
  .roadmap-intro-row .method-intro { margin-bottom:0; }
  @media (max-width:760px) {
    .roadmap-intro-row { flex-direction:column; text-align:center; }
  }
  .roadmap-month {
    margin-bottom:26px; background:var(--card); border-radius:22px; padding:22px 26px;
    box-shadow:0 8px 22px rgba(0,98,58,0.08); border-left:5px solid var(--green); transition:box-shadow .15s ease;
  }
  .roadmap-month:hover { box-shadow:0 14px 30px rgba(0,98,58,0.14); }
  .roadmap-month-title { font-size:17px; font-weight:900; color:var(--green-dark); margin-bottom:16px; display:flex; align-items:center; gap:10px; }
  .roadmap-month-title .rm-month-num {
    width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg, var(--green), var(--green-dark));
    color:white; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0;
  }
  .roadmap-track { display:flex; flex-wrap:wrap; align-items:center; gap:8px 6px; }
  .roadmap-group { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:6px 8px 6px 0; margin:2px 0; border-right:1px dashed #e0e0e0; margin-right:6px; }
  .roadmap-group:last-child { border-right:none; }
  .roadmap-node {
    background:#fafcfb; border-radius:12px; padding:9px 14px; display:flex; align-items:center; gap:7px;
    font-size:13px; font-weight:700; color:var(--ink); box-shadow:0 2px 6px rgba(0,0,0,0.05); cursor:pointer;
    transition:transform .12s ease, box-shadow .12s ease; border:2px solid transparent;
  }
  .roadmap-node:hover { transform:translateY(-2px); border-color:var(--green); box-shadow:0 6px 14px rgba(0,166,81,0.18); }
  .roadmap-node .rn-emoji { font-size:16px; }
  .roadmap-review {
    background:linear-gradient(135deg, #FFF7E6, #FFEFC7); border:2px solid var(--yellow); color:#8a6300;
  }
  .roadmap-review:hover { transform:translateY(-2px); border-color:#e0ac00; box-shadow:0 6px 14px rgba(255,213,79,0.35); }
  .roadmap-arrow { color:#ccc; font-size:15px; flex-shrink:0; }
  @media (max-width:640px) {
    .roadmap-month { padding:18px 16px; }
    .roadmap-track { gap:6px; }
    .roadmap-node { padding:8px 12px; font-size:12px; }
    .roadmap-group { border-right:none; width:100%; }
  }

  .grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:24px; }
  .lesson-card {
    background:var(--card); border-radius:18px; overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,0.08);
    cursor:pointer; transition:transform .15s ease, box-shadow .15s ease; border:2px solid transparent;
  }
  .lesson-card:hover { transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,0.14); border-color:var(--orange); }
  .lesson-card .thumb {
    height:120px; display:flex; align-items:center; justify-content:center; font-size:48px;
    color:white; font-weight:900; background-size:cover; background-position:center;
  }
  .lesson-card .thumb.green { background:linear-gradient(135deg, var(--green), var(--green-dark)); }
  .lesson-card .thumb.orange { background:linear-gradient(135deg, var(--orange), var(--orange-dark)); }
  .lesson-card .thumb.blue { background:linear-gradient(135deg, #2E9CCA, #1a5f7a); }
  .lesson-card .thumb.cap3 { background:linear-gradient(135deg, #8E5CD9, #4B2E8C); }
  .level-section { margin-bottom:48px; }
  .level-heading { font-size:18px; font-weight:800; color:#666; margin-bottom:18px; padding-bottom:10px; border-bottom:2px solid #e5e5e5; }
  .lesson-card .body { padding:18px 20px; }
  .lesson-card .tag { display:inline-block; background:var(--yellow); color:#3a2a00; font-weight:800; font-size:12px; padding:5px 12px; border-radius:20px; margin-bottom:10px; }
  .lesson-card h3 { font-size:18px; font-weight:800; margin-bottom:6px; }
  .lesson-card p { font-size:14px; color:#666; }

  /* Lesson view */
  #lesson-view { display:none; }
  .lesson-header { display:flex; align-items:center; gap:14px; margin-bottom:20px; flex-wrap:wrap; }
  .back-btn { background:var(--card); border:2px solid var(--green); color:var(--green-dark); font-weight:800; padding:8px 18px; border-radius:30px; cursor:pointer; font-size:14px; }
  .back-btn:hover { background:var(--green); color:white; }

  .listen-all-btn {
    background:linear-gradient(135deg, var(--orange), var(--orange-dark)); color:white; font-weight:800;
    border:none; padding:10px 22px; border-radius:30px; cursor:pointer; font-size:14px; margin-left:auto;
  }
  .listen-all-btn:hover { transform:translateY(-1px); }

  .vocab-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:14px; }
  .vocab-row {
    background:var(--card); border-radius:14px; padding:18px 12px 16px; display:flex; flex-direction:column;
    align-items:center; text-align:center; gap:4px; position:relative;
    box-shadow:0 3px 12px rgba(0,0,0,0.06); transition:box-shadow .15s ease;
  }
  .vocab-row.playing { box-shadow:0 0 0 3px var(--green); background:#f0faf4; }
  .vocab-row .idx {
    position:absolute; top:8px; left:10px; font-size:11px; font-weight:800; color:#bbb;
  }
  .vocab-row .word-emoji {
    width:52px; height:52px; border-radius:12px; background:#f0f4f2; margin-top:6px;
    display:flex; align-items:center; justify-content:center; font-size:28px;
    background-size:cover; background-position:center;
  }
  .vocab-row .speak-btn {
    width:38px; height:38px; border-radius:50%; border:none; cursor:pointer; margin-top:2px;
    background:linear-gradient(135deg, var(--green), var(--green-dark)); color:white; font-size:16px;
    display:flex; align-items:center; justify-content:center; box-shadow:0 4px 10px rgba(0,166,81,0.3);
  }
  .vocab-row .speak-btn:hover { transform:scale(1.08); }
  .vocab-row .text-block { margin-top:6px; }
  .vocab-row .english { font-size:16px; font-weight:800; color:var(--ink); }
  .vocab-row .viet { font-size:13px; color:#777; margin-top:2px; }
  .vocab-row .ipa { font-size:12px; color:var(--green-dark); font-family:"Times New Roman",serif; margin-top:2px; }
  .vocab-phrase {
    margin-top:8px; padding-top:8px; border-top:1px dashed #e5e5e5; display:flex; align-items:center;
    justify-content:center; gap:6px; font-size:12px; font-style:italic; color:var(--orange-dark);
  }
  .phrase-speak-btn {
    flex-shrink:0; width:22px; height:22px; border-radius:50%; border:none; cursor:pointer; font-size:11px;
    background:linear-gradient(135deg, var(--orange), var(--orange-dark)); color:white; display:flex; align-items:center; justify-content:center;
  }

  .illustration-hero {
    height:180px; border-radius:20px; margin-bottom:28px; display:flex; align-items:center; justify-content:center;
    font-size:90px; box-shadow:0 8px 24px rgba(0,0,0,0.1); background-size:cover; background-position:center;
  }
  .section-block-title {
    font-size:20px; font-weight:900; color:var(--green-dark); margin:36px 0 16px; display:flex; align-items:center; gap:10px;
  }
  .section-block-title:first-of-type { margin-top:0; }

  .ipa-chart-box {
    background:linear-gradient(135deg, #f0faff, #e6f5ff); border:2px solid #bfe3fb; border-radius:20px;
    padding:24px 26px; margin-bottom:8px;
  }
  .ipa-chart-group { margin-bottom:22px; }
  .ipa-chart-group:last-child { margin-bottom:0; }
  .ipa-chart-group-title {
    font-size:14px; font-weight:900; color:#1a5f7a; margin-bottom:12px;
    text-transform:uppercase; letter-spacing:0.5px;
  }
  .ipa-chart-hint { font-size:13px; color:#777; margin:-4px 0 14px; font-style:italic; }
  .ipa-chart-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:12px; }
  .ipa-chart-cell {
    background:white; border-radius:12px; padding:14px 8px 10px; text-align:center; position:relative;
    box-shadow:0 2px 8px rgba(0,0,0,0.06); transition:transform .12s ease, box-shadow .12s ease;
  }
  .tongue-diagram { width:64px; height:48px; margin:0 auto 4px; display:block; }
  .ipa-chart-cell:hover { transform:translateY(-2px); box-shadow:0 6px 14px rgba(46,156,202,0.25); }
  .ipa-chart-speak-btn {
    position:absolute; top:-8px; right:-8px; width:24px; height:24px; border-radius:50%; border:none;
    cursor:pointer; font-size:11px; background:linear-gradient(135deg, #2E9CCA, #1a5f7a); color:white;
    display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,0.2);
  }
  .ipa-chart-speak-btn:hover { transform:scale(1.1); }
  .ipa-chart-symbol { font-size:18px; font-weight:900; color:#1a5f7a; font-family:"Times New Roman",serif; }
  .ipa-chart-word { font-size:11px; color:#777; margin-top:4px; }

  .qa-list { display:flex; flex-direction:column; gap:14px; }
  .qa-row { background:var(--card); border-radius:14px; padding:16px 20px; box-shadow:0 3px 10px rgba(0,0,0,0.05); }
  .qa-row .qa-en { font-weight:800; font-size:16px; display:flex; align-items:center; gap:10px; }
  .qa-row .qa-viet { font-size:14px; color:#777; margin-top:4px; margin-left:44px; }
  .qa-row .qa-answer { margin-top:10px; margin-left:44px; padding-top:10px; border-top:1px dashed #ddd; }
  .qa-row .qa-answer-en { font-size:14px; font-weight:700; color:var(--green-dark); display:flex; align-items:center; gap:8px; }
  .qa-row .qa-answer-viet { font-size:13px; color:#999; margin-top:2px; }
  .mini-speak-btn {
    flex-shrink:0; width:34px; height:34px; border-radius:50%; border:none; cursor:pointer; font-size:15px;
    background:linear-gradient(135deg, var(--orange), var(--orange-dark)); color:white;
  }

  .speech-box { background:linear-gradient(135deg, #fff 0%, #f0faf4 100%); border:2px solid var(--green); border-radius:16px; padding:24px 26px; }
  .speech-box .speech-en { font-size:16px; line-height:1.8; margin-bottom:14px; }
  .speech-box .speech-viet { font-size:14px; line-height:1.7; color:#777; border-top:1px dashed #ccc; padding-top:14px; }
  .speech-listen-btn {
    background:var(--green); color:white; border:none; padding:8px 20px; border-radius:24px; font-weight:800;
    font-size:13px; cursor:pointer; margin-bottom:14px;
  }

  .grammar-box { background:linear-gradient(135deg, #FFF7E6, #FFEFC7); border:2px solid var(--yellow); border-radius:16px; padding:24px 26px; }
  .grammar-box h4 { font-size:17px; font-weight:900; color:#8a6300; margin-bottom:10px; }
  .grammar-box .g-usage { font-size:14px; color:#5c4a00; margin-bottom:10px; }
  .grammar-box .g-formula { background:white; border-radius:10px; padding:10px 14px; font-weight:800; font-size:15px; margin-bottom:10px; display:inline-block; }
  .grammar-box .g-example { font-size:14px; font-style:italic; margin-top:8px; }
  .grammar-box .g-example-viet { font-size:13px; color:#777; margin-top:2px; }
  .grammar-box .g-form { background:white; border-radius:8px; padding:8px 12px; font-size:14px; margin-bottom:6px; }
  .grammar-box .g-form-label { font-weight:900; color:#8a6300; }
  .grammar-box .g-signal { font-size:13px; margin-top:8px; margin-bottom:4px; color:#5c4a00; }
  .grammar-box { margin-bottom:18px; }

  .exercise-card { background:var(--card); border-radius:14px; padding:20px 22px; margin-bottom:14px; box-shadow:0 3px 10px rgba(0,0,0,0.05); }
  .exercise-card .ex-q { font-weight:800; font-size:15px; margin-bottom:12px; }
  .exercise-card .ex-options { display:grid; gap:8px; }
  .ex-option { padding:10px 14px; border-radius:10px; border:2px solid #e5e5e5; cursor:pointer; font-size:14px; }
  .ex-option:hover { border-color:var(--green); }
  .ex-option.picked { border-color:var(--green); background:#f0faf4; font-weight:700; }
  .ex-option.right { border-color:var(--green); background:#d7f5e0; font-weight:800; }
  .ex-option.wrong { border-color:#e53935; background:#fdecea; }
  .check-exercises-btn {
    background:linear-gradient(135deg, var(--orange), var(--orange-dark)); color:white; font-weight:900; font-size:15px;
    padding:12px 32px; border:none; border-radius:30px; cursor:pointer; display:block; margin:8px auto 0;
  }
  .ex-result { text-align:center; font-weight:800; font-size:15px; margin-top:14px; color:var(--green-dark); }

  .practice-intro { font-size:14px; color:#777; margin-bottom:16px; font-style:italic; }
  .practice-block { background:var(--card); border-radius:14px; padding:20px 22px; margin-bottom:16px; box-shadow:0 3px 10px rgba(0,0,0,0.05); }
  .practice-block h5 { font-size:15px; font-weight:900; color:var(--green-dark); margin-bottom:10px; }
  .practice-bank { background:#f0faf4; border-radius:10px; padding:10px 14px; font-size:14px; margin-bottom:14px; display:inline-block; }
  .practice-bank b { color:var(--green-dark); }
  .practice-item { font-size:14px; margin-bottom:10px; line-height:1.6; }
  .practice-item .p-num { font-weight:800; margin-right:4px; }
  .reveal-btn {
    background:linear-gradient(135deg, var(--orange), var(--orange-dark)); color:white; font-weight:800; font-size:13px;
    padding:9px 22px; border:none; border-radius:20px; cursor:pointer; display:block; margin:10px auto 0;
  }
  .practice-answer { display:none; background:#fff7e6; border:2px solid var(--yellow); border-radius:10px; padding:12px 16px; font-size:14px; margin-top:10px; line-height:1.7; }
  .practice-answer.shown { display:block; }

  footer { text-align:center; padding:28px; color:#888; font-size:14px; }

  #back-to-top {
    position:fixed; bottom:24px; right:24px; width:48px; height:48px; border-radius:50%; border:none;
    background:linear-gradient(135deg, var(--green), var(--green-dark)); color:white; font-size:20px; cursor:pointer;
    box-shadow:0 6px 18px rgba(0,0,0,0.25); display:none; align-items:center; justify-content:center; z-index:90;
    transition:transform .15s ease, opacity .2s ease;
  }
  #back-to-top.show { display:flex; }
  #back-to-top:hover { transform:translateY(-3px); }
  @media (max-width:640px) {
    #back-to-top { bottom:16px; right:16px; width:42px; height:42px; font-size:18px; }
  }

  .trust-section { background:white; padding:56px 24px; margin:40px 20px 0; border-radius:32px; box-shadow:0 10px 34px rgba(0,0,0,0.06); }
  @media (max-width:640px) { .trust-section { margin:32px 12px 0; padding:40px 20px; border-radius:24px; } }
  .trust-inner { max-width:1100px; margin:0 auto; display:flex; gap:48px; align-items:center; flex-wrap:wrap; }
  .founder-photo-wrap { position:relative; flex-shrink:0; }
  .trust-inner .badge-circle {
    width:150px; height:150px; border-radius:50%; object-fit:cover; display:block;
    box-shadow:0 12px 30px rgba(0,166,81,0.35); border:5px solid white;
  }
  .founder-tesol-badge {
    position:absolute; bottom:-8px; right:-18px; width:68px; height:68px; border-radius:50%;
    object-fit:cover; border:3px solid white; box-shadow:0 6px 18px rgba(0,0,0,0.25);
  }
  .founder-role-tag {
    display:inline-block; background:#FFF3E0; color:var(--orange-dark); font-weight:800; font-size:12px;
    padding:5px 12px; border-radius:14px; margin-top:8px;
  }
  .trust-text { flex:1; min-width:280px; }
  .trust-text h3 { font-size:24px; font-weight:900; color:var(--green-dark); margin-bottom:12px; }
  .trust-text p { color:#555; line-height:1.7; font-size:15px; margin-bottom:8px; }
  .trust-text .founder-line { font-weight:800; color:var(--orange-dark); }
  .trust-stats { display:flex; gap:24px; flex-wrap:wrap; margin:16px 0; }
  .trust-stat { text-align:center; }
  .trust-stat b { display:block; font-size:20px; font-weight:900; color:var(--green-dark); }
  .trust-stat span { font-size:12px; color:#888; }
  .story-timeline-wrap { max-width:1100px; margin:36px auto 0; }
  .story-timeline { max-width:760px; margin:0 auto; position:relative; padding-left:76px; }
  .story-timeline::before {
    content:''; position:absolute; left:29px; top:6px; bottom:6px; width:3px;
    background:linear-gradient(180deg, var(--green), var(--orange)); border-radius:2px;
  }
  .story-step { position:relative; margin-bottom:30px; }
  .story-step:last-child { margin-bottom:0; }
  .story-dot {
    position:absolute; left:-76px; top:0; width:60px; height:60px; border-radius:50%;
    background:var(--card); border:3px solid var(--green); display:flex; align-items:center; justify-content:center;
    font-size:24px; box-shadow:0 4px 14px rgba(0,0,0,0.12); overflow:hidden; z-index:1; flex-shrink:0;
  }
  .story-dot img { width:100%; height:100%; object-fit:cover; }
  .story-title { font-size:16px; font-weight:900; color:var(--green-dark); margin-bottom:5px; }
  .story-step p { font-size:14px; color:#555; line-height:1.65; margin:0; }
  @media (max-width:640px) {
    .story-timeline { padding-left:60px; }
    .story-dot { left:-60px; width:46px; height:46px; font-size:18px; }
  }

  .cta-section {
    background:linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
    color:white; text-align:center; padding:56px 24px; margin:40px 20px 0; border-radius:32px;
    position:relative; overflow:hidden; box-shadow:0 16px 40px rgba(0,98,58,0.25);
  }
  .cta-section::before {
    content:''; position:absolute; width:220px; height:220px; border-radius:50%;
    background:rgba(255,255,255,0.08); top:-90px; right:-60px;
  }
  @media (max-width:640px) { .cta-section { margin:32px 12px 0; border-radius:24px; } }
  .cta-section h3 { font-size:28px; font-weight:900; margin-bottom:14px; position:relative; z-index:1; }
  .cta-section p { opacity:0.95; margin-bottom:28px; font-size:16px; position:relative; z-index:1; }
  .cta-buttons { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; position:relative; z-index:1; }
  .cta-btn {
    display:inline-flex; align-items:center; gap:10px; padding:16px 34px; border-radius:44px;
    font-weight:900; font-size:16px; text-decoration:none; transition:transform .15s ease;
  }
  .cta-btn:hover { transform:translateY(-2px); }
  .cta-btn.primary { background:var(--yellow); color:#3a2a00; box-shadow:0 8px 20px rgba(255,213,79,0.4); }
  .cta-btn.secondary { background:rgba(255,255,255,0.15); color:white; border:2px solid white; }

  .no-speech-warning {
    background:#fff3cd; color:#856404; padding:14px 20px; border-radius:12px; margin-bottom:18px; font-size:14px; display:none;
  }

  .done-badge {
    display:none; position:absolute; top:12px; right:12px; background:var(--green); color:white;
    font-size:11px; font-weight:800; padding:4px 10px; border-radius:20px; z-index:2;
  }
  .lesson-card { position:relative; }
  .lesson-card.done .done-badge { display:block; }
  .topic-num-badge {
    position:absolute; top:12px; left:12px; background:rgba(0,0,0,0.5); color:white;
    font-size:11px; font-weight:800; padding:4px 10px; border-radius:20px; z-index:2;
  }
  .topic-num-title {
    display:inline-block; background:var(--yellow); color:#3a2a00; font-weight:900; font-size:14px;
    padding:5px 14px; border-radius:20px; margin-right:10px; vertical-align:middle;
  }

  @media (max-width: 640px) {
    header { padding:16px 18px; }
    .brand h1 { font-size:18px; }
    .brand span { font-size:11px; }
    .brand .logo { width:40px; height:40px; font-size:16px; }
    .hero { padding:36px 18px; }
    .hero h2 { font-size:26px; }
    .hero p { font-size:15px; }
    main { padding:28px 16px 50px; }
    .grid { grid-template-columns:1fr; }
    .trust-inner { flex-direction:column; text-align:center; gap:20px; }
    .cta-buttons { flex-direction:column; align-items:stretch; }
    .cta-btn { justify-content:center; }
    .lesson-header { flex-direction:column; align-items:flex-start; }
    .listen-all-btn { margin-left:0; width:100%; justify-content:center; }
    .vocab-list { grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:10px; }
    .vocab-row { padding:14px 8px 12px; }
    .vocab-row .speak-btn { width:36px; height:36px; font-size:15px; }
    .vocab-row .english { font-size:15px; }
  }

  /* ---- Trang bìa ---- */
  .hero { min-height:calc(100vh - 96px); display:flex; align-items:center; }
  .hero-inner { width:100%; }
  @media (min-width:761px) { .hero h2 { font-size:46px; } }
  .cover-cta { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
  .cover-btn {
    display:inline-flex; align-items:center; gap:8px; padding:14px 26px; border-radius:40px; font-weight:900;
    font-size:15px; text-decoration:none; border:none; cursor:pointer; transition:transform .15s ease;
  }
  .cover-btn:hover { transform:translateY(-2px); }
  .cover-btn.primary { background:var(--yellow); color:#3a2a00; box-shadow:0 8px 20px rgba(255,213,79,0.45); }
  .cover-btn.ghost { background:rgba(255,255,255,0.18); color:#fff; border:2px solid #fff; }
  .cover-btn.zalo { background:#fff; color:var(--orange-dark); }
  .cover-chips { display:flex; gap:8px; flex-wrap:wrap; margin-top:20px; }
  .cover-chips span { background:rgba(255,255,255,0.2); border-radius:20px; padding:6px 14px; font-size:13px; font-weight:700; }
  .lock-teaser {
    max-width:1040px; margin:28px auto 0; padding:20px 26px; border-radius:20px; background:#fff;
    border:2px dashed var(--orange); color:#5c3a10; font-size:15px; line-height:1.7; text-align:center;
    box-shadow:0 8px 24px rgba(0,0,0,0.06);
  }
  @media (max-width:760px) {
    .hero { min-height:auto; }
    .cover-cta, .cover-chips { justify-content:center; }
    .lock-teaser { margin:24px 16px 0; }
  }

  /* ---- Đăng ký, video before/after, phản hồi ---- */
  .cover-btn.solid { background:var(--green); color:#fff; box-shadow:0 8px 20px rgba(0,166,81,0.3); }
  .cover-btn.register { background:var(--green-dark); color:#fff; border:2px solid #fff; box-shadow:0 8px 20px rgba(0,0,0,0.25); }
  .proof-section { max-width:1040px; margin:36px auto 0; padding:0 16px; display:none; }
  .proof-title { font-size:24px; font-weight:900; color:var(--green-dark); text-align:center; margin-bottom:18px; }
  .proof-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; align-items:start; }
  .proof-card { background:var(--card); border-radius:18px; overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,0.08); }
  .proof-cap { padding:12px 16px 16px; display:flex; flex-direction:column; gap:4px; font-size:14px; color:#444; }
  .proof-cap b { color:var(--ink); font-size:16px; }
  .proof-cta { text-align:center; margin-top:20px; }
  .video-box { position:relative; aspect-ratio:16/9; background:#12372a; }
  .video-box.portrait { aspect-ratio:9/16; width:100%; max-width:300px; margin:0 auto; }
  .video-box iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
  .video-play {
    position:absolute; inset:0; width:100%; border:0; cursor:pointer; color:#fff; font:inherit; font-weight:800;
    background:linear-gradient(135deg,#00623a,#00A651); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  }
  .video-play span { width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,0.95); color:var(--green-dark); font-size:26px; display:flex; align-items:center; justify-content:center; padding-left:4px; }
  .fb-img { display:block; width:100%; border:0; padding:0; background:none; cursor:zoom-in; }
  .fb-img img { width:100%; display:block; }
  #lightbox { position:fixed; inset:0; background:rgba(0,0,0,0.88); z-index:300; display:none; align-items:center; justify-content:center; padding:16px; cursor:zoom-out; }
  #lightbox.open { display:flex; }
  #lightbox img { max-width:100%; max-height:100%; border-radius:8px; }

  .register-section { max-width:720px; margin:40px auto 0; padding:32px 24px; text-align:center; background:#fff; border-radius:24px; box-shadow:0 8px 28px rgba(0,0,0,0.08); }
  .register-section h3 { font-size:26px; font-weight:900; color:var(--green-dark); margin-bottom:10px; }
  .register-section p { color:#444; margin-bottom:20px; line-height:1.6; }
  @media (max-width:760px) { .register-section { margin:32px 16px 0; } }

  #register-modal { position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:250; display:none; align-items:center; justify-content:center; padding:16px; }
  #register-modal.open { display:flex; }
  .reg-box { background:#fff; border-radius:22px; padding:28px 24px; width:100%; max-width:420px; position:relative; max-height:92vh; overflow:auto; }
  .reg-box h3 { font-size:22px; font-weight:900; color:var(--green-dark); margin-bottom:6px; }
  .reg-box p.sub { color:#555; font-size:14px; margin-bottom:16px; line-height:1.5; }
  .reg-close { position:absolute; top:10px; right:12px; border:0; background:none; font-size:28px; cursor:pointer; color:#666; line-height:1; }
  .reg-box label { display:block; font-weight:700; font-size:14px; margin:12px 0 6px; }
  .reg-box input, .reg-box textarea { width:100%; padding:12px 14px; border:2px solid #dfe5e2; border-radius:12px; font:inherit; font-size:16px; }
  .reg-box input:focus, .reg-box textarea:focus { outline:none; border-color:var(--green); }
  .reg-error { color:#c62828; font-size:14px; min-height:20px; margin-top:8px; }
  .reg-box .cover-btn { width:100%; justify-content:center; margin-top:8px; }
  #reg-done { text-align:center; }