*{margin:0;padding:0;box-sizing:border-box}
:root{
  --orange:#FF6B1A;--orange-light:#FF8C42;--orange-glow:rgba(255,107,26,0.3);
  --blue:#0EA5E9;--blue-deep:#0369A1;--blue-glow:rgba(14,165,233,0.25);
  --dark:#050A14;--dark2:#0A1628;--dark3:#0F2040;
  --glass:rgba(255,255,255,0.04);--glass2:rgba(255,255,255,0.07);
  --border-o:rgba(255,107,26,0.25);--border-b:rgba(14,165,233,0.2);
  --text:#E8F4FF;--text-dim:rgba(232,244,255,0.55);
}
body{background:var(--dark);color:var(--text);font-family:var(--font-th,'Anuphan'),sans-serif;overflow-x:hidden;min-height:100vh}
.en{font-family:'Space Grotesk',sans-serif}

/* === NEURAL BG === */
#neural-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;opacity:0.35;pointer-events:none}
.bg-gradient{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;
  background:radial-gradient(ellipse 80% 60% at 15% 10%,rgba(14,165,233,0.12) 0%,transparent 60%),
             radial-gradient(ellipse 60% 50% at 85% 80%,rgba(255,107,26,0.1) 0%,transparent 60%),
             radial-gradient(ellipse 40% 40% at 50% 50%,rgba(14,165,233,0.05) 0%,transparent 70%),
             var(--dark);pointer-events:none}

/* === NAV === */
nav{position:sticky;top:0;z-index:100;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  background:rgba(5,10,20,0.88);border-bottom:1px solid var(--border-b);transition:all 0.3s}
.nav-inner{max-width:1280px;margin:0 auto;padding:0 2rem;display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo-badge{width:40px;height:40px;border-radius:calc(10px * var(--radius-scale,1));background:linear-gradient(135deg,var(--orange),var(--blue));
  display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;color:#fff;
  box-shadow:0 0 20px var(--orange-glow),0 0 40px var(--blue-glow);position:relative;overflow:hidden}
.logo-badge::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;
  background:linear-gradient(45deg,transparent 40%,rgba(255,255,255,0.15) 50%,transparent 60%);
  animation:shine 3s infinite}
.logo-image{width:var(--nav-logo-width,40px);height:var(--nav-logo-width,40px);object-fit:contain;flex:0 0 auto}
@keyframes shine{0%{transform:translateX(-100%) rotate(45deg)}100%{transform:translateX(100%) rotate(45deg)}}
.logo-text{display:flex;flex-direction:column}
.logo-name{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18px;
  background:linear-gradient(90deg,var(--orange),var(--blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.logo-name.has-custom{background:none;color:var(--nav-site-name-color,var(--text));-webkit-text-fill-color:var(--nav-site-name-color,var(--text))}
.logo-sub{font-size:9px;color:var(--text-dim);letter-spacing:0.05em;line-height:1;margin-top:2px}
.logo-sub.has-custom{color:var(--nav-site-name-en-color,var(--text-dim))}
.nav-menu{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.nav-item{position:relative;padding:8px 14px;border-radius:calc(8px * var(--radius-scale,1));font-size:13.5px;color:var(--text-dim);
  cursor:pointer;transition:all 0.2s;white-space:nowrap;border:none;background:none;font-family:var(--font-th,'Anuphan'),sans-serif;text-decoration:none;display:inline-block}
.nav-item:hover{color:var(--text);background:var(--glass2)}
.nav-item.active{color:var(--orange)}
.nav-item[data-mega-trigger="institution"]{color:var(--orange);border:1px solid var(--border-o);background:var(--orange-glow)}
.nav-item[data-mega-trigger="institution"]:hover{color:#fff;background:var(--orange)}
.nav-item.active::after{content:'';position:absolute;bottom:4px;left:50%;transform:translateX(-50%);
  width:16px;height:2px;background:var(--orange);border-radius:calc(2px * var(--radius-scale,1))}
.nav-divider{width:1px;height:20px;background:var(--border-b);margin:0 4px}
.nav-quick-links{display:flex;align-items:center;gap:8px;margin-left:12px;flex-shrink:0}
.nav-quick-link{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:calc(8px * var(--radius-scale,1));font-size:12.5px;font-weight:700;text-decoration:none;white-space:nowrap;transition:all .2s;border:1px solid transparent}
.nav-quick-link-primary{background:var(--orange);border-color:var(--orange);color:#fff}
.nav-quick-link-primary:hover{background:#ff8142;border-color:#ff8142;box-shadow:0 0 18px var(--orange-glow)}
.nav-quick-link-outline{background:transparent;border-color:var(--border-o);color:var(--orange)}
.nav-quick-link-outline:hover{background:var(--orange-glow);color:#fff}
.nav-quick-link-gold{background:#d99516;border-color:#d99516;color:#19120a}
.nav-quick-link-gold:hover{background:#f0b33a;border-color:#f0b33a}

/* === TOP UTILITY BAR === */
.topbar{border-bottom:1px solid var(--border-b);background:rgba(5,10,20,0.55)}
.topbar-inner{max-width:1280px;margin:0 auto;padding:0 2rem;min-height:38px;display:flex;align-items:center;
  justify-content:flex-end;gap:4px;flex-wrap:wrap}
.top-link{font-size:12.5px;color:var(--text-dim);text-decoration:none;padding:5px 11px;border-radius:calc(7px * var(--radius-scale,1));
  display:inline-flex;align-items:center;gap:6px;transition:all 0.2s;white-space:nowrap;background:none;border:none;cursor:pointer;font-family:var(--font-th,'Anuphan'),sans-serif}
.top-link:hover{color:var(--text);background:var(--glass2)}
.top-sep{width:1px;height:15px;background:var(--border-b);margin:0 5px}
.top-lang{display:flex;align-items:center;background:var(--glass2);border:1px solid var(--border-b);border-radius:calc(8px * var(--radius-scale,1));overflow:hidden;margin-left:4px}
.top-lang button{border:none;background:none;color:var(--text-dim);font-size:12px;font-weight:600;padding:5px 9px;
  cursor:pointer;font-family:'Space Grotesk',sans-serif;transition:all 0.2s}
.top-lang button.active,.top-lang button.lang-btn--active{background:var(--orange);color:#fff}
.top-search{display:flex;align-items:center;margin-left:6px;border:1px solid var(--border-b);border-radius:calc(8px * var(--radius-scale,1));
  background:var(--glass2);overflow:hidden;transition:all 0.3s}
.top-search input{width:0;padding:0;border:none;outline:none;background:none;color:var(--text);font-size:13px;
  font-family:var(--font-th,'Anuphan'),sans-serif;transition:all 0.3s}
.top-search.open{border-color:var(--orange)}
.top-search.open input{width:160px;padding:6px 10px}
.top-search button{width:32px;height:32px;border:none;background:none;color:var(--text-dim);cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color 0.2s}
.top-search button:hover{color:var(--orange)}
.top-search{position:relative;overflow:visible}
.top-search:not(.open) input{width:0;padding:0}
.top-search.open{border-color:var(--orange)}
.top-search.open input{width:160px;padding:6px 10px}
.top-search-suggestions{display:none;position:absolute;top:calc(100% + 9px);right:0;z-index:80;width:min(430px,calc(100vw - 24px));max-height:min(430px,calc(100vh - 110px));overflow-y:auto;border:1px solid var(--border-b);border-radius:12px;background:var(--dark2);box-shadow:0 18px 34px rgba(0,0,0,.28)}
.top-search-suggestions.has-results{display:block}.top-search-result{display:grid;grid-template-columns:23px minmax(0,1fr) auto;gap:9px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--border-b);color:var(--text);text-decoration:none;transition:background .18s}.top-search-result:last-child{border-bottom:0}.top-search-result:hover{background:var(--glass2)}.top-search-result>i:first-child{color:var(--orange);text-align:center;font-size:12px}.top-search-result span{min-width:0}.top-search-result strong,.top-search-result small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.top-search-result strong{font-size:12px}.top-search-result small{margin-top:2px;color:var(--text-dim);font-size:10.5px}.top-search-result em{font-style:normal;color:var(--orange);font-size:10px;font-weight:700;white-space:nowrap}.top-search-empty{padding:14px;color:var(--text-dim);font-size:12px}.top-search-all{background:var(--orange-glow)}.top-search-all>i:last-child{color:var(--orange);font-size:11px}
@media(max-width:820px){
  .topbar-inner{justify-content:center;padding:6px 1rem}
  .top-link span.lbl{display:none}
  .top-search.open input{width:120px}
}

/* Global search results */
.site-search-page{min-height:65vh;padding:66px 0 86px;background:linear-gradient(180deg,var(--dark2),var(--dark) 430px)}.site-search-hero{max-width:920px;margin:0 auto 34px;text-align:center}.site-search-hero-icon{width:62px;height:62px;display:grid;place-items:center;margin:0 auto 14px;border:1px solid rgba(255,107,26,.45);border-radius:19px;background:var(--orange-glow);color:var(--orange);font-size:25px;box-shadow:0 14px 30px rgba(255,107,26,.15)}.site-search-hero .section-eyebrow{margin-bottom:10px}.site-search-hero h1{margin:0 0 9px;font-size:clamp(28px,4vw,42px);letter-spacing:-.025em}.site-search-hero>p:last-of-type{margin:0;color:var(--text-dim);font-size:15px}.site-result-search-form{display:flex;align-items:center;gap:10px;max-width:820px;margin:24px auto 0;padding:8px 8px 8px 16px;border:1px solid var(--border-b);border-radius:15px;background:var(--glass);box-shadow:0 16px 32px rgba(0,0,0,.15)}.site-result-search-form>i{color:var(--orange)}.site-result-search-form input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-size:15px}.site-result-search-form button{border:0;border-radius:10px;padding:10px 18px;background:var(--orange);color:#fff;font:700 13px var(--font-th,'Anuphan'),sans-serif;cursor:pointer}.site-result-search-form button:hover{filter:brightness(1.08)}.site-search-summary{max-width:960px;margin:0 auto 14px;color:var(--text-dim);font-size:14px}.site-search-summary strong{color:var(--orange)}.site-search-results{max-width:960px;margin:0 auto;display:grid;gap:11px}.site-search-result{display:grid;grid-template-columns:48px minmax(0,1fr) 18px;gap:15px;align-items:center;padding:17px 19px;border:1px solid var(--border-b);border-radius:15px;background:var(--glass);color:var(--text);text-decoration:none;transition:transform .18s,border-color .18s,background .18s}.site-search-result:hover{transform:translateY(-2px);border-color:rgba(255,107,26,.55);background:var(--glass2)}.site-search-result-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:13px;background:var(--orange-glow);color:var(--orange);font-size:18px}.site-search-result-main{min-width:0}.site-search-result-type{display:block;margin-bottom:3px;color:var(--orange);font-size:11px;font-weight:800}.site-search-result-main>strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px}.site-search-result-excerpt{display:-webkit-box;margin-top:4px;overflow:hidden;color:var(--text-dim);font-size:12.5px;line-height:1.55;-webkit-line-clamp:2;-webkit-box-orient:vertical}.site-search-result-main small{display:block;margin-top:5px;color:var(--text-dim);font-size:11px}.site-search-result-arrow{color:var(--orange)}.site-search-empty{max-width:690px;margin:18px auto;padding:42px 25px;border:1px dashed var(--border-b);border-radius:17px;background:var(--glass);text-align:center;color:var(--text-dim)}.site-search-empty i{display:block;margin-bottom:12px;color:var(--orange);font-size:30px}.site-search-empty p{margin:0}@media(max-width:600px){.site-search-page{padding:40px 0 58px}.site-result-search-form{padding-left:12px}.site-result-search-form button{padding:10px 13px}.site-search-result{grid-template-columns:42px minmax(0,1fr);padding:14px}.site-search-result-icon{width:42px;height:42px}.site-search-result-arrow{display:none}.site-search-result-main>strong{font-size:14px}.top-search-suggestions{right:-4px}.top-search-result em{display:none}}
.btn-ai{padding:8px 18px;border-radius:calc(8px * var(--radius-scale,1));border:1px solid var(--orange);background:var(--orange-glow);
  color:var(--orange);font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s;font-family:'Space Grotesk',sans-serif}
.btn-ai:hover{background:var(--orange);color:#fff;box-shadow:0 0 20px var(--orange-glow)}
.btn-ai-caret{font-size:10px;transition:transform 0.3s;display:inline-block}
.btn-ai[aria-expanded="true"]{background:var(--orange);color:#fff}
.btn-ai[aria-expanded="true"] .btn-ai-caret{transform:rotate(180deg)}
/* === เมนูย่อย Dropdown (จากฐานข้อมูลจริง) === */
.nav-item-wrap{position:relative;display:inline-flex;align-items:center}
.nav-caret{font-size:9px;margin-left:5px;transition:transform .25s;display:inline-block;opacity:.8}
.nav-item-wrap:hover .nav-caret,.nav-item-wrap.open .nav-caret{transform:rotate(180deg)}
.nav-dd-toggle{display:none;background:none;border:none;color:inherit;cursor:pointer;font-size:12px}
.nav-dd{position:absolute;top:calc(100% + 8px);left:0;min-width:230px;background:rgba(10,16,28,.97);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--border-b);border-radius:calc(13px * var(--radius-scale,1));
  padding:8px;box-shadow:0 20px 54px rgba(0,0,0,.45);flex-direction:column;gap:2px;z-index:120;display:none}
.nav-dd::before{content:'';position:absolute;top:-10px;left:0;right:0;height:10px}
.nav-item-wrap:hover > .nav-dd,.nav-item-wrap.open > .nav-dd{display:flex}
.nav-dd-item{padding:9px 13px;border-radius:calc(9px * var(--radius-scale,1));font-size:13.5px;color:var(--text-dim);text-decoration:none;white-space:nowrap;transition:background .18s,color .18s;display:flex;align-items:center}
.nav-dd-item:hover{background:var(--glass2);color:var(--text)}
.nav-dd-all{font-weight:700;color:var(--orange);border-bottom:1px solid var(--border-b);border-radius:calc(9px * var(--radius-scale,1)) calc(9px * var(--radius-scale,1)) 0 0;margin-bottom:3px}
.nav-dd>.nav-item-wrap{width:100%;display:flex;align-items:center}
.nav-dd>.nav-item-wrap>.nav-dd-item{flex:1}
.nav-dd>.nav-item-wrap>.nav-dd{top:-8px;left:calc(100% + 6px)}
/* ปุ่ม hamburger (มือถือ) */
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:9px;margin-left:auto}
.nav-toggle span{width:24px;height:2px;background:var(--text);border-radius:calc(2px * var(--radius-scale,1));transition:.25s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:980px){
  .nav-toggle{display:flex}
  .nav-menu{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    background:rgba(8,13,22,.99);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    border-bottom:1px solid var(--border-b);padding:10px;gap:2px;display:none;max-height:82vh;overflow-y:auto;box-shadow:0 24px 50px rgba(0,0,0,.4)}
  .nav-menu.open{display:flex}
  .nav-quick-links{display:none}
  .nav-divider{display:none}
  .nav-item-wrap{flex-direction:column;align-items:stretch;width:100%}
  .nav-dd{position:static;border:none;box-shadow:none;background:var(--glass);min-width:0;padding:4px 4px 4px 18px;border-radius:calc(8px * var(--radius-scale,1))}
  .nav-dd-toggle{display:inline-block;position:absolute;right:6px;top:7px;padding:6px 10px;z-index:2}
}

/* === MEGA MENU: ข้อมูลสถาบัน === */
.mega-backdrop{position:fixed;inset:0;z-index:95;background:rgba(3,7,15,0.5);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity 0.3s,visibility 0.3s}
.mega-backdrop.open{opacity:1;visibility:visible}
.mega{position:fixed;top:64px;left:50%;transform:translateX(-50%) translateY(-12px);z-index:99;
  width:min(1080px,94vw);background:linear-gradient(160deg,var(--panel-1,#0B1426),var(--panel-2,#070D1A));
  border:1px solid var(--border-o);border-radius:calc(18px * var(--radius-scale,1));
  box-shadow:var(--panel-shadow,0 30px 80px rgba(0,0,0,0.55));
  opacity:0;visibility:hidden;transition:opacity 0.32s,transform 0.32s,visibility 0.32s;overflow:hidden}
.mega.open{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega-inner{display:grid;grid-template-columns:1fr 300px}
.mega-main{padding:1.6rem 1.6rem 1.8rem}
.mega-eyebrow{font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--orange);margin-bottom:1rem;display:flex;align-items:center;gap:8px}
.mega-eyebrow::before{content:'';width:22px;height:2px;background:var(--orange)}
.mega-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.mega-item{display:flex;align-items:center;gap:13px;padding:11px 12px;border-radius:calc(12px * var(--radius-scale,1));text-decoration:none;
  border:1px solid transparent;transition:all 0.25s}
.mega-item:hover{background:var(--glass2);border-color:var(--border-b);transform:translateX(3px)}
.mega-ic{width:42px;height:42px;border-radius:calc(11px * var(--radius-scale,1));flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:21px;border:1px solid;transition:transform 0.25s}
.mega-item:hover .mega-ic{transform:scale(1.1) rotate(-5deg)}
.mega-t{font-size:13.5px;font-weight:700;color:var(--text);line-height:1.3}
.mega-d{font-size:11.5px;color:var(--text-dim);line-height:1.4;margin-top:2px}

.mega-side{padding:1.6rem 1.5rem;background:linear-gradient(165deg,rgba(255,107,26,0.07),rgba(14,165,233,0.06));
  border-left:1px solid var(--border-b)}
.mega-campus{margin-bottom:1rem}
.mega-campus-name{font-size:13.5px;font-weight:700;color:var(--text);margin-bottom:3px}
.mega-campus-addr{font-size:12px;color:var(--text-dim);line-height:1.55}
/* บรรทัดเบอร์/แผนที่ของแต่ละวิทยาเขตในแผงติดต่อของเมนูหลัก */
.mega-campus-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:5px}
.mega-campus-meta a{font-size:12px;color:var(--text-dim);text-decoration:none;transition:color .2s}
.mega-campus-meta a:hover{color:var(--orange)}
/* ป้ายข้อความใน Footer ที่ผูกลิงก์ไว้ */
.badge-link{display:inline-block;text-decoration:none;transition:transform .18s ease,filter .18s ease}
.badge-link:hover{transform:translateY(-1px);filter:brightness(1.08)}
.badge-link .badge-small{cursor:pointer}
.mega-campus-name i,.mega-campus-meta a i,.mega-cline i{color:var(--orange);width:15px;text-align:center;font-size:12px}
.mega-cline{display:inline-flex;align-items:center;gap:8px}
.mega-contact{display:flex;flex-direction:column;gap:7px;margin:1rem 0 .4rem;padding:1rem 0 0;
  border-top:1px solid var(--border-b)}
.mega-cline{font-size:13px;color:var(--text-dim);text-decoration:none;transition:color 0.2s}
.mega-cline:hover{color:var(--orange)}
.mega-social{display:flex;gap:10px;margin-top:1rem}
.mega-soc{width:38px;height:38px;border-radius:calc(10px * var(--radius-scale,1));display:flex;align-items:center;justify-content:center;
  color:var(--text-dim);background:var(--glass2);border:1px solid var(--border-b);transition:all 0.25s;
  text-decoration:none;-webkit-text-decoration:none;line-height:1}
.mega-soc,.mega-soc:hover,.mega-soc:focus,.mega-soc:active{text-decoration:none}
.mega-soc:hover{color:#fff;background:var(--orange);border-color:var(--orange);transform:translateY(-3px)}
.mega-soc i{font-size:16px;line-height:1}

@media(max-width:760px){
  .mega-inner{grid-template-columns:1fr}
  .mega-grid{grid-template-columns:1fr}
  .mega-side{border-left:none;border-top:1px solid var(--border-b)}
  .mega{max-height:80vh;overflow-y:auto}
}

/* === HERO === */
.hero{position:relative;min-height:560px;display:flex;align-items:center;justify-content:center;padding:3rem 2rem;z-index:1}
.hero-inner{max-width:1200px;width:100%;margin:0 auto;display:grid;grid-template-columns:1.05fr 1fr;gap:3rem;align-items:center;animation:heroFade 1.2s ease-out}
.hero-left{text-align:center}
.hero-left{display:grid;align-self:center;align-content:center}
.hero-textslide{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity 0.5s ease,transform 0.5s ease,visibility 0.5s;pointer-events:none}
.hero-textslide.active{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.hero-sub{font-size:clamp(0.95rem,1.4vw,1.2rem);font-weight:600;color:var(--text);margin-bottom:1.5rem;line-height:1.4}
.hero-quote{font-size:clamp(0.82rem,1.1vw,0.92rem);color:var(--text-dim);line-height:1.75;
  border-top:3px solid var(--orange);padding:14px 0 0;max-width:520px;margin:0 auto;text-align:center}

/* hero media slider */
.hmedia{position:relative;border-radius:calc(22px * var(--radius-scale,1));overflow:hidden;border:1px solid var(--border-b);
  background:var(--dark2);box-shadow:0 24px 70px rgba(0,0,0,0.42);aspect-ratio:16/10}
.hmedia-track{display:flex;height:100%;transition:transform 0.55s cubic-bezier(0.65,0,0.35,1)}
.hmedia-slide{flex:0 0 100%;height:100%;display:flex;align-items:center;justify-content:center;background:#0a1424}
.hmedia-img{width:100%;height:100%;object-fit:cover;display:block}
.hmedia-video{width:100%;height:100%;position:relative}
.hmedia-video iframe{width:100%;height:100%;border:0;display:block}
.hmedia-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hmedia-video::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,10,20,0.15),rgba(5,10,20,0.55));pointer-events:none;transition:opacity 0.3s}
.hmedia-vlabel{position:absolute;left:18px;bottom:18px;z-index:2;font-weight:700;font-size:15px;color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,0.6);pointer-events:none}
.hmedia-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;
  width:66px;height:66px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:#fff;background:linear-gradient(135deg,#ff2d2d,#cc0000);box-shadow:0 8px 30px rgba(255,0,0,0.4);transition:all 0.25s}
.hmedia-play:hover{transform:translate(-50%,-50%) scale(1.1);box-shadow:0 10px 40px rgba(255,0,0,0.55)}
.hmedia-video.playing::after,.hmedia-video.playing .hmedia-poster,.hmedia-video.playing .hmedia-vlabel,.hmedia-video.playing .hmedia-play{display:none}
.hmedia-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:21px;line-height:1;
  background:rgba(5,10,20,0.6);backdrop-filter:blur(8px);border:1px solid var(--border-b);color:var(--text);transition:all 0.25s}
.hmedia-arrow:hover{background:var(--orange);border-color:var(--orange);color:#fff}
.hmedia-arrow.prev{left:12px}.hmedia-arrow.next{right:12px}
.hmedia-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:5;display:flex;gap:8px}
.hmedia-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,0.35);border:none;cursor:pointer;transition:all 0.3s}
.hmedia-dot:hover{background:rgba(255,255,255,0.6)}
.hmedia-dot.active{width:26px;border-radius:calc(5px * var(--radius-scale,1));background:linear-gradient(90deg,var(--orange),var(--blue))}

@media(max-width:900px){
  .hero{min-height:auto;padding:7rem 1.5rem 3rem}
  .hero-inner{grid-template-columns:1fr;gap:2rem}
  .hero-left{text-align:center}
  .hero-quote{margin:0 auto;border-left:none;border-top:3px solid var(--orange);padding:14px 0 0;text-align:center}
}
.hero-content{max-width:900px;animation:heroFade 1.2s ease-out}
@keyframes heroFade{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.hero-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:calc(100px * var(--radius-scale,1));
  border:1px solid var(--border-b);background:var(--glass);color:var(--blue);font-size:12px;
  font-family:'Space Grotesk',sans-serif;letter-spacing:0.08em;margin-bottom:2rem;animation:pulse-chip 2s infinite}
@keyframes pulse-chip{0%,100%{box-shadow:0 0 0 0 var(--blue-glow)}50%{box-shadow:0 0 0 8px transparent}}
.hero-chip-dot{width:6px;height:6px;border-radius:50%;background:var(--blue);animation:blink 1.5s infinite;flex-shrink:0}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.3}}
.hero-title{font-size:clamp(1.25rem,2vw,1.8rem);font-weight:700;line-height:1.3;margin-bottom:1rem}
.hero-title span{background:linear-gradient(135deg,var(--orange) 0%,var(--orange-light) 40%,var(--blue) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:block}
/* Hero Slide ที่กำหนดสีเองจากแอดมิน: อย่าให้ gradient มาตรฐานทับสีไฮไลต์
   currentColor จะอ่านค่าสีจาก span ที่ renderer ระบุไว้โดยตรง */
.hero-textslide[data-custom-color] .hero-title span{
  background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;
  -webkit-text-fill-color:currentColor!important;display:inline
}
/* รักษาสีหัวข้อหลักที่ผู้ดูแลกำหนดเอง ยกเว้นกรณีระบบสลับไปธีมมืดอัตโนมัติ */
html:not([data-ui-tone="dark"][data-dark-template-auto="1"]) .hero-textslide[data-custom-color] .hero-title{
  color:inherit!important;-webkit-text-fill-color:currentColor!important
}
.hero-desc{font-size:1.1rem;color:var(--text-dim);max-width:600px;margin:0 auto 3rem;line-height:1.8}
.hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.btn-primary{padding:14px 32px;border-radius:calc(12px * var(--radius-scale,1));background:var(--btn-bg,linear-gradient(135deg,var(--orange),var(--orange-light)));
  color:var(--btn-text,#fff);font-weight:600;font-size:15px;border:none;cursor:pointer;transition:all 0.3s;font-family:var(--font-th,'Anuphan'),sans-serif}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px var(--orange-glow)}
.btn-outline{padding:14px 32px;border-radius:calc(12px * var(--radius-scale,1));border:1px solid var(--border-b);
  background:var(--glass);color:var(--blue);font-weight:600;font-size:15px;cursor:pointer;transition:all 0.3s;font-family:var(--font-th,'Anuphan'),sans-serif}
.btn-outline:hover{background:var(--blue-glow);transform:translateY(-2px)}

/* === HERO FEATURE BAR (แถบแยก 4 จุดเด่น) === */
.hero-features-band{position:relative;z-index:1;padding:0 2rem;margin:-2.5rem 0 1rem}
.hero-features{display:flex;align-items:stretch;flex-wrap:nowrap;justify-content:center;
  max-width:1180px;margin:0 auto;border-radius:calc(18px * var(--radius-scale,1));overflow:hidden;
  background:var(--glass);border:1px solid var(--border-b);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 18px 50px rgba(0,0,0,0.28)}
.hero-feat{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:13px;padding:18px 22px;
  position:relative;text-align:left;transition:background 0.3s}
.hero-feat:not(:last-child)::after{content:'';position:absolute;right:0;top:20%;height:60%;width:1px;background:var(--border-b)}
.hero-feat:hover{background:var(--glass2)}
.hero-feat-icon{width:42px;height:42px;border-radius:calc(11px * var(--radius-scale,1));flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:20px;background:rgba(14,165,233,0.12);border:1px solid var(--border-b);color:var(--blue);transition:all 0.3s}
.hero-feat:hover .hero-feat-icon{transform:scale(1.08);background:rgba(14,165,233,0.18)}
.hero-feat-text{display:flex;flex-direction:column;line-height:1.4;min-width:0}
.hero-feat-text b{font-size:13.5px;font-weight:700;color:var(--text);white-space:nowrap}
.hero-feat-text span{font-size:12px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:860px){
  .hero-features-band{margin-top:-1rem;padding:0 1.2rem}
  .hero-features{flex-wrap:wrap}
  .hero-feat{flex:1 1 45%}
  .hero-feat:nth-child(2)::after{display:none}
  .hero-feat-text b,.hero-feat-text span{white-space:normal}
}
@media(max-width:480px){
  .hero-feat{flex:1 1 100%}
  .hero-feat::after{display:none}
  .hero-feat:not(:last-child){border-bottom:1px solid var(--border-b)}
}
/* === Hero: จัดข้อความ ชิดซ้าย/กึ่งกลาง === */
.hero-align-left .hero-left{text-align:left;justify-items:start}
.hero-align-left .hero-textslide{align-items:flex-start}
.hero-align-center .hero-left{text-align:center;justify-items:center}
/* === Hero: พื้นหลังจากปกสไลด์ (เปลี่ยนตามสไลด์) === */
.hero-bgcover{overflow:hidden}
.hero-bg-layer{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;opacity:.20;transition:background-image .6s ease,opacity .6s ease}
.hero-bgcover .hero-bg-layer::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,7,14,.5),rgba(4,7,14,.85))}
.hero-bgcover .hero-inner{position:relative;z-index:2}
.hero-bgcover .orb{z-index:1}
/* === Hero feature: เป็นลิงก์ + รูปวงกลม === */
a.hero-feat{text-decoration:none}
.hero-feat-icon img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.hero-feat-icon:has(img){border-radius:50%;padding:0;overflow:hidden;background:var(--dark3)}
/* แถบ feature แบบกริด (กำหนดคอลัมน์เอง) — ไม่ต้องมีเส้นคั่น */
.hero-features-grid{flex-wrap:wrap}
.hero-features-grid .hero-feat{flex:none}
.hero-features-grid .hero-feat::after{display:none}

/* 3D FLOATING ORBS */
.orb{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;animation:float 8s ease-in-out infinite}
.orb1{width:300px;height:300px;background:rgba(255,107,26,0.08);top:10%;left:-5%;animation-delay:0s}
.orb2{width:400px;height:400px;background:rgba(14,165,233,0.07);top:20%;right:-10%;animation-delay:-3s}
.orb3{width:200px;height:200px;background:rgba(255,107,26,0.06);bottom:20%;left:30%;animation-delay:-6s}
@keyframes float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-30px) scale(1.05)}}

/* === STATS BAR === */
.stats-bar{position:relative;z-index:1;padding:0 2rem;margin-bottom:1px}
.stats-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--border-b);border:1px solid var(--border-b);border-radius:calc(16px * var(--radius-scale,1));overflow:hidden}
.stat-item{background:var(--dark2);padding:1.5rem 2rem;text-align:center;position:relative;overflow:hidden;transition:background 0.3s}
.stat-item::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--orange),transparent);opacity:0;transition:opacity 0.3s}
.stat-item:hover{background:rgba(14,165,233,0.05)}
.stat-item:hover::before{opacity:1}
.stat-num{font-family:'Space Grotesk',sans-serif;font-size:2rem;font-weight:700;
  background:linear-gradient(135deg,var(--orange),var(--blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.stat-label{font-size:12.5px;color:var(--text-dim);margin-top:4px}

/* === SECTION === */
section{position:relative;z-index:1;padding:5rem 2rem}
.theme-content-section{background:var(--dark);color:var(--text)}
.container{max-width:1280px;margin:0 auto}
.section-header{margin-bottom:3rem}
.section-tag{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:600;letter-spacing:0.15em;
  text-transform:uppercase;color:var(--orange);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.section-tag::before{content:'';width:24px;height:2px;background:var(--orange);display:inline-block}
.section-title{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;margin-bottom:0.5rem;color:var(--rs-text,var(--text))}
.section-sub{color:var(--rs-muted,var(--text-dim));font-size:15px}

/* === MAIN SERVICES === */
.main-services{display:grid;grid-template-columns:repeat(var(--svc-cols,2),minmax(0,1fr));gap:20px}
.main-svc-card{border-radius:calc(20px * var(--radius-scale,1));overflow:hidden;position:relative;cursor:pointer;
  border:1px solid var(--border-b);transition:all 0.4s;background:var(--dark2)}
.main-svc-card:hover{transform:translateY(-6px);border-color:var(--orange)}
.main-svc-card::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity 0.4s;pointer-events:none}
.main-svc-card.lib::before{background:radial-gradient(ellipse at top left,rgba(255,107,26,0.12),transparent 60%)}
.main-svc-card.tech::before{background:radial-gradient(ellipse at top right,rgba(14,165,233,0.12),transparent 60%)}
.main-svc-card:hover::before{opacity:1}
/* diagonal-cut photo */
.main-svc-card{min-height:392px}
.svc-bg{position:absolute;top:0;right:0;width:55%;height:100%;z-index:1;
  background-size:cover;background-position:center;clip-path:polygon(22% 0,100% 0,100% 100%,0 100%);transition:transform 6s ease}
.main-svc-card:hover .svc-bg{transform:scale(1.06)}
.svc-bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,var(--dark2) 6%,rgba(11,20,36,0.78) 38%,rgba(11,20,36,0.32) 68%,transparent 88%)}
.svc-inner{position:relative;z-index:2;width:82%;padding-right:0.5rem}
.main-svc-card .svc-header{display:block}
.svc-header .svc-head-row{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.svc-head-text .svc-tag{margin-bottom:5px}
.svc-head-text .svc-title{margin-bottom:0}
@media(max-width:1200px){
  .main-services.svc-cols-4,.main-services.svc-cols-5,.main-services.svc-cols-6{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:992px){
  .main-services:not(.svc-cols-1){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:768px){
  .main-services{grid-template-columns:1fr}
  .main-svc-card{min-height:0}
  .svc-bg{width:100%;height:180px;clip-path:polygon(0 0,100% 0,100% 74%,0 100%)}
  .svc-bg::after{background:linear-gradient(180deg,rgba(11,20,36,0.2),var(--dark2) 88%)}
  .svc-inner{width:100%}
  .svc-inner .svc-header{padding-top:160px}
}
.svc-header{padding:2rem 2rem 1.5rem;display:flex;align-items:flex-start;gap:16px}
.svc-icon-big{width:60px;height:60px;border-radius:calc(16px * var(--radius-scale,1));display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0}
.svc-icon-big.lib{background:rgba(255,107,26,0.12);border:1px solid rgba(255,107,26,0.3)}
.svc-icon-big.tech{background:rgba(14,165,233,0.1);border:1px solid rgba(14,165,233,0.25)}
.svc-tag{font-size:10px;font-family:'Space Grotesk',sans-serif;font-weight:600;letter-spacing:0.1em;
  padding:3px 10px;border-radius:calc(100px * var(--radius-scale,1));margin-bottom:8px;display:inline-block}
.svc-tag.lib{background:rgba(255,107,26,0.15);color:var(--orange)}
.svc-tag.tech{background:rgba(14,165,233,0.12);color:var(--blue)}
.svc-title{font-size:1.4rem;font-weight:700;margin-bottom:6px;color:#E8F4FF}
.svc-desc{font-size:13.5px;color:rgba(232,244,255,.72);line-height:1.7}
.svc-features{padding:0 2rem 2rem}
.svc-feat-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid rgba(255,255,255,0.06);font-size:13.5px;color:var(--text-dim)}
.feat-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.feat-dot.lib{background:var(--orange)}
.feat-dot.tech{background:var(--blue)}
.svc-action{padding:0 2rem 2rem;display:flex;justify-content:space-between;align-items:center}
.svc-link{font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px;
  text-decoration:none;transition:gap 0.2s}
.svc-link.lib{color:var(--orange)}
.svc-link.tech{color:var(--blue)}
.svc-link:hover{gap:10px}
.svc-3d-badge{font-family:'Space Grotesk',sans-serif;font-size:10px;padding:4px 10px;border-radius:calc(6px * var(--radius-scale,1));font-weight:500}
.svc-3d-badge.lib{background:rgba(255,107,26,0.08);border:1px solid rgba(255,107,26,0.2);color:var(--orange)}
.svc-3d-badge.tech{background:rgba(14,165,233,0.06);border:1px solid rgba(14,165,233,0.18);color:var(--blue)}

/* === SUB SERVICES === */
.sub-services{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:16px}
.sub-svc{border-radius:calc(14px * var(--radius-scale,1));padding:1.25rem;background:var(--dark2);border:1px solid var(--border-b);
  cursor:pointer;transition:all 0.3s;position:relative;overflow:hidden;text-decoration:none;color:var(--text);display:block}
.sub-svc::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--orange),var(--blue));transform:scaleX(0);transition:transform 0.3s;transform-origin:left}
.sub-svc:hover{border-color:var(--border-o);transform:translateY(-3px)}
.sub-svc:hover::after{transform:scaleX(1)}
.sub-svc-icon{width:64px;height:64px;border-radius:50%;overflow:hidden;margin-bottom:14px;
  border:2px solid var(--border-o);box-shadow:0 0 20px rgba(255,107,26,0.12);transition:all 0.35s}
.sub-svc-icon img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 4s ease}
.sub-svc:hover .sub-svc-icon{border-color:var(--orange);box-shadow:0 0 26px rgba(255,107,26,0.3);transform:scale(1.05)}
.sub-svc:hover .sub-svc-icon img{transform:scale(1.12)}
.sub-svc-title{font-size:12.5px;font-weight:600;line-height:1.4;color:var(--text)}
.sub-svc-desc{font-size:11.5px;color:var(--text-dim);margin-top:4px;line-height:1.5}

