@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{--bg:#f6f8fb;--ink:#12212b;--muted:#687782;--line:#e4e9ee;--brand:#0f766e;--brand2:#14b8a6;--navy:#0b2239;--white:#fff;--radius:24px;--shadow:0 24px 60px rgba(15,35,50,.12)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:'Noto Sans Thai',system-ui,sans-serif;line-height:1.65}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.container{width:min(1180px,calc(100% - 40px));margin:auto}.narrow{width:min(820px,calc(100% - 40px));margin:auto}.skip{position:fixed;left:16px;top:-60px;background:#fff;padding:12px 16px;z-index:999}.skip:focus{top:16px}.topbar{background:#081b2d;color:#d8e3ec;font-size:13px}.topbar-inner{min-height:38px;display:flex;justify-content:space-between;align-items:center}.topbar a{margin-left:20px}.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(218,226,233,.8)}.nav-wrap{height:78px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;font:700 15px 'Space Grotesk';color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand2));box-shadow:0 10px 24px rgba(20,184,166,.22)}.brand strong{display:block;font-size:18px}.brand small{display:block;color:var(--muted);font-size:11px;letter-spacing:.1em}.main-nav{display:flex;gap:28px;font-weight:600;font-size:14px}.main-nav a{position:relative}.main-nav a:after{content:'';position:absolute;left:0;right:100%;bottom:-8px;height:2px;background:var(--brand2);transition:.25s}.main-nav a:hover:after{right:0}.menu-btn{display:none;border:0;background:#eef3f5;border-radius:12px;padding:9px 12px;font-size:18px}.hero{position:relative;overflow:hidden;background:radial-gradient(circle at 80% 20%,#174b5b 0,#0d2d3f 34%,#081d2c 74%);color:#fff}.hero:before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,#000,transparent)}.hero-grid{min-height:650px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:70px;position:relative}.hero-copy{padding:80px 0}.eyebrow{display:inline-block;font:700 12px 'Space Grotesk';letter-spacing:.16em;color:#6ee7d8;margin-bottom:14px}.eyebrow.dark{color:var(--brand)}.hero h1{font-size:clamp(42px,6vw,76px);line-height:1.08;letter-spacing:-.03em;margin:0 0 22px}.hero h1 span{background:linear-gradient(90deg,#8ff7e9,#d8fff8);-webkit-background-clip:text;color:transparent}.hero p{max-width:650px;color:#c9d7df;font-size:18px}.hero-actions{display:flex;gap:12px;margin:30px 0}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:14px;font-weight:700}.btn.primary{background:linear-gradient(135deg,var(--brand2),#5eead4);color:#062a2b}.btn.ghost{border:1px solid rgba(255,255,255,.28);color:#fff}.btn.light{background:#fff;color:#0b2a3c}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:42px}.stats div{padding:14px 0;border-top:1px solid rgba(255,255,255,.18)}.stats strong{display:block;font:700 24px 'Space Grotesk'}.stats span{font-size:12px;color:#9fb3bf}.hero-card{position:relative}.glass-card{position:relative;padding:36px;border:1px solid rgba(255,255,255,.18);border-radius:32px;background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.045));backdrop-filter:blur(20px);box-shadow:0 30px 80px rgba(0,0,0,.22)}.glass-card h2{font-size:34px;line-height:1.25;margin:20px 0 32px}.glass-card small{letter-spacing:.15em;color:#98eee2}.pulse{width:14px;height:14px;border-radius:50%;background:#5eead4;box-shadow:0 0 0 10px rgba(94,234,212,.08);display:block}.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mini-grid div{padding:18px;border-radius:18px;background:rgba(255,255,255,.07);color:#8dc9cb;font:600 12px 'Space Grotesk'}.mini-grid b{display:block;color:#fff;font-size:16px;margin-top:8px}.hero-orb{position:absolute;border-radius:50%;filter:blur(8px);opacity:.4}.orb-a{width:280px;height:280px;background:#14b8a6;right:-120px;top:40px}.orb-b{width:180px;height:180px;background:#0ea5e9;left:42%;bottom:-70px}.quick{margin-top:-36px;position:relative;z-index:5}.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-radius:24px;box-shadow:var(--shadow);overflow:hidden}.quick-grid a{padding:26px 24px;border-right:1px solid var(--line);transition:.2s}.quick-grid a:last-child{border-right:0}.quick-grid a:hover{background:#f0fdfa;transform:translateY(-3px)}.quick-grid span{font-size:24px;color:var(--brand)}.quick-grid b,.quick-grid small{display:block}.quick-grid b{margin-top:6px}.quick-grid small{color:var(--muted)}.section{padding:92px 0}.section.alt{background:#eef3f5}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:34px}.section-head h2{font-size:38px;line-height:1.2;margin:0}.section-head>a{font-weight:700;color:var(--brand)}.announce-list{display:grid;gap:12px}.announce-list article{display:grid;grid-template-columns:120px 1fr auto;gap:20px;align-items:center;padding:20px 22px;background:#fff;border:1px solid var(--line);border-radius:18px;opacity:0;transform:translateY(16px);transition:.4s}.announce-list article.reveal{opacity:1;transform:none}.announce-list article>span{font:700 13px 'Space Grotesk';color:var(--brand)}.announce-list h3{margin:0 0 4px;font-size:18px}.announce-list p{margin:0;color:var(--muted)}.pin{font:700 10px 'Space Grotesk';padding:5px 8px;border-radius:999px;background:#ccfbf1;color:#0f766e}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.card{overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:22px;opacity:0;transform:translateY(18px);transition:.45s}.card.reveal{opacity:1;transform:none}.card:hover{box-shadow:0 18px 50px rgba(21,38,48,.09);transform:translateY(-4px)}.card-img{aspect-ratio:16/10;background:#dbe7e7;overflow:hidden}.card-img img{width:100%;height:100%;object-fit:cover;transition:.5s}.card:hover .card-img img{transform:scale(1.04)}.placeholder{height:100%;display:grid;place-items:center;font:700 26px 'Space Grotesk';letter-spacing:.18em;color:#8aa2aa;background:linear-gradient(135deg,#dff7f3,#e8edf4)}.card-body{padding:22px}.card-body small{color:var(--brand);font-weight:700}.card-body h3{font-size:20px;line-height:1.4;margin:8px 0}.card-body p{color:var(--muted);margin:0}.event-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.event-grid article{display:flex;gap:18px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;opacity:0;transform:translateY(14px);transition:.4s}.event-grid article.reveal{opacity:1;transform:none}.event-date{width:68px;min-width:68px;border-radius:16px;padding:10px;text-align:center;background:#e8fbf7;color:var(--brand)}.event-date b{display:block;font:700 28px 'Space Grotesk';line-height:1}.event-date span{font:700 11px 'Space Grotesk'}.event-grid h3{margin:0 0 4px}.event-grid p{margin:0;color:var(--muted)}.cta{padding:80px 0;background:linear-gradient(135deg,#0f766e,#0a4353);color:#fff}.cta-inner{display:flex;justify-content:space-between;align-items:center;gap:30px}.cta h2{font-size:38px;margin:4px 0}.cta p{color:#c7e5e2}.page-hero{padding:100px 0 78px;background:linear-gradient(135deg,#092235,#0d4a53);color:#fff}.page-hero h1{font-size:52px;line-height:1.15;margin:0 0 10px}.page-hero p{color:#c7d4dc;font-size:17px}.article-head{padding:90px 0 20px}.article-head h1{font-size:48px;line-height:1.2;margin:0}.meta{color:var(--muted)}.article-cover{margin:36px 0;border-radius:24px}.article-body{padding:30px 0 100px;font-size:18px}.article-body h2,.article-body h3{line-height:1.3}.article-body img{border-radius:18px;margin:24px 0}.site-footer{padding:64px 0;background:#061723;color:#cad6df}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:50px}.footer-grid h4{color:#fff}.footer-grid a,.footer-grid p{display:block;color:#9cafbb;margin:7px 0}.footer-brand strong{color:#fff}.footer-brand{margin-bottom:16px}
@media(max-width:900px){.main-nav{position:absolute;top:78px;left:20px;right:20px;display:none;flex-direction:column;gap:0;padding:12px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}.main-nav.open{display:flex}.main-nav a{padding:12px}.menu-btn{display:block}.hero-grid{grid-template-columns:1fr;gap:0}.hero-copy{padding-bottom:30px}.hero-card{padding-bottom:80px}.quick-grid{grid-template-columns:1fr 1fr}.quick-grid a:nth-child(2){border-right:0}.cards{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}}
@media(max-width:620px){.container,.narrow{width:min(100% - 28px,1180px)}.topbar-inner>span{display:none}.topbar-inner{justify-content:flex-end}.brand strong{font-size:15px}.brand small{font-size:9px}.brand-mark{width:42px;height:42px}.hero-grid{min-height:auto}.hero-copy{padding-top:64px}.hero h1{font-size:43px}.hero p{font-size:16px}.stats{grid-template-columns:1fr}.hero-card{display:none}.quick{margin-top:-18px}.quick-grid{grid-template-columns:1fr 1fr}.quick-grid a{padding:18px 16px}.section{padding:68px 0}.section-head h2,.cta h2{font-size:30px}.cards{grid-template-columns:1fr}.event-grid{grid-template-columns:1fr}.announce-list article{grid-template-columns:1fr}.announce-list article>span{order:2}.cta-inner{align-items:flex-start;flex-direction:column}.page-hero{padding:78px 0 58px}.page-hero h1,.article-head h1{font-size:38px}.footer-grid{grid-template-columns:1fr}.footer-grid>div:first-child{grid-column:auto}}
.page-hero.compact{padding:72px 0 54px}.external-section{padding-top:42px}.external-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px;padding:14px 16px;border:1px solid var(--line);background:#fff;border-radius:16px}.external-toolbar strong,.external-toolbar small{display:block}.external-toolbar small{color:var(--muted)}.external-open{background:#edf7f6;color:var(--brand);min-height:42px}.embed-shell{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#fff;box-shadow:var(--shadow)}.embed-shell iframe{display:block;width:100%;border:0;background:#fff}.embed-fallback{padding:10px 14px;background:#f8fafc;color:var(--muted);font-size:12px;border-top:1px solid var(--line)}.embed-edge{border-radius:10px}.external-link-card,.empty-state{padding:60px 28px;text-align:center;background:#fff;border:1px solid var(--line);border-radius:24px}.external-link-card p,.empty-state p{color:var(--muted)}.staff-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.staff-card{overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:22px;transition:.25s}.staff-card:hover{transform:translateY(-4px);box-shadow:0 18px 45px rgba(21,38,48,.1)}.staff-photo{aspect-ratio:4/5;background:#e8eff2;overflow:hidden}.staff-photo img{width:100%;height:100%;object-fit:cover}.staff-info{padding:18px}.staff-info h2{font-size:18px;line-height:1.35;margin:0 0 5px}.staff-info small{color:var(--muted)}.social-feed{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.social-card{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden}.social-image{display:block;aspect-ratio:16/10;background:#e9eef2;overflow:hidden}.social-image img{width:100%;height:100%;object-fit:cover}.social-body{padding:22px}.social-meta{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:12px}.social-meta span{color:#1877f2;font-weight:800}.social-body p{white-space:normal;color:#273740}.social-body>a{display:inline-block;margin-top:8px;color:var(--brand);font-weight:700}
@media(max-width:980px){.staff-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:760px){.external-toolbar{align-items:flex-start;flex-direction:column}.staff-grid{grid-template-columns:repeat(2,1fr)}.social-feed{grid-template-columns:1fr}}@media(max-width:480px){.staff-grid{grid-template-columns:1fr 1fr;gap:12px}.staff-info{padding:13px}.staff-info h2{font-size:15px}.page-hero.compact{padding:58px 0 44px}}

/* v1.3.2 — External content should feel like a native page of the school website */
.external-native-view{width:100%;margin:0;padding:0;background:#fff;overflow:hidden}
.external-native-view iframe{display:block;width:100%;height:max(var(--external-frame-height,1000px),calc(100vh - 116px));min-height:calc(100vh - 116px);margin:0;border:0;background:#fff}
.external-link-only{padding-top:56px}
@media(max-width:900px){.external-native-view iframe{height:max(var(--external-frame-height,1000px),calc(100vh - 78px));min-height:calc(100vh - 78px)}}


/* v1.3.5 — Facebook feed: native full-width immersive view */
.social-native{position:relative;width:100%;margin:0;padding:clamp(24px,4vw,64px) clamp(14px,3vw,48px) clamp(64px,7vw,110px);overflow:hidden;background:
radial-gradient(circle at 8% 8%,rgba(20,184,166,.10),transparent 28%),
radial-gradient(circle at 92% 30%,rgba(14,165,233,.08),transparent 26%),
linear-gradient(180deg,#f7fafc 0%,#f3f7f9 100%)}
.social-native:before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.24;background-image:linear-gradient(rgba(15,118,110,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(15,118,110,.045) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,#000 0%,transparent 46%)}
.social-native-inner{position:relative;z-index:1;width:min(1500px,100%);margin:0 auto}
.social-feed-modern{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,2vw,28px);align-items:start}
.social-post{--delay:0ms;grid-column:span 6;position:relative;overflow:hidden;border:1px solid rgba(205,217,225,.82);border-radius:clamp(20px,2vw,30px);background:rgba(255,255,255,.94);box-shadow:0 14px 42px rgba(17,38,51,.07);opacity:0;transform:translate3d(0,34px,0) scale(.985);filter:blur(5px);transition:opacity .72s cubic-bezier(.2,.7,.2,1) var(--delay),transform .72s cubic-bezier(.2,.7,.2,1) var(--delay),filter .72s ease var(--delay),box-shadow .28s ease,border-color .28s ease;will-change:opacity,transform,filter}
.social-post:nth-child(3n+1){grid-column:span 7}.social-post:nth-child(3n+2){grid-column:span 5}.social-post:nth-child(3n+3){grid-column:span 6}
.social-post.is-visible{opacity:1;transform:none;filter:none}
.social-post:hover{transform:translateY(-5px);border-color:rgba(20,184,166,.32);box-shadow:0 28px 70px rgba(17,38,51,.13)}
.social-media{position:relative;display:block;overflow:hidden;background:#e8eff3;isolation:isolate}
.social-media:before{content:'';display:block;padding-top:62.5%}
.social-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .85s cubic-bezier(.2,.7,.2,1),filter .5s ease}
.social-post:nth-child(3n+1) .social-media:before{padding-top:58%}.social-post:nth-child(3n+2) .social-media:before{padding-top:72%}
.social-post:hover .social-media img{transform:scale(1.035)}
.social-media:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 58%,rgba(4,23,35,.34));opacity:.48;transition:opacity .3s ease}
.social-post:hover .social-media:after{opacity:.72}
.social-content{position:relative;padding:clamp(18px,2.3vw,30px)}
.social-topline{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:14px}
.social-source{display:inline-flex;align-items:center;gap:8px;font:700 12px 'Space Grotesk','Noto Sans Thai',sans-serif;letter-spacing:.04em;color:#1877f2}
.social-source:before{content:'f';display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#1877f2;color:#fff;font:800 16px Arial,sans-serif}
.social-date{font-size:12px;color:var(--muted);white-space:nowrap}
.social-copy{margin:0;color:#263943;font-size:clamp(14px,1.15vw,16px);line-height:1.85;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;overflow:hidden;transition:max-height .35s ease}
.social-post.is-expanded .social-copy{display:block;overflow:visible}
.social-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid #edf1f4}
.social-more{appearance:none;border:0;background:transparent;padding:7px 0;color:var(--brand);font:700 13px 'Noto Sans Thai',sans-serif;cursor:pointer}
.social-more:hover{text-decoration:underline}
.social-origin{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border-radius:999px;background:#edf8f6;color:#0c6d66;font-weight:700;font-size:12px;transition:transform .2s ease,background .2s ease}
.social-origin:hover{transform:translateY(-2px);background:#dff5f0}
.social-empty-wrap{position:relative;z-index:1;width:min(900px,calc(100% - 28px));margin:70px auto}
.social-post.no-image{min-height:260px;background:linear-gradient(145deg,#fff,#f5fbfa)}
.social-post.no-image .social-content{padding:clamp(24px,3vw,42px)}
@media(max-width:1100px){.social-post,.social-post:nth-child(3n+1),.social-post:nth-child(3n+2),.social-post:nth-child(3n+3){grid-column:span 6}.social-post:nth-child(odd) .social-media:before,.social-post:nth-child(even) .social-media:before{padding-top:66%}}
@media(max-width:760px){.social-native{padding:18px 12px 74px}.social-feed-modern{gap:16px}.social-post,.social-post:nth-child(3n+1),.social-post:nth-child(3n+2),.social-post:nth-child(3n+3){grid-column:1/-1;border-radius:20px}.social-post:hover{transform:none}.social-media:before,.social-post:nth-child(3n+1) .social-media:before,.social-post:nth-child(3n+2) .social-media:before{padding-top:66%}.social-content{padding:17px}.social-copy{-webkit-line-clamp:6}.social-actions{align-items:flex-start;flex-direction:column}.social-origin{width:100%;justify-content:center}.social-topline{align-items:flex-start;flex-direction:column;gap:5px}}
@media(prefers-reduced-motion:reduce){.social-post{opacity:1;transform:none;filter:none;transition:none}.social-media img,.social-origin{transition:none}.social-post:hover .social-media img{transform:none}}

/* Module Platform: section spacing is owned by the module grid, not each .section. */
#bnwTemplateSafeGrid>section.bnw-core-public,
#bnwTemplateSafeGrid>section.bnw-template-module,
.bnw-cross-page-grid>section.bnw-core-public,
.bnw-cross-page-grid>section.bnw-template-module{padding-block:0!important;margin-block:0!important}

/* Empty modules must not reserve a grid row. The renderer already emits
   .bnw-template-empty for modules with no usable data, so remove the complete
   section from layout on both the homepage and App Shell cross-page grids. */
#bnwTemplateSafeGrid>section:has(.bnw-template-empty),
.bnw-cross-page-grid>section:has(.bnw-template-empty),
#bnwTemplateSafeGrid>section.bnw-core-public:has(.bnw-core-text>p:empty),
.bnw-cross-page-grid>section.bnw-core-public:has(.bnw-core-text>p:empty),
#bnwTemplateSafeGrid>section.bnw-core-public:has(.bnw-core-announcement>p:empty):not(:has(.bnw-core-action)),
.bnw-cross-page-grid>section.bnw-core-public:has(.bnw-core-announcement>p:empty):not(:has(.bnw-core-action)){display:none!important}

/* Mobile Module Platform contract: every installed module becomes one continuous stack.
   Target the grid relationship instead of module class so future renderers/clones inherit it. */
@media(max-width:760px){
  #bnwTemplateSafeGrid,.bnw-cross-page-grid{gap:0!important;row-gap:0!important}
  #bnwTemplateSafeGrid>section,.bnw-cross-page-grid>section{padding-block:0!important;margin-block:0!important;min-height:0!important;height:auto}
  #bnwTemplateSafeGrid>section>.container,.bnw-cross-page-grid>section>.container{padding-top:0!important;padding-bottom:0!important}
  .bnw-cross-page-stage{margin-top:0!important;margin-bottom:0!important}
}