@font-face{font-family:"ItimLocal";src:url("fonts/itim-thai-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0E00-0E7F}
@font-face{font-family:"ItimLocal";src:url("fonts/itim-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF}
@font-face{font-family:"MaliLocal";src:url("fonts/mali-thai-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0E00-0E7F}
@font-face{font-family:"MaliLocal";src:url("fonts/mali-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF}
@font-face{font-family:"MaliLocal";src:url("fonts/mali-thai-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0E00-0E7F}
@font-face{font-family:"MaliLocal";src:url("fonts/mali-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF}

:root{
  --brick:#9e3034;--brick-dark:#742125;--peach:#f7d1bf;--cream:#fff9f3;
  --gold:#e4a52c;--gold-pale:#ffe8a7;--ink:#462d2a;--muted:#745e59;
  --line:#edd3c6;--white:#fff;--green:#4d7e57;--shadow:0 18px 45px rgba(112,49,40,.13);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:
  radial-gradient(circle at 6% 8%,rgba(247,209,191,.55),transparent 18rem),
  radial-gradient(circle at 94% 40%,rgba(255,232,167,.42),transparent 20rem),#fffdfb;
  font-family:"MaliLocal",Tahoma,sans-serif;font-size:18px;line-height:1.75}
button,a,select{font:inherit}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{cursor:pointer}
[hidden]{display:none!important}
.skip-link{position:fixed;left:1rem;top:-5rem;z-index:100;background:#fff;padding:.65rem 1rem;border-radius:999px}
.skip-link:focus{top:1rem}
.site-header{position:sticky;top:0;z-index:30;background:linear-gradient(115deg,var(--brick-dark),var(--brick));color:#fff;box-shadow:0 8px 24px rgba(74,23,25,.18)}
.header-inner{max-width:1440px;margin:auto;min-height:92px;padding:12px 28px;display:flex;align-items:center;gap:22px}
.brand{display:flex;align-items:center;gap:13px;margin-right:auto;min-width:max-content}
.brand-mark{width:58px;height:58px;border-radius:19px;display:grid;place-items:center;background:#fff1c8;color:var(--brick-dark);font-size:30px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.brand-copy strong{display:block;color:#fff3b9;font-family:"ItimLocal",Tahoma,sans-serif;font-size:25px;line-height:1.15;font-weight:400}
.brand-copy span{display:block;font-size:13px;opacity:.92;line-height:1.3;margin-top:3px}
.nav{display:flex;align-items:center;gap:4px}
.nav a{display:flex;align-items:center;min-height:48px;padding:8px 12px;border-radius:16px;font-family:"ItimLocal",Tahoma,sans-serif;font-size:16px;white-space:nowrap;transition:.2s}
.nav a:hover,.nav a:focus-visible{background:rgba(255,255,255,.14);transform:translateY(-1px)}
.nav a.active{background:#fff;color:var(--brick-dark);box-shadow:0 8px 20px rgba(80,20,22,.15)}
.menu-btn{display:none;border:0;border-radius:18px;background:#fff;color:var(--brick-dark);padding:10px 16px;min-height:48px;font-weight:600}
.container{width:min(1180px,calc(100% - 40px));margin-inline:auto}
.page-main{padding:54px 0 70px;min-height:70vh}
.hero{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(330px,.82fr);gap:28px;align-items:stretch}
.hero-visual,.hero-copy,.intro-card,.lesson-card,.feature-card,.quiz-shell{background:rgba(255,255,255,.94);border:1.5px solid var(--line);border-radius:34px;box-shadow:var(--shadow)}
.hero-visual{padding:18px;position:relative;overflow:hidden}
.hero-visual::after{content:"";position:absolute;right:-65px;bottom:-80px;width:190px;height:190px;border-radius:50%;background:rgba(255,224,142,.45);z-index:0}
.hero-visual img{position:relative;z-index:1;width:100%;height:100%;min-height:390px;object-fit:cover;border-radius:23px}
.hero-copy{padding:42px 38px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--brick);font-weight:600;font-size:15px;letter-spacing:.03em;margin:0 0 8px}
.eyebrow::before{content:"";width:30px;height:3px;border-radius:9px;background:var(--gold)}
h1,h2,h3{font-family:"ItimLocal",Tahoma,sans-serif;font-weight:400;line-height:1.18;margin:0;color:var(--brick-dark)}
.hero h1{font-size:clamp(46px,6vw,76px)}
.hero-copy p{font-size:20px;color:var(--muted);margin:20px 0 26px}
.button-row{display:flex;gap:12px;flex-wrap:wrap}
.primary-btn,.secondary-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:10px 22px;border-radius:17px;font-weight:600;transition:.2s;border:2px solid var(--brick)}
.primary-btn{background:var(--brick);color:#fff}
.secondary-btn{background:#fff;color:var(--brick)}
.primary-btn:hover,.secondary-btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(122,40,43,.15)}
.stat-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:28px}
.stat{padding:19px 16px;border-radius:23px;background:linear-gradient(145deg,#fff,#fff4eb);border:1px solid var(--line);text-align:center}
.stat strong{display:block;color:var(--brick);font-family:"ItimLocal",Tahoma,sans-serif;font-size:31px;font-weight:400;line-height:1}
.stat span{font-size:14px;color:var(--muted)}
.section{margin-top:56px}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:21px}
.section-heading h2{font-size:clamp(34px,4vw,48px)}
.section-heading p{max-width:560px;margin:0;color:var(--muted)}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feature-card{padding:26px;transition:.2s;position:relative;overflow:hidden}
.feature-card:hover{transform:translateY(-4px);border-color:#e9bca6}
.feature-card .icon{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;background:#fff0cd;font-size:28px;margin-bottom:16px}
.feature-card h3{font-size:28px;margin-bottom:7px}
.feature-card p{margin:0;color:var(--muted);font-size:16px}
.page-hero{background:linear-gradient(135deg,#fff 0%,#fff7f1 72%,#ffe9b7 100%);border:1.5px solid var(--line);border-radius:34px;padding:34px 38px;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:28px}
.page-hero h1{font-size:clamp(40px,5vw,60px)}
.page-hero p{margin:9px 0 0;color:var(--muted);max-width:720px}
.hero-icon{flex:0 0 82px;width:82px;height:82px;border-radius:26px;background:var(--gold-pale);display:grid;place-items:center;font-size:44px;transform:rotate(3deg)}
.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:26px}
.summary-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:20px 21px}
.summary-card strong{display:block;color:var(--brick);font-size:19px;margin-bottom:4px}
.summary-card span{color:var(--muted);font-size:15px}
.lesson-card{padding:24px}
.lesson-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:17px}
.lesson-topbar h2{font-size:30px}
.counter{padding:7px 13px;border-radius:999px;background:#fff2e9;color:var(--brick);font-weight:600;font-size:15px}
.slide-frame{position:relative;background:#f3ede8;border-radius:25px;min-height:360px;overflow:hidden;display:grid;place-items:center}
.slide-frame img{width:100%;max-height:72vh;object-fit:contain;cursor:zoom-in;background:#fff}
.slide-controls{display:grid;grid-template-columns:auto minmax(180px,1fr) auto;align-items:center;gap:14px;margin-top:17px}
.slide-btn{border:0;background:var(--brick);color:#fff;min-height:48px;padding:9px 18px;border-radius:16px;font-weight:600}
.slide-btn:disabled{opacity:.35;cursor:not-allowed}
.slide-jump{width:100%;min-height:48px;border:1.5px solid var(--line);border-radius:16px;padding:7px 14px;background:#fff;color:var(--ink)}
.story-nav{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:28px}
.story-link{background:#fff;border:1px solid var(--line);border-radius:20px;padding:15px;text-align:center;transition:.2s}
.story-link:hover{border-color:var(--brick);transform:translateY(-2px)}
.story-link strong{display:block;color:var(--brick);font-size:16px}.story-link span{font-size:13px;color:var(--muted)}
.lightbox{position:fixed;inset:0;z-index:90;background:rgba(35,18,15,.92);display:grid;grid-template-rows:auto 1fr;place-items:center;padding:18px}
.lightbox-close{justify-self:end;border:0;background:#fff;color:var(--brick-dark);border-radius:999px;min-width:48px;height:48px;font-size:28px;line-height:1}
.lightbox img{max-height:calc(100vh - 90px);max-width:min(1400px,96vw);object-fit:contain;border-radius:16px;box-shadow:0 20px 80px rgba(0,0,0,.4)}
.quiz-shell{padding:30px;max-width:900px;margin:auto}
.quiz-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:18px}
.quiz-head h1{font-size:clamp(36px,5vw,54px)}
.quiz-progress{height:13px;background:#f2e4dc;border-radius:999px;overflow:hidden;margin-bottom:27px}
.quiz-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--brick));width:0;transition:.35s}
.quiz-meta{color:var(--muted);font-weight:600}
.question{font-family:"ItimLocal",Tahoma,sans-serif;font-size:30px;line-height:1.42;color:var(--ink);margin:14px 0 22px}
.choices{display:grid;gap:12px}
.choice{width:100%;text-align:left;border:1.5px solid var(--line);background:#fff;border-radius:19px;padding:14px 17px;display:flex;gap:13px;align-items:flex-start;color:var(--ink);transition:.18s;min-height:58px}
.choice:hover:not(:disabled){border-color:#db9a7a;background:#fffaf6;transform:translateX(3px)}
.choice .letter{flex:0 0 34px;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:#fff0cd;color:var(--brick);font-weight:600}
.choice.correct{border-color:#4f925f;background:#effaf1}.choice.correct .letter{background:#4f925f;color:#fff}
.choice.wrong{border-color:#cc5559;background:#fff0f0}.choice.wrong .letter{background:#cc5559;color:#fff}
.feedback{margin-top:18px;border-radius:18px;padding:15px 18px;background:#fff7de;border-left:5px solid var(--gold);color:var(--ink)}
.quiz-actions{display:flex;justify-content:flex-end;margin-top:18px}
.result{text-align:center;padding:20px 5px}.result .trophy{font-size:68px}.result h2{font-size:50px}.result-score{font-family:"ItimLocal";font-size:38px;color:var(--brick);margin:12px 0}.result p{color:var(--muted)}
.site-footer{background:#5d1c1f;color:#fff3ed;padding:32px 0;margin-top:30px}
.footer-inner{display:flex;justify-content:space-between;gap:25px;align-items:center}
.footer-inner strong{font-family:"ItimLocal";font-size:25px;color:#ffe7a7;font-weight:400}.footer-inner p{margin:3px 0 0;font-size:14px;opacity:.85}.back-top{padding:9px 15px;border:1px solid rgba(255,255,255,.35);border-radius:14px}
@media(max-width:1120px){.menu-btn{display:block}.nav{display:none;position:absolute;left:20px;right:20px;top:84px;background:#fff;color:var(--brick-dark);padding:12px;border-radius:22px;box-shadow:var(--shadow);grid-template-columns:repeat(2,1fr)}.nav.open{display:grid}.nav a{font-size:17px}.hero{grid-template-columns:1fr}.hero-copy{order:-1}.story-nav{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){body{font-size:17px}.header-inner{padding:10px 16px;min-height:78px}.brand-mark{width:50px;height:50px;border-radius:16px}.brand-copy strong{font-size:20px}.brand-copy span{font-size:11px}.menu-btn{padding:8px 12px}.container{width:min(100% - 24px,1180px)}.page-main{padding:30px 0 50px}.hero-copy{padding:30px 24px}.hero-visual{padding:10px}.hero-visual img{min-height:auto}.hero h1{font-size:49px}.stat-strip{grid-template-columns:1fr}.section{margin-top:40px}.section-heading{display:block}.section-heading p{margin-top:8px}.feature-grid,.summary-grid{grid-template-columns:1fr}.page-hero{padding:27px 23px}.hero-icon{display:none}.lesson-card{padding:12px}.lesson-topbar{padding:7px}.lesson-topbar h2{font-size:25px}.slide-frame{min-height:180px;border-radius:18px}.slide-frame img{max-height:62vh}.slide-controls{grid-template-columns:1fr 1fr}.slide-jump{grid-column:1/-1;grid-row:1}.slide-btn{width:100%}.story-nav{grid-template-columns:repeat(2,1fr)}.quiz-shell{padding:20px 15px}.question{font-size:25px}.quiz-head{align-items:flex-start}.footer-inner{display:block}.back-top{display:inline-block;margin-top:14px}}
@media(max-width:420px){.brand-copy span{display:none}.nav{grid-template-columns:1fr}.story-nav{grid-template-columns:1fr}.hero h1{font-size:44px}.choice{padding:12px}.choice .letter{flex-basis:31px;width:31px;height:31px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}