/* ==========================================================
   ธีมหลักของระบบ - โทนสี สพป. (กรมท่า/ทอง) ทันสมัย อ่านง่าย
   ========================================================== */
:root{
  --nm-navy: #0d2a4d;
  --nm-navy-dark: #081b33;
  --nm-gold: #c99a3f;
  --nm-gold-light: #e8c778;
  --nm-bg: #f4f6f9;
  --nm-card: #ffffff;
  --nm-text: #1e2733;
  --nm-muted: #6b7684;
  --nm-radius: 14px;
}

*{ box-sizing: border-box; }

body{
  font-family: 'Sarabun', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--nm-bg);
  color: var(--nm-text);
  min-height: 100vh;
}

/* ---------- Navbar ---------- */
.nm-navbar{
  background: linear-gradient(120deg, var(--nm-navy) 0%, var(--nm-navy-dark) 100%);
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
}
.nm-navbar .navbar-brand{
  font-weight: 700;
  color: #fff !important;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.nm-navbar .navbar-brand .brand-badge{
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--nm-gold);
  color: var(--nm-navy);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.1rem;
}
.nm-navbar .nav-link{
  color: rgba(255,255,255,.85) !important;
  font-weight: 500;
}
.nm-navbar .nav-link:hover{ color: var(--nm-gold-light) !important; }
.nm-navbar .btn-gold{
  background: var(--nm-gold);
  color: var(--nm-navy);
  font-weight: 700;
  border: none;
}
.nm-navbar .btn-gold:hover{ background: var(--nm-gold-light); color: var(--nm-navy-dark); }

/* ---------- Hero ---------- */
.nm-hero{
  background: linear-gradient(135deg, var(--nm-navy) 0%, #143a6b 60%, var(--nm-navy-dark) 100%);
  color: #fff;
  padding: 3rem 1.5rem;
  border-radius: 0 0 28px 28px;
  margin-bottom: 2rem;
}
.nm-hero h1{ font-weight: 700; font-size: clamp(1.5rem, 4vw, 2.4rem); }
.nm-hero p{ color: rgba(255,255,255,.85); }

/* ---------- Cards ---------- */
.nm-card{
  background: var(--nm-card);
  border-radius: var(--nm-radius);
  border: 1px solid #eef0f3;
  box-shadow: 0 2px 10px rgba(13,42,77,.05);
  transition: transform .15s ease, box-shadow .15s ease;
}
.nm-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(13,42,77,.10);
}
.group-card{
  display: block;
  padding: 1.25rem;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.group-card .icon-circle{
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(201,154,63,.15);
  color: var(--nm-gold);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1.2rem;
  margin-bottom: .75rem;
}
.group-card h5{ font-weight: 700; color: var(--nm-navy); font-size: 1.05rem; }
.group-card p{ color: var(--nm-muted); font-size: .88rem; margin-bottom:0; }

/* ---------- Thread list ---------- */
.thread-item{
  padding: 1rem 1.25rem;
  border-radius: var(--nm-radius);
  background: var(--nm-card);
  border: 1px solid #eef0f3;
  margin-bottom: .75rem;
  transition: box-shadow .15s;
}
.thread-item:hover{ box-shadow: 0 6px 18px rgba(13,42,77,.08); }
.thread-item a.thread-title{
  color: var(--nm-navy);
  font-weight: 700;
  text-decoration: none;
  font-size: 1.02rem;
}
.thread-item a.thread-title:hover{ color: var(--nm-gold); }
.thread-meta{ color: var(--nm-muted); font-size: .82rem; }

/* ---------- Badges ---------- */
.badge-status{
  padding: .4rem .75rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .78rem;
}

/* ---------- Forms ---------- */
.nm-form-card{
  background: var(--nm-card);
  border-radius: var(--nm-radius);
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(13,42,77,.06);
  border: 1px solid #eef0f3;
}
.form-label{ font-weight: 600; color: var(--nm-navy); }
.btn-primary-nm{
  background: var(--nm-navy);
  border-color: var(--nm-navy);
  color: #fff;
  font-weight: 600;
}
.btn-primary-nm:hover{ background: var(--nm-navy-dark); border-color: var(--nm-navy-dark); color: #fff; }
.btn-primary-nm:focus, .btn-primary-nm:active{ color: #fff !important; }
.btn-gold-solid{
  background: var(--nm-gold);
  border-color: var(--nm-gold);
  color: var(--nm-navy);
  font-weight: 700;
}
.btn-gold-solid:hover{ background: var(--nm-gold-light); color: var(--nm-navy-dark); }

/* ---------- Reply bubbles ---------- */
.reply-bubble{
  border-radius: var(--nm-radius);
  padding: 1rem 1.25rem;
  margin-bottom: .9rem;
  border: 1px solid #eef0f3;
}
.reply-staff{
  background: #eaf3ff;
  border-color: #cfe3fb;
}
.reply-guest{
  background: #f7f8fa;
}
.reply-author{ font-weight: 700; color: var(--nm-navy); font-size: .9rem; }
.reply-time{ color: var(--nm-muted); font-size: .78rem; }

/* ---------- Footer ---------- */
.nm-footer{
  background: var(--nm-navy-dark);
  color: rgba(255,255,255,.7);
  padding: 2rem 1rem;
  margin-top: 3rem;
  font-size: .88rem;
}
.nm-footer a{ color: var(--nm-gold-light); text-decoration: none; }

/* ---------- Responsive tweaks ---------- */
@media (max-width: 576px){
  .nm-hero{ padding: 2rem 1rem; border-radius: 0 0 18px 18px; }
  .nm-form-card{ padding: 1.25rem; }
}

/* ---------- Utility ---------- */
.text-nm-navy{ color: var(--nm-navy); }
.text-nm-gold{ color: var(--nm-gold); }
.shadow-soft{ box-shadow: 0 4px 16px rgba(13,42,77,.06); }