/* =====================================================
   OKSY3 Public Site Polish
   ใช้คุมขนาดหัวข้อ เนื้อหา การ์ด และมือถือของ public site
===================================================== */

/* ---------- Base Typography ---------- */
body {
  overflow-x: hidden;
}

body h1 {
  font-size: 30px !important;
  line-height: 1.18 !important;
  font-weight: 850 !important;
  letter-spacing: -0.35px !important;
}

body h2 {
  font-size: 20px !important;
  line-height: 1.30 !important;
  font-weight: 800 !important;
  letter-spacing: -0.15px !important;
}

body h3 {
  font-size: 17px !important;
  line-height: 1.36 !important;
  font-weight: 760 !important;
}

body p,
body li {
  font-size: 15px !important;
  line-height: 1.72 !important;
}

/* ---------- Header / Hero ---------- */
header h1,
.site-header h1,
.public-header h1,
.public-hero h1,
.site-hero h1,
.school-hero h1,
.hero h1,
.brand h1,
.site-brand h1 {
  font-size: 31px !important;
  line-height: 1.16 !important;
  font-weight: 850 !important;
  letter-spacing: -0.45px !important;
}

header p,
.site-header p,
.public-header p,
.public-hero p,
.site-hero p,
.school-hero p,
.hero p,
.hero-subtitle,
.site-subtitle {
  font-size: 15px !important;
  line-height: 1.55 !important;
}

/* ลดความสูงส่วน hero ที่โล่งเกิน */
.hero,
.public-hero,
.site-hero,
.school-hero,
.hero-card,
.public-header,
.site-header {
  min-height: auto !important;
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}

/* ---------- Page / Article Heading ---------- */
main h1,
article h1,
.content h1,
.content-card h1,
.page-content h1,
.public-main h1,
.public-container h1 {
  font-size: 26px !important;
  line-height: 1.22 !important;
  font-weight: 820 !important;
  margin-top: 0.35rem !important;
  margin-bottom: 0.55rem !important;
}

main h2,
article h2,
.content h2,
.content-card h2,
.page-content h2,
.public-main h2,
.public-container h2 {
  font-size: 19px !important;
  line-height: 1.32 !important;
  font-weight: 780 !important;
  margin-top: 0.9rem !important;
  margin-bottom: 0.5rem !important;
}

main h3,
article h3,
.content h3,
.content-card h3,
.page-content h3,
.public-main h3,
.public-container h3 {
  font-size: 16.5px !important;
  line-height: 1.36 !important;
  font-weight: 750 !important;
  margin-top: 0.75rem !important;
  margin-bottom: 0.42rem !important;
}

/* ---------- Cards / Grid ---------- */
.content-card,
.public-card,
.site-card,
.info-card,
.news-card,
.oit-card,
.page-card,
.article-card {
  border-radius: 18px !important;
}

.oit-grid,
.info-grid,
.card-grid,
.public-grid,
.service-grid {
  gap: 14px !important;
}

.oit-card,
.info-card,
.public-card,
.content-card,
.site-card,
.news-card {
  padding: 16px !important;
}

.section-title,
.block-title,
.card-title {
  font-size: 19px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
}

.oit-title,
.info-title {
  font-size: 15.5px !important;
  line-height: 1.35 !important;
}

.oit-desc,
.info-desc,
.card-desc {
  font-size: 13.8px !important;
  line-height: 1.6 !important;
}

