/* =========================================================
   School Website — Modern Stylesheet
   โทนสีหลัก: น้ำเงิน (#1d4ed8) - เหลือง (#fbbf24)
   รองรับ Dark Mode ผ่าน [data-bs-theme="dark"]
   ========================================================= */

:root {
  --brand-red: #1d4ed8;        /* สีหลัก: น้ำเงิน */
  --brand-red-dark: #1e3a8a;   /* น้ำเงินเข้ม (hover) */
  --brand-amber: #fbbf24;      /* สีรอง: เหลือง */
  --brand-amber-dark: #f59e0b; /* เหลืองเข้ม */
  --grad-brand: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 55%, #fbbf24 100%);
  --bg: #f6f7fb;
  --surface: #ffffff;
  --text: #1f2430;
  --muted: #6b7280;
  --glass-bg: rgba(255, 255, 255, .65);
  --glass-border: rgba(255, 255, 255, .55);
  --shadow-soft: 0 10px 30px rgba(20, 20, 50, .08);
  --radius: 18px;
  --bs-primary: var(--brand-red);
}

[data-bs-theme="dark"] {
  --bg: #0f1117;
  --surface: #181b24;
  --text: #e8eaf0;
  --muted: #9aa0ac;
  --glass-bg: rgba(30, 33, 45, .55);
  --glass-border: rgba(255, 255, 255, .08);
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, .45);
}

* { scroll-behavior: smooth; }
body {
  font-family: 'Sarabun', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  transition: background .3s, color .3s;
}
h1,h2,h3,h4,h5,.navbar-brand { font-family: 'Kanit','Sarabun',sans-serif; }

/* Bootstrap primary override */
.btn-primary { background: var(--brand-red); border-color: var(--brand-red); }
.btn-primary:hover { background: var(--brand-red-dark); border-color: var(--brand-red-dark); }
.btn-outline-primary { color: var(--brand-red); border-color: var(--brand-red); }
.btn-outline-primary:hover { background: var(--brand-red); border-color: var(--brand-red); }
a { color: var(--brand-red); }
.text-primary { color: var(--brand-red) !important; }

/* ---------- Glassmorphism ---------- */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.shadow-soft { box-shadow: var(--shadow-soft) !important; border-radius: var(--radius); }