/* === MENU CARDS === */
.menu-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.menu-card{border-radius:calc(16px * var(--radius-scale,1));padding:1.5rem;background:var(--dark2);border:1px solid var(--border-b);
  cursor:pointer;transition:all 0.3s;text-decoration:none;position:relative;overflow:hidden;display:block}
.menu-card:hover{border-color:var(--orange);transform:translateY(-4px);box-shadow:0 12px 40px rgba(255,107,26,0.1)}
.menu-card-icon{width:44px;height:44px;border-radius:calc(12px * var(--radius-scale,1));display:flex;align-items:center;justify-content:center;
  font-size:20px;margin-bottom:14px;transition:transform 0.3s}
.menu-card:hover .menu-card-icon{transform:scale(1.1) rotate(-5deg)}
.menu-card-title{font-size:14px;font-weight:700;margin-bottom:4px;color:var(--text)}
.menu-card-desc{font-size:12px;color:var(--text-dim);line-height:1.5}
.menu-card-arrow{position:absolute;bottom:1rem;right:1rem;opacity:0;transition:opacity 0.2s;color:var(--orange);font-size:16px}
.menu-card:hover .menu-card-arrow{opacity:1}
.mc-o{background-image:radial-gradient(ellipse at top right,rgba(255,107,26,0.08),transparent)}
.mc-b{background-image:radial-gradient(ellipse at top right,rgba(14,165,233,0.07),transparent)}

/* === NAV HUB — ปุ่มลอย + Drawer === */
.navhub-btn{position:fixed;top:50%;right:0;transform:translateY(-50%);z-index:115;
  display:flex;flex-direction:column;align-items:center;gap:5px;padding:15px 11px;cursor:pointer;
  border:1px solid var(--navhub-bg-1,var(--border-o));border-right:none;border-radius:calc(16px * var(--radius-scale,1)) 0 0 calc(16px * var(--radius-scale,1));color:var(--navhub-text-color,#fff);
  background:linear-gradient(140deg,var(--navhub-bg-1,var(--orange)),var(--navhub-bg-2,var(--blue)));
  box-shadow:-6px 0 26px rgba(255,107,26,0.3);transition:all 0.3s;font-family:var(--font-th,'Anuphan'),sans-serif;
  animation:navhubPulse 2.4s ease-in-out infinite}
@keyframes navhubPulse{0%,100%{box-shadow:-6px 0 26px rgba(255,107,26,0.28)}50%{box-shadow:-6px 0 30px rgba(14,165,233,0.4)}}
.navhub-btn:hover{padding-right:16px;box-shadow:-9px 0 34px rgba(255,107,26,0.45)}
.navhub-btn svg{transition:transform 0.3s}
.navhub-btn:hover svg{transform:scale(1.12) rotate(-6deg)}
.navhub-btn-label{font-size:11px;font-weight:700;letter-spacing:0.04em}
.navhub-btn.hidden{opacity:0;visibility:hidden;transform:translateY(-50%) translateX(30px)}

.navhub-backdrop{position:fixed;inset:0;z-index:118;background:rgba(3,7,15,0.55);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity 0.35s,visibility 0.35s}
.navhub-backdrop.open{opacity:1;visibility:visible}

.navhub-drawer{position:fixed;top:0;right:0;height:100%;width:392px;max-width:88vw;z-index:120;
  background:linear-gradient(160deg,var(--panel-1,#0A1426),var(--panel-2,#070D1A));border-left:1px solid var(--border-o);
  box-shadow:-22px 0 60px var(--panel-shadow-side,rgba(0,0,0,0.5));transform:translateX(105%);
  transition:transform 0.42s cubic-bezier(0.4,0,0.2,1);display:flex;flex-direction:column;
  padding:1.6rem 1.4rem;overflow-y:auto}
.navhub-drawer.open{transform:translateX(0)}
.navhub-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:1.4rem;
  padding-bottom:1.2rem;border-bottom:1px solid var(--border-b)}
.navhub-title{font-size:1.3rem;font-weight:700;line-height:1.3}
.navhub-sub{font-size:12.5px;color:var(--text-dim);margin-top:5px}
.navhub-close{flex-shrink:0;width:38px;height:38px;border-radius:calc(10px * var(--radius-scale,1));border:1px solid var(--border-b);
  background:var(--glass2);color:var(--text);font-size:22px;line-height:1;cursor:pointer;transition:all 0.2s}
.navhub-close:hover{border-color:var(--orange);color:var(--orange);background:rgba(255,107,26,0.08);transform:rotate(90deg)}
.navhub-list{display:flex;flex-direction:column;gap:12px}
.navhub-list .menu-card{display:grid;grid-template-columns:auto 1fr;column-gap:15px;align-items:center;
  padding:1rem 1.2rem}
.navhub-list .menu-card-icon{grid-row:1 / 3;grid-column:1;margin-bottom:0;align-self:center}
.navhub-list .menu-card-title{grid-column:2;align-self:end;margin-bottom:2px}
.navhub-list .menu-card-desc{grid-column:2;align-self:start}
.navhub-list .menu-card-arrow{bottom:auto;top:50%;transform:translateY(-50%)}
@media(max-width:560px){.navhub-btn-label{display:none}.navhub-btn{padding:14px 10px}}
/* กลุ่มผู้ใช้ในลิ้นชัก Navigation Hub — แสดงทุกขนาดจอ (เดสก์ท็อปก็เห็นเหมือนกัน) */
.navhub-personas{display:block;margin:0 0 1.2rem;padding-bottom:1.2rem;border-bottom:1px solid var(--border-b)}
.navhub-personas-t{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--orange);margin:0 0 10px}
.navhub-personas-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.navhub-persona{display:flex;align-items:center;gap:9px;min-width:0;padding:11px 12px;text-decoration:none;
  border-radius:calc(12px * var(--radius-scale,1));border:1px solid var(--border-b);background:var(--glass2);
  color:var(--text);transition:border-color .18s ease,background .18s ease,transform .18s ease}
.navhub-persona:hover,.navhub-persona:focus-visible{border-color:var(--orange);background:rgba(255,107,26,.09);transform:translateY(-2px)}
.navhub-persona-ic{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;font-size:15px;line-height:1;
  border-radius:calc(9px * var(--radius-scale,1));background:rgba(14,165,233,.12);border:1px solid rgba(14,165,233,.22)}
.navhub-persona-ic img,.navhub-persona-ic svg{width:17px;height:17px;object-fit:contain}
.navhub-persona-lb{flex:1 1 auto;min-width:0;font-size:12.5px;font-weight:700;line-height:1.35;overflow-wrap:anywhere}
@media(max-width:360px){.navhub-personas-grid{grid-template-columns:1fr}}

/* === NEWS === */
.news-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px}
.news-main{border-radius:calc(20px * var(--radius-scale,1));overflow:hidden;background:var(--dark2);border:1px solid var(--border-b);
  cursor:pointer;transition:all 0.3s;position:relative}
.news-main:hover{border-color:var(--blue);transform:translateY(-3px)}
.news-main-img{aspect-ratio:16/9;background:linear-gradient(135deg,var(--dark3),rgba(14,165,233,0.15));
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.news-main-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 5s ease}
.news-main:hover .news-main-img img{transform:scale(1.06)}
.news-main-img::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 55%,var(--dark2));pointer-events:none}
.news-badge{position:absolute;top:1rem;left:1rem;padding:4px 12px;border-radius:calc(100px * var(--radius-scale,1));
  font-size:10px;font-family:'Space Grotesk',sans-serif;font-weight:600;letter-spacing:0.05em;z-index:1}
.news-badge.new{background:var(--orange);color:#fff}
.news-badge.hot{background:var(--blue);color:#fff}
.news-body{padding:1.25rem}
.news-category{font-size:11px;color:var(--orange);font-weight:600;font-family:'Space Grotesk',sans-serif;letter-spacing:0.08em;margin-bottom:8px}
.news-title{font-size:16px;font-weight:700;line-height:1.4;margin-bottom:8px}
.news-meta{font-size:12px;color:var(--text-dim);display:flex;gap:16px}
.news-list{display:flex;flex-direction:column;gap:10px}
.news-item{background:var(--dark2);border-radius:calc(14px * var(--radius-scale,1));padding:1rem;border:1px solid var(--border-b);
  cursor:pointer;transition:all 0.3s;display:flex;gap:12px;align-items:flex-start}
.news-item:hover{border-color:var(--border-o);transform:translateX(4px)}
.news-item-icon{width:88px;aspect-ratio:16/9;border-radius:calc(10px * var(--radius-scale,1));background:var(--glass2);
  overflow:hidden;flex-shrink:0}
.news-item-icon img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 4s ease}
.news-item:hover .news-item-icon img{transform:scale(1.08)}
.news-item-title{font-size:13px;font-weight:600;line-height:1.4;margin-bottom:4px}
.news-item-meta{font-size:11px;color:var(--text-dim)}

/* === DASHBOARD === */
.dashboard-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.dash-card{border-radius:calc(14px * var(--radius-scale,1));padding:1.25rem;background:var(--dark2);border:1px solid var(--border-b);position:relative;overflow:hidden}
.dash-card::before{content:'';position:absolute;top:0;right:0;width:60px;height:60px;border-radius:50%;opacity:0.15;pointer-events:none}
.dash-c1::before{background:var(--orange)}
.dash-c2::before{background:var(--blue)}
.dash-c3::before{background:var(--orange)}
.dash-c4::before{background:var(--blue)}
.dash-label{font-size:12px;color:var(--text-dim);margin-bottom:8px}
.dash-num{font-family:'Space Grotesk',sans-serif;font-size:1.8rem;font-weight:700}
.dash-num.orange{color:var(--orange)}
.dash-num.blue{color:var(--blue)}
.dash-trend{font-size:11px;margin-top:4px;display:flex;align-items:center;gap:4px}
.trend-up{color:#22c55e}.trend-down{color:#ef4444}
.dash-chart{height:40px;display:flex;align-items:flex-end;gap:3px;margin-top:10px}
.bar-mini{border-radius:calc(2px * var(--radius-scale,1)) calc(2px * var(--radius-scale,1)) 0 0;flex:1;min-height:4px;opacity:0.7}
.usage-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.usage-card{border-radius:calc(14px * var(--radius-scale,1));padding:1.25rem;background:var(--dark2);border:1px solid var(--border-b)}
.usage-title{font-size:13px;font-weight:600;margin-bottom:12px;color:var(--text)}
.usage-bar-wrap{margin-bottom:10px}
.usage-bar-label{display:flex;justify-content:space-between;font-size:12px;color:var(--text-dim);margin-bottom:6px}
.usage-bar{height:6px;background:var(--glass2);border-radius:calc(3px * var(--radius-scale,1));overflow:hidden}
.usage-fill{height:100%;border-radius:calc(3px * var(--radius-scale,1));transition:width 1.2s ease}
.usage-fill.orange{background:linear-gradient(90deg,var(--orange-light),var(--orange))}
.usage-fill.blue{background:linear-gradient(90deg,var(--blue),var(--blue-deep))}
.usage-fill.mixed{background:linear-gradient(90deg,var(--orange),var(--blue))}

/* === HIGHLIGHT (หัวข้อซ้ายภาพพื้นหลัง + ขวา 2 คอลัมน์) === */
.hl-wrap{display:grid;grid-template-columns:0.9fr 1.5fr;gap:20px;align-items:stretch}
.hl-head{position:relative;border-radius:calc(20px * var(--radius-scale,1));overflow:hidden;border:1px solid var(--border-o);
  padding:2.4rem 2rem;display:flex;flex-direction:column;justify-content:center;min-height:420px}
.hl-head .bgimg{position:absolute;inset:0;z-index:0}
.hl-head .bgimg img{width:100%;height:100%;object-fit:cover;transform:scale(1.05)}
.hl-head::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(150deg,rgba(6,11,20,0.82),rgba(6,11,20,0.92))}
.hl-head>*{position:relative;z-index:2}
.hl-eyebrow{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:600;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--orange);display:flex;align-items:center;gap:9px;margin-bottom:16px}
.hl-eyebrow::before{content:'';width:26px;height:2px;background:var(--orange)}
.hl-head h2{font-size:2rem;font-weight:700;line-height:1.2;margin-bottom:14px}
.hl-head h2 b{font-weight:700;background:linear-gradient(90deg,var(--orange),var(--blue));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hl-head p{font-size:13.5px;color:var(--text-dim);line-height:1.75;margin-bottom:20px}
.hl-more{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:10px 20px;border-radius:calc(10px * var(--radius-scale,1));
  background:linear-gradient(135deg,var(--orange),#ff8c42);color:#fff;font-weight:700;font-size:13.5px;text-decoration:none;
  box-shadow:0 8px 24px rgba(255,107,26,0.25);transition:all 0.3s}
.hl-more:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(255,107,26,0.4)}
.hl-list{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hl-card{position:relative;border-radius:calc(16px * var(--radius-scale,1));overflow:hidden;border:1px solid var(--border-b);background:var(--dark2);
  transition:all 0.35s;min-height:200px;cursor:pointer}
.hl-card:hover{transform:translateY(-5px);border-color:var(--orange);box-shadow:0 16px 44px rgba(0,0,0,0.4)}
.hl-card .ph{position:absolute;inset:0;z-index:0}
.hl-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform 5s ease}
.hl-card:hover .ph img{transform:scale(1.08)}
.hl-card::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(4,7,14,0.95) 16%,rgba(4,7,14,0.4) 55%,transparent)}
.hl-card .bd{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:1.2rem}
.hl-card.feat{grid-column:1/3;min-height:170px}
.hl-card.feat .bd{justify-content:center}
.hl-tag{align-self:flex-start;font-family:'Space Grotesk',sans-serif;font-size:9.5px;font-weight:600;letter-spacing:0.1em;
  text-transform:uppercase;padding:4px 11px;border-radius:calc(100px * var(--radius-scale,1));margin-bottom:9px}
.hl-tag-o{color:var(--orange);background:var(--orange-glow);border:1px solid var(--border-o)}
.hl-tag-b{color:var(--blue);background:var(--blue-glow);border:1px solid rgba(14,165,233,0.25)}
.hl-title{font-size:13.5px;font-weight:700;line-height:1.4;margin-bottom:5px}
.hl-card.feat .hl-title{font-size:1.15rem}
.hl-desc{font-size:11.5px;color:var(--text-dim);line-height:1.5}
@media(max-width:860px){.hl-wrap{grid-template-columns:1fr}.hl-head{min-height:240px}}
@media(max-width:560px){.hl-list{grid-template-columns:1fr}.hl-card.feat{grid-column:auto}}

