:root{
  --bg:#0b1220;
  --card:#101a33;
  --text:#eaf0ff;
  --muted:#b7c3e6;
  --brand:#4ea1ff;
  --brand2:#6ee7ff;
  --border:rgba(255,255,255,.10);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans Thai", sans-serif;
  background: radial-gradient(1200px 800px at 20% 10%, rgba(78,161,255,.20), transparent 55%),
              radial-gradient(900px 700px at 90% 0%, rgba(110,231,255,.16), transparent 60%),
              var(--bg);
  color:var(--text);
  line-height:1.55;
}

a{color:inherit; text-decoration:none}
.container{width:min(1100px, 92vw); margin:0 auto}

.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(14px);
  background: rgba(11,18,32,.65);
  border-bottom:1px solid var(--border);
}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px}
.logo{
  width:40px; height:40px; border-radius:12px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow: var(--shadow);
  object-fit: cover;
  display:block;
}
.brand-title{display:flex; flex-direction:column}
.brand-title strong{font-size:14px; letter-spacing:.2px}
.brand-title span{font-size:12px; color:var(--muted)}

.topbar-right{display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end}

.nav{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.nav a{
  padding:8px 10px;
  border:1px solid transparent;
  border-radius:10px;
  color:var(--muted);
}
.nav a.active{
  color:var(--text);
  border-color: var(--border);
  background: rgba(255,255,255,.06);
}
.nav a:hover{color:var(--text)}

.loginbox{display:flex; flex-direction:column; align-items:flex-end; gap:6px; min-width: 280px}
.login-form{display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.login-input{
  width:150px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(6,16,34,.55);
  color: var(--text);
  outline:none;
}
.login-state{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.login-user{color:var(--muted); font-size:12px}
.login-error{
  max-width: 360px;
  border:1px solid var(--border);
  border-radius:12px;
  padding:8px 10px;
  background: rgba(255,78,110,.12);
  color: var(--text);
  font-size:12px;
}

.hero{
  padding:44px 0 18px;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:18px;
  align-items:stretch;
}
.card{
  background: rgba(16,26,51,.78);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow: var(--shadow);
}
.card-pad{padding:22px}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; color:var(--muted);
  border:1px solid var(--border);
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.04);
}
.h1{margin:14px 0 10px; font-size:34px; line-height:1.15}
.lead{color:var(--muted); margin:0 0 16px}
.cta-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.06);
  color:var(--text);
}
.btn.small{padding:8px 10px; border-radius:10px; font-size:12px}
.btn.primary{
  background: linear-gradient(135deg, rgba(78,161,255,.95), rgba(110,231,255,.75));
  border-color: transparent;
  color:#061022;
  font-weight:700;
}
.btn:hover{filter:brightness(1.06)}

.stats{display:grid; grid-template-columns: repeat(3,1fr); gap:10px}
.stat{
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  background: rgba(255,255,255,.04);
}
.stat b{display:block; font-size:18px}
.stat span{color:var(--muted); font-size:12px}

.section{padding:18px 0 40px}
.grid-3{display:grid; grid-template-columns: repeat(3,1fr); gap:14px}
.mini{padding:16px}
.mini h3{margin:0 0 6px; font-size:15px}
.mini p{margin:0; color:var(--muted); font-size:13px}

.page-head{padding:28px 0 10px}
.page-title{margin:0; font-size:26px}
.breadcrumbs{margin-top:6px; color:var(--muted); font-size:12px}
.content{padding:10px 0 42px}
.content p{color:var(--muted)}

.news-list{display:grid; gap:10px}
.news-item{padding:14px; border-radius:14px; border:1px solid var(--border); background: rgba(255,255,255,.04)}
.news-item b{display:block; margin-bottom:4px}
.news-item small{color:var(--muted)}

.form{display:grid; gap:10px; max-width:640px}
label{display:grid; gap:6px; font-size:13px; color:var(--muted)}
input, textarea{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(6,16,34,.55);
  color: var(--text);
  outline:none;
}
select{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(6,16,34,.55);
  color: var(--text);
  outline:none;
}
textarea{min-height:120px; resize:vertical}
.hint{font-size:12px; color:var(--muted)}
.alert{
  padding:12px 14px; border-radius:14px;
  border:1px solid var(--border);
  background: rgba(110,231,255,.10);
}
.alert.error{background: rgba(255,78,110,.12)}

.table-wrap{overflow:auto; border:1px solid var(--border); border-radius:14px; background: rgba(255,255,255,.03)}
.table{width:100%; border-collapse:collapse; min-width: 780px}
.table th,.table td{padding:12px 12px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top}
.table th{font-size:12px; color:var(--muted); font-weight:700; letter-spacing:.2px; background: rgba(255,255,255,.03)}
.table tr:hover td{background: rgba(255,255,255,.02)}
.table td{font-size:13px}

