@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css");
:root {
            --primary-green: #2E7D32;
            --light-bg: #F9F9F9;
            --text-dark: #333;
        }

body { font-family: 'Lexend', sans-serif; font-size: 18px; font-weight: 500; scroll-behavior: smooth; color: var(--text-dark); }
.main_color{color: #254336;}
.bg-light{background-color: #FFFDF6 !important}
.bg-dark{background-color: #254336 !important;}
.fw-900{font-weight: 900 !important}
.title1{font-size: 64px;}
.title2{font-size: 52px;}
.why{font-weight: 300; font-size: 22px;}
h1,h2 { font-family: 'Inter', sans-serif; }
    .navbar-brand { font-family: 'Inter', sans-serif; font-size:18px; }
    .hero-video {
      position: relative;
      height: 100vh;
      overflow: hidden;
    }

    .hero-video video {
      position: absolute;
      top: 50%; left: 50%;
      min-width: 100%; min-height: 100%;
      transform: translate(-50%, -50%);
      z-index: 0;
      object-fit: cover;
    }
    .hero-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,.45);
      z-index: 1;
    }
    .hero-content {
      position: relative;
      z-index: 2;
    }
    section { padding: 50px 0; }
    .section-title { margin-bottom: 48px; }
    footer { background:#254336; color:#fff; }
    footer a { color:#e5e7eb; text-decoration:none; }


    /* Content Sections */
        .content-box {
            background: white;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            margin-bottom: 30px;
        }

        .section-title {
            color: var(--primary-green);
            font-weight: 900;
            margin-bottom: 20px;
            border-bottom: 2px solid #e0e0e0;
            padding-bottom: 10px;
            display: inline-block;
        }

        /* Lists */
        .list-icon li {
            list-style: none;
            margin-bottom: 10px;
            display: flex;
            align-items: start;
        }
        .list-icon li i {
            margin-top: 5px;
            margin-right: 12px;
            width: 20px;
            text-align: center;
        }
        .text-check i { color: var(--primary-green); }
        .text-cross i { color: #dc3545; }

        /* Sticky Booking Sidebar */
        .booking-sidebar {
            position: sticky;
            top: 100px; /* Adjust based on navbar height */
            z-index: 99;
        }
        .booking-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            overflow: hidden;
            border: 1px solid #eee;
        }
        .price-tag {
            background: var(--primary-green);
            color: white;
            padding: 15px;
            text-align: center;
        }

        /* Gallery Grid */
        .gallery-img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 8px;
            transition: transform 0.3s;
            cursor: pointer;
        }
        .gallery-img:hover { transform: scale(1.03); }

        /* Mobile tweaks */
        @media (max-width: 991px) {
            .booking-sidebar { position: static; margin-top: 30px; }
        }

        /* คลาสช่วยสำหรับจัดรูปภาพให้เต็มกรอบเสมอ */
.object-fit-cover {
    object-fit: cover;
}


/* Gallery Styles */
.gallery-card {
    position: relative;
    border-radius: 16px;       /* มุมโค้งมน */
    overflow: hidden;          /* ตัดส่วนเกินของรูป */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    cursor: pointer;
}

.gallery-card img {
    width: 100%;
    aspect-ratio: 3 / 4;       /* บังคับสัดส่วน 3:4 (กว้าง 3 สูง 4) */
    object-fit: cover;         /* ขยายรูปให้เต็มกรอบโดยไม่เสียสัดส่วน */
    transition: transform 0.5s ease; /* เอฟเฟกต์ตอนขยาย */
    display: block;
}

/* Hover Effect: Zoom In */
.gallery-card:hover img {
    transform: scale(1.1);     /* ขยายรูป 10% เมื่อเอาเมาส์ชี้ */
}

/* Overlay Effect: สีดำจางๆ ตอนชี้ */
.gallery-card .overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.3); /* สีดำโปร่งแสง 30% */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;                /* ซ่อนไว้ก่อน */
    transition: opacity 0.3s ease;
}

.gallery-card:hover .overlay {
    opacity: 1;                /* แสดงเมื่อเอาเมาส์ชี้ */
}

