:root {
  --bs-primary: #d07078;
  --bs-primary-rgb: 208, 112, 120;
  --ink: #4b3b3c;
  --cream: #fffaf5;
}

body {
  font-family: 'Mali', cursive;
  color: var(--ink);
  background: var(--cream);
}

.hero {
  min-height: 500px;
  color: white;
  background: linear-gradient(110deg, #6e454c, #be7078);
}

.hero-card {
  color: var(--ink);
  background: rgba(255, 255, 255, .94);
  border-radius: 1.25rem;
}

.section-title {
  color: #b4535e;
}

.room-card,
.gallery-card {
  overflow: hidden;
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 5px 20px #573c3c14;
}

.room-card img,
.gallery-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.price {
  color: #b4535e;
  font-size: 1.15rem;
  font-weight: 700;
}

.calendar td {
  height: 72px;
  vertical-align: top;
}

.calendar .booked {
  color: #9c3842;
  background: #f8d7da;
}

.calendar .available {
  background: #e7f5ec;
}

.calendar .today {
  outline: 3px solid #d07078;
  outline-offset: -3px;
}

.booking-side {
  position: sticky;
  top: 90px;
}

.thumb {
  width: 100px;
  height: 80px;
  cursor: pointer;
  object-fit: cover;
  border-radius: .5rem;
}

.admin-nav {
  min-height: 100vh;
  background: #443033;
}

.admin-nav a {
  display: block;
  padding: .7rem 1rem;
  color: #fff;
  text-decoration: none;
}

.admin-nav a:hover {
  background: #61464a;
}

.modal-img {
  max-height: 75vh;
  object-fit: contain;
}

.mobile-booking-btn {
  display: none;
}

.header-social a,
.header-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-left: .35rem;
  color: #b4535e;
  font-size: 1.3rem;
  text-decoration: none;
  background: #f8e5e7;
  border-radius: 50%;
}

.header-social a:hover,
.header-social-link:hover {
  color: #fff;
  background: #d07078;
}

.form-control,
.form-select,
.btn {
  min-height: 44px;
}

/* แท็บเล็ต */
@media (max-width: 991px) {
  .admin-nav {
    min-height: auto;
  }

  .hero {
    min-height: 420px;
  }

  .booking-side {
    position: static;
  }

  .calendar td {
    height: 58px;
    font-size: .86rem;
  }
}

/* โทรศัพท์มือถือ */
@media (max-width: 767px) {
  body {
    padding-bottom: 70px;
  }

  .navbar-brand {
    font-size: 1rem;
  }

  .hero {
    min-height: 400px;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .hero .lead {
    font-size: 1.05rem;
  }

  .hero-card {
    padding: 2rem 1rem !important;
  }

  .room-card img,
  .gallery-card img {
    height: 180px;
  }

  .calendar {
    min-width: 490px;
  }

  .calendar td {
    height: 54px;
    padding: .35rem !important;
  }

  .calendar small {
    font-size: .65rem;
  }

  .mobile-booking-btn {
    position: fixed;
    z-index: 1030;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    padding: .8rem 1rem;
    color: #fff;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    background: #d07078;
    box-shadow: 0 -3px 12px #0002;
  }

  .mobile-booking-btn:active,
  .mobile-booking-btn:hover {
    color: #fff;
    background: #b4535e;
  }

  .thumb {
    width: 80px;
    height: 62px;
  }

  .modal-dialog {
    margin: .5rem;
  }

  .modal-img {
    max-height: 65vh;

  }
  .syne-font {
    font-family: 'Syne', sans-serif !important;
    font-weight: 700; /* ปรับระดับความหนาได้ตั้งแต่ 400 (ปกติ) ถึง 800 (หนามาก) */

  }

  .syne-font {
    font-family: 'Syne', sans-serif !important;
   
  }
}