/* === SOFTWARE === */
.sw-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.sw-card{border-radius:calc(14px * var(--radius-scale,1));padding:1.25rem;background:var(--dark2);border:1px solid var(--border-b);
  cursor:pointer;transition:all 0.3s;text-align:center}
.sw-card:hover{border-color:var(--blue);transform:translateY(-3px);background:rgba(14,165,233,0.05)}
.sw-icon{font-size:2rem;margin-bottom:10px;display:block}
.sw-name{font-size:13px;font-weight:700;margin-bottom:4px}
.sw-license{font-size:10px;padding:2px 8px;border-radius:calc(100px * var(--radius-scale,1));font-family:'Space Grotesk',sans-serif;display:inline-block;margin-bottom:8px}
.sw-free{background:rgba(34,197,94,0.12);color:#22c55e;border:1px solid rgba(34,197,94,0.25)}
.sw-paid{background:rgba(255,107,26,0.12);color:var(--orange);border:1px solid rgba(255,107,26,0.25)}
.sw-btn{width:100%;padding:7px;border-radius:calc(8px * var(--radius-scale,1));background:var(--glass2);border:1px solid var(--border-b);
  color:var(--text);font-size:11.5px;cursor:pointer;transition:all 0.2s;font-family:var(--font-th,'Anuphan'),sans-serif}
.sw-card:hover .sw-btn{background:var(--blue-glow);border-color:var(--border-b);color:var(--blue)}

/* === WIFI MAP === */
.wifi-tabs{display:flex;gap:10px;margin-bottom:1.4rem;flex-wrap:wrap}
.wifi-tab{display:flex;align-items:center;gap:9px;padding:10px 18px;border-radius:calc(12px * var(--radius-scale,1));background:var(--dark2);
  border:1px solid var(--border-b);color:var(--text-dim);cursor:pointer;font-family:var(--font-th,'Anuphan'),sans-serif;font-size:14px;font-weight:600;transition:all 0.3s}
.wifi-tab:hover{border-color:var(--border-o);color:var(--text)}
.wifi-tab.active{background:linear-gradient(135deg,rgba(255,107,26,0.18),rgba(14,165,233,0.14));border-color:var(--orange);color:var(--text)}
.wifi-tab .dot{width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 8px var(--orange)}
.wifi-panel{display:none;grid-template-columns:1.4fr 1fr;gap:18px}
.wifi-panel.active{display:grid}
.wifi-map{position:relative;border-radius:calc(18px * var(--radius-scale,1));overflow:hidden;border:1px solid var(--border-b);min-height:380px;background:var(--dark2)}
.wifi-map iframe{width:100%;height:100%;min-height:380px;border:0;display:block}
.wifi-mapbar{position:absolute;top:12px;left:12px;z-index:2;display:flex;gap:8px;align-items:center;
  padding:7px 13px;border-radius:calc(100px * var(--radius-scale,1));background:rgba(5,10,20,0.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid var(--border-b);font-size:12px;font-weight:600}
.wifi-mapbar .pin{color:var(--orange)}
.wifi-zones{display:flex;flex-direction:column;gap:10px;max-height:420px;overflow-y:auto;padding-right:4px}
.wifi-zones::-webkit-scrollbar{width:5px}.wifi-zones::-webkit-scrollbar-thumb{background:var(--border-o);border-radius:calc(3px * var(--radius-scale,1))}
.wifi-zone{display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;padding:12px 14px;border-radius:calc(13px * var(--radius-scale,1));
  background:var(--dark2);border:1px solid var(--border-b);transition:all 0.25s}
.wifi-zone:hover{border-color:var(--orange);transform:translateX(4px)}
.wifi-zone-ic{width:40px;height:40px;border-radius:calc(10px * var(--radius-scale,1));display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:rgba(14,165,233,0.12);border:1px solid var(--border-b);color:var(--blue)}
.wifi-zone-name{font-size:13.5px;font-weight:700;line-height:1.3}
.wifi-zone-meta{font-size:11px;color:var(--text-dim);margin-top:3px;font-family:'Space Grotesk',sans-serif}
.wifi-ssid{font-size:10px;font-weight:600;padding:2px 8px;border-radius:calc(6px * var(--radius-scale,1));display:inline-block;margin-top:4px;
  background:rgba(255,107,26,0.12);color:var(--orange);font-family:'Space Grotesk',sans-serif}
.wifi-ssid.edu{background:rgba(14,165,233,0.12);color:var(--blue)}
.wifi-sig{display:flex;flex-direction:column;align-items:center;gap:3px;flex-shrink:0}
.wifi-sig svg{color:#22c55e}
.wifi-sig small{font-size:9px;color:#22c55e;font-family:'Space Grotesk',sans-serif}
.wifi-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:1.2rem;font-size:12px;color:var(--text-dim)}
.wifi-legend span{display:inline-flex;align-items:center;gap:6px}
.wifi-legend .ssid-chip{width:11px;height:11px;border-radius:calc(3px * var(--radius-scale,1))}
@media(max-width:820px){.wifi-panel.active{grid-template-columns:1fr}.wifi-zones{max-height:none}}

/* === MAGAZINE (3D Showcase) === */
.mag-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.mag-card{text-align:center;cursor:pointer;transition:transform 0.4s;background:none;border:none}
.mag-card:hover{transform:none}
.mag-cover{aspect-ratio:3/4;height:auto;border-radius:calc(14px * var(--radius-scale,1));overflow:hidden;position:relative;
  border:1px solid var(--border-b);box-shadow:0 20px 45px rgba(0,0,0,0.5);
  transition:transform 0.4s,box-shadow 0.4s;transform:perspective(900px) rotateY(0)}
.mag-card:hover .mag-cover{transform:perspective(900px) rotateY(-8deg) translateY(-8px);box-shadow:0 28px 60px rgba(255,107,26,0.22)}
.mag-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 5s ease}
.mag-card:hover .mag-cover img{transform:scale(1.06)}
.mag-cover::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(4,7,14,0.5),transparent 55%);pointer-events:none}
.mag-vol{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:2;
  font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:600;letter-spacing:0.12em;
  padding:4px 11px;border-radius:calc(100px * var(--radius-scale,1));background:rgba(5,10,20,0.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,0.2);color:#fff}
.mag-body{padding:1.1rem 0.5rem 0}
.mag-title{font-size:14px;font-weight:700;margin-bottom:4px}
.mag-date{font-size:11px;color:var(--text-dim);margin-bottom:0}
.mag-preview{display:none}
@media(max-width:880px){.mag-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.mag-grid{grid-template-columns:1fr}}

/* === MEDIA (Image Accordion) === */
.media-acc{display:flex;gap:12px;height:340px}
.media-panel{position:relative;flex:1;border-radius:calc(18px * var(--radius-scale,1));overflow:hidden;border:1px solid var(--border-b);
  transition:flex 0.5s cubic-bezier(0.4,0,0.2,1);min-width:0;background:#0a1424}
.media-panel:hover{flex:3.4}
.media-vframe{position:absolute;inset:0}
.media-vframe img.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 6s ease}
.media-panel:hover .media-vframe img.poster{transform:scale(1.08)}
.media-vframe::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(4,7,14,0.92),rgba(4,7,14,0.2) 60%,transparent);transition:opacity 0.3s}
.media-info{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:1.3rem 1.4rem;pointer-events:none}
.media-cat{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:600;letter-spacing:0.06em}
.media-cat.o{color:var(--orange)}.media-cat.b{color:var(--blue)}
.media-ti{font-size:15px;font-weight:700;white-space:nowrap;margin:5px 0 0}
.media-de{font-size:12.5px;color:var(--text-dim);line-height:1.5;opacity:0;max-height:0;overflow:hidden;transition:opacity 0.4s,max-height 0.4s,margin 0.4s}
.media-panel:hover .media-de{opacity:1;max-height:60px;margin-top:5px}
.media-count{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:600;margin-top:7px;display:inline-block;opacity:0;transition:opacity 0.4s}
.media-panel:hover .media-count{opacity:1}
.media-count.o{color:var(--orange)}.media-count.b{color:var(--blue)}
.media-play{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);z-index:4;width:54px;height:54px;border-radius:50%;
  border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,#ff2d2d,#cc0000);box-shadow:0 8px 28px rgba(255,0,0,0.4);transition:transform 0.25s}
.media-panel:hover .media-play{transform:translate(-50%,-50%) scale(1.12)}
.media-vframe.playing::after,.media-vframe.playing .media-play{display:none}
.media-vframe.playing ~ .media-info{display:none}
.media-vframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:5}
@media(max-width:760px){
  .media-acc{flex-direction:column;height:auto}
  .media-panel{height:140px}
  .media-panel:hover{flex:1}
  .media-de{opacity:1;max-height:60px;margin-top:5px}
  .media-count{opacity:1}
  .media-ti{white-space:normal}
}

/* === AI SECTION === */
.ai-section{background:var(--dark2);border-top:1px solid var(--border-b);border-bottom:1px solid var(--border-b)}
.ai-inner{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.ai-visual{position:relative;height:300px;display:flex;align-items:center;justify-content:center}
.ai-ring{position:absolute;border-radius:50%;border:1px solid;animation:spin linear infinite}
.ai-r1{width:200px;height:200px;border-color:rgba(255,107,26,0.3);animation-duration:20s}
.ai-r2{width:280px;height:280px;border-color:rgba(14,165,233,0.2);animation-duration:30s;animation-direction:reverse}
.ai-r3{width:160px;height:160px;border-color:rgba(255,107,26,0.15);animation-duration:15s;animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.ai-core{width:80px;height:80px;border-radius:calc(20px * var(--radius-scale,1));background:linear-gradient(135deg,var(--orange),var(--blue));
  display:flex;align-items:center;justify-content:center;font-size:32px;position:relative;z-index:2;
  box-shadow:0 0 40px var(--orange-glow),0 0 80px var(--blue-glow)}
.ai-dot{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 10px var(--orange)}
.ai-features{display:flex;flex-direction:column;gap:12px;margin-top:1.5rem}
.ai-feat{display:flex;align-items:flex-start;gap:12px;padding:12px;border-radius:calc(12px * var(--radius-scale,1));
  background:var(--glass);border:1px solid var(--border-b);transition:all 0.3s}
.ai-feat:hover{border-color:var(--border-o);background:var(--glass2)}
.ai-feat-icon{width:36px;height:36px;border-radius:calc(10px * var(--radius-scale,1));background:rgba(255,107,26,0.1);
  display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.ai-feat-title{font-size:13.5px;font-weight:600;color:var(--text);margin-bottom:2px}
.ai-feat-text{font-size:13px;color:var(--text-dim);line-height:1.5}

/* === TRICK SERVICE === */
.trick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.trick-card{border-radius:calc(16px * var(--radius-scale,1));padding:1.5rem;background:var(--dark2);border:1px solid var(--border-b);
  cursor:pointer;transition:all 0.3s;position:relative;overflow:hidden}
.trick-card:hover{transform:translateY(-4px);border-color:var(--border-o)}
.trick-card::before{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--orange),var(--blue));transform:scaleX(0);transition:transform 0.3s;transform-origin:left}
.trick-card:hover::before{transform:scaleX(1)}
.trick-icon{width:48px;height:48px;border-radius:calc(12px * var(--radius-scale,1));display:flex;align-items:center;justify-content:center;
  font-size:22px;margin-bottom:14px;border:1px solid var(--border-b)}
.trick-title{font-size:14.5px;font-weight:700;margin-bottom:6px}
.trick-desc{font-size:12.5px;color:var(--text-dim);line-height:1.6}
.trick-count{font-family:'Space Grotesk',sans-serif;font-size:11px;color:var(--text-dim);margin-top:12px;
  padding-top:10px;border-top:1px solid rgba(255,255,255,0.06)}
.trick-count span{color:var(--orange);font-weight:600}

/* === INSIGHT === */
.insight-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.insight-card{border-radius:calc(16px * var(--radius-scale,1));padding:1.5rem;background:var(--dark2);border:1px solid var(--border-b);
  cursor:pointer;transition:all 0.3s;display:flex;gap:1rem}
.insight-card:hover{transform:translateX(4px);background:rgba(14,165,233,0.04)}
.insight-num{font-family:'Space Grotesk',sans-serif;font-size:2.5rem;font-weight:700;
  line-height:1;background:linear-gradient(135deg,var(--orange),var(--blue));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;flex-shrink:0}
.insight-content{flex:1}
.insight-title{font-size:14px;font-weight:700;margin-bottom:6px}
.insight-desc{font-size:12.5px;color:var(--text-dim);line-height:1.6}
.insight-tag{font-size:10px;margin-top:8px;padding:2px 8px;border-radius:calc(100px * var(--radius-scale,1));display:inline-block;
  font-family:'Space Grotesk',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:0.08em}
.insight-tag.o{background:rgba(255,107,26,0.12);color:var(--orange)}
.insight-tag.b{background:rgba(14,165,233,0.1);color:var(--blue)}

/* === FOOTER === */
footer{position:relative;z-index:1;padding:3rem 2rem 2rem;border-top:1px solid var(--border-b);background:var(--dark2)}
.footer-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1.45fr;gap:2rem;margin-bottom:2rem}
.footer-desc{font-size:13px;color:var(--text-dim);line-height:1.7;margin-top:12px;max-width:280px}
.footer-highlights{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.footer-highlights .badge-small{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;font-family:var(--font-th,'Anuphan'),sans-serif;font-size:11px}
.footer-title{font-size:13px;font-weight:700;margin-bottom:1rem;color:var(--orange)}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:8px}
.footer-links li a{font-size:13px;color:var(--text-dim);text-decoration:none;transition:color 0.2s}
.footer-links li a:hover{color:var(--text)}
.footer-empty{font-size:12px;color:var(--text-dim)}
.footer-contact{min-width:0}.footer-contact-block{display:flex;flex-direction:column;gap:5px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--border-b)}.footer-contact-block:last-of-type{margin-bottom:10px}.footer-contact-block strong{font-size:12.5px;color:var(--text)}.footer-contact-block span,.footer-contact-block a{font-size:12px;line-height:1.55;color:var(--text-dim);text-decoration:none}.footer-contact-block a:hover,.footer-social-links a:hover{color:var(--orange)}
.footer-social-links{display:flex;flex-wrap:wrap;gap:6px}.footer-social-links a{display:inline-flex;align-items:center;gap:5px;padding:5px 7px;border:1px solid var(--border-b);border-radius:calc(7px * var(--radius-scale,1));background:var(--glass);font-size:11px;color:var(--text-dim);text-decoration:none}
.footer-bottom{max-width:1280px;margin:0 auto;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,0.06);
  display:flex;justify-content:space-between;align-items:center}
.footer-copy{font-size:12px;color:var(--footer-copy-color,var(--text-dim))}
.footer-badges{display:flex;gap:8px}
.badge-small{padding:4px 10px;border-radius:calc(6px * var(--radius-scale,1));font-size:10px;font-family:'Space Grotesk',sans-serif;font-weight:600}
.badge-small.footer-custom-text{color:var(--footer-text-color)!important}
.badge-o{background:rgba(255,107,26,0.15);color:var(--orange);border:1px solid rgba(255,107,26,0.25)}
.badge-b{background:rgba(14,165,233,0.12);color:var(--blue);border:1px solid rgba(14,165,233,0.2)}
.badge-g{background:rgba(34,197,94,0.12);color:#22c55e;border:1px solid rgba(34,197,94,0.2)}

/* =========================================
   SECTION BACKGROUNDS — คนละสี / ภาพพื้นหลัง
   ========================================= */

/* ── Section: Stats Bar ── */
.stats-bar{
  position:relative;z-index:1;padding:2rem 2rem;margin-bottom:0;
  background:linear-gradient(90deg,#050A18 0%,#08122A 50%,#050A18 100%);
  border-bottom:1px solid rgba(14,165,233,0.15);
}

/* ── Section: Services — Deep navy ── */
#services{
  background:linear-gradient(160deg,#060D1F 0%,#0B1A35 50%,#071220 100%);
  border-top:1px solid rgba(14,165,233,0.15);
  border-bottom:1px solid rgba(14,165,233,0.1);
}

/* ── Section: Menu Hub — Midnight purple-blue ── */
#menu-hub{
  background:linear-gradient(135deg,#08091A 0%,#0D0E2A 40%,#0A1525 100%);
  border-bottom:1px solid rgba(255,107,26,0.1);
  padding-top:0;
}

/* ── Section: News — Image BG (library/books) ── */
#news{
  position:relative;
  background:
    linear-gradient(160deg,rgba(4,8,20,0.92) 0%,rgba(10,22,50,0.88) 60%,rgba(4,8,20,0.95) 100%),
    url('https://images.unsplash.com/photo-1507842217343-583bb7270b66?w=1600&auto=format&fit=crop&q=60') center/cover no-repeat;
  border-top:1px solid rgba(14,165,233,0.2);
  border-bottom:1px solid rgba(14,165,233,0.1);
}

/* ── Section: Dashboard — Dark teal-green tint ── */
#dashboard{
  background:linear-gradient(160deg,#05110F 0%,#071A18 45%,#050E1A 100%);
  border-top:1px solid rgba(14,165,233,0.12);
  border-bottom:1px solid rgba(14,165,233,0.08);
}

/* ── Section: Highlight — Image BG (technology/abstract) ── */
#highlight{
  position:relative;
  background:
    linear-gradient(135deg,rgba(5,10,20,0.93) 0%,rgba(20,8,4,0.88) 50%,rgba(5,10,20,0.95) 100%),
    url('https://images.unsplash.com/photo-1518770660439-4636190af475?w=1600&auto=format&fit=crop&q=60') center/cover no-repeat;
  border-top:1px solid rgba(255,107,26,0.15);
  border-bottom:1px solid rgba(255,107,26,0.08);
  padding-top:0;
}

/* ── Section: LeRT Media — Warm dark amber ── */
#media{
  background:linear-gradient(150deg,#100A04 0%,#1A0F06 40%,#0C1018 100%);
  border-top:1px solid rgba(255,140,66,0.15);
  border-bottom:1px solid rgba(255,107,26,0.08);
}

/* ── Section: TRICK — Image BG (server/datacenter) ── */
#trick{
  position:relative;
  background:
    linear-gradient(160deg,rgba(4,8,22,0.94) 0%,rgba(4,16,32,0.90) 50%,rgba(4,8,22,0.96) 100%),
    url('https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=1600&auto=format&fit=crop&q=60') center/cover no-repeat;
  border-top:1px solid rgba(14,165,233,0.18);
  border-bottom:1px solid rgba(14,165,233,0.08);
}

/* ── Section: Insight — Deep indigo ── */
#insight{
  background:linear-gradient(145deg,#070A1E 0%,#0C0F28 45%,#070C1C 100%);
  border-top:1px solid rgba(99,102,241,0.2);
  border-bottom:1px solid rgba(99,102,241,0.1);
}

/* ── Section: Magazine — Warm charcoal ── */
#magazine{
  background:linear-gradient(155deg,#100C06 0%,#181210 40%,#0A0C14 100%);
  border-top:1px solid rgba(255,107,26,0.12);
  border-bottom:1px solid rgba(255,107,26,0.06);
}

/* ── Section: Software — Image BG (digital/code) ── */
#software{
  position:relative;
  background:
    linear-gradient(160deg,rgba(4,10,20,0.95) 0%,rgba(6,14,28,0.92) 50%,rgba(4,8,18,0.96) 100%),
    url('https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=1600&auto=format&fit=crop&q=60') center/cover no-repeat;
  border-top:1px solid rgba(14,165,233,0.15);
  border-bottom:1px solid rgba(14,165,233,0.08);
}

/* ── AI Section — Image BG (AI/neural) ── */
.ai-section{
  position:relative;
  background:
    linear-gradient(135deg,rgba(8,4,20,0.94) 0%,rgba(4,12,28,0.90) 50%,rgba(20,8,4,0.94) 100%),
    url('https://images.unsplash.com/photo-1677442135703-1787eea5ce01?w=1600&auto=format&fit=crop&q=60') center/cover no-repeat;
  border-top:1px solid rgba(255,107,26,0.2);
  border-bottom:1px solid rgba(14,165,233,0.15);
}

/* ── Footer — สีคุมโดยธีม (theme.php) ให้เหมือน nav อัตโนมัติ ── */

/* Image-bg sections: subtle parallax feel on hover */
#news,#highlight,#trick,#software,.ai-section{
  background-attachment:fixed;
}

/* Section divider glow line */
#services::before,#media::before,#insight::before,#magazine::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:200px;height:1px;
  background:linear-gradient(90deg,transparent,var(--orange),transparent);
  opacity:0.6;
}
#services,#media,#insight,#magazine{position:relative}

/* Override old sec-alt if any remains */
.sec-alt{background:transparent}

/* ── Campus Banner (Full-width image) ── */
.campus-banner{
  position:relative;z-index:1;min-height:360px;
  display:flex;align-items:center;
  background:
    url('https://images.unsplash.com/photo-1523050854058-8df90110c9f1?w=1600&auto=format&fit=crop&q=70') center/cover no-repeat fixed;
  overflow:hidden;
}
.campus-banner-overlay{
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(5,10,20,0.88) 0%,rgba(10,20,40,0.78) 50%,rgba(20,8,4,0.85) 100%);
}
.campus-banner-content{
  position:relative;z-index:1;max-width:1280px;margin:0 auto;padding:4rem 2rem;
}
.campus-tag{
  font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:600;letter-spacing:0.15em;
  text-transform:uppercase;color:var(--blue);margin-bottom:14px;
  display:inline-flex;align-items:center;gap:8px;
  padding:4px 14px;border-radius:calc(100px * var(--radius-scale,1));background:rgba(14,165,233,0.1);border:1px solid rgba(14,165,233,0.25);
}
.campus-title{
  font-size:clamp(2rem,4vw,3.2rem);font-weight:700;line-height:1.15;margin-bottom:1rem;
}
.campus-title span{
  background:linear-gradient(90deg,var(--orange),var(--blue));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.campus-desc{font-size:15px;color:var(--text-dim);max-width:560px;line-height:1.8;margin-bottom:2rem}

/* ── Section padding overrides ── */
#highlight{padding-top:4rem}
#menu-hub{padding-top:3rem}

/* ==================== WELCOME — บริการสำหรับนิสิตใหม่ (7 ด้าน) ==================== */
#welcome{
  position:relative;
  background:linear-gradient(155deg,#06101F 0%,#0A1A38 45%,#081224 100%);
  border-top:1px solid rgba(14,165,233,0.18);
  border-bottom:1px solid rgba(255,107,26,0.1);
}
#welcome::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:200px;height:1px;background:linear-gradient(90deg,transparent,var(--blue),transparent);opacity:0.6;
}
/* ── TAB BAR ── */
.wel-tabs{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 14px;margin-bottom:1.4rem;
  scrollbar-width:thin;scrollbar-color:var(--border-o) transparent}
.wel-tabs::-webkit-scrollbar{height:5px}
.wel-tabs::-webkit-scrollbar-thumb{background:var(--border-o);border-radius:calc(3px * var(--radius-scale,1))}
.wel-tab{flex:0 0 auto;display:flex;align-items:center;gap:9px;padding:10px 16px;border-radius:calc(12px * var(--radius-scale,1));
  background:var(--dark2);border:1px solid var(--border-b);color:var(--text-dim);cursor:pointer;
  font-family:var(--font-th,'Anuphan'),sans-serif;font-size:13px;font-weight:600;white-space:nowrap;transition:all 0.3s}
.wel-tab:hover{border-color:var(--border-o);color:var(--text);transform:translateY(-2px)}
.wel-tab-n{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;width:24px;height:24px;
  border-radius:calc(8px * var(--radius-scale,1));display:flex;align-items:center;justify-content:center;
  background:rgba(14,165,233,0.12);color:var(--blue);transition:all 0.3s}
.wel-tab.active{background:linear-gradient(135deg,rgba(255,107,26,0.18),rgba(14,165,233,0.14));
  border-color:var(--orange);color:var(--text);box-shadow:0 6px 24px rgba(255,107,26,0.12)}
.wel-tab.active .wel-tab-n{background:linear-gradient(135deg,var(--orange),var(--blue));color:#fff}

/* ── SLIDER ── */
.wel-slider{position:relative;border-radius:calc(22px * var(--radius-scale,1));overflow:hidden;border:1px solid var(--border-b);
  background:var(--dark2);box-shadow:0 20px 60px rgba(0,0,0,0.3)}
.wel-viewport{overflow:hidden}
.wel-track{display:flex;transition:transform 0.55s cubic-bezier(0.65,0,0.35,1)}
.wel-slide{flex:0 0 100%;display:grid;grid-template-columns:1fr 1.05fr;min-height:380px}

/* slide visual (image side) */
.wel-visual{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--dark3),#0a1424)}
.wel-visual-img{position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1.05);transition:transform 6s ease}
.wel-slide.is-active .wel-visual-img{transform:scale(1.15)}
.wel-visual::after{content:'';position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(5,10,20,0.35) 0%,rgba(5,10,20,0.15) 45%,rgba(10,22,50,0.55) 100%)}
.wel-visual-num{position:absolute;top:1.4rem;left:1.6rem;z-index:2;font-family:'Space Grotesk',sans-serif;
  font-size:4.5rem;font-weight:700;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,0.45)}
.wel-visual-icon{position:absolute;bottom:1.6rem;left:1.6rem;z-index:2;width:64px;height:64px;border-radius:calc(18px * var(--radius-scale,1));
  display:flex;align-items:center;justify-content:center;font-size:32px;
  background:rgba(5,10,20,0.55);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.18)}

/* slide body (text side) */
.wel-body{padding:2.4rem 2.4rem;display:flex;flex-direction:column;justify-content:center}
.wel-tag{align-self:flex-start;font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--orange);padding:4px 13px;border-radius:calc(100px * var(--radius-scale,1));
  background:rgba(255,107,26,0.12);border:1px solid var(--border-o);margin-bottom:14px}
