/* ═══ RICH BOOK CLUB · SRB BRAIN INDEX ═══ */
:root{
  --bg:#070B18;
  --surface:#0C1226;
  --raised:#121A33;
  --gold:#F2C14E;
  --gold-deep:#C8912A;
  --gold-soft:rgba(242,193,78,.14);
  --rim:rgba(242,193,78,.28);
  --ink:#F7F2E7;
  --body:#B7BECF;
  --subtle:#7A8299;
  --faint:#1E263F;
  --alert:#E2492B;
  --ok:#3FBF7F;
  --radius:10px;
  --wrap:1140px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--body);
  font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:17px;line-height:1.7;font-weight:400;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:#0A0A0A}

/* ---- layout ---- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
section{padding:76px 0;position:relative}
.sec-surface{background:var(--surface)}

/* ---- typography ---- */
h1,h2,h3,h4{color:var(--ink);font-weight:800;line-height:1.15;letter-spacing:-.02em}
h1{font-size:clamp(2rem,5.4vw,3.5rem)}
h2{font-size:clamp(1.6rem,3.6vw,2.4rem);margin-bottom:14px}
h3{font-size:1.18rem;font-weight:700;line-height:1.35;letter-spacing:-.01em}
p{margin-bottom:14px}
p:last-child{margin-bottom:0}
.lead{font-size:1.08rem;color:var(--body)}
.eyebrow{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin-bottom:16px;
}
.gold{color:var(--gold)}
.sec-head{max-width:720px;margin-bottom:44px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:inherit;font-size:1.02rem;font-weight:700;letter-spacing:.01em;
  padding:16px 30px;border-radius:var(--radius);border:1px solid transparent;
  cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  text-align:center;line-height:1.25;
}
.btn-primary{
  background:linear-gradient(180deg,#F8D06A 0%,var(--gold) 45%,var(--gold-deep) 100%);
  color:#160F00;box-shadow:0 6px 26px rgba(242,193,78,.22);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 34px rgba(242,193,78,.32)}
.btn-ghost{background:transparent;border-color:var(--rim);color:var(--ink)}
.btn-ghost:hover{background:var(--gold-soft)}
.btn-block{width:100%}
.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}

/* ---- nav ---- */
.nav{
  position:sticky;top:0;z-index:60;background:rgba(7,11,24,.86);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--faint);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:11px}
.brand-mark{
  width:34px;height:34px;border-radius:8px;flex:0 0 34px;
  background:linear-gradient(145deg,#F8D06A,var(--gold-deep));
  display:grid;place-items:center;color:#160F00;font-weight:800;font-size:.85rem;
}
.brand-name{font-weight:800;color:var(--ink);letter-spacing:.04em;font-size:.95rem;line-height:1.1}
.brand-sub{font-size:.68rem;color:var(--subtle);letter-spacing:.08em;text-transform:uppercase}
.nav .btn{padding:10px 20px;font-size:.9rem}
@media(max-width:600px){.nav .btn{padding:9px 16px;font-size:.82rem}.brand-sub{display:none}}

/* ---- hero ---- */
.hero{
  padding:64px 0 60px;
  background:
    radial-gradient(900px 520px at 12% -10%,rgba(242,193,78,.13),transparent 62%),
    radial-gradient(760px 460px at 92% 8%,rgba(58,86,180,.16),transparent 66%),
    var(--bg);
  border-bottom:1px solid var(--faint);
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:start}
.hero h1{margin-bottom:18px}
.hero-sub{font-size:1.1rem;max-width:30em}
.badge-live{
  display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:999px;
  border:1px solid var(--rim);background:var(--gold-soft);
  font-size:.74rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);
  margin-bottom:20px;
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--alert);animation:pulse 1.9s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.28}}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.chip{
  display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:8px;
  background:var(--raised);border:1px solid var(--faint);font-size:.88rem;color:var(--ink);font-weight:600;
}
.chip svg{flex:0 0 16px;opacity:.85}

