/* =================================== */
/* === GIAO DIỆN CHO MENU DI ĐỘNG === */
/* =================================== */

/* Nút Hamburger (☰) */
.hamburger-menu {
    display: flex; /* Mặc định ẩn, sẽ hiện ra ở phần mobile */
    flex-direction: column;
    justify-content: space-around;
    width: 2rem;
    height: 2rem;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-top: 10px;
    z-index: 1001; /* Luôn nổi trên các phần tử khác */
    position: absolute;
    left: 20px; /* Khoảng cách từ lề trái */
    top: 50%; /* Căn giữa theo chiều dọc */
    transform: translateY(-50%); /* Căn giữa chính xác */
}

.hamburger-menu span {
    width: 2rem;
    height: 0.25rem;
    background: black;
    border-radius: 10px;
    transition: all 0.3s linear;
}

/* Khung Menu Di Động (ẩn mặc định) */
.mobile-nav {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Bắt đầu từ trên xuống */
    align-items: stretch; /* Kéo dài các mục theo chiều ngang */
    background-color: black;
    height: 100%;
    width: 85%; /* Chiều rộng 60% màn hình như yêu cầu */
    max-width: 350px; /* Giới hạn chiều rộng tối đa */
    position: fixed;
    top: 0;
    left: 0;
    transform: translateX(-100%); /* Ẩn menu ra ngoài màn hình bên trái */
    transition: transform 0.3s ease-in-out;
    padding-top: 5rem;
    z-index: 1000;
}

/* Trạng thái KHI MENU MỞ */
.mobile-nav.open {
    transform: translateX(0); /* Hiện menu ra */
}

/* Các link bên trong menu */
.mobile-nav a {
 color: white;
 text-decoration: none;
 font-size: 1.2rem;
 padding: 15px 30px; /* Giữ lại padding trên dưới và phải */
 padding-left: 20px; /* Thêm khoảng cách từ lề trái */
 transition: background-color 0.2s;
 display: block; /* Mỗi link chiếm một dòng */
 text-align: center; /* Căn trái chữ */
}

.mobile-nav a:hover {
    background-color: #333;
}

/* Lớp phủ Overlay (ẩn mặc định) */
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

/* Trạng thái KHI MENU MỞ */
.overlay.open {
    display: block; /* Hiện lớp phủ */
}
body {
    font-family: Arial, sans-serif;
    margin: 0;
    scroll-behavior: smooth;
    line-height: 1.6; /* Tăng khoảng cách dòng để dễ đọc */
    color: #333; /* Màu chữ mặc định */
    overflow-x: hidden;
}

/* Base styles cho các thẻ chữ */
strong {
    color: black;
    font-size: 1.5em; /* Kích thước font tương đối cho mobile */
    font-weight: bold;
    font-family: 'Arial', sans-serif;
}

p {
    color: black;
    font-size: 1em; /* Kích thước font tương đối cho mobile */
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
}

/* Đảm bảo hình ảnh co giãn linh hoạt và không bị tràn */
img {
    max-width: 100%;
    height: auto;
    display: block; /* Loại bỏ khoảng trắng không mong muốn dưới ảnh */
}

/* Reset lại style mặc định của thẻ a để dễ tùy chỉnh */
a {
    text-decoration: none;
    color: inherit; /* Kế thừa màu chữ từ phần tử cha */
    transition: color 0.3s ease; /* Thêm transition cho link */
}
a:hover {
    color: #007bff; /* Ví dụ: đổi màu khi hover */
}

/* Style mặc định cho h2 */
h2 {
    font-size: 2em; /* Kích thước h2 mặc định cho mobile */
    color: #333;
    margin-bottom: 20px;
    text-align: center; /* Căn giữa h2 mặc định */
}

/* --- Header Top Bar --- */
.header-top-bar {
    display: flex;
    justify-content: center; /* Căn giữa logo */
    flex-direction: column; /* Mặc định xếp dọc trên mobile */
    align-items: center; /* Căn giữa các phần tử */
    padding: 15px 20px; /* Unified padding */
    background-color: #fff;
    border-bottom: 1px solid #eee;
    text-align: center;
    position: relative; /* Quan trọng để định vị nút hamburger */
    min-height: 80px; /* Thêm chiều cao tối thiểu để nút không bị lệch */
    position: relative; 
}

