/* =========================================================
   9LISTENING DESIGN SYSTEM — 9ls-core.css (v1.0)
   Stylesheet dùng chung cho MỌI trang 9LS (template page-9ls-*).
   Gồm: tokens (:root), base, layout (.wrap/.section), buttons,
   header/nav, hero, demo, roadmap, modal, pricing, faq, footer...
   Trang mới: enqueue file này TRƯỚC, rồi thêm css riêng nếu cần.
   ========================================================= */
:root{
  --cream:#FBFAF6;
  --cream-2:#F4EFE2;
  --paper:#FFFFFF;
  --ink:#1A1816;
  --ink-2:#312D29;
  --muted:#6B6258;
  --frame:#D8D0C4;
  --accent:#E8590C;
  --accent-dark:#B54708;
  --yellow:#FFE34A;
  --green:#2F6B43;
  --green-soft:#E8F3EB;
  --red-soft:#FFF0E8;
  --shadow:0 16px 50px rgba(26,24,22,.09);
  --sans:'Plus Jakarta Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --serif:'Newsreader',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--cream);
  color:var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
button,input{font:inherit}
a{color:inherit}
img,svg{display:block;max-width:100%}
section[id]{scroll-margin-top:90px}
.wrap{width:min(1120px,calc(100% - 48px));margin-inline:auto}
.section{padding:88px 0}
.section.alt{background:var(--cream-2)}
.section-head{max-width:720px;margin-bottom:42px}
.section-head.center{text-align:center;margin-inline:auto}
.section-head h2{
  font-size:clamp(30px,4vw,44px);
  line-height:1.15;
  letter-spacing:-.035em;
  margin:14px 0 12px;
}
.section-head p{font-size:17px;color:var(--muted)}
.kicker{
  display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--accent);
}
.kicker::before{content:"";width:26px;height:2px;background:var(--accent)}
.kicker.center{justify-content:center}
.highlight{
  background:linear-gradient(transparent 55%,var(--yellow) 55%,var(--yellow) 94%,transparent 94%);
  padding-inline:3px;
}
.serif{font-family:var(--serif);font-style:italic;font-weight:500}
.eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:50px;padding:13px 25px;border-radius:999px;
  border:2px solid transparent;text-decoration:none;
  font-weight:800;font-size:15px;cursor:pointer;
  transition:transform .14s ease,box-shadow .14s ease,background .14s ease,color .14s ease;
}
.btn-primary{
  color:#fff;background:var(--accent);
  box-shadow:0 4px 0 var(--accent-dark);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--accent-dark)}