.gallery-card .overlay i {
    color: white;
    font-size: 2rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* เพิ่ม Effect ให้ปุ่มดูมีมิติ */
.btn-success {
    transition: all 0.3s ease;
}
.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(46, 125, 50, 0.4);
}

/* จัดระยะห่างตัวอักษรหัวข้อ */
.ls-1 {
    letter-spacing: 1px;
}

.btn-whatsapp-footer {
    display: block;
    background: linear-gradient(45deg, #25D366, #128C7E); /* ไล่สีเขียว WhatsApp */
    color: white !important;
    text-decoration: none;
    padding: 12px 25px;
    border-radius: 15px; /* ขอบมนกำลังดี */
    box-shadow: 0 5px 15px rgba(37, 211, 102, 0.3); /* เงาสีเขียวจางๆ */
    transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.1);
}

.btn-whatsapp-footer:hover {
    transform: translateY(-3px); /* ลอยขึ้นเมื่อชี้ */
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.5); /* เงาเข้มขึ้น */
    background: linear-gradient(45deg, #2ce470, #16a594); /* สีสว่างขึ้น */
}


#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #157347;
  color: white;
  cursor: pointer;
  padding: 10px 15px;
  border-radius: 4px;
  transition: 0.3s;
}/*link to top*/

#myBtn:hover {
  background-color: #157347;
  transition: 0.3s;
}

/* 1. บังคับให้ Container เป็น Flexbox (เพื่อให้ลูกๆ สูงเท่ากัน) */
#family .carousel-item { 
    display: flex !important;
}

/* 2. บังคับให้การ์ดยืดเต็มความสูง */
#family .card {
    height: 100%;
}




/* --- Elfsight-style Google Reviews --- */
.google-review-card {
    background: #fff;
    border-radius: 16px; /* มุมโค้งมน */
    box-shadow: 0 4px 20px rgba(0,0,0,0.08); /* เงานุ่มๆ */
    padding: 24px;
    height: 100%;
    border: none;
    transition: transform 0.3s ease;
    position: relative;
}

.google-review-card:hover {
    transform: translateY(-5px); /* ลอยขึ้นเมื่อเอาเมาส์ชี้ */
}

.reviewer-profile {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.reviewer-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 12px;
}

.reviewer-info h5 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    color: #333;
}

.review-date {
    font-size: 12px;
    color: #888;
}

.google-icon-corner {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 24px;
    height: 24px;
}

.star-rating {
    color: #FFB400; /* สีทอง Google */
    font-size: 14px;
    margin-bottom: 12px;
}

.review-text {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* ตัดคำที่บรรทัดที่ 4 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* --- สไตล์ปุ่มกด Google Reviews (วงกลมเขียว) --- */
#googleReviewsCarousel .carousel-control-prev, 
#googleReviewsCarousel .carousel-control-next {
    width: 40px;           /* ความกว้าง */
    height: 40px;          /* ความสูง */
    background-color: rgba(53, 78, 53, 0.8) !important; /* สีเขียวทหาร โปร่งแสงนิดๆ */
    border-radius: 50%;    /* ทำเป็นวงกลม */
    top: 50%;              /* ให้อยู่กึ่งกลางแนวตั้ง */
    transform: translateY(-50%); /* จัดกึ่งกลางเป๊ะๆ */
    opacity: 1;            /* ไม่ให้จาง */
    border: none;          /* ไม่มีขอบ */
}

/* ปรับตำแหน่งซ้าย-ขวา */
#googleReviewsCarousel .carousel-control-prev { left: 0px; }   /* ชิดซ้าย */
#googleReviewsCarousel .carousel-control-next { right: 0px; }  /* ชิดขวา */

/* ทำให้ตัวลูกศรข้างในเป็นสีขาว (มาตรฐาน) */
#googleReviewsCarousel .carousel-control-prev-icon, 
#googleReviewsCarousel .carousel-control-next-icon {
    filter: none !important; /* ยกเลิกสีดำ */
    width: 1.2rem;
    height: 1.2rem;
}

