:root{--navy:#092c67;--navy-2:#123f87;--blue:#1761b3;--gold:#f2bc2f;--ink:#24334b;--muted:#65748b;--paper:#fff;--body:#f4f7fc;--border:#dce5f1;--shadow:0 9px 26px rgba(12,40,93,.065)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:"Noto Sans Thai","Sarabun",Tahoma,Arial,sans-serif;font-size:15px;line-height:1.65;background:var(--body)}button,input,select{font:inherit}button{cursor:pointer}a{color:inherit}a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.site-wrap{max-width:1190px;margin:0 auto;padding-left:22px;padding-right:22px}.skip-link{position:absolute;left:15px;top:-70px;padding:8px 15px;background:#fff;z-index:999}.skip-link:focus{top:10px}.gov-strip{background:#082759;color:#cbdaf4;font-size:11px;letter-spacing:.07em}.gov-inner{min-height:32px;display:flex;justify-content:space-between;align-items:center;gap:15px}.school-header{background:var(--navy);color:#fff;position:relative}.school-header:after{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--gold);content:""}.school-header-content{min-height:115px;display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:17px;padding-bottom:20px}.identity{display:flex;gap:16px;align-items:center}.school-seal{width:76px;height:76px;border:2px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(255,255,255,.97);display:grid;place-items:center;flex-shrink:0;padding:4px}.school-seal img{display:block;max-width:100%;max-height:100%;object-fit:contain}.school-name{font-size:25px;font-weight:800;letter-spacing:-.02em;line-height:1.25}.school-en{color:#f5cb59;font-weight:700;font-size:12px;letter-spacing:.17em;margin-top:3px}.school-sub{font-size:12px;color:#cbdaf4;margin-top:3px}.header-unit{padding:7px 14px;border:1px solid rgba(255,255,255,.23);border-radius:30px;color:#e9f2ff;font-size:12px;white-space:nowrap}.site-nav{background:#fff;border-bottom:1px solid var(--border)}.nav-tabs{display:flex;align-items:stretch;gap:18px}.nav-tabs a{display:flex;align-items:center;color:#50647f;text-decoration:none;font-size:14px;font-weight:700;padding:13px 14px 11px;border-bottom:3px solid transparent}.nav-tabs a.active{color:var(--navy-2);border-color:var(--gold)}.nav-tabs a:hover{color:var(--blue)}.main-area{padding-top:32px;padding-bottom:45px}.hero{background:linear-gradient(107deg,#0b3170,#154a97);color:#fff;border-radius:18px;position:relative;overflow:hidden;display:flex;justify-content:space-between;gap:25px;align-items:center;padding:31px 36px;margin-bottom:24px;box-shadow:var(--shadow)}.hero:before{content:"";position:absolute;right:-80px;bottom:-130px;width:320px;height:320px;border:1px solid rgba(255,255,255,.12);border-radius:50%;box-shadow:0 0 0 60px rgba(255,255,255,.025),0 0 0 130px rgba(255,255,255,.02)}.hero-content{position:relative;z-index:1;max-width:850px}.eyebrow{display:inline-flex;gap:9px;align-items:center;color:#ffe49a;font-weight:700;font-size:12px;letter-spacing:.025em;margin-bottom:11px}.eyebrow-dot{height:7px;width:7px;background:var(--gold);border-radius:50%;display:block}.hero h1{font-size:clamp(21px,2.6vw,30px);line-height:1.5;margin:0 0 8px;font-weight:800;letter-spacing:-.025em}.hero p{margin:0;color:#dceaff;font-size:14px}.hero-mark{color:rgba(255,255,255,.3);position:relative;z-index:1}.panel{background:var(--paper);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:16px}.filters{padding:24px 26px}.section-title{display:flex;align-items:baseline;gap:14px;margin-bottom:17px}.section-title h2{margin:0;font-size:18px;color:var(--navy);font-weight:800}.section-title>span{font-size:12px;color:var(--muted)}.filters-grid{display:grid;grid-template-columns:1fr 1fr 1.6fr 1.9fr auto;align-items:end;gap:13px}.field{min-width:0}.field label{display:block;font-weight:700;font-size:12.5px;color:#445570;margin-bottom:7px}.field input,.field select{display:block;width:100%;height:43px;border:1px solid #cad6e6;border-radius:9px;background:#fff;color:#273950;padding:8px 11px;outline:none}.field input:focus,.field select:focus{border-color:#2565b6;box-shadow:0 0 0 3px rgba(44,108,200,.11)}.field input::placeholder{color:#9aa9bd}.reset-button{height:43px;background:#f2f6fb;border:1px solid #cad6e6;border-radius:9px;padding:0 17px;color:#415773;white-space:nowrap;font-weight:700}.reset-button:hover{background:#e9effa}.results{padding-top:32px}.results-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:17px}.section-kicker{font-size:12px;color:#7d8ca2;font-weight:700}.results-head h2{font-size:23px;font-weight:800;margin:0;color:var(--navy)}.result-counter{display:flex;gap:7px;align-items:baseline;border-radius:40px;background:#e8f0fc;border:1px solid #d1e0f5;padding:6px 17px;color:var(--navy)}.result-counter strong{font-size:19px}.result-counter span{font-size:12px;color:#53677e}.results-message{background:#fff;border-radius:12px;color:#65748b;text-align:center;padding:29px;border:1px dashed #cbdaed}.results-message[hidden]{display:none}.plan-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.plan-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:22px 22px 20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:17px;min-width:0;position:relative;overflow:hidden}.plan-card:before{content:"";position:absolute;top:0;left:0;bottom:0;width:4px;background:var(--gold)}.plan-card-top{display:flex;align-items:center;gap:8px;justify-content:space-between}.subject-code{display:inline-flex;color:#184c94;background:#ecf3ff;border-radius:6px;font-size:12px;font-weight:800;padding:3px 9px}.term-chip{color:#6a7790;font-weight:700;font-size:12px}.subject-name{font-weight:800;color:#162f57;margin:0;font-size:17px;line-height:1.5;overflow-wrap:anywhere}.plan-title{color:#495b75;font-size:13.5px;margin:7px 0 0;line-height:1.65;overflow-wrap:anywhere}.plan-details{display:grid;grid-template-columns:1fr 1fr;gap:12px}.detail-block{min-width:0}.detail-label{font-size:11px;font-weight:700;color:#8693a7;margin-bottom:3px}.detail-text{font-size:13px;font-weight:600;color:#34445d;overflow-wrap:anywhere}.plan-method{border-radius:8px;background:#f7f9fd;padding:10px 12px;line-height:1.55;font-size:12px;color:#67758b;overflow-wrap:anywhere}.plan-method strong{color:#3f5371}.plan-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid #ecf0f6;padding-top:16px;margin-top:auto}.plan-duration{font-size:12px;color:#66758d}.view-link{display:inline-flex;gap:8px;align-items:center;justify-content:center;min-height:38px;padding:6px 17px;background:#12458e;color:white;text-decoration:none;font-size:13px;font-weight:700;border-radius:8px}.view-link:hover{background:#0c3471}.view-link svg{width:17px;height:17px;flex:0 0 auto}.pager{display:flex;justify-content:center;align-items:center;gap:11px;margin-top:22px}.pager button{padding:7px 16px;border:1px solid var(--border);background:#fff;border-radius:9px;color:var(--navy);font-weight:700}.pager button:disabled{opacity:.4;cursor:not-allowed}.pager span{font-size:13px;color:#627088}.notice{margin-top:31px;display:flex;align-items:flex-start;gap:12px;border:1px solid #e6d8a7;background:#fffbf0;padding:16px;border-radius:10px;color:#6a5d3d;font-size:12px}.notice>span:first-child{font-size:20px;line-height:1}.site-footer{background:#0b2c64;border-top:4px solid var(--gold);color:#e3ecf9}.footer-content{padding-top:23px;padding-bottom:25px;display:flex;align-items:center;justify-content:space-between;gap:22px;font-size:12px}.footer-content strong{display:block;color:#fff;font-size:15px}.footer-content span{display:block;color:#bbd0ed;margin-top:2px}.viewer-page{background:#e7ecf4}.viewer-header{background:#092e69;color:#fff;border-bottom:3px solid var(--gold)}.viewer-header-row{display:flex;justify-content:space-between;gap:15px;align-items:center;min-height:64px}.back-link{text-decoration:none;color:#fff;font-weight:700;font-size:13px}.back-link:hover{text-decoration:underline}.viewer-school{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700}.viewer-school img{background:#fff;border-radius:50%;padding:2px;object-fit:contain}.viewer-main{padding-top:18px;padding-bottom:35px}.viewer-meta{background:#fff;border:1px solid #d5deeb;border-radius:12px 12px 0 0;padding:19px 24px}.viewer-label{font-size:11px;letter-spacing:.03em;color:#75849a;font-weight:700}.viewer-meta h1{font-size:19px;font-weight:800;line-height:1.6;margin:5px 0}.viewer-meta p{font-size:12px;color:#61728c;margin:0}.viewer-frame-wrap{background:#7f8b9d;border:1px solid #d5deeb;border-top:0;padding:0}.viewer-frame{width:100%;height:min(78vh,1100px);min-height:540px;border:0;display:block;background:#fff}.viewer-help{font-size:12px;color:#6e7b92;margin-top:13px}
@media(max-width:980px){.filters-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.search-field{grid-column:auto}.reset-button{width:100%}.hero-mark{opacity:.65}.plan-list{gap:13px}.school-header-content{min-height:98px}.header-unit{display:none}}
@media(max-width:690px){.site-wrap{padding-left:15px;padding-right:15px}.gov-inner span:last-child{display:none}.identity{gap:11px}.school-seal{height:60px;width:60px}.school-name{font-size:20px}.school-en{font-size:10px;letter-spacing:.12em}.school-sub{font-size:10px}.nav-tabs{gap:0}.nav-tabs a{flex:1;justify-content:center;text-align:center;font-size:12px;padding:13px 6px}.main-area{padding-top:18px}.hero{padding:25px 20px;margin-bottom:17px;border-radius:13px}.hero-mark{display:none}.hero h1{font-size:21px}.hero p{font-size:12.5px}.filters{padding:18px 16px}.section-title{display:block}.section-title h2{font-size:17px}.section-title>span{display:block;margin-top:3px}.filters-grid{gap:11px}.search-field{grid-column:1 / -1}.reset-button{grid-column:1 / -1}.plan-list{grid-template-columns:1fr}.plan-card{padding:19px}.results{padding-top:26px}.results-head h2{font-size:20px}.footer-content{align-items:flex-start;flex-direction:column;gap:11px}.viewer-school{font-size:11px}.viewer-meta{padding:14px}.viewer-meta h1{font-size:16px}.viewer-frame{min-height:420px;height:72vh}}
@media(max-width:360px){.school-sub{display:none}.school-name{font-size:18px}.plan-details{grid-template-columns:1fr}.viewer-school img{display:none}}