/* ============================================================
   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 #f3ece3;
}
.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;
  line-height: 2.5rem;
  padding: 0 0.625rem;
  margin: 0 0.625rem;
  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-main) !important;
}

.site-header .menu > ul {
  gap: 0;
}

.site-header .group > button {
  font-family: var(--font-heading);
  font-weight: 700;
}

.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);
  }
}

/* ============================================================
   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;
  }
  .btn-pulse {
    animation: gentlePulse 2.5s ease-in-out infinite;
  }
}

.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(180deg);
}

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

.js-char-reveal {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.js-char-reveal.js-char-revealed-init {
  opacity: 1;
}

/* Mỗi ký tự "nảy" nhẹ + mờ dần khi hiện ra (thay vì chỉ opacity phẳng) — cảm giác chữ đang "kết tinh"
   lại thay vì chỉ bật/tắt, ấn tượng hơn cho banner trang chủ. cubic-bezier có overshoot nhẹ (1.4) tạo
   độ nảy tự nhiên khi ký tự đạt kích thước thật. */
.char-item {
  display: inline-block;
  opacity: 0;
  position: relative;
  transform: scale(0.55) translateY(0.2em);
  filter: blur(0.2rem);
  transition:
    opacity 0.28s ease,
    transform 0.32s cubic-bezier(0.34, 1.4, 0.64, 1),
    filter 0.28s ease;
}

.char-item.revealed {
  opacity: 1;
  transform: scale(1) translateY(0);
  filter: blur(0);
}

/* Khi xoá (erase), tắt hiệu ứng nảy/blur — chỉ mờ dần nhanh cho gọn, tránh cảm giác "nảy ngược" kỳ lạ
   lúc ký tự biến mất. */
.js-char-reveal.is-erasing .char-item {
  transition:
    opacity 0.12s ease,
    transform 0.12s ease;
}

/* Dấu nháy máy chữ đi theo ký tự hiện tại — màu vàng đồng (--cl-s1) đúng màu nhấn của site, có phát
   sáng nhẹ để nổi bật trên nền ảnh banner tối. */
.char-item.has-cursor::after {
  content: "|";
  position: absolute;
  right: -0.3rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cl-s1, currentColor);
  font-weight: 200;
  text-shadow: 0 0 0.6rem rgba(187, 130, 44, 0.85);
  animation: blinkCursor 0.8s step-end infinite;
}

@keyframes blinkCursor {
  from,
  to {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

/* ============================================================
   Quick Links Footer Menu (.footer-quick-links)
   ============================================================ */
.footer-quick-links li {
  color: #2f4055;
  font-size: 1rem;
  line-height: 1.5625rem;
  margin-top: 0.625rem;
  margin-bottom: 0.625rem;
  padding-left: 0.9375rem;
  background: url("../images/fivestar/pre-nav-item.png") left center no-repeat
    transparent;
}

.footer-quick-links li a {
  color: var(--cl-navy);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-quick-links li a:hover {
  color: var(--cl-main);
}

/* ============================================================
   Subscribe Form (.subscribe-form)
   ============================================================ */
.subscribe-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
  max-width: 37.5rem;
  margin-left: auto;
  margin-right: auto;
}
.subscribe-form br {
  display: none;
}
@media (min-width: 640px) {
  .subscribe-form {
    flex-direction: row;
  }
}

.subscribe-form .subscribe-input {
  width: 24rem;
  max-width: 100%;
  height: 2.625rem;
  padding: 0 0.9375rem;
  border: none;
  outline: none;
  background-color: #ffffff;
  color: rgba(0, 0, 0, 0.7);
  font-size: 1rem;
  box-sizing: border-box;
}

.subscribe-form .subscribe-submit {
  width: 9.0625rem;
  height: 2.625rem;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cl-main);
  background: url("../images/fivestar/bg-submit.png") left top repeat-x
    transparent;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.1875rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  margin-top: 1rem;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
  box-sizing: border-box;
}

@media (min-width: 640px) {
  .subscribe-form .subscribe-submit {
    margin-top: 0;
  }
}

.subscribe-form .subscribe-submit:hover {
  /* background-color: var(--cl-navy) !important; */
  /* background-image: none !important; */
  color: #ffffff;
}

/* ============================================================
   Contact Form (.contact-form)
   ============================================================ */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.contact-form br {
  display: none;
}
.contact-form .form-group {
  display: flex;
  flex-direction: column;
}

.contact-form .form-row {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .contact-form .form-row {
    flex-direction: row;
  }
  .contact-form .form-col {
    width: 50%;
  }
}

.contact-form .form-label {
  display: block;
  color: var(--cl-navy);
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.contact-form .text-required {
  color: var(--cl-main);
}

.contact-form .form-input,
.contact-form .form-select,
.contact-form .form-textarea {
  width: 100%;
  border: 1px solid var(--cl-border);
  background-color: transparent;
  color: var(--cl-text);
  font-size: 1rem;
  outline: none;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
}

.contact-form .form-input,
.contact-form .form-select {
  height: 2.75rem;
  padding: 0 1rem;
}

.contact-form .form-textarea {
  padding: 0.75rem 1rem;
  resize: none;
}

.contact-form .form-input:focus,
.contact-form .form-select:focus,
.contact-form .form-textarea:focus {
  border-color: var(--cl-main);
}

.contact-form .max-w-select {
  max-width: 18.75rem;
}

.contact-form .form-submit {
  display: inline-block;
  align-self: flex-start;
  padding: 0.75rem 2.5rem;
  color: var(--cl-main);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.05em;
  border: 2px dashed var(--cl-main);
  background-color: transparent;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

.contact-form .form-submit:hover {
  background-color: var(--cl-main);
  color: #ffffff;
}
.text_size36 {
  font-size: 2.25rem !important;
}