:root{
  --school-primary:#2563eb;
  --school-secondary:#facc15;
  --ink:#0f172a;
  --muted:#64748b;
  --soft:#f8fafc;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Sarabun',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--ink);background:linear-gradient(180deg,#f8fbff 0%,#ffffff 42%,#f8fafc 100%)}
.school-gradient{background:linear-gradient(135deg,var(--school-primary),#14b8a6 58%,var(--school-secondary))}
.glass{background:rgba(255,255,255,.82);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.65)}
.soft-card{background:#fff;border:1px solid rgba(148,163,184,.18);box-shadow:0 18px 45px rgba(15,23,42,.08);border-radius:1.5rem}
.hover-lift{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.hover-lift:hover{transform:translateY(-5px);box-shadow:0 24px 52px rgba(15,23,42,.12);border-color:rgba(37,99,235,.18)}
.nav-link{position:relative}.nav-link:after{content:"";position:absolute;left:0;bottom:-7px;width:0;height:3px;border-radius:999px;background:var(--school-primary);transition:width .25s ease}.nav-link:hover:after,.nav-link.active:after{width:100%}
.section-title{font-size:clamp(1.2rem,1.9vw,1.8rem);font-weight:800;letter-spacing:-.01em;line-height:1.28}
.section-kicker{display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;background:rgba(37,99,235,.09);color:#1d4ed8;padding:.38rem .78rem;font-weight:800;font-size:.78rem;letter-spacing:.02em}
.hero-banner{position:relative;min-height:320px;height:clamp(260px,34vw,420px);background:#e2e8f0;border-bottom-left-radius:2rem;border-bottom-right-radius:2rem}.hero-overlay{background:linear-gradient(180deg,rgba(15,23,42,.12),rgba(15,23,42,.04) 55%,rgba(15,23,42,.1))}
.ribbon{position:absolute;inset:auto 1.25rem 1.25rem 1.25rem;border-radius:1.25rem;background:linear-gradient(180deg,rgba(15,23,42,.15),rgba(15,23,42,.72));color:#fff;padding:1.25rem}
.banner-slide{position:absolute;inset:0;opacity:0;transition:opacity .7s ease}.banner-slide.active{opacity:1;z-index:1}.banner-slide img{width:100%;height:100%;object-fit:cover;object-position:center}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.admin-shell{min-height:100vh;background:linear-gradient(135deg,#eff6ff,#fff7ed)}.admin-card{border-radius:1.35rem;background:#fff;border:1px solid rgba(148,163,184,.2);box-shadow:0 18px 40px rgba(15,23,42,.08)}
.form-input{width:100%;border-radius:1rem;border:1px solid #cbd5e1;padding:.8rem 1rem;outline:none}.form-input:focus{border-color:var(--school-primary);box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:999px;background:var(--school-primary);color:white;font-weight:800;padding:.74rem 1.08rem;transition:.25s}.btn-primary:hover{filter:brightness(.94);transform:translateY(-1px)}
.btn-soft{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:999px;background:#eef2ff;color:#1d4ed8;font-weight:800;padding:.7rem .98rem;transition:.25s}.btn-soft:hover{background:#dbeafe}
.prose-school p{margin:.75rem 0;line-height:1.9;color:#334155}.prose-school ul{list-style:disc;margin-left:1.4rem;line-height:1.9;color:#334155}

/* ปรับหน้าหลังบ้านเดิมให้ใช้งานง่ายบนมือถือ โดยไม่ต้องแก้โครงสร้างทุกไฟล์ */
body.bg-gray-100{background:linear-gradient(135deg,#eff6ff,#fff7ed)}
body.bg-gray-100 .max-w-7xl.mx-auto.p-6 > .flex.items-center.justify-between.mb-8{background:rgba(255,255,255,.88);border:1px solid rgba(148,163,184,.2);box-shadow:0 12px 30px rgba(15,23,42,.08);border-radius:1.5rem;padding:1rem}
body.bg-gray-100 h1.text-3xl{font-size:1.65rem;line-height:1.3}
body.bg-gray-100 h2.text-2xl{font-size:1.35rem;line-height:1.35}
body.bg-gray-100 input,body.bg-gray-100 select,body.bg-gray-100 textarea{font-size:16px}
body.bg-gray-100 table{min-width:760px}
body.bg-gray-100 .overflow-x-auto{-webkit-overflow-scrolling:touch}

@media(max-width:1024px){
  header .h-20{height:4.5rem}
  .hero-banner{min-height:280px;height:clamp(240px,38vw,340px)}
}
@media(max-width:768px){
  .section-title{font-size:1.18rem}
  .section-kicker{font-size:.72rem}
  .hero-banner{min-height:220px;height:250px;border-bottom-left-radius:1.25rem;border-bottom-right-radius:1.25rem}
  .ribbon{position:relative;inset:auto;border-radius:0 0 1.25rem 1.25rem;background:#0f172a}
  .soft-card{border-radius:1.25rem}
  .btn-primary,.btn-soft{width:100%;padding:.75rem 1rem}
  body.bg-gray-100 .max-w-7xl.mx-auto.p-6{padding:1rem!important}
  body.bg-gray-100 .max-w-7xl.mx-auto.p-6 > .flex.items-center.justify-between.mb-8{display:flex;flex-direction:column;align-items:stretch;gap:1rem;margin-bottom:1rem}
  body.bg-gray-100 h1.text-3xl{font-size:1.35rem!important}
  body.bg-gray-100 h2.text-2xl{font-size:1.18rem!important}
  body.bg-gray-100 .bg-white.rounded-3xl.shadow-xl.p-8{padding:1rem!important;border-radius:1.25rem!important}
  body.bg-gray-100 .bg-white.rounded-3xl.shadow-xl{border-radius:1.25rem!important}
  body.bg-gray-100 .p-6{padding:1rem!important}
  body.bg-gray-100 .px-8{padding-left:1rem!important;padding-right:1rem!important}
  body.bg-gray-100 .flex.gap-4,body.bg-gray-100 .flex.gap-3{flex-wrap:wrap}
  body.bg-gray-100 a[class*="px-6"],body.bg-gray-100 a[class*="px-8"],body.bg-gray-100 button[class*="px-8"]{width:100%;text-align:center;justify-content:center}
  body.bg-gray-100 .grid.md\:grid-cols-2,body.bg-gray-100 .grid.lg\:grid-cols-4,body.bg-gray-100 .grid.lg\:grid-cols-3{grid-template-columns:1fr!important}
  body.bg-gray-100 table{font-size:.86rem}
}

/* รอบปรับปรุงใหม่: แบนเนอร์กว้างพอดีกับคอนเทนต์ ไม่เต็มหน้าจอ */
.hero-section{background:linear-gradient(180deg,#f8fbff 0%,#ffffff 100%)}
.hero-section .hero-banner{border-radius:2rem;max-width:100%;height:clamp(330px,35vw,470px);min-height:330px}
.hero-section .banner-slide img{object-fit:cover;object-position:center}

/* Admin refresh */
.admin-shell{position:relative;overflow-x:hidden;background:radial-gradient(circle at top left,rgba(37,99,235,.16),transparent 32%),linear-gradient(135deg,#f6f8ff 0%,#f8fafc 52%,#fff7ed 100%)}
.admin-bg-decor{position:fixed;inset:auto -80px -120px auto;width:360px;height:360px;border-radius:999px;background:rgba(37,99,235,.10);filter:blur(30px);pointer-events:none}
.admin-sidebar{background:linear-gradient(180deg,#172554 0%,#1d4ed8 54%,#0f172a 100%);color:white}
.admin-menu-link{display:flex;align-items:center;gap:.75rem;border-radius:1.15rem;color:rgba(255,255,255,.82);padding:.85rem 1rem;transition:.2s;background:transparent}
.admin-menu-link:hover{background:rgba(255,255,255,.13);color:white;transform:translateX(2px)}
.admin-menu-link.active{background:white;color:#1d4ed8;box-shadow:0 12px 28px rgba(15,23,42,.18)}
.admin-hero{position:relative;background:linear-gradient(135deg,var(--school-primary),#2563eb 45%,#0f172a)}
.admin-hero:after{content:"";position:absolute;right:-60px;top:-70px;width:260px;height:260px;border-radius:999px;background:rgba(255,255,255,.16)}
.admin-hero:before{content:"";position:absolute;right:90px;bottom:-100px;width:220px;height:220px;border-radius:999px;background:rgba(250,204,21,.18)}
.admin-stat-card{display:block;border-radius:1.55rem;background:rgba(255,255,255,.88);border:1px solid rgba(148,163,184,.2);box-shadow:0 18px 40px rgba(15,23,42,.08);padding:1.35rem;backdrop-filter:blur(14px)}
.admin-card{backdrop-filter:blur(14px)}

/* Legacy backend pages: polish pages that still use the older structure */
body.bg-gray-100{background:radial-gradient(circle at top left,rgba(37,99,235,.14),transparent 30%),linear-gradient(135deg,#f6f8ff,#fff7ed)!important;color:#0f172a}
body.bg-gray-100:before{content:"ระบบผู้ดูแลเว็บไซต์";display:block;max-width:80rem;margin:1rem auto 0;padding:0 1.5rem;color:#1d4ed8;font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
body.bg-gray-100 .max-w-7xl.mx-auto.p-6{max-width:80rem;margin-top:.35rem}
body.bg-gray-100 .max-w-7xl.mx-auto.p-6 > .flex.items-center.justify-between.mb-8{background:rgba(255,255,255,.9)!important;border:1px solid rgba(255,255,255,.9)!important;box-shadow:0 20px 50px rgba(15,23,42,.10)!important;border-radius:1.75rem!important;padding:1.25rem!important;backdrop-filter:blur(18px)}
body.bg-gray-100 .max-w-7xl.mx-auto.p-6 > .flex.items-center.justify-between.mb-8 h1{font-size:clamp(1.35rem,2vw,2rem)!important;color:#0f172a!important;letter-spacing:-.01em}
body.bg-gray-100 .max-w-7xl.mx-auto.p-6 > .flex.items-center.justify-between.mb-8 p{color:#64748b!important}
body.bg-gray-100 .bg-white.rounded-3xl.shadow-xl{border:1px solid rgba(148,163,184,.18)!important;box-shadow:0 18px 45px rgba(15,23,42,.08)!important;background:rgba(255,255,255,.94)!important;backdrop-filter:blur(14px)}
body.bg-gray-100 label{color:#334155!important;font-weight:800!important}
body.bg-gray-100 input,body.bg-gray-100 select,body.bg-gray-100 textarea{border:1px solid #cbd5e1!important;border-radius:1rem!important;outline:none!important;background:white!important;transition:.2s}
body.bg-gray-100 input:focus,body.bg-gray-100 select:focus,body.bg-gray-100 textarea:focus{border-color:#2563eb!important;box-shadow:0 0 0 4px rgba(37,99,235,.12)!important}
body.bg-gray-100 table thead{background:#f1f5f9!important;color:#334155!important}
body.bg-gray-100 table tr:hover{background:#f8fafc!important}
body.bg-gray-100 a[class*="bg-blue"],body.bg-gray-100 button[class*="bg-blue"]{background:#2563eb!important;box-shadow:0 10px 22px rgba(37,99,235,.22);font-weight:800}
body.bg-gray-100 a[class*="bg-gray"],body.bg-gray-100 button[class*="bg-gray"]{background:#334155!important;box-shadow:0 10px 22px rgba(51,65,85,.16);font-weight:800}
body.bg-gray-100 a[class*="bg-green"],body.bg-gray-100 button[class*="bg-green"]{box-shadow:0 10px 22px rgba(22,163,74,.18);font-weight:800}
body.bg-gray-100 a[class*="bg-red"],body.bg-gray-100 button[class*="bg-red"]{box-shadow:0 10px 22px rgba(239,68,68,.18);font-weight:800}
body.bg-gray-100 a[class*="rounded"],body.bg-gray-100 button[class*="rounded"]{transition:.2s}
body.bg-gray-100 a[class*="rounded"]:hover,body.bg-gray-100 button[class*="rounded"]:hover{transform:translateY(-1px);filter:brightness(.97)}

@media(max-width:1024px){
  .hero-section .hero-banner{height:clamp(300px,42vw,390px);min-height:300px;border-radius:1.5rem}
  .admin-sidebar{background:linear-gradient(135deg,#172554,#2563eb)}
}
@media(max-width:768px){
  .hero-section{padding-top:.75rem!important;padding-bottom:.75rem!important}
  .hero-section .hero-banner{height:260px;min-height:260px;border-radius:1.25rem}
  .admin-menu-link{padding:.8rem .9rem}
  .admin-hero{border-radius:1.35rem!important;padding:1.25rem!important}
  .admin-stat-card{border-radius:1.25rem;padding:1rem}
  body.bg-gray-100:before{padding:0 1rem;margin-top:.75rem}
}

[data-legacy-admin-bar]{max-width:80rem;margin:1.25rem auto .25rem;padding:0 1.5rem}
.legacy-admin-bar-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-radius:1.5rem;background:linear-gradient(135deg,#172554,#2563eb);color:white;padding:1rem 1.1rem;box-shadow:0 20px 45px rgba(37,99,235,.20)}
.legacy-admin-title{font-weight:900;white-space:nowrap}
.legacy-admin-links{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end}
.legacy-admin-links a{display:inline-flex;border-radius:999px;background:rgba(255,255,255,.14);color:white;font-size:.85rem;font-weight:800;padding:.55rem .8rem;transition:.2s;white-space:nowrap}
.legacy-admin-links a:hover{background:white;color:#1d4ed8;transform:translateY(-1px)}
@media(max-width:768px){[data-legacy-admin-bar]{padding:0 1rem;margin-top:.75rem}.legacy-admin-bar-inner{align-items:flex-start;flex-direction:column;border-radius:1.25rem}.legacy-admin-links{justify-content:flex-start}.legacy-admin-links a{font-size:.78rem}}

/* ปรับส่วนที่มีรายการจำนวนมากให้หน้าแรกไม่รก */
#people .soft-card img{object-position:top center}
#people .btn-primary,#buildings .btn-primary{width:auto}
@media(max-width:768px){#people .btn-primary,#buildings .btn-primary{width:100%}}

/* แก้เมนูมือถือ/ดรอปดาวน์ให้อ่านง่าย พื้นหลังทึบ ตัวอักษรชัด */
[data-mobile-menu] > div{background:#ffffff!important;color:#0f172a!important;border-left:1px solid rgba(148,163,184,.25)}
[data-mobile-menu] a{background:#ffffff;color:#0f172a!important}
[data-mobile-menu] a:hover{background:#eff6ff!important;color:#1d4ed8!important}
select,select option{background:#ffffff!important;color:#0f172a!important}
.form-input, .form-input option{background:#ffffff!important;color:#0f172a!important}

@media(max-width:1024px){
  [data-admin-menu]{background:#ffffff!important;color:#0f172a!important;border-radius:1.25rem;padding:.75rem;box-shadow:0 18px 38px rgba(15,23,42,.18);border:1px solid rgba(148,163,184,.25)}
  [data-admin-menu] .admin-menu-link{background:#ffffff!important;color:#0f172a!important;border:1px solid rgba(226,232,240,.9)}
  [data-admin-menu] .admin-menu-link:hover{background:#eff6ff!important;color:#1d4ed8!important;transform:none}
  [data-admin-menu] .admin-menu-link.active{background:#2563eb!important;color:#ffffff!important}
  [data-admin-menu] .rounded-\[1\.35rem\]{background:#f8fafc!important;color:#0f172a!important;border:1px solid #e2e8f0!important}
  [data-admin-menu] .text-white,[data-admin-menu] .text-white\/70,[data-admin-menu] .text-white\/55{color:#0f172a!important}
}

/* กัน dropdown/select บนมือถือที่บาง browser ทำเป็นพื้นหลังใส */
@media(max-width:768px){
  input,select,textarea,option{background-color:#ffffff!important;color:#0f172a!important;-webkit-text-fill-color:#0f172a!important}
  select{appearance:auto!important;-webkit-appearance:auto!important}
  .legacy-admin-links a{background:#ffffff!important;color:#1d4ed8!important}
}