.logo-container img {
    max-width: 180px; /* Nhỏ hơn trên mobile */
    margin-bottom: 0; /* Khoảng cách dưới logo */
     align-items: center;
}

.contact-social-info {
    text-align: right; /* Căn giữa trên mobile */
    font-size: 14px;
    color: #555;
    width: 100%; /* Chiếm toàn bộ chiều rộng */
    margin-bottom: 15px; /* Khoảng cách dưới cùng của khối contact-social-info */
}
.logo-container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}



.social-connect-section {
    display: none;
    align-items: center; /* Căn giữa các mục con */
    gap: 10px;
    width: 100%; /* Đảm bảo chiếm toàn bộ chiều rộng để align-items center hoạt động */
}
.social-connect-section h2 {
    color: black;
    font-size: 1.5em; /* Điều chỉnh kích thước nếu cần */
    margin-bottom: 0; /* Đảm bảo không có margin dưới h2 */
}

.social-icons {
    display: flex;
    gap: 10px;
    margin-bottom: 10px; /* Khoảng cách dưới social icons */
}

.social-icons a img {
    width: 32px;
    height: 32px;
    vertical-align: middle;
    padding: 4px;
    background-color: #f8f8f8;
    border-radius: 10%; /* Đảm bảo icon tròn */
    transition: all 0.3s ease;
}

.social-icons a img:hover {
    transform: scale(1.1); /* Hiệu ứng khi hover */
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
}

.call-info { /* Class mới cho số điện thoại */
    color: black;
    font-size: 1.5em; /* Điều chỉnh font size cho phù hợp với thiết kế tổng thể mobile */
    margin-top: 5px; /* Khoảng cách trên số điện thoại */
}

/* --- Navigation Bar --- */
.navbar {
    
    background-color: black;
    padding: 10px 0;
    text-align: center;
    justify-content: center;
    display: flex;
    flex-direction: row; /* Mặc định xếp dọc trên mobile */
    gap: 10px; /* Giảm khoảng cách cho mobile */
    overflow-x: hidden; /* Ngăn chặn cuộn ngang không mong muốn */
    align-items: center;
}

.nav-links, .nav-buttons {
    width: 100%; /* Chiếm toàn bộ chiều rộng có sẵn */
    display: flex;
    flex-direction: row;
    align-items: center; /* Căn giữa các mục con */
    gap: 5px; /* Giữ khoảng cách giữa các link/button trên mobile */
}

