:root{
  --paper:#f7f2e9; --paper-2:#fffdf8; --ink:#2c2620; --ink-soft:#5d544a;
  --line:#e6ddcd; --a:#b5572f; --b:#3f6b4c; --c:#5d4a86; --d:#2f7d78; --e:#bd8a2c;
  --prob:#9c4a2a; --ben:#2f6b4d; --accent:#b5572f;
  --shadow:0 1px 2px rgba(44,38,32,.04), 0 8px 24px -12px rgba(44,38,32,.18);
  --radius:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Be Vietnam Pro',system-ui,sans-serif;
  background:var(--paper); color:var(--ink); line-height:1.68; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Lora',serif;font-weight:600;line-height:1.2}
button{font-family:inherit;cursor:pointer}
a{color:inherit}

/* ---------- WELCOME ---------- */
.welcome{position:fixed;inset:0;z-index:100;display:grid;place-items:center;
  background:radial-gradient(900px 500px at 70% -10%,#f0e7d4,transparent 60%),var(--paper);padding:24px}
.welcome .box{max-width:480px;text-align:center;background:var(--paper-2);border:1px solid var(--line);
  border-radius:24px;padding:44px 36px;box-shadow:var(--shadow)}
.welcome .seed{font-size:2.4rem}
.welcome h1{font-size:1.8rem;margin:10px 0 6px}
.welcome p{color:var(--ink-soft);font-size:.95rem;margin-bottom:22px}
.welcome input{width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:12px;
  font-size:1rem;background:var(--paper);margin-bottom:14px;text-align:center}
.welcome input:focus{outline:2px solid var(--a);border-color:transparent}
.welcome button{width:100%;padding:14px;border:none;border-radius:12px;background:var(--a);color:#fff;
  font-weight:600;font-size:1rem;transition:.18s}
.welcome button:hover{filter:brightness(1.06)}
.welcome .skip{background:none;color:var(--ink-soft);font-weight:500;margin-top:8px;font-size:.85rem;width:auto;padding:6px}

/* ---------- LAYOUT ---------- */
.app{display:grid;grid-template-columns:312px 1fr;min-height:100vh}
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:25;display:none}
.backdrop.show{display:block}
.sidebar{background:var(--paper-2);border-right:1px solid var(--line);position:sticky;top:0;height:100vh;
  overflow-y:auto;padding:22px 18px}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.brand .logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--a),var(--e));
  display:grid;place-items:center;color:#fff;font-size:1.1rem}
