:root{
  --forest:#405045; --sage:#899581; --taupe:#AF8F7A;
  --soft-sage:#C4CDB8; --warm-white:#EFD3BE; --pearl:#EDEDEF;
  --ink:#29332C; --sage-ink:#667059; --clay:#A9714F;
  --radius:16px; --radius-lg:28px;
  --shadow-soft:0 18px 48px -24px rgba(41,51,44,.28);
  --pad:clamp(80px,10vw,160px);
}
*{margin:0;padding:0;box-sizing:border-box}
/* overflow-x:clip trên CẢ html — chỉ đặt ở body thì Safari iOS vẫn nới rộng
   khung nhìn khi có phần tử tràn, làm nav/mbar (position:fixed) rộng hơn màn hình. */
html{scroll-behavior:smooth;overflow-x:clip}
body{
  font-family:'Be Vietnam Pro',system-ui,sans-serif;
  font-weight:300;line-height:1.7;color:var(--ink);
  background:var(--pearl);-webkit-font-smoothing:antialiased;
  overflow-x:clip;max-width:100%;
}
h1,h2,h3,.disp{font-family:'Playfair Display',Georgia,serif;font-weight:500;line-height:1.15;letter-spacing:-.01em}
em,.it{font-style:italic}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{width:min(1180px,92vw);margin-inline:auto}
.narrow{max-width:68ch}
section{padding-block:var(--pad);position:relative}

/* ---------- utility ---------- */
.eyebrow{
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:500;color:var(--taupe);margin-bottom:22px;display:inline-block
}
.eyebrow.on-dark{color:var(--soft-sage)}
.lead{font-size:clamp(1rem,1.6vw,1.15rem);color:var(--sage-ink);line-height:1.75}
.on-dark .lead,.dark .lead{color:var(--soft-sage)}
.dark{background:var(--forest);color:var(--warm-white)}
.dark h2,.dark h3{color:var(--warm-white)}
/* Chữ trong nút to hơn nhưng HỘP NÚT GIỮ NGUYÊN:
   font-size .95rem -> 1.08rem, bù lại padding ngang 42px -> 28px.
   line-height 1.5 (thay vì 1.7 kế thừa từ body) giữ chiều cao đúng 64px như cũ. */
.btn{
  display:inline-block;background:var(--clay);color:#fff;text-decoration:none;
  padding:19px 28px;border-radius:100px;font-weight:500;font-size:1.08rem;
  line-height:1.5;
  letter-spacing:.02em;border:none;cursor:pointer;font-family:inherit;
  transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s;
  box-shadow:0 12px 30px -14px rgba(169,113,79,.85)
}
.btn:hover{transform:translateY(-3px);box-shadow:0 20px 40px -16px rgba(169,113,79,.9)}
.btn-ghost{
  display:inline-block;text-decoration:none;color:inherit;opacity:.8;
  font-size:.9rem;border-bottom:1px solid currentColor;padding-bottom:3px
}
.btn-note{font-size:.78rem;opacity:.72;margin-top:16px;letter-spacing:.02em}
.rule{height:1px;background:var(--soft-sage);border:0}

/* placeholder image */
.ph{
  background:var(--soft-sage);border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:26px;min-height:200px;color:var(--sage-ink);font-size:.76rem;
  line-height:1.6;letter-spacing:.01em
}
.ph span{max-width:34ch}
.ph.cool{background:color-mix(in srgb,var(--soft-sage) 42%,var(--pearl))}
.ph.round{border-radius:50%;min-height:0;aspect-ratio:1}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:auto;width:var(--vw,100%);z-index:60;padding:18px 0;
  transition:background .4s,box-shadow .4s,padding .4s
}
.nav.stuck{background:var(--warm-white);box-shadow:0 6px 24px -18px rgba(41,51,44,.6);padding:12px 0}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.mark{font-family:'Playfair Display',serif;font-size:1.15rem;letter-spacing:.04em;color:var(--warm-white);text-decoration:none;transition:color .4s}
.nav.stuck .mark{color:var(--ink)}
.mark em{color:var(--taupe)}
.navlinks{display:none;gap:30px;font-size:.82rem}
.navlinks a{text-decoration:none;color:var(--soft-sage);transition:color .3s}
.nav.stuck .navlinks a{color:var(--sage-ink)}
.navlinks a:hover{color:var(--taupe)}
/* nav: .8rem -> .92rem, padding ngang 24 -> 20 => hop nut van 102x44 */
.nav .btn{padding:11px 20px;font-size:.92rem;box-shadow:none}
@media(min-width:1024px){.navlinks{display:flex}}

/* ---------- hero ---------- */
.hero{
  min-height:100svh;background:var(--forest);color:var(--warm-white);
  display:flex;flex-direction:column;justify-content:center;
  /* position:relative là BẮT BUỘC: khối sáng .hero::after dùng inset âm -10%.
     Thiếu dòng này nó neo vào cả trang thay vì vào hero, nên overflow:hidden
     không cắt được, và nó thò ra 10% mỗi bên làm trang cuộn ngang được. */
  position:relative;
  padding-block:140px 60px;text-align:center;overflow:hidden
}
.hero::after{
  content:"";position:absolute;inset:auto -10% -40% -10%;height:60%;
  background:radial-gradient(ellipse at 50% 100%,rgba(175,143,122,.28),transparent 70%);
  pointer-events:none
}
.badge{
  display:inline-block;border:1px solid rgba(196,205,184,.4);border-radius:100px;
  padding:8px 20px;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--soft-sage);margin-bottom:34px
}
.hero h1{
  font-size:clamp(2.6rem,7.6vw,5.4rem);color:var(--warm-white);
  margin-bottom:26px;max-width:13ch;margin-inline:auto
}
.hero h1 em{color:var(--taupe)}
/* "ĐẾN HIỂU CON" luôn nằm ở dòng thứ hai, mọi kích thước màn hình.
   Dòng dài nhất chỉ 11.75ch nên 13ch là đủ, không bao giờ rớt xuống 3 dòng. */