.btn-primary:active{transform:translateY(2px);box-shadow:0 2px 0 var(--accent-dark)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{transform:translateY(-2px)}
.btn-ghost{border-color:var(--ink);background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-small{min-height:42px;padding:9px 18px;font-size:13px}
.btn:focus-visible,.play:focus-visible,.menu-toggle:focus-visible,input:focus-visible,summary:focus-visible,
.level-demo-btn:focus-visible,.level-modal-close:focus-visible,.modal-play:focus-visible{
  outline:3px solid var(--accent);outline-offset:3px
}

/* Header */
.header{
  position:sticky;top:0;z-index:100;
  background:rgba(251,250,246,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(216,208,196,.9);
}
.header-in{height:70px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:20px;font-weight:800;letter-spacing:-.03em}
.logo .nine{color:var(--accent)}
.bars{display:flex;align-items:flex-end;gap:3px;height:24px}
.bars i{display:block;width:4px;border-radius:99px;background:var(--accent)}
.bars i:nth-child(1){height:9px}.bars i:nth-child(2){height:17px}.bars i:nth-child(3){height:24px;outline:2px solid var(--yellow);outline-offset:1px}.bars i:nth-child(4){height:14px}.bars i:nth-child(5){height:8px}
.nav{display:flex;align-items:center;gap:24px}
.nav>a:not(.btn){font-size:14px;font-weight:700;text-decoration:none;color:var(--ink-2)}
.nav>a:not(.btn):hover{color:var(--accent)}
.menu-toggle{display:none;background:none;border:0;font-size:26px;cursor:pointer;color:var(--ink)}

/* Hero */
.hero{padding:70px 0 72px}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
  gap:56px;align-items:center;
}
.hero-grid>*{min-width:0}
.hero h1{
  font-size:clamp(39px,5vw,60px);
  line-height:1.08;letter-spacing:-.045em;
  margin:18px 0 18px;
}
.hero-sub{font-size:18px;color:var(--muted);max-width:56ch}
.hero-sub strong{color:var(--ink)}
.hero-actions{display:flex;gap:13px;flex-wrap:wrap;margin-top:28px}
.hero-note{display:flex;flex-wrap:wrap;gap:14px;margin-top:17px;color:var(--muted);font-size:13px}
.hero-note span{display:flex;align-items:center;gap:7px}
.hero-note b{color:var(--green)}
.micro-proof{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:28px;
}
.micro-proof div{
  border:1px solid var(--frame);background:rgba(255,255,255,.55);
  border-radius:13px;padding:12px 10px;text-align:center;
}
.micro-proof strong{display:block;font-size:15px}
.micro-proof span{font-size:11px;color:var(--muted)}

/* Demo */
.demo{
  background:var(--paper);border:1px solid var(--frame);
  border-radius:22px;padding:24px;box-shadow:var(--shadow);position:relative;
}
.demo-tag{
  position:absolute;top:-14px;left:22px;
  padding:6px 12px;border-radius:999px;
  background:var(--yellow);font-family:var(--mono);
  font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
}
.demo-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.demo-head h3{font-size:16px;line-height:1.4}
.demo-head span{font-family:var(--mono);font-size:10px;color:var(--muted);text-align:right}
.player{
  display:flex;align-items:center;gap:14px;background:var(--cream-2);
  padding:13px 15px;border-radius:14px;margin-bottom:17px;
}
.play{
  flex:0 0 auto;width:47px;height:47px;border-radius:50%;border:0;
  display:grid;place-items:center;background:var(--accent);color:#fff;
  box-shadow:0 3px 0 var(--accent-dark);cursor:pointer;
}
.play svg{width:18px;height:18px;fill:currentColor}
.wave{height:34px;display:flex;align-items:center;gap:3px;flex:1;min-width:0}
.wave i{flex:1;min-width:2px;height:var(--h);background:var(--frame);border-radius:99px}
.wave.playing i{background:var(--accent);animation:pulse .8s ease-in-out infinite alternate}
.wave.playing i:nth-child(3n){animation-delay:.15s}
.wave.playing i:nth-child(3n+1){animation-delay:.3s}
@keyframes pulse{from{transform:scaleY(.48)}to{transform:scaleY(1.12)}}
.time{font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap}
.instruction{font-size:13px;font-weight:800;margin-bottom:8px}
.question{
  display:grid;grid-template-columns:24px auto minmax(0,1fr) 20px;
  align-items:center;gap:9px;padding:9px 0;border-bottom:1px dashed var(--frame);
}
.question:last-of-type{border-bottom:0}
.qnum{
  width:23px;height:23px;border-radius:50%;display:grid;place-items:center;
  background:var(--ink);color:#fff;font-family:var(--mono);font-size:10px;
}
.question label{font-size:13px;white-space:nowrap}
.question input{
  width:100%;min-width:0;border:0;border-bottom:2px solid var(--ink);
  padding:5px 6px;background:transparent;font-family:var(--mono);font-size:13px;
}
.question input:focus{outline:0;border-bottom-color:var(--accent);background:#FFF9DF}
.question.correct input{border-bottom-color:var(--green);color:var(--green)}
.question.wrong input{border-bottom-color:var(--accent);color:var(--accent)}
.mark{font-weight:800}
.question.correct .mark{color:var(--green)}.question.wrong .mark{color:var(--accent)}
.demo-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:16px}
.score{font-family:var(--mono);font-size:11px;color:var(--muted)}
.feedback{
  display:none;margin-top:14px;padding:15px;border-radius:14px;
  background:var(--red-soft);border:1px solid #F6C6AD;font-size:13px;
}
.feedback.show{display:block}
.feedback h4{font-size:14px;margin-bottom:7px}
.feedback p+p{margin-top:7px}
.feedback .trap{font-family:var(--mono);font-size:11px;color:var(--accent);font-weight:600}
.feedback .next{
  margin-top:10px;padding-top:10px;border-top:1px dashed #E5B49A;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}

/* Problem cards */
.problem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.problem{
  background:var(--paper);border:1px solid var(--frame);border-radius:18px;padding:22px;
}
.problem .icon{font-size:25px;margin-bottom:13px}
.problem h3{font-size:17px;line-height:1.35;margin-bottom:7px}
.problem p{font-size:14px;color:var(--muted)}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{
  background:var(--paper);border:1px solid var(--frame);border-radius:20px;padding:26px;
  position:relative;overflow:hidden;
}
.step::after{
  content:attr(data-step);position:absolute;right:12px;top:-12px;
  font-family:var(--mono);font-size:76px;font-weight:600;color:rgba(232,89,12,.07)
}
.step .step-label{font-family:var(--mono);font-size:10px;color:var(--accent);font-weight:600;letter-spacing:.1em}
.step h3{font-size:20px;margin:12px 0 8px}
.step p{font-size:14px;color:var(--muted)}
.step ul{list-style:none;margin-top:15px;display:grid;gap:7px}
.step li{font-size:13px;display:flex;gap:8px}
.step li::before{content:"✓";color:var(--green);font-weight:800}

/* Progressive allocation: short to long, easy to hard */
.growth-panel{
  background:var(--ink);color:#fff;border-radius:28px;padding:46px;overflow:hidden;position:relative;
}
.growth-panel::before{
  content:"";position:absolute;width:360px;height:360px;border-radius:50%;
  right:-170px;top:-190px;background:rgba(232,89,12,.16);
}
.growth-head{
  position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(280px,.75fr);
  gap:48px;align-items:end;margin-bottom:32px;
}
.growth-head .kicker{color:#F5C25C}
.growth-head .kicker::before{background:#F5C25C}
.growth-head h2{font-size:clamp(30px,4vw,44px);line-height:1.14;letter-spacing:-.035em;margin:14px 0 0}
.growth-head h2 span{color:var(--yellow)}
.growth-head>p{color:#CEC7BD;font-size:16px}
.growth-axis{position:relative;display:flex;align-items:center;gap:12px;margin:0 4px 20px}
.growth-axis span{font-family:var(--mono);font-size:9px;color:#B8AFA4;white-space:nowrap;letter-spacing:.07em}
.growth-axis i{height:2px;flex:1;background:linear-gradient(90deg,#6C6258,var(--accent),var(--yellow));position:relative}
.growth-axis i::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%) rotate(45deg);width:8px;height:8px;border-top:2px solid var(--yellow);border-right:2px solid var(--yellow)}
.growth-flow{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.growth-stage{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:19px;padding:22px;
}
.growth-stage:nth-child(2){transform:translateY(-7px)}
.growth-stage:nth-child(3){transform:translateY(-14px);background:rgba(255,255,255,.1)}
.growth-stage .stage-label{font-family:var(--mono);font-size:10px;color:#F5C25C;font-weight:600;letter-spacing:.09em}
.growth-stage h3{font-size:19px;line-height:1.35;margin:10px 0 7px}
.growth-stage>p{font-size:13px;color:#CFC8BE;min-height:62px}
.growth-meter{margin:17px 0 14px}
.growth-meter-head{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:9px;color:#ACA397;margin-bottom:7px}
.growth-meter-track{height:8px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.growth-meter-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--yellow))}
.growth-stage ul{list-style:none;display:grid;gap:7px}
.growth-stage li{position:relative;padding-left:13px;font-size:12px;color:#F0ECE6}
.growth-stage li::before{content:"";position:absolute;left:0;top:.62em;width:4px;height:4px;border-radius:50%;background:var(--yellow)}
.growth-rule{
  position:relative;margin-top:24px;padding:17px 19px;border-radius:15px;
  background:rgba(255,227,74,.1);border:1px solid rgba(255,227,74,.24);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.growth-rule b{font-size:14px;color:#fff}
.growth-rule span{font-size:12px;color:#CFC8BE;max-width:58ch}

/* Teaching proof */
.teach-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:46px;align-items:center}
.teach-copy h2{font-size:clamp(30px,4vw,44px);line-height:1.15;letter-spacing:-.035em;margin:14px 0}
.teach-copy>p{color:var(--muted);font-size:17px}
.teach-list{display:grid;gap:12px;margin-top:24px}
.teach-list li{list-style:none;display:flex;gap:11px;font-size:14px}
.teach-list b{display:block}
.teach-list span{color:var(--muted)}
.tick-round{
  flex:0 0 auto;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;background:var(--green);color:#fff;font-size:12px;font-weight:800;
}
.explain-card{
  background:var(--paper);border:1px solid var(--frame);border-radius:22px;padding:26px;box-shadow:var(--shadow)
}
.explain-top{display:flex;justify-content:space-between;gap:16px;margin-bottom:17px}
.explain-top h3{font-size:16px}
.explain-top span{font-family:var(--mono);font-size:10px;color:var(--muted)}
.transcript{
  font-size:15px;line-height:1.9;background:var(--cream-2);padding:18px;border-radius:14px;
}
.wrong-word{text-decoration:line-through;color:var(--muted)}
.answer-word{background:var(--yellow);font-weight:800;padding:1px 4px}
.cue{font-weight:800;color:var(--accent)}
.explain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.explain-mini{padding:13px;border:1px solid var(--frame);border-radius:13px}
.explain-mini b{font-size:12px}
.explain-mini p{font-size:12px;color:var(--muted);margin-top:4px}

/* Roadmap */
.roadmap{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.level{
  position:relative;background:var(--paper);border:1px solid var(--frame);
  border-radius:18px;padding:20px 17px;min-height:330px;
  display:flex;flex-direction:column;
}
.level::before{
  content:"";position:absolute;left:50%;top:-13px;width:13px;height:13px;
  border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px var(--cream-2)
}
.level .num{
  font-family:var(--mono);font-size:11px;color:var(--accent);font-weight:600;
  letter-spacing:.08em;
}
.level h3{font-size:17px;line-height:1.35;margin:10px 0}
.level p{font-size:13px;color:var(--muted)}
.level ul{list-style:none;margin-top:13px;display:grid;gap:6px}
.level li{font-size:12px;padding-left:12px;position:relative}
.level li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--accent);position:absolute;left:0;top:.65em}
.level-demo{
  margin-top:auto;padding-top:17px;border-top:1px dashed var(--frame);
  display:grid;gap:7px;
}
.level-demo-btn{
  width:100%;min-height:40px;border:2px solid var(--accent);border-radius:999px;
  background:#fff;color:var(--accent);font-size:12px;font-weight:800;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:7px;
  transition:background .14s ease,color .14s ease,transform .14s ease;
}
.level-demo-btn:hover{background:var(--accent);color:#fff;transform:translateY(-1px)}
.level-demo span{font-family:var(--mono);font-size:9px;color:var(--muted);text-align:center}
.road-line{height:1px;background:var(--frame);margin:0 6% -1px;transform:translateY(0)}
.roadmap-helper{
  margin-top:28px;padding:19px 22px;border:1px solid var(--frame);border-radius:18px;
  background:rgba(255,255,255,.68);display:flex;align-items:center;justify-content:space-between;gap:22px;
}
.roadmap-helper strong{display:block;font-size:15px}
.roadmap-helper span{display:block;color:var(--muted);font-size:13px;margin-top:2px}

/* Level demo modal */
body.modal-open{overflow:hidden}
.level-modal{position:fixed;inset:0;z-index:300;display:none;place-items:center;padding:24px}
.level-modal.open{display:grid}
.level-modal-backdrop{position:absolute;inset:0;background:rgba(26,24,22,.62);backdrop-filter:blur(5px)}
.level-modal-dialog{
  position:relative;width:min(650px,100%);max-height:min(760px,calc(100vh - 48px));overflow:auto;
  background:var(--paper);border:1px solid var(--frame);border-radius:24px;padding:28px;
  box-shadow:0 28px 90px rgba(26,24,22,.28);
}
.level-modal-close{
  position:absolute;right:16px;top:16px;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--frame);background:var(--cream);color:var(--ink);font-size:23px;
  line-height:1;cursor:pointer;display:grid;place-items:center;
}
.level-modal-head{padding-right:48px}
.level-modal-head .modal-level{
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;color:var(--accent)
}
.level-modal-head h2{font-size:clamp(25px,5vw,34px);line-height:1.18;letter-spacing:-.03em;margin:9px 0 7px}
.level-modal-head p{font-size:14px;color:var(--muted)}
.modal-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}
.modal-meta span{
  padding:5px 9px;border-radius:999px;background:var(--cream-2);
  font-family:var(--mono);font-size:9px;color:var(--muted)
}
.modal-player{
  margin:22px 0 18px;padding:15px;border-radius:16px;background:var(--cream-2);
  display:flex;align-items:center;gap:14px;
}
.modal-play{
  flex:0 0 auto;width:48px;height:48px;border:0;border-radius:50%;cursor:pointer;
  background:var(--accent);color:#fff;box-shadow:0 3px 0 var(--accent-dark);
  display:grid;place-items:center;
}
.modal-play svg{width:18px;height:18px;fill:currentColor}
.modal-wave{height:34px;display:flex;align-items:center;gap:3px;flex:1;min-width:0}
.modal-wave i{flex:1;min-width:2px;height:var(--h);border-radius:99px;background:var(--frame)}
.modal-wave.playing i{background:var(--accent);animation:pulse .8s ease-in-out infinite alternate}
.modal-wave.playing i:nth-child(3n){animation-delay:.15s}
.modal-wave.playing i:nth-child(3n+1){animation-delay:.3s}
.modal-time{font-family:var(--mono);font-size:10px;color:var(--muted);white-space:nowrap}
.modal-question-box{border:1px solid var(--frame);border-radius:17px;padding:19px}
.modal-question-label{font-family:var(--mono);font-size:9px;color:var(--accent);font-weight:600;letter-spacing:.09em}
.modal-question-box h3{font-size:17px;line-height:1.45;margin:7px 0 15px}
.modal-answer-input{
  width:100%;border:1px solid var(--frame);border-radius:12px;padding:12px 13px;
  background:var(--cream);color:var(--ink);
}
.modal-options{border:0;display:grid;gap:9px}
.modal-option{
  display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border:1px solid var(--frame);
  border-radius:12px;cursor:pointer;background:#fff;font-size:13px;
}
.modal-option:hover{border-color:var(--accent);background:#FFF9F3}
.modal-option input{margin-top:4px;accent-color:var(--accent)}
.modal-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px}
.modal-result{font-family:var(--mono);font-size:10px;color:var(--muted)}
.modal-feedback{
  display:none;margin-top:16px;padding:17px;border-radius:15px;background:var(--red-soft);border:1px solid #F4C4AA;
}
.modal-feedback.show{display:block}
.modal-feedback.correct{background:var(--green-soft);border-color:#BFD9C6}
.modal-feedback h4{font-size:15px;margin-bottom:7px}
.modal-feedback p{font-size:13px;color:var(--ink-2)}
.modal-feedback p+p{margin-top:7px}
.modal-feedback .modal-trap{font-family:var(--mono);font-size:10px;color:var(--accent);font-weight:600}
.modal-feedback.correct .modal-trap{color:var(--green)}
.modal-next{
  margin-top:13px;padding-top:13px;border-top:1px dashed rgba(107,98,88,.35);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.modal-next span{font-size:12px;color:var(--muted)}

/* Skills compact */
.skill-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.skill{
  background:var(--paper);border:1px solid var(--frame);border-radius:19px;padding:24px;
  display:flex;flex-direction:column;
}
.skill-icon{
  width:48px;height:48px;border-radius:14px;background:var(--cream-2);
  display:grid;place-items:center;margin-bottom:16px;color:var(--accent);font-size:22px;
}
.skill .meta{font-family:var(--mono);font-size:10px;color:var(--accent);font-weight:600;letter-spacing:.08em}
.skill h3{font-size:20px;margin:9px 0}
.skill p{font-size:14px;color:var(--muted)}
.skill .trapbox{
  margin-top:auto;padding:12px;background:#FFF9DF;border-radius:12px;
  font-size:12px;color:var(--ink-2)
}
.skill .trapbox b{color:var(--accent)}
.skill a{margin-top:16px;font-weight:800;color:var(--accent);font-size:13px;text-decoration:none}

/* Adaptive */
.adaptive-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:48px;align-items:center}
.adaptive-copy h2{font-size:clamp(30px,4vw,44px);line-height:1.15;letter-spacing:-.035em;margin:14px 0}
.adaptive-copy>p{font-size:17px;color:var(--muted)}
.feature-list{list-style:none;display:grid;gap:15px;margin-top:24px}
.feature-list li{display:flex;gap:12px}
.feature-list b{display:block;font-size:15px}
.feature-list span{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.dashboard{
  background:var(--paper);border:1px solid var(--frame);border-radius:22px;padding:25px;box-shadow:var(--shadow)
}
.dashboard-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:18px}
.dashboard-head h3{font-size:15px}
.dashboard-head span{font-family:var(--mono);font-size:10px;color:var(--muted)}
.bar{margin-bottom:14px}
.bar-row{display:flex;justify-content:space-between;gap:12px;font-size:12px;margin-bottom:5px}
.bar-row b{font-weight:700}.bar-row span{font-family:var(--mono);color:var(--muted);font-size:10px}
.track{height:9px;background:var(--cream-2);border-radius:99px;overflow:hidden}
.fill{height:100%;border-radius:99px;background:var(--green)}
.bar.weak .fill{background:var(--accent)}.bar.weak .bar-row b{color:var(--accent)}
.recommend{
  margin-top:18px;padding:14px;background:#FFF9DF;border:1px dashed #E8C92D;border-radius:13px;font-size:12px
}
.recommend strong{display:block;margin-bottom:4px}

/* Product proof */
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.proof{
  background:var(--paper);border:1px solid var(--frame);border-radius:17px;padding:21px;
}
.proof span{font-size:25px}
.proof h3{font-size:16px;margin:12px 0 6px}
.proof p{font-size:13px;color:var(--muted)}
.trust-note{
  margin-top:22px;padding:16px 18px;border-radius:14px;
  border:1px dashed var(--frame);color:var(--muted);font-size:13px;text-align:center;
}

/* Pricing */
.price-box{
  background:var(--ink);color:#fff;border-radius:26px;padding:52px;
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:36px;align-items:center;
}
.price-box h2{font-size:clamp(28px,4vw,40px);line-height:1.17;letter-spacing:-.03em}
.price-box h2 span{color:var(--yellow)}
.price-box p{color:#CFC8BE;margin-top:12px;max-width:54ch}
.price-actions{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.price-actions small{color:#AFA69C;font-size:12px}
.free-paid{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px}
.free-paid div{font-size:12px;color:#D6D0C7}
.free-paid b{display:block;color:#fff;font-size:13px}

/* FAQ */
.faq{max-width:840px;margin-inline:auto;display:grid;gap:12px}
details{
  background:var(--paper);border:1px solid var(--frame);border-radius:15px;padding:0 20px;
}
summary{
  list-style:none;cursor:pointer;font-weight:800;padding:18px 30px 18px 0;position:relative;
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:23px;color:var(--accent)}
details[open] summary::after{content:"−"}
details p{padding:0 0 18px;color:var(--muted);font-size:14px}

/* Final CTA and footer */
.final-cta{text-align:center;padding:76px 0}
.final-cta h2{font-size:clamp(30px,4vw,45px);line-height:1.15;letter-spacing:-.035em;max-width:760px;margin:0 auto 14px}
.final-cta p{color:var(--muted);margin-bottom:24px}
.footer{border-top:1px solid var(--frame);padding:34px 0;color:var(--muted);font-size:13px}
.footer-in{display:flex;justify-content:space-between;gap:20px;align-items:center;flex-wrap:wrap}
.footer nav{display:flex;gap:20px;flex-wrap:wrap}
.footer a{text-decoration:none}.footer a:hover{color:var(--accent)}

@media (max-width:980px){
  .hero-grid,.teach-grid,.adaptive-grid{grid-template-columns:1fr;gap:38px}
  .growth-head{grid-template-columns:1fr;gap:18px}
  .growth-flow{grid-template-columns:1fr}
  .growth-stage:nth-child(2),.growth-stage:nth-child(3){transform:none}
  .growth-stage>p{min-height:0}
  .growth-axis{display:none}
  .problem-grid,.proof-grid{grid-template-columns:repeat(2,1fr)}
  .roadmap{grid-template-columns:repeat(3,1fr)}
  .roadmap-helper{align-items:flex-start}
  .road-line{display:none}
  .price-box{grid-template-columns:1fr}
}
@media (max-width:780px){
  .wrap{width:min(100% - 32px,1120px)}
  .section{padding:66px 0}
  .nav{
    display:none;position:absolute;top:70px;left:0;right:0;
    background:var(--cream);padding:20px 16px;border-bottom:1px solid var(--frame);
    flex-direction:column;align-items:flex-start;gap:17px;
  }
  .nav.open{display:flex}
  .nav .btn{width:100%}
  .menu-toggle{display:block}
  .steps,.skill-grid{grid-template-columns:1fr}
  .roadmap{grid-template-columns:repeat(2,1fr)}
  .explain-grid{grid-template-columns:1fr}
  .price-box{padding:36px 24px}
  .hero{padding-top:54px}
}
@media (max-width:520px){
  .wrap{width:min(100% - 28px,1120px)}
  .hero h1{font-size:39px}
  .hero-actions .btn{width:100%}
  .hero-note{display:grid;gap:7px}
  .micro-proof{grid-template-columns:1fr 1fr}
  .micro-proof div:last-child{grid-column:1 / -1}
  .demo{padding:20px 16px}
  .demo-head{display:block}
  .demo-head span{display:block;text-align:left;margin-top:4px}
  .question{grid-template-columns:23px minmax(0,1fr) 20px}
  .question label{grid-column:2 / 3;white-space:normal}
  .question input{grid-column:2 / 3}
  .question .mark{grid-column:3;grid-row:1 / span 2}
  .demo-foot{align-items:flex-start;flex-direction:column}
  .demo-foot .btn{width:100%}
  .feedback .next{align-items:flex-start;flex-direction:column}
  .problem-grid,.proof-grid,.roadmap{grid-template-columns:1fr}
  .level{min-height:0}
  .roadmap-helper{flex-direction:column;align-items:stretch}
  .roadmap-helper .btn{width:100%}
  .level-modal{padding:12px}
  .level-modal-dialog{max-height:calc(100vh - 24px);padding:23px 18px;border-radius:20px}
  .level-modal-close{right:11px;top:11px}
  .modal-actions,.modal-next{align-items:stretch;flex-direction:column}
  .modal-actions .btn,.modal-next .btn{width:100%}
  .level{min-height:auto}
  .level::before{display:none}
  .growth-panel{padding:32px 20px;border-radius:22px}
  .growth-rule{align-items:flex-start;flex-direction:column}
  .price-box{padding:32px 20px}
  .footer-in{align-items:flex-start;flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* =========================================================
   9LISTENING — WARM LEARNING LAB REDESIGN
   Visual direction: modern learning product with warm 9Listening brand colors.
   Content and interactions remain unchanged.
   ========================================================= */

:root{
  --cream:#FBFAF6;
  --cream-2:#F4EFE2;
  --paper:#FFFFFF;
  --ink:#1A1816;
  --ink-2:#312D29;
  --muted:#6B6258;
  --frame:#D8D0C4;
  --accent:#E8590C;
  --accent-dark:#B54708;
  --yellow:#FFE34A;
  --green:#2F6B43;
  --green-soft:#E8F3EB;
  --red-soft:#FFF0E8;
  --shadow:0 18px 54px rgba(20,42,76,.12);
  --sans:'Noto Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --serif:'Manrope','Noto Sans',system-ui,sans-serif;
  --mono:'Manrope','Noto Sans',system-ui,sans-serif;
}

html{background:#FBFAF6}
body{
  font-family:var(--sans);
  background:
    linear-gradient(rgba(36,107,253,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(36,107,253,.025) 1px,transparent 1px),
    #FBFAF6;
  background-size:32px 32px;
  color:var(--ink);
  line-height:1.65;
}

.wrap{width:min(1180px,calc(100% - 48px))}
.section{padding:86px 0}
.section.alt{
  background:linear-gradient(180deg,#F4EFE2 0%,#FBFAF6 100%);
  border-top:1px solid #DDD4C7;
  border-bottom:1px solid #DDD4C7;
}

.section-head{max-width:760px;margin-bottom:38px}
.section-head h2,
.teach-copy h2,
.adaptive-copy h2,
.final-cta h2,
.price-box h2{
  font-family:'Manrope',var(--sans);
  font-weight:800;
  letter-spacing:-.045em;
}
.section-head h2{font-size:clamp(31px,4vw,46px)}
.section-head p,
.teach-copy>p,
.adaptive-copy>p{color:var(--muted)}

.serif{
  font-family:'Manrope',var(--sans);
  font-style:normal;
  font-weight:800;
  letter-spacing:-.045em;
}

.highlight{
  color:var(--accent);
  padding:0 .04em .06em;
  background:
    linear-gradient(
      to bottom,
      transparent calc(100% - .11em),
      var(--yellow) calc(100% - .11em),
      var(--yellow) calc(100% - .035em),
      transparent calc(100% - .035em)
    );
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.highlight::after{
  content:none;
}

.kicker{
  display:inline-flex;
  width:auto;
  padding:7px 11px;
  border:1px solid #D8D0C4;
  border-radius:8px;
  background:#fff;
  color:#B54708;
  font-family:'Manrope',var(--sans);
  font-size:11px;
  font-weight:800;
  letter-spacing:.045em;
  text-transform:none;
  box-shadow:0 4px 12px rgba(20,42,76,.05);
}
.kicker::before{display:none}
.kicker.center{justify-content:center}

.eyebrow,
.step-label,
.stage-label,
.level .num,
.skill .meta,
.modal-level,
.modal-question-label{
  font-family:'Manrope',var(--sans);
  letter-spacing:.035em;
  font-weight:800;
}

.btn{
  border-radius:11px;
  min-height:49px;
  padding:12px 20px;
  font-family:'Manrope',var(--sans);
  font-weight:800;
  box-shadow:none;
}
.btn-primary{
  background:linear-gradient(135deg,#E8590C,#B54708);
  color:#fff;
  box-shadow:0 10px 22px rgba(36,107,253,.24);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(36,107,253,.3);
}
.btn-primary:active{transform:translateY(0);box-shadow:0 7px 16px rgba(36,107,253,.22)}
.btn-dark{background:#1A1816;color:#fff;border-color:#1A1816}
.btn-ghost{
  background:#fff;
  border:1px solid #C9BFB1;
  color:#312D29;
}
.btn-ghost:hover{background:#F4EFE2;color:#B54708;border-color:#BFAE97}

/* Header */
.header{
  background:rgba(247,250,252,.9);
  border-bottom:1px solid rgba(181,199,219,.8);
  backdrop-filter:blur(16px);
}
.header-in{height:72px}
.logo{
  font-family:'Manrope',var(--sans);
  font-size:21px;
  letter-spacing:-.035em;
}
.logo .nine{color:var(--accent)}
.bars i{background:var(--accent)}
.bars i:nth-child(3){
  background:var(--yellow);
  outline:2px solid rgba(36,107,253,.18);
}
.nav>a:not(.btn){
  font-family:'Manrope',var(--sans);
  color:#312D29;
  font-weight:700;
}

/* Hero */
.hero{
  padding:62px 0 82px;
  background:
    radial-gradient(circle at 82% 18%,rgba(61,224,179,.18),transparent 25%),
    radial-gradient(circle at 14% 24%,rgba(36,107,253,.12),transparent 27%),
    linear-gradient(180deg,#FBFAF6 0%,#EFF5FB 100%);
  border-bottom:1px solid #DCE7F1;
}
.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,.93fr);gap:64px}
.hero h1{
  font-family:'Manrope',var(--sans);
  font-size:clamp(42px,5vw,64px);
  font-weight:800;
  line-height:1.04;
  letter-spacing:-.058em;
  margin:22px 0 20px;
}
.hero-sub{font-size:18px;color:#6B6258;line-height:1.75}
.hero-actions{margin-top:30px}
.hero-note{color:#766C61}
.hero-note b{color:var(--green)}

.micro-proof{gap:12px}
.micro-proof div{
  background:rgba(255,255,255,.76);
  border:1px solid #D8D0C4;
  border-radius:12px;
  padding:13px 11px;
  box-shadow:0 8px 22px rgba(37,61,95,.06);
}
.micro-proof strong{
  font-family:'Manrope',var(--sans);
  color:#1A1816;
}

/* Main demo: looks like a real learning application panel */
.demo{
  border:1px solid #D8D0C4;
  border-radius:18px;
  padding:25px;
  box-shadow:0 26px 70px rgba(28,61,104,.16);
  background:#fff;
}
.demo::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:5px;
  border-radius:18px 18px 0 0;
  background:linear-gradient(90deg,var(--accent),var(--yellow));
}
.demo-tag{
  position:static;
  display:inline-flex;
  margin-bottom:16px;
  background:#FFF3D2;
  color:#B54708;
  border:1px solid #E4C987;
  border-radius:7px;
  padding:6px 10px;
  font-family:'Manrope',var(--sans);
  letter-spacing:.035em;
  text-transform:none;
}
.demo-head h3{font-family:'Manrope',var(--sans)}
.demo-head span{font-family:'Manrope',var(--sans);letter-spacing:.025em}
.player{
  background:#F4EFE2;
  border:1px solid #DED5C9;
  border-radius:12px;
}
.play,
.modal-play{
  background:linear-gradient(135deg,#E8590C,#B54708);
  box-shadow:0 8px 18px rgba(36,107,253,.25);
}
.wave.playing i,.modal-wave.playing i{background:var(--yellow)}
.question{border-bottom:1px solid #DFE7F0}
.qnum{background:#1A1816}
.question input{border-bottom-color:#766C61}
.question input:focus{background:#FFF9DF;border-bottom-color:var(--accent)}
.feedback{
  background:#FFF8E9;
  border:1px solid #E8CFA2;
  border-left:4px solid var(--accent);
  border-radius:10px;
}
.feedback .trap{color:#B54708}
.feedback .next{border-color:#DDCDB8}

/* Problem cards */
.problem-grid{gap:18px}
.problem{
  border:1px solid #D8D0C4;
  border-radius:14px;
  background:#fff;
  padding:23px;
  box-shadow:0 10px 28px rgba(23,50,84,.06);
}
.problem .icon{
  display:grid;
  place-items:center;
  width:46px;height:46px;
  border-radius:10px;
  background:#FFF3D6;
  margin-bottom:15px;
}
.problem h3{font-family:'Manrope',var(--sans);font-size:17px}

/* Steps: numbered modules, less "card template" */
.steps{gap:0;border:1px solid #D8D0C4;border-radius:16px;overflow:hidden;background:#fff}
.step{
  border:0;
  border-right:1px solid #DED5C9;
  border-radius:0;
  padding:28px;
  background:#fff;
}
.step:last-child{border-right:0}
.step::after{
  top:12px;right:18px;
  font-family:'Manrope',var(--sans);
  font-size:52px;
  color:rgba(36,107,253,.09);
}
.step h3{font-family:'Manrope',var(--sans)}
.step li::before{color:var(--accent)}

/* Progressive allocation */
.growth-panel{
  background:
    radial-gradient(circle at 90% 10%,rgba(61,224,179,.23),transparent 25%),
    linear-gradient(135deg,#1A1816 0%,#342E28 100%);
  border-radius:20px;
  padding:48px;
  box-shadow:0 22px 60px rgba(11,26,48,.18);
}
.growth-panel::before{display:none}
.growth-head .kicker{
  background:rgba(255,255,255,.08);
  color:#FFF0A8;
  border-color:rgba(184,247,230,.28);
  box-shadow:none;
}
.growth-head h2{font-family:'Manrope',var(--sans)}
.growth-head h2 span{color:#FFE34A}
.growth-axis i{background:linear-gradient(90deg,#766C61,#E8590C,#FFE34A)}
.growth-axis i::after{border-color:#FFE34A}
.growth-stage{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  border-radius:13px;
}
.growth-stage:nth-child(2),.growth-stage:nth-child(3){transform:none}
.growth-stage .stage-label{color:#FFF0A8}
.growth-stage h3{font-family:'Manrope',var(--sans)}
.growth-meter-fill{background:linear-gradient(90deg,#E8590C,#FFE34A)}
.growth-stage li::before{background:#FFE34A}
.growth-rule{
  border-radius:11px;
  background:rgba(61,224,179,.08);
  border-color:rgba(61,224,179,.25);
}

/* Teaching proof */
.explain-card{
  border-radius:16px;
  border:1px solid #D8D0C4;
  box-shadow:0 20px 50px rgba(23,50,84,.1);
}
.transcript{
  background:#F4EFE2;
  border:1px solid #D5E1EC;
  border-radius:10px;
}
.wrong-word{color:#8B8176}
.answer-word{background:#FFF0A3;color:#2F6B43;border-radius:4px}
.cue{color:#B54708}
.explain-mini{border-radius:10px;border-color:#DED5C9}

/* Roadmap: structured learning rail */
.roadmap{gap:14px}
.road-line{background:linear-gradient(90deg,#E8590C,#FFE34A);height:3px}
.level{
  border:1px solid #D8D0C4;
  border-radius:14px;
  background:#fff;
  min-height:332px;
  box-shadow:0 10px 28px rgba(23,50,84,.055);
}
.level::before{
  background:#E8590C;
  box-shadow:0 0 0 5px #F4EFE2;
}
.level .num{
  display:inline-flex;
  align-self:flex-start;
  background:#FFF3D6;
  color:#B54708;
  border-radius:7px;
  padding:5px 8px;
}
.level h3{font-family:'Manrope',var(--sans)}
.level li::before{background:#FFE34A}
.level-demo-btn{
  border:1px solid #C6B79F;
  border-radius:9px;
  color:#B54708;
  background:#FFFDF7;
}
.level-demo-btn:hover{background:#B54708;color:#fff}
.roadmap-helper{
  border-radius:13px;
  border-color:#D8D0C4;
  background:#F1F7FE;
}

/* Skills */
.skill-grid{gap:18px}
.skill{
  border:1px solid #D8D0C4;
  border-radius:14px;
  padding:25px;
  background:#fff;
  box-shadow:0 10px 28px rgba(23,50,84,.055);
}
.skill-icon{
  border-radius:10px;
  background:#FFF3D6;
  color:#B54708;
}
.skill h3{font-family:'Manrope',var(--sans)}
.skill .trapbox{
  background:#EEF5E9;
  color:#3F6149;
  border-left:3px solid #FFE34A;
  border-radius:8px;
}
.skill .trapbox b{color:#2F6B43}

/* Adaptive / dashboard */
.dashboard{
  border-radius:16px;
  border:1px solid #D8D0C4;
  box-shadow:0 20px 50px rgba(23,50,84,.1);
}
.track{background:#E8E1D7}
.fill{background:#FFE34A}
.bar.weak .fill{background:#E8590C}
.bar.weak .bar-row b{color:#B54708}
.recommend{
  background:#FFF8E9;
  border:1px solid #E8CFA2;
  border-left:4px solid #E8590C;
  border-radius:9px;
}

/* Pricing */
.price-box{
  background:
    radial-gradient(circle at 85% 10%,rgba(61,224,179,.2),transparent 24%),
    linear-gradient(135deg,#1A1816,#342E28);
  border-radius:20px;
  padding:54px;
  box-shadow:0 24px 64px rgba(11,26,48,.2);
}
.price-box h2 span{color:#FFE34A}
.price-box .btn-ghost{
  background:transparent!important;
  border-color:rgba(255,255,255,.55)!important;
  color:#fff!important;
}
.price-box .btn-ghost:hover{background:rgba(255,255,255,.1)!important}

/* FAQ */
.faq{gap:10px}
details{
  border:1px solid #D8D0C4;
  border-radius:11px;
  background:#fff;
  box-shadow:0 6px 18px rgba(23,50,84,.04);
}
summary{font-family:'Manrope',var(--sans)}
summary::after{color:#E8590C}

/* Modal */
.level-modal-backdrop{background:rgba(5,15,29,.72)}
.level-modal-dialog{
  border-radius:17px;
  border-color:#D8D0C4;
  box-shadow:0 30px 90px rgba(5,15,29,.34);
}
.level-modal-close{border-radius:9px}
.modal-meta span{border-radius:7px}
.modal-player,.modal-question-box{border-radius:12px}
.modal-option,.modal-answer-input{border-radius:9px}
.modal-feedback{border-radius:10px}

/* Footer */
.footer{
  background:#1A1816;
  border-top:0;
  color:#CFC8BE;
}
.footer a:hover{color:#FFE34A}

@media (max-width:980px){
  .steps{display:grid;grid-template-columns:1fr;border-radius:14px}
  .step{border-right:0;border-bottom:1px solid #DED5C9}
  .step:last-child{border-bottom:0}
}

@media (max-width:780px){
  .section{padding:68px 0}
  .hero{padding:52px 0 68px}
  .hero-grid{gap:42px}
  .nav{background:#FBFAF6}
  .growth-panel{padding:36px 24px}
}

@media (max-width:520px){
  .wrap{width:min(100% - 28px,1180px)}
  .hero h1{font-size:40px}
  .section{padding:58px 0}
  .demo{border-radius:14px}
  .problem,.skill,.level{border-radius:12px}
  .price-box{padding:34px 22px}
  .growth-panel{padding:31px 20px}
  .kicker{font-size:10px}
}


/* Heading scale refinement — CHỈ áp cho TRANG CHỦ.
   Trước đây khối này dùng !important trên h1..h6 mà không giới hạn phạm vi, nên
   ghi đè cỡ chữ của MỌI trang 9LS (info, demo, coming-soon) dù các trang đó có
   thang heading riêng. Đã bó vào body.nls-home để mỗi trang tự quyết. */
/* Mặc định dùng chung: font heading của brand (không !important, trang nào cũng ghi đè được) */
h1, h2, h3, h4, h5, h6 {
  font-family:'Manrope', var(--sans);
}

body.nls-home h1 {
  font-size:45px !important;
  letter-spacing:-.045em;
}

body.nls-home h2 {
  font-size:40px !important;
  letter-spacing:-.035em;
}

body.nls-home h3 {
  font-size:28px !important;
  letter-spacing:-.025em;
}

body.nls-home h4 {
  font-size:22px !important;
  letter-spacing:-.015em;
}

body.nls-home h5 {
  font-size:18px !important;
}

body.nls-home h6 {
  font-size:16px !important;
}

/* Smaller component headings */
.demo-head h3,
.dashboard-head h3,
.explain-top h3 {
  font-size:18px !important;
  line-height:1.4;
}

.problem h3,
.skill h3,
.level h3,
.growth-stage h3,
.step h3 {
  font-size:20px !important;
  line-height:1.35;
}

.explain-mini b,
.proof h3 {
  font-size:15px !important;
}

@media (max-width:780px){
  h1 {
    font-size:40px !important;
  }

  h2 {
    font-size:34px !important;
  }

  h3 {
    font-size:24px !important;
  }

  h4 {
    font-size:20px !important;
  }
}

@media (max-width:520px){
  h1 {
    font-size:36px !important;
  }

  h2 {
    font-size:30px !important;
  }

  h3 {
    font-size:22px !important;
  }

  h4 {
    font-size:18px !important;
  }

  .problem h3,
  .skill h3,
  .level h3,
  .growth-stage h3,
  .step h3 {
    font-size:19px !important;
  }
}

/* --- 9LS package fix: clip wave bars để scrollWidth sạch trên mobile (không đổi hình ảnh) --- */
.wave,.modal-wave{overflow:hidden}

/* =========================================================
   9LS DESIGN SYSTEM v1.1 — SUBPAGE / PROSE
   Component cho các trang nội dung (Giới thiệu, Điều khoản,
   Bảo mật, DMCA, Liên hệ...). Dùng kèm inc/9ls-partials.php.
   ========================================================= */
.subpage-hero{padding:clamp(44px,7vw,76px) 0 clamp(6px,1.5vw,14px)}
.subpage-hero .kicker{margin-bottom:14px}
.subpage-hero h1{
  font-family:'Manrope',var(--sans);font-weight:800;
  font-size:clamp(28px,4.4vw,46px);line-height:1.28;letter-spacing:-.015em;
  color:var(--ink);max-width:24ch;
}
.subpage-hero .subpage-sub{
  margin-top:14px;font-size:clamp(15px,1.8vw,17px);line-height:1.65;
  color:var(--muted);max-width:62ch;
}
.subpage-hero .updated{
  display:inline-block;margin-top:16px;
  font-family:'Manrope',var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--frame);border-radius:999px;padding:5px 12px;
  background:rgba(255,255,255,.5);
}

.prose{max-width:760px;padding:clamp(18px,2.5vw,28px) 0 clamp(48px,7vw,72px)}
.prose h2{
  font-family:'Manrope',var(--sans);font-weight:800;
  font-size:clamp(19px,2.4vw,24px);line-height:1.35;color:var(--ink);
  margin:1.15em 0 .5em;
}
.prose h2:first-child{margin-top:.6em}
.prose h3{
  font-family:'Manrope',var(--sans);font-weight:700;
  font-size:clamp(16px,1.9vw,18px);line-height:1.4;color:var(--ink);
  margin:1.15em 0 .4em;
}
.prose p{font-size:15.5px;line-height:1.75;color:var(--ink-2);margin:0 0 1em}
.prose ul,.prose ol{margin:0 0 1.1em;padding-left:1.35em}
.prose li{font-size:15.5px;line-height:1.75;color:var(--ink-2);margin-bottom:.45em}
.prose li::marker{color:var(--accent)}
.prose strong{font-weight:700;color:var(--ink)}
.prose a{color:var(--accent);font-weight:600;text-decoration:none;border-bottom:1.5px solid rgba(232,89,12,.3);transition:border-color .2s}
.prose a:hover{border-color:var(--accent)}
.prose hr{border:0;border-top:1px solid var(--frame);margin:2.4em 0}
.prose .callout{
  background:#fff;border:1px solid var(--frame);border-left:4px solid var(--accent);
  border-radius:12px;padding:16px 20px;margin:1.4em 0;
}
.prose .callout p:last-child,.prose .callout ul:last-child{margin-bottom:0}
.prose .contact-card{
  background:#fff;border:1px solid var(--frame);border-radius:16px;
  padding:24px 26px;margin:1.4em 0;
}
.prose .contact-card .mono-label{
  font-family:'Manrope',var(--sans);font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  display:block;margin-bottom:6px;
}
.prose .contact-card .contact-mail{
  font-family:'Manrope',var(--sans);font-weight:800;
  font-size:clamp(18px,2.6vw,24px);letter-spacing:-.01em;
}
@media (max-width:640px){
  .prose p,.prose li{font-size:15px}
}

/* =========================================================
   9LS v1.2 — HARD GUARDS
   Đai an toàn chống CSS theme/plugin bên ngoài lọt vào trang
   9LS (ví dụ Flatsome định nghĩa .fill{position:absolute},
   .nav, .header, .section...). Whitelist trong 9ls-assets.php
   là lớp chặn chính; các rule dưới đây dùng specificity
   body.nls-page để thắng bất kể thứ tự load.
   ========================================================= */
body.nls-page .dashboard .track, body.nls-page .sim .track{position:relative;height:9px;background:#E8E1D7;border-radius:99px;overflow:hidden;min-height:0}
body.nls-page .dashboard .track .fill, body.nls-page .sim .track .fill{
  position:static !important;top:auto !important;left:auto !important;
  right:auto !important;bottom:auto !important;inset:auto !important;
  display:block;height:100% !important;margin:0 !important;padding:0 !important;
  border-radius:99px;max-width:100%;
}
body.nls-page .dashboard .bar{margin-bottom:14px;position:static;width:auto;height:auto;background:none;border:0;box-shadow:none}
body.nls-page .header{position:sticky;top:0;bottom:auto;left:auto;right:auto;width:auto;min-height:0;margin:0}
body.nls-page .header-in{display:flex;align-items:center;justify-content:space-between;gap:24px;width:min(1180px,calc(100% - 48px));margin-inline:auto;float:none}
body.nls-page .section{position:static;min-height:0;margin:0;padding:86px 0}
body.nls-page .wrap{float:none}
body.nls-page .logo{width:auto;max-width:none;margin:0;float:none}
@media (min-width:781px){
  body.nls-page .header .nav{
    display:flex;align-items:center;gap:24px;
    position:static;width:auto;max-width:none;margin:0;padding:0;
    background:none;border:0;box-shadow:none;float:none;
    flex-direction:row;justify-content:flex-end;
  }
  body.nls-page .header .nav>a{width:auto;display:inline-flex;margin:0;float:none}
  body.nls-page .menu-toggle{display:none}
}
@media (max-width:780px){
  body.nls-page .section{padding:66px 0}
  body.nls-page .header-in{width:min(100% - 32px,1180px)}
  body.nls-page .header .nav{
    display:none;position:absolute;top:70px;left:0;right:0;width:auto;
    background:var(--cream);padding:20px 16px;border-bottom:1px solid var(--frame);
    flex-direction:column;align-items:flex-start;gap:17px;margin:0;
  }
  body.nls-page .header .nav.open{display:flex}
  body.nls-page .menu-toggle{display:block}
}

/* SUBPAGE: cột nội dung căn giữa màn hình (hết "lệch trái, trống phải") */
body.nls-subpage .subpage-hero .wrap,
body.nls-subpage main.wrap{width:min(820px,calc(100% - 48px))}
@media (max-width:780px){
  body.nls-subpage .subpage-hero .wrap,
  body.nls-subpage main.wrap{width:min(100% - 32px,820px)}
}

/* Đai an toàn cuối: markup lạ do theme/plugin in vào cuối body (sau footer 9LS)
   sẽ bị ẩn — trừ admin bar và script/style. */
body.nls-page footer.footer ~ *:not(script):not(style):not(link):not(#wpadminbar){display:none !important}
body.nls-page .ls-foot ~ *:not(script):not(style):not(link):not(#wpadminbar){display:none !important}