/* Uses the same font and color tokens as the public landing page. */
.teach-demo #demo-title{scroll-margin-top:110px}
.teach-resources .teach-section-head,.teach-demo .teach-section-head{display:block}
.teach-resources .teach-section-head>p,.teach-demo .teach-section-head>p{max-width:none;margin-top:16px}
.teach-demo,.teach-lesson,.teach-trust,.teach-faq,.teach-final{margin-bottom:70px}
.teach-demo-layout{display:grid;grid-template-columns:.85fr 1.15fr;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--surface-card)}
.teach-demo-context{padding:30px;background:var(--brand-soft)}
.teach-demo-context h3{font-size:24px;line-height:1.35}
.teach-demo-context pre{background:var(--surface-card);padding:20px;border-radius:12px;border:1px solid var(--line);font:14px/1.9 var(--font-mono);overflow:auto}
.teach-demo-context p,.teach-trust p{color:var(--ink-muted);font-size:15px}
.teach-demo-context a,.teach-lesson article a,.teach-trust a,.teach-faq a{color:var(--brand);font-weight:650}
.teach-sample{padding:28px}
.teach-sample fieldset{border:0;border-bottom:1px solid var(--line);padding:14px 0;margin:0 0 12px;min-width:0}
.teach-sample legend{font-size:15px;font-weight:650;padding:0;line-height:1.6}
.teach-sample label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 14px;border:1px solid var(--line);border-radius:9px;margin:6px 8px 0 0;cursor:pointer;font-size:14px}
.teach-sample label:has(input:checked){background:var(--brand-soft);border-color:var(--brand)}
.teach-sample input{accent-color:var(--brand)}
.teach-explanation{margin-top:12px;font-size:13px;color:var(--ink-muted);line-height:1.8}
#teacherSampleResult{margin-top:18px;font-size:14px;font-weight:650}
.teach-lesson h2,.teach-trust h2,.teach-faq h2,.teach-final h2{font-size:32px;line-height:1.3;letter-spacing:-.025em;margin:0 0 25px}
.teach-cards>article{border-top:3px solid var(--brand-light);background:var(--surface-card);padding:24px;border-radius:0 0 16px 16px}
.teach-trust{display:grid;grid-template-columns:1.2fr 1fr;gap:45px;padding-block:32px;border-block:1px solid var(--line)}
.teach-faq{max-width:850px}
.teach-faq details{border-bottom:1px solid var(--line);padding:18px 0}
.teach-faq summary{cursor:pointer;font-weight:650;min-height:30px}
.teach-faq details p{padding-top:16px;color:var(--ink-muted);font-size:15px}
.teach-final{text-align:center;padding:38px 26px;background:var(--brand-soft);border-radius:22px}
.teach-final .teach-actions{justify-content:center}
@media(max-width:680px){.teach-demo-layout,.teach-trust{grid-template-columns:1fr}.teach-demo-context,.teach-sample{padding:22px}.teach-demo,.teach-lesson,.teach-trust,.teach-faq,.teach-final{margin-bottom:42px}.teach-lesson h2,.teach-trust h2,.teach-faq h2,.teach-final h2{font-size:27px}.teach-sample .teach-actions .btn{white-space:normal}}
.teach-hero{position:relative;overflow:hidden;background:radial-gradient(ellipse at 85% 28%,var(--brand-soft),transparent 60%),radial-gradient(ellipse at 0 90%,var(--accent-teal-soft),transparent 55%),var(--bg)}
.teach-hero:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(var(--line-strong) 1px,transparent 1px);background-size:24px 24px;opacity:.4;mask-image:linear-gradient(90deg,transparent,black)}
.teach-layout{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:50px;align-items:center;padding-block:88px 76px}
.teach-label{font-size:11px;font-weight:750;letter-spacing:.12em;color:var(--brand);display:flex;align-items:center;gap:9px;margin-bottom:22px}
.teach-label>span{width:7px;height:7px;border-radius:50%;background:var(--accent-teal)}
.teach-copy h1{font-family:var(--font-display);font-size:clamp(38px,4.1vw,59px);font-weight:750;letter-spacing:-.045em;line-height:1.16;margin:0 0 25px}
.teach-copy h1 em{font-style:normal;color:var(--brand)}
.teach-lead{max-width:none;font-size:18px;line-height:1.8;color:var(--ink-muted)}
.teach-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.teach-actions .btn{min-height:48px;padding-inline:20px}
.teach-note{margin-top:17px;color:var(--ink-muted);font-size:12px}
.teach-art{position:relative;min-height:415px}
.teach-orbit{position:absolute;width:365px;height:365px;max-width:100%;border:1px solid var(--brand-light);border-radius:50%;right:5px;top:0;opacity:.35;box-shadow:0 0 0 26px var(--brand-soft),0 0 0 27px var(--line)}
.teach-sheet{position:relative;margin:32px 22px 0 0;background:var(--surface-card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);padding:0 25px 25px;transform:rotate(-3deg)}
.teach-sheet-top{border-bottom:1px solid var(--line);padding:15px 0;display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:.14em;color:var(--ink-muted)}
.teach-dots{display:flex;gap:4px}.teach-dots i{width:6px;height:6px;border-radius:50%;background:var(--brand-light)}
.teach-tag{font-size:10px;letter-spacing:.07em;color:var(--accent-teal);font-weight:700;margin-top:24px}
.teach-sheet h2{font-size:26px;line-height:1.3;letter-spacing:-.025em;margin:10px 0 20px}
.teach-sheet pre{font-family:var(--font-mono);font-size:12px;background:var(--bg-subtle);border:1px solid var(--line);border-radius:10px;padding:17px;margin:0;line-height:1.9;white-space:pre-wrap}
.teach-sheet code span{color:var(--brand);font-weight:700}
.teach-answer{font-size:11px;margin-top:17px;color:var(--ink-muted)}
.teach-answer svg{color:var(--accent-teal);margin-right:5px;vertical-align:-2px}
.teach-mascot{position:absolute;right:-22px;bottom:-32px;width:190px;height:230px;object-fit:contain;filter:drop-shadow(0 12px 15px color-mix(in srgb,var(--brand) 16%,transparent))}
.teach-sticker{position:absolute;bottom:-2px;left:0;background:var(--surface-card);box-shadow:var(--shadow-md);border:1px solid var(--line);border-radius:12px;padding:12px 18px;font-size:12px;transform:rotate(2deg)}
.teach-sticker>span{float:left;display:inline-flex;color:var(--accent-amber);margin-right:10px}
.teach-strip{background:var(--surface-card);border-block:1px solid var(--line)}
.teach-strip .wrap{display:grid;grid-template-columns:repeat(3,1fr);padding-block:23px;gap:25px}
.teach-strip span{display:flex;flex-direction:column;font-size:12px;color:var(--ink-muted)}
.teach-strip b{font-size:16px;color:var(--ink-main);margin-bottom:3px}
.teach-resources{padding-block:76px}
.teach-section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:30px}
.teach-section-head h2,.teach-contact h2{font-size:34px;line-height:1.25;letter-spacing:-.035em;margin:0}
.teach-section-head>p{max-width:460px;color:var(--ink-muted);font-size:15px}
.teach-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.teach-cards>a{padding:26px;background:var(--surface-card);border:1px solid var(--line);border-radius:18px;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}
.teach-cards>a:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.teach-card-icon{display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);width:48px;height:48px;border-radius:14px;font-weight:750;font-size:20px;margin-bottom:26px}
.teach-cards>a:nth-child(2) .teach-card-icon{color:var(--accent-teal);background:var(--accent-teal-soft)}
.teach-cards>a:nth-child(3) .teach-card-icon{color:var(--accent-amber);background:var(--accent-amber-soft)}
.teach-card-meta{font-size:10px;letter-spacing:.08em;color:var(--ink-muted)}
.teach-cards h3{font-size:20px;letter-spacing:-.02em;margin:12px 0}
.teach-cards p{color:var(--ink-muted);font-size:14px;line-height:1.8;margin-bottom:24px}
.teach-cards strong{font-size:13px;color:var(--brand);margin-top:auto}
.teach-contact{border:1px solid var(--line);border-radius:24px;background:radial-gradient(ellipse at 95% 100%,var(--accent-violet-soft),transparent 60%),var(--brand-soft);padding:42px;display:flex;align-items:center;justify-content:space-between;gap:40px;margin-bottom:70px}
.teach-contact p:last-child{max-width:none;color:var(--ink-muted);font-size:15px;margin-top:18px}
.teach-contact-actions{display:flex;flex-direction:column;gap:17px;text-align:center;flex-shrink:0;font-size:12px}
.teach-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.teach-footer p{font-size:12px;color:var(--ink-muted);margin-top:8px}
.teach-footer nav{display:flex;gap:20px;font-size:13px}
.teach-footer small{color:var(--ink-muted)}
a:focus-visible{outline:3px solid var(--brand);outline-offset:5px}
@media(max-width:950px){.teach-layout{gap:24px;padding-block:55px}.teach-mascot{right:0;width:150px}.teach-sheet{margin-right:0;padding-inline:18px}.teach-contact{align-items:flex-start;flex-direction:column}.teach-section-head{align-items:flex-start;flex-direction:column;gap:20px}.teach-section-head>p{max-width:600px}.teach-cards{gap:12px}.teach-cards>a{padding:20px}}
@media(max-width:680px){.lp-head .brand{font-size:15px}.lp-head .brand-mark{width:30px;height:30px;font-size:13px}.lp-head .head-actions .btn{font-size:12px;padding-inline:12px;min-height:44px}.teach-layout{grid-template-columns:1fr;padding-block:40px 45px;gap:20px}.teach-copy h1{font-size:clamp(32px,8vw,45px)}.teach-lead{font-size:16px}.teach-art{min-height:385px;max-width:430px;width:100%;margin:auto}.teach-sheet{margin-right:16px}.teach-mascot{bottom:-12px;width:160px}.teach-sticker{bottom:10px}.teach-strip .wrap{grid-template-columns:1fr;gap:14px}.teach-strip span{flex-direction:row;flex-wrap:wrap;gap:8px;align-items:baseline}.teach-strip b{font-size:14px}.teach-resources{padding-block:42px}.teach-section-head h2,.teach-contact h2{font-size:28px}.teach-cards{grid-template-columns:1fr}.teach-card-icon{margin-bottom:18px}.teach-contact{padding:25px;margin-bottom:40px}.teach-contact-actions{width:100%}.teach-footer{align-items:flex-start;flex-direction:column}.teach-actions .btn{flex:1 1 auto;white-space:nowrap}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.teach-cards>a{transition:none}}
/* Chữ phải ĐẦY DÒNG rồi mới xuống (09/2026, người chủ: "chưa hết diện tích mà
   cứ tự tiện xuống dòng"). landing.css bật text-wrap: balance cho tiêu đề và
   pretty cho đoạn văn - balance chia đều chữ ra các dòng nên dòng đầu bị cắt
   ngắn dù còn chỗ, pretty kéo bớt chữ xuống để dòng cuối không trơ một từ.
   Cả hai đều tạo cảm giác "xuống dòng sớm" trên trang này, nên tắt ở đây;
   các trần max-width hẹp (520/370/590px) cũng đã nới ở phía trên. */
.teach-copy h1,.teach-sheet h2,.teach-section-head h2,.teach-contact h2,.teach-lesson h2,.teach-trust h2,.teach-faq h2,.teach-final h2,.teach-cards h3,.teach-trust h3,.teach-demo-context h3,main p,main legend,main summary{text-wrap:wrap}
.teach-contact-actions .btn{min-height:46px}