.hero h1 .brk{display:block}
.hook{
  font-family:'Playfair Display',serif;font-style:italic;
  font-size:clamp(1.05rem,2.3vw,1.5rem);color:var(--soft-sage);
  margin-bottom:30px
}
.sub{font-size:clamp(1rem,1.8vw,1.2rem);font-weight:400;letter-spacing:.01em;margin-bottom:10px}
.sub-note{font-size:.92rem;color:var(--soft-sage);margin-bottom:38px}
.hero-cta{display:flex;flex-direction:column;align-items:center;gap:20px}
.stats{
  margin-top:64px;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:rgba(137,149,129,.35);border-block:1px solid rgba(137,149,129,.35)
}
.stats div{background:var(--forest);padding:24px 14px}
.stats b{display:block;font-family:'Playfair Display',serif;font-weight:500;font-size:1.5rem;color:var(--warm-white);margin-bottom:4px}
.stats small{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage)}
@media(min-width:768px){.stats{grid-template-columns:repeat(4,1fr)}}

/* ---------- marquee ---------- */
.marquee{background:var(--taupe);color:#fff;padding:15px 0;overflow:hidden;white-space:nowrap}
.marquee-track{display:inline-flex;gap:60px;animation:slide 34s linear infinite;font-size:.8rem;letter-spacing:.12em}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- countdown ---------- */
.countdown{background:var(--pearl);text-align:center;padding-block:clamp(60px,7vw,90px)}
/* 4 ô luôn nằm trên MỘT hàng, kể cả 375px.
   minmax(0,1fr) để ô co được; max-width 364px giữ y nguyên kích thước cũ ở desktop. */
.cd-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;
  max-width:364px;margin:26px auto 0
}
.cd-cell{
  background:var(--forest);border:1px solid var(--sage);border-radius:var(--radius);
  padding:20px 6px;min-width:0
}
.cd-cell b{display:block;font-family:'Playfair Display',serif;font-size:2.1rem;color:var(--warm-white);font-weight:500}
.cd-cell small{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sage)}
.cd-title{font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--sage-ink)}

/* ---------- hero image + proof ---------- */
.showcase{background:var(--pearl);padding-top:0}
/* ảnh hero thật (2253x1435).
   Từ 768px trở lên giữ NGUYÊN khung ảnh gốc, không cắt gì.
   Dưới 768px thu về 4:3 để mặt người to hơn trên điện thoại —
   chỉ cắt bớt tường gạch trái và chum sành phải, ba nhân vật vẫn đủ. */
.hero-photo{
  border-radius:var(--radius-lg);overflow:hidden;
  aspect-ratio:4/3;background:var(--soft-sage)
}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:47% center}
@media(min-width:768px){
  .hero-photo{aspect-ratio:2253/1435}
  .hero-photo img{object-position:center}
}
.proof{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:38px;text-align:center}
.avatars{display:flex}
.avatars .ph{width:52px;height:52px;border:2px solid var(--pearl);margin-left:-14px;font-size:0;min-height:0}
.avatars .ph:first-child{margin-left:0}
.proof p{font-size:.86rem;color:var(--sage-ink);letter-spacing:.02em}
.proof p b{font-weight:500;color:var(--ink)}

/* ---------- pain ---------- */
.pain{background:var(--forest);color:var(--warm-white);text-align:center}
.pain::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.08);pointer-events:none}
.pain .wrap{position:relative}
.pain h2{font-size:clamp(1.8rem,4.2vw,3rem);max-width:22ch;margin:0 auto 18px}
.cards{display:grid;gap:26px;margin-top:56px}
@media(min-width:900px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{
  background:rgba(196,205,184,.07);border:1px solid rgba(137,149,129,.3);
  border-radius:var(--radius);overflow:hidden;text-align:left;
  transition:transform .4s,border-color .4s
}
.card:hover{transform:translateY(-6px);border-color:var(--taupe)}
.card .ph{border-radius:0;min-height:170px;filter:saturate(.7)}
/* Ảnh thật trong 3 thẻ Nỗi đau — khung 16:9 giống nhau để ba thẻ cân bằng.
   Thẻ .card đã có overflow:hidden nên hai góc trên tự bo theo thẻ. */
.card-photo{aspect-ratio:1672/941;background:var(--soft-sage);overflow:hidden}
.card-photo img{width:100%;height:100%;object-fit:cover}
.card-body{padding:26px 24px 30px}
.card h3{font-size:.95rem;letter-spacing:.08em;text-transform:uppercase;font-family:'Be Vietnam Pro',sans-serif;font-weight:600;margin-bottom:16px;color:var(--warm-white)}
.quote-lines{border-left:1px solid var(--sage);padding-left:16px;font-size:.92rem;color:var(--soft-sage);margin-bottom:16px;font-style:italic}
.arrowline{font-size:.9rem;color:var(--taupe);font-weight:400}
.closer{margin-top:56px;font-family:'Playfair Display',serif;font-size:clamp(1.3rem,2.8vw,1.9rem);color:var(--warm-white)}
/* :not(.gw) — nếu không loại trừ, luật này sẽ tóm cả các span TỪ do hiệu ứng
   chữ sinh ra và biến mỗi từ thành một dòng riêng. */
.closer > span:not(.gw){display:block;font-family:'Be Vietnam Pro',sans-serif;font-size:.95rem;color:var(--soft-sage);margin-top:12px}

/* ---------- solution ---------- */
.solution{background:var(--warm-white)}
/* ảnh "Lối ra" (4032x3016).
   Giữ NGUYÊN khung 4:3 gốc ở mọi màn hình, không cắt: hai khuôn mặt trải
   từ 33% đến 85% bề ngang, cắt hẹp lại là mất một trong hai. */
.solution-photo{
  border-radius:var(--radius-lg);overflow:hidden;
  aspect-ratio:4032/3016;background:var(--soft-sage)
}
.solution-photo img{width:100%;height:100%;object-fit:cover;object-position:center}
.split{display:grid;gap:44px;align-items:center}
@media(min-width:900px){.split{grid-template-columns:1.1fr .9fr;gap:64px}}
.solution h2{font-size:clamp(1.8rem,4.2vw,3rem);margin-bottom:20px;max-width:18ch}
.keys{display:grid;gap:22px;margin-top:70px}
@media(min-width:900px){.keys{grid-template-columns:repeat(3,1fr)}}
.key{
  position:relative;background:rgba(255,255,255,.4);border:1px solid rgba(175,143,122,.35);
  border-radius:var(--radius);padding:34px 28px 30px;overflow:hidden
}
.key .num{
  position:absolute;top:-14px;right:10px;font-family:'Playfair Display',serif;
  font-size:6rem;color:var(--taupe);opacity:.2;line-height:1;pointer-events:none
}
.key svg{margin-bottom:18px}
.key h3{font-size:.92rem;letter-spacing:.07em;text-transform:uppercase;font-family:'Be Vietnam Pro',sans-serif;font-weight:600;margin-bottom:10px}
.key p{font-size:.9rem;color:var(--sage-ink)}

/* ---------- timeline ---------- */
.roadmap{background:var(--warm-white);padding-top:0}
.rm-head{text-align:center;margin-bottom:60px}
.rm-head h2{font-size:clamp(1.5rem,3.2vw,2.3rem)}
.rm{position:relative;max-width:760px;margin-inline:auto}
.rm-line{position:absolute;left:14px;top:8px;bottom:8px;width:2px;overflow:hidden}
.rm-line i{display:block;height:100%;width:100%;background:linear-gradient(var(--sage),var(--taupe));transform-origin:top;transform:scaleY(0)}
@media(min-width:768px){.rm-line{left:78px}}
.step{position:relative;padding-left:52px;padding-bottom:38px}
@media(min-width:768px){.step{padding-left:120px}}
.step::before{
  content:"";position:absolute;left:8px;top:7px;width:15px;height:15px;border-radius:50%;
  background:var(--warm-white);border:2px solid var(--taupe)
}
@media(min-width:768px){.step::before{left:72px}}
.step .n{
  position:absolute;left:0;top:-4px;font-family:'Playfair Display',serif;
  font-size:1.5rem;color:var(--taupe);display:none
}
@media(min-width:768px){.step .n{display:block;font-size:2rem}}
.step h3{font-size:1rem;letter-spacing:.09em;text-transform:uppercase;font-family:'Be Vietnam Pro',sans-serif;font-weight:600;margin-bottom:5px}
.step p{font-size:.92rem;color:var(--sage-ink)}

/* ---------- workshop ---------- */
.workshop{background:var(--pearl)}
.infostrip{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(102,112,89,.2);
  border-radius:var(--radius);overflow:hidden;margin:40px 0 56px
}
@media(min-width:768px){.infostrip{grid-template-columns:repeat(4,1fr)}}
.infostrip div{background:var(--soft-sage);padding:22px 16px;text-align:center}
.infostrip b{display:block;font-weight:500;font-size:.95rem;color:var(--ink)}
.infostrip small{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-ink)}
.checklist{list-style:none;display:grid;gap:14px;margin-top:30px}
.check{display:flex;gap:14px;align-items:flex-start;cursor:pointer;font-size:.95rem;text-align:left;background:none;border:0;font-family:inherit;color:inherit;line-height:1.6;padding:0}
.box{
  flex:0 0 auto;width:22px;height:22px;border:1.5px solid var(--sage);border-radius:6px;
  margin-top:3px;display:grid;place-items:center;transition:background .3s,border-color .3s
}
.box svg{opacity:0;transition:opacity .3s}
.check.on .box{background:var(--clay);border-color:var(--clay)}
.check.on .box svg{opacity:1}
.check.on span{font-weight:500}
.check-note{margin-top:22px;font-size:.9rem;color:var(--clay);opacity:0;transition:opacity .5s;font-style:italic}
.check-note.show{opacity:1}
.results{list-style:none;display:grid;gap:15px;margin-top:26px}
.results li{display:flex;gap:14px;align-items:flex-start;font-size:.98rem}
.tick{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--clay);color:#fff;display:grid;place-items:center;font-size:.7rem;margin-top:2px}