/* ---------- Navbar ---------- */
.nav-glass {
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--glass-border);
}
.navbar-brand { color: var(--text) !important; }
.brand-badge {
  width: 38px; height: 38px; display: grid; place-items: center;
  background: var(--grad-brand); color: #fff; border-radius: 12px;
  box-shadow: 0 4px 12px rgba(29,78,216,.35);
}
.nav-link { color: var(--text) !important; font-weight: 500; border-radius: 10px; padding: .4rem .8rem !important; }
.nav-link.active, .nav-link:hover { background: rgba(29,78,216,.1); color: var(--brand-red) !important; }
.btn-theme, .btn-admin { border-radius: 10px; }
.btn-theme { background: rgba(252,191,73,.2); color: var(--brand-amber-dark); border: none; }
.btn-admin { background: var(--grad-brand); color: #fff; border: none; }
.btn-admin:hover { color:#fff; opacity:.9; }

/* ---------- Hero ---------- */
.hero { min-height: 78vh; position: relative; overflow: hidden; }
.hero-bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(120deg, rgba(30,58,138,.92), rgba(29,78,216,.78), rgba(59,130,246,.6)),
    url('https://images.unsplash.com/photo-1523050854058-8df90110c9f1?w=1600&q=80') center/cover;
  z-index: 0;
}
.hero-badge { background: rgba(255,255,255,.2); backdrop-filter: blur(6px); font-size: .9rem; padding: .5rem 1rem; }
.opacity-90 { opacity: .9; }

/* ---------- Stats counter ---------- */
.stats-row { margin-top: -55px; position: relative; z-index: 3; }
.stat-card { padding: 1.5rem 1rem; }
.stat-icon { font-size: 2rem; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.counter { font-family: 'Kanit'; font-size: 2rem; font-weight: 700; color: var(--brand-red); }
.stat-label { color: var(--muted); font-size: .9rem; }

/* ---------- Section ---------- */
.section-title { font-weight: 700; position: relative; display: inline-block; }
.section-title::after { content:""; display:block; width: 48px; height: 4px; border-radius: 4px; background: var(--grad-brand); margin-top: 6px; }
.bg-soft { background: linear-gradient(180deg, transparent, rgba(252,191,73,.08)); }

/* ---------- News cards ---------- */
.news-card { background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); transition: transform .25s, box-shadow .25s; }
.news-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(29,78,216,.18); }
.news-thumb { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.news-thumb img { width:100%; height:100%; object-fit: cover; transition: transform .5s; }
.news-card:hover .news-thumb img { transform: scale(1.08); }
.news-thumb-ph { width:100%;height:100%; display:grid; place-items:center; background: var(--grad-brand); color:#fff; font-size:2rem; }
.news-cat { position:absolute; top:10px; left:10px; background: rgba(29,78,216,.92); color:#fff; padding:.25rem .7rem; border-radius:20px; font-size:.78rem; }
.news-content img { max-width:100%; border-radius:12px; }

/* ---------- Leader/teacher cards ---------- */
.leader-card { padding: 1.5rem 1rem; transition: transform .25s; }
.leader-card:hover { transform: translateY(-5px); }
.leader-photo { width: 90px; height: 90px; margin: 0 auto; border-radius: 50%; overflow: hidden; background: var(--grad-brand); display:grid; place-items:center; color:#fff; font-size:2.4rem; box-shadow: 0 6px 18px rgba(29,78,216,.3); }
.leader-photo img { width:100%;height:100%;object-fit:cover; }

/* ---------- Quick links ---------- */
.quick-link { display:flex; flex-direction:column; align-items:center; gap:.6rem; padding:1.6rem; text-decoration:none; color:var(--text); transition: transform .25s, background .25s; }
.quick-link i { font-size:2rem; background: var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.quick-link:hover { transform: translateY(-5px); color: var(--brand-red); }

/* ---------- Gallery ---------- */
.gallery-tile { position:relative; display:block; aspect-ratio:1; border-radius:14px; overflow:hidden; box-shadow: var(--shadow-soft); }
.gallery-tile img { width:100%;height:100%;object-fit:cover; transition: transform .4s; }
.gallery-tile:hover img { transform: scale(1.1); }
.gallery-ph { width:100%;height:100%; display:grid;place-items:center; background: var(--grad-brand); color:#fff; font-size:2rem; }
.gallery-cap { position:absolute; bottom:0; left:0; right:0; background: linear-gradient(transparent, rgba(0,0,0,.7)); color:#fff; padding:.6rem .5rem .4rem; font-size:.8rem; }

/* Lightbox */
.lightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,.9); z-index:2000; place-items:center; }
.lightbox.show { display:grid; }
.lightbox img { max-width:90%; max-height:80%; border-radius:10px; }
.lb-close { position:absolute; top:20px; right:30px; color:#fff; font-size:2.5rem; cursor:pointer; }
#lb-cap { color:#fff; margin-top:1rem; }

/* ---------- Footer ---------- */
/* ---------- Page Content (static pages) ---------- */
.page-content { font-size:1.05rem; line-height:1.9; }
.page-content h2,.page-content h3 { color:var(--brand-red); margin-top:1.5rem; }
.page-content img { max-width:100%; border-radius:10px; margin:1rem 0; }
.page-content table { width:100%; border-collapse:collapse; margin:1rem 0; }
.page-content table th { background:var(--brand-red); color:#fff; padding:.5rem .75rem; }
.page-content table td { border:1px solid #dee2e6; padding:.5rem .75rem; }
.bg-brand { background:var(--brand-red) !important; }
.bg-gradient-brand { background:var(--grad-brand) !important; }

.site-footer { background: linear-gradient(135deg, #1e3a8a, #1d4ed8); color:#fff; }
.footer-links a { color: rgba(255,255,255,.85); text-decoration:none; }
.footer-links a:hover { color:#fbbf24; }
.social-btn { width:40px;height:40px;display:grid;place-items:center; background:rgba(255,255,255,.15); color:#fff; border-radius:10px; transition:.25s; }
.social-btn:hover { background:#fbbf24; color:#1e3a8a; }

/* ---------- Toast ---------- */
.toast-msg { min-width:280px; color:#fff; padding:.9rem 1.1rem; border-radius:12px; margin-top:.5rem; box-shadow:0 8px 24px rgba(0,0,0,.25); animation: slideIn .3s ease; display:flex; gap:.6rem; align-items:center; }
.toast-msg.success { background:#16a34a; } .toast-msg.error { background:#dc2626; } .toast-msg.info { background:#2563eb; }
@keyframes slideIn { from{transform:translateX(120%);opacity:0} to{transform:none;opacity:1} }

/* ---------- Loader ---------- */
#page-loader { position:fixed; inset:0; background:var(--bg); z-index:9999; display:grid; place-items:center; transition: opacity .4s; }
#page-loader.hide { opacity:0; pointer-events:none; }
.loader-ring { width:54px;height:54px;border:5px solid rgba(29,78,216,.2); border-top-color:var(--brand-red); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity:0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity:1; transform:none; }

/* ---------- AI Chatbot ---------- */
.ai-fab { position:fixed; bottom:24px; right:24px; width:58px;height:58px; border-radius:50%; border:none; background:var(--grad-brand); color:#fff; font-size:1.5rem; box-shadow:0 8px 24px rgba(29,78,216,.4); z-index:1500; transition: transform .2s; }
.ai-fab:hover { transform: scale(1.08); }
.ai-panel { position:fixed; bottom:94px; right:24px; width:340px; max-width:90vw; height:460px; background:var(--surface); border-radius:18px; box-shadow:0 20px 50px rgba(0,0,0,.25); display:none; flex-direction:column; overflow:hidden; z-index:1500; }
.ai-panel.show { display:flex; }
.ai-head { background:var(--grad-brand); color:#fff; padding:.9rem 1rem; display:flex; justify-content:space-between; align-items:center; font-weight:600; }
.ai-body { flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.6rem; }
.ai-msg { padding:.6rem .9rem; border-radius:14px; max-width:85%; font-size:.92rem; }
.ai-msg.bot { background: rgba(29,78,216,.1); align-self:flex-start; }
.ai-msg.user { background: var(--brand-red); color:#fff; align-self:flex-end; }
.ai-input { display:flex; gap:.4rem; padding:.7rem; border-top:1px solid var(--glass-border); }

/* ========================================================= 
   ADMIN
   ========================================================= */
.admin-body { background: var(--bg); }
.admin-wrap { display:flex; min-height:100vh; }
.admin-sidebar { width:250px; background: linear-gradient(180deg,#1e3a8a,#1d4ed8); color:#fff; flex-shrink:0; transition:.3s; position:sticky; top:0; height:100vh; overflow-y:auto; }
.sidebar-brand { font-family:'Kanit'; font-weight:600; font-size:1.2rem; padding:1.3rem 1.2rem; border-bottom:1px solid rgba(255,255,255,.15); }
.sidebar-nav { padding:1rem .8rem; display:flex; flex-direction:column; gap:.3rem; }
.sidebar-nav a { color:rgba(255,255,255,.85); text-decoration:none; padding:.7rem 1rem; border-radius:12px; display:flex; align-items:center; gap:.7rem; transition:.2s; }
.sidebar-nav a:hover, .sidebar-nav a.active { background:rgba(255,255,255,.18); color:#fff; }
.sidebar-label { color:rgba(255,255,255,.5); font-size:.75rem; margin:1rem 1rem .3rem; text-transform:uppercase; }
.admin-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.admin-topbar { display:flex; align-items:center; gap:1rem; padding:.9rem 1.3rem; margin:1rem; border-radius:14px; }
.admin-content { padding: 0 1.3rem 2rem; }
.admin-sidebar.collapsed { margin-left:-250px; }

/* Dashboard cards */
.dash-card { border-radius:18px; padding:1.4rem; color:#fff; position:relative; overflow:hidden; box-shadow: var(--shadow-soft); }
.dash-icon { font-size:1.6rem; opacity:.85; margin-bottom:.4rem; }
.dash-num { font-family:'Kanit'; font-size:2rem; font-weight:700; color:#fff; }
.dash-label { opacity:.9; font-size:.9rem; }
.grad-red { background: linear-gradient(135deg,#1d4ed8,#1e3a8a); }
.grad-amber { background: linear-gradient(135deg,#3b82f6,#fbbf24); }
.grad-blue { background: linear-gradient(135deg,#3a86ff,#0353a4); }
.grad-green { background: linear-gradient(135deg,#16a34a,#15803d); }

/* Login */
.login-page { min-height:100vh; display:grid; place-items:center;
  background: linear-gradient(135deg,#1e3a8a,#1d4ed8 55%,#3b82f6); padding:1rem; }
.login-card { width:100%; max-width:400px; padding:2.2rem; }

/* Responsive */
@media (max-width: 991px){
  .admin-sidebar { position:fixed; z-index:1000; margin-left:-250px; }
  .admin-sidebar.show { margin-left:0; }
  .stats-row { margin-top: 1.5rem; }
}