.nav-links a { /* Style cho các liên kết nav */
    color: white;
    font-size: 1em;
    padding: 8px 15px;
    width: 80%; /* Chiếm phần lớn chiều rộng */
    margin: 0 auto;
    box-sizing: border-box;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.nav-links a:hover {
    background-color: gray;
    color: black;
    border-radius: 5px;
}

.nav-buttons .nav-button { /* Style cho các nút nav */
    background-color: transparent;
    border: 1px solid white;
    color: white;
    font-size: 1em;
    cursor: pointer;
    padding: 8px 15px;
    width: 40%; /* Chiếm phần lớn chiều rộng */
    margin: 0 auto;
    box-sizing: border-box;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
    margin-top: 5px;
    
}

.nav-buttons .nav-button:hover {
    background-color: gray;
    color: black;
}

/* --- Intro Section --- */
.intro {
    display: block; /* Mặc định là block để nội dung xếp dọc */
    text-align: center; /* Căn giữa nội dung */
    padding: 20px; /* Padding tổng thể */
    margin: 20px auto;
    max-width: 100%; /* Đảm bảo không tràn */
    box-sizing: border-box;
}

/* Style cho strong và p trong intro - Đảm bảo strong nằm cùng hàng với p */
.intro strong {
    color: black;
    font-size: 27px; /* Kích thước font mong muốn */
    font-weight: bold;
    /* Loại bỏ display: block; và margin-bottom để nó inline */
}
.intro p {
    color: black;
    font-size: 18px; /* Kích thước font mong muốn */
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    margin-top: 0; /* Đảm bảo không có margin top thừa */
    text-align: center; /* Căn giữa đoạn văn bản trên mobile */
}


/* --- Services Section --- */
.services-section {
    max-width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.services-section h2 {
    font-size: 2em;
    margin-bottom: 30px;
    margin-left: 0; /* Reset margin-left để nó căn giữa theo text-align: center */
    text-align: center; /* Mặc định là center */
}

.services-container {
    display: flex;
    flex-direction: column; /* Xếp dọc trên mobile */
    align-items: center;
    gap: 30px;
}

.service-card {
    width: 90%; /* Chiếm phần lớn chiều rộng trên mobile */
    max-width: 400px; /* Giới hạn chiều rộng thẻ */
    border: 1px solid #000;
    text-align: center;
    height: 350px; 
    background-color: #fff; /* Mặc định là màu trắng */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Đẩy nội dung lên trên và nút xuống dưới */
    border-radius: 8px; /* Bo góc thẻ */
    padding: 30px 20px; /* Thêm padding cho nội dung bên trong */
    box-sizing: border-box; /* Quan trọng để padding không làm tăng width/height */
}

/* Style cho service-card màu đen */
.dark-service-card {
    background-color: black; /* Nền đen */
    color: white; /* Chữ trắng cho toàn bộ card */
    border-color: black; /* Viền màu đen */
}

/* Đảm bảo các thẻ con trong dark-service-card cũng có màu chữ trắng */
.dark-service-card h3,
.dark-service-card p {
    color: white; /* Chữ trắng cho h3 và p */
}

/* Style cho nút Book Now trong dark-service-card */
.dark-service-card .btn-book-service {
    background-color: white; /* Nền trắng */
    color: black; /* Chữ đen */
    border-color: white; /* Viền trắng */
}

.dark-service-card .btn-book-service:hover {
    background-color: #f0f0f0; /* Hơi xám khi hover */
    color: #333;
    border-color: #f0f0f0;
}


/* Điều chỉnh style chung cho nút Book Now */
.service-card .btn-book-service {
    display: block; /* Quan trọng để nút chiếm hết chiều rộng và có thể căn giữa */
    width: fit-content; /* Giúp nút chỉ rộng bằng nội dung của nó */
    margin: 0 auto; /* Căn giữa nút */
    background-color: transparent; /* Giữ nguyên màu nền trong suốt cho mặc định */
    border: 1px solid #000;
    color: white;
    padding: 10px 25px; /* Kích thước padding cho nút */
    text-decoration: none;
    font-size: 1em; /* Dùng em để responsive */
    font-weight: bold;
    border-radius: 5px;
    transition: all 0.3s ease;
    margin-top: auto; /* Đẩy nút xuống dưới cùng trong flex column */
    cursor: pointer;
}

.service-card .btn-book-service:hover {
    background-color: #000;
    color: #fff;
}


.service-card h3 {
    font-size: 1.4em; /* Kích thước chữ h3 cho mobile */
    margin-bottom: 10px;
    margin-top: 0; /* Đảm bảo h3 không có margin top thừa */
}

.service-card p {
    font-size: 0.95em; /* Kích thước chữ p cho mobile */
    margin-bottom: 20px;
}

.service-card .btn-book-service {
    display: inline-block;
    background-color: transparent;
    border: 1px solid #000;
    color: #000;
    padding: 10px 20px;
    text-decoration: none;
    font-size: 0.95em;
    font-weight: bold;
    border-radius: 5px;
    transition: all 0.3s ease;
    margin-top: auto; /* Đẩy nút xuống dưới cùng trong flex column */
    cursor: pointer;
}
.dark-service-card .btn-book-service {
    background-color: black;   /* Nền đen */
    color: white;             /* Chữ trắng */
    border-color: white;      /* Viền trắng */
}

.dark-service-card .btn-book-service:hover {
    background-color: #333;   /* Hơi xám đậm khi hover */
    color: white;             /* Giữ chữ trắng */
    border-color: #333;       /* Giữ viền màu tương tự nền khi hover */
}



/* --- Gallery Section --- */
.gallery-section {
    margin: 50px;
    padding: 0; /* Đảm bảo section không có padding ngang mặc định */
    max-width: 100%;
    box-sizing: border-box;
}

.gallery-title {
    font-size: 2em;
    text-align: center; /* Mặc định căn giữa trên mobile */
    margin-top: 0;
    margin-bottom: 30px;
    margin-left: 0; /* Reset margin-left */
    color: #333;
}

.gallery-container {
    display: flex;
    flex-direction: column; /* Mặc định xếp dọc trên mobile */
    align-items: center; /* Căn giữa ảnh */
    gap: 15px; /* Khoảng cách giữa các ảnh trên mobile */
    max-width: 100%; /* Tràn viền trên mobile */
    margin: 0 auto; /* Tràn viền trên mobile */
    padding: 0 20px; /* Thêm padding ngang cho mobile để nội dung không dính mép */
    box-sizing: border-box;
}

.gallery-container  .gallery-image{
    width: 100%; /* Chiếm toàn bộ chiều rộng có sẵn trên mobile */
    max-width: 400px; /* Giới hạn kích thước ảnh riêng lẻ trên mobile */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    height: auto;/* đã có trong global img*/ 
}


/* --- Footer --- */
footer {
    background-color: #EDEDED;
    display: flex;
    flex-direction: column; /* Xếp dọc trên mobile */
    gap: 25px; /* Khoảng cách giữa các cột footer */
    color: black;
    text-align: center; /* Căn giữa nội dung footer */
    padding: 0px 20px; /* Padding tổng thể */
}

.footer-column {
    width: 100%; /* Chiếm toàn bộ chiều rộng trên mobile */
    text-align: left;
}

footer h4 {
    font-size: 22.88px;
    margin-bottom: 15px;
    color: black;
    font-style:unset;
    font-weight: normal;
}

footer div p {
    display: flex; /* Bật Flexbox cho mỗi dòng p */
    justify-content: space-between; /* Căn giữa nội dung p trên mobile */
    gap: 10px; /* Khoảng cách giữa ngày và giờ */
    margin: 5px 0;
    font-size: 15.84px;
    color: black;
}

footer div p span:first-child { /* Đảm bảo span nằm cùng hàng trong p */
    flex-shrink: 0; /* Ngăn span co lại */
}
footer div p span:last-child {
    flex-shrink: 0; /* Ngăn span co lại */
   
}


footer div p a { /* Style cho link trong p của footer */
    color: black;
    text-decoration: none;
}

footer div p a:hover {
    color: #555;
}

.footer-button {
    background-color: transparent;
    border: 1px solid black;
    color: black;
    padding: 8px 15px;
    border-radius: 5px;
    font-size: 0.9em;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    margin: 5px auto; /* Căn giữa nút */
    display: block; /* Đảm bảo nút chiếm một dòng riêng */
    max-width: fit-content; /* Để nút không quá rộng */
}
.footer-button:hover {
    background-color: black;
    color: white;
}

.map-container {
    margin-top: 15px;
    margin-bottom: 15px;
}

.copyright-info {
    font-size: 1em; /* Đặt lại thành em để responsive tốt hơn */
    color: black; /* Màu chữ nhẹ hơn */
}

.nav-links-desktop {
    display: none;
}
/* --- Tablet Styles (min-width: 768px) --- */
@media screen and (min-width: 768px) {
   /* --- Header Top Bar --- */
.header-top-bar {
    display: flex;
    align-items: center;      /* Căn giữa các mục theo chiều dọc */
    justify-content: center;  /* Căn giữa logo theo chiều ngang */
    padding: 15px 20px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    position: relative;       /* Bắt buộc phải có để định vị nút hamburger */
    min-height: 80px;
}
.hamburger-menu {
    display: none; /* Hiện nút hamburger trên mobile */
}
    
    .logo-container img {
        max-width: 200px;
        margin-bottom: 0;
    }

    .contact-social-info {
        display: flex; /* Thêm dòng này */
        position: absolute;
        left: 500px; 
        text-align: right;
        display: flex; /* Dùng flex để căn chỉnh nội dung bên trong */
        flex-direction: column;
        margin-bottom: 0; /* Reset margin */
        margin-left: auto;
        align-items: center;
        left: 650px; /* Dùng right thay cho left để linh hoạt hơn */
        top: 50%;
        
        
    }

    .social-connect-section {
        flex-direction: row; /* Chuyển thành hàng ngang */
        align-items: center;
        width: auto; /* Để flex tự điều chỉnh chiều rộng */
    }
    .social-connect-section h2 { /* Sử dụng h2 thay cho p (call-info) trong social-connect-section */
        font-size: 1.8em; /* Kích thước lớn hơn cho tablet */
        margin-right: 15px; /* Khoảng cách giữa h2 và icons */
        text-align: right; /* Căn phải h2 */
    }
    .call-info { /* Chắc chắn đây là .call-info chứ không phải social-connect-section p */
        text-align: right; /* Căn phải số điện thoại */
        font-size: 1.2em; /* Điều chỉnh font size cho tablet */
    }

    /* Navbar */
    .navbar {
        display: flex; 
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 15px 40px;
        max-width: none; /* Loại bỏ max-width để tràn viền */
        margin: 0; /* Loại bỏ margin auto để tràn viền */
    }

    .nav-links {
        flex-direction: row; /* Các link xếp ngang */
        gap: 20px; /* Khoảng cách giữa các link */
        width: auto;
    }

    .nav-buttons {
        flex-direction: row; /* Các nút xếp ngang */
        gap: 15px; /* Khoảng cách giữa các nút */
        width: auto;
    }

    .nav-links a,
    .nav-buttons .nav-button {
        font-size: 1.1em;
        width: auto;
        margin: 0;
        padding: 8px 15px;
    }

    /* Intro */
    .intro {
        /* display: block; đã có từ global */
        flex-direction: row; /* Re-enable flex for tablet if you want the two-column layout */
        align-items: center; /* Align items vertically in the two-column layout */
        padding: 30px 40px;
        max-width: 1200px; /* Giới hạn chiều rộng nội dung chính */
        margin: 20px auto; /* Căn giữa khối intro */
        text-align: center; /* Căn trái nội dung trên tablet */
    }
    .intro strong {
        font-size: 1.8em; /* Kích thước lớn hơn cho tablet */
        flex-shrink: 0; /* Ngăn strong bị co lại */
        margin-right: 20px; /* Khoảng cách giữa strong và p */
        text-align: right; /* Căn phải strong trong layout 2 cột */
        min-width: 200px; /* Giữ một chiều rộng tối thiểu cho strong */
    }
    .intro p {
        font-size: 1.1em;
        margin-top: 0;
        margin-left: 0;
        text-align: center; /* Đảm bảo văn bản canh trái */
    }

    /* Services */
    .services-section h2 {
        font-size: 2.5em;
        margin-left: 280px; /* Reset margin-left để center */
        text-align:left; /* Center h2 on tablet */
    }

    .services-container {
        flex-direction: row; /* Chuyển thành hàng ngang */
        justify-content: center;
        gap: 40px;
        max-width: 100%; /* Tràn viền trên tablet */
        padding: 0 20px; /* Thêm padding ngang để card không dính
        flex-wrap: wrap; /* Cho phép xuống dòng nếu nhiều card */
        
    }

    .service-card {
        width: calc(50% - 20px); /* Hai cột trên tablet, trừ đi gap */
        max-width: 450px;
        padding: 40px 30px;
        height: auto; /* Đảm bảo chiều cao tự động, không cố định */
        text-align: center; /* Giữ nguyên text-align center */
        margin-top: 0; /* Đảm bảo không có margin top thừa */
    }
    .service-card .btn-book-service {
        width: fit-content; /* Đảm bảo nút vẫn cân đối */
    }

    .service-card h3 {
        font-size: 1.6em;
        margin-top: 0; /* Đảm bảo h3 không có margin top thừa */
    }

    /* Gallery Section */
    .gallery-title {
        font-size: 2.5em;
        text-align: left; /* Căn giữa trên tablet */
        margin-left: 253px; /* Reset margin-left */
    }

    .gallery-container {
        flex-direction: row; /* Chuyển thành hàng ngang */
        justify-content: center; /* Căn giữa nhóm ảnh */
        gap: 25px; /* Khoảng cách giữa các ảnh */
        max-width: 100%; /* Tràn viền trên tablet */
        padding: 0 20px; /* Thêm padding ngang để ảnh không dính mép */
        flex-wrap: wrap;
        padding: 0; /* Reset padding ngang */
    }
    .gallery-container .gallery-image {
        width:calc(50% - 12.5px); /* 2 ảnh mỗi hàng, trừ đi một nửa gap mỗi bên */
        max-width: none; /* Bỏ max-width để flex:1 hoạt động tốt */
        height: 300px; /* Đảm bảo chiều cao tự động */
        object-fit: cover;
    }

    /* Footer */
    footer {
        flex-direction: row; /* Chuyển thành hàng ngang */
        justify-content: space-around; /* Phân bổ đều các cột */
        text-align: left; /* Căn trái nội dung footer */
        padding:0px 20px;
        flex-wrap: wrap;
    }

    .footer-column {
        width: auto;
        min-width: 200px;
        text-align: left;
    }

    footer h4 {
        font-size: 22.88px;
        margin-bottom: 20px;
         font-weight: normal;
    }

    footer div p {
        /* display: flex; đã có từ global */
        text-align: left; /* Đảm bảo text-align của p là left */
    }
    footer div p span:first-child {
        flex-basis: 110px; /* Chiều rộng cố định cho cột ngày */
        text-align: right; /* Căn phải tên ngày */
        padding-right: 15px; /* Khoảng cách sau dấu ":" */
    }
    footer div p span:last-child {
        flex-grow: 1; /* Cho phép giờ mở rộng */
        text-align: right; /* Căn trái giờ */
    }

    .footer-button {
        margin: 5px 0;
        display: inline-block;
    }
    .copyright-info {
        font-size: 0.9em;
        
    }
    .nav-links-desktop {
    display: flex;
    }
}

/* --- Desktop Styles (min-width: 1024px) --- */
@media screen and (min-width: 1024px) {
    /* Header */
    
    .logo-container img {
        max-width: 300px;
    }
    .social-icons a img {
        width: 38px;
        height: 38px;
    }
    .social-connect-section h2 {
        font-size: 2em;
    }
    .call-info {
        font-size: 1.5em; /* Lớn hơn trên desktop */
    }

    /* Navbar */
    .navbar {
         justify-content: center; /* Căn giữa toàn bộ nội dung navbar */
        align-items: center;
        gap: 50px; /* Khoảng cách giữa nhóm link và nhóm button */
        padding: 15px 40px;
    }
    .nav-links {
        gap: 30px;
    }
    .nav-buttons {
        gap: 20px;
    }
    .nav-links a,
    .nav-buttons .nav-button {
        font-size: 1.1em; /* Sử dụng em thay cho px để responsive tốt hơn */
    }

    .nav-links-desktop a {
        color: white;
        text-decoration: none;
        font-size: 1.1em;
        padding: 5px 10px;
        transition: color 0.3s;
    }
    .nav-links-desktop a:hover {
        color: #ccc;
    }
    
    /* Intro */
    .intro {
        padding: 50px 80px;
        /* flex-direction: row; và align-items: center; vẫn giữ từ tablet */
    }
    .intro strong {
        font-size: 2.2em;
        /* text-align: right; và min-width từ tablet vẫn áp dụng nếu giữ 2 cột */
    }
    .intro p {
        font-size: 1.15em; /* Điều chỉnh font size cho phù hợp với desktop */
        /* text-align: left; từ intro container */
    }
    
    /* Services */
    .services-section {
        max-width: 1750px;
        
    }
    .services-container {
        flex-wrap: nowrap; /* Giữ trên một hàng */
        justify-content: space-evenly;
    }
    .service-card {
        padding: 50px 30px; /* Tăng padding trên desktop */
        /* height: auto;  Đảm bảo chiều cao tự động */
    }

    .service-card .btn-book-service {
        width: fit-content; /* Đảm bảo nút vẫn cân đối */
        font-size: 1.05em; /* Tùy chỉnh kích thước font cho desktop */
    }
    /* Gallery Section */
    .gallery-title {
        font-size: 2.8em; /* Lớn hơn trên desktop */
    }
    .gallery-container {
        max-width: 1500px; /* Tăng max-width nếu muốn rộng hơn */
        gap: 30px;
        padding: 0 40px;
        flex-wrap: nowrap;
        justify-self: center;
    }
    .gallery-container .gallery-image {
        width: calc(33.33% - 20px); /* 3 ảnh mỗi hàng, trừ đi gap */
        height: 400px; /* Cố định chiều cao nếu muốn, hoặc dùng auto */
    }

    /* Footer */
    footer {
        padding: 0px 40px;
        justify-content: space-evenly;
        flex-wrap: nowrap;
    }
    .footer-column {
        min-width: 220px;
    }
    footer h4 {
        font-size: 2.2em;
        font-weight: normal;
    }
    footer div p {
        font-size: 1.1em;
    }
    footer div p span:first-child {
        flex-basis: 120px; /* Chiều rộng cho cột ngày trên desktop */
        padding-right: 20px; /* Khoảng cách rộng hơn */
    }

    .social-connect-section {
        display: flex;
        align-items: center;
    }

    /* Hiện các link điều hướng desktop */
    .nav-links-desktop {
        display: block;
        gap: 25px; /* Khoảng cách giữa các link: Home, Service... */
    }

    /* Ẩn nút hamburger trên desktop */
    .hamburger-menu {
        display: none;
    }
}