/* Ba chân dung "Dành cho ai" — mẹ trẻ · bố · ông bà.
   Ba ảnh gốc là hình vuông có vòng viền vàng vẽ sẵn nội tiếp; cắt tròn 50%
   trùng đúng vòng đó nên viền vàng thành nét bo của khung, không bị mất. */
.audience{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.aud{
  aspect-ratio:1;border-radius:50%;overflow:hidden;
  background:var(--soft-sage);border:2px solid var(--taupe)
}
/* Ba file gốc là ảnh VUÔNG nền kem, vòng viền vàng vẽ sẵn chỉ rộng ~90% khung.
   Nếu để ảnh 100% thì mép cắt tròn nằm NGOÀI vòng vàng, lọt cả nền kem và phần
   tóc/vai tràn ra — nhìn thành khối vuông mờ. Phóng 118% để mép cắt nằm hẳn
   bên trong vòng vàng, chỉ còn đúng chân dung trong hình tròn sạch. */
/* max-width:none để thắng luật img{max-width:100%} ở đầu file — nếu không,
   ảnh bị chặn ở 100% và phép phóng không có tác dụng. */
.aud img{width:118%;height:118%;max-width:none;margin:-9%;object-fit:cover;object-position:center}
/* Ô giữa lệch xuống cho hàng đỡ phẳng, giữ nhịp so le của bản gốc. */
.aud.lech{margin-top:24px}

/* Ảnh "Mang về" (1448x1086) — giữ nguyên khung 4:3 gốc, không cắt:
   hai khuôn mặt nằm giữa, cắt hẹp là mất một trong hai. */
.result-photo{
  border-radius:var(--radius-lg);overflow:hidden;
  aspect-ratio:1448/1086;background:var(--soft-sage)
}
.result-photo img{width:100%;height:100%;object-fit:cover;object-position:center}

/* Video nhúng Cloudinary — khung 16:9, tự co theo bề rộng.
   Nền --soft-sage giữ chỗ trong lúc iframe đang tải, tránh mảng trắng. */
.video{
  aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--soft-sage)
}
.video iframe{width:100%;height:100%;border:0;display:block}

/* ---------- modules ---------- */

.modules{background:var(--soft-sage)}
.modules .rm-head h2{font-size:clamp(1.8rem,4vw,2.8rem)}
.orbit{display:grid;gap:14px;margin-top:52px}
@media(min-width:900px){.orbit{grid-template-columns:repeat(5,1fr);gap:16px}}
.mod{
  background:rgba(255,255,255,.5);border:1px solid rgba(102,112,89,.28);
  border-radius:var(--radius);padding:26px 20px;text-align:center;cursor:pointer;
  font-family:inherit;color:inherit;transition:background .35s,color .35s,transform .35s;position:relative
}
.mod:hover{transform:translateY(-4px)}
.mod.on{background:var(--forest);color:var(--warm-white);border-color:var(--forest)}
.mod .mn{font-family:'Playfair Display',serif;font-size:1.9rem;color:var(--taupe);display:block;line-height:1;margin-bottom:12px}
.mod.on .mn{color:var(--soft-sage)}
.mod h3{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;font-family:'Be Vietnam Pro',sans-serif;font-weight:600;line-height:1.45}
.mod.hot{border-color:var(--clay)}
.mod .flag{
  position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  background:var(--clay);color:#fff;font-size:.58rem;letter-spacing:.12em;
  text-transform:uppercase;padding:4px 12px;border-radius:100px;white-space:nowrap
}
.mod-panel{
  margin-top:20px;background:rgba(255,255,255,.62);border-radius:var(--radius);
  padding:0 32px;max-height:0;overflow:hidden;transition:max-height .5s ease,padding .5s ease
}
.mod-panel.open{max-height:520px;padding:34px 32px}
/* Bảng chi tiết nằm CÙNG lưới với 5 nút. Chỗ hiện của nó do `order` quyết định,
   nên bấm nút nào là bảng trượt xuống ngay dưới nút đó — không cần JS xê dịch
   DOM, cũng không phụ thuộc vào sự kiện đổi cỡ màn hình.
   Các nút giữ số chẵn 0·2·4·6·8, bảng nhận số lẻ 2k+1 để luôn chen được vào
   giữa hai nút bất kỳ. */
