/* Google Fonts Import - Đảm bảo thêm vào đầu file CSS */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&family=Oswald:wght@400;600&family=Playfair+Display:wght@400;700&display=swap');

/* General Body Styles - Nền tổng thể */
body {
    font-family: 'Montserrat', sans-serif; /* Phông chữ hiện đại, dễ đọc */
    background-color: #F8F4E3; /* Màu kem nhạt ấm áp, tạo cảm giác retro */
    color: #333; /* Màu chữ đen xám nhẹ nhàng */
    line-height: 1.6;
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
}

/* Container chính của nội dung */
.container {
    max-width: 960px;
    margin: 30px auto;
    background-color: #FFF; /* Nền trắng sạch sẽ cho nội dung chính */
    padding: 30px 40px;
    border-radius: 8px; /* Bo góc nhẹ, mềm mại */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* Tạo chiều sâu và sự sang trọng */
    border: 1px solid #E0DBCF; /* Viền nhẹ nhàng mang hơi hướng vintage */
}

/* Logo tĩnh */
.logo {
    display: block;
    max-width: 180px; /* Kích thước logo */
    height: auto;
    margin: 0 auto 30px auto; /* Căn giữa và khoảng cách dưới */
    filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.1)); /* Hiệu ứng đổ bóng nhẹ cho logo */
}

/* Ảnh không gian tiệm */
.shop-img {
    width: 100%;
    height: 300px;
    object-fit: cover; /* Đảm bảo ảnh hiển thị đẹp */
    border-radius: 8px;
    margin-top: 30px; /* Khoảng cách trên để tách khỏi nội dung phía trên */
    margin-bottom: 30px; /* Khoảng cách dưới */
    border: 2px solid #5C4F3F; /* Viền dày hơn, màu nâu đất đậm chất retro */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); /* Bóng đổ nổi bật hơn */
}

/* Tiêu đề H1 - Cải tiến phong cách Retro Hiện Đại */
h1 {
    font-family: 'Playfair Display', serif; /* Giữ phông chữ cổ điển, sang trọng */
    font-size: 3em; /* Tăng kích thước để nổi bật hơn */
    color: #5C4F3F; /* Giữ màu nâu đất mạnh mẽ */
    text-align: center;
    margin-bottom: 35px;
    letter-spacing: 2px; /* Giãn chữ nhiều hơn tạo sự thanh lịch và "đồ sộ" */
    text-transform: uppercase;
    position: relative;
    padding-bottom: 15px;
    
    /* Hiệu ứng đổ bóng chữ nhẹ nhàng để tạo chiều sâu - Retro tinh tế */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); 
}

h1::after { /* Đường gạch chân dưới tiêu đề, độc đáo hơn */
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 100px; /* Tăng chiều dài gạch chân */
    height: 4px; /* Tăng độ dày gạch chân */
    background-color: #B8860B; /* Màu vàng đồng (Goldenrod) cổ điển */
    border-radius: 2px;
}

h2 {
    font-family: 'Oswald', sans-serif; /* Phông chữ mạnh mẽ, gọn gàng cho tiêu đề phụ */
    font-size: 1.8em;
    color: #4A403A; /* Màu nâu xám đậm */
    margin-top: 40px;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid #D4C9B3; /* Đường kẻ dưới tiêu đề phụ màu vintage */
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* Đoạn giới thiệu - Cải tiến phong cách Retro Hiện Đại */
.intro-text {
    font-size: 1.2em; /* Tăng kích thước font cho dễ đọc và có trọng lượng hơn */
    text-align: center;
    margin-bottom: 40px;
    color: #4A403A; /* Chuyển sang màu nâu xám đậm hơn để thống nhất với tông màu retro */
    font-style: italic; /* Giữ nghiêng để tạo sự thu hút */
    padding: 15px 25px; /* Thêm padding để tạo không gian thoáng đãng */
    line-height: 1.8; /* Tăng khoảng cách dòng để dễ đọc hơn */
    
    /* Hiệu ứng viền mảnh hoặc box-shadow nhẹ để tạo điểm nhấn */
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.7); /* Nền hơi mờ, tạo cảm giác nhẹ nhàng */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* Bóng đổ nhẹ */
}

/* Bảng giá */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 35px;
    background-color: #FCFCFC; /* Nền bảng sáng hơn */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    overflow: hidden; /* Đảm bảo bo góc cho bảng */
}

table th, table td {
    padding: 15px 20px;
    text-align: left;
    border-bottom: 1px solid #ECECEC;
}

table th {
    background-color: #5C4F3F; /* Nền tiêu đề bảng màu nâu đất retro */
    color: #FFFAEC; /* Chữ trắng kem nổi bật */
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 1.05em;
}

table tr:nth-child(even) { /* Màu xen kẽ cho hàng */
    background-color: #FDF9F0; /* Màu kem nhạt hơn */
}

table tr:hover { /* Hiệu ứng khi rê chuột */
    background-color: #F0E8D9; /* Màu nền ấm hơn khi hover */
    transition: background-color 0.3s ease;
}

/* Dịch vụ hóa chất và combo - giá */
table td:last-child {
    font-weight: bold;
    color: #B8860B; /* Màu vàng đồng cho giá */
    font-size: 1.1em;
}

