dialog.wl{border:0;padding:0;background:transparent;max-width:min(560px,calc(100vw - 24px));width:100%;max-height:calc(100vh - 24px);overflow:auto}
dialog.wl::backdrop{background:rgba(36,30,33,.55)}
.wl-box{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:clamp(20px,4vw,32px);position:relative;color:var(--ink)}
.wl-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border:0;border-radius:50%;background:var(--soft);color:var(--ink);font-size:1.2rem;line-height:1;cursor:pointer}
.wl-box h2{font-size:1.5rem;padding-right:40px}
.wl-box .wl-course{margin-top:6px;color:var(--pink);font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.wl-box fieldset{border:0;padding:0;margin:18px 0 0}
.wl-box legend{font-size:.88rem;font-weight:500;padding:0}
.wl-box .wlr{color:var(--pink)}
.wl-box .opts{display:grid;gap:8px;margin-top:8px}
.wl-box .opt{display:flex;align-items:center;gap:10px;margin:0;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg);font-weight:300;cursor:pointer}
.wl-box .opt input{width:auto;margin:0;accent-color:var(--pink)}
.wl-box .opt:has(input:checked){border-color:var(--pink);background:var(--soft)}
.wl-box .hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.wl-box .btn{width:100%;margin-top:22px}
.wl-box .btn[disabled]{opacity:.6;cursor:wait}
.wl-err{margin-top:12px;font-size:.92rem;color:#B3261E}
.wl-done{text-align:center;padding:10px 0}
.wl-done h2{padding:0;margin-bottom:10px}
.wl-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.cbtns{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.cbtns .btn{padding:10px 18px;font-size:.95rem}
.video.has{display:block;padding:0;overflow:hidden;background:#000}
.video.has::before{display:none}
.video.has video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.video.has{position:relative}
.vsound{position:absolute;top:14px;left:14px;z-index:2;font:600 .95rem var(--body);color:#fff;background:var(--pink);border:2px solid #fff;border-radius:999px;padding:9px 16px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.25);animation:vpulse 1.8s ease-in-out infinite}
.vsound:hover{background:var(--pink-deep)}
.vsound:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
@keyframes vpulse{50%{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.vsound{animation:none}}
a.thumb.has{display:block;width:100%;padding:0;overflow:hidden;border:0;background:var(--soft)}
a.thumb.has img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
a.thumb.has:hover img{transform:scale(1.03)}
a.thumb.has:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
/* ---- icon, thẻ so sánh, lộ trình, linh vật ---- */
.ic{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#FBE3EC;font-size:1.4rem;font-style:normal;line-height:1;margin-bottom:12px}
.req > div.hasic{display:grid;grid-template-columns:46px 1fr;column-gap:14px;align-items:start;border-left:0;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:16px}
.req > div.hasic .ic{grid-row:span 2;margin:0}
.how .ic{margin-bottom:10px}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}
.vs > div{min-width:0;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;border-top:4px solid var(--pink)}
.vs > .vs-f{border-top-color:#4A1236}
.vs > .vs-f .ic{background:#EFE3EA}
.vs-tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}
.vs h3{font-size:1.5rem;margin-top:2px}
.vs dl{margin:14px 0 0}
.vs dt{font-weight:600;font-size:.86rem}
.vs dd{margin:1px 0 10px;color:var(--muted);font-size:.95rem}
.part.core-part{background:#FBEFF4;border-color:#F0C9D8}
.part.core-part .pn{color:var(--pink)}
.core-head{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:end}
.core-head .mascot{width:150px;height:auto;margin-bottom:-20px}
.next.cta-next{grid-template-columns:1fr auto;align-items:center}
.next.cta-next .mascot{width:150px;height:auto}
.wl-done .mascot{width:120px;height:auto;display:block;margin:0 auto 6px}
.course > a.thumb.has{margin-bottom:10px}
@media (max-width:760px){
  .vs{grid-template-columns:1fr}
  .core-head .mascot{width:96px;margin-bottom:-8px}
  .next.cta-next .mascot{width:96px}
}
/* ---- người dạy, sản phẩm thật, kêu gọi cuối trang ---- */
.wl-box select{width:100%;font:inherit;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);margin-top:5px}
.elly-in{display:grid;grid-template-columns:260px 1fr;gap:32px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:26px}
.elly-pic{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:18px;display:block}
.elly-facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.elly-facts span{background:#FBE3EC;border-radius:999px;padding:8px 14px;font-size:.88rem}
.elly-facts b{color:var(--pink);font-family:var(--display);font-size:1.1rem;margin-right:4px}
.reels{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:22px}
.reel{margin:0;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.reel video{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#000}
.reel figcaption{padding:12px 14px;display:grid;gap:2px}
.reel figcaption span{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--amber)}
.final-cta .next{margin-top:0;border-color:#F0C9D8;background:linear-gradient(135deg,#FFFFFF 0%,#FBE3EC 100%)}
.final-cta .wl-cta .btn.ghost{background:var(--card)}
@media (max-width:760px){
  .elly-in{grid-template-columns:1fr;gap:18px;padding:18px}
  .elly-pic{max-width:220px}
}
.part.bonus-part{background:#FFF7E8;border-color:#EBD3A8;border-style:dashed}
.part.bonus-part .pn{color:var(--amber);font-weight:600}
.wl-box textarea{width:100%;font:inherit;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);margin-top:5px;resize:vertical}
.wl-box textarea:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
/* ---- workflow 3 bước ---- */
.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:12px;align-items:stretch;margin-top:24px}
.flow-step{min-width:0;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px}
.flow-step:last-child{border-color:#F0C9D8;background:linear-gradient(135deg,#FFFFFF 0%,#FBE3EC 100%)}
.flow-tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--amber)}
.flow-step p{margin-top:8px;font-size:.96rem}
.flow-step q{display:block;margin-top:2px;background:#FBE3EC;border-radius:14px 14px 14px 4px;padding:10px 14px;font-style:italic;quotes:"“" "”"}
.flow-arrow{align-self:center;font-size:1.6rem;color:var(--pink);font-weight:700}
@media (max-width:760px){
  .flow{grid-template-columns:1fr}
  .flow-arrow{justify-self:center;transform:rotate(90deg);line-height:1}
}
.flow-step .say{background:#FBE3EC;border-radius:8px;padding:1px 6px;font-style:italic}
/* ---- form: đầu cố định, câu hỏi cuộn, nút gửi cố định ---- */
dialog.wl{width:min(600px,calc(100vw - 32px));max-width:none;max-height:min(760px,86vh);overflow:hidden;margin:auto}
dialog.wl[open]{display:flex}
.wl-box{display:flex;flex-direction:column;width:100%;max-height:inherit;padding:0;overflow:hidden}
.wl-x{z-index:2}
.wl-head{flex:none;padding:24px 64px 14px 28px;border-bottom:1px solid var(--line);background:var(--card)}
.wl-head h2{padding-right:0}
.wl-lead{margin-top:6px;font-size:.95rem}
#wlForm{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.wl-fields{flex:1 1 auto;min-height:0;overflow-y:auto;padding:4px 28px 20px;overscroll-behavior:contain}
.wl-fields > label:first-child,.wl-fields > #wlPick:first-child label{margin-top:12px}
.wl-foot{flex:none;padding:12px 28px 20px;border-top:1px solid var(--line);background:var(--card)}
.wl-foot .btn{margin-top:0}
.wl-foot .wl-err{margin:0 0 10px}
.wl-done{overflow-y:auto;padding:32px 28px}
.wl-box .opts{grid-template-columns:1fr 1fr;gap:8px}
.wl-box .opt{padding:9px 12px;font-size:.92rem;line-height:1.35}
@media (max-width:520px){
  dialog.wl{width:calc(100vw - 24px);max-height:88vh}
  .wl-head{padding:18px 56px 12px 18px}
  .wl-head h2{font-size:1.3rem}
  .wl-fields{padding:2px 18px 16px}
  .wl-foot{padding:10px 18px 16px}
  .wl-box .opt{padding:8px 10px;font-size:.88rem}
  .wl-done{padding:24px 18px}
}
.wl-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wl-row > div{min-width:0}
@media (max-width:520px){ .wl-row{grid-template-columns:1fr;gap:0} }
@media (max-width:520px){
  .wl-head .wl-course{font-size:.68rem;letter-spacing:.05em}
  .wl-lead{font-size:.86rem;line-height:1.45;margin-top:4px}
}
/* ---- gợi ý sửa email ---- */
.wl-hint{margin-top:6px;padding:8px 10px;border-radius:10px;background:#FFF7E8;border:1px solid #EBD3A8;font-size:.86rem;line-height:1.5}
.wl-hint b{color:var(--pink-deep);word-break:break-all}
.wl-hint button{font:inherit;font-size:.82rem;border:0;border-radius:999px;padding:3px 10px;margin:4px 6px 0 0;cursor:pointer}
.wl-hint .wl-fix{background:var(--pink);color:#fff}
.wl-hint .wl-keep{background:transparent;color:var(--muted);text-decoration:underline}
/* ---- điện thoại: lộ trình thu gọn, video lên trên, nút thẻ khoá dàn đều ---- */
.parts-tip{display:none}
@media (max-width:760px){
  .parts-tip{display:block;margin-top:14px;font-size:.86rem;color:var(--muted)}
  .parts{margin-top:10px}
  .part{cursor:pointer;position:relative;padding:14px 44px 14px 18px}
  .part .pdesc{display:none}
  .part.open .pdesc{display:block}
  .part h3::after{content:"";position:absolute;right:18px;top:20px;width:9px;height:9px;border-right:2px solid var(--pink);border-bottom:2px solid var(--pink);transform:rotate(45deg);transition:transform .2s}
  .part.open h3::after{transform:rotate(-135deg);top:24px}
  .part:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
  /* phần đầu trang: tiêu đề → video → đoạn giới thiệu → nút */
  .hero{display:flex;flex-direction:column}
  .hero > div:first-child{display:contents}
  .hero .eyebrow{order:1;align-self:flex-start}
  .hero h1{order:2}
  .hero .video{order:3;margin-top:18px}
  .hero p.lead{order:4;margin-top:16px}
  .hero .hero-cta{order:5}
  .hero .facts{order:6}
  /* nút trong thẻ khoá: dàn hết bề ngang */
  .cbtns{display:grid;grid-template-columns:1fr;width:100%;gap:8px}
  .cbtns .btn{width:100%;text-align:center;justify-content:center}
}