.orbit .mod:nth-child(1){order:0}
.orbit .mod:nth-child(2){order:2}
.orbit .mod:nth-child(3){order:4}
.orbit .mod:nth-child(4){order:6}
.orbit .mod:nth-child(5){order:8}
.orbit > .mod-panel{order:var(--vi-tri,1);grid-column:1 / -1;margin-top:0}
/* Từ 900px, 5 nút nằm cùng một hàng ngang nên bảng luôn xuống dưới cả hàng. */
@media(min-width:900px){.orbit > .mod-panel{order:10}}
.mod-panel h4{font-family:'Playfair Display',serif;font-size:1.3rem;margin-bottom:14px}
.mod-panel p{font-size:.95rem;color:var(--sage-ink);margin-bottom:8px}
.swap{margin-top:20px;border-left:2px solid var(--taupe);padding-left:16px;font-size:.95rem}
.swap .old{text-decoration:line-through;color:var(--sage-ink)}
.swap .new{color:var(--clay);font-weight:500}

/* ---------- before / after ---------- */
.ba{background:var(--pearl)}
.ba-grid{display:grid;gap:20px;align-items:stretch;position:relative}
@media(min-width:900px){.ba-grid{grid-template-columns:1fr auto 1fr;gap:28px;align-items:center}}
.ba-col{border-radius:var(--radius-lg);padding:28px;transition:opacity .4s}
/* Viền trong suốt cùng độ dày với .ba-after -> hai cột có cùng bề rộng trong. */
.ba-before{background:color-mix(in srgb,var(--pearl) 86%,var(--sage));border:1px solid transparent}
.ba-before .ph{filter:grayscale(.85)}
/* Ảnh thật Trước–Sau — cùng khung 16:9 để hai cột cân nhau.
   KHÔNG lọc grayscale: ảnh "trước" đã sẵn tông xám lạnh, lọc thêm sẽ bệt màu. */
.ba-photo{aspect-ratio:1672/941;border-radius:var(--radius);overflow:hidden;background:var(--soft-sage)}
.ba-photo img{width:100%;height:100%;object-fit:cover}
.ba-after{background:var(--warm-white);border:1px solid var(--taupe)}
.ba-col h3{font-family:'Playfair Display',serif;font-size:1.6rem;letter-spacing:.1em;margin:22px 0 18px}
.ba-col ul{list-style:none;display:grid;gap:12px;font-size:.95rem}
.ba-before li{color:var(--sage-ink)}
.ba-after li{color:var(--forest)}
.ba-arrow{
  width:56px;height:56px;border-radius:50%;background:var(--clay);color:#fff;
  display:grid;place-items:center;font-size:1.3rem;margin-inline:auto;flex:0 0 auto
}
/* Mũi tên phải chỉ theo hướng đọc: dưới 900px hai cột Trước/Sau xếp DỌC nên
   mũi tên chỉ XUỐNG; từ 900px hai cột nằm cạnh nhau nên trả về chỉ SANG PHẢI.
   Xoay <span> bên trong chứ không xoay .ba-arrow, vì thẻ đó mang class .rv và
   đang bị GSAP ghi transform để chạy hiệu ứng hiện — xoay ở ngoài sẽ bị đè mất. */
.ba-arrow span{display:block;line-height:1;transform:rotate(90deg)}
@media(min-width:900px){.ba-arrow span{transform:none}}
.ba-grid:hover .ba-before{opacity:.7}
.benefits{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:70px}
@media(min-width:900px){.benefits{grid-template-columns:repeat(4,1fr)}}
.ben{
  background:var(--soft-sage);border-radius:var(--radius);padding:28px 20px;text-align:center;
  transition:transform .35s,box-shadow .35s
}
.ben:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}
.ben p{font-size:.88rem;margin-top:14px;font-weight:400}

/* ---------- pull quote ---------- */
.pull{background:var(--forest);text-align:center;padding-block:clamp(110px,13vw,180px)}
.pull p{
  font-family:'Playfair Display',serif;font-style:italic;font-weight:400;
  font-size:clamp(1.6rem,4.4vw,3.1rem);color:var(--warm-white);
  max-width:20ch;margin-inline:auto;position:relative;z-index:1
}
.pull .qm{
  font-family:'Playfair Display',serif;font-size:clamp(7rem,18vw,15rem);
  color:var(--sage);opacity:.25;line-height:.6;position:absolute;pointer-events:none
}
.pull .q1{top:10%;left:6%}
.pull .q2{bottom:0;right:6%}

/* ---------- testimonials ---------- */
.stories{background:var(--warm-white)}
.st-grid{display:grid;gap:24px;margin-top:56px}
@media(min-width:900px){.st-grid{grid-template-columns:repeat(3,1fr)}}
.story{
  background:rgba(255,255,255,.5);border:1px solid rgba(175,143,122,.35);
  border-radius:var(--radius-lg);padding:34px 30px;display:flex;flex-direction:column
}
.story h3{
  font-family:'Playfair Display',serif;font-style:italic;font-weight:400;
  font-size:clamp(1.25rem,2.4vw,1.6rem);margin-bottom:24px;color:var(--forest)
}
.beat{margin-bottom:16px}
.beat b{display:block;font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);font-weight:600;margin-bottom:5px}
.beat p{font-size:.9rem;color:var(--sage-ink)}
.story-foot{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:24px;border-top:1px solid rgba(175,143,122,.3)}
.story-foot .ph{width:46px;height:46px;flex:0 0 auto;font-size:0}
.story-foot small{font-size:.8rem;color:var(--sage-ink)}

