/* --- [MODERN LAYOUT] Custom Variables and Styles --- */
        :root {
            /* 1. Updated Color Palette: A more modern, slightly desaturated green. */
            --bs-primary-rgb: 42, 127, 98; /* #2A7F62 */
            --bs-primary-dark-rgb: 33, 102, 78; /* #21664E */
            --bs-accent-rgb: 34, 197, 94; /* #22c55e (Green Pop) */
            --bs-light-rgb: 248, 249, 250; /* #f8f9fa (Softer than pure white) */
            --line-color: #06C755;
            
            --bs-body-font-family: 'Kanit', 'Prompt', sans-serif;
            --bs-body-color: #343a40;
            --bs-body-bg: #F8F9FA; /* 2. Lighter background for a cleaner feel */
			
        }

        body {
             font-weight: 300; /* Lighter default font weight */
        }

        h1, h2, h3, h4, h5, h6, .fw-bold {
            font-weight: 600 !important; /* Bolder headings for contrast */
        }
        
        .fw-medium {
            font-weight: 500 !important;
        }

        .btn {
            border-radius: 50rem; /* 3. Pill-shaped buttons by default for modern look */
        }

        .btn-primary {
            --bs-btn-bg: #2A7F62;
            --bs-btn-border-color: #2A7F62;
            --bs-btn-hover-bg: #21664E;
            --bs-btn-hover-border-color: #21664E;
            padding-left: 1.5rem;
            padding-right: 1.5rem;
        }

        .btn-accent {
            background-color: var(--line-color);
            color: white;
            --bs-btn-hover-bg: #05a546;
        }
        
        .btn-outline-primary {
            --bs-btn-color: #2A7F62;
            --bs-btn-border-color: #2A7F62;
            --bs-btn-hover-color: #fff;
            --bs-btn-hover-bg: #2A7F62;
            --bs-btn-hover-border-color: #2A7F62;
        }
        
        .bg-primary-light {
            background-color: rgba(var(--bs-primary-rgb), 0.1);
        }

        .text-primary {
            color: #2A7F62 !important;
        }
        
        .text-accent {
             color: #22c55e !important;
        }
        
        /* 4. Updated Hero Section Style: Stronger overlay for better text readability */
        .bg-hero {
            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../images/backgroung2.png') center/cover no-repeat;
        }

        .text-shadow {
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Softer text shadow */
        }
        
        .card {
            border: 0; /* Remove default card borders */
            box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.07); /* 5. Softer, more modern shadow for all cards */
        }
        .card-hover:hover {
            box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.1);
            transform: translateY(-4px);
            transition: all 0.3s ease;
        }
        
        /* 6. Premium Card with Gradient: Makes the premium option more attractive */
        .card-premium {
            transform: scale(1.05);
            z-index: 10;
            background: linear-gradient(45deg, #2A7F62, #21664E);
        }
        
        .bottom-nav {
             box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
             background-color: rgba(255,255,255,0.85);
             backdrop-filter: blur(12px);
             -webkit-backdrop-filter: blur(12px);
        }
        .bottom-nav a.active {
            color: #2A7F62;
            font-weight: 500;
        }
        .bottom-nav-search {
            width: 80px;
            height: 80px;
            transform: translateY(-30px);
        }

        /* 7. Increased Section Spacing for a cleaner look */
        section {
            padding-top: 5rem;
            padding-bottom: 5rem;
        }
        @media (min-width: 992px) {
            section {
                padding-top: 6rem;
                padding-bottom: 6rem;
            }
        }
		
		/* --- CSS for jQuery Fade Reviews --- */
.review-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: none; /* ซ่อนทุกอันไว้เป็นค่าเริ่มต้น */
}

 /* Styling for the error state */
    .form-control.is-invalid, .was-validated .form-control:invalid {
        border-color: #dc3545; /* Red border for error */
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right calc(0.375em + 0.1875rem) center;
        background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    }

    /* Remove the green checkmark for the valid state */
    .form-control.is-valid, .was-validated .form-control:valid {
        border-color: #ced4da; /* Revert to default border color */
        background-image: none; /* Remove background icon */
    }
    
    /* When focused, a valid input should look normal */
    .form-control.is-valid:focus, .was-validated .form-control:valid:focus {
        border-color: #86b7fe; /* Bootstrap's default focus color */
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, .25); /* Bootstrap's default focus shadow */
    }

    label.error {
        color: #dc3545;
        font-size: 0.875em;
        margin-top: 0.25rem;
        display: block; /* Make sure the error message is on its own line */
    }