@font-face {
    font-family: 'Anuphan';
    src: url('../fonts/Anuphan-Regular.eot');
    src: url('../fonts/Anuphan-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Anuphan-Regular.woff2') format('woff2'),
        url('../fonts/Anuphan-Regular.woff') format('woff'),
        url('../fonts/Anuphan-Regular.ttf') format('truetype'),
        url('../fonts/Anuphan-Regular.svg#Anuphan-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* prompt-300 - latin_latin-ext_thai */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-300.eot'); /* IE9 Compat Modes */
  src: url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-300.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-300.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-300.svg#Prompt') format('svg'); /* Legacy iOS */
}
/* prompt-300italic - latin_latin-ext_thai */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Prompt';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-300italic.eot'); /* IE9 Compat Modes */
  src: url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-300italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-300italic.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-300italic.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-300italic.svg#Prompt') format('svg'); /* Legacy iOS */
}
/* prompt-regular - latin_latin-ext_thai */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-regular.svg#Prompt') format('svg'); /* Legacy iOS */
}
/* prompt-italic - latin_latin-ext_thai */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Prompt';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-italic.eot'); /* IE9 Compat Modes */
  src: url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-italic.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-italic.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-italic.svg#Prompt') format('svg'); /* Legacy iOS */
}
/* prompt-500 - latin_latin-ext_thai */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-500.eot'); /* IE9 Compat Modes */
  src: url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-500.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-500.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-500.svg#Prompt') format('svg'); /* Legacy iOS */
}
/* prompt-500italic - latin_latin-ext_thai */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Prompt';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-500italic.eot'); /* IE9 Compat Modes */
  src: url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-500italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-500italic.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-500italic.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-500italic.svg#Prompt') format('svg'); /* Legacy iOS */
}
/* prompt-600 - latin_latin-ext_thai */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-600.eot'); /* IE9 Compat Modes */
  src: url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-600.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-600.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-600.svg#Prompt') format('svg'); /* Legacy iOS */
}
/* prompt-600italic - latin_latin-ext_thai */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Prompt';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-600italic.eot'); /* IE9 Compat Modes */
  src: url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-600italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-600italic.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-600italic.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-600italic.svg#Prompt') format('svg'); /* Legacy iOS */
}
/* prompt-700 - latin_latin-ext_thai */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-700.eot'); /* IE9 Compat Modes */
  src: url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-700.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-700.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-700.svg#Prompt') format('svg'); /* Legacy iOS */
}
/* prompt-700italic - latin_latin-ext_thai */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Prompt';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-700italic.eot'); /* IE9 Compat Modes */
  src: url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-700italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-700italic.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-700italic.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/prompt/prompt-v11-latin_latin-ext_thai-700italic.svg#Prompt') format('svg'); /* Legacy iOS */
}

html {
    scroll-behavior: smooth;    
}

body {
    font-family: 'Prompt', sans-serif !important;
   
}


/* สำหรับ fixed header */
#header {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
    z-index: 50;
}

/* Sidebar Styling */
#sidebar {
    transition: transform 0.3s ease-in-out;
    z-index: 60;
    /* ซ่อน sidebar ไปทางขวาเริ่มต้น */
    transform: translateX(100%);
}

#sidebar.open {
    /* แสดง sidebar เมื่อมีคลาส open */
    transform: translateX(0);
}

/* Custom scrollbar for better look (optional, but good for aesthetics) */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* CSS สำหรับ Loading Animation (Simplified) */
.loading-animation {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3b82f6;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes scroll-bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(8px);
        /* Bounce downwards */
    }
}

.unknown {
    bottom: 5.5rem !important;
}
/* Back-to-Top Button Styling */
#back-to-top {
    position: fixed;
    bottom: 1.5rem;
    /* ระยะห่างจากด้านล่าง */
    right: 1.5rem;
    /* ระยะห่างจากด้านขวา */
    opacity: 0;
    /* ซ่อนไว้เริ่มต้น */
    transition: opacity 0.3s, transform 0.3s;
    z-index: 1000;
}

#back-to-top.show {
    opacity: 1;
    /* แสดงเมื่อถึงจุด scroll ที่กำหนด */
    transform: translateY(0);
}

