:root{
  /* Dark glam palette — center-focused gradient */
  --bg-center: #1b0b18; /* deep plum at center */
  --bg-edge: #232323;   /* mid tone */
  --bg-plain: #5d5d5d;  /* near-black blue for edges */
  --bg-overlay: rgba(12,10,12,0.68);

  --text-main: #f7f5f2; /* off-white */
  --muted: #bfb7a1;     /* muted warm */
  --accent: #d4b86a;    /* warmer gold */
  --accent-dark: #a47d3a;
  --card-bg: #0f1214;   /* slightly lighter than background */
}

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes slideUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .animate-fadeIn {
      animation: fadeIn 2s ease-in-out;
    }

    .animate-slideUp {
      animation: slideUp 1.5s ease-out;
    }

    @font-face {
      font-family: 'Adam';
      src: url('/gallery/font/Adam-Light.woff2') format('woff2');
      font-weight: 300;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'Adam';
      src: url('/gallery/font/Adam-Medium.woff2') format('woff2');
      font-weight: 500;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'Adam';
      src: url('/gallery/font/Adam-Bold.woff2') format('woff2');
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }
    
    @font-face {
      font-family: 'Kanit';
      src: url('/gallery/font/Kanit-ExtraLight.woff2') format('woff2');
      font-weight: 300;
      font-style: normal;
      font-display: swap;
    }
    
    @font-face {
      font-family: 'Kanit';
      src: url('/gallery/font/Kanit-Light.woff2') format('woff2');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    body {
      font-family: 'Adam', 'Kanit';
      /* center-focused radial gradient using the theme variables */
      background: radial-gradient(circle at center, var(--bg-center) 0%, var(--bg-edge) 35%, var(--bg-plain) 100%);
      color: var(--text-main);
      background-size: cover;
      background-attachment: fixed;
      overflow-x: hidden;
    }

/* เอฟเฟกต์ Overlay เพิ่มความลึก */
/* subtle overlay: soft gold sheen at center + dark vignette */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: radial-gradient(circle at center, rgba(212,184,106,0.06) 0%, var(--bg-overlay) 40%, transparent 70%);
  z-index: -1;
}

/* ---- Navbar ---- */
.bg-navbar {
  background: rgba(18, 18, 18, 1); /* ดำโปร่งเบาๆ */
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(200,169,126,0.15);
}

/* ---- เมนูหลัก ---- */
.nav-link {
  position: relative;
  color: var(--muted);
  font-size: 1.125rem;
  padding: 0.5rem 0.75rem;
  transition: all 0.3s ease;
}

.nav-link:hover {
  color: var(--text-main); /* highlight on hover */
  font-weight: 600;
}

/* เส้นใต้ */
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--accent-dark), var(--muted));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}

.nav-link:hover::after {
  transform: scaleX(1);
}

/* ---- เมนู Active ---- */
.nav-active {
  color: var(--text-main);
  font-weight: 600;
}

.nav-active::after {
  transform: scaleX(1);
  background: linear-gradient(90deg, var(--accent-dark), var(--accent));
}

/* ---- Dropdown ---- */
.dropdown {
  background-color: #1f1f1f;
  border: 1px solid rgba(156,102,68,0.2);
}

.dropdown a {
  color: #d4b08c;
  transition: background 0.3s, color 0.3s;
}

.dropdown a:hover {
  background: transparent !important;   /* ไม่เปลี่ยนพื้น */
  color: var(--text-main) !important;  /* เปลี่ยนเฉพาะสีตัวอักษร */
}


/* ---- ปุ่มลูกศร Swiper ---- */
.swiper-button-next,
.swiper-button-prev {
  color: #c8a97e;
}

.swiper-pagination-bullet {
  background-color: #aaa !important;
}

.swiper-pagination-bullet-active {
  background-color: #c8a97e !important;
}

    /* สำหรับเมนูภาษาไทย */
    .thai-language {
      font-family: 'Kanit';
      font-weight: 300;
      font-size: 1rem !important; 
      padding: 0.5rem 0.75rem !important; 
    }

    /* สำหรับ dropdown ภาษาไทย */
    .thai-language .dropdown a {
      font-size: 0.85rem !important;
      padding: 0.6rem 0.8rem !important;
    }

    /* ปรับขนาดเมนูหลักเมื่อเป็นภาษาไทย */
    @media (max-width: 1024px) {
      .thai-language {
        font-size: 0.8rem !important;
        padding: 0.4rem 0.6rem !important;
      }
    }

    /* Mobile Styles */
    @media (max-width: 1023px) {
      #mobileMenu {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 280px;
        background-color: #705944;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        z-index: 1000;
        padding-top: 60px;
        overflow-y: auto;
        box-shadow: 3px 0 10px rgba(0,0,0,0.2);
      }

      #mobileMenu.show {
        transform: translateX(0);
      }

      /* ส่วนหัวเมนูมือถือ */
      .mobile-menu-header {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 15px;
        background-color:#705944;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      }

      #mobileMenu a,
      #mobileMenu button {
        display: block;
        width: 100%;
        padding: 15px 20px;
        text-align: left;
        font-size: 1.1rem;
        color: white;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        transition: background 0.3s;
      }

      #mobileMenu a:hover,
      #mobileMenu button:hover {
        background-color: #5c4838;
      }

      #mobileMenu .dropdown {
        background-color: #5c4838;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
      }

      #mobileMenu .dropdown.show {
        display: block;
        max-height: 500px;
        overflow: hidden;
        transition: max-height 0.3s ease-in-out;
      }


      #mobileMenu .dropdown a {
        padding-left: 30px;
        font-size: 0.95rem;
      }


      .swiper-button-next,
      .swiper-button-prev {
        display: none !important;
      }
    }

    .fas {
  display: inline-block !important;
 }

