@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');
:root{--background:#fff;--foreground:#193344;--card:#fff;--card-foreground:#193344;--popover:#fff;--popover-foreground:#193344;--primary:#066d69;--primary-foreground:#fff;--secondary:#eef5f5;--secondary-foreground:#193344;--muted:#f2f6f7;--muted-foreground:#566b77;--accent:#e4f2f0;--accent-foreground:#065e5a;--destructive:#b52836;--border:#dce5e7;--input:#cbd7dc;--ring:#168a84;--radius:.8rem;--sidebar:#102e3d;--sidebar-foreground:#eaf4f5;--sidebar-primary:#bdeee6;--sidebar-primary-foreground:#102e3d;--sidebar-accent:#214553;--sidebar-accent-foreground:#fff;--sidebar-border:#31505c;--sidebar-ring:#75cac0;--school-accent:#066d69;--gold:#eab55f;--font-sans:'Noto Sans Thai',Tahoma,sans-serif}
*{box-sizing:border-box}body{margin:0;font-family:var(--font-sans);color:var(--foreground);background:var(--background);font-size:16px;line-height:1.8}a{text-decoration:none;color:inherit}button,input,textarea{font:inherit}button,a,input,textarea{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:wait;opacity:.6}img{max-width:100%;object-fit:cover}h1,h2,h3,p{margin-top:0}h1,h2,h3{line-height:1.5}h2{font-size:2rem;font-weight:700;letter-spacing:-.035em}h3{font-size:1.15rem;font-weight:600}a:focus-visible,button:focus-visible{outline:3px solid var(--ring);outline-offset:4px}.wrap{width:min(1200px,calc(100% - 64px));margin:auto}.topline{background:#102e3d;color:#dcebed;font-size:.8rem;padding:8px 0}.topline>.wrap{display:flex;justify-content:space-between;gap:16px}.topline a{display:inline-flex;align-items:center;gap:6px}.site-header{border-bottom:1px solid var(--border);background:#fff}.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:100px;gap:24px}.brand{display:flex;align-items:center;gap:12px;min-width:0}.brand strong{font-size:1.25rem;display:block}.brand small{font-size:.65rem;letter-spacing:.13em;color:#62757c;display:block}.brand-mark{background:var(--school-accent);border-radius:16px;color:white;width:50px;height:56px;display:grid;place-items:center;flex-shrink:0}.brand-logo{width:58px;height:58px;object-fit:contain}.site-header nav{display:flex;gap:24px;align-items:center;font-size:.9rem;font-weight:500}.site-header nav a:hover{color:var(--school-accent)}.hero{padding-top:60px;padding-bottom:64px;display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}.eyebrow{display:block;color:var(--school-accent);letter-spacing:.14em;font-size:.75rem;font-weight:700;margin-bottom:14px}.hero h1{font-size:clamp(2rem,3.8vw,3.4rem);font-weight:700;letter-spacing:-.045em;line-height:1.5;margin-bottom:22px}.hero h1 em{font-style:normal;color:var(--school-accent)}.hero p{color:#596f7a;margin-bottom:30px}.hero-art{min-height:330px;background:#e4f1ef;border-radius:90px 18px 90px 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--school-accent);gap:22px;overflow:hidden;position:relative}.hero-art img{width:100%;height:380px}.actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}.primary-button{background:var(--school-accent);color:#fff;border:0;padding:13px 20px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:.9rem;font-weight:600}.primary-button:hover{filter:brightness(.92)}.text-link{color:var(--school-accent);font-size:.9rem;font-weight:600}.quicklinks{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 24px #19334405;background:#fff}.quicklinks a{display:flex;align-items:center;gap:12px;padding:25px 22px;border-right:1px solid var(--border);font-size:.9rem}.quicklinks a:last-child{border-right:0}.quicklinks a>svg:first-child{color:var(--school-accent)}.quicklinks a>svg:last-child{margin-left:auto;color:#8a9ca3}.quicklinks a:hover{background:#f0f7f6}.section{padding-top:64px;padding-bottom:64px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:25px}.section-heading h2{margin:0}.welcome-panel{display:flex;gap:24px;align-items:center;padding:36px;border:1px solid var(--border);border-radius:12px}.welcome-panel p{margin:0;color:var(--muted-foreground)}.footer{background:#102e3d;color:#d9e7e9;padding:48px 0 20px}.footer p{font-size:.9rem;margin:20px 0;color:#b7cbcf}.footer-bottom{border-top:1px solid #31505c;padding-top:20px;margin-top:36px;display:flex;justify-content:space-between;font-size:.8rem}.page-title{background:#edf5f4;border-bottom:1px solid var(--border);padding:42px 0}.page-title h1{font-size:2.5rem;font-weight:700;margin:0}.page-title p{color:#556f76;margin:10px 0 0}.screen-message{padding:80px 24px;max-width:650px;margin:auto;text-align:center}.empty-state{padding:44px 24px;border:1px dashed #b8cbd0;border-radius:12px;color:#5a717a;text-align:center}.error-note{background:#fff0f1;border:1px solid #ecc3c8;color:#942836;padding:15px;border-radius:8px}.success-note{color:#14604e;background:#e7f5ee;padding:12px;border-radius:8px}.skip-link{position:absolute;left:16px;top:-80px;background:#fff;padding:12px;z-index:100}.skip-link:focus{top:12px}.mobile-menu-button{display:none}.prose-content{white-space:pre-wrap;overflow-wrap:anywhere;line-height:2}.content-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}.news-card{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column}.card-image{height:205px;position:relative;background:#e7f1f2;display:flex;align-items:center;justify-content:center;color:#759297}.card-image img{width:100%;height:100%}.card-body{padding:22px;display:flex;flex-direction:column;flex:1}.card-body h3{margin:12px 0}.card-body p{color:#596f7a;font-size:.9rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card-body time{font-size:.8rem;color:#687d85}.category-badge{font-size:.75rem;color:var(--school-accent);background:#e8f5f1;display:inline-block;padding:3px 10px;border-radius:5px;align-self:flex-start}.card-link{margin-top:auto;font-size:.85rem;color:var(--school-accent);font-weight:600}.filter-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:28px}.filter-button{border:1px solid var(--border);padding:8px 15px;border-radius:7px;background:#fff;font-size:.9rem}.filter-button[aria-pressed=true]{background:var(--school-accent);color:#fff;border-color:var(--school-accent)}.search-input{border:1px solid var(--input);border-radius:7px;padding:10px 14px;min-width:0;background:white}.load-more{display:block;margin:32px auto 0}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px}.footer h3{color:#fff}.footer-list{display:flex;flex-direction:column;gap:9px;font-size:.9rem}.doc-row{display:flex;gap:18px;padding:22px;border:1px solid var(--border);border-radius:10px;align-items:center;margin-bottom:12px}.doc-row>svg{color:var(--school-accent);flex-shrink:0}.doc-row h3{margin:0}.doc-row p{margin:5px 0 0;font-size:.85rem;color:var(--muted-foreground)}.doc-row .primary-button{margin-left:auto;flex-shrink:0}.person-image{height:260px;background:#edf2f3;display:grid;place-items:center;color:#7c969e}.person-image img{width:100%;height:100%;object-position:top}.article{max-width:820px}.article h1{font-size:2.5rem;font-weight:700}.article-cover{width:100%;max-height:460px;border-radius:14px;margin:28px 0}.event-date{background:#e7f3ef;color:var(--school-accent);padding:16px;text-align:center;border-radius:10px;flex-shrink:0;min-width:92px}.event-date strong{display:block;font-size:2rem;line-height:1.3}.body-muted{color:var(--muted-foreground)}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}.banner-controls{display:flex;gap:8px;margin-top:15px}.banner-controls button{width:34px;height:8px;background:#cedddc;border:0;border-radius:9px}.banner-controls button[aria-pressed=true]{background:var(--school-accent)}
@media(max-width:1000px){.site-header nav{gap:14px;font-size:.85rem}.quicklinks a{padding:20px 14px;gap:8px}.hero{gap:24px}.hero-art{min-height:290px}.hero-art img{height:310px}.brand small{display:none}}
@media(max-width:760px){.wrap{width:calc(100% - 32px)}.header-inner{min-height:80px;flex-wrap:wrap;padding:16px 0}.brand strong{font-size:1.1rem}.site-header nav{display:none;width:100%;flex-wrap:wrap}.site-header nav.open{display:flex}.mobile-menu-button{display:flex;border:1px solid var(--border);padding:8px;border-radius:8px;background:#fff}.hero{grid-template-columns:1fr;padding-top:32px;padding-bottom:32px;gap:30px}.hero h1{font-size:2.2rem}.hero p{font-size:.95rem}.hero-art{min-height:230px;border-radius:45px 12px}.hero-art img{height:280px}.quicklinks{grid-template-columns:1fr 1fr}.quicklinks a{padding:18px 12px;font-size:.82rem}.quicklinks a:nth-child(2){border-right:0}.quicklinks a:nth-child(-n+2){border-bottom:1px solid var(--border)}.quicklinks a>svg:last-child{display:none}.section{padding-top:38px;padding-bottom:38px}.section-heading{align-items:flex-start}h2{font-size:1.55rem}.content-grid{grid-template-columns:1fr 1fr;gap:16px}.card-image{height:165px}.card-body{padding:16px}.footer-grid,.contact-grid{grid-template-columns:1fr;gap:24px}.page-title h1,.article h1{font-size:1.9rem}.doc-row{flex-wrap:wrap}.doc-row .primary-button{margin-left:0}.topline{font-size:.72rem}.footer-bottom{gap:16px;flex-wrap:wrap}}
@media(max-width:450px){.content-grid{grid-template-columns:1fr}.hero h1{font-size:1.9rem}.section-heading{flex-wrap:wrap}.welcome-panel{padding:24px;align-items:flex-start}.actions{gap:16px}.topline .wrap{flex-wrap:wrap;gap:0}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.nav-dropdown{display:inline-flex;align-items:center;gap:5px;background:none;border:0;font:inherit;padding:0}.footer-list a{display:flex;gap:8px;align-items:center}.public-search{display:flex;align-items:center;gap:12px;border:1px solid var(--border);padding:10px 12px;border-radius:10px;margin-bottom:20px;background:#fff}.public-search input{flex:1;min-width:0;border:0;outline-offset:6px;font-size:1rem}.public-search>svg{color:#6a8088}.results-count{margin-left:auto;font-size:.85rem;color:var(--muted-foreground)}.loading-cards{margin-top:24px}.article-meta{display:flex;gap:18px;align-items:center;margin:28px 0 16px;font-size:.85rem;color:var(--muted-foreground)}.article-lead{font-size:1.1rem;color:#4c6672}.school-intro{max-width:850px;margin-bottom:36px}.events-section{background:#f3f7f7;border-top:1px solid var(--border)}.events-section .doc-row{background:#fff}.contact-line{display:flex;align-items:flex-start;gap:14px;margin-bottom:24px;overflow-wrap:anywhere}.contact-line svg{flex-shrink:0;color:var(--school-accent);margin-top:3px}.contact-message{background:#edf5f3;border-radius:14px;padding:36px}.admin-brand{display:flex;align-items:center;gap:12px;padding:16px 12px;font-size:1.15rem;font-weight:700}.admin-brand>svg{color:#b6e9de}.admin-brand small{display:block;font-size:.75rem;font-weight:400;color:#b1cdd1}.admin-account{display:flex;align-items:center;gap:10px;padding:15px 5px}.admin-account strong{display:block;font-size:.85rem}.admin-account small{display:block;font-size:.75rem;opacity:.75}.admin-account button{margin-left:auto;background:none;border:0;padding:8px}.avatar{width:36px;height:36px;display:grid;place-items:center;background:#315564;color:#fff;border-radius:50%;flex-shrink:0}.admin-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 32px;border-bottom:1px solid var(--border);background:#fff}.admin-topbar>div{display:flex;align-items:center;gap:16px}.admin-topbar .filter-button{display:flex;align-items:center;gap:8px;font-size:.85rem}.admin-main{padding:36px;background:#f4f7f9;flex:1;min-width:0}.admin-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:30px}.admin-heading h1{font-size:1.9rem;font-weight:700;margin:0}.admin-heading .eyebrow{letter-spacing:0;font-weight:400;margin-bottom:8px;font-size:.8rem;color:#607783}.admin-panel{border:1px solid var(--border);border-radius:12px;background:#fff;padding:24px;margin-bottom:26px;min-width:0}.admin-panel h2{font-size:1.25rem;margin-bottom:18px}.admin-panel h3{margin-bottom:8px}.admin-search{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}.admin-search input{flex:1;min-width:150px;border:1px solid var(--border);border-radius:7px;padding:9px 12px}.admin-search span{font-size:.85rem;color:#607781}.admin-row-title{display:flex;align-items:center;gap:12px;min-width:210px;max-width:450px;white-space:normal;overflow-wrap:anywhere}.admin-row-title img{width:54px;height:42px;border-radius:5px;flex-shrink:0}.admin-row-title strong{font-size:.9rem;font-weight:500}.admin-row-title small{display:block;color:#68808a;font-size:.78rem;margin-top:5px}.row-actions{display:flex;justify-content:flex-end;gap:7px}.row-actions button{padding:8px;border:1px solid var(--border);border-radius:6px;background:#fff;min-width:34px}.row-actions button:last-child:hover{color:#af2937;background:#fff3f3}.status-label{border-radius:5px;padding:5px 9px;font-size:.75rem;white-space:nowrap}.status-label.published{color:#155f4d;background:#e9f5ee}.status-label.draft{color:#617080;background:#edf1f5}.status-label.scheduled{color:#8a5815;background:#fff3d9}.pagination-controls{display:flex;gap:10px;align-items:center;justify-content:flex-end;margin-top:22px;font-size:.85rem;flex-wrap:wrap}.pagination-controls span{margin-right:auto;color:#607782}.admin-form{display:flex;flex-direction:column;gap:22px}.admin-form h2{font-size:1.5rem;margin:0}.admin-form h3{border-bottom:1px solid var(--border);padding-bottom:12px;margin-top:14px;margin-bottom:0}.admin-field{display:flex;flex-direction:column;gap:8px;font-size:.9rem;min-width:0}.admin-field>span{font-weight:600}.admin-field input:not([type=color]),.admin-field textarea{border:1px solid var(--input);border-radius:7px;padding:10px 12px;width:100%;min-width:0;background:#fff;color:#193344;font-size:1rem}.admin-field input:disabled{background:#f2f5f7}.admin-field textarea{resize:vertical}.admin-field small{font-size:.78rem;color:#607783}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.form-actions{display:flex;justify-content:flex-end;gap:12px;padding-top:18px;border-top:1px solid var(--border);flex-wrap:wrap}.switch-label{display:flex;align-items:center;gap:12px}.upload-box{border:1px dashed #b9ccd0;background:#f7fafb;border-radius:9px;padding:18px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}.upload-box img{height:110px;max-width:180px;border-radius:7px}.upload-box>a{display:flex;gap:8px;align-items:center;font-size:.85rem;overflow-wrap:anywhere}.upload-box small{font-size:.78rem;color:#607783}.upload-control{display:flex;gap:8px;align-items:center;position:relative;border:1px solid #bdcdd3;border-radius:7px;padding:8px 12px;background:white;overflow:hidden;font-size:.9rem}.upload-control input{position:absolute;inset:0;opacity:0;cursor:pointer;max-width:100%}.text-button{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:var(--primary);font-size:.85rem;text-decoration:underline}.settings-form{background:#fff;border:1px solid var(--border);border-radius:12px;padding:30px;max-width:920px}.color-picker{display:flex;gap:16px;align-items:center}.color-picker input{width:64px;height:45px;cursor:pointer}.dashboard-intro{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:30px;background:#e2f1ed;border-radius:14px;margin-bottom:26px}.dashboard-intro h2{font-size:1.65rem;margin-bottom:8px}.dashboard-intro p{margin:0;color:#496c69;font-size:.95rem}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:30px}.stat-tile{text-align:left;border:1px solid var(--border);border-radius:11px;padding:22px;background:#fff;display:flex;flex-direction:column;gap:8px;min-width:0}.stat-tile>span{font-size:.85rem;color:#5d7480}.stat-tile strong{font-size:2.3rem;line-height:1.2;font-weight:700;color:#153c46}.stat-tile small{font-size:.8rem;color:#728790}.setup-links{display:grid;grid-template-columns:1fr 1fr;gap:14px}.setup-links button{border:1px solid var(--border);border-radius:8px;padding:18px;display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;background:white;font-size:.9rem}.setup-links button:hover{border-color:#7eaaa4;background:#f8fbfa}.backup-panel{display:flex;align-items:center;gap:20px;justify-content:space-between}.backup-panel p{font-size:.85rem;color:#657c87;margin:0}.backup-panel a{display:flex;align-items:center;gap:8px;flex-shrink:0}.login-page{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}.login-brand{background:#102e3d;color:#fff;padding:12% 14%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.login-brand>svg{color:#9bdfd0;margin-bottom:40px}.login-brand h1{font-size:2.75rem;font-weight:600;line-height:1.55;margin-bottom:24px}.login-brand p{color:#b5d0d4;margin-bottom:50px}.login-brand a{font-size:.9rem}.login-panel{padding:70px;display:flex;align-items:center;justify-content:center}.login-panel form{width:100%;max-width:430px}.login-panel .primary-button{margin-top:8px}.password-first{max-width:620px;padding:36px;margin:60px auto;border:1px solid var(--border);border-radius:14px}.password-first svg{color:var(--primary)}[data-slot=dialog-content]{font-family:var(--font-sans)}
@media(max-width:1150px){.admin-main{padding:24px}.stats-grid{grid-template-columns:1fr 1fr}.dashboard-intro{flex-wrap:wrap}.login-panel{padding:40px}.admin-topbar{padding:18px 24px}}
@media(max-width:760px){.admin-main{padding:18px}.admin-topbar{padding:12px 16px;font-size:.85rem}.admin-topbar>div>span{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.admin-topbar .filter-button{padding:8px;font-size:.75rem}.admin-heading{gap:16px;flex-wrap:wrap;margin-bottom:22px}.admin-heading h1{font-size:1.6rem}.admin-panel,.settings-form{padding:18px}.form-grid,.setup-links{grid-template-columns:1fr}.stats-grid{gap:12px}.stat-tile{padding:18px}.dashboard-intro{padding:22px}.dashboard-intro h2{font-size:1.4rem}.backup-panel{flex-wrap:wrap}.login-page{grid-template-columns:1fr}.login-brand{padding:30px}.login-brand>svg{margin-bottom:14px}.login-brand h1{font-size:1.6rem}.login-brand p{display:none}.login-panel{padding:32px 24px}.password-first{padding:24px;margin:24px 16px}.admin-search input{width:100%}.public-search{flex-wrap:wrap}.public-search .primary-button{padding:9px 14px}.contact-message{padding:24px}.article-meta{flex-wrap:wrap}.hero-art img{object-position:center}}