* { box-sizing: border-box; }
:root{
  --teal-900:#0f766e; --teal-700:#139488; --ink:#102a43; --muted:#61768a;
  --gold:#b98316; --ok:#0a7d52; --no:#c0392b;
  --shadow:0 18px 50px rgba(15,42,67,.10);
  --line:rgba(15,118,110,.16);
}
body{
  margin:0; min-height:100vh; color:var(--ink);
  font-family:"Prompt","IBM Plex Sans Thai","Noto Sans Thai",system-ui,sans-serif;
  letter-spacing:-.015em; line-height:1.7;
  /* พื้นหลังแบบนิ่ง ไม่ใช้ blur/attachment fixed (กัน GPU อ่อน) */
  background:
    radial-gradient(circle at 12% 8%, rgba(0,143,131,.08), transparent 30%),
    radial-gradient(circle at 88% 14%, rgba(201,154,46,.08), transparent 26%),
    linear-gradient(135deg,#ffffff 0%,#f6fbfc 42%,#eef8f7 100%);
}
/* พื้นหลังภาพ (เจนจาก AI) — fixed แต่ไม่ใช้ blur/attachment:fixed กัน GPU อ่อน · ถ้าไม่มีไฟล์ก็โปร่ง เห็น gradient เดิม */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  /* พื้นหลังต่อบท: engine ตั้ง --page-bg ตาม lesson.theme.page (โทน/ลายไม่ซ้ำทุกบท) · ไม่มี theme = ใช้ภาพเดิม */
  background: var(--page-bg, url('assets/bg-learn.jpg') center center / cover no-repeat);
}
h1,h2,h3{font-weight:600; letter-spacing:-.03em; line-height:1.15; margin:0;}
p,li,button,span,strong,label{line-height:1.7;}
button{font-family:inherit;}
a{color:inherit; text-decoration:none;}
code{background:rgba(15,118,110,.08); padding:1px 6px; border-radius:6px;}

.site-shell{max-width:1480px; margin:0 auto; padding:18px 18px 28px;}

