/* ============================================================
   Portal Index — Draft V4 "Blue + White Wavy"
   Theme: Clean blue (#3D8DF9) + white tints
   Encoding: UTF-8
   ============================================================ */

/* ---- Global font override ---- */
:root { --bs-body-font-family: 'Noto Sans Thai', 'Sarabun', sans-serif; }
html, body,
body :not(i):not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.glyphicon):not([class^="glyphicon-"]):not([class*=" glyphicon-"]) {
  font-family: 'Noto Sans Thai', 'Sarabun', sans-serif !important;
}

/* ---- Nav/footer tokens (rules outside .dv4-scope need these) ---- */
.dv4-active-body {
  --primary:#3D8DF9;
  --primary-500:#3D8DF9;
  --primary-600:#2772dc;
  --primary-700:#1d5cb8;
  --ink:#1e2a3a;
  --ink-soft:#3a4a61;
  --muted:#6b7a91;
  --line:#dbe6f5;
}

/* ---- Tokens ---- */
.dv4-scope {
  --primary:#3D8DF9;
  --primary-50:#eaf3ff;
  --primary-100:#d6e7ff;
  --primary-200:#aecffe;
  --primary-300:#7bb2fc;
  --primary-400:#5aa1fb;
  --primary-500:#3D8DF9;
  --primary-600:#2772dc;
  --primary-700:#1d5cb8;
  --primary-800:#194a91;
  --sky-50:#f3f8ff;
  --sky-100:#e6f1ff;
  --sky-200:#cfe3ff;
  --white-soft:#fbfdff;
  --ink:#1e2a3a;
  --ink-soft:#3a4a61;
  --muted:#6b7a91;
  --line:#dbe6f5;
  --line-soft:#e8eff9;
  --radius-md:14px;
  --radius-lg:18px;
  --radius-xl:24px;
  --radius-2xl:32px;
}

.dv4-scope, .dv4-scope * { box-sizing: border-box; }

/* ---- Body bg (blue + white layered gradient) ---- */
html body.dv4-active-body,
.dv4-active-body {
  background:
    radial-gradient(circle at 8% 6%, rgba(61,141,249,.22), transparent 38%),
    radial-gradient(circle at 92% 10%, rgba(174,207,254,.45), transparent 42%),
    radial-gradient(circle at 5% 92%, rgba(123,178,252,.32), transparent 40%),
    radial-gradient(circle at 95% 92%, rgba(61,141,249,.20), transparent 40%),
    linear-gradient(180deg, #ffffff 0%, #f3f8ff 45%, #e6f1ff 100%) !important;
  background-color: #f3f8ff !important;
  background-attachment: fixed !important;
  min-height: 100vh !important;
}
.dv4-active-body #fh5co-page,
.dv4-active-body #fh5co-wrapper { background: transparent !important; }
.dv4-active-body #fh5co-header-section,
.dv4-active-body .nav-header { background: transparent !important; }
.dv4-active-body #fh5co-logo h1 { color: var(--ink) !important; }
.dv4-active-body .lisswu li {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  margin: 0 5px !important;
  padding: 0 !important;
  box-shadow: 0 4px 12px -4px rgba(61,141,249,.15);
  transition: all .25s;
  vertical-align: middle;
}
.dv4-active-body .lisswu li a {
  display: inline-block !important;
  padding: 10px 20px !important;
  color: var(--ink) !important;
  font-weight: 500;
  border-radius: 999px;
}
.dv4-active-body .lisswu li:hover {
  background: var(--primary-500) !important;
  border-color: transparent !important;
  box-shadow: 0 10px 22px -6px rgba(61,141,249,.45);
  transform: translateY(-2px);
}
.dv4-active-body .lisswu li:hover a { font-weight: 600; }
.dv4-active-body .lisswu li.active {
  background: linear-gradient(135deg, var(--primary-500), var(--primary-700)) !important;
  border-color: transparent !important;
  box-shadow: 0 10px 22px -6px rgba(61,141,249,.40);
}
.dv4-active-body .lisswu li.active a { color: #fff !important; font-weight: 600; }
.dv4-active-body #footer {
  height: 70px !important;
  background: rgba(255,255,255,.72) !important;
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.dv4-active-body #footer p { color: var(--ink-soft) !important; }
.dv4-active-body #my-btn-go-to-top {
  background: var(--primary-500) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 18px -4px rgba(61,141,249,.45);
}

/* ---- Scope wrapper ---- */
.dv4-scope {
  position: relative;
  padding: 20px 60px 60px;
  color: var(--ink);
}
.dv4-wrap { max-width: 1180px; margin: 0 auto; }

/* ---- Floating decorative blobs ---- */
.dv4-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}
.dv4-blob-1 { width: 260px; height: 260px; background: var(--primary-200); top: 10px; left: -60px; }
.dv4-blob-2 { width: 220px; height: 220px; background: var(--primary-100); top: 40px; right: -40px; opacity: .65; }
.dv4-blob-3 { width: 300px; height: 300px; background: var(--primary-300); bottom: 80px; left: 30%; opacity: .30; }

