body { font-family: 'Sarabun', sans-serif; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: #94A3B8; border-radius: 8px; }

/* แท็บสลับหน้า */
.nav-link {
  color: #E2E8F0;
  transition: all 0.2s;
}
.nav-link:hover {
  background-color: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
}
.nav-link.active {
  background-color: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
  border-bottom: 3px solid #FFFFFF;
  font-weight: bold;
}

/* UI Components */
.chip { transition: all .15s ease; }
.chip.active {
  background-color: #0B4A8F; color: #fff; border-color: #0B4A8F;
  box-shadow: 0 2px 8px rgba(11,74,143,.35);
}

.toggle-side.active-up { background-color: #059669; border-color: #059669; color: #ffffff; }
.toggle-side.active-down { background-color: #d97706; border-color: #d97706; color: #ffffff; }

.result-btn.active-ok { background-color: #1E8E5A; color: #fff; border-color: #1E8E5A; }
.result-btn.active-no { background-color: #DC2626; color: #fff; border-color: #DC2626; }

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(30%) sepia(70%) saturate(1000%) hue-rotate(180deg);
}