/* ---------- expert ---------- */
.expert{background:var(--forest);color:var(--warm-white)}
.ex-grid{display:grid;gap:44px;align-items:center}
@media(min-width:900px){.ex-grid{grid-template-columns:.85fr 1.15fr;gap:70px}}
.ex-photo{position:relative}
.ex-photo::before{content:"";position:absolute;inset:12px -12px -12px 12px;border:1px solid var(--taupe);border-radius:var(--radius-lg)}
.ex-photo .ph{position:relative;border-radius:var(--radius-lg);min-height:380px;background:rgba(196,205,184,.15);color:var(--soft-sage)}
/* Chân dung chuyên gia (666x889) — giữ NGUYÊN tỉ lệ dọc 3:4, không cắt:
   mặt nằm giữa khung, cắt hẹp lại là mất nửa người hoặc mất bó hoa. */
.expert-photo{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  aspect-ratio:666/889;background:rgba(196,205,184,.15)
}
.expert-photo img{width:100%;height:100%;object-fit:cover;object-position:center}
.expert h2{font-size:clamp(1.7rem,3.6vw,2.6rem);margin-bottom:16px}
/* Tên chuyên gia luôn xuống hàng riêng: "Chuyên gia" / "Đặng Thị Hồng Phúc".
   Thẻ <em> đã bọc đúng phần tên nên chỉ cần cho nó thành block. */
.expert h2 em{display:block}
.titles{font-size:.92rem;color:var(--soft-sage);line-height:1.9;margin-bottom:22px}
.numbers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px;border-top:1px solid rgba(137,149,129,.35);padding-top:32px}
.numbers b{display:block;font-family:'Playfair Display',serif;font-size:clamp(1.7rem,4vw,2.8rem);font-weight:500;color:var(--warm-white)}
.numbers small{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--sage)}
/* Lưới bằng chứng — 9 ảnh, luôn 3 cột nên thành đúng 3x3, không bao giờ lẻ hàng.
   Giữ 3 cột cả ở desktop (không dùng 6 hay 9 cột như bản placeholder cũ):
   đây là ảnh chụp nhóm 7-14 người, ô hẹp quá thì không nhận ra ai. */
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:60px}
/* Dưới 520px: 2 cột thay vì 3 — ô 3 cột chỉ còn ~109px, ảnh chụp nhóm
   7-14 người ở cỡ đó không nhìn ra ai. Ô thứ 9 trải ngang để không lẻ hàng. */
@media(max-width:519px){
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gal:last-child{grid-column:1 / -1;aspect-ratio:2.4/1}
}
@media(min-width:768px){.gallery{gap:14px}}
.gal{
  aspect-ratio:16/9;border-radius:10px;overflow:hidden;
  background:rgba(196,205,184,.14)
}
.gal img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform .45s cubic-bezier(.2,.8,.3,1)
}
.gal:hover img{transform:scale(1.05)}
.gallery .ph{min-height:110px;border-radius:10px;background:rgba(196,205,184,.14);color:var(--sage);font-size:0;transition:background .35s}
.gallery .ph:hover{background:rgba(196,205,184,.3)}

/* ---------- HỌC PHÍ + ĐĂNG KÝ (hai cột) ---------- */
.signup{background:var(--warm-white)}
.signup .rm-head{margin-bottom:46px}
/* Neo cho 4 nút CTA — scroll-margin bù chiều cao thanh nav cố định.
   Áp cho mọi section có id nên mọi link neo trên trang đều không bị nav che. */
section[id],#dang-ky{scroll-margin-top:96px}

/* align-items:stretch -> hai box luôn cao bằng nhau khi nằm ngang. */
.signup-grid{display:grid;gap:26px;align-items:stretch}
@media(min-width:900px){.signup-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px}}

/* --- CỘT TRÁI: bảng giá trên nền tối --- */
.price-panel{
  display:flex;flex-direction:column;
  background:var(--forest);color:var(--warm-white);
  border-radius:var(--radius-lg);padding:clamp(24px,3.4vw,38px);
  box-shadow:var(--shadow-soft)
}
.panel-badge{
  display:block;text-align:center;border:1px solid var(--sage);border-radius:100px;
  padding:11px 20px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;color:var(--warm-white);margin-bottom:26px
}

/* Hai thẻ vé — dựng bằng JS từ CONFIG.ve */
.tickets{display:grid;gap:18px}
.ticket{
  position:relative;background:rgba(196,205,184,.09);
  border:1px solid rgba(137,149,129,.4);border-radius:var(--radius);
  padding:22px 20px;display:flex;flex-direction:column
}
.ticket.noi-bat{border-color:var(--taupe)}
.ticket .co{
  position:absolute;top:-11px;right:16px;background:var(--warm-white);color:var(--forest);
  font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;font-weight:600;
  padding:5px 13px;border-radius:100px;white-space:nowrap
}
.ticket-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ticket h3{
  font-family:'Be Vietnam Pro',sans-serif;font-weight:600;font-size:.95rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--warm-white);line-height:1.45
}
.ticket .gia{
  font-family:'Playfair Display',serif;font-weight:500;line-height:1.1;
  font-size:clamp(1.4rem,3.2vw,1.75rem);color:var(--warm-white);white-space:nowrap
}
.ticket .tom-tat{
  margin-top:8px;padding-bottom:16px;border-bottom:1px solid rgba(137,149,129,.35);
  font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--warm-white);line-height:1.75
}
.ticket ul{list-style:none;display:grid;gap:10px;margin-top:18px}
.ticket li{display:flex;gap:11px;align-items:flex-start;font-size:.9rem;color:var(--warm-white)}
.ticket li::before{
  content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;
  background:var(--sage);margin-top:.62em
}
.ticket li.bonus-line{font-weight:600;color:var(--warm-white)}
.ticket li.bonus-line::before{background:var(--warm-white)}

/* Ba dòng ưu đãi dưới bảng giá */
.offers{
  list-style:none;display:grid;gap:15px;margin-top:auto;padding-top:24px;
  border-top:1px solid rgba(137,149,129,.35)
}
.offers li{display:flex;gap:11px;align-items:flex-start;font-size:.86rem;color:var(--soft-sage);line-height:1.7}
.offers i{font-style:normal;flex:0 0 auto;font-size:.95rem;line-height:1.5}
.offers b{color:var(--warm-white);font-weight:500}