.wel-stitle{font-size:1.45rem;font-weight:700;line-height:1.35;margin-bottom:1.2rem}
.wel-list{list-style:none;display:flex;flex-direction:column;gap:12px}
.wel-list li{font-size:13.5px;color:var(--text-dim);line-height:1.55;padding-left:24px;position:relative}
.wel-list li::before{content:'';position:absolute;left:0;top:7px;width:9px;height:9px;border-radius:50%;
  background:linear-gradient(135deg,var(--orange),var(--blue));box-shadow:0 0 10px rgba(255,107,26,0.4)}

/* arrows */
.wel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:22px;line-height:1;
  background:rgba(5,10,20,0.6);backdrop-filter:blur(8px);border:1px solid var(--border-b);color:var(--text);
  transition:all 0.25s}
.wel-arrow:hover{background:var(--orange);border-color:var(--orange);color:#fff}
.wel-arrow.prev{left:14px}.wel-arrow.next{right:14px}

/* dots */
.wel-dots{display:flex;justify-content:center;gap:9px;margin-top:1.3rem}
.wel-dot{width:9px;height:9px;border-radius:50%;background:var(--border-b);border:none;cursor:pointer;transition:all 0.3s}
.wel-dot:hover{background:var(--text-dim)}
.wel-dot.active{width:26px;border-radius:calc(5px * var(--radius-scale,1));background:linear-gradient(90deg,var(--orange),var(--blue))}

/* most-used services bar */
.wel-popular{margin-top:1.6rem;border-radius:calc(20px * var(--radius-scale,1));padding:1.6rem 1.5rem;position:relative;overflow:hidden;
  background:linear-gradient(135deg,rgba(255,107,26,0.07),rgba(14,165,233,0.06));border:1px solid var(--border-o)}
.wel-popular-head{display:flex;align-items:center;gap:12px;margin-bottom:1.3rem;flex-wrap:wrap}
.wel-popular-head .tag{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:600;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--orange);padding:4px 14px;border-radius:calc(100px * var(--radius-scale,1));
  background:rgba(255,107,26,0.12);border:1px solid var(--border-o)}
.wel-popular-head h3{font-size:1.05rem;font-weight:700}
.wel-pop-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.wel-pop-item{text-align:center;padding:1.2rem 0.8rem 1rem;border-radius:calc(14px * var(--radius-scale,1));background:var(--dark2);
  border:1px solid var(--border-b);transition:all 0.3s;position:relative}
.wel-pop-item:hover{transform:translateY(-4px);border-color:var(--orange);background:rgba(255,107,26,0.04)}
.wel-pop-rank{position:absolute;top:8px;left:11px;font-family:'Space Grotesk',sans-serif;font-size:11px;
  font-weight:700;color:var(--orange);opacity:0.75}
.wel-pop-icon{font-size:1.9rem;margin-bottom:10px;display:block;line-height:1}
.wel-pop-text{font-size:11.5px;color:var(--text-dim);line-height:1.5;font-weight:500}

/* responsive — เฉพาะ section นิสิตใหม่ */
@media(max-width:860px){
  .wel-slide{grid-template-columns:1fr}
  .wel-visual{min-height:200px}
  .wel-body{padding:1.8rem}
  .wel-arrow{width:38px;height:38px;font-size:19px}
  .wel-arrow.prev{left:8px}.wel-arrow.next{right:8px}
  .wel-pop-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:560px){
  .wel-visual-num{font-size:3.4rem}
  .wel-visual-icon{width:52px;height:52px;font-size:26px}
  .wel-stitle{font-size:1.2rem}
  .wel-pop-grid{grid-template-columns:repeat(2,1fr)}
}

