/* MPKSSK — custom styles */
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&display=swap');

/* ── โทนสีฟ้าสด-ขาว ── */
:root {
  --sky:       #1e88e5;
  --sky-dark:  #1565c0;
  --sky-light: #e3f2fd;
  --sky-pale:  #f5fbff;
}

/* พื้นหลัง — ขาว */
body { background-color: #fff !important; }

/* ── Navbar ── */
.w3-top .w3-theme-d2,
#navDemo             { background-color: var(--sky) !important; color: #fff !important; }
.w3-top .w3-theme-d4 { background-color: var(--sky-dark) !important; color: #fff !important; }
.w3-top .w3-hover-white:hover { background-color: rgba(255,255,255,.2) !important; color: #fff !important; }

/* Popup modal header */
.w3-modal .w3-theme-d2 { background-color: var(--sky) !important; color: #fff !important; }

/* ── Accordion / ปุ่มเมนูลัด ── */
.w3-theme-l1 { background-color: var(--sky) !important; color: #fff !important; }
.w3-theme-l2 { background-color: #bbdefb !important; color: var(--sky-dark) !important; }
.w3-theme-l3 { background-color: var(--sky-light) !important; color: var(--sky-dark) !important; }
.w3-theme-l4 { background-color: var(--sky-pale)  !important; color: var(--sky-dark) !important; }

/* ── Buttons ── */
.w3-theme    { background-color: var(--sky)      !important; color: #fff !important; }
.w3-theme-d1 { background-color: var(--sky-dark) !important; color: #fff !important; }

/* ── Tags ── */
.w3-tag.w3-theme-d3 { background-color: var(--sky) !important; color: #fff !important; }

/* ── text / icon ── */
.w3-text-theme { color: var(--sky) !important; }

/* ── border ── */
.w3-theme-border { border-color: #90caf9 !important; }

/* ── Dropdown ── */
.w3-dropdown-content { border-top: 3px solid var(--sky); }
.w3-dropdown-content .w3-bar-item:hover { background: var(--sky-light) !important; color: var(--sky-dark) !important; }

/* ── Hover ทั่วไป — แทนสีเทาด้วยฟ้าอ่อน ── */
.w3-button:hover,
.w3-bar-item.w3-button:hover { background-color: var(--sky-light) !important; color: var(--sky-dark) !important; }

/* ยกเว้น navbar และปุ่ม primary ที่มีสีอยู่แล้ว */
.w3-top .w3-button:hover,
.w3-top .w3-bar-item.w3-button:hover { background-color: var(--sky-light) !important; color: var(--sky-dark) !important; }

/* ── Cards ── */
.w3-card, .w3-card-4 {
  box-shadow: 0 2px 12px rgba(30,136,229,.10);
  border-radius: 12px !important;
  overflow: hidden;
}

/* กรอบทั่วไป */
.w3-round  { border-radius: 12px !important; }
.w3-round-large { border-radius: 16px !important; }

/* ปุ่ม */
.w3-button { border-radius: 8px !important; }
.w3-button.w3-block { border-radius: 8px !important; }

/* input */
.w3-input, .w3-select { border-radius: 8px !important; }

/* tag / badge */
.w3-tag { border-radius: 20px !important; }

/* ── Footer ── */
footer.w3-theme-d3 { background-color: var(--sky)      !important; }
footer.w3-theme-d5 { background-color: var(--sky-dark) !important; }

/* ── Font ── */
html, body,
h1, h2, h3, h4, h5, h6,
p, li, td, th, label,
input, select, textarea, button {
  font-family: 'Sarabun', 'Open Sans', sans-serif !important;
}

html { font-size: 17px; }
body { font-size: 1rem; line-height: 1.7; }

h1 { font-size: 2rem;    }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.5rem;  }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem;  }
h6 { font-size: 1rem;    }

p, td, th, li { font-size: 1rem; }

.w3-bar-item, .w3-bar-item.w3-button { font-size: inherit; }
.w3-dropdown-content .w3-bar-item { font-size: 1rem; padding: 10px 16px; }

/* ── Slideshow ── */
.slide { display: none; }
.slide.active { display: block; }

/* ── Gallery ── */
.w3-half img { cursor: pointer; }

/* ── Lightbox ── */
#lightbox {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.85); z-index: 999;
  align-items: center; justify-content: center;
}