.text-color1 {
    color: #cbb67a !important;
}   

.bg-color1 {
    background-color: #cbb67a !important;
}

.text-color2 {
    color: #0F204b !important;
}
.bg-color2 {
    background-color: #0F204b !important;
}
.text-color3 {
    color: #FAF9F4 !important;
}
.bg-color3 {
    background-color: #FAF9F4 !important;

}
.text-color4 {
    color: #eee6cf !important;
}
.bg-color4 {
    background-color: #eee6cf !important;
}


#scroll-indicator {
    bottom: 30px;
    transform: translateX(-50%);
    color: #CAB679;
    animation: scroll-bounce 1.5s infinite;
    z-index: 10;
}

/* Responsive adjustments for the container */
.full-screen-center {
    min-height: 100vh;
}


.float-label-input {
    position: relative;
    padding-top: 1rem;
    margin-bottom: 0.5rem;
}

/* 2. Label: ตำแหน่งเริ่มต้น (ลอยอยู่กลาง input) */
.float-label-input label {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    transition: all 0.2s ease;
    cursor: text;
    pointer-events: none;
    color: #fff;
    /* สีเทาอ่อน (gray-400) */
    font-size: 1rem;
    white-space: nowrap;
    padding: 0 0;
}

/* 3. Input: กำหนดสไตล์เส้นขีดด้านล่าง */
.float-label-input input {
    border: none;
    border-bottom: 1px solid #fff;
    /* เส้นขีดล่างเริ่มต้น (gray-400) */
    padding: 0.5rem 0 0.5rem 1rem;
    outline: none;
    background-color: transparent;
    color: #f3f4f6;
    /* สีข้อความขาว (gray-100) */
    width: 100%;
    transition: border-bottom 0.2s ease;
}

/* 4. Animation: เมื่อ Input ถูก Focus หรือมีค่า (Data) อยู่ */
.float-label-input input:focus+label,
.float-label-input input:not(:placeholder-shown)+label,
.float-label-input.has-value label,
.float-label-input.is-focused label {
    top: 0;
    transform: translateY(-20%);
    font-size: 0.875rem;
    color: #e5e7eb;
}

/* 5. Focus Line Effect: เส้นขีดล่างเมื่อ Focus */
.float-label-input input:focus,
.float-label-input.is-focused input {
    border-bottom-width: 2px;
    border-bottom-color: #f3f4f6;
    box-shadow: none;
}

/* *สำคัญ* Custom Style สำหรับ intl-tel-input เพื่อให้เข้ากับ Material Design */
.iti {
    width: 100%;
}

/* ปรับสีข้อความรหัสประเทศให้เป็นสีขาว (ตามโจทย์) */
.iti__selected-dial-code,
.iti__arrow {
    color: #f3f4f6 !important;
    /* สีขาว */
}

.iti__arrow {
    border-top-color: #ffffff !important;
}

.iti__selected-country {
    padding-right: 6px !important;
}

/* *สำคัญ* สไตล์สำหรับ Mobile Number (แบบ Label เริ่มต้นที่บรรทัดเดียวกับ Input) */
#phone-container {
    padding-top: 0.5rem !important;
    margin-bottom: 0.5rem;
    position: relative;
}

/* ทำให้ Label และธงอยู่บรรทัดเดียวกันกับ Input field */
.iti__flag-container {
    transition: all 0.2s ease;
    display: inline-block;
}

/* ปรับ Input ของ intl-tel-input ให้มีสไตล์เส้นขีดล่าง */
.iti input.iti__tel-input {
    border: none !important;
    border-bottom: 1px solid #9ca3af !important;
    padding: 0.5rem 0 0.5rem 0 !important;
    padding-left: 0 !important;
    outline: none !important;
    background-color: transparent !important;
    color: #f3f4f6 !important;
    width: 100%;
    transition: border-bottom 0.2s ease;
    /* *สำคัญ*: ซ่อน Input ของ intl-tel-input ไปก่อน แล้วจัดการด้วย Label */
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

/* *สำคัญ*: สไตล์ Label ของ Mobile Number (ใช้ JS/CSS ผสมผสาน) */
#reg-phone-label {
    position: absolute;
    top: -5px;
    left: 14%;
    transition: all 0.2s ease;
    color: #fff;
    display: inline-block;
    transform: translateY(50%);
    font-size: 1rem;
    cursor: text;
}

