@font-face {
  font-family: 'Anakotmai';
  src: url('fonts/Anakotmai-Light.ttf') format('truetype');
}

body {
  font-family: 'Anakotmai', sans-serif;
  background-color: #f9f9f9;
  margin: 0;
  padding: 0;
}

.hero {
  background: url('img/bgtop.webp') no-repeat center center/cover;
  height: 120vh;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
  position: relative;
}

.hero::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.35);
}

.hero .container {
  position: relative;
  z-index: 2;
}

.title-highlight span {
  color: #ffca28;
}

.search-bar .form-control {
  border: none;
  height: 50px;
}

.search-bar .btn {
  height: 50px;
  font-weight: 600;
}

.search-bar .btn-primary {
  background-color: #00bcd4;
  border-color: #00bcd4;
}

.search-bar .btn-primary:hover {
  background-color: #0097a7;
}

.tag-section .badge {
  border-radius: 25px;
  font-size: 1.1rem;
  padding: 12px 20px;
  cursor: pointer;
  transition: 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
  text-shadow: none;
}

.tag-section .badge i {
  color: #0436f2;
  transition: 0.2s;
  text-shadow: none;
}

.tag-section .badge:hover {
  background-color: #ffca28;
  color: #000;
}

.tag-section .badge:hover i {
  color: #000;
}

.recommend-wrapper {
  background-color: #ffffff;
  border-radius: 1rem; /* 16px */
  padding: 1.5rem 2rem; /* 24px 32px */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid #e9e8e4;
}

/* 2. สไตล์ปุ่มเมนูด้านบน (ปุ่มที่ไม่ได้เลือก) */
.recommend-tabs .btn-outline-custom {
  color: #6c757d; /* สีเทา */
  border-color: #ced4da; /* สีเทาอ่อน */
  background-color: #fff;
}
.recommend-tabs .btn-outline-custom:hover {
  background-color: #f8f9fa; /* สีเทาอ่อนมากเวลากด */
}

/* 7. ซ่อน scrollbar แนวนอนที่ติดมากับ browser */
.horizontal-scroll-container {
  overflow-x: hidden;
  scroll-behavior: smooth; /* ทำให้การเลื่อนนุ่มนวล */
  padding-bottom: 5px; /* กัน shadow ของรูปโดนตัด */
}

/* 1, 6. สไตล์ปุ่มเลื่อนซ้าย-ขวา แบบในรูป 100% */
.custom-scroll-control {
  position: absolute;
  top: 40%; /* จัดกึ่งกลางแนวตั้ง (ปรับได้ตามความสูงรูป) */
  transform: translateY(-50%);
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 50%; /* ทำให้กลม */
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 10;
  transition: all 0.2s ease;
}
.custom-scroll-control:hover {
  background-color: #f8f9fa;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.custom-scroll-control.prev {
  left: -20px; /* ยื่นออกมาครึ่งนึง */
}
.custom-scroll-control.next {
  right: -20px; /* ยื่นออกมาครึ่งนึง */
}
.custom-scroll-control i {
  font-size: 1rem;
  /* font-weight: bold; (Font Awesome ไม่ต้อง) */
}

/*
 * โค้ดสำหรับกำหนดขนาดการ์ด 400px และ สัดส่วน 400x198
 */

/* กำหนดความกว้างของการ์ดแต่ละใบ */
.horizontal-scroll-container .row.flex-nowrap .card-item-fixed-width {
  flex: 0 0 auto; /* ป้องกันไม่ให้ item ยืดหรือหด */
  width: 400px;  /* กำหนดความกว้างคงที่ 400px */
  /* เราใช้ g-3 (gap) ใน .row แล้ว ไม่ต้องใช้ margin-right */
}

/* สไตล์การ์ด (เอาเส้นขอบและเงาเดิมออก) */
.horizontal-scroll-container .card {
  box-shadow: none;
}
.horizontal-scroll-container .card-img-top {
  aspect-ratio: 400 / 198; /* สัดส่วน 400px กว้าง ต่อ 198px สูง */
  object-fit: cover;
  width: 100%;
}

.latest-news .section-title {
  font-size: 1.75rem;
  font-weight: 700;
}

.news-card-lg img {
  height: 350px;
  object-fit: cover;
  border-radius: 8px;
}

.news-card-sm img {
  height: 160px;
  object-fit: cover;
  border-radius: 6px;
}

.news-card-lg .card-title {
  font-size: 1.25rem;
  font-weight: 600;
}

.news-card-sm .card-title {
  font-size: 1rem;
  font-weight: 500;
}

.news-date {
  font-size: 0.85rem;
  color: #28a745; /* สีเขียวตามตัวอย่าง */
  margin-top: 4px;
}

.nav-tabs .nav-link {
  color:#003366;
  font-weight:600;
  border:none;
  border-bottom:3px solid transparent;
}
.nav-tabs .nav-link.active {
  border-bottom:3px solid #003366;
  color:#003366;
}
.card:hover {
  transform: translateY(-3px);
  transition: all 0.2s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.accom-card {
background-color: #fff;
color: #000;
border: none;
overflow: hidden;
}

.card-img-top {
width: 100%;
}