:root{font-family:system-ui,"Noto Sans Thai",Tahoma,sans-serif;color:#17313d;background:#f2f7f8;font-size:16px}*{box-sizing:border-box}body{margin:0}.shell{max-width:1100px;margin:auto;padding:0 22px}.top{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:21px 0;border-bottom:1px solid #cfdee1}.brand{display:flex;gap:13px;align-items:center}.brand strong{display:block;font-size:1.1rem}.brand small{display:block;color:#5e7880}.pulse{background:#153b50;color:#8fe0cc;width:42px;height:42px;display:grid;place-items:center;border-radius:13px;font-size:1.5rem}.status{font-size:.86rem;color:#386777;background:#e4f0f2;border-radius:100px;padding:7px 13px}main{min-height:65vh;padding:32px 0}h1{font-size:clamp(1.65rem,3.8vw,2.45rem);line-height:1.25;margin:0 0 15px}h2{font-size:1.35rem;margin:0 0 12px}h3{font-size:1.07rem;margin:0 0 8px}p{line-height:1.7}button,input,select{font:inherit}button{border:0;border-radius:10px;padding:12px 18px;background:#176374;color:white;cursor:pointer;font-weight:650}button:hover{background:#104e5b}button:disabled{opacity:.55;cursor:not-allowed}.secondary{background:#e4eef0;color:#174553}.secondary:hover{background:#d1e2e6}.ghost{background:transparent;color:#176374}.ghost:hover{background:#e4eef0}.intro{display:grid;grid-template-columns:1.2fr .8fr;gap:26px;align-items:start}.card{background:white;border:1px solid #d4e3e6;border-radius:18px;padding:24px;box-shadow:0 4px 15px #173d4408}.hero{background:#153b50;color:#f7fbfc;border-radius:20px;padding:34px;margin-bottom:24px}.hero p{color:#d3e8eb;max-width:770px}.eyebrow{color:#a8e9d7;text-transform:uppercase;letter-spacing:.08em;font-size:.76rem;font-weight:800}.stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.stat{background:#ffffff12;border:1px solid #ffffff2b;border-radius:12px;padding:11px 15px;min-width:115px}.stat b{display:block;font-size:1.22rem}.stat small{color:#c7e1e7}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.mini{border:1px solid #d5e3e7;border-radius:14px;padding:18px;background:white}.mini span{color:#126679;font-weight:800}.mini p{font-size:.92rem;margin:6px 0 0}.steps{display:grid;gap:12px}.lesson{padding:18px;background:#eef6f6;border-left:4px solid #3b9f99;border-radius:9px}.lesson p{margin:5px 0}.field{display:grid;gap:6px;margin-bottom:13px}.field label{font-weight:650;font-size:.9rem}.field input,.field select{width:100%;border:1px solid #9eb9c0;border-radius:9px;padding:11px;background:white;color:#17313d}.field input:focus,.field select:focus{outline:3px solid #a7e4d7}.muted{color:#5b757d;font-size:.91rem}.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.row{display:flex;align-items:center;justify-content:space-between;gap:12px}.progress{height:10px;background:#dce9eb;border-radius:20px;overflow:hidden;margin:13px 0 24px}.progress div{height:100%;background:#1b8b85}.question{max-width:840px;margin:auto}.question h2{line-height:1.55}.stimulus{background:#f4f8f8;border:1px solid #d9e7e8;border-radius:12px;padding:16px;margin:18px 0;line-height:1.7;white-space:pre-line}.audio{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:15px 0}.option{display:flex;align-items:flex-start;gap:12px;padding:14px;border:1px solid #bdcfd3;border-radius:11px;margin:9px 0;cursor:pointer;line-height:1.5}.option:has(input:checked){border-color:#16847e;background:#edf8f5}.option input{margin-top:5px;accent-color:#167a78}.answer-note{background:#ecf7f3;border-left:4px solid #248763;padding:15px;border-radius:8px;margin-top:18px}.error{color:#8b2032;background:#fff0f1;border:1px solid #e7b8bf;padding:13px;border-radius:9px;margin:12px 0}.success{background:#e6f6ec;border:1px solid #a4d7b4;padding:14px;border-radius:9px}.table{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.table div{background:#f1f7f7;padding:14px;border-radius:11px;text-align:center}.table b{display:block;font-size:1.5rem}.testflag{background:#fff1d6;border-radius:9px;padding:10px;margin:10px 0;color:#73531a}footer{text-align:center;color:#698189;font-size:.83rem;padding:22px 0 34px;line-height:1.7}.hide{display:none!important}@media(max-width:800px){.intro,.grid{grid-template-columns:1fr}.shell{padding:0 14px}.hero{padding:25px}.card{padding:18px}.top{align-items:flex-start}.status{font-size:.75rem}}@media(max-width:450px){.table{grid-template-columns:1fr}.stat{min-width:90px}}
