:root{--purple:#6a1b9a;--purple-deep:#4a148c;--blue:#027be3;--card:#fff;--text:#4a148c;--muted:#6d4c7d;--border:#6a1b9a2e;--shadow:0 8px 24px #4a148c33}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background-attachment:fixed;background-color:#b39ddb;background-image:url(/menu/room-background-2.png);background-position:50%;background-size:cover;color:var(--text);font-family:Mali,Segoe UI,system-ui,sans-serif;line-height:1.6;margin:0;min-height:100vh}a{color:var(--purple)}a:hover{color:var(--blue)}.wrap{margin:0 auto;max-width:1000px;padding:1rem 1rem 2.5rem}.site-header{background:#fffffff2;border:2px solid #ffffffe6;border-radius:16px;box-shadow:var(--shadow);flex-wrap:wrap;gap:.65rem;justify-content:space-between;margin-bottom:1rem;padding:.55rem .9rem}.brand,.site-header{align-items:center;display:flex}.brand{color:inherit;gap:.55rem;text-decoration:none}.brand img{border-radius:10px;height:40px;width:40px}.brand strong{color:var(--purple);display:block;font-size:1rem;line-height:1.15}.brand span{color:var(--muted);font-size:.8rem}.header-tools{align-items:center;gap:.55rem}.header-tools,.nav{display:flex;flex-wrap:wrap}.nav{font-size:.9rem;font-weight:700;gap:.25rem .65rem}.nav a{border-radius:8px;color:var(--purple);padding:.2rem .4rem;text-decoration:none}.nav a[aria-current=page]{background:#f3e5f5}.lang-btn{align-items:center;background:linear-gradient(180deg,#8e24aa 0,var(--purple) 100%);border:none;border-radius:999px;box-shadow:0 3px 0 var(--purple-deep),0 4px 12px #6a1b9a59;color:#fff;cursor:pointer;display:inline-flex;font-family:inherit;font-size:.85rem;font-weight:800;gap:.4rem;height:2.2rem;justify-content:center;letter-spacing:.02em;min-width:3.6rem;padding:0 .85rem 0 .7rem;transition:transform .12s ease,filter .12s ease,box-shadow .12s ease}.lang-btn .lang-globe{display:block;flex-shrink:0;height:1.15rem;width:1.15rem}.lang-btn .lang-globe svg{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;display:block;height:100%;width:100%}.lang-btn:hover{box-shadow:0 4px 0 var(--purple-deep),0 6px 14px #6a1b9a66;filter:brightness(1.08)}.lang-btn:active{box-shadow:0 1px 0 var(--purple-deep),0 2px 6px #6a1b9a4d;transform:translateY(2px) scale(.97)}body:not(.lang-en):not(.lang-th) [data-i18n-en],html:not(.i18n-ready) [data-i18n-en]{display:none!important}.panel{background:#fffffff5;border:2px solid #fffffff2;border-radius:18px;box-shadow:var(--shadow);margin-bottom:1rem;padding:1.25rem 1.15rem 1.5rem}.panel-title{color:var(--purple);font-size:clamp(1.6rem,4vw,2.1rem);font-weight:800;margin:0 0 .35rem;text-align:center}.panel-sub{color:var(--muted);font-size:1rem;margin:0 auto 1rem;max-width:36rem;text-align:center}.cta-row{display:flex;flex-wrap:wrap;gap:.65rem;justify-content:center;margin-top:1rem}.btn{border:2px solid #0000;border-radius:999px;display:inline-block;font-size:1.02rem;font-weight:800;padding:.7rem 1.25rem;text-decoration:none;transition:transform .12s ease}.btn:active{transform:scale(.96)}.btn-primary{background:var(--purple);border-color:var(--purple-deep);color:#fff}.btn-primary:hover{color:#fff;filter:brightness(1.06)}.btn-secondary{background:#fff;border-color:var(--purple);color:var(--purple)}.btn-secondary:hover{background:#f3e5f5;color:var(--purple)}.grid{display:grid;gap:.85rem;grid-template-columns:1fr}@media (min-width:640px){.grid.cols-2{grid-template-columns:1fr 1fr}.grid.cols-3{grid-template-columns:1fr 1fr 1fr}.grid.cols-5{grid-template-columns:repeat(5,1fr)}}@media (max-width:720px){.grid.cols-5{grid-template-columns:repeat(2,1fr)}}.card{background:#faf7ff;border:1px solid var(--border);border-radius:14px;padding:.9rem 1rem}.card h3{color:var(--purple);font-size:1.05rem;margin:0 0 .35rem}.card p{color:var(--text);margin:0}.section{color:var(--purple);font-size:1.25rem;margin:1.25rem 0 .65rem;text-align:center}.site-footer{color:#fff;font-size:.9rem;margin-top:.5rem;padding:.75rem;text-align:center;text-shadow:0 1px 4px #00000059}.site-footer a{color:#fff;font-weight:700}.guide-slide{margin:.5rem 0 .75rem;text-align:center}.guide-slide img{background:#fff;border-radius:8px;box-shadow:0 4px 16px #0000001f;height:auto;max-width:100%}.guide-nav-btns{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center;margin:.65rem 0 1rem}.guide-nav-btns button{background:#fff;border:2px solid var(--purple);border-radius:999px;color:var(--purple);cursor:pointer;font-family:inherit;font-weight:700;min-width:2.4rem;padding:.4rem .9rem}.guide-nav-btns button.is-active{background:var(--purple);color:#fff}.note-img{color:var(--muted);font-size:.88rem;margin:.35rem 0 .75rem}.note-img,.topic-tile{text-align:center}.topic-tile img{display:block;height:auto;margin:0 auto .4rem;max-width:120px;width:100%}.word-row{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:.75rem 0}.word-row img{background:#fff;border:1px solid var(--border);border-radius:14px;height:76px;object-fit:contain;padding:.3rem;width:76px}.teach-list{margin:.35rem 0 0;padding-left:1.2rem}.teach-list li{margin-bottom:.4rem}body.lang-en [data-i18n-th],body.lang-th [data-i18n-en]{display:none!important}body.lang-en,body.lang-en .btn,body.lang-en .nav a,body.lang-en .panel-sub,body.lang-en .panel-title{font-family:Segoe UI,system-ui,sans-serif}.lang-switch{display:none!important}