.admin-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.admin-actions{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.admin-grid{display:grid; grid-template-columns: 1fr; gap:14px}
.admin-split{display:grid; grid-template-columns: 1fr 1.2fr; gap:14px; align-items:start}
.admin-kpi{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
.kpi{
  padding:16px;
  border-radius:16px;
  border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}
.kpi b{display:block; font-size:18px}
.kpi span{display:block; color:var(--muted); font-size:12px; margin-top:4px}

.panel-title{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap;
  margin-bottom:10px;
}
.panel-title .badge{margin:0}

.form.compact{max-width:none}
.form.compact label{font-size:12px}
.form.compact input, .form.compact textarea{background: rgba(6,16,34,.42)}

.footer{
  border-top:1px solid var(--border);
  padding:18px 0;
  color:var(--muted);
  background: rgba(11,18,32,.55);
}
.footer small{display:block}

.menu-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:40px; height:40px;
  border-radius:10px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.06);
  cursor:pointer;
  flex-shrink:0;
}
.menu-toggle span{
  display:block;
  width:20px; height:2px;
  background: var(--text);
  border-radius:2px;
  transition: transform .2s ease, opacity .2s ease;
}
.menu-toggle.open span:nth-child(1){transform: translateY(7px) rotate(45deg)}
.menu-toggle.open span:nth-child(2){opacity:0}
.menu-toggle.open span:nth-child(3){transform: translateY(-7px) rotate(-45deg)}

.announce-overlay{
  display:none;
  position:fixed; inset:0; z-index:100;
  align-items:center; justify-content:center;
  padding:20px;
  background: rgba(6,10,20,.72);
  backdrop-filter: blur(4px);
}
.announce-overlay.open{display:flex}
.announce-card{
  width:min(420px, 100%);
  background: var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow: var(--shadow);
  padding:22px;
}
.announce-card h2{margin:0 0 10px; font-size:18px}
.announce-card p{margin:0 0 16px; color:var(--muted); white-space:pre-line}
.announce-actions{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.announce-dismiss{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); cursor:pointer}

.media-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:12px}
.media-card{
  border:1px solid var(--border); border-radius:14px; overflow:hidden;
  background: rgba(255,255,255,.04);
}
.media-card img{width:100%; height:120px; object-fit:cover; display:block}
.media-caption{padding:8px 10px 0; font-size:12px; color:var(--muted)}
.media-actions{display:flex; gap:6px; padding:10px}
.media-actions form{margin:0}
.media-actions .btn{padding:6px 8px}

.slideshow{position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); background:var(--card)}
.slideshow-track{position:relative; width:100%; aspect-ratio:16/7; background:#000}
.slide{position:absolute; inset:0; opacity:0; transition:opacity .6s ease}
.slide.active{opacity:1}
.slide img{width:100%; height:100%; object-fit:cover; display:block}
.slide-caption{
  position:absolute; left:0; right:0; bottom:0; padding:14px 16px;
  background:linear-gradient(0deg, rgba(0,0,0,.65), transparent);
  color:#fff; font-size:14px;
}
.slideshow-dots{position:absolute; left:0; right:0; bottom:10px; display:flex; justify-content:center; gap:8px}
.dot{width:9px; height:9px; border-radius:999px; border:none; background:rgba(255,255,255,.45); cursor:pointer; padding:0}
.dot.active{background:#fff}

.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.gallery-item{
  padding:0; border:1px solid var(--border); border-radius:14px; overflow:hidden;
  background:var(--card); cursor:pointer; aspect-ratio:1/1;
}
.gallery-item img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s ease}
.gallery-item:hover img{transform:scale(1.05)}

.lightbox-overlay{
  display:none; position:fixed; inset:0; z-index:110;
  align-items:center; justify-content:center; padding:24px;
  background:rgba(4,8,16,.9);
}
.lightbox-overlay.open{display:flex; flex-direction:column}
.lightbox-overlay img{max-width:min(900px,92vw); max-height:78vh; border-radius:12px; box-shadow:var(--shadow)}
.lightbox-caption{color:var(--muted); margin-top:10px; text-align:center}
.lightbox-close{
  position:absolute; top:18px; right:18px; width:38px; height:38px;
  border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.08);
  color:var(--text); cursor:pointer; font-size:16px;
}

.announce-image{width:100%; border-radius:12px; margin-bottom:14px; display:block; max-height:220px; object-fit:cover}

@media (max-width: 880px){
  .hero-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .loginbox{align-items:stretch; min-width: 0; width:100%}
  .login-form{justify-content:stretch}
  .login-input{width: 100%}
  .admin-split{grid-template-columns:1fr}
  .admin-kpi{grid-template-columns:1fr}

  .menu-toggle{display:flex}
  .topbar-right{
    display:none;
    flex-direction:column;
    align-items:stretch;
    width:100%;
    gap:14px;
    position:absolute;
    left:0; right:0; top:100%;
    padding:14px min(4vw, 20px) 18px;
    background: rgba(11,18,32,.97);
    border-bottom:1px solid var(--border);
    box-shadow: var(--shadow);
  }
  .topbar-inner{position:relative}
  .topbar-right.open{display:flex}
  .nav{justify-content:flex-start}
  .announce-card{padding:18px}

  .slideshow-track{aspect-ratio:4/3}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
}