@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;600;700;800&family=Sarabun:wght@400;600;700&family=Fredoka:wght@500;600;700&display=swap');

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Sarabun',sans-serif;color:#1F2937;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2280%22%20height%3D%2280%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%232563EB%22%20stroke-width%3D%221.1%22%3E%3Cpath%20d%3D%22M40%205L75%2040L40%2075L5%2040Z%22%20stroke-opacity%3D%220.10%22/%3E%3Cpath%20d%3D%22M40%2020L60%2040L40%2060L20%2040Z%22%20stroke-opacity%3D%220.08%22/%3E%3C/g%3E%3C/svg%3E"),radial-gradient(1200px 620px at 12% -8%, #EEF4FF, transparent 62%),radial-gradient(1050px 720px at 104% 2%, #EEF4FF, transparent 56%),radial-gradient(1500px 1000px at 50% 118%, #C7D9F5, transparent 60%),linear-gradient(158deg, #F1F6FF 0%, #DCE9FB 52%, #C7D9F5 100%);background-attachment:scroll;min-height:100vh;padding-bottom:4rem}
nav{position:sticky;top:0;z-index:20;background:rgba(244,248,255,.97);padding:.7rem 5vw;display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #1E40AF22}
.logo{font-family:'Kanit';font-weight:800;color:#1E3A8A;font-size:1rem;text-decoration:none}
.back{font-size:.85rem;color:#1E3A8A;text-decoration:none;font-family:'Kanit';font-weight:600;padding:.3rem .8rem;border:1px solid #1E3A8A;border-radius:99px}
.wrap,.box{max-width:min(900px,94vw);margin:0 auto;padding:1.4rem clamp(1rem,4vw,2rem)}
.crumb{font-family:'Kanit';color:#94A3B8;font-size:.82rem;margin-bottom:.5rem;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.crumb a{color:#1E3A8A;text-decoration:none}
.badge{display:inline-flex;align-items:center;gap:.4rem;background:#1E40AF18;color:#1E3A8A;font-family:'Kanit';font-weight:700;font-size:.78rem;padding:.3rem .8rem;border-radius:99px;margin-bottom:.6rem}
.progress-bar{height:6px;background:#1E40AF22;border-radius:99px;margin:.5rem 0 1rem;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,#1E3A8A,#3B82F6);border-radius:99px}
.hero.typo{border-radius:20px;overflow:hidden;margin-bottom:1.2rem;box-shadow:0 8px 24px #1E40AF22;background:linear-gradient(135deg,#1E3A8A 0%,#2563EB 55%,#3B82F6 100%);padding:2.6rem 1.5rem;text-align:center}
.hero.typo .hth{font-family:'Kanit';font-weight:800;color:#fff;font-size:clamp(1.6rem,5.5vw,2.5rem);line-height:1.2;text-shadow:0 3px 10px #0004}
.hero.typo .hsub{font-family:'Sarabun';font-weight:600;color:#DBEAFE;font-size:1rem;margin-top:.5rem}
h1{font-family:'Kanit';font-weight:800;font-size:1.45rem;color:#1E3A8A;margin-bottom:.3rem}
.card{background:#fff;border-radius:18px;padding:1.3rem;box-shadow:0 6px 20px #1E40AF12;margin-bottom:1rem;border:1px solid #1E40AF18}
.card.intro{background:linear-gradient(135deg,#F5F9FF,#DBEAFE);border-color:#3B82F644}
.sechead{font-family:'Kanit';font-weight:800;font-size:1.08rem;color:#1E3A8A;display:flex;align-items:center;gap:.5rem;margin-bottom:.7rem;flex-wrap:wrap}
.lead{font-size:1.02rem;line-height:2;color:#374151}
.fnum{font-family:'Fredoka',sans-serif;font-weight:600}
.fr{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;margin:0 .18em;font-family:'Fredoka',sans-serif;font-weight:600;line-height:1.1}
.fr .n,.fr .t{padding:0 .35em;border-bottom:2px solid currentColor}
.fr .d,.fr .b,.fr .b2{padding:0 .35em}
.note{margin-top:.6rem;font-size:.92rem;color:#475569;background:#F0F6FF;padding:.5rem .7rem;border-radius:10px;border-left:3px solid #3B82F6}
.board{background:radial-gradient(120% 100% at 50% 0,#0F172A,#1E293B);border-radius:16px;padding:1.1rem 1rem 1.3rem;color:#E2E8F0;border:1px solid #334155}
.board .bq{font-family:'Kanit';font-weight:700;color:#fff;font-size:clamp(1.15rem,4.5vw,1.5rem);text-align:center;margin-bottom:.5rem}
.board .bq .fnum,.board .bq .fr{color:#7DD3FC}
.bstep{opacity:.22;transition:opacity .5s ease;padding:.55rem .2rem;border-bottom:1px dashed #33415588}
.bstep.on{opacity:1}
.bstep .st{font-family:'Kanit';font-weight:700;color:#FCD34D;font-size:.9rem;display:block;margin-bottom:.15rem}
.bstep .sl{font-size:1rem;line-height:1.9;color:#E2E8F0}
.mv{background:#FCD34D33;border-radius:5px;padding:0 .25rem;color:#FDE68A;font-weight:700}
.bans{font-family:'Kanit';font-weight:800;color:#34D399;font-size:1.2rem;text-align:center;margin-top:.6rem}
.bans .fnum,.bans .fr{color:#6EE7B7}
.bctl{display:flex;gap:.5rem;justify-content:center;margin-top:.9rem;flex-wrap:wrap}
.bbtn{font-family:'Kanit';font-weight:700;font-size:.9rem;padding:.45rem 1.1rem;border-radius:99px;border:0;cursor:pointer;background:#3B82F6;color:#fff}
.bbtn.ghost{background:transparent;color:#93C5FD;border:1px solid #3B82F6}
.bdots{display:flex;gap:.45rem;justify-content:center;margin-top:.7rem}
.bdots span{width:11px;height:11px;border-radius:50%;background:#334155;transition:.3s;cursor:pointer}
.bdots span.cur{background:#FCD34D;transform:scale(1.3)}
.pq{padding:.6rem .2rem;border-bottom:1px dashed #DBEAFE;line-height:1.9}
.pn{font-family:'Kanit';font-weight:700;color:#1E3A8A;margin-right:.3rem}
.rev{margin-top:.4rem}
.rev summary{cursor:pointer;color:#0F766E;font-family:'Kanit';font-weight:600;font-size:.9rem}
.rev .ans{background:#F0FDFA;border-radius:10px;padding:.6rem .8rem;margin-top:.4rem;font-size:.95rem;border-left:3px solid #0F766E}
.quizcta{background:linear-gradient(135deg,#F5F9FF,#DBEAFE);border-color:#3B82F644;text-align:center}
.quizcta .lead{font-size:.98rem;margin:.3rem 0 1rem}
.quizbtn{display:inline-block;background:linear-gradient(135deg,#1E3A8A,#3B82F6);color:#fff;font-family:'Kanit';font-weight:700;font-size:1.05rem;padding:.7rem 1.6rem;border-radius:99px;text-decoration:none;box-shadow:0 6px 18px #1E40AF33}
.quizbtn:hover{transform:translateY(-2px);box-shadow:0 10px 24px #1E40AF44}
.rule-line{font-size:1.02rem;line-height:2;color:#374151;margin-bottom:0.4rem}
.rule-line .b{display:inline-block;padding:0.1rem 0.5rem;border-radius:6px;font-weight:700;margin-right:0.4rem}
.rule-line .b.g{background:#DCFCE7;color:#166534}
.rule-line .b.r{background:#FEE2E2;color:#991B1B}