:root{--green:#34E834;--green-ink:#0d9a0d;--ink:#0F1720;--ink2:#5B6B7B;--line:#E3E9DF;--bg:#F7FAF5;--red:#D93838}*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Noto Sans Thai',-apple-system,sans-serif;background:var(--bg);color:var(--ink)}nav{padding:14px 24px;display:flex;align-items:center;gap:10px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}nav img{width:30px;height:30px}nav b{font-size:18px;letter-spacing:1px}nav b span{color:var(--green)}.nav-links{margin-left:auto;display:flex;align-items:center;gap:18px}.nav-links a{color:var(--ink);text-decoration:none;font-size:14px;font-weight:600}.nav-links a:hover{color:var(--green-ink)}.nav-links .cta{background:var(--green);color:#06130a;padding:8px 16px;border-radius:10px;font-weight:700}@media(max-width:640px){.nav-links{gap:12px}.nav-links a{font-size:13px}.nav-links .home-link{display:none}}.wrap{max-width:760px;margin:0 auto;padding:28px 16px 60px}h1{font-size:clamp(22px,4vw,30px);font-weight:800;line-height:1.35}.sub{color:var(--ink2);font-size:14px;margin-top:8px;line-height:1.7}.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}@media(max-width:560px){.modes{grid-template-columns:1fr}}.mode{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:16px;cursor:pointer;text-align:left;font:inherit;transition:.15s}.mode:hover{border-color:var(--green);transform:translateY(-2px)}.mode b{display:block;font-size:15px;margin-bottom:4px}.mode p{font-size:12.5px;color:var(--ink2);line-height:1.6}.badge{display:inline-block;background:var(--green);color:#06130a;font-size:11px;font-weight:800;padding:2px 8px;border-radius:99px;margin-bottom:8px}.exhero{margin:20px 0 6px}.exhero img{width:100%;aspect-ratio:1200/430;object-fit:cover;border-radius:16px;display:block;box-shadow:0 10px 30px rgba(15,23,32,.1)}.exhero figcaption{font-size:11px;color:var(--ink2);margin-top:6px;text-align:right}.qcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;margin-top:18px}.qmeta{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink2);margin-bottom:10px}.qtext{font-size:16.5px;font-weight:700;line-height:1.6;margin-bottom:14px}.opt{display:block;width:100%;text-align:left;font:inherit;font-size:14.5px;background:var(--bg);border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:8px;cursor:pointer;line-height:1.55;transition:.12s}.opt:hover{border-color:var(--green)}.opt.correct{background:#e9fbe9;border-color:var(--green-ink);font-weight:700}.opt.wrong{background:#fdecec;border-color:var(--red)}.opt:disabled{cursor:default;opacity:.92}.explain{margin-top:12px;font-size:13.5px;color:var(--ink2);background:var(--bg);border-radius:10px;padding:10px 12px;line-height:1.7;display:none}.nextbtn{margin-top:14px;width:100%;padding:13px;border:0;border-radius:12px;background:var(--green);color:#06130a;font:inherit;font-size:15px;font-weight:800;cursor:pointer;display:none}.bar{height:6px;background:var(--line);border-radius:99px;overflow:hidden;margin-top:16px}.bar i{display:block;height:100%;background:var(--green);transition:width .3s}.result{text-align:center;padding:30px 18px}.score{font-size:44px;font-weight:800}.pass{color:var(--green-ink)}.fail{color:var(--red)}.rsub{color:var(--ink2);font-size:14px;margin-top:6px;line-height:1.7}.rbtns{display:flex;gap:10px;justify-content:center;margin-top:20px;flex-wrap:wrap}.rbtns a,.rbtns button{font:inherit;font-size:14px;font-weight:700;padding:12px 20px;border-radius:12px;cursor:pointer;text-decoration:none}.rbtns .primary{background:var(--green);color:#06130a;border:0}.rbtns .ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)}details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin-top:10px}summary{font-weight:700;font-size:15px;cursor:pointer}details ul{margin:10px 0 4px 18px}details li{font-size:14px;color:var(--ink2);padding:3px 0;line-height:1.65}details li b{color:var(--ink)}.ctabox{margin-top:34px;background:linear-gradient(160deg,#0b120c 0,#143d18 100%);border-radius:18px;padding:26px 22px;color:#fff;text-align:center}.ctabox h2{font-size:19px;margin-bottom:6px}.ctabox h2 em{color:var(--green);font-style:normal}.ctabox p{font-size:13.5px;color:rgba(255,255,255,.75);line-height:1.7}.ctabox a{display:inline-block;margin-top:14px;background:var(--green);color:#06130a;font-weight:800;padding:12px 26px;border-radius:12px;text-decoration:none}.disclaimer{font-size:11.5px;color:var(--ink2);opacity:.8;margin-top:26px;line-height:1.7}footer{text-align:center;font-size:12px;color:var(--ink2);padding:20px;border-top:1px solid var(--line);margin-top:20px}footer a{color:var(--green-ink)}.hide{display:none!important}