/* Tailwind CSS Utilities for Smart Dental Clinic Homepage */
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.h-\[520px\] { height: 520px; }
.overflow-hidden { overflow: hidden; }
.bg-\[\#0b1e28\] { background-color: #0b1e28; }
.bg-black\/35 { background-color: rgba(0, 0, 0, 0.35); }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.opacity-0 { opacity: 0; }
.opacity-100 { opacity: 1; }
.invisible { visibility: hidden; }
.visible { visibility: visible; }
.transition-all { transition-property: all; }
.duration-300 { transition-duration: 300ms; }
.duration-1000 { transition-duration: 1000ms; }
.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
.object-cover { object-fit: cover; }
.object-center { object-position: center; }
.rounded-full { border-radius: 9999px; }
.font-bold { font-weight: 700; }
.tracking-wider { letter-spacing: 0.05em; }
.text-white { color: #ffffff !important; }
.bg-\[\#6db509\] { background-color: #6db509; }
.text-\[\#6db509\] { color: #6db509 !important; }
.bg-\[\#16A9BE\] { background-color: #16A9BE; }
.text-\[\#16A9BE\] { color: #16A9BE !important; }
.bg-\[\#544f8c\] { background-color: #544f8c; }
.text-\[\#544f8c\] { color: #544f8c !important; }
.drop-shadow-md { filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35)); }

/* Slider Typography: บรรทัดแรกตัวโต เด่นชัดกว่าบรรทัดล่าง */
.slide-badge {
  display: inline-block;
  padding: 10px 24px !important;
  font-size: 34px !important;
  line-height: 1.25 !important;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #ffffff !important;
  border-radius: 0;
  margin-bottom: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.slide-title {
  font-size: 26px !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  font-weight: 400;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

/* Slider Component State Rules */
.vanilla-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 1.2s;
  z-index: 1;
}
.vanilla-slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}
.vanilla-slide-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.05);
  transition: transform 6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.vanilla-slide.active .vanilla-slide-bg {
  transform: scale(1);
}

/* Slider Controls & Dots */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.45);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  z-index: 20;
  opacity: 0;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}
.vanilla-slider-container:hover .slider-arrow {
  opacity: 1;
}
.slider-arrow.prev { left: 20px; }
.slider-arrow.next { right: 20px; }
.slider-arrow:hover {
  background: #16A9BE;
  color: #ffffff;
  transform: translateY(-50%) scale(1.1);
}
.slider-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 20;
}
.slider-dot {
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.45);
  border: 2px solid #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
}
.slider-dot.active, .slider-dot:hover {
  background: #16A9BE;
  border-color: #16A9BE;
  transform: scale(1.25);
}

@media (max-width: 767px) {
  .h-\[520px\] { height: 380px; }
  .slide-badge {
    font-size: 20px !important;
    padding: 6px 18px !important;
    margin-bottom: 8px;
  }
  .slide-title {
    font-size: 16px !important;
  }
}
@media (min-width: 768px) {
  .slide-badge {
    font-size: 51px !important;
    padding: 12px 32px !important;
    margin-bottom: 20px;
  }
  .slide-title {
    font-size: 39px !important;
  }
  .md\:p-12 { padding: 3rem; }
}

@media (min-width: 1280px) {
  .slide-badge {
    font-size: 68px !important;
    padding: 16px 40px !important;
    margin-bottom: 24px;
  }
  .slide-title {
    font-size: 52px !important;
  }
}