/* ============================================================
   Header (theo mẫu leclosdufil.com — xem LECLOSDUFIL_REFERENCE.md)
   Mặc định trong suốt (nằm đè lên hero), chữ trắng; khi cuộn trang
   (JS toggle .is-scrolled — xem add.js) chuyển nền navy.
   ============================================================ */
.main-content {
  background: url(../images/fivestar/bg-content.png) left top repeat #fff0;
}
.site-header {
  background-color: transparent;
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}

.site-header.is-scrolled {
  background-color: var(--cl-navy);
  box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.15);
}

.site-header .btn-menu,
.site-header .btn-menu .hamburger {
  color: var(--cl-white);
}

/* Nav cấp 1: font heading (Playfair Display) đậm, giống mẫu — size/gap đã giảm so với bản gốc
   (21px) vì menu thật của site có 11 mục + nhiều mục dài tiếng Việt, dùng nguyên size gốc sẽ tràn
   ngang trong khung container 1100px. Nếu menu rút gọn bớt mục sau này có thể tăng lại size. */
.site-header .menu > ul > li > a {
  color: var(--cl-white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.3125rem;
  margin: 0 0.5rem;
  white-space: nowrap;
}

/* !important bắt buộc: main.css (dùng chung nhiều site) đặt sẵn
   `.menu > ul > li > a:hover { color: var(--cl-s1) !important; }` cho menu mặc định — nếu không
   có !important ở đây thì rule đó vẫn thắng dù selector .site-header cụ thể hơn (đã xác minh thực tế
   trình duyệt render ra cl-s1 trước khi sửa). Chọn cl-s1 (vàng đồng) làm màu hover chính thức của nav
   vì đọc rõ trên cả nền trong suốt/ảnh (header ở đầu trang) lẫn nền navy (.is-scrolled khi cuộn) —
   dùng cl-main (đỏ) ở đây sẽ gần như vô hình khi header chuyển nền navy lúc cuộn. */
.site-header .menu > ul > li > a:hover {
  color: var(--cl-s1) !important;
}

.site-header .menu > ul > li > .btn-menu-sub {
  color: var(--cl-white);
}

/* Menu ngang tràn ở màn hình vừa (giữa lg và xl, trước khi container full 1100px) thì cho cuộn
   ngang thay vì vỡ layout/xuống dòng — cùng cách site đã áp dụng cho menu mobile trước đó. */
@media (min-width: 1024px) and (max-width: 1300px) {
  .site-header .menu {
    overflow-x: auto;
    max-width: 100%;
  }

  .site-header .menu > ul {
    flex-wrap: nowrap;
  }
}

/* ============================================================
   Icon/hiệu ứng chuyển động — "hồn" cho site
   ============================================================ */

/* Sợi chỉ "vẽ" dần từ trái sang phải bên dưới tiêu đề H2 khi cuộn tới, gắn với đúng câu chuyện
   thương hiệu thêu tay (embroidery) của site — dùng chung cơ chế WOW.js (thư viện đọc animation-name
   qua getComputedStyle nên nhận luôn keyframe tự đặt tên này, không cần thêm JS riêng). Chỉ áp dụng
   cho underline dạng w-full (About Us/Accommodation/Gastronomy/Wellness) — Gallery/Guests' Reviews
   dùng divider width cố định khác vai trò, không áp dụng để tránh animate sai chiều rộng đích. */
@keyframes threadDraw {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
.thread-draw {
  animation: threadDraw 1.2s ease forwards;
}

/* Nhấp nháy nhẹ liên tục cho nút "Book Your Stay" nổi cố định — không gắn WOW (chạy suốt, không chờ
   cuộn) để luôn nhắc người dùng có nút đặt phòng, tránh nút tĩnh im lìm giữa trang nhiều ảnh động khác.
   Màu rgba dùng đúng giá trị RGB của --cl-main (#a83829 = 168,56,41) vì box-shadow cần alpha rời,
   biến CSS hiện khai báo dạng hex nên không nội suy alpha trực tiếp được. */
@keyframes gentlePulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(168, 56, 41, 0.55);
  }
  50% {
    box-shadow: 0 0 0 0.625rem rgba(168, 56, 41, 0);
  }
}
.btn-pulse {
  animation: gentlePulse 2.5s ease-in-out infinite;
}

/* ============================================================
   Tab lọc dùng chung (.module-tabs/.tab-link/.tab-content) — cơ chế JS đã có sẵn từ trước trong
   script.js (GUI.clickTab) nhưng chưa từng có CSS ẩn tab không active ở đâu trong site (dùng lần
   đầu ở trang Experiences) — bổ sung ở đây để mọi nơi dùng lại được đúng ngay.
   ============================================================ */
.tab-content:not(.active) {
  display: none;
}

/* ============================================================
   Gallery masonry — kiểu "column-fill" giống nhamvillageresort.com/gallery/ (item position:absolute,
   left/top do JS tính theo chiều cao ảnh thật — xem add.js). Không dùng CSS columns vì CSS columns
   không hỗ trợ 1 item chiếm rộng gấp đôi cột (data-span="2") như ảnh phong cảnh nổi bật của Nham.
   Số cột khai theo CSS variable để JS đọc lại, tự đổi theo breakpoint mà không cần lặp code JS.
   ============================================================ */
.gallery-masonry {
  --gallery-cols: 2;
  --gallery-gap: 0.5rem;
}

@media (min-width: 768px) {
  .gallery-masonry {
    --gallery-cols: 4;
  }
}

@media (min-width: 1024px) {
  .gallery-masonry {
    --gallery-cols: 8;
    --gallery-gap: 0.5rem;
  }
}

.gallery-masonry .masonry-item {
  position: absolute;
  top: 0;
  left: 0;
  transition:
    left 0.3s ease,
    top 0.3s ease,
    width 0.3s ease,
    height 0.3s ease;
}

/* ============================================================
   FAQ accordion (Trang Travel tips — layout dạng dropdown giống tamcocgarden.com/travel-tips/).
   JS dùng lại đúng hàm slideToggle() có sẵn từ trước trong script.js (đang dùng cho submenu mobile),
   không viết thêm cơ chế animation mới.
   ============================================================ */
.faq-answer {
  display: none;
}

.faq-question.active .faq-icon {
  transform: rotate(45deg);
}

.faq-icon {
  transition: transform 0.3s ease;
}