/*
Theme Name: Zhiler Pattana
Theme URI: https://www.zhilerpattana.ac.th
Description: ธีมสำหรับโรงเรียน 3 ภาษา จื้อ-เล่อพัฒนา (วิทยาเขตศิริเพ็ญ) รองรับ 3 ภาษาผ่าน Polylang
Author: Zhiler Pattana
Version: 1.0
License: GPL v2 or later
Text Domain: zhiler
*/


:root{--navy:#1F2A63;--navy-d:#151d47;--navy-l:#3a4a94;--red:#D0402F;--red-d:#a83122;
--cream:#FBF8F3;--sand:#F1EBE1;--ink:#23252b;--muted:#5f6472;--line:#e4dfd6;--wrap:1180px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Noto Sans Thai','Inter',sans-serif;color:var(--ink);background:#fff;line-height:1.75;-webkit-font-smoothing:antialiased}
body.lang-zh{font-family:'Noto Sans SC','Inter',sans-serif}
body.lang-en{font-family:'Inter','Noto Sans Thai',sans-serif}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

.topbar{background:var(--navy-d);color:#c9d0ea;font-size:13px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;height:38px}
.topbar a:hover{color:#fff}
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:22px;height:86px}
.brand{display:flex;align-items:center;gap:13px;margin-right:auto;cursor:pointer}
.brand .brand-logo{width:58px;height:58px;object-fit:contain;flex:0 0 auto}
.brand .bnames{display:flex;flex-direction:column;justify-content:center;line-height:1.25}
.brand .bnames b{font-size:15.5px;font-weight:700;color:var(--navy)}
.brand .bnames .bn-en{font-size:11.5px;color:var(--muted);font-weight:500;letter-spacing:.01em}
.brand .bnames .bn-zh{font-size:12px;color:var(--muted);font-weight:500}
.menu{display:flex;gap:4px;font-size:15px;font-weight:500}
.mi{position:relative}
.mi>a{display:block;padding:10px 14px;border-radius:7px;transition:.15s;cursor:pointer}
.mi:hover>a{background:var(--cream);color:var(--red)}
.dd{position:absolute;top:100%;left:0;min-width:260px;background:#fff;border:1px solid var(--line);
border-radius:12px;box-shadow:0 14px 40px rgba(31,42,99,.15);padding:8px;opacity:0;visibility:hidden;
transform:translateY(6px);transition:.16s;z-index:70}
.mi:hover .dd{opacity:1;visibility:visible;transform:translateY(0)}
.dd a{display:block;padding:10px 14px;border-radius:7px;font-size:14.5px;font-weight:400;color:var(--muted);transition:.13s}
.dd a:hover{background:var(--cream);color:var(--navy)}
.dd a.cur{color:var(--red);font-weight:600}
.langs{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;overflow:hidden;flex:0 0 auto;background:#fff}
.langs .langs-ico{padding:0 2px 0 11px;font-size:15px;line-height:1;color:var(--muted)}
.langs .langbtn{font:inherit;font-size:14px;font-weight:600;padding:10px 15px;background:#fff;border:0;border-left:1px solid var(--line);cursor:pointer;color:var(--muted);text-decoration:none;line-height:1;transition:background .15s,color .15s}
.langs .langbtn:first-of-type{border-left:0}
.langs .langbtn:hover{background:#eef1fb;color:var(--navy)}
.langs .langbtn.on{background:var(--navy);color:#fff}
@media(max-width:1080px){.langs .langbtn{padding:11px 15px}}

/* ---------- ส่วนวิดีโอแนะนำโรงเรียน ---------- */
.videos{background:#f5f6fa;padding:60px 0}
.videos .vhead{text-align:center;max-width:720px;margin:0 auto 34px}
.videos .vhead .rule{width:54px;height:3px;background:var(--red,#e0503a);border-radius:2px;margin:0 auto 16px}
.videos h2{font-size:30px;font-weight:800;color:var(--navy);margin:0 0 8px}
.videos .vsub{color:var(--muted);font-size:16px;margin:0}
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.vcard{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.vcard .vframe{position:relative;width:100%;padding-top:56.25%;background:#0b1020}
.vcard .vframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vcard .vtitle{padding:13px 16px;font-weight:600;color:var(--ink,#1f2430);font-size:15px}
@media(max-width:900px){.vgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.vgrid{grid-template-columns:1fr}.videos h2{font-size:24px}}
.btn{display:inline-block;padding:12px 26px;border-radius:8px;font-weight:600;font-size:15px;transition:.18s;cursor:pointer;border:2px solid transparent}
.btn-red{background:var(--red);color:#fff}.btn-red:hover{background:var(--red-d)}
.btn-ghost{border-color:rgba(255,255,255,.55);color:#fff}.btn-ghost:hover{background:rgba(255,255,255,.14)}
.btn-navy{background:var(--navy);color:#fff}.btn-navy:hover{background:var(--navy-d)}
.burger{display:none;background:none;border:0;font-size:26px;cursor:pointer;color:var(--navy)}

.hero{position:relative;min-height:540px;display:flex;align-items:center;background:var(--navy);overflow:hidden}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 32%;opacity:0;will-change:opacity,transform;animation:heroKB 32s linear infinite}
.hero img.bg:nth-of-type(1){animation-delay:0s}
.hero img.bg:nth-of-type(2){animation-delay:8s}
.hero img.bg:nth-of-type(3){animation-delay:16s}
.hero img.bg:nth-of-type(4){animation-delay:24s}
@keyframes heroKB{0%{opacity:0;transform:scale(1.06)}4%{opacity:1}25%{opacity:1;transform:scale(1.14)}29%{opacity:0;transform:scale(1.15)}100%{opacity:0;transform:scale(1.15)}}
@media(prefers-reduced-motion:reduce){.hero img.bg{animation:none;opacity:0}.hero img.bg:nth-of-type(1){opacity:1}}
.hero::after{content:'';position:absolute;inset:0;z-index:1;background-color:rgba(21,29,71,.82)}
.hero .wrap{position:relative;z-index:2;padding:76px 24px}
.hero-in{max-width:640px;color:#fff;text-shadow:0 2px 16px rgba(12,17,40,.55)}
.hero-in .btn{text-shadow:none}
.eyebrow{display:inline-block;font-size:14px;font-weight:700;letter-spacing:.05em;background:var(--red);color:#fff;padding:8px 18px;border-radius:999px;margin-bottom:22px;box-shadow:0 6px 18px rgba(208,64,47,.4);animation:eyebrowPulse 2.2s ease-in-out infinite}
@keyframes eyebrowPulse{0%,100%{box-shadow:0 0 0 0 rgba(240,101,52,.55)}50%{box-shadow:0 0 0 12px rgba(240,101,52,0)}}
@media(prefers-reduced-motion:reduce){.eyebrow{animation:none}}
.hero h1{font-size:clamp(29px,4.3vw,49px);line-height:1.28;font-weight:700;margin-bottom:20px}
.hero p.lead{font-size:18px;line-height:1.8;color:#dfe4f5;margin-bottom:34px;max-width:540px}
.cta{display:flex;gap:14px;flex-wrap:wrap}

.announce{background:var(--sand);border-bottom:1px solid var(--line)}
.announce .wrap{display:flex;align-items:center;gap:16px;padding:15px 24px;font-size:15px;flex-wrap:wrap}
.announce .tag{background:var(--red);color:#fff;font-size:12px;font-weight:700;padding:4px 12px;border-radius:5px}

section{padding:80px 0}
.sec-head{text-align:center;max-width:700px;margin:0 auto 50px}
.sec-head h2{font-size:clamp(25px,3.1vw,34px);color:var(--navy);font-weight:700;line-height:1.35;margin-bottom:14px}
.sec-head p{color:var(--muted);font-size:16.5px}
.rule{width:52px;height:3px;background:var(--red);margin:0 auto 22px;border-radius:2px}

.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.feat{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:30px 26px;transition:.2s}
.feat:hover{transform:translateY(-3px);border-color:var(--navy-l)}
.feat .ico{width:44px;height:44px;margin-bottom:16px;color:var(--red)}
.feat h3{font-size:17.5px;color:var(--navy);font-weight:600;margin-bottom:9px;line-height:1.45}
.feat p{font-size:14.8px;color:var(--muted)}

.levels{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.lvl{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:.2s;display:flex;flex-direction:column;cursor:pointer}
.lvl:hover{box-shadow:0 12px 34px rgba(31,42,99,.11);transform:translateY(-3px)}
.lvl .top{background:var(--navy);color:#fff;padding:24px 28px}
.lvl .top .age{font-size:13px;color:#b9c2e4}
.lvl .top h3{font-size:23px;font-weight:700;margin-top:5px}
.lvl .body{padding:24px 28px;flex:1;display:flex;flex-direction:column}
.lvl ul{list-style:none;margin-bottom:20px}
.lvl li{position:relative;padding-left:24px;margin-bottom:11px;font-size:15px;color:var(--muted)}
.lvl li::before{content:'';position:absolute;left:0;top:10px;width:8px;height:8px;border-radius:50%;background:var(--red)}
.lvl .go{margin-top:auto;color:var(--navy);font-weight:600;font-size:15px}

.icep{background:var(--navy);color:#fff}
.icep .two{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.icep h2{font-size:clamp(25px,3.1vw,33px);font-weight:700;line-height:1.35;margin-bottom:18px}
.icep .sub{color:#c3cbe8;font-size:16.5px;margin-bottom:26px}
.icep li{display:flex;gap:14px;margin-bottom:18px;list-style:none}
.icep li svg{flex:0 0 22px;margin-top:4px;color:var(--red)}
.icep li b{display:block;font-size:16.5px;margin-bottom:3px}
.icep li span{color:#bcc5e6;font-size:14.8px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.stat{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:26px 22px;text-align:center}
.stat b{display:block;font-size:37px;font-weight:700;margin-bottom:8px}
.stat span{font-size:14px;color:#bcc5e6}

.gal{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
.gal .gcard{flex:0 1 calc(33.333% - 12px)}
.gcard{position:relative;border-radius:14px;overflow:hidden;background:var(--sand);aspect-ratio:4/3;display:flex;align-items:flex-end;border:1px solid var(--line)}
.gcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gcard .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#b3a894;font-size:13px}
.gcard .cap{position:relative;z-index:2;width:100%;padding:16px 20px;background:linear-gradient(transparent,rgba(21,29,71,.88));color:#fff;font-weight:600;font-size:15.5px}

.news{background:var(--cream);border-top:1px solid var(--line)}
.news-list{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.nitem{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px}
.nitem time{font-size:13px;color:var(--red);font-weight:600}
.nitem h3{font-size:17px;color:var(--navy);font-weight:600;margin:10px 0}
.nitem p{font-size:14.8px;color:var(--muted)}
.editable{display:inline-block;margin-top:14px;font-size:12.5px;color:#8a8578;background:var(--sand);border-radius:5px;padding:3px 9px}

/* ---------- inner page ---------- */
.pbanner{position:relative;height:230px;background:var(--navy) center/cover no-repeat;background-image:linear-gradient(rgba(21,29,71,.35),rgba(21,29,71,.35)),url(assets/banner-default.jpg);display:flex;align-items:center;justify-content:center;overflow:hidden}
.pbanner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pbanner::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(21,29,71,.86),rgba(21,29,71,.55))}
.pbanner h1{position:relative;z-index:2;color:#fff;font-size:clamp(26px,3.6vw,38px);font-weight:700;text-align:center;padding:0 24px}
.crumb{background:var(--cream);border-bottom:1px solid var(--line);font-size:14px;color:var(--muted)}
.crumb .wrap{padding:13px 24px}
.crumb a{color:var(--navy);font-weight:500}
.article{max-width:860px;margin:0 auto;padding:56px 24px 80px}
.article .blk{margin-bottom:30px}
.article .blk img{border-radius:12px;border:1px solid var(--line);margin:0 auto}
.article p{margin-bottom:16px;font-size:16.5px;line-height:1.9}
.article h1,.article h2{font-size:26px;color:var(--navy);font-weight:700;margin:42px 0 20px;line-height:1.45;text-align:center}
.article h2::after{content:"";display:block;width:54px;height:3px;background:var(--red);border-radius:2px;margin:14px auto 0}
.article h3,.article h4{font-size:18.5px;color:var(--navy);font-weight:600;margin:26px 0 12px;text-align:left}
.motto{background:var(--navy);color:#fff;text-align:center;font-size:clamp(16px,2.3vw,21px);font-weight:600;line-height:1.95;padding:26px 30px;border-radius:14px;margin:8px 0 32px;letter-spacing:.01em}
.article ul,.article ol{margin:0 0 18px 22px}
.article li{margin-bottom:9px;font-size:16.5px;line-height:1.85}
.article hr{border:0;border-top:1px solid var(--line);margin:34px 0}
.article strong{font-weight:600;color:var(--navy)}
.article table{width:100%;border-collapse:collapse;margin-bottom:20px}
.article td,.article th{border:1px solid var(--line);padding:10px 14px;font-size:15.5px}
.empty{background:var(--sand);border:1px dashed #cbbfa9;border-radius:12px;padding:40px 30px;text-align:center;color:#8a7f6c;font-size:15.5px;line-height:1.9}
.imgnote{font-size:13px;color:#8a8578;background:var(--sand);border-radius:6px;padding:8px 12px;margin-top:10px;text-align:center}
.article .blk.portrait img{width:190px;height:190px;border-radius:50%;object-fit:cover;
  border:4px solid var(--sand);box-shadow:0 6px 20px rgba(31,42,99,.13);margin:0 auto}
.article .blk.portrait p{text-align:center;margin-top:14px}
.article h3{text-align:left}
.article .blk>h3:first-child{margin-top:38px;padding-bottom:8px;border-bottom:2px solid var(--sand)}
.ycards{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.ycard{background:var(--navy);color:#fff;border-radius:12px;padding:16px 10px;text-align:center}
.ycard span{display:block;font-size:12.5px;color:#b9c2e4;line-height:1.4;min-height:34px}
.ycard b{display:block;font-size:21px;font-weight:700;margin:4px 0 2px}
.ycard em{font-style:normal;font-size:11.5px;color:#b9c2e4}
@media(max-width:900px){.ycards{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.ycards{grid-template-columns:repeat(2,1fr)}}

.founder{display:grid;grid-template-columns:270px 1fr;gap:46px;align-items:start}
.fcard{text-align:center;position:sticky;top:130px}
.fcard img{width:230px;height:230px;border-radius:50%;object-fit:cover;object-position:center 18%;
  background:var(--navy);margin:0 auto 20px;border:5px solid var(--sand)}
.fname{font-size:19px;font-weight:600;color:var(--navy);line-height:1.5}
.frole{font-size:14.5px;color:var(--muted);margin-top:5px}
.feyebrow{font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--red);
  text-transform:uppercase;margin-bottom:16px}
.fbody{border-left:3px solid var(--sand);padding-left:32px}
.fbody p{margin-bottom:18px;font-size:16.5px;line-height:1.95}
body.lang-en .fbody p:first-of-type::first-letter{font-size:52px;font-weight:700;color:var(--navy);
  float:left;line-height:.9;margin:4px 10px 0 0}

.envrow{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-bottom:58px}
.envrow.alt .envimg{order:2}
.envrow.noimg{grid-template-columns:1fr}
.envimg img{border-radius:14px;border:1px solid var(--line);width:100%}
.envtxt h3{margin:0 0 12px;font-size:21px;border:0;padding:0}
.envtxt p{font-size:16px;line-height:1.9;margin:0}

.coming{text-align:center;background:var(--cream);border:1px solid var(--line);
  border-radius:16px;padding:56px 40px;color:var(--navy)}
.coming svg{margin:0 auto 20px;color:var(--red)}
.coming h3{font-size:21px;margin-bottom:12px}
.coming p{color:var(--muted);font-size:16px;max-width:460px;margin:0 auto 26px}
.comingbtns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.pride{background:var(--cream);border-top:1px solid var(--line)}
.pstats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:760px;margin:0 auto}
.pstat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px 20px;text-align:center}
.pstat b{display:block;font-size:44px;font-weight:700;color:var(--red);line-height:1;margin-bottom:10px}
.pstat span{font-size:15px;color:var(--muted)}
.achgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.ach{background:var(--cream);border:1px solid var(--line);border-left:4px solid var(--red);
  border-radius:0 12px 12px 0;padding:20px 22px}
.achname{font-size:17px;font-weight:600;color:var(--navy);margin-bottom:4px}
.achexam{font-size:13.5px;color:var(--red);font-weight:500;margin-bottom:10px}
.achprog{font-size:15px;color:var(--ink);margin-bottom:6px;line-height:1.6}
.achsch{font-size:14.5px;color:var(--muted);line-height:1.6}
@media(max-width:760px){.achgrid,.pstats{grid-template-columns:1fr}}
table.fee{width:100%;border-collapse:collapse;font-size:15px;margin-bottom:8px}
table.fee th,table.fee td{border:1px solid var(--line);padding:11px 12px;text-align:center}
table.fee thead th{background:var(--navy);color:#fff;font-weight:600;font-size:14.5px;border-color:var(--navy-l)}
table.fee thead th.sm{background:var(--navy-l);font-size:13px;font-weight:500}
table.fee td.lh,table.fee th.lh{text-align:left;font-weight:500;color:var(--navy);background:var(--cream);min-width:190px}
table.fee tbody tr:nth-child(even) td:not(.lh){background:#fafaf7}
table.fee tr.sum td{background:var(--sand);font-weight:600;color:var(--navy)}
table.fee tr.grand td{background:var(--red);color:#fff;font-weight:700;font-size:16px;border-color:var(--red-d)}
table.fee tr.grand td.lh{background:var(--red-d);color:#fff}

.contact{background:#fff}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.cline{display:flex;gap:15px;margin-bottom:20px}
.cline svg{flex:0 0 21px;margin-top:4px;color:var(--red)}
.cline b{display:block;font-size:14px;color:var(--muted);font-weight:500;margin-bottom:2px}
.cline span{font-size:16.5px;font-weight:500}
.map{background:var(--sand);border:1px solid var(--line);border-radius:16px;min-height:290px;display:flex;align-items:center;justify-content:center;color:#a89d8a;font-size:14px}

footer{background:var(--navy-d);color:#a8b2d6;padding:60px 0 26px;font-size:14.5px}
.fgrid{display:grid;grid-template-columns:1.1fr 2fr;gap:56px;margin-bottom:40px;align-items:start}
footer h4{color:#fff;font-size:15.5px;font-weight:600;margin-bottom:16px}
footer a:hover{color:#fff}
footer li{list-style:none;margin-bottom:9px}
.fmenu{padding-top:4px}
.fbot{border-top:1px solid rgba(255,255,255,.11);padding-top:22px;text-align:center;font-size:13px;color:#8590b8}
.socials{display:flex;gap:12px;margin-top:20px}
.socials a{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;color:#fff;transition:.2s}
.socials a svg{width:20px;height:20px}
.socials a.s-fb:hover{background:#1877F2}
.socials a.s-line:hover{background:#06C755}
.socials a.s-yt:hover{background:#FF0000}

.note{position:fixed;right:18px;bottom:18px;z-index:99;background:var(--navy);color:#fff;font-size:13px;padding:11px 17px;border-radius:9px;max-width:300px;line-height:1.6;box-shadow:0 8px 26px rgba(0,0,0,.28)}
.note b{color:#ffd9a0}
.note button{position:absolute;top:4px;right:8px;background:none;border:0;color:#9aa5cf;font-size:17px;cursor:pointer}

@media(max-width:1080px){
  .menu{position:fixed;top:124px;left:0;right:0;bottom:0;background:#fff;flex-direction:column;
    gap:0;padding:16px 24px;overflow:auto;display:none}
  .menu.open{display:flex}
  .mi>a{padding:14px 0;border-bottom:1px solid var(--line);font-weight:600;color:var(--navy)}
  .dd{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
    padding:4px 0 12px 12px;min-width:0}
  .burger{display:block}
  .grid4{grid-template-columns:repeat(2,1fr)}
  .grid3,.gal,.news-list,.icep .two,.cgrid{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
  section{padding:58px 0}
}
@media(max-width:560px){.grid4,.fgrid{grid-template-columns:1fr}.stats{grid-template-columns:1fr}}


/* ---------- WordPress ---------- */
.wp-block-image img{border-radius:12px}
.admin-bar header{top:32px}
@media(max-width:782px){.admin-bar header{top:46px}}
.article ul,.article ol{margin:0 0 18px 22px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip-link:focus{position:fixed;top:10px;left:10px;z-index:999;background:#fff;padding:10px 16px;border-radius:8px}
.entry-content>*:first-child{margin-top:0}
.alignwide{max-width:1180px;margin-left:auto;margin-right:auto}
.alignfull{max-width:none;width:100%}

/* ---------- ตารางข้อมูลหลักสูตร (แทนที่ภาพตารางเดิม) ---------- */
.zt-wrap{margin:24px 0;overflow-x:auto}
.zt-wrap table{width:100%;border-collapse:collapse;font-size:15px}
.zt-wrap th{background:var(--navy,#1e2a5a);color:#fff;padding:12px 14px;text-align:center;font-weight:700}
.zt-wrap td{padding:12px 14px;border:1px solid #e2e5ee;text-align:center;vertical-align:middle}
.zt-wrap td.zt-left{text-align:left}
.zt-wrap tr:nth-child(even) td{background:#f7f8fc}
.zt-note{font-size:13px;color:#6b7280;margin-top:6px}
.zt-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:24px 0}
.zt-col{border:1px solid #e2e5ee;border-radius:12px;padding:20px 22px}
.zt-col h3{margin:0 0 14px;font-size:18px;color:var(--navy,#1e2a5a);text-align:center}
.zt-col ol,.zt-col ul{margin:0;padding-left:22px;line-height:1.9}
.zt-col ul ul{margin-top:4px}
@media(max-width:700px){.zt-cols{grid-template-columns:1fr}}

/* ---------- วิดีโอห้องเรียนจริงในหน้าแรก ---------- */
.classvid{background:#f5f6fa;border-top:1px solid var(--line)}
.classvid .vgrid{grid-template-columns:repeat(2,1fr);gap:24px;max-width:900px;margin:0 auto}
.classvid .vcard{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.classvid .vframe{position:relative;width:100%;padding-top:56.25%;background:#0b1020}
.classvid .vframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.classvid .vtitle{padding:14px 18px;font-weight:600;color:var(--navy);font-size:15.5px}
.lvl{color:inherit;position:relative}
a.go::after{content:"";position:absolute;inset:0;z-index:1}
.lvl:hover{box-shadow:0 12px 34px rgba(31,42,99,.11);transform:translateY(-3px)}
.lvl:hover .go{text-decoration:underline}
@media(max-width:760px){.classvid .vgrid{grid-template-columns:1fr}}

/* ---------- แก้แถวรวมค่าเทอม (กันขาวบนขาว) + ตารางในเนื้อหา ---------- */
.article .wp-block-table{overflow-x:auto}
.article .wp-block-table table{width:100%;border-collapse:collapse;font-size:15px}
.article .wp-block-table td,.article .wp-block-table th{border:1px solid #e2e5ee;padding:11px 13px;text-align:center}
.article .wp-block-table thead th{background:var(--navy);color:#fff;font-weight:600}
.article .wp-block-table tbody tr:nth-child(even) td{background:#f7f8fc}
.article tr.sum td{background:var(--sand)!important;color:var(--navy)!important;font-weight:600}
.article tr.grand td{background:var(--red)!important;color:#fff!important;font-weight:700;font-size:16px}
.article tr.grand td.lh{background:var(--red-d)!important;color:#fff!important}

/* ---------- Footer สารบัญ (ลิงก์หน้าต่าง ๆ) ---------- */
.fmenu-list{list-style:none;margin:0;padding:0;column-count:3;column-gap:28px}
.fmenu-list>li{break-inside:avoid;margin-bottom:14px}
.fmenu-list>li>a{color:#fff;font-weight:600;font-size:14.5px;display:inline-block;margin-bottom:6px}
.fmenu-list .sub-menu{list-style:none;margin:0;padding:0}
.fmenu-list .sub-menu a{color:#a8b2d6;font-size:13.5px;line-height:2;transition:.15s}
.fmenu-list .sub-menu a:hover,.fmenu-list>li>a:hover{color:#fff}
@media(max-width:900px){.fmenu-list{column-count:2}}
@media(max-width:560px){.fmenu-list{column-count:1}}

/* ---------- การ์ดต่าง ๆ: สี + hover + animation ---------- */
.feat,.pstat,.zt-col,.gcard,.vcard,.nitem,.achcard,.ycard{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.feat:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(31,42,99,.12);border-color:var(--navy-l)}
.pstat:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(208,64,47,.16);border-color:var(--red)}
.zt-col{transition:transform .22s ease,box-shadow .22s ease}
.zt-col:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(31,42,99,.10);border-color:var(--navy-l)}
.gcard{transition:transform .3s ease,box-shadow .3s ease}
.gcard:hover{transform:translateY(-5px) scale(1.01);box-shadow:0 16px 34px rgba(31,42,99,.18)}
.gcard img{transition:transform .5s ease}
.gcard:hover img{transform:scale(1.06)}
.vcard:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(31,42,99,.15)}
.classvid .vcard:hover .vtitle{color:var(--red)}
.stat{transition:transform .22s ease,background .22s ease}
.stat:hover{transform:translateY(-4px);background:rgba(255,255,255,.06)}
@media(prefers-reduced-motion:reduce){.feat,.pstat,.zt-col,.gcard,.gcard img,.vcard,.stat,.lvl,.uni-card{transition:none!important;transform:none!important}}

/* ---------- หน้าเครื่องแบบนักเรียน (แทนภาพเบลอด้วย Text + รูปการ์ตูนชุด) ---------- */
.uni-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:18px 0 30px}
.uni-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 16px 16px;text-align:center;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.uni-card:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(31,42,99,.12);border-color:var(--navy-l)}
.uni-card>img{height:210px;width:auto;max-width:100%;margin:0 auto 12px;object-fit:contain}
.uni-card h4{color:var(--navy);font-size:16.5px;margin:0 0 10px;padding-bottom:8px;border-bottom:2px solid var(--sand)}
.uni-items{list-style:none;margin:0;padding:0;text-align:left;font-size:13.8px;color:var(--muted)}
.uni-items li{margin-bottom:5px;line-height:1.5}
.uni-items b{color:var(--navy);font-weight:600;margin-right:5px}
.uni-h{margin-top:36px!important;color:var(--navy)}
@media(max-width:900px){.uni-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.uni-grid{grid-template-columns:1fr}.uni-card>img{height:240px}}

/* ---------- เครื่องหมายถูกสีส้ม (ใช้เหมือนกันทั้งเว็บ) ---------- */
.tick{color:var(--red);font-weight:800;font-size:17px;line-height:1}
.article .wp-block-table td:first-child{text-align:left}

/* ---------- Layout ปฏิทินโรงเรียน (รองรับอัปเดตปี 2569) ---------- */
.cal-note{background:#fff7ed;border:1px solid #f6c99a;color:#9a4a12;border-radius:12px;padding:14px 20px;font-size:15px;font-weight:600;text-align:center;margin:6px 0 26px}
.cal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:8px 0 20px}
.cal-cell{margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;transition:transform .22s ease,box-shadow .22s ease}
.cal-cell:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(31,42,99,.12)}
.cal-cell img{width:100%;height:auto;display:block}
@media(max-width:900px){.cal-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cal-grid{grid-template-columns:1fr}}

/* ---------- แกลเลอรีชีวิตในโรงเรียน (จัดกึ่งกลาง) ---------- */
@media(max-width:1080px){.gal .gcard{flex:0 1 calc(50% - 9px)}}
@media(max-width:600px){.gal .gcard{flex:0 1 100%}}

/* ---------- หน้าวิสัยทัศน์และพันธกิจ ---------- */
.vision-lead{background:var(--cream);border-left:4px solid var(--red);padding:22px 28px;border-radius:0 12px 12px 0;font-size:17px;line-height:1.95;color:var(--ink);margin:6px auto 30px;max-width:820px}
ol.vision-mission{max-width:820px;margin:0 auto;padding-left:26px;line-height:1.9}
ol.vision-mission li{margin-bottom:12px;font-size:16px;padding-left:6px}
ol.vision-mission li::marker{color:var(--red);font-weight:700}

/* ---------- แถบคุกกี้ Complianz: ปรับสีให้เข้าแบรนด์ ---------- */
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept{background:#1F2A63 !important;border-color:#1F2A63 !important;color:#fff !important}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover{background:#2b3a72 !important}
.cmplz-cookiebanner .cmplz-title{color:#1F2A63 !important}
.cmplz-cookiebanner .cmplz-link{color:#1F2A63 !important}
.cmplz-cookiebanner .cmplz-category-toggle{accent-color:#1F2A63 !important}