/* Ưu đãi đặc biệt */
.offer-section {
    background-color: #FFF8E1; /* Nền vàng kem nhạt nổi bật */
    padding: 30px;
    margin-top: 40px;
    border-radius: 8px;
    border: 2px dashed #B8860B; /* Viền nét đứt màu vàng đồng, rất retro */
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.offer-section h2 {
    color: #B8860B !important; /* Màu vàng đồng cho tiêu đề ưu đãi */
    border-bottom: none;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 2em;
}

.offer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.offer-section ul li {
    margin-bottom: 15px;
    font-size: 1.15em;
    color: #4A403A;
}

.offer-section ul li strong {
    color: #5C4F3F; /* Màu nâu đất cho tên combo */
}

.offer-section .price-highlight {
    font-weight: bold;
    color: #E74C3C; /* Màu đỏ nổi bật cho giá */
    font-size: 1.2em;
}

.offer-section p {
    font-size: 0.9em;
    color: #777;
    margin-top: 25px;
}

/* Thư viện ảnh - Slider ngang */
.image-gallery {
    display: flex; /* Chính xác, để các ảnh nằm trên một hàng */
    overflow-x: auto; /* Tạo thanh cuộn ngang khi nội dung tràn */
    gap: 15px; /* Khoảng cách giữa các ảnh */
    padding-bottom: 10px; /* Tạo không gian cho thanh cuộn nếu nó xuất hiện */
    /* Ẩn thanh cuộn mặc định nhưng vẫn giữ chức năng cuộn */
    -ms-overflow-style: none;  /* Cho Internet Explorer và Edge */
    scrollbar-width: none;  /* Cho Firefox */
    /* Cải thiện cuộn mượt mà trên thiết bị cảm ứng */
    scroll-snap-type: x mandatory; /* Để ảnh "khớp" vào vị trí khi cuộn */
    -webkit-overflow-scrolling: touch; /* Cải thiện cuộn trên iOS */
}

/* Ẩn thanh cuộn cho WebKit (Chrome, Safari) */
.image-gallery::-webkit-scrollbar {
    display: none;
}

.image-gallery img {
    flex: 0 0 auto; /* Quan trọng: Đảm bảo ảnh không co giãn và giữ kích thước cố định */
    width: 250px; /* Kích thước cố định cho mỗi ảnh */
    height: 180px; /* Chiều cao cố định */
    object-fit: cover; /* Đảm bảo ảnh được cắt để lấp đầy khung mà không bị méo */
    border-radius: 8px; /* Bo góc nhẹ cho ảnh */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Tạo hiệu ứng bóng đổ tinh tế */
    transition: transform 0.2s ease; /* Hiệu ứng chuyển động mượt mà khi hover */
    scroll-snap-align: start; /* Ảnh sẽ căn chỉnh với điểm bắt đầu của khung nhìn khi cuộn */
}

.image-gallery img:hover {
    transform: scale(1.05); /* Ảnh phóng to nhẹ khi rê chuột vào */
}

.image-gallery + p a {
    color: #B8860B !important; /* Màu vàng đồng cho link mạng xã hội */
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
    display: inline-block;
    padding: 8px 15px;
    border: 2px solid #B8860B;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.image-gallery + p a:hover {
    background-color: #B8860B;
    color: #FFF !important;
}

/* Nút đặt lịch */
.book-button-container {
    text-align: center;
    margin: 40px 0;
}

.book-button {
    display: inline-block;
    background-color: #E74C3C; /* Màu đỏ nổi bật, năng động */
    color: #FFF;
    padding: 18px 35px;
    font-size: 1.4em;
    font-weight: bold;
    text-decoration: none;
    border-radius: 50px; /* Bo tròn hoàn toàn tạo hình oval */
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 6px 15px rgba(231, 76, 60, 0.4); /* Bóng đổ cho nút */
    letter-spacing: 1px;
    text-transform: uppercase;
}

.book-button:hover {
    background-color: #C0392B; /* Màu đỏ sẫm hơn khi hover */
    transform: translateY(-3px); /* Nút nhích lên nhẹ */
}

/* Style cho icon Zalo trong nút đặt lịch */
.book-button .fab.fa-zalo {
    margin-right: 10px; /* Khoảng cách giữa icon và chữ */
    font-size: 1.2em; /* Kích thước icon lớn hơn một chút */
    vertical-align: middle; /* Căn giữa icon với chữ */
}

/* Đánh giá khách hàng */
.testimonial-section {
    margin-top: 50px;
    padding: 30px;
    background-color: #FDF9F0; /* Nền kem nhạt cho phần đánh giá */
    border-radius: 8px;
    border: 1px solid #E0DBCF;
}

.testimonial-section h2 {
    color: #5C4F3F !important;
    border-bottom: none;
    margin-top: 0;
    margin-bottom: 30px;
    font-size: 2em;
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.testimonial-item {
    background-color: #FFF;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border-left: 5px solid #B8860B; /* Điểm nhấn màu vàng đồng */
}

.testimonial-item p {
    font-style: italic;
    color: #555;
    margin-bottom: 15px;
    font-size: 1.05em;
}

.testimonial-item footer {
    font-weight: bold;
    color: #4A403A;
    text-align: right;
    font-size: 0.95em;
}

/* Footer */
.footer {
    text-align: center;
    margin-top: 50px;
    padding: 25px;
    background-color: #5C4F3F; /* Nền footer màu nâu đất đậm */
    color: #FFFAEC; /* Chữ trắng kem */
    border-radius: 8px;
    font-size: 0.95em;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1);
}

.footer p {
    margin: 8px 0;
}

.footer a {
    color: #B8860B; /* Màu vàng đồng cho link trong footer */
    text-decoration: none;
    font-weight: bold;
}

.footer a:hover {
    text-decoration: underline;
}