/* ==================================================
   Navbar + Hero (banner) — Modern / Clean / Premium
   พื้นหลังกลาง (ขาว-เทา) สไตล์ shadcn/ui + สีเน้นชมพู-แสดเดิมของเว็บ
   โหลดทีหลังสุดเพื่อให้ทับสไตล์ Bootstrap/เดิมทั้งหมด
   ================================================== */

:root {
  --nm-bg: #f8fafc;        /* slate-50 — พื้นหลังฐานใหม่ของเว็บ */
  --nm-surface: #ffffff;
  --nm-border: #e2e8f0;    /* slate-200 */
  --nm-border-strong: #cbd5e1; /* slate-300 */
  --nm-ink: #0f172a;       /* slate-900 */
  --nm-ink-soft: #475569;  /* slate-600 */
  --nm-ink-muted: #94a3b8; /* slate-400 */
  --nm-pink: #ff2f7e;
  --nm-orange: #ff7a30;
  --nm-sunset: linear-gradient(135deg, #ff2f7e 0%, #ff7a30 100%);
  --nm-accent-bg: #fff1f6; /* soft pink tint สำหรับ active/hover */
  --nm-ring: rgba(255, 47, 126, .28);
  --nm-radius-sm: 8px;
  --nm-radius-md: 12px;
  --nm-radius-lg: 18px;
  --nm-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --nm-shadow-md: 0 10px 30px -14px rgba(15, 23, 42, .18);
  --nm-shadow-lg: 0 24px 60px -24px rgba(15, 23, 42, .22);
  --nm-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- พื้นหลังฐานของทั้งเว็บ: เปลี่ยนจากกราเดียนต์ชมพูสดเป็นโทนกลางสะอาดตา ---------- */
body {
  background: var(--nm-bg) !important;
  background-image: none !important;
}

/* กล่องขาวหลักที่ครอบทั้งหน้า: เงานุ่มขึ้น มุมโค้งมนขึ้น แบบพรีเมียม */
body > .container {
  border-radius: var(--nm-radius-lg) !important;
  box-shadow: var(--nm-shadow-lg) !important;
  border: 1px solid var(--nm-border);
}

/* ==================================================
   Navbar
   ================================================== */
.navbar.navbar-default {
  background: var(--nm-surface) !important;
  border: none !important;
  border-bottom: 1px solid var(--nm-border) !important;
  box-shadow: none !important;
}

.navbar.navbar-default .container {
  background: transparent;
}

/* ตัว <ul> เมนูหลักมี class "navbar-default" ติดมาด้วย (ซ้ำกับ <nav>)
   ทำให้โดนพื้นหลังกราเดียนต์ชมพูเดิมของ .navbar-default ทับอยู่ ต้องล้างออก */
.navbar-nav.navbar-default {
  background: none !important;
}

/* ลิงก์เมนูหลัก: สไตล์ ghost button ของ shadcn */
.navbar-default .navbar-nav > li > a {
  font-family: "Sarabun", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--nm-ink-soft) !important;
  border-radius: var(--nm-radius-sm);
  margin: 10px 2px;
  padding: 8px 14px !important;
  background: transparent !important;
  transition: background .2s var(--nm-ease), color .2s var(--nm-ease);
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  background: var(--nm-accent-bg) !important;
  color: var(--nm-pink) !important;
}

.navbar-default .navbar-nav > li.active > a,
.navbar-default .navbar-nav > li.active > a:hover,
.navbar-default .navbar-nav > li.active > a:focus {
  background: var(--nm-accent-bg) !important;
  color: var(--nm-pink) !important;
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--nm-pink);
}

.navbar-default .navbar-nav .dropdown.open > a,
.navbar-default .navbar-nav > li > a[aria-expanded="true"] {
  background: var(--nm-accent-bg) !important;
  color: var(--nm-pink) !important;
}

.navbar-default .navbar-nav > li > a .caret {
  border-top-color: currentColor;
  opacity: .6;
}

/* ---------- Dropdown menu: shadcn-style popover ---------- */
.navbar-default .dropdown-menu {
  border: 1px solid var(--nm-border);
  border-radius: var(--nm-radius-md);
  box-shadow: var(--nm-shadow-md);
  padding: 6px;
  margin-top: 6px;
  min-width: 230px;
}

.navbar-default .dropdown-menu > li > a {
  font-size: 13.5px;
  color: var(--nm-ink-soft);
  border-radius: var(--nm-radius-sm);
  padding: 8px 12px;
  transition: background .18s ease, color .18s ease;
}

.navbar-default .dropdown-menu > li > a:hover,
.navbar-default .dropdown-menu > li > a:focus {
  background: var(--nm-accent-bg);
  color: var(--nm-pink);
}

