/* Định nghĩa màu sắc */
:root {
    --emerald: #4A7043; /* Xanh lá đậm nhẹ, tươi, thư giãn */
    --emerald-dark: #3A5A34; /* Xanh đậm hơn cho hover */
    --ivory: #F9F5F0; /* Trắng phấn nhẹ */
    --gold: #D4A017; /* Vàng đậm, nổi bật */
    --gold-dark: #B28704; /* Vàng hover */
    --text-dark: #2D2D2D; /* Chữ tối */
    --text-light: #FFFFFF; /* Chữ sáng */
}

/* Áp dụng màu */
.bg-emerald {
    background-color: var(--emerald);
}

.bg-emerald-dark {
    background-color: var(--emerald-dark);
}

.bg-ivory {
    background-color: var(--ivory);
}

.bg-gold {
    background-color: var(--gold);
}

.bg-gold-dark {
    background-color: var(--gold-dark);
}

.text-emerald {
    color: var(--emerald);
}

.text-ivory {
    color: var(--ivory);
}

.text-gold {
    color: var(--gold);
}

.text-dark {
    color: var(--text-dark);
}

.text-light {
    color: var(--text-light);
}

/* Gradient cho section bảng giá */
.bg-gradient {
    background: linear-gradient(to right, var(--emerald), var(--ivory));
}

/* Hiệu ứng cuộn ngang */
.combo-scroll {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.combo-scroll::-webkit-scrollbar {
    height: 8px;
}

.combo-scroll::-webkit-scrollbar-thumb {
    background: var(--gold);
    border-radius: 4px;
}

.combo-scroll > div {
    scroll-snap-align: center;
    flex: 0 0 auto;
}

/* Font chữ */
body {
    font-family: 'Poppins', 'Arial', sans-serif; /* Font hiện đại, dễ đọc */
    color: var(--text-dark);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0.01em; /* Chữ thoáng hơn */
}

h1, h2, h3 {
    font-family: 'Playfair Display', 'Georgia', serif; /* Font sang trọng */
    color: var(--text-dark);
    font-weight: 600;
}

h1 {
    font-size: 2.5rem;
    line-height: 1.3;
}

h2 {
    font-size: 1.875rem;
}

h3 {
    font-size: 1.25rem;
}

/* Tùy chỉnh chữ theo section */
section.bg-emerald h1,
section.bg-emerald h2,
section.bg-emerald h3,
section.bg-emerald p,
section.bg-emerald a,
section.bg-emerald button {
    color: var(--text-light); /* Chữ trắng trên nền xanh */
}

section.bg-ivory h1,
section.bg-ivory h2,
section.bg-ivory h3,
section.bg-ivory p,
section.bg-ivory a,
section.bg-white h1,
section.bg-white h2,
section.bg-white h3,
section.bg-white p,
section.bg-white a {
    color: var(--text-dark); /* Chữ tối trên nền sáng */
}

/* Font cho button và link */
a, button {
    font-family: 'Poppins', 'Arial', sans-serif;
    font-weight: 500;
    transition: all 0.3s ease;
}

/* Shadow */
.shadow-md {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.shadow-lg {
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);
}

/* Bo góc và hover */
img, .rounded-xl {
    border-radius: 0.75rem;
}

.transform:hover {
    transform: translateY(-3px);
}

/* Section Ưu đãi */
section.bg-emerald .max-w-lg {
    position: relative;
    overflow: hidden;
}

/* Section Liên hệ */
section.bg-emerald .space-y-4 p {
    font-size: clamp(1rem, 2.5vw, 1.125rem);
    line-height: 1.65;
    color: var(--text-light);
}

/* Combo scroll */
.combo-scroll .text-gray-600 {
    color: var(--text-dark);
}

/* Custom styles for slider (used in "Về Mộc Nhiên Spa" section) */
.slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.slider img {
    width: 100%;
    height: auto;
}

/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}