/* *สำคัญ*: สไตล์เมื่อ Label ลอยขึ้น (Focus หรือมีค่า) */
#phone-container.is-floating #reg-phone-label {
    position: absolute;
    top: -12px;
    left: 14%;
    transform: none;
    font-size: 0.875rem;
    color: #fff;

    /* ปรับตำแหน่งธง/รหัสประเทศเมื่อ Floating */
    z-index: 20;
}

/* ปรับช่องว่างสำหรับ Label ที่ลอยขึ้น เมื่ออยู่ในสถานะ Floating */
#phone-container.is-floating {
    padding-top: 1.5rem;
}

/* ทำให้ Input ที่ถูกซ่อนกลับมาแสดงเมื่อ container ถูก focus เพื่อรับ input */
#phone-container.is-floating input.iti__tel-input {
    opacity: 1;
}

.register-button-line {
    /* *แก้ไข*: กำหนดความกว้างเริ่มต้นเป็น 100% */
    width: 100%;
    height: 2px;
    background-color: #f3f4f6;
    transition: width 0.3s ease;
    /* *เพิ่ม*: กำหนดจุดยึดการแปลงจากด้านขวา */
    transform-origin: right;
}

/* *แก้ไข*: เวลา hover ให้ความกว้างเป็น 0% เพื่อให้เส้นหดไปทางซ้าย */
#reg-submit-btn:hover .register-button-line {
    width: 0;
}

section#register {
    position: relative;
    background-image: url(/images/form_bg.jpg);
    background-size: cover;
    background-position: center;
    z-index: 1;
}


section#register:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000;
    opacity: 0.7;
    z-index: -1;
}

section#about {
    position: relative;
    background-image: url(/images/about_bg.jpg);
    background-size: cover;
    background-position: center;
    z-index: 1;
}

section#about:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000;
    opacity: 0.6;
    z-index: -1;
}

/* Hover effect for social media icons */
.social-icon {
    transition: color 0.3s ease, transform 0.3s ease;
}

.social-icon:hover {
    color: #3b82f6;
    transform: translateY(-2px);
}

/* Input focus styling */
input:focus,
select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
    outline: none;
}

/* Custom CSS for intl-tel-input */
.iti {
    width: 100%;
}

/* ทำให้ list โผล่บน modal อื่นๆ ถ้ามี */
.iti__country-list {
    z-index: 50 !important;
}


/* Custom CSS to hide Owl nav/dots on desktop (for Gallery Grid mode) */
/* สำหรับ Gallery: ซ่อน nav และ dots เมื่อเป็นขนาด md ขึ้นไป เพื่อให้ดูเหมือน Grid */
@media (min-width: 768px) {

    #gallery-desktop-grid.owl-carousel .owl-nav,
    #gallery-desktop-grid.owl-carousel .owl-dots {
        display: none !important;
    }
}

/* Custom Owl Carousel dots for better visibility on dark banner */
#home-carousel.owl-carousel .owl-dots {
    position: absolute;
    bottom: 20px;
    width: 100%;
}

#home-carousel.owl-carousel .owl-dot span {
    background: #ffffff !important;
    opacity: 0.7;
    transition: opacity 0.3s;
}

#home-carousel.owl-carousel .owl-dot.active span {
    opacity: 1;
    background: #3b82f6 !important;
}

/* FIX: บังคับให้ Owl Carousel wrappers ภายใน Hero Section สืบทอดความสูง 100% */
#home-carousel,
#home-carousel .owl-stage-outer,
#home-carousel .owl-stage,
#home-carousel .owl-item,
#home-carousel .item {
    height: 100%;
}

/* Custom Styling for House Type Owl Navigator (Desktop Default) */
#housetype-carousel.owl-carousel .owl-nav {
    margin-top: 0;
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    /* ทำให้ปุ่มอยู่เหนือเนื้อหา */
    z-index: 10;
}

/* 1. ซ่อน Dot Navigator สำหรับ House Type */
#housetype-carousel.owl-carousel .owl-dots {
    display: none !important;
}