/* เพิ่ม Effect ตอนเอาเมาส์ชี้ */
#googleReviewsCarousel .carousel-control-prev:hover, 
#googleReviewsCarousel .carousel-control-next:hover {
    background-color: rgba(36, 51, 36, 1) !important; /* เข้มขึ้น */
}

/*btn*/

.btn-booking-nature {
    background: linear-gradient(45deg, #43a047, #2e7d32); /* ไล่สีเขียว */
    border: none;
    color: white !important; /* บังคับตัวหนังสือสีขาว */
    padding: 6px 15px;
    border-radius: 30px; /* ขอบมนรี */
    font-family: 'Poppins', sans-serif;
    font-size: 14 !important;
    font-weight: 400;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(46, 125, 50, 0.4); /* เงาสีเขียว */
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-booking-nature:hover {
    transform: translateY(-3px); /* ลอยขึ้น */
    box-shadow: 0 8px 20px rgba(46, 125, 50, 0.6); /* เงาเข้มขึ้น */
    background: linear-gradient(45deg, #4caf50, #388e3c); /* เปลี่ยนสีให้สว่างขึ้นนิดหน่อย */
}

.btn-booking-gold {
    background-color: #ffca28;
    color: #3e2723 !important; /* ตัวหนังสือสีน้ำตาลเข้ม */
    border: none;
    padding: 12px 40px;
    border-radius: 50px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 0 0 0 rgba(255, 202, 40, 0.7);
    animation: pulse-gold 2s infinite; /* ใส่ Animation */
    transition: all 0.3s;
    display: inline-block;
}

.btn-booking-gold:hover {
    background-color: #ffc107;
    transform: scale(1.05); /* ขยายใหญ่ขึ้นนิดนึง */
}

/* สร้าง Animation จังหวะหัวใจเต้น */
@keyframes pulse-gold {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 202, 40, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 15px rgba(255, 202, 40, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 202, 40, 0);
    }
}


.btn-booking-outline {
    background: transparent;
    border: 2px solid #2e7d32; /* ขอบสีเขียว */
    color: #2e7d32 !important;
    padding: 10px 30px;
    border-radius: 8px; /* ขอบมนน้อยๆ แบบโมเดิร์น */
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.btn-booking-outline:hover {
    background: #2e7d32; /* ถมสีเขียว */
    color: white !important; /* เปลี่ยนตัวหนังสือเป็นขาว */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Elephant Card */
.elephant-card {
    background: white;
    border-radius: 20px;
    overflow: hidden; /* ตัดมุมโค้ง */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
    height: 100%;
    position: relative; /* สำคัญ! เป็นจุดอ้างอิงให้ Badge */
    z-index: 1;
}

.elephant-card:hover {
    transform: translateY(-10px);
}

.card-img-wrapper {
    position: relative;
    height: 250px;
    overflow: hidden; /* ซ่อนส่วนเกินของรูป */
    z-index: 0; /* ให้รูปอยู่ชั้นล่างสุด */
}

.card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.elephant-card:hover .card-img-wrapper img {
    transform: scale(1.1);
}

/* --- แก้ไขส่วน Badge ให้โชว์ตลอดเวลา --- */
.age-badge {
    position: absolute; /* ลอยอิสระ */
    top: 215px;         /* วางตำแหน่งทับเส้นแบ่ง (250px - 35px) */
    right: 20px;
    width: 70px;
    height: 70px;
    background: #2e7d32;
    color: white;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 4px solid white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    
    /* Key Fix: ดัน Z-Index ให้สูงที่สุด */
    z-index: 100; 
    
    /* ป้องกันการถูกซ่อน */
    opacity: 1 !important;
    visibility: visible !important;
}

.card-content {
    padding: 30px 25px 25px;
    text-align: center;
    background-color: white;
    position: relative;
    z-index: 2; /* เนื้อหาอยู่ชั้น 2 (สูงกว่ารูป แต่ต่ำกว่า Badge) */
}

.grecaptcha-badge { 
    visibility: hidden; 
}