/* เมนูย่อยระดับสาม (เช่น กลุ่มสาระฯ ใต้ "คณะครู") */
.navbar-default .dropdown-menu ul {
  list-style: none;
  margin: 2px 0 6px 10px;
  padding-left: 10px;
  border-left: 2px solid var(--nm-border);
}

.navbar-default .dropdown-menu ul > li > a {
  display: block;
  font-size: 13px;
  color: var(--nm-ink-muted);
  padding: 6px 10px;
  border-radius: var(--nm-radius-sm);
  transition: background .18s ease, color .18s ease;
}

.navbar-default .dropdown-menu ul > li > a:hover {
  background: var(--nm-accent-bg);
  color: var(--nm-pink);
}

/* ---------- ไอคอนโซเชียลในแถบเมนู (lucide) ---------- */
.navbar-default .navbar-nav > li > a .nm-icon {
  width: 17px;
  height: 17px;
  vertical-align: -3px;
  color: var(--nm-ink-muted);
  transition: color .2s ease;
}

.navbar-default .navbar-nav > li > a:hover .nm-icon {
  color: var(--nm-pink);
}

/* ---------- ปุ่ม toggle เมนูมือถือ: shadcn ghost icon button ---------- */
.navbar-toggle {
  border: 1px solid var(--nm-border) !important;
  border-radius: var(--nm-radius-sm) !important;
  background: var(--nm-surface) !important;
  padding: 8px 10px !important;
  margin-top: 14px;
  transition: background .2s ease, border-color .2s ease;
}

.navbar-toggle:hover,
.navbar-toggle:focus {
  background: var(--nm-accent-bg) !important;
  border-color: var(--nm-pink) !important;
}

.navbar-toggle .nm-icon {
  width: 20px;
  height: 20px;
  color: var(--nm-ink);
  display: block;
}

.navbar-toggle .icon-bar { display: none; }

/* ---------- ช่องค้นหา: shadcn Input + Button ---------- */
.search-form .search-box {
  display: flex;
  align-items: center;
  background: var(--nm-surface);
  border: 1px solid var(--nm-border-strong);
  border-radius: 999px;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
  margin-top: 12px;
}

.search-form .search-box:focus-within {
  border-color: var(--nm-pink);
  box-shadow: 0 0 0 4px var(--nm-ring);
}

.search-form .search-input {
  border: none !important;
  outline: none;
  background: transparent !important;
  font-size: 13.5px;
  padding: 9px 4px 9px 16px !important;
  box-shadow: none !important;
  color: var(--nm-ink);
}

.search-form .search-btn {
  border: none;
  background: transparent;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  color: var(--nm-ink-muted);
  cursor: pointer;
  transition: color .2s ease;
}

.search-form .search-btn:hover { color: var(--nm-pink); }

.search-form .search-btn .nm-icon {
  width: 16px;
  height: 16px;
}

/* ==================================================
   จัดเมนูให้อยู่กึ่งกลาง navbar และป้องกันปัญหา "หน้าหลัก"
   หลุดไปอยู่คนละบรรทัดกับเมนูอื่น (เดิมใช้ float ซึ่งถ้าพื้นที่
   ไม่พอจะ wrap ทีละรายการ ทำให้บางรายการหลุดไปอยู่บรรทัดเดียว
   โดดๆ) เปลี่ยนมาใช้ flexbox แทน + บีบพื้นที่ที่ไม่จำเป็นลง
   เพื่อให้เมนูทั้งหมดพอดีในบรรทัดเดียวที่กึ่งกลาง
   เฉพาะช่วงจอกว้าง (ตรงกับจุด breakpoint เดิมของเว็บที่ 1300px
   ที่ใช้สลับโหมดเมนูเต็มรูปแบบ/เมนูยุบมือถือ)
   -------------------------------------------------- */
@media (min-width: 1300px) {
  .navbar-default #navbar.navbar-collapse {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 4px;
  }

  .navbar-default .navbar-nav {
    display: flex !important;
    float: none !important;
    flex-wrap: nowrap;
    align-items: center;
    margin: 0 !important;
  }

  .navbar-default .navbar-nav > li {
    float: none !important;
  }

  /* บีบ padding เมนูลงเล็กน้อยเพื่อเผื่อพื้นที่ */
  .navbar-default .navbar-nav > li > a {
    padding: 8px 11px !important;
    white-space: nowrap;
  }

  .navbar-default .search-form {
    float: none !important;
    margin: 0 0 0 10px !important;
    flex-shrink: 0;
  }

  .navbar-default .search-input {
    width: 100px !important;
  }

  .navbar-default .search-input:focus {
    width: 140px !important;
  }
}

/* ==================================================
   Hero / banner frame — ปรับเป็นโทนพรีเมียมนุ่มนวลขึ้น
   ================================================== */
header {
  padding: 18px clamp(10px, 3vw, 24px) 4px;
}