/* การ์ด — ไม่มี backdrop-filter blur */
.panel{
  background:#ffffff; border:1px solid var(--line); border-radius:24px;
  box-shadow:var(--shadow); position:relative; overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.panel:hover{transform:translateY(-3px); border-color:rgba(15,118,110,.3);}
.panel-main,.main-visual-panel{border-color:rgba(15,118,110,.28);}

.topbar{margin-bottom:20px; padding:14px 18px; display:flex; justify-content:space-between; align-items:center; gap:16px;}
.topbar-left{display:flex; align-items:center; gap:14px;}
.brand-mark{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--teal-900),var(--teal-700)); box-shadow:0 12px 30px rgba(15,118,110,.25);}
.brand-icon{font-size:22px;}
.brand-name{font-weight:700;font-size:1.15rem;}
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--muted);font-size:.95rem;}
.sep{color:#9fb0bd;}

.primary-button,.secondary-button,.icon-pill{
  border:none;border-radius:16px;padding:11px 18px;cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.primary-button{background:linear-gradient(135deg,var(--teal-900),#0aa398);color:#fff;box-shadow:0 12px 28px rgba(15,118,110,.22);}
.primary-button:hover{transform:translateY(-2px);}
.secondary-button,.icon-pill{background:#fff;color:var(--ink);border:1px solid var(--line);}
.secondary-button:hover,.icon-pill:hover{background:#f0fffb;border-color:rgba(15,118,110,.3);transform:translateY(-2px);}

.lesson-grid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:22px;align-items:start;}
.title-strip{grid-column:1/-1;padding:20px 24px;}
.title-strip-inner{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;}
.gold-pill{display:inline-flex;align-items:center;padding:8px 15px;border-radius:999px;font-size:.95rem;
  background:#fff;color:var(--gold);border:1px solid rgba(201,154,46,.3);}
.lesson-banner{display:block;width:100%;max-height:230px;object-fit:cover;border-radius:14px;border:1px solid var(--line);margin-bottom:14px;}

/* ---------- สูตร: กรอบทองเรืองแสง (ใช้ทุกบท) · GPU-light: animate opacity ล้วน ---------- */
.formula{
  position:relative; display:inline-block; font-weight:700; color:#7a5712;
  font-family:"Prompt","IBM Plex Sans Thai",system-ui,sans-serif; letter-spacing:0;
  background:linear-gradient(180deg,#fffdf4 0%,#fdf2ce 100%);
  border:2px solid #C9A227; border-radius:13px;
  padding:.30em .95em; margin:.18em .12em; line-height:1.55; white-space:nowrap;
  box-shadow:0 0 0 1px rgba(201,162,39,.28), 0 6px 20px rgba(201,162,39,.34), inset 0 1px 0 rgba(255,255,255,.75);
}
.formula strong,.formula b{color:#8a3b00;}
.formula::after{
  content:""; position:absolute; inset:-3px; border-radius:15px; pointer-events:none; z-index:-1;
  box-shadow:0 0 20px 4px rgba(228,182,79,.6);
  opacity:.4; animation:formulaGlow 2.6s ease-in-out infinite;
}
@keyframes formulaGlow{0%,100%{opacity:.32}50%{opacity:.9}}
/* สูตรเดี่ยวจัดกลาง (บล็อก) */
.formula-box{display:block; text-align:center; margin:16px auto;}
.formula-box .formula{font-size:1.18em; padding:.42em 1.25em;}
@media (prefers-reduced-motion:reduce){.formula::after{animation:none; opacity:.55;}}

/* ---------- KenBurns slideshow (ภาพนิ่งเคลื่อนช้า sync เสียงครู) ---------- */
/* กรอบทอง #C9A227 คงที่ · มอชัน transform+opacity ล้วน (GPU เบา ตาม feedback_weak_gpu_perf) */
.kb-stage{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  border:3px solid #C9A227;margin:2px 0 16px;background:#eceae4;box-shadow:0 8px 22px rgba(15,42,67,.12);}
.kb-slide{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity .6s ease;will-change:transform,opacity;}
.kb-slide.kb-first{opacity:1;}
@keyframes kb-zoom-in{from{transform:scale(1.02)}to{transform:scale(1.14)}}
@keyframes kb-zoom-out{from{transform:scale(1.14)}to{transform:scale(1.02)}}
@keyframes kb-pan-left{from{transform:scale(1.14) translateX(2.5%)}to{transform:scale(1.14) translateX(-2.5%)}}
@keyframes kb-pan-right{from{transform:scale(1.14) translateX(-2.5%)}to{transform:scale(1.14) translateX(2.5%)}}
@keyframes kb-pan-up{from{transform:scale(1.14) translateY(2.5%)}to{transform:scale(1.14) translateY(-2.5%)}}
@keyframes kb-pan-down{from{transform:scale(1.14) translateY(-2.5%)}to{transform:scale(1.14) translateY(2.5%)}}
@keyframes kb-fade-scale-in{from{transform:scale(1.06)}to{transform:scale(1.0)}}
@keyframes kb-fade-scale-out{from{transform:scale(1.0)}to{transform:scale(1.08)}}
@media (prefers-reduced-motion: reduce){ .kb-slide{animation:none !important;} }
.lesson-title{flex:1 1 100%;max-width:880px;font-size:clamp(1.8rem,2.6vw,3rem);line-height:1.18;}
.lesson-subtitle{flex:1 1 100%;color:var(--muted);margin:0;}

.sidebar-left{display:grid;gap:18px;position:sticky;top:18px;}
.content-stack{display:grid;gap:18px;}
.controls-panel,.main-visual-panel,.practice-panel,.exam-panel,.teach-panel{padding:20px;}

.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}
.panel-heading h2{font-size:1.4rem;}
.panel-heading h3{font-size:1.15rem;}
.panel-sound-btn{padding:9px 14px;border-radius:999px;font-size:.92rem;white-space:nowrap;
  background:#fff;color:var(--teal-900);border:1px solid var(--line);cursor:pointer;}
.panel-sound-btn:hover{background:#f0fffb;border-color:rgba(15,118,110,.32);}

.hero-tip{display:flex;gap:10px;align-items:flex-start;margin-bottom:14px;}
.tip-icon{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:50%;
  background:rgba(0,143,131,.1);color:var(--teal-900);}
.controls-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.icon-pill{min-height:84px;flex-direction:column;display:flex;align-items:center;justify-content:center;gap:6px;}
.icon-dot{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:rgba(0,143,131,.1);font-size:1.1rem;}

.hero-illustration-shell{border-radius:20px;border:1px solid var(--line);
  background:linear-gradient(145deg,#e9f7f2,#fff);overflow:hidden;}
/* โชว์ภาพเต็มไม่ crop — แผงภาพอยู่เต็มความกว้างคอลัมน์เนื้อหา คู่กับกล่องสอนแรก */
.lesson-illustration{display:block;width:100%;height:auto;}
.hero-illustration{object-fit:contain;}

/* เนื้อหาสอน */
.teach-panel .teach-text{font-size:1.02rem;line-height:2;}
.teach-steps{margin:6px 0 0;padding-left:22px;display:grid;gap:6px;}
/* แต่ละ "ตัวอย่าง/ประเด็น" ที่คั่นด้วย · แยกเป็นบรรทัดกล่องของตัวเอง กันสมการยาวชนกันตอนตัดบรรทัด */
.example-line{
  font-size:1.02rem; line-height:1.9; padding:10px 14px; margin-top:8px;
  border-radius:14px; border:1px solid var(--line); background:#fafffe;
}
.example-line:first-child{margin-top:0;}
/* โซนคณิตศาสตร์ (ตัวเลข/เศษส่วน/= + − × ÷) ห้ามตัดบรรทัดกลางสมการ
   ถ้าที่แคบไป ให้ทั้งก้อนขยับลงบรรทัดใหม่แทน (ไม่ใช่หักครึ่งสมการ) */
.calc-chunk{display:inline-block; white-space:nowrap;}
.fraction-demo-row{margin-top:10px;display:flex;}
.example-board{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;}
.example-item{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:18px;border:1px solid var(--line);background:#fafffe;}
.example-meta{font-size:.95rem;}
.example-read{color:var(--teal-900);font-weight:500;}
.example-cap{color:var(--muted);font-size:.88rem;}

/* เศษส่วนบน-ล่าง
   ค่าเริ่มต้น = สัมพัทธ์กับตัวหนังสือรอบข้าง (em) กันปัญหาตัวเลขข้างเคียง (เช่น "2 1/5")
   ขนาดไม่สมส่วนกัน · จุดที่ต้องการเศษส่วนเดี่ยวตัวใหญ่ (โจทย์หลัก/การ์ดตัวอย่าง) override ไว้ด้านล่าง */
.fraction-display{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  line-height:1;font-weight:600;color:var(--ink);font-size:0.78em;vertical-align:-0.32em;margin:0 0.06em;}
.fraction-top{padding:0 0.14em 0.04em;}
.fraction-line{width:100%;min-width:0.85em;height:0.06em;min-height:1.4px;border-radius:999px;background:currentColor;}
.fraction-bottom{padding:0.04em 0.14em 0;}

/* จำนวนคละ (จำนวนเต็ม+เศษส่วน) — ก้อนเดียวกัน จัดกึ่งกลางแนวตั้งด้วยกันเสมอ
   กันปัญหาจำนวนเต็มลอยอยู่บน แต่เศษส่วนจมอยู่ล่าง (ไม่ตรงแนว) */
.mixed-number{display:inline-flex;align-items:center;gap:0.06em;vertical-align:-0.08em;}
.mixed-whole{font-weight:600;color:var(--ink);line-height:1;}
.mixed-number .fraction-display{font-size:0.85em;vertical-align:baseline;margin:0;}

/* เศษส่วนเดี่ยวตัวใหญ่ (ไม่ปนกับข้อความรอบข้าง) — ครอบคลุมจำนวนคละในบริบทนี้ด้วย */
.fraction-demo-row .fraction-display,
.example-item .fraction-display,
.practice-question .fraction-display,
.mock-question-text .fraction-display,
.practice-expression .fraction-display,
.fraction-demo-row .mixed-number .fraction-display,
.example-item .mixed-number .fraction-display,
.practice-question .mixed-number .fraction-display,
.mock-question-text .mixed-number .fraction-display,
.practice-expression .mixed-number .fraction-display{
  font-size:clamp(1.6rem,2vw,2.4rem); vertical-align:middle; margin:0 2px;
}
.fraction-demo-row .mixed-whole,.example-item .mixed-whole,.practice-question .mixed-whole,
.mock-question-text .mixed-whole,.practice-expression .mixed-whole{
  font-size:clamp(1.6rem,2vw,2.4rem);
}
.fraction-demo-row .fraction-top,.example-item .fraction-top,.practice-question .fraction-top,
.mock-question-text .fraction-top,.practice-expression .fraction-top{padding:0 10px 5px;}
.fraction-demo-row .fraction-line,.example-item .fraction-line,.practice-question .fraction-line,
.mock-question-text .fraction-line,.practice-expression .fraction-line{min-width:40px;height:3px;min-height:3px;}
.fraction-demo-row .fraction-bottom,.example-item .fraction-bottom,.practice-question .fraction-bottom,
.mock-question-text .fraction-bottom,.practice-expression .fraction-bottom{padding:5px 10px 0;}

/* แบบฝึก/ข้อสอบ */
.practice-lead{color:var(--muted);margin-bottom:8px;}
.practice-question,.mock-question-text{font-size:clamp(1.2rem,1.6vw,1.6rem);font-weight:500;margin:8px 0;}
.practice-audio-row,.mock-audio-row,.row-actions{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0;}
.practice-choice-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px;}
.mock-choice-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:12px;}
.practice-choice-item,.mock-choice-item{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:#fff;}
.practice-choice-item label,.mock-choice-item label{display:flex;align-items:center;gap:10px;cursor:pointer;}
.choice-badge{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:0 0 30px;
  background:rgba(0,143,131,.12);color:var(--teal-900);font-weight:600;}
.exam-copy{color:var(--muted);font-size:.95rem;}
.mock-question{margin-top:12px;padding:16px;border-radius:18px;border:1px solid var(--line);background:#fafffe;}

.feedback{margin-top:12px;padding:12px 16px;border-radius:16px;border:1px solid var(--line);background:#f6fffb;}
.feedback .ok,.example-read.ok{color:var(--ok);}
.feedback .no{color:var(--no);}
.solution{margin-top:12px;padding:16px;border-radius:18px;border:1px dashed rgba(15,118,110,.4);background:#f3fdf9;}
.solution-step{margin-top:10px;padding:12px 14px;border-radius:14px;background:#fafffe;border:1px solid var(--line);}
.solution-step strong{display:block;margin-bottom:4px;}
/* เฉลยทีละขั้น: เลขลำดับ 1 2 3 + เผยทีละกล่องคู่เสียงครู */
.step-solution .solution-step{display:flex;gap:12px;align-items:flex-start;}
.step-num{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;border-radius:50%;
  background:var(--teal-900,#0f766e);color:#fff;font-weight:600;font-size:1.05rem;}
.step-body{flex:1;min-width:0;}
.step-solution .panel-sound-btn{align-self:center;}
.sstep.hide{display:none;}
.sstep-in{animation:stepIn .5s ease;}
@keyframes stepIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.step-controls{margin-top:12px;}

/* กระดานทด — เลขเรียงหลักแนวตั้ง ช่องตารางเหมือนสมุดกราฟ */
.work-board{margin:12px 0 4px;overflow-x:auto;}
.work-board-inner{display:inline-block;padding:10px 12px;border-radius:14px;
  background:#fffdf5;border:1px solid rgba(201,154,46,.35);}
.brow{display:flex;align-items:stretch;}
.blabel{flex:0 0 auto;min-width:104px;display:flex;align-items:center;justify-content:flex-end;
  padding-right:10px;font-size:.88rem;color:var(--muted);white-space:nowrap;}
.bcell{width:40px;min-height:46px;display:grid;place-items:center;
  font-size:1.45rem;font-weight:600;color:var(--ink,#123);
  border:1px solid rgba(15,118,110,.14);margin:-1px 0 0 -1px;background:#fff;}
.bdotcell{width:20px;background:transparent;border-color:transparent;font-weight:700;}
.bop{background:transparent;border-color:transparent;font-size:1.4rem;color:#b45309;}
.bheadrow .bcell{min-height:30px;font-size:.62rem;font-weight:500;line-height:1.15;
  color:var(--muted);background:#f4faf8;padding:2px;text-align:center;white-space:normal;}
.bfocus{background:#fff3cd !important;border-color:#d9a441 !important;position:relative;z-index:1;}
.bheadrow .bfocus{color:#8a5a00;font-weight:700;}
.banswer .bcell{border-top:3px double #0f766e;background:#f0fdf9;}
.bpad0{color:#c27803;}
.bnote{margin-top:8px;font-size:.98rem;font-weight:600;color:#0f766e;}

.toast-wrap{position:fixed;right:20px;bottom:20px;display:grid;gap:10px;z-index:50;}
.toast{min-width:220px;max-width:340px;padding:13px 16px;border-radius:16px;border:1px solid var(--line);
  background:#fff;box-shadow:var(--shadow);animation:tin .18s ease;}
.hide{display:none !important;}
@keyframes tin{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

@media (max-width:1100px){
  .lesson-grid{grid-template-columns:1fr;}
  .sidebar-left{position:static;}
}
@media (max-width:620px){
  .practice-choice-list,.mock-choice-list{grid-template-columns:1fr;}
  .practice-choice-item,.mock-choice-item{flex-direction:column;align-items:stretch;}
  .lesson-title{font-size:clamp(1.5rem,6vw,2.2rem);}
}