/* --- CỘT PHẢI: khung đăng ký --- */
.signup .form-card{
  display:flex;flex-direction:column;
  background:rgba(255,255,255,.66);border:1px solid rgba(175,143,122,.32);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);
  padding:clamp(26px,3.6vw,40px);max-width:none;margin:0
}
.form-title{font-size:clamp(1.4rem,3vw,1.9rem);text-transform:uppercase;margin-bottom:10px}
.form-sub{font-size:.9rem;color:var(--forest);margin-bottom:30px;line-height:1.7}
.field .lbl{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--forest);margin-bottom:10px}
.signup .field label{color:var(--forest)}

/* Chọn gói — thẻ chọn, dùng radio thật để bàn phím và screen reader dùng được */
.goi{display:grid;gap:12px}
@media(min-width:520px){.goi{grid-template-columns:1fr 1fr}}
/* .goi-item là thẻ <label> nên bị luật .field label{text-transform:uppercase}
   của form tóm phải — phải trả các thuộc tính chữ về mặc định. */
.field .goi-item{
  position:relative;display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  text-transform:none;letter-spacing:normal;font-size:1rem;color:var(--ink);margin-bottom:0;
  border:1.5px solid var(--soft-sage);border-radius:var(--radius);
  padding:15px 14px;transition:border-color .25s,background .25s
}
.field .goi-item:hover{border-color:var(--taupe)}
.field .goi-item:has(input:checked){border-color:var(--clay);background:rgba(169,113,79,.07)}
.field .goi-item:has(input:focus-visible){outline:2px solid var(--forest);outline-offset:2px}
.field .goi-item input{accent-color:var(--clay);width:17px;height:17px;margin-top:2px;flex:0 0 auto}
.goi-txt{display:block;min-width:0}
.goi-ten{display:block;font-weight:500;font-size:.95rem;color:var(--ink);line-height:1.5}
/* --forest thay vì --clay: clay trên nền thẻ sáng chỉ đạt 3.36:1, dưới chuẩn AA.
   Nhấn bằng độ đậm chữ thay vì bằng màu. */
.goi-gia{display:block;font-weight:600;font-size:1rem;color:var(--forest);margin-top:3px}
.goi-txt small{display:block;font-size:.76rem;color:var(--forest);line-height:1.6;margin-top:5px}
.goi-vip{
  position:absolute;top:-9px;right:12px;background:var(--forest);color:var(--warm-white);
  font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  padding:4px 10px;border-radius:100px
}

/* Form giãn đầy chiều cao box, nút CTA tụt xuống đáy để hai cột kết thúc ngang nhau. */
.signup #regform{display:flex;flex-direction:column;flex:1}
.signup #regform .btn{margin-top:auto}

/* ---------- pricing ---------- */
.pricing{background:var(--warm-white);text-align:center}
.price-card{
  background:rgba(255,255,255,.55);border:1.5px solid var(--taupe);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);padding:clamp(34px,5vw,56px);max-width:720px;margin:0 auto
}
.old-price{font-size:.95rem;color:var(--sage-ink);text-decoration:line-through;margin-bottom:14px}
.badge-early{
  display:inline-block;background:var(--clay);color:#fff;font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;padding:6px 16px;border-radius:100px;margin-bottom:16px
}
.new-price{font-family:'Playfair Display',serif;font-size:clamp(2.2rem,6vw,3.6rem);color:var(--clay);font-weight:500;line-height:1.1}
.save{font-size:.9rem;color:var(--sage-ink);margin-top:10px}
.bonus{display:grid;gap:24px;align-items:center;margin-top:38px;padding-top:34px;border-top:1px solid var(--soft-sage);text-align:left}
@media(min-width:768px){.bonus{grid-template-columns:.8fr 1.2fr;gap:32px}}
.bonus h3{font-size:1.1rem;letter-spacing:.06em;text-transform:uppercase;font-family:'Be Vietnam Pro',sans-serif;font-weight:600;margin-bottom:10px}
.bonus p{font-size:.92rem;color:var(--sage-ink)}
.bonus .fine{font-size:.78rem;margin-top:8px;opacity:.8}

/* ---------- commitment ---------- */
.commit{background:var(--pearl)}
.commit-box{border:1.5px solid var(--forest);border-radius:var(--radius-lg);padding:clamp(32px,5vw,54px);position:relative;max-width:820px;margin-inline:auto}
.commit-box .seal{position:absolute;top:-26px;left:32px;background:var(--pearl);padding:0 12px}
.commit-box h2{font-size:clamp(1.3rem,3vw,2rem);margin-bottom:16px;max-width:24ch}
.commit-list{list-style:none;margin-top:28px;padding-top:26px;border-top:1px solid var(--soft-sage);display:grid;gap:10px;font-size:.9rem;color:var(--sage-ink)}
.commit-list b,.commit-lead b{display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);margin-bottom:8px}

/* ---------- faq ---------- */
/* Trước đây FAQ nối liền khối Cam kết (cùng nền pearl) nên bỏ padding trên.
   Nay khối Học phí (warm-white) chen vào giữa, phải trả lại khoảng thở. */
.faq{background:var(--pearl)}
.faq-list{max-width:820px;margin-inline:auto;border-top:1px solid var(--soft-sage)}
.faq-item{border-bottom:1px solid var(--soft-sage)}
.faq-q{
  width:100%;background:none;border:0;font-family:inherit;color:inherit;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:26px 0;text-align:left;font-size:1rem;font-weight:500
}
.faq-q i{font-style:normal;font-size:1.4rem;color:var(--taupe);transition:transform .4s;flex:0 0 auto;line-height:1}
.faq-item.open .faq-q i{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s ease,padding .45s ease}
.faq-item.open .faq-a{max-height:260px;padding-bottom:26px}
.faq-a p{font-size:.94rem;color:var(--sage-ink);max-width:62ch}

/* ---------- final cta ---------- */
.final{background:var(--forest);color:var(--warm-white);text-align:center;overflow:hidden}
.final::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 30%,rgba(239,211,190,.16),transparent 62%);
  pointer-events:none
}
.final .wrap{position:relative}
.final h2{font-size:clamp(1.9rem,5vw,3.4rem);max-width:20ch;margin:0 auto 18px}
.final .sub-em{font-family:'Playfair Display',serif;font-style:italic;font-size:clamp(1rem,2.2vw,1.35rem);color:var(--soft-sage);margin-bottom:40px}
.final-copy{max-width:56ch;margin:0 auto 44px;font-size:1rem;color:var(--soft-sage)}
.final-copy strong{display:block;color:var(--warm-white);font-weight:500;letter-spacing:.05em;margin-bottom:12px}
.urgency{max-width:460px;margin:56px auto 0}
.urgency b{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe)}
.bar{height:8px;border-radius:100px;background:rgba(137,149,129,.35);overflow:hidden;margin:16px 0 10px}
.bar i{display:block;height:100%;background:var(--clay);width:0;border-radius:100px}
.urgency small{font-size:.82rem;color:var(--soft-sage)}
.contactline{margin-top:48px;font-size:.88rem;color:var(--soft-sage);line-height:2}