#housetype-carousel.owl-carousel .owl-nav button.owl-prev,
#housetype-carousel.owl-carousel .owl-nav button.owl-next {
    position: absolute;
    background: rgba(255, 255, 255, 0.9) !important;
    color: #3b82f6 !important;
    border-radius: 9999px !important;
    padding: 12px 16px !important;
    font-size: 1.5rem !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease-in-out;
    opacity: 1 !important;
    line-height: 1 !important;
    /* Fix line height for better icon centering */
}

#housetype-carousel.owl-carousel .owl-nav button.owl-prev {
    left: -1rem;
    /* ชิดซ้าย */
}

#housetype-carousel.owl-carousel .owl-nav button.owl-next {
    right: -1rem;
    /* ชิดขวา */
}

#housetype-carousel.owl-carousel .owl-nav button:hover {
    background: #3b82f6 !important;
    color: white !important;
}

/* Mobile: Arrow Navigator ไว้ด้านล่าง */
@media (max-width: 767px) {
    #housetype-carousel.owl-carousel .owl-nav {
        position: static;
        /* ยกเลิก absolute positioning ให้ไหลตามปกติ */
        transform: none;
        text-align: center;
        /* จัดตำแหน่งตรงกลาง */
        margin-top: 1.5rem;
        /* เพิ่มช่องว่างด้านบน */
    }

    #housetype-carousel.owl-carousel .owl-nav button.owl-prev,
    #housetype-carousel.owl-carousel .owl-nav button.owl-next {
        position: static;
        /* ให้ปุ่มอยู่ในตำแหน่งปกติ */
        margin: 0 0.5rem;
        /* เพิ่มช่องว่างระหว่างปุ่ม */
        left: auto;
        right: auto;
    }
}

@media (max-width: 600px) {
  #reg-phone-label {
    left: 25%;
  }
}

/* Language Dropdown Styling */
#lang-dropdown-btn {
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    /* ปรับ padding เพื่อให้เป็นปุ่มสี่เหลี่ยมจัตุรัสสำหรับธง */
    padding: 0.5rem;
    border-radius: 9999px;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    cursor: pointer;
    justify-content: center;
}

#lang-dropdown-btn:hover {
    background-color: #f3f4f6;
}

#lang-dropdown-menu {
    position: absolute;
    top: 100%;
    /* อยู่ใต้ปุ่ม */
    right: 0;
    margin-top: 0.5rem;
    min-width: 5rem;
    /* ปรับขนาดให้แคบลงเมื่อไม่มีข้อความ */
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    z-index: 50;
    /* ต้องอยู่เหนือเนื้อหาหลัก */
}

/* Flag Image Styling within dropdown and button */
.lang-option img,
#lang-dropdown-btn img {
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    /* Make flags circular */
    object-fit: cover;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.lang-option {
    padding: 0.5rem 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background-color 0.15s;
    font-size: 0.875rem;
    justify-content: center;
    /* จัดให้อยู่ตรงกลางของ Dropdown Menu */
}

.lang-option:hover {
    background-color: #eff6ff;
    /* blue-50 */
    color: #2563eb;
    /* blue-600 */
}

/* Custom Positioning for Header elements on Desktop */
/* ทำให้ Logo อยู่ตรงกลางของ Header ทั้งหมดบน Desktop */
@media (min-width: 768px) {
    #header {
        /* ใช้ Grid หรือ Flexbox เพื่อให้ Logo อยู่ตรงกลางได้ง่าย */
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        /* 3 คอลัมน์: ซ้าย-กลาง-ขวา */
        align-items: center;
    }

    .header-left {
        grid-column: 1 / 2;
        /* องค์ประกอบซ้าย (ว่าง) */
    }

    .header-center {
        grid-column: 2 / 3;
        /* องค์ประกอบกลาง (โลโก้) */
        justify-self: center;
        /* จัดกลางในคอลัมน์ */
        margin-left: 0;
        /* ลบ margin-right ที่เคยถูกใช้บน mobile */
    }

    .header-right {
        grid-column: 3 / 4;
        /* องค์ประกอบขวา (เมนู/ภาษา) */
        justify-self: end;
        /* จัดชิดขวาในคอลัมน์ */
    }
}