/* ---- Hero ---- */
.dv4-hero {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 24px 16px 14px;
}
.dv4-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--ink-soft);
  box-shadow: 0 4px 14px -4px rgba(61,141,249,.22);
  margin-bottom: 16px;
}
.dv4-hero-chip i { color: var(--primary-500); }
.dv4-hero h1 {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: .2px;
  color: var(--ink);
  line-height: 1.25;
}
.dv4-hero h1 .dv4-hi {
  background: linear-gradient(120deg, var(--primary-400), var(--primary-600) 55%, var(--primary-800));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.dv4-hero p {
  font-size: 14.5px;
  color: var(--muted);
  max-width: 580px;
  margin: 0 auto;
}

/* ---- Wave divider ---- */
.dv4-wave {
  display: block;
  width: 100%;
  line-height: 0;
  margin: 0;
}

/* ---- Login card wrap ---- */
.dv4-login-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin: 20px auto 30px;
}
.dv4-login {
  width: 100%;
  max-width: 500px;
  background: #fff;
  border-radius: var(--radius-2xl);
  padding: 32px 28px 28px;
  box-shadow:
    0 30px 60px -20px rgba(61,141,249,.22),
    0 12px 26px -10px rgba(123,178,252,.20),
    0 0 0 6px rgba(255,255,255,.55);
  position: relative;
}
.dv4-login::before {
  content: '';
  position: absolute;
  top: -14px; left: 28px; right: 28px;
  height: 6px;
  background: linear-gradient(90deg, var(--primary-300), var(--primary-500), var(--primary-700));
  border-radius: 999px;
  opacity: .90;
}

/* ---- Tabs ---- */
.dv4-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
}
.dv4-tab {
  flex: 1;
  padding: 12px 12px;
  background: var(--sky-50);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: all .25s;
}
.dv4-tab i { margin-right: 6px; }
.dv4-tab:hover { background: var(--primary-50); color: var(--ink); }
.dv4-tab.active {
  background: linear-gradient(135deg, var(--primary-500), var(--primary-700));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 20px -8px rgba(61,141,249,.45);
}
.dv4-tab.active.dv4-tab-alumni {
  background: linear-gradient(135deg, var(--primary-700), var(--primary-800));
}

.dv4-tab-panel { display: none; }
.dv4-tab-panel.active { display: block; }

.dv4-panel-title {
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 18px;
}

/* ---- Fields ---- */
.dv4-field {
  position: relative;
  margin-bottom: 14px;
}
.dv4-field-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary-500);
  font-size: 15px;
  z-index: 2;
  pointer-events: none;
}
.dv4-field input.dv4-input {
  width: 100%;
  height: 50px;
  padding: 0 46px 0 46px;
  background: var(--sky-50);
  border: 1.5px solid transparent;
  border-radius: 16px;
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: all .2s;
}
.dv4-field input.dv4-input::placeholder { color: #94a8c5; }
.dv4-field input.dv4-input:focus {
  background: #fff;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 4px rgba(61,141,249,.18);
}
.dv4-field .dv4-eye {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 4px;
  font-size: 15px;
}

/* ---- Buttons ---- */
.dv4-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.dv4-btn {
  flex: 1;
  min-width: 120px;
  padding: 13px 18px;
  border: none;
  border-radius: 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all .25s;
  text-decoration: none;
}
.dv4-btn-primary {
  background: linear-gradient(135deg, var(--primary-500), var(--primary-700));
  color: #fff;
}
.dv4-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 26px -8px rgba(61,141,249,.50);
  color: #fff;
}
.dv4-btn-primary.dv4-btn-alumni {
  background: linear-gradient(135deg, var(--primary-700), var(--primary-800));
}
.dv4-btn-primary.dv4-btn-alumni:hover {
  box-shadow: 0 14px 26px -8px rgba(29,92,184,.50);
}
.dv4-btn-ghost {
  background: var(--white-soft);
  color: var(--ink);
  border: 1px solid var(--line);
}
.dv4-btn-ghost:hover {
  background: var(--primary-50);
  color: var(--primary-700);
}