/* ---------- form ---------- */
.formsec{background:var(--warm-white)}
.form-card{max-width:620px;margin-inline:auto}
.steps{font-size:.75rem;letter-spacing:.1em;color:var(--sage-ink);margin-bottom:34px;text-align:center}
.steps b{color:var(--ink)}
.field{margin-bottom:30px;position:relative}
.field label{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-ink);margin-bottom:8px}
.field input,.field select,.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--sage);
  padding:10px 0;font-family:inherit;font-size:1rem;color:var(--ink);
  transition:border-color .3s;border-radius:0
}
.field textarea{resize:vertical;min-height:70px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--clay)}
.field input::placeholder,.field textarea::placeholder{color:rgba(102,112,89,.5)}
/* nut submit rong 100%, rut padding doc de chieu cao giu nguyen 57px */
.form-card .btn{width:100%;margin-top:10px;padding-block:15px}
.privacy{font-size:.76rem;color:var(--sage-ink);text-align:center;margin-top:18px}
.success{display:none;text-align:center;padding:40px 0}
.success.show{display:block}
.success .ok{width:64px;height:64px;border-radius:50%;background:var(--clay);color:#fff;display:grid;place-items:center;font-size:1.6rem;margin:0 auto 22px}
.success h3{font-family:'Playfair Display',serif;font-size:1.6rem;margin-bottom:12px}
.success p{font-size:.95rem;color:var(--sage-ink)}

/* ---------- footer ---------- */
/* Nền đậm dần: --forest 82% (gốc) -> 72% -> 52%, phần còn lại là --ink.
   --ink là màu tối nhất trong bảng, nên 0% là ngưỡng đậm tối đa có thể. */
footer{background:color-mix(in srgb,var(--forest) 52%,var(--ink));color:var(--sage);padding-block:60px 34px;font-size:.86rem}
.f-grid{display:grid;gap:28px}
@media(min-width:768px){.f-grid{grid-template-columns:1fr auto;align-items:start}}
footer .mark{color:var(--warm-white);font-size:1.3rem}
footer .tag{margin-top:10px;max-width:34ch;line-height:1.8}
footer a{text-decoration:none}
.copy{margin-top:44px;padding-top:22px;border-top:1px solid rgba(137,149,129,.25);font-size:.75rem;opacity:.8}

/* ---------- sticky mobile bar ---------- */
.mbar{
  position:fixed;left:0;right:auto;bottom:0;width:var(--vw,100%);z-index:70;background:var(--clay);color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 18px;transform:translateY(110%);transition:transform .4s
}
.mbar.show{transform:none}
.mbar span{font-size:.85rem}
.mbar b{font-family:'Playfair Display',serif;font-size:1.1rem}
/* thanh dinh mobile: .82rem -> .92rem, padding ngang 22 -> 18 => hop nut van 98x44 */
/* Viền trong suốt ở nút chính để hai nút có cùng phép tính hộp -> cùng chiều cao. */
.mbar a{background:#fff;color:var(--clay);text-decoration:none;padding:11px 19px;border:1.5px solid transparent;border-radius:100px;font-size:.92rem;line-height:1.5;font-weight:600}
/* CTA phụ "Diễn giả" — trong suốt, ăn theo nền --clay của thanh.
   Chỉ còn chữ và khung bo, không có mảng đặc nên không tranh sự chú ý
   với nút "Đăng ký" nền trắng. Viền lấy currentColor để luôn khớp màu chữ. */
.mbar a.phu{background:transparent;color:#fff;border-color:currentColor;font-weight:500}
@media(min-width:900px){.mbar{display:none}}

/* ---------- chữ sáng & nổi theo con trỏ ---------- */
/* Tách theo TỪ (không tách ký tự — dấu tiếng Việt sẽ vỡ).
   Toàn bộ độ nổi + quầng sáng do main.js đặt trực tiếp, không dùng transition
   để không trễ nhịp so với con trỏ. Quầng sáng lấy currentColor nên luôn
   nằm trong bảng màu gốc, không thêm mã màu nào. */
.gw{display:inline-block}

/* Quầng sáng tại điểm chạm / con trỏ — cảm giác mặt nước.
   Lớp ngoài .cham chỉ lo DI CHUYỂN (translate), lớp trong <i> lo PHỒNG THỞ (scale);
   tách hai lớp để hai transform không đè lên nhau.
   mix-blend-mode:screen nên nó "cộng sáng" vào nền — rõ nhất trên các
   section nền --forest, dịu hơn trên nền sáng. Không chặn chạm, không chặn cuộn. */
.cham{
  position:fixed;left:0;top:0;width:0;height:0;
  pointer-events:none;z-index:64;opacity:0;
  /* Đỗ sẵn ngoài màn hình: nếu để ở 0,0 thì lớp <i> bên trong thò sang
     trái 130px ngay khi tải trang, làm body.scrollWidth phình thêm 142px. */
  transform:translate3d(-9999px,-9999px,0);
  will-change:transform,opacity;transition:opacity .45s ease-out
}
.cham i{
  position:absolute;left:0;top:0;display:block;
  width:260px;height:260px;margin:-130px 0 0 -130px;
  border-radius:50%;mix-blend-mode:screen;
  background:radial-gradient(circle,
    color-mix(in srgb,var(--warm-white) 40%,transparent) 0%,
    color-mix(in srgb,var(--taupe) 19%,transparent) 42%,
    transparent 70%);
  animation:thoNuoc 3.6s ease-in-out infinite
}
.cham.on{opacity:1}
/* Con trỏ chuột trên desktop dịu hơn hẳn ngón tay — chuột đứng yên lâu,
   để sáng bằng mức cảm ứng thì chói mắt. */
.cham.on.chuot{opacity:.4}
@keyframes thoNuoc{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}

/* Ánh sáng lan toả khi chạm xuống — một vùng sáng mềm nở ra rồi tan.
   KHÔNG dùng viền: viền tạo ra vòng tròn có nét, chạm nhiều lần thành
   nhiều vòng đồng tâm trông như vân gỗ. Ở đây chỉ có gradient tán mờ. */
.song{
  position:fixed;width:280px;height:280px;margin:-140px 0 0 -140px;
  border-radius:50%;pointer-events:none;z-index:64;
  background:radial-gradient(circle,
    color-mix(in srgb,var(--warm-white) 44%,transparent) 0%,
    color-mix(in srgb,var(--taupe) 22%,transparent) 46%,
    transparent 74%);
  mix-blend-mode:screen;will-change:transform,opacity;
  animation:lanSang 1.5s cubic-bezier(.2,.7,.3,1) forwards
}
@keyframes lanSang{
  0%{transform:scale(.28);opacity:.9}
  100%{transform:scale(1.45);opacity:0}
}

/* ---------- nút nổi: về đầu trang + liên hệ hỗ trợ ---------- */
.totop,.support{
  position:fixed;z-index:65;display:grid;place-items:center;
  border-radius:50%;cursor:pointer;padding:0;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .4s,transform .4s,visibility .4s,background .3s,border-color .3s,color .3s
}
.totop.show,.support.show{visibility:visible;transform:none}

/* mũi tên về đầu trang — nền kính mờ trong suốt, nét mũi tên màu đậm.
   Nền chỉ 40% pearl nên nhìn xuyên được, nhưng vẫn đủ để nét --ink đạt
   tương phản 3.9:1 khi nút trôi qua section nền --forest tối nhất. */
.totop{
  left:calc(var(--vw,100%) / 2);margin-left:-21px;bottom:22px;width:42px;height:42px;
  background:color-mix(in srgb,var(--pearl) 40%,transparent);
  border:1px solid color-mix(in srgb,var(--sage) 60%,transparent);
  color:var(--ink);
  -webkit-backdrop-filter:blur(12px) saturate(1.25);
  backdrop-filter:blur(12px) saturate(1.25)
}
.totop.show{opacity:1}
.totop:hover,.totop:focus-visible{
  background:color-mix(in srgb,var(--pearl) 72%,transparent);
  border-color:var(--sage)
}

/* điện thoại hỗ trợ, góc dưới bên phải.
   Dùng --taupe: đây là màu DUY NHẤT trong bảng không được dùng làm nền
   section nào, nên nút không bao giờ lẫn vào nền khi trôi qua trang.
   Nét icon --ink cho tương phản 4.4:1. */
.support{
  left:calc(var(--vw,100%) - 70px);bottom:22px;width:52px;height:52px;
  background:var(--taupe);border:1px solid var(--warm-white);color:var(--ink);
  box-shadow:0 0 18px 2px color-mix(in srgb,var(--taupe) 55%,transparent),var(--shadow-soft)
}
.support.show{opacity:1;animation:toaSang 2.8s ease-out infinite}
.support:hover,.support:focus-visible{
  background:color-mix(in srgb,var(--taupe) 78%,var(--ink));border-color:var(--warm-white)
}
/* quầng sáng lan ra rồi tan — tạo chú ý mà không chói */
@keyframes toaSang{
  0%{box-shadow:0 0 18px 2px color-mix(in srgb,var(--taupe) 55%,transparent),
                0 0 0 0 color-mix(in srgb,var(--taupe) 45%,transparent),var(--shadow-soft)}
  70%{box-shadow:0 0 18px 2px color-mix(in srgb,var(--taupe) 55%,transparent),
                 0 0 0 15px color-mix(in srgb,var(--taupe) 0%,transparent),var(--shadow-soft)}
  100%{box-shadow:0 0 18px 2px color-mix(in srgb,var(--taupe) 55%,transparent),
                  0 0 0 0 color-mix(in srgb,var(--taupe) 0%,transparent),var(--shadow-soft)}
}
.support svg{animation:rung 5s ease-in-out infinite}
@keyframes rung{
  0%,86%,100%{transform:rotate(0)}
  88%{transform:rotate(-12deg)} 90%{transform:rotate(10deg)}
  92%{transform:rotate(-8deg)}  94%{transform:rotate(6deg)}
  96%{transform:rotate(-4deg)}  98%{transform:rotate(2deg)}
}

/* Dưới 900px thanh CTA dính mới tồn tại — chỉ khi đó mới đẩy hai nút lên trên nó. */
@media(max-width:899px){
  .totop{width:38px;height:38px;margin-left:-19px}
  .support{width:48px;height:48px;left:calc(var(--vw,100%) - 62px)}
  body.mbar-on .totop,body.mbar-on .support{bottom:86px}
}
/* Điện thoại: nút "Đăng ký" ở nav và ở thanh dính to lên ~15%.
   Đã đo chỗ trống trong hộp chứa: nav còn thừa 142px, thanh dính còn 153px
   nên nút to thêm vẫn không chạm mép hộp. */
@media(max-width:767px){
  .nav .btn{padding:13px 24px;font-size:1.02rem}
  .mbar a{padding:13px 24px;font-size:1.02rem}
}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(32px)}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important}
  .marquee-track{animation:none}
  .support svg{animation:none}
  .support.show{animation:none}
  .gw{transform:none!important;text-shadow:none!important}
  .cham,.song{display:none}
  .cham i{animation:none}
  *{transition:none!important}
}


/* Dòng dẫn "Bạn chỉ cần:" tách khỏi <ul> vì <b> làm con trực tiếp của <ul>
   là sai chuẩn (chỉ <li> được phép). Kiểu chữ dùng chung selector với
   .commit-list b nên nhìn không đổi; chỉ cần bù lại khoảng cách trên. */
.commit-lead{margin-top:28px;padding-top:26px;border-top:1px solid var(--soft-sage)}
.commit-list{margin-top:0;padding-top:0;border-top:0}

/* Tiêu đề: chia dòng cân đối thay vì để rớt một chữ trơ trọi xuống dòng cuối.
   Ở trang này KHÔNG dùng được NBSP: hiệu ứng chữ sáng theo con trỏ cắt mỗi từ
   thành <span class="gw"> display:inline-block, mà trình duyệt vẫn ngắt dòng
   được giữa hai khối inline-block dù có NBSP ở giữa — đã thử và đo tận nơi.
   text-wrap:balance làm việc ở tầng ngắt dòng nên không bị script kia phá.
   Trình duyệt cũ không hiểu thì bỏ qua, chữ vẫn chảy như trước. */
h1, h2, h3, .disp { text-wrap: balance; }