/* ---- form ---- */
.form-card{
  background:var(--raised);border:1px solid var(--rim);border-radius:14px;
  padding:30px 26px;box-shadow:0 18px 60px rgba(0,0,0,.5);position:relative;
}
.form-card::before{
  content:"";position:absolute;inset:0 0 auto;height:3px;border-radius:14px 14px 0 0;
  background:linear-gradient(90deg,var(--gold-deep),#F8D06A,var(--gold-deep));
}
.form-card h3{font-size:1.42rem;font-weight:800;margin-bottom:8px}
.form-note{font-size:.88rem;color:var(--subtle);margin-bottom:22px;line-height:1.55}
.field{margin-bottom:14px}
.field label{display:block;font-size:.82rem;font-weight:600;color:var(--body);margin-bottom:7px}
.field input{
  width:100%;padding:14px 15px;font-family:inherit;font-size:1rem;color:var(--ink);
  background:#0A1024;border:1px solid #26304D;border-radius:8px;transition:border-color .16s,box-shadow .16s;
}
.field input::placeholder{color:#5C6480}
.field input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(242,193,78,.15)}
.field input.err{border-color:var(--alert)}
.err-msg{display:none;font-size:.79rem;color:#FF8B72;margin-top:6px}
.field.show-err .err-msg{display:block}
.form-legal{font-size:.76rem;color:var(--subtle);margin-top:14px;line-height:1.55;text-align:center}
.form-status{display:none;font-size:.88rem;margin-top:12px;padding:11px 14px;border-radius:8px}
.form-status.bad{display:block;background:rgba(226,73,43,.12);border:1px solid rgba(226,73,43,.4);color:#FFB2A0}
.spin{width:16px;height:16px;border:2px solid rgba(22,15,0,.3);border-top-color:#160F00;border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---- countdown strip ---- */
.strip{background:var(--surface);border-bottom:1px solid var(--faint);padding:26px 0}
.strip-in{display:flex;align-items:center;justify-content:center;gap:34px;flex-wrap:wrap;text-align:center}
.strip-label{font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;color:var(--subtle);font-weight:700}
.cd{display:flex;gap:12px}
.cd-unit{min-width:64px;background:var(--raised);border:1px solid var(--faint);border-radius:8px;padding:9px 6px}
.cd-num{font-size:1.6rem;font-weight:800;color:var(--gold);line-height:1;font-variant-numeric:tabular-nums}
.cd-lab{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--subtle);margin-top:5px}

/* ---- cards ---- */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{
  background:var(--raised);border:1px solid var(--faint);border-radius:var(--radius);
  padding:26px 24px;transition:border-color .2s ease,transform .2s ease;
}
.card:hover{border-color:var(--rim);transform:translateY(-3px)}
.card h3{margin-bottom:9px}
.card p{font-size:.96rem;color:var(--body)}
.icon-box{
  width:44px;height:44px;border-radius:9px;background:var(--gold-soft);border:1px solid var(--rim);
  display:grid;place-items:center;margin-bottom:16px;
}
.icon-box svg{width:21px;height:21px;stroke:var(--gold);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---- pain list ---- */
.pain{display:flex;gap:16px;padding:22px 0;border-bottom:1px solid var(--faint)}
.pain:last-child{border-bottom:0}
.pain-x{
  flex:0 0 26px;height:26px;border-radius:50%;background:rgba(226,73,43,.14);
  border:1px solid rgba(226,73,43,.35);display:grid;place-items:center;color:#FF8B72;
  font-size:.9rem;font-weight:700;margin-top:3px;
}
.pain h3{margin-bottom:5px}
.pain p{font-size:.97rem}

/* ---- journey ---- */
.journey{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.j-step{text-align:center;padding:24px 12px;background:var(--raised);border:1px solid var(--faint);border-radius:var(--radius)}
.j-name{font-size:.86rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:9px}
.j-step p{font-size:.88rem;line-height:1.55;color:var(--body)}

/* ---- club ---- */
.club{
  background:
    radial-gradient(700px 340px at 50% 0%,rgba(242,193,78,.1),transparent 68%),
    var(--surface);
}
.club-box{background:var(--raised);border:1px solid var(--rim);border-radius:14px;padding:34px 30px}
.club-list{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:12px 24px;margin-top:8px}
.club-list li{display:flex;gap:11px;font-size:.96rem;color:var(--body);align-items:flex-start}
.tick{flex:0 0 20px;height:20px;border-radius:50%;background:var(--gold-soft);border:1px solid var(--rim);display:grid;place-items:center;margin-top:3px}
.tick svg{width:11px;height:11px;stroke:var(--gold);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.branch{padding:22px 20px;border-radius:var(--radius);border:1px solid var(--faint);background:var(--raised)}
.b-tag{font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--subtle);margin-bottom:9px}
.branch h3{font-size:1.05rem;margin-bottom:7px}
.branch p{font-size:.9rem}

/* ---- for-who ---- */
.fw{border-radius:var(--radius);border:1px solid var(--faint);padding:28px 26px;background:var(--raised)}
.fw.yes{border-color:var(--rim)}
.fw h3{margin-bottom:16px}
.fw ul{list-style:none;display:grid;gap:11px}
.fw li{display:flex;gap:11px;font-size:.96rem;align-items:flex-start}
.mark{flex:0 0 20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:.75rem;font-weight:800;margin-top:3px}
.mark.y{background:rgba(63,191,127,.14);border:1px solid rgba(63,191,127,.4);color:var(--ok)}
.mark.n{background:rgba(122,130,153,.14);border:1px solid #2B3454;color:var(--subtle)}

/* ---- host ---- */
.host{display:grid;grid-template-columns:270px 1fr;gap:40px;align-items:center}
.host-photo{
  width:270px;height:340px;border-radius:14px;overflow:hidden;background:var(--raised);
  border:1px solid var(--rim);display:grid;place-items:center;
  font-size:4rem;font-weight:800;color:var(--gold);
  box-shadow:0 14px 44px rgba(0,0,0,.45);
}
.host-photo img{width:100%;height:100%;object-fit:cover;object-position:center 30%}

/* ---- testimonial ---- */
.tm{background:var(--raised);border:1px solid var(--faint);border-radius:var(--radius);padding:26px 24px}
.tm p{font-size:.98rem;color:var(--ink);margin-bottom:18px}
.tm-who{display:flex;align-items:center;gap:12px}
.tm-av{width:42px;height:42px;border-radius:50%;background:var(--gold-soft);border:1px solid var(--rim);display:grid;place-items:center;color:var(--gold);font-weight:800;overflow:hidden;flex:0 0 42px}
.tm-av img{width:100%;height:100%;object-fit:cover}
.tm-name{font-weight:700;color:var(--ink);font-size:.94rem;line-height:1.3}
.tm-role{font-size:.82rem;color:var(--subtle)}

/* ---- faq ---- */
.faq-item{border-bottom:1px solid var(--faint)}
.faq-q{
  width:100%;background:none;border:0;text-align:left;cursor:pointer;color:var(--ink);
  font-family:inherit;font-size:1.04rem;font-weight:700;padding:22px 44px 22px 0;position:relative;line-height:1.45;
}
.faq-q::after{
  content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);
  color:var(--gold);font-size:1.5rem;font-weight:400;
}
.faq-item.open .faq-q::after{content:"-"}
.faq-a{max-height:0;overflow:hidden;transition:max-height .28s ease}
.faq-a p{font-size:.97rem;padding-bottom:22px;padding-right:44px}

/* ---- final cta ---- */
.final{
  background:
    radial-gradient(760px 420px at 50% 110%,rgba(242,193,78,.16),transparent 66%),
    var(--bg);
  border-top:1px solid var(--faint);
}
.final-grid{display:grid;grid-template-columns:1fr .88fr;gap:52px;align-items:center}

/* ---- footer ---- */
footer{background:var(--surface);border-top:1px solid var(--faint);padding:38px 0;font-size:.88rem;color:var(--subtle)}
.foot-in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer a:hover{color:var(--gold)}

/* ---- mobile sticky cta ---- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  background:rgba(7,11,24,.95);backdrop-filter:blur(10px);border-top:1px solid var(--faint);
}

/* ---- thank you ---- */
.ty-hero{padding:60px 0 46px;text-align:center;background:radial-gradient(760px 420px at 50% -10%,rgba(242,193,78,.14),transparent 64%),var(--bg)}
.ty-check{
  width:76px;height:76px;border-radius:50%;margin:0 auto 24px;display:grid;place-items:center;
  background:rgba(63,191,127,.12);border:1px solid rgba(63,191,127,.42);animation:pop .5s cubic-bezier(.2,.8,.3,1.2);
}
.ty-check svg{width:34px;height:34px;stroke:var(--ok);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
@keyframes pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.event-card{
  max-width:640px;margin:32px auto 0;background:var(--raised);border:1px solid var(--rim);
  border-radius:14px;overflow:hidden;text-align:left;
}
.event-card-top{background:var(--gold-soft);padding:13px 24px;border-bottom:1px solid var(--rim);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--gold)}
.event-row{display:flex;gap:14px;padding:17px 24px;border-bottom:1px solid var(--faint);align-items:flex-start}
.event-row:last-child{border-bottom:0}
.event-row .k{flex:0 0 108px;font-size:.83rem;color:var(--subtle);padding-top:2px}
.event-row .v{font-weight:700;color:var(--ink);font-size:1rem}
.event-row .v.gold{color:var(--gold)}
.zalo-box{max-width:640px;margin:0 auto;text-align:center}
.tips{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:820px;margin:0 auto}
.tip{display:flex;gap:14px;padding:20px;background:var(--raised);border:1px solid var(--faint);border-radius:var(--radius)}
.tip-n{flex:0 0 30px;height:30px;border-radius:8px;background:var(--gold-soft);border:1px solid var(--rim);display:grid;place-items:center;color:var(--gold);font-weight:800;font-size:.85rem}
.tip h3{font-size:1rem;margin-bottom:4px}
.tip p{font-size:.9rem}

/* ---- reveal (chỉ ẩn khi JS chạy được, tránh trang trắng nếu JS lỗi) ---- */
html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
html.js .reveal.in{opacity:1;transform:none}

/* ---- responsive ---- */
@media(max-width:980px){
  .hero-grid,.final-grid{grid-template-columns:1fr;gap:36px}
  .g4{grid-template-columns:repeat(2,1fr)}
  .journey{grid-template-columns:repeat(2,1fr)}
  .host{grid-template-columns:1fr;gap:24px;text-align:center}
  .host-photo{margin:0 auto}
}
@media(max-width:720px){
  body{font-size:16px;padding-bottom:74px}
  section{padding:56px 0}
  .g2,.g3,.g4,.club-list,.tips{grid-template-columns:1fr}
  .journey{grid-template-columns:1fr}
  .form-card{padding:24px 20px}
  .strip-in{gap:16px}
  .cd-unit{min-width:56px}
  .cd-num{font-size:1.35rem}
  .sticky-cta{display:block}
  .event-row{flex-direction:column;gap:4px}
  .event-row .k{flex:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* ═══ KHỐI NỘI DUNG 2 BUỔI ═══ */
.ses-badge{
  display:inline-flex;align-items:center;gap:10px;padding:8px 18px;border-radius:8px;
  background:linear-gradient(180deg,#F8D06A,var(--gold-deep));color:#160F00;
  font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px;
}
.parts{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.part{
  background:var(--raised);border:1px solid var(--faint);border-radius:var(--radius);
  padding:24px 22px;transition:border-color .2s ease;
}
.part:hover{border-color:var(--rim)}
.part-top{display:flex;gap:13px;align-items:flex-start;margin-bottom:13px}
.part-n{
  flex:0 0 34px;height:34px;border-radius:9px;background:var(--gold-soft);border:1px solid var(--rim);
  display:grid;place-items:center;color:var(--gold);font-weight:800;font-size:.95rem;
}
.part-top h3{font-size:1.02rem;line-height:1.35}
.blist{list-style:none;display:grid;gap:9px}
.blist li{position:relative;padding-left:17px;font-size:.92rem;line-height:1.55;color:var(--body)}
.bdot{
  position:absolute;left:0;top:9px;width:6px;height:6px;
  border-radius:50%;background:var(--gold);opacity:.85;
}
.blist.warn .bdot{background:var(--alert)}
.quote-line{
  border-left:3px solid var(--gold);padding:18px 0 18px 22px;margin:32px 0 0;
  font-size:1.12rem;color:var(--ink);font-weight:600;line-height:1.55;max-width:760px;
}
.loop{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:22px;
  padding:20px;background:var(--raised);border:1px solid var(--faint);border-radius:var(--radius);
}
.loop span{font-size:.88rem;font-weight:600;color:var(--body)}
.loop .arw{color:var(--gold);font-weight:800}
.results{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.res{
  text-align:center;padding:24px 14px;background:var(--raised);
  border:1px solid var(--faint);border-radius:var(--radius);
}
.res-n{font-size:.72rem;font-weight:800;letter-spacing:.12em;color:var(--gold);margin-bottom:10px}
.res p{font-size:.94rem;font-weight:600;color:var(--ink);line-height:1.4}
.exercise{
  background:var(--raised);border:1px solid var(--rim);border-radius:var(--radius);
  padding:26px 24px;margin-top:22px;
}
.exercise h3{margin-bottom:14px}
.exercise ol{padding-left:20px;display:grid;gap:8px}
.exercise li{font-size:.94rem;color:var(--body);line-height:1.5}
@media(max-width:980px){
  .results{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .parts{grid-template-columns:1fr}
  .results{grid-template-columns:1fr}
  .quote-line{font-size:1rem;padding-left:16px}
}