/* ---- Services head ---- */
.dv4-services-head {
  position: relative;
  z-index: 2;
  margin: 20px 0 18px;
  text-align: center;
}
.dv4-services-head .dv4-services-eyebrow {
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--primary-500);
  font-weight: 600;
  margin-bottom: 6px;
}
.dv4-services-head h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
}

/* ---- Services carousel ---- */
.dv4-services-wrap {
  position: relative;
  z-index: 2;
  padding: 0 12px;
}
.dv4-service {
  display: block;
  background: #fff;
  border-radius: var(--radius-xl);
  padding: 18px;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--line-soft);
  height: 100%;
  transition: all .25s;
  position: relative;
  overflow: hidden;
}
.dv4-service:hover {
  transform: translateY(-5px);
  color: var(--ink);
  text-decoration: none;
  border-color: var(--primary-200);
  box-shadow: 0 22px 40px -14px rgba(61,141,249,.22);
}

/* Service color variants — blue shade rotation */
.dv4-service-c1::before,
.dv4-service-c2::before,
.dv4-service-c3::before,
.dv4-service-c4::before,
.dv4-service-c5::before {
  content: '';
  position: absolute;
  top: -50%; left: -30%;
  width: 160%;
  height: 60%;
  border-radius: 50%;
  opacity: .35;
  filter: blur(30px);
  z-index: 0;
}
.dv4-service-c1::before { background: var(--primary-200); }
.dv4-service-c2::before { background: var(--primary-300); }
.dv4-service-c3::before { background: var(--primary-100); }
.dv4-service-c4::before { background: var(--primary-400); opacity: .25; }
.dv4-service-c5::before { background: var(--sky-200); }

.dv4-service-thumb {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 130px;
  border-radius: var(--radius-md);
  background-size: cover;
  background-position: center;
  margin-bottom: 14px;
}
.dv4-service-title {
  position: relative;
  z-index: 1;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
}

/* Owl overrides */
.dv4-owl .owl-stage { display: flex; padding: 6px 0 14px; }
.dv4-owl .owl-item { display: flex; }
.dv4-owl .owl-item > .dv4-service { flex: 1; }

.dv4-owl .owl-nav button.owl-prev,
.dv4-owl .owl-nav button.owl-next {
  position: absolute;
  top: 32%;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #fff !important;
  color: var(--primary-600) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 10px 22px -6px rgba(61,141,249,.20);
  font-size: 14px;
  transition: all .2s;
}
.dv4-owl .owl-nav button.owl-prev { left: -50px; }
.dv4-owl .owl-nav button.owl-next { right: -50px; }
.dv4-owl .owl-nav button.owl-prev:hover,
.dv4-owl .owl-nav button.owl-next:hover {
  background: linear-gradient(135deg, var(--primary-500), var(--primary-700)) !important;
  color: #fff !important;
  border-color: transparent !important;
  transform: scale(1.06);
}
.dv4-owl .owl-nav button.disabled { opacity: .35; cursor: not-allowed; }

.dv4-owl .owl-dots { text-align: center; margin-top: 14px; }
.dv4-owl .owl-dots .owl-dot span {
  width: 8px; height: 8px;
  margin: 4px;
  background: rgba(61,141,249,.25) !important;
  border-radius: 50%;
  display: inline-block;
  transition: all .2s;
}
.dv4-owl .owl-dots .owl-dot.active span,
.dv4-owl .owl-dots .owl-dot:hover span {
  background: var(--primary-500) !important;
  width: 22px;
  border-radius: 4px;
}

