:root{
  --bg:#0c0f14; --panel:#131923; --card:#171f2b; --muted:#9fb0c5; --text:#eaf2ff;
  --primary:#00b87a; /* brand */
  --accent:#00b87a;  /* align accent to brand for buttons */
  --ok:#80ed99; --warn:#ffd166; --danger:#ef476f;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:linear-gradient(180deg,#0b0f14 0%, #0f1520 50%, #101621 100%);
  color:var(--text);
  line-height:1.6;
}
.bg-decor{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.blob{position:absolute;width:36vw;height:36vw;max-width:520px;max-height:520px;border-radius:50%;filter:blur(60px);opacity:.35;animation:float 18s ease-in-out infinite}
.blob.b1{background:radial-gradient(closest-side, #4cc9f0, transparent 70%);top:-10%;left:-6%;animation-delay:0s}
.blob.b2{background:radial-gradient(closest-side, #f72585, transparent 70%);bottom:-12%;right:-8%;animation-delay:3s}
.blob.b3{background:radial-gradient(closest-side, #80ed99, transparent 70%);top:30%;right:10%;animation-delay:6s}
@keyframes float{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-12px,0) scale(1.05)}}
.container{width:min(1120px,92%);margin:0 auto}
.grid-2{display:grid;grid-template-columns:1fr;gap:24px}

.site-header{position:sticky;top:0;z-index:10;background:rgba(10,14,20,.7);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid rgba(255,255,255,.06)}
.brand{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo{font-weight:800;letter-spacing:.3px;color:#fff}
.logo-img{height:32px;width:auto;display:block}
.countdown-wrap{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:.95rem}
.deadline{color:var(--warn)}
.deadline-progress{height:3px;background:rgba(255,255,255,.06)}
.deadline-progress__bar{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--primary));transition:width .6s ease}

.hero{position:relative;padding:64px 0 40px}
.hero h1{font-size:2rem;line-height:1.25;margin:0 0 12px}
.hero h2{font-size:1.35rem;line-height:1.35;margin:12px 0 8px;color:#e9f4ff}
.hero h3{font-size:1.1rem;line-height:1.35;margin:8px 0 6px;color:#cfe1ff}
.lead{color:#cfe1ff}
.divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);margin:12px 0}
/* Content emphasis */
.mark{background:linear-gradient(180deg,rgba(124,196,255,.18),rgba(124,196,255,.08));border-radius:4px;padding:0 .2em}
.mark-warn{background:linear-gradient(180deg,rgba(255,209,102,.25),rgba(255,209,102,.12));border-radius:4px;padding:0 .2em}
.underline-accent{background-image:linear-gradient(120deg, rgba(76,201,240,.0) 0%, rgba(76,201,240,.28) 100%);background-repeat:no-repeat;background-size:100% .26em;background-position:0 92%}
.txt-gold{background:linear-gradient(90deg,#f6d365,#fda085);-webkit-background-clip:text;background-clip:text;color:transparent}
.note-badge{display:inline-block;padding:.1em .45em;border:1px solid rgba(255,255,255,.18);border-radius:.65em;background:rgba(255,255,255,.06);color:#ffe8a3}
.hero-copy.card-glass{position:relative}
.divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);margin:12px 0}
.card-glass{background:rgba(23,31,43,.55);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:20px;backdrop-filter:blur(10px);box-shadow:0 10px 40px rgba(0,0,0,.25);animation:fadeInUp .6s ease both}
@keyframes fadeInUp{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
.cta-wrap{margin-top:18px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.cta-wrap .quick-note{margin-top:6px}
.subnote{margin:.85rem 0 0;color:var(--muted)}
/* tăng khoảng cách phía trên dòng Lưu ý để dễ thở hơn */
.limit{margin:.6rem 0 0;color:#ffb703}

.course-cover{margin:18px 0 0}
.course-cover img{width:100%;height:auto;border-radius:12px;border:1px solid rgba(255,255,255,.08);box-shadow:0 10px 28px rgba(0,0,0,.25)}

/* CTA below course cover */
.cta-after-cover{margin:16px 0 0; text-align:center}
.btn-giant{display:inline-flex;flex-direction:column;min-width:280px;padding:16px 22px;font-size:1.15rem;border-radius:14px}
.btn-giant .btn-line-1{font-size:1.25rem;line-height:1.2}
.btn-giant .btn-line-2{font-size:.98rem;opacity:.95}
.badge-free{display:inline-block;padding:.05em .45em;border:1px solid rgba(0,184,122,.65);border-radius:.6em;background:rgba(0,184,122,.12);color:#06261c}
.btn-accent .badge-free{color:#06261c}
.meta-line{margin:10px 0 0;color:#cfe1ff}
.meta-line .muted{color:#9fb0c5}
.new-students-count{color:#80ed99;text-shadow:0 0 8px rgba(128,237,153,.6), 0 0 18px rgba(128,237,153,.35)}

/* Capacity progress under CTA */
.capacity{margin:14px 0 10px}
.cap-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;color:#cfe1ff}
.cap-head.cap-inline{gap:10px}
.cap-head.cap-inline .cap-label{white-space:nowrap}
.cap-head.cap-inline .progress{flex:1;min-width:120px;height:10px}
.cap-head.cap-inline .cap-val{white-space:nowrap}
.cap-label{font-weight:700;letter-spacing:.2px}
.cap-val{color:#9fb0c5}
.progress{position:relative;height:12px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.progress__track{position:absolute;inset:0}
.progress__fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,#80ed99 0%, #ffd166 50%, #ef476f 100%);background-size:var(--track-w, 100%) 100%;background-repeat:no-repeat;box-shadow:0 0 18px rgba(255,255,255,.12) inset}
.progress__fill::after{content:"";position:absolute;top:-40%;width:60px;bottom:-40%;left:-80px;background:linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);opacity:.35;filter:blur(2px);transform:skewX(-20deg);animation:sweep 2.6s ease-in-out infinite}
@keyframes sweep{0%{left:-80px}100%{left:120%}}
.progress__fill{transition:width .6s ease}

/* Urgency colors */
.progress.progress--green .progress__fill{background:linear-gradient(90deg,#80ed99,#2b9348);box-shadow:0 0 18px rgba(128,237,153,.35) inset}
.progress.progress--yellow .progress__fill{background:linear-gradient(90deg,#ffd166,#f4a261);box-shadow:0 0 18px rgba(255,209,102,.35) inset}
.progress.progress--red .progress__fill{background:linear-gradient(90deg,#ef476f,#f94144);box-shadow:0 0 18px rgba(239,71,111,.35) inset}

/* +1 fly-up effect */
.inc-fly{position:absolute;transform:translateY(0);opacity:0;left:0;pointer-events:none}
@keyframes flyUp{0%{transform:translateY(6px);opacity:0}10%{opacity:1}80%{opacity:1}100%{transform:translateY(-18px);opacity:0}}

/* Trimmed unused section styles to keep page minimal */

.site-footer{border-top:1px solid rgba(255,255,255,.06);padding:16px 0;background:rgba(10,14,20,.6);backdrop-filter:blur(6px)}
.footer-grid{display:flex;align-items:center;justify-content:space-between;gap:18px}
.foot-note{color:var(--muted);margin:4px 0 0}
.deadline-inline{color:var(--warn);margin-top:6px}
.foot-trust{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:8px;color:#cfe1ff;opacity:.9}
.trust-item{display:inline-flex;gap:8px;align-items:center;color:#b8d3ff;text-decoration:none;border:1px solid rgba(255,255,255,.08);padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.04)}
.trust-item:hover{background:rgba(255,255,255,.06)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:10px;border:1px solid transparent;text-decoration:none;font-weight:700;letter-spacing:.2px}
.btn-primary{background:linear-gradient(135deg,var(--primary),#17d69a);color:#06261c;box-shadow:0 6px 22px rgba(0,184,122,.28)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-accent{background:linear-gradient(135deg,var(--accent),#12cf90);color:#06261c;box-shadow:0 6px 22px rgba(0,184,122,.28);border:none}
.btn-accent:hover{filter:brightness(1.06)}
.btn-shine{position:relative;overflow:hidden}
.btn-shine::after{content:"";position:absolute;top:-40%;left:-20%;width:40%;height:180%;transform:rotate(25deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);opacity:.45;filter:blur(2px);animation:shine 2.8s ease-in-out infinite}
@keyframes shine{0%{left:-40%}100%{left:130%}}
.btn.disabled, .btn[aria-disabled="true"]{
  opacity:.55;cursor:not-allowed;filter:none!important;box-shadow:none!important
}

.quick-note{margin-top:8px;color:var(--muted);display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.9rem}
.quick-note .g-icon{width:14px;height:14px}
.g-icon{width:18px;height:18px;display:inline-block;background:
  conic-gradient(from 0deg,
    #4285F4 0 90deg,
    #34A853 90deg 180deg,
    #FBBC05 180deg 270deg,
    #EA4335 270deg 360deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 40%, black 41%);
  mask: radial-gradient(circle at 50% 50%, transparent 40%, black 41%);
  border-radius:4px}

.badge{display:inline-block;background:#0e1622;border:1px solid rgba(255,255,255,.08);color:#b8d3ff;padding:8px 12px;border-radius:999px}
.badge-glow{box-shadow:0 0 0 rgba(76,201,240,.0), 0 0 0 rgba(247,37,133,.0);animation:glowPulse 2.6s ease-in-out infinite}
@keyframes glowPulse{0%,100%{box-shadow:0 0 0 rgba(76,201,240,.0),0 0 0 rgba(247,37,133,.0)}50%{box-shadow:0 0 18px rgba(76,201,240,.18),0 0 12px rgba(247,37,133,.12)}}
.live-readers{
  color:#ff5978; /* đỏ tươi nổi bật trên nền tối */
  text-shadow:
    0 0 6px rgba(239,71,111,.55),
    0 0 14px rgba(239,71,111,.35),
    0 0 24px rgba(239,71,111,.22);
  animation:redGlow 2.2s ease-in-out infinite
}
@keyframes redGlow{
  0%,100%{
    text-shadow:
      0 0 4px rgba(239,71,111,.45),
      0 0 10px rgba(239,71,111,.28),
      0 0 18px rgba(239,71,111,.16);
  }
  50%{
    text-shadow:
      0 0 8px rgba(239,71,111,.75),
      0 0 20px rgba(239,71,111,.55),
      0 0 36px rgba(239,71,111,.35);
  }
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.76}}
.live-counter.small{color:var(--muted);font-size:.95rem}

/* Utilities */
.ic-timer{filter:saturate(1.2)}
.ic-stop{margin-right:.4em;filter:saturate(1.2)}

/* FOMO toast */
.fomo-feed{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:10px;z-index:50;pointer-events:none}
.fomo-toast{pointer-events:auto;display:flex;align-items:center;gap:10px;min-width:240px;max-width:88vw;padding:10px 12px;border-radius:12px;background:rgba(13,18,26,.86);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08);box-shadow:0 10px 30px rgba(0,0,0,.25);color:#dff0ff;transform:translateY(8px);opacity:0;animation:toastIn .5s ease forwards;font-size:.92rem}
.fomo-toast .dot{width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 30% 30%, #80ed99, #2b9348)}
.fomo-toast .email{font-weight:700}
.fomo-toast .time{color:#9fb0c5;font-size:.9rem}
@keyframes toastIn{to{transform:translateY(0);opacity:1}}
@keyframes toastOut{to{transform:translateY(8px);opacity:0}}

@media (max-width: 520px){
  .fomo-feed{right:10px;left:10px;bottom:10px}
  .fomo-toast{min-width:auto;font-size:.88rem}
}

@media (max-width: 980px){
  .grid-2{grid-template-columns:1fr}
}

/* In-app browser help overlay */
#iab-help{position:fixed;inset:auto 16px 16px 16px;z-index:60;display:flex;justify-content:center;opacity:0;pointer-events:none;transform:translateY(8px);transition:all .25s ease}
#iab-help.show{opacity:1;pointer-events:auto;transform:translateY(0)}
#iab-help .iab-help__content{max-width:680px;width:100%;background:rgba(10,14,20,.9);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:14px;color:#dff0ff;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.iab-help__row{display:flex;gap:8px;margin-top:10px}
.iab-help__url{flex:1;background:#0e1622;border:1px solid rgba(255,255,255,.12);border-radius:8px;color:#b8d3ff;padding:8px 10px}
.iab-help__copy,.iab-help__close{background:linear-gradient(135deg,var(--primary),#12cf90);color:#06261c;border:none;border-radius:8px;padding:8px 12px;font-weight:700}