@import "https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700;800&display=swap";
:root{--blue:#202f96;--green:#338754;--border:#d9e0f1;--ink:#1d2441}*{box-sizing:border-box}body{color:var(--ink);background:#f4f7ff;margin:0;font-family:Noto Sans Thai,Arial,sans-serif;font-size:16px}a{color:var(--blue)}button,input,textarea{font:inherit}button{cursor:pointer;background:var(--blue);color:#fff;border:0;border-radius:10px;padding:12px 18px}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline-offset:3px;outline:3px solid #449ee1}button.danger{background:#b5333c}.outline{color:var(--blue);border:1px solid var(--border);background:#fff}.container{max-width:800px;margin:auto;padding:24px 20px}.public-site{background:linear-gradient(145deg,#d4efff,#eff6ff 65%,#edfaf1);border-top:4px solid #cf3549;min-height:100vh}.banner{border-radius:20px;width:100%;height:auto;display:block;box-shadow:0 8px 30px #29427322}.hero{text-align:center;padding:28px 0 15px}.hero h1{color:var(--blue);font-size:28px;line-height:1.4}.hero p{color:#65718c}.pill{color:var(--blue);background:#dae7ff;border-radius:20px;padding:7px 12px;font-size:13px}em{color:var(--green);font-style:normal}h1,h2{line-height:1.5}h2{font-size:18px}.panel{border:1px solid var(--border);background:#fff;border-radius:18px;margin:20px 0;padding:22px;box-shadow:0 5px 20px #263b7020}.panel h2{color:var(--blue);margin-top:0}.stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.stats.two{grid-template-columns:repeat(2,minmax(0,1fr))}.stat{background:#edf1ff;border-radius:12px;min-width:0;padding:15px 12px}.stat small{font-size:12px;display:block}.stat strong{color:var(--blue);overflow-wrap:anywhere;font-size:24px;display:block}.tabs{background:#fff;border-radius:12px;gap:4px;padding:5px;display:flex}.tabs button{color:var(--blue);background:#fff;flex:1;padding:12px 5px;font-size:14px}.tabs .selected{background:var(--blue);color:#fff}.calculator{margin-top:12px}.calculator>p{color:#5d6d8c}label{margin:18px 0;display:block}input,textarea{border:1px solid var(--border);width:100%;color:var(--ink);background:#fff;border-radius:10px;margin-top:6px;padding:12px}textarea{min-height:90px}input[type=checkbox]{width:auto}input[type=file]{font-size:13px}.calculator input{font-size:24px;font-weight:700}.calculator .outline{width:100%;margin-top:15px}.notice{background:#fff3df;border:1px solid #ead4b3;border-radius:10px;padding:12px;font-size:14px}.error{color:#a7243a;margin-top:6px;font-size:14px;display:block}.result{color:#fff;background:linear-gradient(120deg,#182685,#334bb6);border-radius:15px;margin:15px 0;padding:22px}.result strong{font-size:40px;display:block}.result span{margin-top:8px;display:block}progress{width:100%;height:20px;margin:12px 0}.center{text-align:center;color:var(--blue)}.resources{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.resource{border:1px solid var(--border);color:var(--ink);background:#fff;border-radius:12px;text-decoration:none;overflow:hidden}.resource img{aspect-ratio:4/3;object-fit:cover;width:100%;display:block}.resource div{padding:14px}.resource strong{font-size:14px}.resource p{color:#64718c;font-size:12px}footer{text-align:center;gap:15px;padding:24px 0;display:grid}footer button{background:#1877f2}footer small{color:#61708a}.admin-shell{max-width:1150px;margin:auto;padding:24px}.admin-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;display:flex}.admin-actions{z-index:5;border-bottom:1px solid var(--border);background:#f4f7ff;flex-wrap:wrap;gap:10px;padding:15px;display:flex;position:sticky;top:0}.admin-columns{grid-template-columns:1fr 1fr;gap:20px;display:grid}.card-edit{border:1px solid var(--border);border-radius:12px;margin:14px 0;padding:16px}.card-controls{flex-wrap:wrap;gap:8px;display:flex}.upload-preview{object-fit:contain;border-radius:10px;max-width:100%;max-height:200px}.preview-notice{text-align:center;z-index:6;background:#fff0c6;padding:12px;position:sticky;top:0}.history-row{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:15px;padding:18px 0;display:flex}.login{max-width:440px;margin:60px auto;padding:24px}.login .panel{padding:26px}.status{background:#e9f5e8;border-radius:10px;padding:12px}.help{color:#65718c;font-size:14px}.modal{z-index:10;background:#15204777;padding:20px;position:fixed;inset:0;overflow:auto}.modal-inner{background:#fff;border-radius:16px;max-width:850px;margin:auto}.modal-top{z-index:10;background:#fff;border-radius:16px;justify-content:space-between;padding:18px;display:flex;position:sticky;top:0}.stats .stat strong{font-variant-numeric:tabular-nums}@media (max-width:650px){.resources,.admin-columns{grid-template-columns:1fr}.container{padding:18px 14px}.hero h1{font-size:24px}.stat strong{font-size:20px}.panel{padding:18px}.admin-shell{padding:16px}.admin-actions button{padding:10px;font-size:13px}.tabs button{font-size:12px}.history-row{flex-direction:column;align-items:flex-start}.stats:not(.two) .stat{padding:12px 8px}.stats:not(.two) .stat strong{white-space:nowrap;letter-spacing:-.3px;font-size:clamp(11px,3.3vw,19px)}}.banner-frame{border:1px solid var(--border);background:#eaf0ff;border-radius:20px;width:100%;overflow:hidden}.banner-frame .banner{box-shadow:none;border-radius:0}.banner-frame[style] .banner{object-fit:contain;width:100%;height:100%}.banner-link{border-radius:20px;display:block}.banner-editor{max-width:280px;margin:20px auto}.ratio-options{flex-wrap:wrap;gap:8px;display:flex}.ratio-options .selected{box-shadow:0 0 0 3px #b8c9fa}.banner-track{width:100%;height:100%;transition:transform .4s;display:flex}.banner-slide{flex:0 0 100%;align-items:center;min-width:0;display:flex}.banner-slide a{width:100%;height:100%;display:block}.banner-frame[style] .banner-slide img{object-fit:contain;width:100%;height:100%}.banner-controls{justify-content:center;align-items:center;gap:10px;padding:10px 0;display:flex}.banner-controls button{padding:6px 12px}.banner-controls span{font-size:13px}.banner-carousel{touch-action:pan-y}.banner-editor .banner-frame{border-radius:12px}@media (prefers-reduced-motion:reduce){.banner-track{transition:none}}.admin-actions .action-status{flex-basis:100%;margin:0;padding:8px 12px}.admin-actions .status{color:#214932;background:#e9f5e8}button:disabled,.card-controls .danger:disabled{cursor:not-allowed}.install-dialog{border:1px solid var(--border);text-align:center;width:calc(100% - 32px);max-width:420px;color:var(--ink);background:#fff;border-radius:20px;padding:28px}.install-dialog::backdrop{background:#17234499}.install-dialog h2{font-size:22px}.install-logo{border-radius:16px;margin:0 auto;display:block}.install-close{padding:3px 11px;font-size:24px;position:absolute;top:10px;right:10px}.install-actions{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:18px;display:flex}.install-never{color:#596680;background:0 0;padding:8px}.install-dialog .notice{text-align:left}.analytics-page{color:#25362e;max-width:1280px;margin:auto;padding:24px}.analytics-page h1{font-size:30px}.analytics-panel{background:#fff;border:1px solid #dbe2d7;border-radius:16px;margin:16px 0;padding:20px}.analytics-filters{flex-wrap:wrap;align-items:end;gap:14px;display:flex}.analytics-filters label{gap:6px;display:grid}.analytics-filters input,.analytics-filters select{font:inherit;border:1px solid #ccd5c8;border-radius:8px;padding:10px}.analytics-page button{color:#fff;cursor:pointer;background:#25362e;border:0;border-radius:8px;padding:11px 16px}.analytics-page button:disabled{opacity:.5}.analytics-kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;display:grid}.analytics-kpis strong{margin-top:10px;font-size:32px;display:block}.analytics-note{color:#637462;font-size:14px;line-height:1.8}.analytics-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.analytics-scroll{overflow:auto}.analytics-page table{border-collapse:collapse;text-align:left;width:100%}.analytics-page th,.analytics-page td{border-bottom:1px solid #e2e8de;padding:12px 8px}.analytics-page td{overflow-wrap:anywhere}.analytics-page pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#f4f7f0;padding:14px}.analytics-page details{border-top:1px solid #e2e8de;padding:16px 0}.analytics-page summary{cursor:pointer}.analytics-bars>div{grid-template-columns:100px 1fr 50px;align-items:center;gap:10px;margin:10px 0;display:grid}.analytics-bars>div>div{background:#87ae56;border-radius:4px;height:18px}@media (max-width:650px){.analytics-grid,.analytics-kpis{grid-template-columns:1fr}.analytics-page{padding:16px}.analytics-filters label{width:100%}}.admin-shell .analytics-page{max-width:none;padding:0}.admin-shell>.tabs{overflow:auto}.admin-shell>.tabs button{white-space:nowrap}.online-status{color:#145c31;background:#e8f7ed;border:1px solid #9cd4af;border-radius:14px;margin:12px 0;padding:14px 18px}.online-status>div{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.online-dot{background:#17a34a;border-radius:50%;flex-shrink:0;width:14px;height:14px;display:inline-block;box-shadow:0 0 0 5px #17a34a22}.online-number{font-variant-numeric:tabular-nums;margin:0 5px;font-size:28px}.online-status small{margin-top:5px;font-size:12px;display:block}.online-stale{color:#52616b;background:#f1f3f4;border-color:#c8cdd1}.online-stale .online-dot{box-shadow:none;background:#87929a}.resources{flex-wrap:wrap;justify-content:center;gap:18px;margin:20px auto 28px;display:flex}.resource{border-radius:18px;flex-direction:column;flex:calc(33.3333% - 12px);min-width:0;max-width:100%;transition:transform .2s,box-shadow .2s;display:flex;box-shadow:0 6px 22px #263b7010}.resource:only-child{flex-basis:100%;max-width:500px}.resource img{object-fit:contain;aspect-ratio:4/3;background:#f0f5fc}.resource div{flex:1;padding:18px}.resource strong{overflow-wrap:anywhere;font-size:16px;line-height:1.6}.resource p{overflow-wrap:anywhere;margin:10px 0 0;font-size:14px;line-height:1.8}@media (hover:hover){.resource:hover{transform:translateY(-3px);box-shadow:0 10px 28px #263b7020}}@media (max-width:650px){.resources{gap:16px}.resource{flex-basis:100%;max-width:500px}.resource div{padding:18px}.resource strong{font-size:17px}}@media (prefers-reduced-motion:reduce){.resource{transition:none}.resource:hover{transform:none}}