.swiper-pagination-bullet {
    background-color: #95989d !important; /* เทาอ่อน */
  }

  /* สีจุดที่ active */
  .swiper-pagination-bullet-active {
    background-color: #705944 !important; /* สีน้ำตาลเข้ม เหมือนธีมของคุณ */
  }

/* เพิ่มในไฟล์ style.css */
.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ขาวฟุ้งด้านขวา */
.swiper-mask::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 100%;
  pointer-events: none;
  transition: opacity 0.4s ease;
  opacity: 1;
  z-index: 5;
}

/* ฟุ้งด้านซ้าย (เริ่มซ่อน) */
.swiper-mask::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 100%;
  pointer-events: none;
  transition: opacity 0.4s ease;
  opacity: 0;
  z-index: 5;
}

/* ปิด pseudo-element เดิมของ Swiper */
.swiper-button-next::after,
.swiper-button-prev::after {
  content: none !important;
}

/* ลูกศรใหม่แบบเพียว ๆ สีเทา */
.swiper-button-next,
.swiper-button-prev {
  color: #a55d41;       /* สีลูกศร */
  font-size: 20px;   /* ขนาดลูกศร */
  width: auto;
  height: auto;
  background: none;  /* ไม่มีวงกลม */
  border-radius: 0;
  box-shadow: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ใช้ ::before เป็นไอคอนลูกศร */
.swiper-button-next::before,
.swiper-button-prev::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 950;
  font-size: 24px;
  color: #a55d41;       /* สีลูกศร */
  line-height: 1;
  display: inline-block;
}

/* ลูกศรขวา-ซ้าย */
.swiper-button-next::before { content: "\f054"; }
.swiper-button-prev::before { content: "\f053"; }

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;  
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- nav bar --- */
/* ---- ลิงก์เมนูปกติ ---- */
.nav-link {
  position: relative;
  color: #e2cba6;
  font-size: 1.125rem; /* text-lg */
  padding: 0.5rem 0.75rem; /* py-2 px-3 */
  transition: all 0.3s ease;
}

.nav-link:hover {
   color: #f8f8f8; /* ขาวนวลตอน hover */
  font-weight: 600;

}

/* เส้นใต้ (pseudo-element) */
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #550101; /* แดงไวน์ */
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}

/* ตอน hover ให้ขยายจากกลาง */
.nav-link:hover::after {
  transform: scaleX(1);
}

/* ---- ลิงก์ที่ active ---- */
.nav-active {
  color: #f8f8f8; /* ขาวนวล */
  font-weight: 600;
}

.nav-active::after {
  transform: scaleX(1);
  background-color: #8b0000; /* แดงไวน์ */
}

/* --- Theme overrides (dark glam) --- */
.swiper-button-next,
.swiper-button-prev {
  color: var(--accent) !important;
}

/* section underline used under headings (match navbar hover underline) */
.section-underline {
  width: 12rem; /* same as w-48 */
  height: 0.25rem; /* same as h-1 */
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent));
  margin-bottom: 2rem;
}

.swiper-pagination-bullet {
  background-color: rgba(149,152,157,0.22) !important;
}

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

#mobileMenu {
  background-color: var(--card-bg) !important;
}

.mobile-menu-header {
  background-color: var(--card-bg) !important;
  border-bottom: 1px solid rgba(255,255,255,0.03) !important;
}

#mobileMenu a,
#mobileMenu button {
  color: var(--text-main) !important;
  border-bottom: 1px solid rgba(255,255,255,0.03) !important;
}

#mobileMenu a:hover,
#mobileMenu button:hover {
  color: var(--accent) !important;
  background-color: rgba(91, 72, 36, 0.06) !important;
}

.dropdown {
  background-color: rgba(15,19,22,0.6) !important;
  border: 1px solid rgba(184,146,74,0.10) !important;
}

.dropdown a {
  color: var(--muted) !important;
}

.nav-link { color: var(--muted) !important; }
.nav-link:hover { color: var(--text-main) !important; }
.nav-active { color: var(--text-main) !important; }
.nav-link::after { background: linear-gradient(90deg, var(--accent-dark), var(--muted)) !important; }
.nav-active::after { background: linear-gradient(90deg, var(--accent-dark), var(--accent)) !important; }

/* arrows/icon colors */
.swiper-button-next::before,
.swiper-button-prev::before {
  color: var(--accent) !important;
}

/* Theme utility classes to make views reuse the dark-glam variables */
.card-bg {
  background: var(--card-bg) !important;
}

.text-main { color: var(--text-main) !important; }
.text-muted { color: var(--muted) !important; }
.text-accent { color: var(--accent) !important; }
.text-accent-dark { color: var(--accent-dark) !important; }

.bg-accent { background-color: var(--accent) !important; }
.bg-accent-dark { background-color: var(--accent-dark) !important; }
.border-accent { border-color: var(--accent) !important; }

/* สีเริ่มต้น */
.btn-round {
  background-color: var(--accent-light); /* สีอ่อนสำหรับปุ่มยังไม่ active */
  color: var(--text-main);
  border: 1px solid var(--accent-light);
  transition: all 0.3s ease;
}

/* ปุ่ม hover ที่ไม่ active */
.btn-round:not(.active):hover {
  background-color: var(--accent); /* สีกลาง */
  color: var(--text-main);
}

/* ปุ่ม active */
.btn-round.active {
  background-color: var(--accent-dark); /* สีเข้ม */
  color: var(--text-main);
  border: 1px solid var(--accent-dark);
}



/* thin helpers for small text color replacements */
.text-muted-soft { color: rgba(191,183,161,0.85) !important; }

/* ---- Page content container — matches navbar width (1255px) ---- */
.content-container {
  max-width: 1255px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}