/* ---- Alumni mode (toggled via JS when ศิษย์เก่า tab active) — soft yellow ---- */
.dv4-login.dv4-mode-alumni::before {
  background: linear-gradient(90deg, #fef3c7, #fcd34d, #eab308);
}
.dv4-login.dv4-mode-alumni .dv4-tab.active.dv4-tab-alumni {
  background: linear-gradient(135deg, #fcd34d, #eab308) !important;
  color: #713f12 !important;
  box-shadow: 0 10px 20px -8px rgba(234,179,8,.45);
}
.dv4-login.dv4-mode-alumni .dv4-field-icon { color: #a16207; }
.dv4-login.dv4-mode-alumni .dv4-input {
  background: #fffbeb;
}
.dv4-login.dv4-mode-alumni .dv4-input:focus {
  background: #fff;
  border-color: #eab308;
  box-shadow: 0 0 0 4px rgba(234,179,8,.20);
}
.dv4-login.dv4-mode-alumni .dv4-btn-primary,
.dv4-login.dv4-mode-alumni .dv4-btn-primary.dv4-btn-alumni {
  background: linear-gradient(135deg, #facc15, #eab308) !important;
  color: #713f12 !important;
}
.dv4-login.dv4-mode-alumni .dv4-btn-primary:hover {
  box-shadow: 0 14px 26px -8px rgba(234,179,8,.50);
  color: #713f12 !important;
}

/* ============================================================
   Contact page additions (.dv4-contact-*)
   ============================================================ */
.dv4-contact-hero {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 22px 16px 8px;
}
.dv4-contact-hero h1 {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
}
.dv4-contact-hero h1 .dv4-hi {
  background: linear-gradient(120deg, var(--primary-400), var(--primary-600) 55%, var(--primary-800));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.dv4-contact-crumb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12.5px;
  color: var(--ink-soft);
  box-shadow: 0 4px 12px -4px rgba(61,141,249,.15);
}
.dv4-contact-crumb a { color: var(--primary-600); text-decoration: none; }
.dv4-contact-crumb a:hover { color: var(--primary-800); text-decoration: underline; }
.dv4-contact-crumb i { color: var(--primary-500); }

.dv4-contact-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 22px;
}
@media (max-width: 980px) {
  .dv4-contact-grid { grid-template-columns: 1fr; }
}

.dv4-card {
  background: #fff;
  border-radius: var(--radius-2xl);
  padding: 24px 26px;
  border: 1px solid var(--line-soft);
  box-shadow:
    0 18px 40px -16px rgba(61,141,249,.18),
    0 8px 18px -10px rgba(123,178,252,.18);
  position: relative;
  margin-bottom: 18px;
}
.dv4-card:last-child { margin-bottom: 0; }
.dv4-card::before {
  content: '';
  position: absolute;
  top: -10px; left: 24px; right: 24px;
  height: 5px;
  background: linear-gradient(90deg, var(--primary-300), var(--primary-500), var(--primary-700));
  border-radius: 999px;
  opacity: .85;
}
.dv4-card.dv4-card-warm::before {
  background: linear-gradient(90deg, #fef3c7, #fcd34d, #eab308);
}

.dv4-card-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}
.dv4-card-icon {
  width: 46px; height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary-500), var(--primary-700));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.dv4-card.dv4-card-warm .dv4-card-icon {
  background: linear-gradient(135deg, #facc15, #eab308);
  color: #713f12;
}
.dv4-card-head h3 {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.dv4-card-head p {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
}

.dv4-info-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line-soft);
  font-size: 14px;
  color: var(--ink-soft);
}
.dv4-info-row:last-child { border-bottom: none; }
.dv4-info-row i {
  width: 32px; height: 32px;
  border-radius: 10px;
  background: var(--sky-50);
  color: var(--primary-600);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.dv4-card.dv4-card-warm .dv4-info-row i {
  background: #fef3c7;
  color: #a16207;
}
.dv4-info-row a { color: var(--primary-700); text-decoration: none; font-weight: 500; }
.dv4-info-row a:hover { text-decoration: underline; }
.dv4-info-label { color: var(--muted); margin-right: 4px; }

.dv4-line-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  padding: 14px;
  background: var(--sky-50);
  border-radius: 14px;
}
.dv4-line-qr {
  width: 100px;
  border-radius: 10px;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 6px 14px -4px rgba(61,141,249,.20);
  transition: transform .25s;
}
.dv4-line-qr:hover { transform: scale(1.04); }
.dv4-line-body { font-size: 13px; color: var(--ink-soft); }
.dv4-line-body strong { color: var(--ink); display: block; margin-bottom: 4px; }

.dv4-map-card {
  background: #fff;
  border-radius: var(--radius-2xl);
  padding: 12px;
  border: 1px solid var(--line-soft);
  box-shadow:
    0 22px 46px -18px rgba(61,141,249,.22),
    0 10px 22px -10px rgba(123,178,252,.20);
  position: sticky;
  top: 20px;
}
.dv4-map-card img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: transform .25s;
}
.dv4-map-card img:hover { transform: scale(1.01); }
.dv4-map-caption {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  padding: 10px 0 4px;
}
.dv4-map-caption i { color: var(--primary-500); margin-right: 6px; }

/* ---- Resets ---- */
.dv4-scope .row { margin: 0; }
.dv4-scope img { max-width: 100%; height: auto; }