/* === Popular Grid + News Styles (styles-preview.html) === */
.rs-pop-scope,.rs-news-scope{margin-top:0}
.rs-pop-scope .rs-pop-head,.rs-news-scope .rs-pop-head{display:flex;align-items:center;gap:12px;margin-bottom:1.3rem;flex-wrap:wrap}
.rs-pop-scope .rs-pop-tag,.rs-news-scope .rs-pop-tag{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--orange);padding:4px 14px;border-radius:calc(100px * var(--radius-scale,1));background:rgba(255,107,26,0.12);border:1px solid var(--border-o)}
.rs-pop-scope .rs-pop-head h3,.rs-news-scope .rs-pop-head h3{font-size:1.05rem;font-weight:700;margin:0;color:var(--text)}
.rs-pop-scope .rs-pop-desc,.rs-news-scope .rs-pop-desc{font-size:13px;color:var(--text-dim);margin:-0.6rem 0 1.2rem;line-height:1.55}
.rs-pop-scope .popwrap,.rs-news-scope .popwrap{border-radius:calc(20px * var(--radius-scale,1));padding:1.6rem 1.5rem;background:#fff;border:1px solid var(--border-b);box-shadow:0 2px 10px rgba(15,23,42,0.04)}
.rs-pop-scope a,.rs-news-scope a{text-decoration:none;color:inherit}
.rs-pop-scope img,.rs-news-scope img{display:block;width:100%;height:100%;object-fit:cover}
.rs-pop-scope .txt{font-size:11.5px;color:var(--text-dim);line-height:1.5;font-weight:500}
.rs-pop-scope .carousel,.rs-news-scope .carousel{overflow:hidden;position:relative}
.rs-pop-scope .ctrack,.rs-news-scope .ctrack{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
.rs-pop-scope .ctrack::-webkit-scrollbar,.rs-news-scope .ctrack::-webkit-scrollbar{display:none}
.rs-pop-scope .ctrack>.it,.rs-news-scope .ctrack>.it{flex-shrink:0;scroll-snap-align:start}
.rs-pop-scope .cdots,.rs-news-scope .cdots{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:16px}
.rs-pop-scope .cdots .dot,.rs-news-scope .cdots .dot{width:8px;height:8px;border-radius:calc(50px * var(--radius-scale,1));border:none;padding:0;cursor:pointer;background:var(--border-b);transition:.25s}
.rs-pop-scope .cdots .dot:hover,.rs-news-scope .cdots .dot:hover{background:var(--border-o)}
.rs-pop-scope .cdots .dot.active,.rs-news-scope .cdots .dot.active{width:24px;background:linear-gradient(135deg,var(--orange),var(--blue))}
.rs-pop-scope .ctrack>.pg,.rs-news-scope .ctrack>.pg{width:100%;flex-shrink:0;scroll-snap-align:start}
.rs-pop-scope .pgtrack,.rs-news-scope .pgtrack{gap:14px}
.rs-pop-scope .carousel .it,.rs-news-scope .carousel .it{box-shadow:0 1px 4px rgba(15,23,42,.06)}
.rs-pop-scope .carousel .it:hover,.rs-news-scope .carousel .it:hover{box-shadow:0 4px 12px rgba(15,23,42,.08)}
.rs-pop-scope .p3 .bd .txt,.rs-news-scope .p3 .bd .txt{color:#fff}
.rs-pop-scope .p1{gap:12px}
.rs-pop-scope .p1 .it{width:calc((100% - 60px)/6);text-align:center;padding:1.2rem .7rem;border-radius:calc(14px * var(--radius-scale,1));background:#fff;border:1px solid var(--border-b);position:relative;transition:.3s}
.rs-pop-scope .p1 .it:hover{transform:translateY(-4px);border-color:var(--orange)}
.rs-pop-scope .p1 .ph{width:58px;height:58px;border-radius:50%;overflow:hidden;margin:0 auto 10px;border:2px solid var(--border-o);box-shadow:0 0 16px rgba(255,107,26,.12)}
.rs-pop-scope .p1 .it:hover .ph{box-shadow:0 0 22px rgba(255,107,26,.3)}
@media(max-width:880px){.rs-pop-scope .p1 .it{width:calc((100% - 24px)/3)}}@media(max-width:480px){.rs-pop-scope .p1 .it{width:calc((100% - 12px)/2)}}
.rs-pop-scope .p2{gap:12px}
.rs-pop-scope .p2 .it{width:calc((100% - 60px)/6);border-radius:calc(14px * var(--radius-scale,1));overflow:hidden;background:#fff;border:1px solid var(--border-b);transition:.3s;position:relative}
.rs-pop-scope .p2 .it:hover{transform:translateY(-4px);border-color:var(--orange)}
.rs-pop-scope .p2 .ph{aspect-ratio:1/1;position:relative;overflow:hidden}
.rs-pop-scope .p2 .ph img{transition:transform 4s}.rs-pop-scope .p2 .it:hover .ph img{transform:scale(1.1)}
.rs-pop-scope .p2 .bd{padding:.7rem .6rem .9rem;text-align:center}
@media(max-width:880px){.rs-pop-scope .p2 .it{width:calc((100% - 24px)/3)}}@media(max-width:480px){.rs-pop-scope .p2 .it{width:calc((100% - 12px)/2)}}
.rs-pop-scope .p3{gap:12px}
.rs-pop-scope .p3 .it{width:calc((100% - 60px)/6);position:relative;aspect-ratio:3/4;border-radius:calc(14px * var(--radius-scale,1));overflow:hidden;border:1px solid var(--border-b);transition:.3s}
.rs-pop-scope .p3 .it:hover{transform:translateY(-4px);border-color:var(--orange)}
.rs-pop-scope .p3 .it img{position:absolute;inset:0;transition:transform 4s}.rs-pop-scope .p3 .it:hover img{transform:scale(1.1)}
.rs-pop-scope .p3 .it::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(4,7,14,.95) 12%,rgba(4,7,14,.25) 55%,transparent)}
.rs-pop-scope .p3 .bd{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:.8rem .7rem;text-align:center}
@media(max-width:880px){.rs-pop-scope .p3 .it{width:calc((100% - 24px)/3)}}@media(max-width:480px){.rs-pop-scope .p3 .it{width:calc((100% - 12px)/2)}}
.rs-pop-scope .p4{gap:12px}
.rs-pop-scope .p4 .it{width:calc((100% - 12px)/2);display:flex;align-items:center;gap:14px;padding:.7rem .9rem;border-radius:calc(50px * var(--radius-scale,1));background:#fff;border:1px solid var(--border-b);transition:.3s}
.rs-pop-scope .p4 .it:hover{border-color:var(--orange)}
.rs-pop-scope .p4 .ph{width:48px;height:48px;border-radius:50%;overflow:hidden;flex-shrink:0;border:2px solid var(--border-o)}
.rs-pop-scope .p4 .txt{text-align:left;font-size:13px;color:var(--text)}
@media(max-width:640px){.rs-pop-scope .p4 .it{width:100%}}
.rs-pop-scope .p5{gap:14px}
.rs-pop-scope .p5 .it{width:calc((100% - 28px)/3);position:relative;border-radius:calc(16px * var(--radius-scale,1));overflow:hidden;border:1px solid var(--border-b);min-height:120px;display:flex;align-items:center;gap:14px;padding:1rem 1.2rem;background:#fff;transition:.3s}
.rs-pop-scope .p5 .it:hover{transform:translateY(-4px);border-color:var(--orange)}
.rs-pop-scope .p5 .ph{width:56px;height:56px;border-radius:calc(14px * var(--radius-scale,1));overflow:hidden;flex-shrink:0;border:1px solid var(--border-b)}
.rs-pop-scope .p5 .txt{text-align:left;font-size:13px;color:var(--text);position:relative;z-index:2}
@media(max-width:760px){.rs-pop-scope .p5 .it{width:calc((100% - 14px)/2)}}@media(max-width:480px){.rs-pop-scope .p5 .it{width:100%}}
.rs-news-scope .ncat{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.04em;color:var(--orange);background:rgba(255,107,26,.09);border:1px solid rgba(255,107,26,.22);padding:2px 10px;border-radius:calc(100px * var(--radius-scale,1))}
.rs-news-scope .ncat.blue{color:var(--blue);background:rgba(14,165,233,.08);border-color:rgba(14,165,233,.22)}
.rs-news-scope .ndate{font-size:11px;color:var(--text-dim);display:flex;align-items:center;gap:5px}
.rs-news-scope .ntitle{font-size:13.5px;font-weight:700;color:var(--text);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rs-news-scope .nexc{font-size:11.5px;color:var(--text-dim);line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rs-news-scope .n1{gap:14px}
.rs-news-scope .n1 .it{width:calc((100% - 14px)/2);display:flex;gap:14px;padding:.8rem;border-radius:calc(16px * var(--radius-scale,1));overflow:hidden;background:#fff;border:1px solid var(--border-b);transition:.3s}
.rs-news-scope .n1 .it:hover{transform:translateY(-4px);border-color:var(--orange)}
.rs-news-scope .n1 .ph{width:96px;aspect-ratio:1/1;border-radius:calc(12px * var(--radius-scale,1));overflow:hidden;flex-shrink:0;position:relative}
.rs-news-scope .n1 .ph img{transition:transform 4s}.rs-news-scope .n1 .it:hover .ph img{transform:scale(1.08)}
.rs-news-scope .n1 .bd{display:flex;flex-direction:column;gap:5px;min-width:0;justify-content:center}
.rs-news-scope .n1 .meta{display:flex;align-items:center;gap:10px}
@media(max-width:640px){.rs-news-scope .n1 .it{width:100%}}
.rs-news-scope .n3{gap:14px}
.rs-news-scope .n3 .it{width:calc((100% - 28px)/3);position:relative;aspect-ratio:4/3;border-radius:calc(16px * var(--radius-scale,1));overflow:hidden;border:1px solid var(--border-b);transition:.3s}
.rs-news-scope .n3 .it:hover{transform:translateY(-4px)}
.rs-news-scope .n3 .it img{position:absolute;inset:0;transition:transform 4s}.rs-news-scope .n3 .it:hover img{transform:scale(1.08)}
.rs-news-scope .n3 .it::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(10,15,26,.92) 8%,rgba(10,15,26,.3) 55%,transparent)}
.rs-news-scope .n3 .bd{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1rem 1.05rem;display:flex;flex-direction:column;gap:6px}
.rs-news-scope .n3 .ntitle{color:#fff}
.rs-news-scope .n3 .ndate{color:rgba(255,255,255,.75)}
.rs-news-scope .n3 .ncat{background:rgba(255,255,255,.14);backdrop-filter:blur(4px);color:#ffd9c0;border-color:rgba(255,255,255,.25);align-self:flex-start}
@media(max-width:760px){.rs-news-scope .n3 .it{width:calc((100% - 14px)/2)}}@media(max-width:480px){.rs-news-scope .n3 .it{width:100%}}
.rs-news-scope .n4{gap:12px}
.rs-news-scope .n4 .it{width:calc((100% - 12px)/2);display:flex;align-items:center;gap:16px;padding:.9rem 1rem;border-radius:calc(16px * var(--radius-scale,1));background:#fff;border:1px solid var(--border-b);transition:.3s}
.rs-news-scope .n4 .it:hover{border-color:var(--orange)}
.rs-news-scope .n4 .dbox{width:54px;height:54px;border-radius:calc(12px * var(--radius-scale,1));flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(255,107,26,.08),rgba(14,165,233,.07));border:1px solid var(--border-b)}
.rs-news-scope .n4 .dbox .dd{font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:700;color:var(--orange);line-height:1}
.rs-news-scope .n4 .dbox .mm{font-size:10px;color:var(--text-dim);font-weight:600;margin-top:2px}
.rs-news-scope .n4 .bd{display:flex;flex-direction:column;gap:4px;min-width:0}
@media(max-width:760px){.rs-news-scope .n4 .it{width:100%}}
.rs-news-scope .n5{gap:14px}
.rs-news-scope .n5 .it{width:calc((100% - 28px)/3);padding:1.15rem 1.2rem 1.25rem;border-radius:calc(16px * var(--radius-scale,1));background:#fff;border:1px solid var(--border-b);display:flex;flex-direction:column;gap:9px;transition:.3s;position:relative;overflow:hidden}
.rs-news-scope .n5 .it::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--orange),var(--blue));opacity:0;transition:.3s}
.rs-news-scope .n5 .it:hover{border-color:var(--orange)}
.rs-news-scope .n5 .it:hover::before{opacity:1}
.rs-news-scope .n5 .meta{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rs-news-scope .n5 .more{font-size:11px;font-weight:600;color:var(--orange);margin-top:auto}
@media(max-width:760px){.rs-news-scope .n5 .it{width:calc((100% - 14px)/2)}}@media(max-width:480px){.rs-news-scope .n5 .it{width:100%}}
.rs-news-scope .n6{display:grid;grid-template-columns:1fr 1.35fr;gap:14px;align-items:stretch}
.rs-news-scope .n6.rev{grid-template-columns:1.35fr 1fr}
.rs-news-scope .n6 .scol{display:flex;flex-direction:column;min-width:0}
.rs-news-scope .n6 .scol .cdots{margin-top:12px}
.rs-news-scope .n6 .pg{display:flex;flex-direction:column;gap:10px}
.rs-news-scope .n6 .sit{display:flex;align-items:center;gap:12px;padding:.65rem .7rem;border-radius:calc(14px * var(--radius-scale,1));background:#fff;border:1px solid var(--border-b);transition:.3s;box-shadow:0 1px 4px rgba(15,23,42,.06)}
.rs-news-scope .n6 .sit:hover{border-color:var(--orange);box-shadow:0 4px 12px rgba(15,23,42,.08)}
.rs-news-scope .n6 .sit .ph{width:84px;aspect-ratio:4/3;border-radius:calc(10px * var(--radius-scale,1));overflow:hidden;flex-shrink:0}
.rs-news-scope .n6 .sit .bd{display:flex;flex-direction:column;gap:4px;min-width:0}
.rs-news-scope .n6 .sit .ntitle{font-size:12.5px}
.rs-news-scope .n6 .feat{position:relative;border-radius:calc(16px * var(--radius-scale,1));overflow:hidden;border:1px solid var(--border-b);min-height:340px;transition:.3s;box-shadow:0 1px 4px rgba(15,23,42,.06);display:block}
.rs-news-scope .n6 .feat:hover{box-shadow:0 4px 12px rgba(15,23,42,.08)}
.rs-news-scope .n6 .feat img{position:absolute;inset:0;transition:transform 4s}
.rs-news-scope .n6 .feat:hover img{transform:scale(1.06)}
.rs-news-scope .n6 .feat::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(10,15,26,.94) 10%,rgba(10,15,26,.3) 55%,transparent)}
.rs-news-scope .n6 .feat .bd{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.3rem 1.4rem;display:flex;flex-direction:column;gap:8px}
.rs-news-scope .n6 .feat .ntitle{color:#fff;font-size:17px;-webkit-line-clamp:2}
.rs-news-scope .n6 .feat .nexc{color:rgba(255,255,255,.82)}
.rs-news-scope .n6 .feat .ndate{color:rgba(255,255,255,.72)}
.rs-news-scope .n6 .feat .ncat{background:rgba(255,255,255,.14);backdrop-filter:blur(4px);color:#ffd9c0;border-color:rgba(255,255,255,.25);align-self:flex-start}
@media(max-width:760px){.rs-news-scope .n6,.rs-news-scope .n6.rev{grid-template-columns:1fr}.rs-news-scope .n6 .feat{min-height:260px;order:-1}}
.rs-news-scope .n7{display:flex;flex-direction:column;gap:14px}
.rs-news-scope .n7 .feat{display:grid;grid-template-columns:1fr 1fr;border-radius:calc(16px * var(--radius-scale,1));overflow:hidden;background:#fff;border:1px solid var(--border-o);transition:.3s;box-shadow:0 1px 4px rgba(15,23,42,.06)}
.rs-news-scope .n7 .feat:hover{border-color:var(--orange);box-shadow:0 4px 12px rgba(15,23,42,.08)}
.rs-news-scope .n7 .feat .ph{position:relative;min-height:245px;overflow:hidden}
.rs-news-scope .n7 .feat .ph img{position:absolute;inset:0;transition:transform 4s}
.rs-news-scope .n7 .feat:hover .ph img{transform:scale(1.06)}
.rs-news-scope .n7 .feat .bd{padding:1.4rem 1.5rem;display:flex;flex-direction:column;gap:9px;justify-content:center}
.rs-news-scope .n7 .feat .meta{display:flex;align-items:center;gap:10px}
.rs-news-scope .n7 .feat .ntitle{font-size:17px}
.rs-news-scope .n7 .feat .nexc{-webkit-line-clamp:3}
.rs-news-scope .n7 .feat .more{font-size:12px;font-weight:600;color:var(--orange);margin-top:4px}
.rs-news-scope .n7 .pg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rs-news-scope .n7 .rit{display:flex;align-items:center;gap:12px;padding:.65rem .7rem;border-radius:calc(14px * var(--radius-scale,1));background:#fff;border:1px solid var(--border-b);transition:.3s;box-shadow:0 1px 4px rgba(15,23,42,.06)}
.rs-news-scope .n7 .rit:hover{border-color:var(--orange);box-shadow:0 4px 12px rgba(15,23,42,.08)}
.rs-news-scope .n7 .rit .ph{width:84px;aspect-ratio:4/3;border-radius:calc(10px * var(--radius-scale,1));overflow:hidden;flex-shrink:0}
.rs-news-scope .n7 .rit .bd{display:flex;flex-direction:column;gap:4px;min-width:0}
.rs-news-scope .n7 .rit .ntitle{font-size:12.5px}
@media(max-width:760px){.rs-news-scope .n7 .feat{grid-template-columns:1fr}.rs-news-scope .n7 .feat .ph{min-height:190px}.rs-news-scope .n7 .feat .bd{padding:1.1rem 1.2rem}.rs-news-scope .n7 .pg{grid-template-columns:1fr}}
.rs-news-scope .n8 .pg{display:flex;flex-direction:column;gap:12px}
.rs-news-scope .n8 .it{display:flex;align-items:stretch;gap:18px;padding:.8rem;border-radius:calc(16px * var(--radius-scale,1));background:#fff;border:1px solid var(--border-b);transition:.3s;box-shadow:0 1px 4px rgba(15,23,42,.06)}
.rs-news-scope .n8 .it:hover{border-color:var(--orange);box-shadow:0 4px 12px rgba(15,23,42,.08)}
.rs-news-scope .n8 .ph{width:200px;aspect-ratio:16/10;border-radius:calc(12px * var(--radius-scale,1));overflow:hidden;flex-shrink:0}
.rs-news-scope .n8 .ph img{transition:transform 4s}
.rs-news-scope .n8 .it:hover .ph img{transform:scale(1.06)}
.rs-news-scope .n8 .bd{display:flex;flex-direction:column;gap:6px;justify-content:center;min-width:0;padding:.3rem 0}
.rs-news-scope .n8 .meta{display:flex;align-items:center;gap:10px}
.rs-news-scope .n8 .ntitle{font-size:15px}
.rs-news-scope .n8 .more{font-size:11.5px;font-weight:600;color:var(--orange);margin-top:2px}
@media(max-width:640px){.rs-news-scope .n8 .it{flex-direction:column;gap:10px}.rs-news-scope .n8 .ph{width:100%}}
.rs-news-scope .n10{display:flex;flex-direction:column;gap:14px}
.rs-news-scope .n10 .feat{border-radius:calc(16px * var(--radius-scale,1));overflow:hidden;background:#fff;border:1px solid var(--border-b);transition:.3s;box-shadow:0 1px 4px rgba(15,23,42,.06);display:block}
.rs-news-scope .n10 .feat:hover{border-color:var(--orange);box-shadow:0 4px 12px rgba(15,23,42,.08)}
.rs-news-scope .n10 .feat .ph{aspect-ratio:21/8;overflow:hidden}
.rs-news-scope .n10 .feat .ph img{transition:transform 4s}
.rs-news-scope .n10 .feat:hover .ph img{transform:scale(1.06)}
.rs-news-scope .n10 .feat .bd{padding:1.15rem 1.4rem 1.3rem;display:flex;flex-direction:column;gap:8px}
.rs-news-scope .n10 .feat .meta{display:flex;align-items:center;gap:10px}
.rs-news-scope .n10 .feat .ntitle{font-size:17px}
.rs-news-scope .n10 .pg{display:flex;flex-direction:column;gap:10px}
.rs-news-scope .n10 .rit{display:flex;align-items:center;gap:14px;padding:.7rem .8rem;border-radius:calc(14px * var(--radius-scale,1));background:#fff;border:1px solid var(--border-b);transition:.3s;box-shadow:0 1px 4px rgba(15,23,42,.06)}
.rs-news-scope .n10 .rit:hover{border-color:var(--orange);box-shadow:0 4px 12px rgba(15,23,42,.08)}
.rs-news-scope .n10 .rit .ph{width:120px;aspect-ratio:16/10;border-radius:calc(10px * var(--radius-scale,1));overflow:hidden;flex-shrink:0}
.rs-news-scope .n10 .rit .bd{display:flex;flex-direction:column;gap:4px;min-width:0}
.rs-news-scope .n10 .rit .ntitle{font-size:13px}
@media(max-width:640px){.rs-news-scope .n10 .feat .ph{aspect-ratio:16/9}.rs-news-scope .n10 .rit .ph{width:92px}}
.rs-news-scope .n11{gap:14px}
.rs-news-scope .n11 .it{width:calc((100% - 28px)/3);border-radius:calc(16px * var(--radius-scale,1));overflow:hidden;background:#fff;border:1px solid var(--border-b);transition:.3s}
.rs-news-scope .n11 .it:hover{transform:translateY(-4px);border-color:var(--orange)}
.rs-news-scope .n11 .ph{aspect-ratio:16/10;overflow:hidden}
.rs-news-scope .n11 .ph img{transition:transform 4s}
.rs-news-scope .n11 .it:hover .ph img{transform:scale(1.08)}
.rs-news-scope .n11 .bd{padding:.95rem 1rem 1.1rem;display:flex;flex-direction:column;gap:7px}
.rs-news-scope .n11 .meta{display:flex;align-items:center;gap:10px}
@media(max-width:760px){.rs-news-scope .n11 .it{width:calc((100% - 14px)/2)}}@media(max-width:480px){.rs-news-scope .n11 .it{width:100%}}
.rs-news-scope .n12 .pg{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rs-news-scope .n12 .it{display:flex;align-items:stretch;gap:14px;padding:.75rem;border-radius:calc(16px * var(--radius-scale,1));background:#fff;border:1px solid var(--border-b);transition:.3s;box-shadow:0 1px 4px rgba(15,23,42,.06)}
.rs-news-scope .n12 .it:hover{border-color:var(--orange);box-shadow:0 4px 12px rgba(15,23,42,.08)}
.rs-news-scope .n12 .ph{width:150px;aspect-ratio:16/10;border-radius:calc(12px * var(--radius-scale,1));overflow:hidden;flex-shrink:0}
.rs-news-scope .n12 .ph img{transition:transform 4s}
.rs-news-scope .n12 .it:hover .ph img{transform:scale(1.06)}
.rs-news-scope .n12 .bd{display:flex;flex-direction:column;gap:5px;justify-content:center;min-width:0;padding:.2rem 0}
.rs-news-scope .n12 .meta{display:flex;align-items:center;gap:10px}
.rs-news-scope .n12 .ntitle{font-size:13.5px}
.rs-news-scope .n12 .more{font-size:11.5px;font-weight:600;color:var(--orange);margin-top:2px}
@media(max-width:880px){.rs-news-scope .n12 .pg{grid-template-columns:1fr}}
@media(max-width:640px){.rs-news-scope .n12 .it{flex-direction:column;gap:10px}.rs-news-scope .n12 .ph{width:100%}}

/* News Styles: use per-section contrast colors; remove only the main wrapper card border/glow */
.rs-news-scope{color:var(--rs-text,var(--text))}
.rs-news-scope .rs-pop-head h3{color:var(--rs-text,var(--text))}
.rs-news-scope .rs-pop-desc,
.rs-news-scope .txt,
.rs-news-scope .ndate,
.rs-news-scope .nexc{color:var(--rs-card-muted,var(--rs-muted,var(--text-dim)))}
.rs-news-scope .ntitle{color:var(--rs-card-text,var(--rs-text,var(--text)))}
.rs-news-scope .n1 .it,
.rs-news-scope .n4 .it,
.rs-news-scope .n5 .it,
.rs-news-scope .n6 .sit,
.rs-news-scope .n7 .feat,
.rs-news-scope .n7 .rit,
.rs-news-scope .n8 .it,
.rs-news-scope .n10 .feat,
.rs-news-scope .n10 .rit,
.rs-news-scope .n11 .it,
.rs-news-scope .n12 .it{
  background:var(--rs-card-bg,var(--dark2));
  color:var(--rs-card-text,var(--text));
}
.rs-news-scope .popwrap{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
}
.rs-news-scope .n3 .ntitle,
.rs-news-scope .n6 .feat .ntitle{color:#fff}
.rs-news-scope .n3 .ndate,
.rs-news-scope .n6 .feat .ndate{color:rgba(255,255,255,.75)}
.rs-news-scope .n6 .feat .nexc{color:rgba(255,255,255,.82)}
.rs-news-scope .n3 .ncat,
.rs-news-scope .n6 .feat .ncat{
  background:rgba(255,255,255,.14);
  color:#ffd9c0;
  border-color:transparent;
}
.rs-pop-scope .popwrap{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
  color:var(--rs-text,var(--text));
}
.rs-pop-scope .p1 .it,
.rs-pop-scope .p2 .it,
.rs-pop-scope .p4 .it,
.rs-pop-scope .p5 .it{
  background:var(--rs-card-bg,var(--dark2));
  color:var(--rs-card-text,var(--text));
}
.rs-pop-scope .txt{color:var(--rs-card-muted,var(--text-dim))}

/* === Two column slots (Section พิเศษ) === */
.rs-two-col-slots .rs-col-slot{min-width:0}
.rs-col-slot .rs-tabs-embedded{width:100%;min-width:0}
.rs-col-slot .rs-tabs-embedded .rs-preset-head{margin-bottom:16px}
.rs-col-slot .rs-tabs-embedded .rs-tabs{margin-bottom:16px}
.rs-col-empty{min-height:72px;border:1px dashed var(--border-b);border-radius:calc(12px * var(--radius-scale,1));display:flex;align-items:center;justify-content:center;color:var(--text-dim);font-size:13px;padding:16px;text-align:center}
.rs-col-iframe{max-width:100%}
.rs-col-iframe-inner iframe{display:block;width:100%;height:100%;min-height:0;border:0;border-radius:calc(12px * var(--radius-scale,1))}
@media(max-width:760px){.rs-two-col-slots.rs-2col{grid-template-columns:1fr !important}}

/* === SCROLL ANIMATION === */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 0.7s ease,transform 0.7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* === CMS dynamic sections (เสริม) === */
.news-wrap{display:grid;grid-template-columns:1.5fr 1fr;gap:18px}
.rs-card-grid{display:grid;grid-template-columns:repeat(var(--rs-cols,3),minmax(0,1fr));gap:16px}
/* พื้นหลังพารัลแลกซ์ (fixed) — fallback เป็น scroll บนมือถือ (iOS ไม่รองรับ fixed ดี) */
@media(max-width:820px){[data-bgfix="1"]{background-attachment:scroll !important}}
/* Section พิเศษแบบ 2 คอลัมน์ → เรียงแนวตั้งบนมือถือ */
@media(max-width:760px){.rs-2col{grid-template-columns:1fr !important}}
/* Contact + Map — แท็บวิทยาเขต */
.rs-campus-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.rs-campus-tab{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:calc(100px * var(--radius-scale,1));border:1px solid var(--border-b);background:var(--dark2);color:var(--text-dim);font-size:13.5px;font-weight:700;cursor:pointer;font-family:var(--font-th,'Anuphan'),sans-serif;transition:all .2s}
.rs-campus-tab:hover{border-color:var(--orange);color:var(--text)}
.rs-campus-tab.active{background:linear-gradient(135deg,var(--orange),var(--blue));border-color:transparent;color:#fff}
.rs-campus-panel{display:none}
.rs-campus-panel.active{display:block;animation:rsFade .35s ease}
@keyframes rsFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
/* === Section พิเศษ: Tabs (แต่ละแท็บดึงข้อมูล CMS) === */
.rs-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:24px}
.rs-tab{font-family:var(--font-th,'Anuphan'),sans-serif;cursor:pointer;transition:.25s}
.rs-tabs-underline{border-bottom:1px solid var(--border-b)}
.rs-tabs-underline .rs-tab{padding:11px 18px;background:none;border:none;border-bottom:2px solid transparent;color:var(--text-dim);font-weight:700;font-size:14px;margin-bottom:-1px}
.rs-tabs-underline .rs-tab:hover{color:var(--text)}
.rs-tabs-underline .rs-tab.active{color:var(--orange);border-bottom-color:var(--orange)}
.rs-tabs-pill{gap:8px}
.rs-tabs-pill .rs-tab{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:calc(100px * var(--radius-scale,1));background:var(--dark2);border:1px solid var(--border-b);color:var(--text-dim);font-weight:600;font-size:13.5px}
.rs-tabs-pill .rs-tab:hover{border-color:var(--border-o);color:var(--text)}
.rs-tabs-pill .rs-tab.active{background:linear-gradient(135deg,var(--orange-glow),var(--blue-glow));border-color:var(--orange);color:var(--text)}
.rs-tab-ic{font-size:15px;line-height:1}
.rs-tab-panel{display:none}
.rs-tab-panel.active{display:block;animation:rsFade .35s ease}
.rs-tab-panel .reveal{opacity:1;transform:none}
.rs-tab-empty{padding:42px 24px;text-align:center;color:var(--text-dim);border:1px dashed var(--border-b);border-radius:calc(16px * var(--radius-scale,1))}
/* === Slider (คารูเซลแบบมีปุ่ม + จุด ไม่มีแถบเลื่อน) === */
.rs-slider{position:relative;padding:0 6px}
.rs-slider-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding:4px 2px 6px;scrollbar-width:none;-ms-overflow-style:none}
.rs-slider-track::-webkit-scrollbar{display:none}
.rs-slider .rs-slide{flex:0 0 calc((100% - (var(--rs-cols,3) - 1) * 18px) / var(--rs-cols,3));min-width:0;scroll-snap-align:start;color:var(--text);text-decoration:none;transition:transform .35s ease,box-shadow .35s ease}
.rs-slider .rs-slide:hover{transform:translateY(-4px)}
.rs-slider .rs-slide h3{color:var(--text)}
.rs-slider .rs-slide,.rs-slider .rs-slide *{text-decoration:none}
/* Hero Banner carousel: 1 สไลด์ต่อจอ ไม่มี hover lift */
.rs-slider.rs-banner .rs-slide{flex:0 0 100%}
.rs-slider.rs-banner .rs-slide:hover{transform:none;box-shadow:none}
@media(max-width:980px){.rs-slider:not(.rs-banner):not(.rs-pop-slider) .rs-slide{flex:0 0 calc((100% - 18px) / 2)}}
@media(max-width:600px){.rs-slider:not(.rs-banner):not(.rs-pop-slider) .rs-slide{flex:0 0 100%}}
/* === เอฟเฟกต์ชี้เมาส์ทุก section: ภาพซูมเล็กน้อย + การ์ดยกเบาๆ === */
.rs-card-grid>a,.rs-card-grid>div{transition:transform .3s ease}
.rs-card-grid>a:hover,.rs-card-grid>div:hover{transform:translateY(-5px)}
.rs-card-grid>a img,.rs-card-grid>div img,.rs-slide img,.hl-card img,.rs-card img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.rs-card-grid>a:hover img,.rs-card-grid>div:hover img,.rs-slide:hover img,.hl-card:hover img,.rs-card:hover img{transform:scale(1.07)}
@media(prefers-reduced-motion:reduce){
  .rs-card-grid>a:hover,.rs-card-grid>div:hover{transform:none}
  .rs-card-grid>a:hover img,.rs-card-grid>div:hover img,.rs-slide:hover img,.hl-card:hover img,.rs-card:hover img{transform:none}
}
/* ปุ่มก่อนหน้า / ถัดไป */
.rs-nav{position:absolute;top:calc(50% - 28px);transform:translateY(-50%);z-index:5;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--border-b);background:rgba(15,20,27,.72);color:#fff;display:flex;align-items:center;justify-content:center;
  cursor:pointer;backdrop-filter:blur(6px);box-shadow:0 6px 20px rgba(0,0,0,.28);transition:background .2s,opacity .2s,transform .2s}
.rs-nav:hover{background:var(--orange);transform:translateY(-50%) scale(1.06)}
.rs-nav-prev{left:-10px}
.rs-nav-next{right:-10px}
.rs-nav[disabled]{opacity:.4;pointer-events:none}
/* ซ่อนปุ่มก่อนหน้า/ถัดไป แสดงเมื่อชี้เมาส์ที่สไลด์ (dot ยังแสดงตลอด) */
@media(hover:hover){
  .rs-slider .rs-nav{opacity:0;visibility:hidden}
  .rs-slider:hover .rs-nav{opacity:1;visibility:visible}
  .rs-slider:hover .rs-nav[disabled]{opacity:.4;visibility:visible}
}
@media(max-width:600px){.rs-nav{width:40px;height:40px}.rs-nav-prev{left:-2px}.rs-nav-next{right:-2px}}
/* จุดบอกตำแหน่ง (dots) */
.rs-dots{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:16px;flex-wrap:wrap}
.rs-dot{width:9px;height:9px;border-radius:calc(99px * var(--radius-scale,1));border:0;padding:0;background:rgba(140,140,140,.45);cursor:pointer;transition:width .25s,background .25s}
.rs-dot:hover{background:rgba(140,140,140,.7)}
.rs-dot.active{width:26px;background:var(--orange)}

/* ── ตัวเลื่อนชุดการ์ด (Program Cards เมื่อรายการเกินจำนวนที่ตั้งไว้) ──
   ปุ่มก่อนหน้า/ถัดไปอยู่มุมขวาบนแถวเดียวกับหัวข้อ · จุดอยู่ล่างสุดกึ่งกลาง */
.rs-pager{position:relative}
.rs-pager-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap}
.rs-pager-head>.section-header{flex:1 1 260px;min-width:0;margin-bottom:0}
.rs-pager-nav{flex:0 0 auto;display:flex;gap:9px;margin-bottom:.4rem}
/* ปุ่มในแถบหัวข้อเป็นปุ่มปกติ ไม่ลอยทับสไลด์เหมือน .rs-slider */
.rs-pager .rs-nav{position:static;transform:none;width:40px;height:40px;opacity:1;visibility:visible}
.rs-pager .rs-nav:hover{transform:translateY(-2px)}
.rs-pager .rs-nav[disabled]{opacity:.35}
.rs-pager .rs-slider-track{margin-top:1.6rem;gap:0}
.rs-pager .rs-slide{flex:0 0 100%;min-width:0;scroll-snap-align:start}
.rs-pager .rs-dots{margin-top:20px}
@media(max-width:760px){
  .rs-pager-head{align-items:flex-start}
  .rs-pager-nav{margin-bottom:0;order:2;width:100%;justify-content:flex-end}
  .rs-pager .rs-nav{width:38px;height:38px}
  .rs-pager .rs-slider-track{margin-top:1.1rem}
}
/* === ลิงก์การ์ดใน CMS section: ตัวอักษรสีขาว ไม่มีเส้นใต้ === */
.rs-card-grid>a{color:var(--text);text-decoration:none}
.hl-card{color:#fff;text-decoration:none}
.rs-card-grid>a *,.hl-card *{text-decoration:none}
.rs-card-grid>a h3,.rs-card-grid>a strong{color:var(--text)}
.hl-card .hl-title{color:#fff}
/* === Timeline: วันที่ไทย + ภาพขวา + เส้นไทม์ไลน์ === */
.rs-timeline{position:relative;display:grid;gap:18px;padding-left:36px}
.rs-timeline::before{content:'';position:absolute;left:16px;top:10px;bottom:10px;width:2px;border-radius:calc(2px * var(--radius-scale,1));
  background:linear-gradient(180deg,var(--orange),var(--blue));opacity:.55}
.rs-timeline-row{transition:border-color .2s,transform .2s}
.rs-timeline-row:hover{border-color:var(--orange);transform:translateX(3px)}
.rs-tl-node{position:absolute;left:-27px;top:50%;transform:translateY(-50%);width:15px;height:15px;border-radius:50%;
  background:var(--orange);box-shadow:0 0 0 4px var(--orange-glow);z-index:2;transition:background .2s,box-shadow .2s}
.rs-timeline-row:hover .rs-tl-node{background:var(--blue);box-shadow:0 0 0 5px var(--blue-glow)}
/* หัวลูกศรเล็ก ๆ ชี้จากเส้นเข้าการ์ด */
.rs-timeline-row::before{content:'';position:absolute;left:-9px;top:50%;transform:translateY(-50%);
  border:7px solid transparent;border-right-color:var(--dark2);z-index:1}
@media(max-width:680px){
  .rs-timeline{padding-left:30px}
  .rs-timeline-row{grid-template-columns:1fr !important;gap:10px !important}
  .rs-timeline-row .rs-tl-date{text-align:left !important}
  .rs-timeline-row .rs-tl-img{order:-1}
  .rs-timeline-row .rs-tl-img img{aspect-ratio:16/9 !important}
}
@media(max-width:860px){
  .news-wrap{grid-template-columns:1fr}
  .rs-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .media-acc{flex-direction:column;height:auto !important}
  .media-acc .media-pane{min-height:150px;flex:none !important}
}
@media(max-width:560px){
  .rs-card-grid{grid-template-columns:1fr}
}

/* ═══ MOBILE: ทุก Section ของหน้าแรกต้องอยู่ในกรอบจอ ภาพปกได้สัดส่วนถูกต้อง ═══
   กฎเหล่านี้ทับค่า inline ที่ตัวสร้าง Section ใส่ไว้สำหรับจอใหญ่ */
@media (max-width:900px){
  /* กริดสองคอลัมน์ทุกแบบ (Hero Banner / Featured / About Split / 2 คอลัมน์) */
  .rs-2col,.rs-two-col-slots{grid-template-columns:1fr !important;gap:20px !important}
}
@media (max-width:760px){
  /* ห้ามส่วนใดดันจนเกิดแถบเลื่อนแนวนอน */
  .rs-card-grid,.rs-bento,.hero-features-grid,.news-wrap,.mag-grid,.hl-list{min-width:0}
  .rs-card-grid>*,.rs-bento>*,.news-wrap>*,.hl-list>*{min-width:0}

  /* กริดที่กำหนดจำนวนคอลัมน์ไว้ตายตัว → 1 คอลัมน์ */
  .rs-card-grid{grid-template-columns:1fr !important;gap:14px !important}
  .hero-features-grid{grid-template-columns:1fr !important}
  .rs-bento{grid-template-columns:1fr !important;grid-auto-rows:auto !important}
  .rs-bento>*{grid-column:auto !important;grid-row:auto !important;min-height:200px !important}
  .news-wrap{grid-template-columns:1fr !important}

  /* ภาพปกทุกใบในหน้าแรก — เต็มความกว้าง คงสัดส่วน ไม่บิด ไม่ล้น */
  section img,.rs-card-grid img,.rs-slide img,.hl-card img,.rs-card img,
  .rs-bento img,.hmedia-img,.rs-item-media-icon{max-width:100% !important;height:auto}
  .rs-card-grid>a>img,.rs-card-grid>div>img{aspect-ratio:16/9;object-fit:cover;height:auto !important}
  .rs-bento img{position:absolute;inset:0;width:100%;height:100% !important;object-fit:cover}

  /* สไลด์ทุกชนิดกว้างเท่าจอพอดี */
  .rs-slider{padding:0}
  .rs-slider .rs-slide{flex:0 0 100% !important;min-width:0}
  .rs-slider-track{gap:12px}

  /* รายการข่าวคอลัมน์ข้าง / รายการแบบกะทัดรัด */
  .rs-side-item{grid-template-columns:96px 1fr !important;gap:10px !important}
  .rs-compact-item{grid-template-columns:auto minmax(0,1fr) !important}
  .rs-compact-item>:last-child{grid-column:2 !important;white-space:normal !important;margin-top:3px}

  /* ไทม์ไลน์ */
  .rs-timeline-row{grid-template-columns:1fr !important;gap:10px !important}

  /* หัวข้อ/คำโปรยยาว ๆ ต้องตัดคำได้ ไม่ดันกรอบ */
  .section-title,.hero-title,.hl-card h3,.rs-card-grid h3,.rs-slide h3{overflow-wrap:anywhere}
  .section-sub{max-width:100% !important}

  /* Accordion จาก Page Builder */
  .article-body .pb-acc-p,.menu-page-body .pb-acc-p{padding:6px 10px 12px}
  .article-body .pb-acc-h,.menu-page-body .pb-acc-h{padding:12px 12px;gap:9px}
}
@media (max-width:480px){
  .rs-side-item{grid-template-columns:80px 1fr !important}
  .rs-slider .rs-nav{display:none}
  section{padding-left:14px !important;padding-right:14px !important}
}
/* เนื้อหาจาก Page Builder: ข้อความ auto/gray (bg โปร่งใส) ผูกกับธีมหน้าเว็บ
   ผ่าน --pb-ink จึงอ่านออกทั้งโหมดมืดและสว่างโดยอัตโนมัติ */
.article-body,.menu-page-body{--pb-ink:var(--text);--pb-ink-soft:var(--text-dim)}
.article-body table{border-collapse:collapse;width:100%;margin:1rem 0}
.article-body table td,.article-body table th{border:1px solid var(--border-b);padding:8px 12px}
.article-body img{max-width:100%;border-radius:calc(12px * var(--radius-scale,1))}
.article-body a{color:var(--blue)}
.article-body h2,.article-body h3{margin:1.2rem 0 .6rem}
.menu-page-body table{border-collapse:collapse;width:100%;margin:1rem 0}
.menu-page-body table td,.menu-page-body table th{border:1px solid var(--border-b);padding:8px 12px}
.menu-page-body img,.article-body img{max-width:100%;border-radius:calc(12px * var(--radius-scale,1))}
.menu-page-body a,.article-body a{color:var(--blue)}
/* ลิงก์/ไฟล์แนบในข้อความจาก Page Builder: ไม่มีเส้นใต้สำหรับผู้ใช้ทั่วไป (สัญลักษณ์แสดงเฉพาะฝั่ง admin) */
.menu-page-body a[data-inline-link],.article-body a[data-inline-link]{text-decoration:none}
.menu-page-body h2,.menu-page-body h3,.article-body h2,.article-body h3{margin:1.2rem 0 .6rem}
/* Page Builder output (fragment classes) */
.article-body .ph-img,.menu-page-body .ph-img{display:flex;align-items:center;justify-content:center;min-height:180px;background:var(--dark3);color:var(--text-dim);border-radius:calc(14px * var(--radius-scale,1));flex-direction:column;gap:8px;padding:16px}
.article-body .et-wrap,.menu-page-body .et-wrap{display:flex;flex-wrap:wrap;gap:32px;align-items:center}
.article-body .et-cards,.menu-page-body .et-cards{display:flex;flex-wrap:wrap;gap:24px}
.article-body .et-card,.menu-page-body .et-card{flex:1 1 200px;min-width:200px}
.article-body .file-card,.menu-page-body .file-card{display:inline-flex;align-items:center;gap:14px;padding:16px 20px;border-radius:calc(14px * var(--radius-scale,1));background:var(--dark2);border:1.5px solid var(--border-b);text-decoration:none;color:var(--text);max-width:100%}
.article-body .file-card .ficon,.menu-page-body .file-card .ficon{width:44px;height:44px;border-radius:calc(11px * var(--radius-scale,1));background:var(--dark3);display:grid;place-items:center;flex:0 0 auto}
.article-body .file-card .fname2,.menu-page-body .file-card .fname2{font-weight:600;font-size:15px;word-break:break-word}
.article-body .file-card .fsub,.menu-page-body .file-card .fsub{font-size:12px;color:var(--text-dim);margin-top:3px}
.article-body section,.menu-page-body section{margin:0}
/* Page Builder — แกลเลอรีหลายภาพ (ต้องตรงกับชุดกฎในตัว builder และ export) */
.article-body .pb-gal,.menu-page-body .pb-gal{display:grid;gap:8px;grid-template-columns:1fr 1fr;max-width:100%}
.article-body .pb-gal[data-n="1"],.menu-page-body .pb-gal[data-n="1"]{grid-template-columns:1fr}
.article-body .pb-gal[data-n="3"] .pb-gal-i:first-child,.menu-page-body .pb-gal[data-n="3"] .pb-gal-i:first-child{grid-column:span 2}
.article-body .pb-gal-i,.menu-page-body .pb-gal-i{position:relative;display:block;overflow:hidden;border-radius:calc(var(--pb-gal-r,14px) * var(--radius-scale,1));background:var(--dark3);cursor:pointer;text-decoration:none}
.article-body .pb-gal-i img,.menu-page-body .pb-gal-i img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;border-radius:0;transition:transform .35s ease}
.article-body .pb-gal[data-n="1"] .pb-gal-i img,.article-body .pb-gal[data-n="3"] .pb-gal-i:first-child img,.menu-page-body .pb-gal[data-n="1"] .pb-gal-i img,.menu-page-body .pb-gal[data-n="3"] .pb-gal-i:first-child img{aspect-ratio:16/9}
.article-body .pb-gal-i:hover img,.menu-page-body .pb-gal-i:hover img{transform:scale(1.05)}
.article-body .pb-gal-badge,.menu-page-body .pb-gal-badge{position:absolute;inset:0;display:grid;place-items:center;background:rgba(16,18,32,.55);color:#fff;font-weight:700;font-size:clamp(18px,4vw,30px);line-height:1}
.article-body .pb-gal-more:hover .pb-gal-badge,.menu-page-body .pb-gal-more:hover .pb-gal-badge{background:rgba(16,18,32,.68)}
.article-body .pb-gal-h,.menu-page-body .pb-gal-h{display:none}
/* แกลเลอรีภาพประกอบท้ายข่าว — ภาพเล็กหลายคอลัมน์ แสดงครบทุกภาพ */
.detail-gallery{margin:2rem 0 0}
.detail-gallery-title{display:flex;align-items:center;gap:9px;font-size:1.05rem;font-weight:700;margin:0 0 14px;color:var(--text)}
.detail-gallery-title i{color:var(--orange)}
.detail-gallery-title span{font-size:.8rem;font-weight:500;color:var(--text-dim)}
.pb-gal--thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
.pb-gal--thumbs .pb-gal-i{position:relative;display:block;overflow:hidden;border-radius:calc(10px * var(--radius-scale,1));background:var(--dark3);cursor:pointer}
.pb-gal--thumbs .pb-gal-i img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .3s ease}
.pb-gal--thumbs .pb-gal-i:hover img{transform:scale(1.07)}
@media(max-width:520px){.pb-gal--thumbs{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}}
/* Page Builder — บล็อก "รูป + รายการลิงก์" (ต้องตรงกับชุดกฎในตัว builder และ export) */
.article-body .ll-wrap,.menu-page-body .ll-wrap{display:flex;flex-wrap:wrap;gap:34px;align-items:flex-start}
.article-body .ll-wrap.ll-rev,.menu-page-body .ll-wrap.ll-rev{flex-direction:row-reverse}
.article-body .ll-media,.menu-page-body .ll-media{flex:1 1 300px;min-width:220px}
.article-body .ll-body,.menu-page-body .ll-body{flex:1 1 340px;min-width:240px}
.article-body .ll-eyebrow,.menu-page-body .ll-eyebrow{display:flex;align-items:center;gap:9px;margin:0 0 12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.article-body .ll-eyeico,.menu-page-body .ll-eyeico{display:inline-flex;line-height:1}
.article-body .ll-title,.menu-page-body .ll-title{margin:0 0 20px;font-weight:700;line-height:1.28}
.article-body .ll-list,.menu-page-body .ll-list{display:flex;flex-direction:column;gap:2px}
.article-body .ll-item,.menu-page-body .ll-item{display:flex;align-items:flex-start;gap:12px;padding:11px 14px;border-radius:calc(12px * var(--radius-scale,1));text-decoration:none;transition:background .18s ease,color .18s ease}
.article-body .ll-item:hover,.menu-page-body .ll-item:hover{background:var(--llh-bg,rgba(109,94,252,.1))}
.article-body .ll-ico,.menu-page-body .ll-ico{flex:0 0 auto;display:inline-flex;padding-top:.18em;color:var(--ll-ico,inherit);transition:color .18s ease}
.article-body .ll-text,.menu-page-body .ll-text{flex:1 1 auto;min-width:0;line-height:1.65;color:var(--ll-fg,inherit);transition:color .18s ease}
.article-body .ll-item:hover .ll-text,.article-body .ll-item:hover .ll-ico,.menu-page-body .ll-item:hover .ll-text,.menu-page-body .ll-item:hover .ll-ico{color:var(--llh-fg,inherit)}

/* Page Builder — บล็อก Accordion (ต้องตรงกับชุดกฎในตัว builder และ export) */
.article-body .pb-acc,.menu-page-body .pb-acc{display:flex;flex-direction:column;gap:var(--pb-acc-gap,8px)}
.article-body .pb-acc-i,.menu-page-body .pb-acc-i{border:1px solid var(--pb-acc-bd,#e3e6ee);border-radius:var(--pb-acc-r,12px);overflow:hidden;background:var(--pb-acc-pbg,transparent)}
.article-body .pb-acc-h,.menu-page-body .pb-acc-h{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;background:var(--pb-acc-hbg,#f5f6fb);font-weight:700;line-height:1.5;list-style:none}
.article-body .pb-acc-h::-webkit-details-marker,.menu-page-body .pb-acc-h::-webkit-details-marker{display:none}
.article-body .pb-acc-h::marker,.menu-page-body .pb-acc-h::marker{content:''}
.article-body .pb-acc-t,.menu-page-body .pb-acc-t{flex:1 1 auto;min-width:0}
.article-body .pb-acc-ico,.menu-page-body .pb-acc-ico{flex:0 0 auto;display:inline-flex;color:var(--pb-acc-ic,inherit);transition:transform .22s ease}
.article-body .pb-acc-i[open]>.pb-acc-h .pb-acc-ico,.menu-page-body .pb-acc-i[open]>.pb-acc-h .pb-acc-ico{transform:rotate(180deg)}
.article-body .pb-acc-p,.menu-page-body .pb-acc-p{padding:6px 14px 14px}
.article-body .pb-acc-p>section,.menu-page-body .pb-acc-p>section{border-radius:10px}
/* เครื่องมือของโหมดแก้ไข ต้องไม่หลุดมาแสดงบนหน้าเว็บจริง */
.article-body .pb-acc-add,.menu-page-body .pb-acc-add,
.article-body .pb-acc-tools,.menu-page-body .pb-acc-tools,
.article-body .pb-acc-empty,.menu-page-body .pb-acc-empty,
.article-body .pb-acc-n,.menu-page-body .pb-acc-n{display:none!important}

/* === Masonry Dark (CMS template: masonry_lert) === */
.lert-masonry-dark .lmd-head{
  display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:2.2rem;gap:16px;flex-wrap:wrap
}
.lert-masonry-dark .lmd-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start
}
.lert-masonry-dark .lmd-col{
  display:flex;flex-direction:column;gap:18px
}
.lert-masonry-dark .lmd-col-shift{
  margin-top:42px
}
@media(max-width:860px){
  .lert-masonry-dark .lmd-grid{grid-template-columns:1fr 1fr}
  .lert-masonry-dark .lmd-col-shift{margin-top:0}
}
@media(max-width:560px){
  .lert-masonry-dark .lmd-grid{grid-template-columns:1fr}
}


/* ============================================================
   NAV + TOPBAR + MEGA MENU — ตรงกับดีไซน์อ้างอิง index.html 100%
   (override กฎเดิมด้านบนด้วยลำดับท้ายไฟล์)
   ============================================================ */
/* === NAV === */
nav{position:sticky;top:0;z-index:100;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  background:rgba(5,10,20,0.88);border-bottom:1px solid var(--border-b);transition:all 0.3s}
.nav-inner{max-width:1280px;margin:0 auto;padding:0 2rem;display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo-badge{width:40px;height:40px;border-radius:calc(10px * var(--radius-scale,1));background:linear-gradient(135deg,var(--orange),var(--blue));
  display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;color:#fff;
  box-shadow:0 0 20px var(--orange-glow),0 0 40px var(--blue-glow);position:relative;overflow:hidden}
.logo-badge::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;
  background:linear-gradient(45deg,transparent 40%,rgba(255,255,255,0.15) 50%,transparent 60%);
  animation:shine 3s infinite}
@keyframes shine{0%{transform:translateX(-100%) rotate(45deg)}100%{transform:translateX(100%) rotate(45deg)}}
.logo-text{display:flex;flex-direction:column}
.logo-name{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18px;
  background:linear-gradient(90deg,var(--orange),var(--blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.logo-sub{font-size:9px;color:var(--text-dim);letter-spacing:0.05em;line-height:1;margin-top:2px}
.nav-menu{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.nav-item{position:relative;padding:8px 14px;border-radius:calc(8px * var(--radius-scale,1));font-size:13.5px;color:var(--text-dim);
  cursor:pointer;transition:all 0.2s;white-space:nowrap;border:none;background:none;font-family:var(--font-th,'Anuphan'),sans-serif;text-decoration:none;display:inline-block}
.nav-item:hover{color:var(--text);background:var(--glass2)}
.nav-item.active{color:var(--orange)}
.nav-item.active::after{content:'';position:absolute;bottom:4px;left:50%;transform:translateX(-50%);
  width:16px;height:2px;background:var(--orange);border-radius:calc(2px * var(--radius-scale,1))}
.nav-divider{width:1px;height:20px;background:var(--border-b);margin:0 4px}

/* === TOP UTILITY BAR === */
.topbar{border-bottom:1px solid var(--border-b);background:rgba(5,10,20,0.55)}
.topbar-inner{max-width:1280px;margin:0 auto;padding:0 2rem;min-height:38px;display:flex;align-items:center;
  justify-content:flex-end;gap:4px;flex-wrap:wrap}
.top-link{font-size:12.5px;color:var(--text-dim);text-decoration:none;padding:5px 11px;border-radius:calc(7px * var(--radius-scale,1));
  display:inline-flex;align-items:center;gap:6px;transition:all 0.2s;white-space:nowrap;background:none;border:none;cursor:pointer;font-family:var(--font-th,'Anuphan'),sans-serif}
.top-link:hover{color:var(--text);background:var(--glass2)}
.top-sep{width:1px;height:15px;background:var(--border-b);margin:0 5px}
.top-lang{display:flex;align-items:center;background:var(--glass2);border:1px solid var(--border-b);border-radius:calc(8px * var(--radius-scale,1));overflow:hidden;margin-left:4px}
.top-lang button{border:none;background:none;color:var(--text-dim);font-size:12px;font-weight:600;padding:5px 9px;
  cursor:pointer;font-family:'Space Grotesk',sans-serif;transition:all 0.2s}
.top-lang button.active,.top-lang button.lang-btn--active{background:var(--orange);color:#fff}
.top-search{display:flex;align-items:center;margin-left:6px;border:1px solid var(--border-b);border-radius:calc(8px * var(--radius-scale,1));
  background:var(--glass2);overflow:hidden;transition:all 0.3s}
.top-search input{width:0;padding:0;border:none;outline:none;background:none;color:var(--text);font-size:13px;
  font-family:var(--font-th,'Anuphan'),sans-serif;transition:all 0.3s}
.top-search.open{border-color:var(--orange)}
.top-search.open input{width:160px;padding:6px 10px}
.top-search button{width:32px;height:32px;border:none;background:none;color:var(--text-dim);cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color 0.2s}
.top-search button:hover{color:var(--orange)}
@media(max-width:820px){
  .topbar-inner{justify-content:center;padding:6px 1rem}
  .top-link span.lbl{display:none}
  .top-search.open input{width:120px}
}
.btn-ai{padding:8px 18px;border-radius:calc(8px * var(--radius-scale,1));border:1px solid var(--orange);background:var(--orange-glow);
  color:var(--orange);font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s;font-family:'Space Grotesk',sans-serif}
.btn-ai:hover{background:var(--orange);color:#fff;box-shadow:0 0 20px var(--orange-glow)}
.btn-ai-caret{font-size:10px;transition:transform 0.3s;display:inline-block}
.btn-ai[aria-expanded="true"]{background:var(--orange);color:#fff}
.btn-ai[aria-expanded="true"] .btn-ai-caret{transform:rotate(180deg)}

/* === MEGA MENU SYSTEM === */
.nav-mega-wrap{position:static}
.nav-trigger{display:inline-flex;align-items:center;gap:6px}
.nav-caret{font-size:9px;opacity:.65;transition:transform .3s;display:inline-block}
.nav-trigger[aria-expanded="true"]{color:var(--orange);background:var(--glass2)}
.nav-trigger[aria-expanded="true"] .nav-caret{transform:rotate(180deg);opacity:1}

.mega-backdrop{position:fixed;inset:0;z-index:90;background:rgba(3,7,15,0.5);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity 0.3s,visibility 0.3s}
.mega-backdrop.open{opacity:1;visibility:visible}
.mega{position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(-12px);z-index:120;
  width:min(1080px,95vw);background:linear-gradient(160deg,var(--panel-1,#0B1426),var(--panel-2,#070D1A));
  border:1px solid var(--border-o);border-radius:calc(18px * var(--radius-scale,1));
  box-shadow:var(--panel-shadow,0 30px 80px rgba(0,0,0,0.55));
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity 0.3s,transform 0.3s,visibility 0.3s;overflow:hidden}
.mega.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mega.w-xl{width:min(1200px,96vw)}
.mega-pad{padding:1.5rem 1.7rem 1.7rem}
.mega-eyebrow{font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--orange);margin-bottom:1.1rem;display:flex;align-items:center;gap:8px}
.mega-eyebrow::before{content:'';width:22px;height:2px;background:var(--orange)}

/* column layout — sub-groups */
.mega-cols{columns:3;column-gap:26px}
.mega-cols.cols-2{columns:2}
.mega-cols.cols-4{columns:4}
.mega-col{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;margin-bottom:1.25rem}
.mega-col-head{font-size:11.5px;font-weight:700;color:var(--blue);letter-spacing:.03em;
  display:flex;align-items:center;gap:7px;padding:0 4px 7px;margin-bottom:5px;border-bottom:1px dashed var(--border-b)}
.mega-list{display:flex;flex-direction:column;gap:2px}
.mega-link{display:flex;align-items:center;gap:11px;padding:7px 9px;border-radius:calc(10px * var(--radius-scale,1));text-decoration:none;
  border:1px solid transparent;transition:all .2s}
.mega-link:hover{background:var(--glass2);border-color:var(--border-b);transform:translateX(4px)}
.mega-link-ic{width:30px;height:30px;border-radius:calc(8px * var(--radius-scale,1));display:flex;align-items:center;justify-content:center;
  font-size:15px;flex-shrink:0;border:1px solid var(--border-b);background:var(--glass);transition:transform .2s}
.mega-link:hover .mega-link-ic{transform:scale(1.13) rotate(-6deg)}
.mega-link-t{font-size:12.8px;font-weight:600;color:var(--text);line-height:1.3}

/* horizontal row — กลุ่มย่อยแถวเดียว (เช่น ช่องทางสื่อสาร) */
.mega-row{margin-top:1.1rem;padding-top:1rem;border-top:1px dashed var(--border-b)}
.mega-row .mega-col-head{margin-bottom:8px}
.mega-row-list{display:flex;flex-wrap:wrap;gap:8px}
.mega-row-list .mega-link{flex:1 1 0;min-width:0;justify-content:flex-start}

/* card grid layout */
.mega-inner{display:grid;grid-template-columns:1fr 290px}
.mega-main{padding:1.5rem 1.7rem 1.7rem}
.mega-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.mega-grid.g3{grid-template-columns:repeat(3,1fr)}
.mega-item{display:flex;align-items:center;gap:13px;padding:11px 12px;border-radius:calc(12px * var(--radius-scale,1));text-decoration:none;
  border:1px solid transparent;transition:all 0.25s}
.mega-item:hover{background:var(--glass2);border-color:var(--border-b);transform:translateX(3px)}
.mega-ic{width:42px;height:42px;border-radius:calc(11px * var(--radius-scale,1));flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:21px;border:1px solid;transition:transform 0.25s}
.mega-item:hover .mega-ic{transform:scale(1.1) rotate(-5deg)}
.mega-t{font-size:13.5px;font-weight:700;color:var(--text);line-height:1.3}
.mega-d{font-size:11.5px;color:var(--text-dim);line-height:1.4;margin-top:2px}

.mega-side{padding:1.5rem 1.4rem;background:linear-gradient(165deg,rgba(255,107,26,0.07),rgba(14,165,233,0.06));
  border-left:1px solid var(--border-b)}
.mega-campus{margin-bottom:1rem}
.mega-campus-name{font-size:13.5px;font-weight:700;color:var(--text);margin-bottom:3px}
.mega-campus-addr{font-size:12px;color:var(--text-dim);line-height:1.55}
.mega-contact{display:flex;flex-direction:column;gap:7px;margin:1rem 0 .4rem;padding:1rem 0 0;
  border-top:1px solid var(--border-b)}
.mega-cline{font-size:13px;color:var(--text-dim);text-decoration:none;transition:color 0.2s}
.mega-cline:hover{color:var(--orange)}
.mega-social{display:flex;gap:10px;margin-top:1rem}
.mega-soc{width:38px;height:38px;border-radius:calc(10px * var(--radius-scale,1));display:flex;align-items:center;justify-content:center;
  color:var(--text-dim);background:var(--glass2);border:1px solid var(--border-b);transition:all 0.25s;
  text-decoration:none;-webkit-text-decoration:none;line-height:1}
.mega-soc,.mega-soc:hover,.mega-soc:focus,.mega-soc:active{text-decoration:none}
.mega-soc:hover{color:#fff;background:var(--orange);border-color:var(--orange);transform:translateY(-3px)}

@media(max-width:1100px){
  .mega-inner{grid-template-columns:1fr}
  .nav-menu{display:none}
}

/* Keep every desktop navigation item on one line.  At notebook/tablet-wide
   widths the previous flexible row could wrap the final “ข้อมูลสถาบัน”
   trigger onto a second line.  Compact only the horizontal spacing before
   the existing mobile breakpoint; labels and their order remain unchanged. */
@media (min-width:1101px) and (max-width:1500px){
  .nav-inner{padding-left:1rem;padding-right:1rem}
  .nav-menu{flex:1 1 auto;min-width:0;justify-content:flex-end;gap:0;flex-wrap:nowrap}
  .nav-item{padding:7px 9px;font-size:12.5px}
  .nav-trigger{gap:4px}
  .btn-ai{padding:7px 12px;font-size:12.5px}
  .nav-divider{margin:0 2px}
}

/* === MENU PAGE (page.php) === */
.menu-page{padding:2rem 0 4rem;position:relative;z-index:1}
.menu-page-wrap{max-width:1160px}
.menu-page-empty{text-align:center;padding:4rem 1rem}
.menu-page-empty h1{font-size:1.5rem;margin-bottom:10px}
.menu-page-empty p{color:var(--text-dim);margin-bottom:1.4rem}

.menu-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:12px 16px;margin-bottom:1.4rem;
  background:var(--dark2);border:1px solid var(--border-b);border-radius:calc(12px * var(--radius-scale,1));font-size:13px}
.menu-crumbs a{color:var(--blue);text-decoration:none;transition:color .2s}
.menu-crumbs a:hover{color:var(--orange)}
.menu-crumbs-sep{color:var(--text-dim);opacity:.5;font-size:11px}
.menu-crumbs-current{color:var(--text);font-weight:600}

.menu-page-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:28px;align-items:start}
.menu-page-main{min-width:0}
.menu-page-head{display:flex;gap:16px;align-items:flex-start;margin-bottom:1.4rem}.menu-page-head-copy{min-width:0;flex:1}
.menu-page-head-icon{width:52px;height:52px;border-radius:calc(14px * var(--radius-scale,1));flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:24px;background:var(--glass2);border:1px solid var(--border-b)}
.menu-type-badge{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--orange);background:rgba(255,107,26,.1);border:1px solid rgba(255,107,26,.25);padding:3px 9px;border-radius:calc(999px * var(--radius-scale,1));margin-bottom:8px}
.menu-page-title{font-size:clamp(1.35rem,2.8vw,1.85rem);line-height:1.25;margin-bottom:6px}
.menu-page-desc{color:var(--text-dim);font-size:15px;line-height:1.6;max-width:640px}

.menu-page-cover{margin:0 0 1.4rem;border-radius:calc(16px * var(--radius-scale,1));overflow:hidden;border:1px solid var(--border-b)}
.menu-page-cover img{width:100%;display:block}
.menu-page-cover--video iframe{width:100%;aspect-ratio:16/9;border:0;display:block}

.menu-page-body{line-height:1.85;font-size:15px}
.menu-page-empty-note{color:var(--text-dim);font-style:italic;padding:1.2rem;border:1px dashed var(--border-b);border-radius:calc(12px * var(--radius-scale,1))}

/* Policy / announcement document page */
.policy-page{display:grid;gap:18px;max-width:820px}
.policy-page-intro{display:flex;align-items:center;gap:16px;padding:20px 22px;border:1px solid var(--border-b);border-radius:calc(16px * var(--radius-scale,1));background:linear-gradient(135deg,var(--orange-glow),var(--dark2) 62%)}
.policy-page-intro-icon{display:grid;place-items:center;width:48px;height:48px;flex:0 0 48px;border-radius:calc(13px * var(--radius-scale,1));color:var(--orange);font-size:21px;background:var(--dark3);border:1px solid rgba(255,107,26,.22)}
.policy-page-kicker{margin:0 0 2px;color:var(--orange);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.policy-page-intro h2{margin:0;color:var(--text);font-size:1.05rem;line-height:1.45}.policy-page-intro p:last-child{margin:3px 0 0;color:var(--text-dim);font-size:13px;line-height:1.55}
.policy-group{overflow:hidden;border:1px solid var(--border-b);border-radius:calc(16px * var(--radius-scale,1));background:var(--dark2)}
.policy-group-head{display:flex;align-items:center;gap:11px;padding:15px 17px;border-bottom:1px solid var(--border-b);background:var(--glass)}
.policy-group-head i{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--orange-glow);color:var(--orange);font-size:13px}.policy-group-head h2{margin:0;color:var(--text);font-size:15px;line-height:1.45}
.policy-list{display:grid;gap:8px;list-style:none;margin:0;padding:13px}.policy-list li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;padding:10px 11px;border:1px solid transparent;border-radius:10px;color:var(--text-dim);font-size:13.5px;line-height:1.65;transition:background .2s,border-color .2s}.policy-list li:hover{background:var(--glass);border-color:var(--border-b);color:var(--text)}
.policy-list-num{display:grid;place-items:center;width:25px;height:25px;margin-top:1px;border-radius:50%;background:var(--dark3);color:var(--orange);font-size:10px;font-weight:800}.policy-list-text{min-width:0}
.policy-page-note{display:flex;gap:9px;align-items:flex-start;padding:13px 16px;border-radius:12px;border:1px dashed var(--border-b);color:var(--text-dim);font-size:12.5px;line-height:1.65}.policy-page-note i{color:var(--blue);margin-top:3px}
.policy-feature{display:flex;align-items:stretch;gap:0;overflow:hidden;border:1px solid var(--border-b);border-radius:calc(18px * var(--radius-scale,1));background:var(--dark2)}
.policy-feature--reverse{flex-direction:row-reverse}.policy-feature-media{width:42%;min-height:300px;flex:0 0 42%;background:var(--dark3)}.policy-feature-media img{width:100%;height:100%;object-fit:cover;display:block}
.policy-feature-content{padding:25px 24px;min-width:0;flex:1}.policy-feature-kicker{display:flex;align-items:center;gap:8px;margin:0 0 8px;color:var(--orange);font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.policy-feature-kicker i{font-size:13px}
.policy-feature-content h2{margin:0 0 14px;color:var(--text);font-size:clamp(1.05rem,2vw,1.35rem);line-height:1.45}.policy-document-list{display:grid;gap:7px;list-style:none;margin:0;padding:0}.policy-document-list li{margin:0}.policy-document-list a{display:flex;align-items:flex-start;gap:9px;padding:9px 10px;border:1px solid transparent;border-radius:9px;color:var(--text-dim);font-size:13px;line-height:1.58;text-decoration:none;transition:.2s}.policy-document-list a::before{content:'↗';color:var(--orange);font-weight:800;line-height:1.45}.policy-document-list a:hover{background:var(--glass);border-color:var(--border-b);color:var(--text)}
@media(max-width:760px){.policy-feature,.policy-feature--reverse{flex-direction:column}.policy-feature-media{width:100%;min-height:210px;flex-basis:auto}.policy-feature-content{padding:20px 18px}}
@media(max-width:560px){.policy-page-intro{align-items:flex-start;padding:17px}.policy-page-intro-icon{width:42px;height:42px;flex-basis:42px}.policy-list{padding:9px}.policy-list li{padding:9px;font-size:13px}}

.menu-item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.menu-item-card{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:calc(14px * var(--radius-scale,1));text-decoration:none;
  background:var(--dark2);border:1px solid var(--border-b);transition:border-color .2s,transform .2s,background .2s}
.menu-item-card:hover{border-color:rgba(255,107,26,.35);background:var(--glass2);transform:translateY(-2px)}
.menu-item-card-icon{width:42px;height:42px;border-radius:calc(11px * var(--radius-scale,1));display:flex;align-items:center;justify-content:center;
  font-size:20px;background:var(--glass);border:1px solid var(--border-b)}
.menu-item-card-cover{width:100%;height:120px;border-radius:calc(10px * var(--radius-scale,1));overflow:hidden;border:1px solid var(--border-b);position:relative;background:var(--dark3)}
.menu-item-card-cover img{width:100%;height:100%;object-fit:cover;display:block}
.menu-item-card-cover--yt::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.25)}
.menu-item-card-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:28px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.5);pointer-events:none}
.menu-page-head:not(:has(.menu-page-head-icon)){padding-left:0}
.menu-item-card--external .menu-item-card-icon{background:rgba(14,165,233,.1);border-color:rgba(14,165,233,.25)}
.menu-item-card--file .menu-item-card-icon{background:rgba(255,107,26,.1);border-color:rgba(255,107,26,.25)}
.menu-item-card-badge{font-size:10px;font-weight:700;color:var(--blue);letter-spacing:.04em;text-transform:uppercase}
.menu-item-card-title{display:block;color:var(--text);font-size:14.5px;line-height:1.35}
.menu-item-card-desc{margin:4px 0 0;color:var(--text-dim);font-size:12.5px;line-height:1.5}
.menu-item-card-action{margin-top:auto;font-size:12px;font-weight:600;color:var(--orange)}

.menu-page-action-box{padding:1.6rem;border-radius:calc(14px * var(--radius-scale,1));background:var(--dark2);border:1px solid var(--border-b);text-align:center}
.menu-page-action-box p{color:var(--text-dim);margin-bottom:1rem;font-size:14px}
.menu-cta-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:calc(11px * var(--radius-scale,1));font-weight:700;
  font-size:14px;text-decoration:none;transition:transform .2s,box-shadow .2s}
.menu-cta-btn--external{color:#fff;background:linear-gradient(135deg,var(--blue),var(--blue-deep))}
.menu-cta-btn--file{color:#fff;background:linear-gradient(135deg,var(--orange),#e85d10)}
.menu-cta-btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(255,107,26,.25)}
.menu-page-attach{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--border-b)}

.menu-page-pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--border-b)}
.menu-pager-link{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:calc(12px * var(--radius-scale,1));text-decoration:none;
  background:var(--dark2);border:1px solid var(--border-b);transition:border-color .2s,background .2s}
.menu-pager-link:hover{border-color:rgba(14,165,233,.35);background:var(--glass2)}
.menu-pager-link--next{text-align:right;grid-column:2}
.menu-pager-label{font-size:11px;font-weight:700;color:var(--orange);letter-spacing:.04em;text-transform:uppercase}
.menu-pager-title{font-size:13.5px;font-weight:600;color:var(--text);line-height:1.35}

.menu-page-aside{position:sticky;top:88px;display:flex;flex-direction:column;gap:16px}
.menu-aside-block{padding:16px;border-radius:calc(14px * var(--radius-scale,1));background:var(--dark2);border:1px solid var(--border-b)}
.menu-aside-title{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);margin-bottom:12px}
.menu-aside-main-cat{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:calc(11px * var(--radius-scale,1));text-decoration:none;
  background:var(--glass);border:1px solid var(--border-b);transition:background .2s,border-color .2s}
.menu-aside-main-cat:hover{background:var(--glass2);border-color:rgba(255,107,26,.3)}
.menu-aside-main-icon{font-size:22px;line-height:1}
.menu-aside-main-text{font-size:14px;font-weight:700;color:var(--text);line-height:1.35}

.menu-aside-list{list-style:none;display:flex;flex-direction:column;gap:4px}
.menu-aside-link{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:calc(10px * var(--radius-scale,1));text-decoration:none;
  border:1px solid transparent;transition:background .2s,border-color .2s}
.menu-aside-link:hover,.menu-aside-link.is-active{background:var(--glass2);border-color:var(--border-b)}
.menu-aside-link-icon{width:28px;height:28px;border-radius:calc(8px * var(--radius-scale,1));display:flex;align-items:center;justify-content:center;
  font-size:14px;flex-shrink:0;background:var(--glass);border:1px solid var(--border-b)}
.menu-aside-link-text{min-width:0;display:flex;flex-direction:column;gap:1px}
.menu-aside-link-name{font-size:13px;font-weight:600;color:var(--text);line-height:1.3}
.menu-aside-link-type{font-size:10.5px;color:var(--text-dim)}

.menu-aside-nav{display:flex;flex-direction:column;gap:8px}
.menu-nav-btn{display:block;text-align:center;padding:11px 16px;border-radius:calc(11px * var(--radius-scale,1));font-size:13.5px;font-weight:600;
  text-decoration:none;color:#fff;background:linear-gradient(135deg,var(--orange),#e85d10);transition:transform .2s,box-shadow .2s}
.menu-nav-btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(255,107,26,.3)}
.menu-nav-btn--ghost{color:var(--text-dim);background:transparent;border:1px solid var(--border-b);box-shadow:none}
.menu-nav-btn--ghost:hover{color:var(--text);border-color:rgba(14,165,233,.35);box-shadow:none;transform:none}

@media(max-width:900px){
  .menu-page-layout{grid-template-columns:1fr}
  .menu-page-aside{position:static}
  .menu-page-pager{grid-template-columns:1fr}
  .menu-pager-link--next{grid-column:1;text-align:left}
}

/* === SITE TONE CONTROL === */
.top-tone-toggle{width:32px;height:32px;margin-left:6px;border:1px solid var(--border-b);border-radius:calc(8px * var(--radius-scale,1));
  background:var(--glass2);color:var(--text-dim);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:color .2s,background .2s,border-color .2s}
.top-tone-toggle:hover{color:var(--orange);border-color:var(--border-o);background:var(--glass)}

html[data-ui-tone="light"]{
  color-scheme:light;
  --dark:#f5f8fc;--dark2:#ffffff;--dark3:#edf3fa;
  --glass:rgba(15,38,71,.045);--glass2:rgba(15,38,71,.075);
  --border-b:rgba(14,104,164,.22);--border-o:rgba(234,102,28,.28);
  --text:#12233d;--text-dim:#5f718a;
}
html[data-ui-tone="light"] body{background:var(--dark);color:var(--text)}
html[data-ui-tone="light"] .bg-gradient{background:radial-gradient(ellipse 80% 60% at 15% 10%,rgba(14,165,233,.10),transparent 60%),radial-gradient(ellipse 60% 50% at 85% 80%,rgba(255,107,26,.08),transparent 60%),var(--dark)}
html[data-ui-tone="light"] #neural-canvas{opacity:.08}
html[data-ui-tone="light"] nav{background:rgba(255,255,255,.9);box-shadow:0 4px 18px rgba(15,38,71,.06)}
html[data-ui-tone="light"] .topbar{background:rgba(239,245,251,.9)}
html[data-ui-tone="light"] .mega{background:var(--dark2);box-shadow:0 18px 44px rgba(15,38,71,.16)}
html[data-ui-tone="light"] .footer-bottom{border-top-color:rgba(15,38,71,.1)}

/* The template emits per-theme inline rules and per-section CSS variables.
   These light-mode rules intentionally take precedence over those tokens. */
html[data-ui-tone="light"] body{background:#f4f7fb!important;color:#172b46!important}
html[data-ui-tone="light"] .bg-gradient{background:radial-gradient(ellipse 78% 52% at 10% 0%,rgba(14,165,233,.11),transparent 62%),radial-gradient(ellipse 66% 48% at 92% 100%,rgba(255,107,26,.08),transparent 64%),#f4f7fb!important}
html[data-ui-tone="light"] nav{background:rgba(255,255,255,.94)!important;border-bottom-color:rgba(30,74,120,.16)!important}
html[data-ui-tone="light"] nav .topbar{background:rgba(239,245,251,.94)!important;border-bottom-color:rgba(30,74,120,.13)!important}
html[data-ui-tone="light"] nav .nav-item,
html[data-ui-tone="light"] nav .top-link,
html[data-ui-tone="light"] nav .top-lang button,
html[data-ui-tone="light"] nav .logo-sub,
html[data-ui-tone="light"] nav .top-search button,
html[data-ui-tone="light"] nav .top-tone-toggle{color:#52657c!important}
html[data-ui-tone="light"] nav .nav-item:hover,
html[data-ui-tone="light"] nav .top-link:hover{color:#172b46!important;background:rgba(27,77,125,.07)!important}
html[data-ui-tone="light"] nav .top-search input{color:#172b46!important}
html[data-ui-tone="light"] nav .top-lang,
html[data-ui-tone="light"] nav .top-search,
html[data-ui-tone="light"] nav .top-tone-toggle{border-color:rgba(30,74,120,.18)!important;background:rgba(30,74,120,.045)!important}
html[data-ui-tone="light"] nav .logo-name.has-custom{color:var(--nav-site-name-color)!important;-webkit-text-fill-color:var(--nav-site-name-color)!important}
html[data-ui-tone="light"] nav .logo-sub.has-custom{color:var(--nav-site-name-en-color)!important}
html[data-ui-tone="light"] nav .nav-divider,
html[data-ui-tone="light"] nav .top-sep{background:rgba(30,74,120,.18)!important}

/* ══ เงาและเส้นขอบตาม "บุคลิก" ของธีม ══
   --card-shadow / --line มาจาก theme_css_vars() ตามบุคลิกที่เลือก
   ธีมโหมดเดิมได้ค่า none/เดิม จึงไม่เปลี่ยนหน้าตา */
.menu-card,.rs-card-grid > a,.rs-card-grid > div,.hl-card,
.mega,.navhub-drawer,.rs-slide{ box-shadow:var(--card-shadow,none) }
.menu-card,.rs-card-grid > a,.rs-card-grid > div,.hl-card{ border-color:var(--line,var(--border-b)) }

/* ══ สีไอคอนทั้งเว็บ — ตั้งค่าได้จากหน้าธีมสี (Template) ══
   --icon-1 / --icon-2 มาจาก theme_css_vars() ถ้าไม่ได้ตั้งค่าจะเท่ากับสีหลัก/สีรอง
   จึงไม่เปลี่ยนหน้าตาเดิมของธีมที่ยังไม่ได้ตั้งสีไอคอน */
.mega-ic,.mega-link-ic,.menu-card-icon,.navhub-persona-ic,
.rs-item-media-icon,.hero-feat-icon,.footer-contact-block i,
.mega-campus-name i,.mega-campus-meta a i,.mega-cline i{
  color:var(--icon-1);
}
.mega-grid > .mega-item:nth-child(even) .mega-ic,
.navhub-list .menu-card:nth-child(even) .menu-card-icon,
.mega-link-ic,.navhub-persona-ic{ color:var(--icon-2); }
.rs-item-media-icon,.hero-feat-icon{ color:var(--icon-1) }
.rs-card-grid > *:nth-child(even) .rs-item-media-icon{ color:var(--icon-2) }
.mega-ic i,.mega-link-ic i,.menu-card-icon i,.navhub-persona-ic i,
.rs-item-media-icon i,.hero-feat-icon i{ color:inherit }

/* ── โทนสว่าง: แผงเมนูใหญ่ (mega) และลิ้นชักเมนู ──
   เดิมใช้ var(--dark2) ที่ธีมทับเป็นสีเข้ม แผงจึงยังดำอยู่ทั้งที่แถบเมนูสว่างแล้ว
   ต้องใช้ !important เพราะสีของธีมถูกฉีดเป็น :root inline มาทีหลัง */
html[data-ui-tone="light"] .mega{
  background:#ffffff!important;border-color:rgba(30,74,120,.14)!important;
  box-shadow:0 20px 50px rgba(15,38,71,.14)!important;
}
html[data-ui-tone="light"] .mega-eyebrow{color:#0f6aa8!important}
html[data-ui-tone="light"] .mega-t,
html[data-ui-tone="light"] .mega-link-t,
html[data-ui-tone="light"] .mega-campus-name,
html[data-ui-tone="light"] .mega-col-title{color:#172b46!important}
/* เมนูแบบแบ่งคอลัมน์ (.mega-cols) — หัวคอลัมน์ ไอคอน และเส้นคั่น */
html[data-ui-tone="light"] .mega-col-head{color:#0369a1!important;border-bottom-color:rgba(30,74,120,.2)!important}
html[data-ui-tone="light"] .mega-link-ic{
  background:rgba(100,116,139,.08)!important;border-color:rgba(100,116,139,.20)!important;color:#0369a1!important;
}
html[data-ui-tone="light"] .mega-link:hover{
  background:rgba(30,74,120,.06)!important;border-color:rgba(30,74,120,.16)!important;
}
html[data-ui-tone="light"] .mega-d,
html[data-ui-tone="light"] .mega-campus-addr,
html[data-ui-tone="light"] .mega-campus-meta a,
html[data-ui-tone="light"] .mega-cline{color:#55697f!important}
html[data-ui-tone="light"] .mega-campus-meta a:hover,
html[data-ui-tone="light"] .mega-cline:hover{color:#de5a0a!important}
html[data-ui-tone="light"] .mega-item{border-color:transparent!important}
html[data-ui-tone="light"] .mega-item:hover{
  background:rgba(30,74,120,.06)!important;border-color:rgba(30,74,120,.16)!important;
}
/* กล่องไอคอน — สีพื้นถูกใส่เป็น inline style จึงต้อง !important ทับ */
html[data-ui-tone="light"] .mega-ic{
  background:rgba(100,116,139,.08)!important;border-color:rgba(100,116,139,.20)!important;color:#c24f08!important;
}
html[data-ui-tone="light"] .mega-grid > .mega-item:nth-child(even) .mega-ic{
  background:rgba(100,116,139,.08)!important;border-color:rgba(100,116,139,.20)!important;color:#0369a1!important;
}
html[data-ui-tone="light"] .mega-ic i,
html[data-ui-tone="light"] .mega-ic svg{color:inherit!important}

/* Use one quiet neutral surface for every icon in the site navigation.
   This also overrides the per-item inline colour generated by the CMS. */
.mega-ic,.mega-link-ic,.menu-card-icon,.navhub-persona-ic,.menu-item-card-icon,.menu-aside-link-icon{
  background:rgba(100,116,139,.08)!important;
  border-color:rgba(100,116,139,.20)!important;
}
/* เมนูทุกชนิดใช้สีน้ำเงินเดียวกัน — แยกจากไอคอนใน Section เนื้อหาของหน้าเว็บ */
.mega-ic,.mega-link-ic,.menu-card-icon,.navhub-persona-ic,.menu-item-card-icon,.menu-aside-link-icon,.menu-aside-main-icon,
.mega-ic i,.mega-ic svg,.mega-link-ic i,.mega-link-ic svg,.menu-card-icon i,.menu-card-icon svg,
.navhub-persona-ic i,.navhub-persona-ic svg,.menu-item-card-icon i,.menu-item-card-icon svg,
.menu-aside-link-icon i,.menu-aside-link-icon svg,.menu-aside-main-icon i,.menu-aside-main-icon svg{
  color:#008bd2!important;
}
html[data-ui-tone="light"] .mega-ic,
html[data-ui-tone="light"] .mega-grid > .mega-item:nth-child(even) .mega-ic,
html[data-ui-tone="light"] .mega-link-ic{
  color:#008bd2!important;
}
html[data-ui-tone="light"] .mega-side{
  background:linear-gradient(165deg,rgba(222,90,10,.06),rgba(2,132,199,.05))!important;
  border-left-color:rgba(30,74,120,.14)!important;
}
html[data-ui-tone="light"] .mega-contact{border-top-color:rgba(30,74,120,.14)!important}
html[data-ui-tone="light"] .mega-soc{
  background:rgba(30,74,120,.05)!important;border-color:rgba(30,74,120,.16)!important;color:#55697f!important;
}
html[data-ui-tone="light"] .mega-soc:hover{background:#de5a0a!important;border-color:#de5a0a!important;color:#fff!important}
html[data-ui-tone="light"] .mega-backdrop{background:rgba(15,38,71,.28)!important}

/* ลิ้นชัก Navigation Hub */
html[data-ui-tone="light"] .navhub-drawer{
  background:linear-gradient(160deg,#ffffff,#f4f7fb)!important;
  border-left-color:rgba(30,74,120,.14)!important;box-shadow:-22px 0 60px rgba(15,38,71,.16)!important;
}
html[data-ui-tone="light"] .navhub-title,
html[data-ui-tone="light"] .navhub-drawer .menu-card-title{color:#172b46!important}
html[data-ui-tone="light"] .navhub-drawer .menu-card-desc{color:#55697f!important}
html[data-ui-tone="light"] .navhub-drawer .menu-card{
  background:#ffffff!important;border-color:rgba(30,74,120,.14)!important;
}
html[data-ui-tone="light"] .navhub-drawer .menu-card:hover{border-color:rgba(222,90,10,.4)!important}
html[data-ui-tone="light"] .navhub-head,
html[data-ui-tone="light"] .navhub-personas{border-bottom-color:rgba(30,74,120,.14)!important}
html[data-ui-tone="light"] .navhub-close{
  background:rgba(30,74,120,.05)!important;border-color:rgba(30,74,120,.16)!important;color:#172b46!important;
}
html[data-ui-tone="light"] .navhub-persona{
  background:#ffffff!important;border-color:rgba(30,74,120,.14)!important;color:#172b46!important;
}
html[data-ui-tone="light"] .navhub-persona-ic{
  background:rgba(2,132,199,.10)!important;border-color:rgba(2,132,199,.24)!important;
}

html[data-ui-tone="light"] section:not(.hero){
  background:#f4f7fb!important;color:#172b46!important;
  --text:#172b46!important;--text-dim:#5c6f87!important;
  --dark2:#ffffff!important;--dark3:#eef3f8!important;
  --glass:rgba(23,43,70,.045)!important;--glass2:rgba(23,43,70,.075)!important;
  --border-b:rgba(30,74,120,.18)!important;--rs-text:#172b46!important;
  --rs-muted:#5c6f87!important;--rs-card-text:#172b46!important;
  --rs-card-muted:#5c6f87!important;--rs-card-bg:#ffffff!important;
  --rs-card-border:rgba(30,74,120,.16)!important;
}
html[data-ui-tone="light"] section:not(.hero) .section-title,
html[data-ui-tone="light"] section:not(.hero) .section-sub{color:#172b46!important}
html[data-ui-tone="light"] section:not(.hero) .section-sub{color:#5c6f87!important}

html[data-ui-tone="light"] .hero-bgcover .hero-bg-layer{opacity:.62!important}
html[data-ui-tone="light"] .hero-bgcover .hero-bg-layer::after{background:linear-gradient(105deg,rgba(8,23,42,.88),rgba(8,23,42,.62))!important}
/* ธีมโทนสว่าง: บังคับตัวอักษรขาวบนภาพพื้นหลัง — ยกเว้นสไลด์ที่ผู้ดูแลกำหนดสีเอง ([data-custom-color]) */
html[data-ui-tone="light"] .hero-textslide:not([data-custom-color]),
html[data-ui-tone="light"] .hero-textslide:not([data-custom-color]) h1,
html[data-ui-tone="light"] .hero-textslide:not([data-custom-color]) p{color:#fff!important;text-shadow:0 2px 14px rgba(0,0,0,.38)}
html[data-ui-tone="light"] .hero-textslide:not([data-custom-color]) .hero-title span{color:#fff!important;-webkit-text-fill-color:#fff!important;background:none!important}
/* สไลด์ที่กำหนดสีเอง: คงเงาข้อความไว้เพื่อให้อ่านออกบนภาพ แต่ไม่ทับสี */
html[data-ui-tone="light"] .hero-textslide[data-custom-color] h1,
html[data-ui-tone="light"] .hero-textslide[data-custom-color] p{text-shadow:0 2px 14px rgba(0,0,0,.38)}
/* โหมดมืดต้องคงหัวข้อ Hero ให้อ่านชัด แม้ผู้ดูแลเคยกำหนดสี/ไฮไลต์เฉพาะคำไว้ */
html[data-ui-tone="dark"][data-dark-template-auto="1"] .hero-textslide[data-custom-color],
html[data-ui-tone="dark"][data-dark-template-auto="1"] .hero-textslide[data-custom-color] .hero-title,
html[data-ui-tone="dark"][data-dark-template-auto="1"] .hero-textslide[data-custom-color] .hero-title span{
  color:#fff!important;-webkit-text-fill-color:#fff!important;background:none!important;
  text-shadow:0 2px 14px rgba(0,0,0,.48);
}
html[data-ui-tone="light"] .hero-features{background:rgba(255,255,255,.92)!important;box-shadow:0 16px 38px rgba(28,60,95,.16)!important}
html[data-ui-tone="light"] .hero-feat-text b{color:#172b46!important}
html[data-ui-tone="light"] .hero-feat-text span{color:#5c6f87!important}

html[data-ui-tone="light"] footer{background:#ffffff!important;border-top-color:rgba(30,74,120,.16)!important}
html[data-ui-tone="light"] footer .footer-desc,
html[data-ui-tone="light"] footer .footer-links li a,
html[data-ui-tone="light"] footer .footer-copy{color:var(--footer-copy-color,#5c6f87)!important}
html[data-ui-tone="light"] footer .footer-links li a:hover{color:#172b46!important}

/* Image-led content needs an inverse palette even when the surrounding page is light.
   Keep these tokens local so normal white cards still follow the selected light tone. */
html[data-ui-tone="light"] .hl-head,
html[data-ui-tone="light"] .hl-card,
html[data-ui-tone="light"] .rs-news-scope .n3 .it,
html[data-ui-tone="light"] .rs-news-scope .n6 .feat,
html[data-ui-tone="light"] .rs-news-scope .n9 .it{
  --dark2:#0b1627!important;
  --dark3:#12233d!important;
  --text:#ffffff!important;
  --text-dim:#d3dfed!important;
  --rs-text:#ffffff!important;
  --rs-muted:#d3dfed!important;
  --rs-card-text:#ffffff!important;
  --rs-card-muted:#d3dfed!important;
  color:#ffffff!important;
}
html[data-ui-tone="light"] .main-svc-card{
  --dark2:#ffffff!important;
  --dark3:#edf3f8!important;
  --text:#172b46!important;
  --text-dim:#5c6f87!important;
  background:#ffffff!important;
  color:#172b46!important;
}
html[data-ui-tone="light"] .main-svc-card .svc-bg::after{
  background:linear-gradient(90deg,#ffffff 7%,rgba(255,255,255,.96) 42%,rgba(255,255,255,.46) 72%,transparent 92%)!important;
}
html[data-ui-tone="light"] .main-svc-card .svc-title{color:#172b46!important}
html[data-ui-tone="light"] .main-svc-card .svc-desc,
html[data-ui-tone="light"] .main-svc-card .svc-feat-item{color:#5c6f87!important}
html[data-ui-tone="light"] .main-svc-card .svc-feat-item{border-top-color:rgba(30,74,120,.13)!important}

html[data-ui-tone="light"] .hl-head h2,
html[data-ui-tone="light"] .hl-head h2 b,
html[data-ui-tone="light"] .hl-head h3,
html[data-ui-tone="light"] .hl-card .hl-title,
html[data-ui-tone="light"] .rs-news-scope .n3 .it .ntitle,
html[data-ui-tone="light"] .rs-news-scope .n6 .feat .ntitle,
html[data-ui-tone="light"] .rs-news-scope .n9 .it .ntitle{
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
  background:none!important;
}
html[data-ui-tone="light"] .hl-head p,
html[data-ui-tone="light"] .hl-card .hl-desc,
html[data-ui-tone="light"] .rs-news-scope .n3 .it .nexc,
html[data-ui-tone="light"] .rs-news-scope .n6 .feat .nexc,
html[data-ui-tone="light"] .rs-news-scope .n9 .it .nexc{color:#d3dfed!important}

/* Standard item cards stay bright in light mode.  Their content must never inherit
   a white text token from a selected template.  Image-overlay variants are excluded. */
html[data-ui-tone="light"] section:not(.hero) :is(
  .news-main,.news-item,.rs-card-grid>a,.rs-slider:not(.rs-banner) .rs-slide,
  .rs-pop-scope .popwrap,.rs-pop-scope .p1 .it,.rs-pop-scope .p2 .it,.rs-pop-scope .p4 .it,.rs-pop-scope .p5 .it,
  .rs-news-scope .n1 .it,.rs-news-scope .n4 .it,.rs-news-scope .n5 .it,.rs-news-scope .n6 .sit,
  .rs-news-scope .n7 .feat,.rs-news-scope .n7 .rit,.rs-news-scope .n8 .it,
  .rs-news-scope .n10 .feat,.rs-news-scope .n10 .rit,.rs-news-scope .n11 .it,.rs-news-scope .n12 .it,
  .rs-timeline-row,.menu-item-card,.menu-page-action-box,.menu-aside-block
){
  --text:#172b46!important;
  --text-dim:#5c6f87!important;
  --rs-card-text:#172b46!important;
  --rs-card-muted:#5c6f87!important;
  --dark2:#ffffff!important;
  background-color:#ffffff!important;
  color:#172b46!important;
}
html[data-ui-tone="light"] section:not(.hero) :is(
  .news-main,.news-item,.rs-card-grid>a,.rs-slider:not(.rs-banner) .rs-slide,
  .rs-pop-scope .popwrap,.rs-pop-scope .p1 .it,.rs-pop-scope .p2 .it,.rs-pop-scope .p4 .it,.rs-pop-scope .p5 .it,
  .rs-news-scope .n1 .it,.rs-news-scope .n4 .it,.rs-news-scope .n5 .it,.rs-news-scope .n6 .sit,
  .rs-news-scope .n7 .feat,.rs-news-scope .n7 .rit,.rs-news-scope .n8 .it,
  .rs-news-scope .n10 .feat,.rs-news-scope .n10 .rit,.rs-news-scope .n11 .it,.rs-news-scope .n12 .it,
  .rs-timeline-row,.menu-item-card,.menu-page-action-box,.menu-aside-block
) :is(h1,h2,h3,h4,h5,strong,.news-title,.news-item-title,.ntitle,.txt,.menu-item-card-title,.menu-pager-title){color:#172b46!important}
html[data-ui-tone="light"] section:not(.hero) :is(
  .news-main,.news-item,.rs-card-grid>a,.rs-slider:not(.rs-banner) .rs-slide,
  .rs-pop-scope .popwrap,.rs-pop-scope .p1 .it,.rs-pop-scope .p2 .it,.rs-pop-scope .p4 .it,.rs-pop-scope .p5 .it,
  .rs-news-scope .n1 .it,.rs-news-scope .n4 .it,.rs-news-scope .n5 .it,.rs-news-scope .n6 .sit,
  .rs-news-scope .n7 .feat,.rs-news-scope .n7 .rit,.rs-news-scope .n8 .it,
  .rs-news-scope .n10 .feat,.rs-news-scope .n10 .rit,.rs-news-scope .n11 .it,.rs-news-scope .n12 .it,
  .rs-timeline-row,.menu-item-card,.menu-page-action-box,.menu-aside-block
) :is(p,small,.txt,.nexc,.ndate,.news-meta,.news-item-meta,.menu-item-card-desc){color:#5c6f87!important}

/* === CATEGORY ARCHIVE === */
.category-page{padding:2.5rem 0 4.5rem}
.category-page-container{max-width:1240px}
.category-page-layout{display:grid;grid-template-columns:minmax(0,1fr) 276px;gap:30px;align-items:start}
.category-page-main{min-width:0}
.category-page-heading{margin-bottom:1.8rem}
.category-article-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.category-article-card{display:block;min-width:0;overflow:hidden;text-decoration:none;background:var(--dark2);border:1px solid var(--border-b);border-radius:calc(16px * var(--radius-scale,1));color:var(--text);transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease}
.category-article-card:hover{transform:translateY(-4px);border-color:var(--border-o);box-shadow:0 12px 28px rgba(15,23,42,.12)}
.category-article-card>img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .5s ease}
.category-article-card:hover>img{transform:scale(1.045)}
.category-article-icon{display:grid;place-items:center;width:100%;aspect-ratio:16/9;background:linear-gradient(135deg,var(--dark3),var(--dark2));color:var(--orange);font-size:2.4rem;border-bottom:1px solid var(--border-b)}
.rs-item-media-icon{display:grid;place-items:center;min-width:0;min-height:0;width:100%;height:100%;background:linear-gradient(135deg,var(--dark3),var(--dark2));color:var(--orange);font-size:clamp(1.5rem,4vw,3.25rem)}
/*
 * A selected icon is a compact visual marker, not a replacement for the
 * whole card.  Keep cover images at their original ratio, while allowing
 * icon-backed CMS/menu cards to show their title and description immediately
 * in the live section preview and on the public site.
 */
.rs-item-media-icon--compact{height:128px!important;min-height:128px!important;max-height:128px!important;aspect-ratio:auto!important;font-size:clamp(1.5rem,3vw,2.5rem)}
@media(max-width:640px){.rs-item-media-icon--compact{height:112px!important;min-height:112px!important;max-height:112px!important}}
.category-article-card-body{padding:1rem 1.05rem 1.1rem}
.category-article-card-title{margin-top:7px;font-size:14px;font-weight:700;line-height:1.5;color:var(--text)}
.category-article-card-date{margin-top:7px;font-size:11.5px;color:var(--text-dim)}
.category-empty{padding:3.2rem 1.4rem;text-align:center;color:var(--text-dim);border:1px dashed var(--border-b);border-radius:calc(16px * var(--radius-scale,1));background:var(--glass)}
.category-page-sidebar{position:sticky;top:96px}
.category-sidebar-card{overflow:hidden;background:var(--dark2);border:1px solid var(--border-b);border-radius:calc(16px * var(--radius-scale,1))}
.category-sidebar-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px;border-bottom:1px solid var(--border-b);font-size:13.5px;font-weight:700;color:var(--text)}
.category-sidebar-count{display:inline-grid;min-width:24px;height:24px;padding:0 7px;place-items:center;border-radius:999px;background:var(--orange-glow);color:var(--orange);font-size:11px}
.category-sidebar-list{display:flex;flex-direction:column;gap:3px;padding:8px}
.category-sidebar-link{display:flex;align-items:flex-start;gap:10px;min-width:0;padding:10px 10px 10px calc(10px + var(--category-depth,0) * 12px);border-radius:calc(10px * var(--radius-scale,1));color:var(--text-dim);font-size:13px;font-weight:600;text-decoration:none;line-height:1.45;transition:background .2s,color .2s}
.category-sidebar-link i{width:17px;text-align:center;flex:0 0 17px;margin-top:2px;color:var(--orange)}
.category-sidebar-link span{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.category-sidebar-link:hover{background:var(--glass2);color:var(--text)}
.category-sidebar-link.is-active{background:var(--orange-glow);color:var(--text);box-shadow:inset 3px 0 0 var(--orange)}

/* === ARTICLE DETAIL === */
.detail-page{padding:2.3rem 0 4.5rem}
.detail-page-container{max-width:1180px}
.detail-page-layout{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:34px;align-items:start}
.detail-article{min-width:0}
.detail-breadcrumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 1.65rem;padding:14px 18px;background:var(--dark2);border:1px solid var(--border-b);border-radius:calc(14px * var(--radius-scale,1));box-shadow:0 5px 18px rgba(15,23,42,.05);font-size:12.5px;color:var(--text-dim)}
.detail-breadcrumbs a{color:var(--blue);text-decoration:none;font-weight:600}
.detail-breadcrumbs a:hover{color:var(--orange)}
.detail-breadcrumbs>i{font-size:10px;opacity:.55}
.detail-breadcrumbs a:first-child{display:inline-flex;align-items:center;gap:6px}
.detail-article-header{padding-bottom:1.35rem;margin-bottom:1.5rem;border-bottom:1px solid var(--border-b)}
.detail-article-header h1{margin:12px 0 8px;font-size:clamp(1.55rem,3.2vw,2.25rem);line-height:1.35;color:var(--text)}
.detail-article-meta{font-size:12.5px;color:var(--text-dim)}
.detail-cover{display:block;width:100%;margin-bottom:1.5rem;border:1px solid var(--border-b);border-radius:calc(18px * var(--radius-scale,1));max-height:560px;object-fit:cover}
.detail-cover--icon{display:grid;place-items:center;min-height:260px;background:linear-gradient(135deg,var(--dark3),var(--dark2));color:var(--orange);font-size:5rem}
.detail-excerpt{margin:0 0 1.5rem;padding:12px 0 12px 16px;border-left:3px solid var(--orange);font-size:1.02rem;line-height:1.75;color:var(--text-dim);background:linear-gradient(90deg,var(--orange-glow),transparent)}
.detail-article-body{font-size:15px;line-height:1.9;color:var(--text)}
.detail-attachment{margin-top:1.7rem}
.detail-sidebar{position:sticky;top:96px;display:flex;flex-direction:column;gap:14px}
.detail-back-link{display:flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:11px 16px;border-radius:calc(12px * var(--radius-scale,1));background:var(--orange);color:#fff;text-decoration:none;font-size:13.5px;font-weight:700;box-shadow:0 8px 22px var(--orange-glow);transition:transform .2s,box-shadow .2s}
.detail-back-link:hover{transform:translateY(-2px);box-shadow:0 12px 27px var(--orange-glow)}
.detail-share-card,.detail-related-card{background:var(--dark2);border:1px solid var(--border-b);border-radius:calc(16px * var(--radius-scale,1));padding:16px}
.detail-share-card h2,.detail-related-card h2{margin:0;color:var(--text);font-size:14px;line-height:1.4}
.detail-share-actions{display:flex;gap:8px;margin-top:12px}
.detail-share-btn{width:38px;height:38px;display:inline-grid;place-items:center;border:1px solid var(--border-b);border-radius:calc(10px * var(--radius-scale,1));background:var(--glass);color:var(--text);font-size:15px;text-decoration:none;cursor:pointer;transition:transform .2s,background .2s,border-color .2s,color .2s}
.detail-share-btn:hover{transform:translateY(-2px);border-color:transparent;color:#fff}
.detail-share-facebook:hover{background:#1877f2}.detail-share-line:hover{background:#06c755}.detail-share-x{font-weight:800;font-family:Arial,sans-serif}.detail-share-x:hover{background:#111}.detail-share-copy:hover{background:var(--orange)}
.detail-share-status{min-height:16px;margin:9px 0 0;font-size:11.5px;color:var(--text-dim)}
.detail-related-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.detail-related-head a{color:var(--orange);font-size:11.5px;font-weight:700;text-decoration:none}
.detail-related-list{display:flex;flex-direction:column;gap:4px}
.detail-related-item{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;align-items:center;padding:8px 0;color:var(--text);text-decoration:none;border-top:1px solid var(--border-b)}
.detail-related-item:first-child{border-top:0;padding-top:0}
.detail-related-item:last-child{padding-bottom:0}
.detail-related-item img,.detail-related-placeholder{display:block;width:64px;height:52px;border-radius:calc(9px * var(--radius-scale,1));object-fit:cover;background:var(--dark3);border:1px solid var(--border-b)}
.detail-related-placeholder{display:grid;place-items:center;color:var(--orange);font-size:17px}
.detail-related-item strong{display:-webkit-box;overflow:hidden;color:var(--text);font-size:12px;line-height:1.4;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.detail-related-item small{display:block;margin-top:4px;color:var(--text-dim);font-size:10.5px}
.detail-related-item:hover strong{color:var(--orange)}

@media(max-width:980px){
  .category-page-layout,.detail-page-layout{grid-template-columns:1fr}
  .category-page-sidebar,.detail-sidebar{position:static}
  .category-page-sidebar{order:-1}
  .category-sidebar-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .category-page,.detail-page{padding:1.7rem 0 3.5rem}
  .category-article-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .detail-page-layout{gap:22px}
  .detail-breadcrumbs{margin-bottom:1.35rem;padding:12px 14px;gap:7px}
}
@media(max-width:480px){
  .category-article-grid,.category-sidebar-list{grid-template-columns:1fr}
  .category-article-card-body{padding:.85rem .9rem .95rem}
  .detail-share-card,.detail-related-card{padding:14px}
}

/* === PERSONNEL DIRECTORY === */
.personnel-page{padding:2.5rem 0 4.5rem}
.personnel-container{max-width:1240px}
.personnel-layout{display:grid;grid-template-columns:minmax(0,1fr) 276px;gap:30px;align-items:start}
.personnel-main{min-width:0}.personnel-heading{margin-bottom:1.6rem}.personnel-sidebar{position:sticky;top:96px}
.personnel-heading .section-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.personnel-count-badge{display:inline-flex;align-items:center;padding:3px 12px;border-radius:999px;background:var(--orange-glow);color:var(--orange);font-size:12px;font-weight:700}
.personnel-search{display:flex;align-items:center;gap:10px;margin-bottom:1.4rem;padding:12px 16px;border-radius:calc(14px * var(--radius-scale,1));background:var(--dark2);border:1px solid var(--border-b);transition:border-color .2s}
.personnel-search:focus-within{border-color:var(--orange)}
.personnel-search i{color:var(--text-dim);font-size:14px}
.personnel-search input{flex:1;min-width:0;border:none;outline:none;background:none;color:var(--text);font-size:13.5px;font-family:inherit}
.personnel-search input::placeholder{color:var(--text-dim)}
.personnel-featured-row{margin-bottom:20px}
.personnel-featured-row .personnel-card--featured{padding:28px 30px}
.personnel-featured-row .personnel-card--featured .personnel-card-top{gap:22px}
.personnel-featured-row .personnel-card--featured h2{font-size:19px}
.personnel-featured-row .personnel-card--featured .personnel-en{font-size:12.5px}
.personnel-featured-row .personnel-card--featured .personnel-positions p{font-size:14px}
.personnel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.personnel-card{position:relative;padding:22px 20px 20px;border:1px solid var(--border-b);border-radius:calc(18px * var(--radius-scale,1));background:var(--dark2);color:var(--text);box-shadow:0 5px 18px rgba(15,23,42,.04);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.personnel-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--orange),var(--orange-light));opacity:0;transition:opacity .25s ease}
.personnel-card--featured::before{opacity:1}
.personnel-card--featured{border-color:var(--border-o);box-shadow:0 16px 40px rgba(0,0,0,.12)}
.personnel-card:hover{transform:translateY(-5px);border-color:var(--border-o);box-shadow:0 20px 40px rgba(0,0,0,.16)}
.personnel-card:hover::before{opacity:1}
.personnel-card-top{display:flex;gap:16px;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--border-b)}
.personnel-avatar{--avatar-size:84px;display:grid;width:var(--avatar-size);height:var(--avatar-size);place-items:center;flex:0 0 var(--avatar-size);overflow:hidden;background:linear-gradient(135deg,var(--orange),#c2410c);color:#fff;font-size:calc(var(--avatar-size) * 0.36);font-weight:700;box-shadow:0 0 0 4px var(--orange-glow)}
.personnel-avatar--circle{border-radius:50%}
.personnel-avatar--rounded{border-radius:calc(var(--avatar-size) * 0.22)}
.personnel-avatar>img{display:block;width:100%;height:100%;border-radius:inherit;object-fit:cover;object-position:top center}
.personnel-card h2{margin:0;color:var(--text);font-size:16px;line-height:1.4}.personnel-en{margin:3px 0 0;color:var(--text-dim);font-size:11.5px}
.personnel-positions{margin:14px 0 0}.personnel-positions p{display:flex;gap:10px;align-items:center;margin:6px 0;color:var(--text);font-size:13px;line-height:1.5}.personnel-positions i{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex:0 0 24px;border-radius:50%;background:var(--orange-glow);color:var(--orange);font-size:11px}
.personnel-position-en{color:var(--text-dim);font-weight:500}
.personnel-expertise{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}.personnel-expertise span{padding:4px 10px;border-radius:999px;background:var(--glass2);border:1px solid var(--border-b);color:var(--text-dim);font-size:10.5px;font-weight:600}
.personnel-details{margin:14px 0 0;color:var(--text-dim);font-size:12.5px;line-height:1.7}.personnel-contact{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;padding-top:13px;border-top:1px solid var(--border-b)}.personnel-contact a,.personnel-contact span{display:inline-flex;gap:7px;align-items:center;padding:7px 14px;border-radius:999px;background:var(--glass2);border:1px solid var(--border-b);color:var(--text-dim);font-size:13.5px;text-decoration:none;transition:all .2s}.personnel-contact a:hover{background:var(--orange-glow);color:var(--orange);border-color:var(--orange)}.personnel-contact i{color:var(--orange)}
.personnel-no-results{padding:2.5rem 1rem;text-align:center;color:var(--text-dim);font-size:13.5px}
.personnel-empty{padding:4rem 1rem;text-align:center;border:1px dashed var(--border-b);border-radius:calc(16px * var(--radius-scale,1));color:var(--text-dim)}.personnel-empty i{display:block;margin-bottom:12px;color:var(--orange);font-size:34px}.personnel-empty p{margin:0}
@media(max-width:980px){.personnel-layout{grid-template-columns:1fr}.personnel-sidebar{position:static;order:-1}}
@media(max-width:620px){.personnel-page{padding:1.7rem 0 3.5rem}.personnel-grid{grid-template-columns:1fr}.personnel-card{padding:18px}.personnel-avatar{width:min(var(--avatar-size),72px);height:min(var(--avatar-size),72px);font-size:min(calc(var(--avatar-size) * 0.36),26px)}.personnel-featured-row .personnel-card--featured{padding:18px}.personnel-featured-row .personnel-card--featured .personnel-avatar{width:min(var(--avatar-size),88px);height:min(var(--avatar-size),88px);font-size:min(calc(var(--avatar-size) * 0.36),30px)}}

/* Template font applies to every public text surface. Font Awesome keeps its icon font. */
body,
body :not(.fa-solid):not(.fa-regular):not(.fa-brands):not([class^="fa-"]):not([class*=" fa-"]){
  font-family:var(--font-th,'Anuphan'),sans-serif!important;
}

/* === SITE IDENTITY (configured from Templates) === */
.logo-name{
  font-size:var(--nav-site-name-size,18px)!important;
  line-height:1.12;
  color:var(--nav-site-name-color,var(--text))!important;
  background:none!important;
  -webkit-text-fill-color:var(--nav-site-name-color,var(--text))!important;
}
.logo-name.is-gradient{
  color:transparent!important;
  background:linear-gradient(90deg,var(--nav-site-name-color,#fff),var(--nav-site-name-color-2,#0ea5e9))!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
}
.logo-sub{
  font-size:calc(var(--nav-site-name-size,18px) * .64)!important;
  line-height:1.15;
  color:var(--nav-site-name-en-color,var(--text-dim))!important;
  letter-spacing:.02em;
}
.logo-image.is-profile,.logo-badge.is-profile{
  border-radius:50%!important;
}
.logo-image.is-rounded,.logo-badge.is-rounded{
  border-radius:calc(10px * var(--radius-scale,1))!important;
}
.logo-image.is-profile{
  object-fit:cover;
  border:2px solid color-mix(in srgb,var(--nav-site-name-color,#fff) 42%,transparent);
}
.footer-brand{align-items:center}
footer .footer-brand .logo-image,footer .footer-brand .logo-badge{
  width:min(var(--nav-logo-width,44px),64px);
  height:min(var(--nav-logo-width,44px),64px);
}
footer .footer-brand .logo-text{min-width:0}

/* === ARCHIVE FILTERS + CARD/TABLE VIEW === */
.archive-toolbar{display:flex;align-items:stretch;flex-direction:column;gap:10px;margin:0 0 20px;padding:12px;background:var(--dark2);border:1px solid var(--border-b);border-radius:calc(14px * var(--radius-scale,1))}
.archive-toolbar-actions{display:flex;justify-content:flex-end}.archive-filter-form{display:flex;align-items:center;gap:8px;width:100%;min-width:0;flex-wrap:wrap}.archive-filter-panel[hidden]{display:none}
.archive-header-actions{display:flex;align-items:center;justify-content:flex-end;flex:0 0 auto;margin-left:auto}.menu-directory-filter,.category-archive-filter{margin:0 0 20px}
.category-page-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.category-page-heading-copy{min-width:0}
.archive-search-field,.archive-select-field,.archive-date-field{display:flex;align-items:center;height:38px;border:1px solid var(--border-b);border-radius:calc(9px * var(--radius-scale,1));background:var(--glass);color:var(--text-dim)}
.archive-search-field{flex:1 1 190px;min-width:160px;padding:0 10px;gap:8px}
.archive-search-field i,.archive-select-field i{color:var(--orange);font-size:12px}
.archive-search-field input,.archive-select-field select,.archive-date-field input{min-width:0;width:100%;height:100%;border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-size:12.5px}
.archive-select-field{min-width:155px;padding:0 9px;gap:7px}.archive-select-field select{cursor:pointer}
.archive-date-field{padding:0 9px;gap:6px;font-size:11px}.archive-date-field span{color:var(--text-dim);font-weight:700}.archive-date-field input{width:112px}
.archive-filter-submit,.archive-filter-reset,.archive-view-switch a,.archive-search-toggle{display:inline-grid;place-items:center;width:38px;height:38px;border:1px solid var(--border-b);border-radius:calc(9px * var(--radius-scale,1));background:var(--glass);color:var(--text-dim);text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.archive-filter-submit{border-color:var(--orange);background:var(--orange);color:#fff}.archive-filter-submit:hover{filter:brightness(1.06)}.archive-filter-reset:hover,.archive-view-switch a:hover,.archive-search-toggle:hover,.archive-search-toggle.is-open{border-color:var(--orange);color:var(--orange)}
.archive-view-switch{display:flex;gap:5px;flex:0 0 auto}.archive-view-switch a.is-active{border-color:var(--orange);background:var(--orange-glow);color:var(--orange)}
.archive-table-wrap{overflow-x:auto;border:1px solid var(--border-b);border-radius:calc(14px * var(--radius-scale,1));background:var(--dark2)}
.archive-table{width:100%;min-width:620px;border-collapse:collapse}.archive-table th,.archive-table td{padding:13px 15px;border-bottom:1px solid var(--border-b);text-align:left;vertical-align:middle;font-size:12.5px;color:var(--text-dim)}
.archive-table th{background:var(--glass);color:var(--text);font-size:11px;font-weight:800}.archive-table tbody tr:last-child td{border-bottom:0}.archive-table tbody tr:hover{background:var(--glass2)}
.archive-table-title{display:flex;align-items:center;gap:11px;min-width:260px;color:var(--text);font-size:13.5px;font-weight:700;text-decoration:none}.archive-table-title:hover{color:var(--orange)}
.archive-table-title>img,.archive-table-title .menu-item-card-cover,.archive-table-title .menu-item-card-icon,.archive-table-title .category-article-icon{width:48px!important;height:38px!important;flex:0 0 48px;margin:0;border-radius:calc(7px * var(--radius-scale,1));overflow:hidden}.archive-table-title .menu-item-card-cover{border:1px solid var(--border-b)}.archive-table-title .menu-item-card-icon,.archive-table-title .category-article-icon{font-size:16px}.archive-table-title .menu-item-card-play{font-size:12px}
.archive-table-open{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--orange-glow);color:var(--orange);text-decoration:none}.archive-table-open:hover{background:var(--orange);color:#fff}
html[data-ui-tone="light"] .archive-toolbar,html[data-ui-tone="light"] .archive-table-wrap{background:#fff!important}html[data-ui-tone="light"] .archive-search-field,html[data-ui-tone="light"] .archive-select-field,html[data-ui-tone="light"] .archive-date-field,html[data-ui-tone="light"] .archive-filter-reset,html[data-ui-tone="light"] .archive-view-switch a,html[data-ui-tone="light"] .archive-search-toggle{background:#f7faff!important;color:#42546a!important}html[data-ui-tone="light"] .archive-search-field input,html[data-ui-tone="light"] .archive-select-field select,html[data-ui-tone="light"] .archive-date-field input,html[data-ui-tone="light"] .archive-table-title{color:#172b46!important}
@media(max-width:760px){.archive-toolbar{align-items:stretch;flex-direction:column}.archive-filter-form{display:grid;grid-template-columns:1fr 1fr}.archive-search-field{grid-column:1/-1}.archive-select-field{min-width:0}.archive-date-field input{width:100%}.archive-filter-submit,.archive-filter-reset{width:100%}.archive-view-switch{justify-content:flex-end}.menu-page-head{flex-wrap:wrap}.menu-page-head .archive-header-actions{width:100%;justify-content:flex-start;margin-left:68px}.category-page-heading{align-items:flex-end}}
@media(max-width:460px){.archive-filter-form{grid-template-columns:1fr}.archive-search-field{grid-column:auto}.archive-table{min-width:540px}}

/* Keep the global-search suggestion panel above the duplicated navigation rules. */
.top-search{position:relative!important;overflow:visible!important}.top-search-suggestions{display:none;position:absolute;top:calc(100% + 9px);right:0;z-index:80;width:min(430px,calc(100vw - 24px));max-height:min(430px,calc(100vh - 110px));overflow-y:auto;border:1px solid var(--border-b);border-radius:12px;background:var(--dark2);box-shadow:0 18px 34px rgba(0,0,0,.28)}.top-search-suggestions.has-results{display:block}

/* Search uses <main> rather than a themed <section>; keep it above the fixed visual background. */
.site-search-page{position:relative;z-index:1}.site-search-result{color:var(--text)!important}.site-search-result-main>strong{color:var(--text)!important}.site-search-result-excerpt,.site-search-result-main small{color:var(--text-dim)!important}

/* === MOBILE: keep every public section and its cover media inside the viewport ===
   The section builder can store explicit widths on images/iframes.  On a narrow
   screen those values must yield to the available content width. */
@media (max-width:760px){
  html,body{max-width:100%;overflow-x:hidden}
  body{overflow-x:clip}
  section{padding-left:16px;padding-right:16px}
  .container,.hero-inner,.footer-grid,.detail-page-container,.personnel-container,
  .site-search-page,.article-body,.menu-page-body,.detail-article,.menu-page-main{min-width:0;max-width:100%}

  /* Covers, images and embeds from CMS/Page Builder never exceed their parent. */
  img,video{max-width:100%;height:auto}
  .article-body img,.menu-page-body img,.detail-cover,.policy-feature-media img,
  .article-body .ll-media img,.menu-page-body .ll-media img{display:block;max-width:100%!important;height:auto!important}
  .article-body iframe,.menu-page-body iframe{display:block;width:100%!important;max-width:100%!important;height:auto;min-height:220px;border:0}
  .article-body table,.menu-page-body table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .article-body pre,.menu-page-body pre{max-width:100%;overflow:auto}

  /* Image + text / image + links blocks become one readable column. */
  .article-body .ll-wrap,.menu-page-body .ll-wrap,
  .article-body .ll-wrap.ll-rev,.menu-page-body .ll-wrap.ll-rev{flex-direction:column;flex-wrap:nowrap;gap:18px}
  .article-body .ll-media,.menu-page-body .ll-media,
  .article-body .ll-body,.menu-page-body .ll-body{width:100%;min-width:0;flex:0 0 auto}
  .article-body .ll-list,.menu-page-body .ll-list{min-width:0}
  .article-body .ll-text,.menu-page-body .ll-text{overflow-wrap:anywhere}

  /* Two-side policy and CMS page layouts must not retain desktop widths. */
  .policy-feature,.policy-feature--reverse{flex-direction:column}
  .policy-feature-media,.policy-feature-content{width:100%;min-width:0;flex:0 0 auto}
  .policy-feature-media{min-height:0}
  .policy-feature-media img{aspect-ratio:auto;object-fit:contain}
  .menu-page-layout,.category-page-layout,.detail-page-layout,.personnel-layout{grid-template-columns:minmax(0,1fr)}

  /* Remaining visual Section presets: make multi-column content fit the phone. */
  .news-grid,.usage-row,.ai-inner,.insight-grid,.wifi-panel.active{grid-template-columns:minmax(0,1fr)}
  .stats-inner,.sub-services,.menu-cards,.dashboard-grid,.sw-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:420px){
  section{padding-left:14px;padding-right:14px}
  .stats-inner,.sub-services,.menu-cards,.dashboard-grid,.sw-grid{grid-template-columns:minmax(0,1fr)}
  .article-body iframe,.menu-page-body iframe{min-height:190px}
}

/* === MOBILE: CMS tabs + footer ===
   Tab panels may contain a news preset with a fixed image frame.  Keep its
   frame inside the panel and show the full cover without stretching/cropping. */
@media (max-width:1024px){
  .rs-tabs{flex-wrap:nowrap;max-width:100%;overflow-x:auto;overflow-y:hidden;padding:0 0 2px;margin-bottom:18px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .rs-tabs::-webkit-scrollbar{display:none}
  .rs-tab{flex:0 0 auto;white-space:nowrap}
  .rs-tabs-underline .rs-tab{padding:10px 14px;font-size:13px}
  .rs-tab-panel,.rs-tab-panel .rs-news-scope,.rs-tab-panel .popwrap,
  .rs-tab-panel .carousel,.rs-tab-panel .ctrack,.rs-tab-panel .pg{min-width:0;max-width:100%}
  .rs-two-col-slots.rs-2col{display:grid!important;width:100%;grid-template-columns:minmax(0,1fr)!important}
  .rs-two-col-slots.rs-2col>.rs-col-slot{width:100%;min-width:0}
  .rs-two-col-slots.rs-2col>.rs-col-slot+.rs-col-slot{margin-top:24px}
  .rs-tabs-embedded{width:100%;min-width:0;overflow:hidden}
  .rs-tab-panel .rs-news-scope .n8 .it{min-width:0;overflow:hidden}
  .rs-tab-panel .rs-news-scope .n8 .ph{width:100%;max-width:100%;aspect-ratio:16 / 9;overflow:hidden;background:var(--dark3)}
  .rs-tab-panel .rs-news-scope .n8 .ph img{width:100%;height:100%!important;max-width:100%;object-fit:contain!important;object-position:center;transform:none!important}
  .rs-tab-panel .rs-card-grid>a>img{display:block;width:100%!important;max-width:100%;height:auto!important;aspect-ratio:16 / 9;object-fit:contain!important;background:var(--dark3)}

  footer{padding:38px 18px 22px}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 22px;margin-bottom:28px}
  .footer-grid> :first-child,.footer-grid>.footer-contact{grid-column:1 / -1;min-width:0}
  .footer-desc{max-width:none;margin-top:10px}
  .footer-links{gap:9px}
  .footer-links li a{display:block;line-height:1.55;overflow-wrap:anywhere}
  .footer-contact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
  .footer-contact .footer-title,.footer-contact .footer-social-links{grid-column:1 / -1}
  .footer-contact-block{min-width:0;margin-bottom:0;padding-bottom:14px}
  .footer-contact-block span,.footer-contact-block a{overflow-wrap:anywhere}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:10px;padding-top:18px}
}

@media (max-width:420px){
  footer{padding-left:14px;padding-right:14px}
  .footer-grid,.footer-contact{grid-template-columns:minmax(0,1fr)}
  .footer-contact .footer-title,.footer-contact .footer-social-links{grid-column:auto}
}