.brand b{font-family:'Lora',serif;font-size:1.05rem}
.brand small{display:block;color:var(--ink-soft);font-size:.7rem;letter-spacing:.04em}
.progress-wrap{margin:16px 0 20px;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px}
.progress-wrap .lbl{display:flex;justify-content:space-between;font-size:.78rem;color:var(--ink-soft);margin-bottom:7px}
.bar{height:8px;border-radius:99px;background:#eadfcb;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--a),var(--e));width:0;transition:width .5s}
.hello{font-size:.8rem;color:var(--ink-soft);margin-top:8px}

.map-btn{width:100%;margin:14px 0 0;padding:11px 14px;border:1px solid var(--line);border-radius:12px;
  background:linear-gradient(180deg,#fbf3e3,#f5ead2);color:#7a5e1f;font-weight:600;font-size:.9rem;
  display:flex;align-items:center;gap:8px;justify-content:center;transition:.16s}
.map-btn:hover{border-color:var(--a)}
.map-btn.active{background:var(--a);color:#fff;border-color:var(--a)}
.tools-btn{background:linear-gradient(180deg,#e6f3f0,#d4e9e5);color:#1f6b63}
.tools-btn.active{background:var(--d);color:#fff;border-color:var(--d)}

/* ----- BỘ THẺ KHAI VẤN ----- */
.tools{max-width:980px;margin:0 auto;padding:40px 26px 0}
.tools-hero{text-align:center;border-bottom:1px solid var(--line);padding-bottom:28px;margin-bottom:28px}
.tools-hero .eyebrow{display:inline-block;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--d);font-weight:700;margin-bottom:12px}
.tools-hero h1{font-size:clamp(1.8rem,1.2rem+2.4vw,2.7rem)}
.tools-hero blockquote{font-style:italic;color:var(--d);font-size:1.1rem;margin:14px 0 0}
.tools-sub{color:var(--ink-soft);font-size:.93rem;max-width:64ch;margin:14px auto 0;line-height:1.6}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:18px}
.tcard{background:var(--paper-2);border:1px solid var(--line);border-top:4px solid var(--d);border-radius:16px;
  padding:20px 22px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.tc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.tc-n{font-size:.72rem;font-weight:700;letter-spacing:.06em;color:var(--d);background:#dcebe7;padding:3px 10px;border-radius:99px}
.tc-ic{font-size:1.6rem}
.tc-name{font-family:'Lora',serif;font-weight:600;font-size:1.22rem;line-height:1.2}
.tc-meta{font-style:italic;color:var(--ink-soft);font-size:.88rem;margin:2px 0 12px}
.tc-formula{background:#eef7f5;border:1px dashed #bcdcd8;border-radius:10px;padding:9px 12px;text-align:center;
  font-weight:700;color:#246b66;font-size:.92rem;letter-spacing:.02em}
.tc-when{font-size:.86rem;color:var(--ink-soft);margin-top:12px;line-height:1.5}
.tc-when b{color:var(--ink)}
.tc-back{max-height:0;overflow:hidden;opacity:0;transition:max-height .35s ease, opacity .3s ease}
.tcard.open .tc-back{max-height:1600px;opacity:1;margin-top:14px}
.tc-explain{font-size:.9rem;color:var(--ink-soft);background:#f3ece0;border-radius:10px;padding:11px 13px;margin-bottom:12px}
.tc-sl{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin:12px 0 6px}
.tc-sl.q{color:var(--d)} .tc-sl.b{color:#8a6d1f} .tc-sl.r{color:var(--a)}
.tc-list{list-style:none;display:grid;gap:6px;padding:0;margin:0}
.tc-list li{position:relative;padding-left:18px;font-size:.9rem;line-height:1.5}
.tc-list li::before{content:"•";position:absolute;left:4px;color:var(--d)}
.tc-real{font-size:.9rem;background:#fdfaf3;border:1px solid var(--line);border-radius:10px;padding:12px 14px;line-height:1.55}
.tc-punch{margin-top:14px;font-family:'Lora',serif;font-style:italic;font-size:1rem;color:var(--d);text-align:center;
  border-top:1px dashed var(--line);padding-top:12px}
.tc-flip{margin-top:14px;padding:11px;border:none;border-radius:10px;background:#eef7f5;color:#1f6b63;
  font-weight:600;font-size:.86rem;cursor:pointer;transition:.15s}
.tc-flip:hover{background:#dcebe7}

/* ----- BẢN ĐỒ HÀNH TRÌNH ----- */
.map{max-width:840px;margin:0 auto;padding:40px 26px 0}
.map-hero{text-align:center;border-bottom:1px solid var(--line);padding-bottom:30px;margin-bottom:28px}
.map-hero .eyebrow{display:inline-block;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--a);font-weight:700;margin-bottom:14px}
.map-hero h1{font-size:clamp(1.8rem,1.2rem+2.4vw,2.8rem)}
.map-hero blockquote{font-style:italic;color:var(--ink-soft);max-width:56ch;margin:20px auto 0;
  border-left:3px solid var(--a);padding:4px 0 4px 18px;text-align:left;font-size:1.02rem}
.map-hero blockquote .qa{font-style:normal;font-weight:600;color:var(--ink);display:inline-block;margin-top:8px}
.map-bridge{background:#fbf3e3;border:1px solid #ecdcb6;border-radius:14px;padding:16px 20px;font-size:.93rem;color:#6f5a2c;margin-bottom:34px;line-height:1.6}
.map-h2{font-family:'Lora',serif;font-size:1.4rem;margin:6px 0 16px}
.lvl{display:flex;gap:18px;background:var(--paper-2);border:1px solid var(--line);border-left:5px solid var(--lc);
  border-radius:16px;padding:22px 24px;margin-bottom:16px;box-shadow:var(--shadow)}
.lvl .num{font-family:'Lora',serif;font-size:2.2rem;line-height:1;color:var(--lc);font-weight:600;flex:none}
.lvl-body{flex:1}
.lvl h3{font-size:1.2rem}
.lvl .sub{color:var(--lc);font-size:.84rem;font-weight:600;margin:2px 0 8px}
.lvl p{font-size:.93rem;margin-bottom:10px}
.lvl .blk{font-size:.8rem;color:var(--ink-soft);margin-bottom:12px}
.lchips{display:flex;flex-wrap:wrap;gap:6px}
.lchip{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:var(--paper);
  font-size:.82rem;font-weight:700;color:var(--ink-soft);cursor:pointer;transition:.14s}
.lchip:hover{border-color:var(--lc);color:var(--ink);transform:translateY(-2px)}
.soon-note{font-size:.84rem;color:var(--ink-soft);font-style:italic}
.struct-wrap{margin-top:36px}
.struct-intro{color:var(--ink-soft);font-size:.9rem;margin-bottom:14px}
.struct-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.struct{display:flex;align-items:center;gap:11px;background:var(--paper-2);border:1px solid var(--line);
  border-radius:11px;padding:11px 13px;cursor:pointer;text-align:left;transition:.15s}
.struct:hover{border-color:var(--c);transform:translateY(-2px);box-shadow:var(--shadow)}
.struct .sn{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:#e6dcef;color:#4b3b73;font-weight:700;font-size:.92rem}
.struct .st{font-size:.9rem;font-weight:600;line-height:1.25}
.struct .st small{display:block;font-weight:500;color:var(--ink-soft);font-size:.75rem}
.map-cta{text-align:center;margin:34px 0 10px}
.map-cta button{padding:14px 34px;border:none;border-radius:999px;background:var(--b);color:#fff;font-weight:600;font-size:1rem;cursor:pointer}
.map-cta button:hover{filter:brightness(1.06)}
.struct-badge{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.03em;
  background:#e6dcef;color:#4b3b73;padding:4px 11px;border-radius:99px}
.hero-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.src-badge{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.03em;padding:4px 11px;border-radius:99px}
.src-badge.src-nlp{background:#eef0f2;color:#5a6472}
.src-badge.src-beyond{background:#d3e8e6;color:#1f6b63;box-shadow:0 0 0 1px rgba(47,125,120,.25) inset}
/* công thức tạo Mentor */
.formula-box{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;justify-content:center;margin:4px 0 10px}
.fm-item,.fm-result{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:14px 16px;
  text-align:center;flex:1;min-width:150px;max-width:215px;display:flex;flex-direction:column;justify-content:center}
.fm-item b,.fm-result b{font-size:.98rem;display:block;line-height:1.2}
.fm-item small,.fm-result small{font-size:.73rem;color:var(--ink-soft);margin-top:5px;display:block;line-height:1.4}
.fm-item.nlp{border-top:3px solid #8a93a3}
.fm-item.heal{border-top:3px solid #2f7d78}
.fm-item.three{border-top:3px solid #b5572f}
.fm-result{background:linear-gradient(160deg,#2c2620,#3c3329);border-color:#4a4034;min-width:165px;max-width:230px}
.fm-result b{color:#fff;font-family:'Lora',serif;font-size:1.1rem}
.fm-result small{color:#e7c987}
.fm-op{display:flex;align-items:center;font-size:1.5rem;color:var(--ink-soft);font-weight:700}
.fm-tag{text-align:center;color:var(--a);font-weight:600;font-size:.92rem;margin:10px 0 32px}

/* 2 chứng nhận */
.cert-wrap{margin:38px 0 8px}
.cert-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px;margin-top:14px}
.cert{position:relative;border-radius:18px;padding:30px 24px 22px;text-align:center;border:1px solid var(--line);box-shadow:var(--shadow)}
.cert.nlpcert{background:linear-gradient(180deg,#f1eef6,#fcfbfd);border-color:#ddd4e8}
.cert.vfccert{background:linear-gradient(180deg,#eef6f3,#fbfdfc);border-color:#cfe6df}
.cert-rib{position:absolute;top:14px;left:14px;font-size:.62rem;font-weight:700;letter-spacing:.1em;color:var(--ink-soft);
  background:rgba(0,0,0,.05);padding:3px 9px;border-radius:99px}
.cert-seal{font-size:2.3rem;margin-bottom:4px}
.cert h3{font-family:'Lora',serif;font-size:1.3rem;line-height:1.22}
.cert h3 span{font-size:.92rem;font-weight:500;color:var(--ink-soft)}
.cert-sub{font-size:.83rem;color:var(--ink-soft);margin:7px 0 14px}
.cert ul{list-style:none;text-align:left;display:grid;gap:7px;max-width:300px;margin:0 auto;padding:0}
.cert ul li{position:relative;padding-left:22px;font-size:.88rem;line-height:1.45}
.cert ul li::before{content:"✓";position:absolute;left:0;color:#2f7d78;font-weight:700}
.cert-note{text-align:center;color:var(--ink-soft);font-size:.9rem;margin:16px auto 0;max-width:62ch;line-height:1.55}

/* thống kê trường phái ở Bản đồ */
.fields-wrap{margin-bottom:34px}
.field-stat{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:linear-gradient(180deg,#fcf7ec,#f6efe2);
  border:1px solid var(--line);border-radius:16px;padding:18px 22px;margin-bottom:16px}
.fs-card{display:flex;flex-direction:column;align-items:center;background:var(--paper-2);border:1px solid var(--line);
  border-radius:12px;padding:10px 18px;min-width:96px}
.fs-card b{font-family:'Lora',serif;font-size:1.7rem;color:#5a6472;line-height:1}
.fs-card span{font-size:.74rem;color:var(--ink-soft);margin-top:3px}
.fs-card.alt{border-color:#bcdcd8;background:#eef7f5}
.fs-card.alt b{color:#2f7d78}
.fs-plus{font-size:1.4rem;color:var(--ink-soft);font-weight:700}
.fs-note{font-size:.86rem;color:#246b66;font-weight:600;flex:1;min-width:160px}
.field-list{display:grid;gap:7px}
.field{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--paper-2);
  border:1px solid var(--line);border-left:4px solid #2f7d78;border-radius:10px;padding:10px 14px}
.field.nlp{border-left-color:#8a93a3}
.field .fn{font-size:.9rem;font-weight:600}
.field .fc{flex:none;font-size:.74rem;font-weight:700;color:var(--ink-soft);background:#f1ece1;padding:3px 10px;border-radius:99px}
@media(max-width:880px){ .lvl{flex-direction:column;gap:8px} }

.khoi-group{margin-bottom:8px}
.khoi-head{display:flex;align-items:center;gap:8px;padding:9px 8px;font-size:.74rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.khoi-head .dot{width:11px;height:11px;border-radius:4px}
.lesson-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;font-size:.88rem;
  color:var(--ink);text-decoration:none;border:1px solid transparent;transition:.15s;margin-bottom:2px}
.lesson-item:hover{background:var(--paper)}
.lesson-item.active{background:var(--paper);border-color:var(--line);font-weight:600}
.lesson-item.locked{color:#b7ac99;cursor:not-allowed}
.lesson-item .ix{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  font-size:.72rem;font-weight:700;background:#efe7d6;color:var(--ink-soft)}
.lesson-item.active .ix{background:var(--accent);color:#fff}
.lesson-item.done .ix{background:var(--ben);color:#fff}
.lesson-item .soon{margin-left:auto;font-size:.62rem;background:#efe7d6;color:#a99;padding:2px 7px;border-radius:99px}

/* ---------- MAIN ---------- */
.main{padding:0 0 80px}
.topbar{position:sticky;top:0;z-index:10;backdrop-filter:blur(10px);background:rgba(247,242,233,.85);
  border-bottom:1px solid var(--line);padding:12px 36px;display:flex;align-items:center;gap:12px}
.topbar .crumb{font-size:.8rem;color:var(--ink-soft)}
.topbar .menu-btn{display:none}
.lesson{max-width:760px;margin:0 auto;padding:40px 28px 0}
.lesson-hero{border-left:4px solid var(--accent);padding:4px 0 4px 20px;margin-bottom:28px}
.lesson-hero .code{font-size:.78rem;font-weight:700;letter-spacing:.1em;color:var(--accent)}
.lesson-hero h1{font-size:clamp(1.7rem,1.2rem+1.8vw,2.5rem);margin:6px 0 8px}
.lesson-hero .cau{font-style:italic;color:var(--ink-soft)}
.lesson-hero .meta{display:flex;gap:14px;margin-top:12px;font-size:.8rem;color:var(--ink-soft)}

.obj{background:linear-gradient(180deg,#fcf7ec,#f7f0e2);border:1px solid var(--line);border-radius:16px;
  padding:20px 22px;margin-bottom:30px}
.obj h4{font-size:.95rem;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.obj ul{list-style:none;display:grid;gap:7px}
.obj li{padding-left:26px;position:relative;font-size:.92rem}
.obj li::before{content:"✓";position:absolute;left:0;color:var(--ben);font-weight:700}

section.sec{margin-bottom:26px}
.sec .tag{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 10px;border-radius:99px;margin-bottom:10px}
.sec h3{font-size:1.3rem;margin-bottom:10px}
.sec p{margin-bottom:10px}
.sec .note{background:#f3ece0;border-radius:10px;padding:10px 14px;font-size:.9rem;color:var(--ink-soft)}
.sec ol,.sec ul{padding-left:22px;display:grid;gap:8px;margin-bottom:8px}
.sec.story{background:var(--paper-2);border:1px solid var(--line);border-radius:16px;padding:22px 24px;box-shadow:var(--shadow)}
.sec.callout{background:#fbf3e3;border:1px solid #ecdcb6;border-radius:16px;padding:22px 24px}
.sec.callout .tag{background:#f3e2bd;color:#8a6d1f}
.sec.model{background:var(--paper-2);border:1px solid var(--line);border-radius:16px;padding:22px 24px;box-shadow:var(--shadow)}
.sec.story .tag{background:#efe1d6;color:var(--a)}
.sec.model .tag{background:#e3ece4;color:var(--b)}
.sec.text .tag{background:#e9e3f0;color:var(--c)}
.presup li{font-size:.92rem}
/* ----- THẺ "TRÊN CẢ NLP" ----- */
.sec.beyond{background:linear-gradient(165deg,#2c2620,#3c3329);color:#f3ece0;border:1px solid #4a4034;
  border-radius:18px;padding:24px 26px;box-shadow:0 14px 34px -18px rgba(44,38,32,.5)}
.sec.beyond .tag{background:rgba(189,138,44,.22);color:#e7c987}
.sec.beyond h3{color:#fff;font-size:1.22rem}
.sec.beyond p{color:#d9cebc;margin-bottom:0}
.beyond-app{display:grid;gap:12px;margin-top:16px}
.beyond-app .brow{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:12px 14px}
.beyond-app .bl{flex:none;font-size:.66rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:5px 10px;border-radius:99px;margin-top:1px}
.beyond-app .bl.self{background:rgba(127,174,139,.22);color:#a8d4b4}
.beyond-app .bl.fam{background:rgba(189,138,44,.22);color:#e7c987}
.beyond-app .bt{font-size:.92rem;color:#e8dfce;line-height:1.5}
.sec.visual{background:linear-gradient(180deg,#fdfaf3,#f6efe2);border:1px solid var(--line);border-radius:16px;padding:22px 18px;box-shadow:var(--shadow);text-align:center}
.sec.visual .tag{background:#e3ece4;color:var(--b)}
.sec.visual h3{font-size:1.05rem;margin-bottom:14px}
.sec.visual svg{max-width:100%;height:auto}
.sec.visual figcaption{font-size:.86rem;color:var(--ink-soft);margin-top:12px;max-width:46ch;margin-left:auto;margin-right:auto;line-height:1.55}

/* breathing */
.breath{display:grid;place-items:center;gap:16px;background:#eef3ee;border:1px solid #d7e4d8;border-radius:18px;padding:30px}
.breath .circle{width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,#7fae8b,#3f6b4c);
  display:grid;place-items:center;color:#fff;font-weight:600;font-size:.95rem;transition:transform 4s ease, background 4s ease;text-align:center;padding:10px}
.breath.in .circle{transform:scale(1.5);background:radial-gradient(circle,#9cc7a6,#4f7d5b)}
.breath.out .circle{transform:scale(1);transition-duration:6s}
.breath button{padding:11px 24px;border:none;border-radius:99px;background:var(--b);color:#fff;font-weight:600}
.breath .count{font-size:.85rem;color:var(--ink-soft)}

/* ---------- EXERCISES ---------- */
.ex-wrap{margin-top:34px;border-top:2px dashed var(--line);padding-top:28px}
.ex-wrap > h2{font-size:1.5rem;margin-bottom:6px}
.ex-wrap > .sub{color:var(--ink-soft);font-size:.9rem;margin-bottom:22px}
.ex{background:var(--paper-2);border:1px solid var(--line);border-radius:16px;padding:22px 22px;margin-bottom:18px;box-shadow:var(--shadow)}
.ex .extype{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.ex .q{font-weight:600;margin-bottom:14px;font-size:1.02rem}
.opt{display:block;width:100%;text-align:left;padding:13px 16px;border:1px solid var(--line);border-radius:12px;
  background:var(--paper);margin-bottom:9px;font-size:.95rem;transition:.15s}
.opt:hover{border-color:var(--accent)}
.opt.correct{background:#e7f3ea;border-color:var(--ben);color:#1f5638;font-weight:600}
.opt.wrong{background:#fbeae6;border-color:#cf7b63;color:#8c3a23}
.opt.dim{opacity:.55}
.explain{margin-top:8px;font-size:.9rem;background:#eef3ee;border-radius:10px;padding:12px 14px;display:none}
.explain.show{display:block}
.ex textarea{width:100%;min-height:120px;padding:14px;border:1px solid var(--line);border-radius:12px;
  font-family:inherit;font-size:.95rem;background:var(--paper);resize:vertical}
.ex textarea:focus{outline:2px solid var(--accent);border-color:transparent}
.ex .ex-actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;align-items:center}
.btn{padding:10px 18px;border:none;border-radius:10px;font-weight:600;font-size:.88rem}
.btn.primary{background:var(--accent);color:#fff}
.btn.ghost{background:var(--paper);border:1px solid var(--line);color:var(--ink-soft)}
.saved-tag{font-size:.8rem;color:var(--ben);font-weight:600;display:none}
.saved-tag.show{display:inline}
.hint{margin-top:12px;font-size:.9rem;background:#fbf3e3;border:1px solid #ecdcb6;border-radius:10px;padding:13px 15px;display:none}
.hint.show{display:block}
.hint b{color:#8a6d1f}
.check-item{display:flex;align-items:flex-start;gap:11px;padding:11px 13px;border:1px solid var(--line);border-radius:11px;margin-bottom:8px;background:var(--paper);cursor:pointer}
.check-item input{margin-top:3px;width:18px;height:18px;accent-color:var(--ben);flex:none}
.check-item.checked{background:#e7f3ea;border-color:#bcd9c4}
.scale-row{display:flex;align-items:center;gap:14px}
.scale-row input[type=range]{flex:1;accent-color:var(--accent)}
.scale-val{font-weight:700;color:var(--accent);min-width:26px;text-align:center}
.scale-ends{display:flex;justify-content:space-between;font-size:.75rem;color:var(--ink-soft);margin-top:4px}

/* recap + footer nav */
.recap{background:linear-gradient(180deg,#2c2620,#3a322a);color:#f3ece0;border-radius:20px;padding:28px 30px;margin-top:34px}
.recap h3{color:#fff;margin-bottom:12px}
.recap ul{list-style:none;display:grid;gap:9px}
.recap li{padding-left:26px;position:relative;font-size:.95rem;color:#e6dccb}
.recap li::before{content:"🌱";position:absolute;left:0}
.lesson-nav{display:flex;justify-content:space-between;gap:12px;margin-top:28px}
.lesson-nav button{flex:1;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--paper-2);
  text-align:left;transition:.18s}
.lesson-nav button:hover:not(:disabled){border-color:var(--accent);transform:translateY(-2px)}
.lesson-nav button:disabled{opacity:.4;cursor:default}
.lesson-nav .dir{font-size:.72rem;color:var(--ink-soft)}
.lesson-nav .nm{font-weight:600;font-size:.92rem}
.lesson-nav .next{text-align:right}
.complete-bar{background:transparent;border-top:1px solid var(--line);
  padding:22px 28px 4px;display:flex;justify-content:center;margin-top:30px}
.complete-bar button{padding:13px 30px;border:none;border-radius:99px;background:var(--ben);color:#fff;font-weight:600;font-size:.95rem}
.complete-bar button.done{background:#cfc4ad;color:#fff}

/* coming soon */
.soon-screen{max-width:560px;margin:80px auto;text-align:center;padding:0 24px}
.soon-screen .big{font-size:3rem}
.soon-screen h2{font-size:1.6rem;margin:14px 0 8px}
.soon-screen p{color:var(--ink-soft)}

@media(max-width:880px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;width:300px;z-index:30;transform:translateX(-100%);transition:.25s}
  .sidebar.open{transform:none}
  .topbar .menu-btn{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--paper-2)}
  .backdrop{position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:25;display:none}
  .backdrop.show{display:block}
}

/* ===== TỐI ƯU ĐỌC TRÊN ĐIỆN THOẠI (chống "khối chữ" dày) ===== */
@media(max-width:600px){
  .lesson{padding:24px 18px 40px}
  .lesson-hero{padding-left:14px;margin-bottom:22px}
  .lesson-hero h1{font-size:1.46rem;line-height:1.24}
  .lesson-hero .cau{font-size:.92rem}
  .lesson-hero .meta{gap:10px;font-size:.74rem;flex-wrap:wrap}
  .hero-badges{gap:6px}
  .obj{padding:16px 16px;margin-bottom:24px}
  .obj h4{font-size:.9rem}
  .obj li{font-size:.9rem;line-height:1.55}

  section.sec{margin-bottom:24px}
  .sec .tag{font-size:.66rem;margin-bottom:8px}
  .sec h3{font-size:1.1rem;line-height:1.28;margin-bottom:8px}
  /* chữ nhỏ lại + giãn dòng & giãn đoạn cho thoáng */
  .sec p{font-size:.95rem;line-height:1.74;margin-bottom:14px}
  .sec li{font-size:.95rem;line-height:1.7}
  .sec ol,.sec ul{gap:11px;padding-left:20px;margin-bottom:10px}
  .sec .note{font-size:.9rem;line-height:1.65;padding:12px 14px}
  .sec.story,.sec.callout,.sec.model{padding:18px 16px}
  .sec.visual{padding:16px 12px}

  .ex-wrap > h2{font-size:1.3rem}
  .ex{padding:18px 16px;margin-bottom:16px}
  .ex .q{font-size:.97rem;line-height:1.5}
  .opt{font-size:.93rem;padding:12px 14px}
  .explain,.hint{font-size:.88rem;line-height:1.6}
  .check-item{font-size:.93rem}

  .recap{padding:22px 18px}
  .recap h3{font-size:1.15rem}
  .recap li{font-size:.92rem;line-height:1.6}

  /* thẻ Trên-cả-NLP và breathing gọn hơn */
  .sec.beyond{padding:20px 18px}
  .beyond-app .bt{font-size:.9rem}
}