/* ---------- Navigation / Breadcrumb ---------- */
.breadcrumb,
.breadcrumb a,
nav.breadcrumb,
.breadcrumb-item {
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.nav a,
.public-nav a,
.site-nav a,
.top-nav a,
header a {
  font-size: 14px !important;
}

/* ---------- Badge ---------- */
.badge,
.badge-soft,
.post-badge,
.page-badge,
.category-badge {
  font-size: 12px !important;
}

/* ---------- Mobile First Polish ---------- */
@media (max-width: 768px) {
  .container,
  .public-container,
  .site-container,
  main,
  article {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  body h1 {
    font-size: 23px !important;
    line-height: 1.20 !important;
    letter-spacing: -0.25px !important;
  }

  body h2 {
    font-size: 18px !important;
    line-height: 1.30 !important;
  }

  body h3 {
    font-size: 15.5px !important;
    line-height: 1.35 !important;
  }

  body p,
  body li {
    font-size: 14.5px !important;
    line-height: 1.70 !important;
  }

  header h1,
  .site-header h1,
  .public-header h1,
  .public-hero h1,
  .site-hero h1,
  .school-hero h1,
  .hero h1,
  .brand h1,
  .site-brand h1 {
    font-size: 24px !important;
    line-height: 1.18 !important;
    letter-spacing: -0.3px !important;
    word-break: keep-all !important;
  }

  header p,
  .site-header p,
  .public-header p,
  .public-hero p,
  .site-hero p,
  .school-hero p,
  .hero p,
  .hero-subtitle,
  .site-subtitle {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
  }

  .hero,
  .public-hero,
  .site-hero,
  .school-hero,
  .hero-card,
  .public-header,
  .site-header {
    padding: 22px 18px !important;
    border-radius: 18px !important;
  }

  main h1,
  article h1,
  .content h1,
  .content-card h1,
  .page-content h1,
  .public-main h1,
  .public-container h1 {
    font-size: 21px !important;
    line-height: 1.25 !important;
    margin-top: 0.25rem !important;
    margin-bottom: 0.5rem !important;
  }

  main h2,
  article h2,
  .content h2,
  .content-card h2,
  .page-content h2,
  .public-main h2,
  .public-container h2 {
    font-size: 17px !important;
    line-height: 1.32 !important;
    margin-top: 0.8rem !important;
    margin-bottom: 0.45rem !important;
  }

  main h3,
  article h3,
  .content h3,
  .content-card h3,
  .page-content h3,
  .public-main h3,
  .public-container h3 {
    font-size: 15.5px !important;
  }

  .nav,
  .public-nav,
  .site-nav,
  .top-nav {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .nav a,
  .public-nav a,
  .site-nav a,
  .top-nav a,
  header a {
    font-size: 13px !important;
  }

  .oit-grid,
  .info-grid,
  .card-grid,
  .public-grid,
  .service-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .oit-card,
  .info-card,
  .public-card,
  .content-card,
  .site-card,
  .news-card,
  .page-card,
  .article-card {
    padding: 14px !important;
    border-radius: 16px !important;
  }

  .section-title,
  .block-title,
  .card-title {
    font-size: 17px !important;
  }
}

/* =====================================================
   OKSY3 Public Home Extra Sections
===================================================== */
.oksy3-home-section {
  margin: 22px 0;
}

.oksy3-home-card {
  background: #fff;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 20px;
  box-shadow: 0 14px 36px rgba(15, 23, 42, .06);
  padding: 20px;
  height: 100%;
}

.oksy3-home-kicker {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: #e0edff;
  color: #1d4ed8;
  font-size: 12.5px;
  font-weight: 800;
  margin-bottom: 10px;
}

.oksy3-home-title {
  font-size: 21px !important;
  line-height: 1.3 !important;
  font-weight: 850 !important;
  margin-bottom: 8px !important;
}

.oksy3-home-desc {
  color: #64748b;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
}

.oksy3-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.oksy3-quick-card {
  display: block;
  text-decoration: none;
  color: #0f172a;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  border: 1px solid rgba(148, 163, 184, .25);
  border-radius: 18px;
  padding: 16px;
  transition: .18s ease;
  height: 100%;
}

.oksy3-quick-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(37, 99, 235, .10);
  border-color: rgba(37, 99, 235, .28);
}

.oksy3-quick-icon {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #2563eb;
  color: #fff;
  font-size: 18px;
  margin-bottom: 10px;
}

.oksy3-quick-title {
  font-weight: 850;
  font-size: 15px;
  margin-bottom: 5px;
}

.oksy3-quick-desc {
  color: #64748b;
  font-size: 13.5px;
  line-height: 1.55;
}

.oksy3-highlight-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.oksy3-highlight-card {
  background: #fff;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 18px;
  padding: 16px;
  height: 100%;
}

.oksy3-highlight-label {
  color: #2563eb;
  font-size: 12.5px;
  font-weight: 850;
  margin-bottom: 8px;
}

.oksy3-highlight-title {
  font-size: 15.5px;
  font-weight: 850;
  margin-bottom: 6px;
}

.oksy3-highlight-text {
  color: #64748b;
  font-size: 13.5px;
  line-height: 1.6;
}

.oksy3-ita-banner {
  background: linear-gradient(135deg, #1d4ed8, #7c3aed);
  color: #fff;
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 18px 42px rgba(37, 99, 235, .18);
}

.oksy3-ita-banner h2 {
  color: #fff !important;
  font-size: 22px !important;
  margin-bottom: 8px !important;
}

.oksy3-ita-banner p {
  color: rgba(255,255,255,.88) !important;
  font-size: 14.5px !important;
}

.oksy3-ita-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 15px;
  border-radius: 999px;
  background: #fff;
  color: #1d4ed8;
  text-decoration: none;
  font-weight: 850;
  font-size: 14px;
}

@media (max-width: 768px) {
  .oksy3-quick-grid,
  .oksy3-highlight-grid {
    grid-template-columns: 1fr !important;
  }

  .oksy3-home-card,
  .oksy3-highlight-card,
  .oksy3-quick-card,
  .oksy3-ita-banner {
    padding: 14px !important;
    border-radius: 16px !important;
  }

  .oksy3-home-title {
    font-size: 18px !important;
  }

  .oksy3-ita-banner h2 {
    font-size: 18px !important;
  }
}

/* =====================================================
   OKSY3 Public Top Navigation Polish
===================================================== */

/* แถบเมนูด้านบน */
.public-pro-header,
.public-navbar,
.site-navbar,
.site-topbar,
header.public-header,
header.site-header {
  min-height: 72px !important;
}

/* โลโก้ + ชื่อโรงเรียน */
.public-pro-header .brand,
.public-pro-header .navbar-brand,
.site-navbar .navbar-brand,
.site-topbar .navbar-brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.public-pro-header .brand img,
.public-pro-header .navbar-brand img,
.site-navbar .navbar-brand img,
.site-topbar .navbar-brand img {
  width: 48px !important;
  height: 48px !important;
  object-fit: contain !important;
}

.public-pro-header .brand-title,
.public-pro-header .navbar-brand,
.site-navbar .navbar-brand,
.site-topbar .navbar-brand {
  font-size: 20px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  letter-spacing: -0.2px !important;
}

/* เมนูหลัก */
.public-pro-header nav a,
.public-pro-header .nav-link,
.public-navbar a,
.public-navbar .nav-link,
.site-navbar a,
.site-navbar .nav-link,
.site-topbar a,
.site-topbar .nav-link {
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  padding: 9px 10px !important;
  border-radius: 999px !important;
  color: rgba(255,255,255,.82) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

/* hover เมนู */
.public-pro-header nav a:hover,
.public-pro-header .nav-link:hover,
.public-navbar a:hover,
.public-navbar .nav-link:hover,
.site-navbar a:hover,
.site-navbar .nav-link:hover,
.site-topbar a:hover,
.site-topbar .nav-link:hover {
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
}

/* ปุ่มระบบหลัก */
.public-pro-header a[href*="index.php"],
.public-pro-header a[href*="/oksy3/"],
.public-pro-header .btn,
.public-navbar .btn,
.site-navbar .btn,
.site-topbar .btn {
  font-size: 13.5px !important;
  padding: 9px 14px !important;
  border-radius: 999px !important;
}

/* dropdown */
.public-pro-header .dropdown-menu,
.public-navbar .dropdown-menu,
.site-navbar .dropdown-menu,
.site-topbar .dropdown-menu {
  border-radius: 16px !important;
  border: 1px solid rgba(148, 163, 184, .22) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .16) !important;
  padding: 8px !important;
}

.public-pro-header .dropdown-menu a,
.public-navbar .dropdown-menu a,
.site-navbar .dropdown-menu a,
.site-topbar .dropdown-menu a {
  color: #1f2937 !important;
  font-size: 13.5px !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
}

/* จอขนาดกลาง ลดระยะเมนู */
@media (max-width: 1200px) {
  .public-pro-header nav a,
  .public-pro-header .nav-link,
  .public-navbar a,
  .public-navbar .nav-link,
  .site-navbar a,
  .site-navbar .nav-link,
  .site-topbar a,
  .site-topbar .nav-link {
    font-size: 13.2px !important;
    padding: 8px 7px !important;
  }

  .public-pro-header .brand-title,
  .public-pro-header .navbar-brand,
  .site-navbar .navbar-brand,
  .site-topbar .navbar-brand {
    font-size: 18px !important;
  }
}

/* มือถือ */
@media (max-width: 768px) {
  .public-pro-header,
  .public-navbar,
  .site-navbar,
  .site-topbar,
  header.public-header,
  header.site-header {
    min-height: auto !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .public-pro-header .brand img,
  .public-pro-header .navbar-brand img,
  .site-navbar .navbar-brand img,
  .site-topbar .navbar-brand img {
    width: 40px !important;
    height: 40px !important;
  }

  .public-pro-header .brand-title,
  .public-pro-header .navbar-brand,
  .site-navbar .navbar-brand,
  .site-topbar .navbar-brand {
    font-size: 16px !important;
    line-height: 1.25 !important;
  }

  .public-pro-header nav,
  .public-navbar nav,
  .site-navbar nav,
  .site-topbar nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 8px !important;
  }

  .public-pro-header nav a,
  .public-pro-header .nav-link,
  .public-navbar a,
  .public-navbar .nav-link,
  .site-navbar a,
  .site-navbar .nav-link,
  .site-topbar a,
  .site-topbar .nav-link {
    font-size: 12.8px !important;
    padding: 7px 9px !important;
  }
}

/* =====================================================
   OKSY3 Public Top Navigation Compact Final
===================================================== */

/* ลดความสูงแถบบน */
.public-pro-header {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* จัดด้านใน header ให้เป็นแถวเดียวบนจอใหญ่ */
.public-pro-header .container,
.public-pro-header .public-container,
.public-pro-header .site-container,
.public-pro-header .nav-wrap,
.public-pro-header .navbar,
.public-pro-header .header-inner {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
}

/* โลโก้และชื่อโรงเรียน */
.public-pro-header .brand,
.public-pro-header .navbar-brand,
.public-pro-header .site-brand {
  flex: 0 0 auto !important;
  min-width: 250px !important;
}

.public-pro-header .brand-title,
.public-pro-header .navbar-brand,
.public-pro-header .site-brand {
  font-size: 19px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

/* กลุ่มเมนู */
.public-pro-header nav,
.public-pro-header .nav,
.public-pro-header .navbar-nav,
.public-pro-header .menu {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}

/* เมนูแต่ละรายการ */
.public-pro-header nav a,
.public-pro-header .nav a,
.public-pro-header .nav-link,
.public-pro-header .menu a {
  font-size: 13.5px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  padding: 8px 8px !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
}

/* ปุ่มระบบหลักด้านขวา */
.public-pro-header .system-btn,
.public-pro-header .main-system-btn,
.public-pro-header a[href*="index.php"]:last-child,
.public-pro-header a[href*="/oksy3/"]:last-child {
  flex: 0 0 auto !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  padding: 9px 16px !important;
  min-width: 92px !important;
  text-align: center !important;
}

/* จอขนาดกลาง ให้ลดลงอีกนิด */
@media (max-width: 1280px) {
  .public-pro-header .brand,
  .public-pro-header .navbar-brand,
  .public-pro-header .site-brand {
    min-width: 220px !important;
  }

  .public-pro-header .brand-title,
  .public-pro-header .navbar-brand,
  .public-pro-header .site-brand {
    font-size: 17px !important;
  }

  .public-pro-header nav,
  .public-pro-header .nav,
  .public-pro-header .navbar-nav,
  .public-pro-header .menu {
    gap: 4px !important;
  }

  .public-pro-header nav a,
  .public-pro-header .nav a,
  .public-pro-header .nav-link,
  .public-pro-header .menu a {
    font-size: 12.8px !important;
    padding: 7px 6px !important;
  }
}

/* มือถือ ให้เรียงลงอย่างเป็นระเบียบ */
@media (max-width: 768px) {
  .public-pro-header .container,
  .public-pro-header .public-container,
  .public-pro-header .site-container,
  .public-pro-header .nav-wrap,
  .public-pro-header .navbar,
  .public-pro-header .header-inner {
    display: block !important;
  }

  .public-pro-header .brand,
  .public-pro-header .navbar-brand,
  .public-pro-header .site-brand {
    min-width: 0 !important;
    margin-bottom: 8px !important;
  }

  .public-pro-header .brand-title,
  .public-pro-header .navbar-brand,
  .public-pro-header .site-brand {
    font-size: 16px !important;
    white-space: normal !important;
  }

  .public-pro-header nav,
  .public-pro-header .nav,
  .public-pro-header .navbar-nav,
  .public-pro-header .menu {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .public-pro-header nav a,
  .public-pro-header .nav a,
  .public-pro-header .nav-link,
  .public-pro-header .menu a {
    font-size: 12.5px !important;
    padding: 7px 9px !important;
  }
}

/* =====================================================
   OKSY3 Bootstrap Public Navbar Final
   จับเมนูจริง: nav.navbar.navbar-expand-lg.navbar-dark.bg-dark
===================================================== */

nav.navbar.navbar-expand-lg.navbar-dark.bg-dark {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  min-height: 64px !important;
  background: #111827 !important;
}

nav.navbar.navbar-expand-lg.navbar-dark.bg-dark .container-fluid,
nav.navbar.navbar-expand-lg.navbar-dark.bg-dark .container {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 14px !important;
}

/* โลโก้ + ชื่อโรงเรียน */
nav.navbar.navbar-expand-lg.navbar-dark.bg-dark .navbar-brand {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-right: 18px !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

nav.navbar.navbar-expand-lg.navbar-dark.bg-dark .navbar-brand img {
  width: 44px !important;
  height: 44px !important;
  object-fit: contain !important;
}

/* กล่องเมนู */
nav.navbar.navbar-expand-lg.navbar-dark.bg-dark .navbar-collapse {
  flex-grow: 1 !important;
}

nav.navbar.navbar-expand-lg.navbar-dark.bg-dark .navbar-nav {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  width: 100% !important;
  justify-content: flex-end !important;
}

/* รายการเมนู */
nav.navbar.navbar-expand-lg.navbar-dark.bg-dark .nav-item {
  flex: 0 0 auto !important;
}

nav.navbar.navbar-expand-lg.navbar-dark.bg-dark .nav-link {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  font-size: 13.2px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  padding: 8px 7px !important;
  border-radius: 999px !important;
  color: rgba(255,255,255,.82) !important;
}

nav.navbar.navbar-expand-lg.navbar-dark.bg-dark .nav-link:hover,
nav.navbar.navbar-expand-lg.navbar-dark.bg-dark .nav-link:focus {
  color: #fff !important;
  background: rgba(255,255,255,.10) !important;
}

/* dropdown */
nav.navbar.navbar-expand-lg.navbar-dark.bg-dark .dropdown-menu {
  border-radius: 14px !important;
  padding: 8px !important;
  border: 1px solid rgba(148, 163, 184, .25) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .18) !important;
}

nav.navbar.navbar-expand-lg.navbar-dark.bg-dark .dropdown-menu .dropdown-item {
  font-size: 13.2px !important;
  line-height: 1.35 !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
}

/* ปุ่มระบบหลัก */
nav.navbar.navbar-expand-lg.navbar-dark.bg-dark .btn.btn-outline-light {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  padding: 9px 15px !important;
  border-radius: 999px !important;
  margin-left: 10px !important;
}

/* จอ 1200 ลงมา ลดอีกนิดไม่ให้ตัดบรรทัด */
@media (max-width: 1280px) {
  nav.navbar.navbar-expand-lg.navbar-dark.bg-dark .navbar-brand {
    font-size: 16.5px !important;
    margin-right: 10px !important;
  }

  nav.navbar.navbar-expand-lg.navbar-dark.bg-dark .navbar-brand img {
    width: 40px !important;
    height: 40px !important;
  }

  nav.navbar.navbar-expand-lg.navbar-dark.bg-dark .navbar-nav {
    gap: 3px !important;
  }

  nav.navbar.navbar-expand-lg.navbar-dark.bg-dark .nav-link {
    font-size: 12.4px !important;
    padding: 7px 5px !important;
  }

  nav.navbar.navbar-expand-lg.navbar-dark.bg-dark .btn.btn-outline-light {
    font-size: 12.4px !important;
    padding: 8px 12px !important;
    margin-left: 6px !important;
  }
}

/* มือถือ ให้ Bootstrap collapse ทำงานปกติ */
@media (max-width: 991.98px) {
  nav.navbar.navbar-expand-lg.navbar-dark.bg-dark .container-fluid,
  nav.navbar.navbar-expand-lg.navbar-dark.bg-dark .container {
    flex-wrap: wrap !important;
  }

  nav.navbar.navbar-expand-lg.navbar-dark.bg-dark .navbar-brand {
    font-size: 15.5px !important;
    white-space: normal !important;
  }

  nav.navbar.navbar-expand-lg.navbar-dark.bg-dark .navbar-collapse {
    width: 100% !important;
    margin-top: 8px !important;
  }

  nav.navbar.navbar-expand-lg.navbar-dark.bg-dark .navbar-nav {
    align-items: stretch !important;
    gap: 4px !important;
  }

  nav.navbar.navbar-expand-lg.navbar-dark.bg-dark .nav-link {
    font-size: 13px !important;
    padding: 8px 10px !important;
    white-space: normal !important;
  }

  nav.navbar.navbar-expand-lg.navbar-dark.bg-dark .btn.btn-outline-light {
    display: inline-flex !important;
    justify-content: center !important;
    margin-left: 0 !important;
    margin-top: 8px !important;
  }
}

/* =====================================================
   OKSY3 Public Dropdown Compact Scroll
   ทำให้ dropdown ยาว ๆ เช่น ITA/OIT ไม่บังทั้งหน้า
===================================================== */

nav.navbar.navbar-expand-lg.navbar-dark.bg-dark {
  position: sticky !important;
  top: 0 !important;
  z-index: 3000 !important;
}

nav.navbar.navbar-expand-lg.navbar-dark.bg-dark .dropdown-menu {
  z-index: 5000 !important;
  min-width: 320px !important;
  max-width: 460px !important;
  max-height: 68vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 8px !important;
  margin-top: 8px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(148, 163, 184, .28) !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .24) !important;
  background: rgba(255,255,255,.98) !important;
  backdrop-filter: blur(10px) !important;
}

nav.navbar.navbar-expand-lg.navbar-dark.bg-dark .dropdown-menu .dropdown-item {
  font-size: 12.8px !important;
  line-height: 1.38 !important;
  font-weight: 700 !important;
  color: #111827 !important;
  white-space: normal !important;
  padding: 7px 10px !important;
  border-radius: 10px !important;
}

nav.navbar.navbar-expand-lg.navbar-dark.bg-dark .dropdown-menu .dropdown-item:hover {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
}

/* scrollbar ให้ดูเรียบร้อย */
nav.navbar.navbar-expand-lg.navbar-dark.bg-dark .dropdown-menu::-webkit-scrollbar {
  width: 8px;
}

nav.navbar.navbar-expand-lg.navbar-dark.bg-dark .dropdown-menu::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}

nav.navbar.navbar-expand-lg.navbar-dark.bg-dark .dropdown-menu::-webkit-scrollbar-track {
  background: #f8fafc;
  border-radius: 999px;
}

@media (max-width: 991.98px) {
  nav.navbar.navbar-expand-lg.navbar-dark.bg-dark {
    position: sticky !important;
    top: 0 !important;
  }

  nav.navbar.navbar-expand-lg.navbar-dark.bg-dark .dropdown-menu {
    min-width: 100% !important;
    max-width: 100% !important;
    max-height: 55vh !important;
    box-shadow: none !important;
    border-radius: 12px !important;
  }

  nav.navbar.navbar-expand-lg.navbar-dark.bg-dark .dropdown-menu .dropdown-item {
    font-size: 12.8px !important;
    padding: 8px 10px !important;
  }
}