@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@100;200;300;400;500;600;700&display=swap");
body {
  font-family: "IBM Plex Sans Thai", sans-serif;
}

:root {
  --primary-orange: #31271f;
  --primary-blue: #007bff;
  --soft-gray: #f8f9fa;
}

.card-student {
  border-radius: 2rem;
  border: 1px solid #efefef;
  background: #fff;
  height: auto;
}

.st-img-lg {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  border: 4px solid #4a90e2;
  object-fit: cover;
}

.btn-booking {
  background-color: var(--primary-orange);
  color: white;
  border-radius: 3rem;
  font-size: 1.25rem;
  font-weight: bold;
}

.progress {
  height: 8px !important;
  border-radius: 10px;
  background-color: #e9ecef;
  margin: 12px 0;
}

.progress-bar-orange {
  background: linear-gradient(90deg, #ff8c00, #ffa500);
}

.btn-add-student {
  background-color: #f1f3f5 !important;
  color: var(--primary-blue) !important;
  border-radius: 0.75rem;
  font-weight: 500;
}

.mySwiper {
  width: 100%;
  padding-bottom: 0px !important;
}

.swiper-slide {
  width: 18rem !important;
  height: auto !important;
}

.swiper-pagination {
  position: relative !important;
  margin-top: 10px;
  bottom: 0 !important;
}

.swiper-pagination-bullet-active {
  background: var(--primary-blue) !important;
}