body {
    font-family: "Segoe UI", sans-serif;
    margin: 0;
    background: #fff;
    color: #333;
}

/* HEADER PART 1 — Thanh xanh nhạt */
.header-top {
    background: #e6f2ff;
    padding: 6px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.header-top .left span {
    margin-right: 15px;
    font-weight: 500;
}

.header-top .hotline {
    color: #d60000;
    font-weight: 700;
}

.header-top .right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-top .lang {
    padding: 4px 6px;
}

/* HEADER PART 2 — Nền trắng */
.header-bottom {
    background: #ffffff;
    padding: 12px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    position: relative;
}

.header-bottom .logo img {
    height: 45px;
}

.main-menu a {
    margin: 0 18px;
    text-decoration: none;
    font-weight: 500;
    color: #222;
}

.main-menu a:hover {
    color: #007bff;
}

.menu-icon {
    font-size: 26px;
    cursor: pointer;
    margin-left: 25px;    
    display: flex;
    align-items: center;  
}

.main-menu {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* DROPDOWN MENU */
.dropdown-panel {
    position: fixed;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;          
    max-width: 1200px;
    background: #fff;
    z-index: 9999;
    padding: 25px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    opacity: 0;
    pointer-events: none;
    transition: 0.3s ease;
}

.dropdown-panel.active {
    opacity: 1;
    pointer-events: auto;
}

.dropdown-header {
    position: relative;
    height: 30px; 
    margin-bottom: 20px;
}

.close-btn {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 24px;
    font-weight: 600;
    cursor: pointer;
}

/* XÓA margin-top âm */
.dropdown-section {
    display: inline-block;
    width: 25%;
    vertical-align: top;
    position: relative;
    z-index: 999; /* giúp menu luôn nằm trên */
    text-align: left;
    margin-top: -35px;
    padding-top: 0;
}

.dropdown-section .menu-item {
    margin-top: 0; /* xoá khoảng dư trên mỗi mục */
}

.dropdown-menu, 
.dropdown-content, 
.menu-dropdown, 
.dropdown-box {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}


.dropdown-section a {
    display: block;
    margin-bottom: 8px;
    color: #333;
    text-decoration: none;
}

.dropdown-section a:hover {
    color: #007bff;
}

.menu-item {
    text-decoration: none;
    color: inherit;
    display: block; /* GIỮ block để vùng click rộng */
    font-size: 17px;
    margin-bottom: 10px;
    font-weight: 700;
}

/*RESPONSIVE HEADER*/
@media (max-width: 768px) {
    
    /* 1. HEADER PART 1 (Thanh xanh nhạt) */
    .header-top {
        padding: 8px 15px;
        flex-direction: column; 
        align-items: flex-start;
        font-size: 12px;
    }

    .header-top .left {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
    }
    
    .header-top .right {
        width: 100%;
        justify-content: space-between;
        gap: 0;
    }

    .header-top .left span {
        margin-right: 0;
    }

    /* 2. HEADER PART 2 (Nền trắng) */
    .header-bottom {
        padding: 10px 15px;
    }

    .header-bottom .logo img {
        height: 35px;
    }
    
    /* Ẩn các liên kết menu chính trên desktop (chỉ hiện menu icon) */
    /* *** Giả sử bạn đã chuyển các liên kết này vào dropdown trên mobile *** */
    .main-menu a:not(.menu-icon) {
        display: none !important; /* Đảm bảo ẩn trên mobile nếu chúng còn nằm trong nav */
    }

    .main-menu {
        gap: 0; 
        align-items: center;
    }

    .menu-icon {
        margin-left: 0; 
        font-size: 28px; /* Tăng kích thước icon menu cho dễ chạm */
    }

    /* 3. DROPDOWN MENU */
    .dropdown-panel {
        border-radius: 12px;
        width: 90%;
        max-width: 420px;
        padding: 20px;
        margin-top: 180px;
    }
    
    /* Đảm bảo menu header hiển thị rõ ràng */
    .dropdown-header {
        position: sticky; /* Giữ nút đóng lại khi cuộn */
        top: 0;
        background-color: #fff;
        z-index: 10000;
        padding-bottom: 10px;
    }

    /* Đảm bảo các section con hiển thị tốt */
    .dropdown-section {
        width: 100%; /* Mỗi mục chiếm toàn bộ chiều rộng */
        display: block; 
        margin-top: 15px;
        padding-top: 0; 
        border-bottom: 1px solid #eee; /* Thêm đường kẻ chia các section */
        padding-bottom: 15px;
    }
    
    /* Điều chỉnh các liên kết chính cho mobile */
    .dropdown-section.main-links {
        /* Điều chỉnh nếu bạn thêm phần main-links mới */
        margin-top: 0;
    }

    .dropdown-section:last-child {
        border-bottom: none;
    }

    .menu-item {
        font-size: 16px; 
        margin-bottom: 12px;
    }
}

/* CSS để ẩn các liên kết menu trên DESKTOP trong khi nút menu icon vẫn nằm trong main-menu */
/* Khi ở desktop, các link chính phải hiển thị */
@media (min-width: 769px) {
    /* Đảm bảo các liên kết chính hiển thị bình thường trên desktop */
    .main-menu a:not(.menu-icon) {
        display: block !important;
    }
    
    /* Ẩn các liên kết chính trong dropdown trên desktop (vì chúng đã ở ngoài) */
    .dropdown-section.main-links {
        display: none;
    }
}

/* BANNER */
.banner img {
  align-items: center;
  width: 100%;
}

/* SEARCH */
.search-section {
    width: 100%;
    background: #fff;
    padding: 15px 0;
    position: relative;
    padding-top: 20px;
    margin-bottom: 20px;
}

.search-wrapper {
    max-width: 1250px;
    margin: auto;
    background: white;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    padding: 10px 25px 20px;
}

/* MENU */
.search-menu {
    display: flex;
    gap: 35px;
    list-style: none;
    padding: 0;
    margin-bottom: 15px;
    justify-content: center;
}

.search-menu li {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding-bottom: 5px;
    opacity: 0.7;
}

.search-menu li.active {
    border-bottom: 2px solid #0066ff;
    opacity: 1;
}

.search-menu img {
    width: 22px;
    height: 22px;
}

.search-menu-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

.search-form {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 10px;
}

.search-divider {
    padding: 0 15px;
    color: #aaa;
    font-weight: 300;
    font-size: 20px;
}

.search-btn {
    border: none;
    background: transparent;
}

.search-wrapper {
    border-radius: 18px;
    background: white;
}

/* FORM */
.search-form {
    display: grid;
    grid-template-columns: 1fr 220px 220px 60px;
    align-items: end;
    gap: 20px;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 10px;
}

.search-form .form-group:first-child {
    flex: 2;   
}

.form-group label {
    font-weight: 600;
    color: #222;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 12px 14px;
    font-size: 15px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #fafafa;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.form-group input:focus,
.form-group select:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}


.search-btn {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.search-btn img {
    width: 60px;
    height: 60px;
}

/* Media Query cho màn hình nhỏ (tối đa 768px) */
@media (max-width: 768px) {
    
    .search-section {
        padding: 10px 0; /* Giảm padding */
    }

    .search-wrapper {
        max-width: 90%;
        margin: 0 15px; /* Thêm margin hai bên để không bị dính vào cạnh màn hình */
        padding: 10px 15px 15px; /* Giảm padding bên trong */
        box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Giảm độ đậm của box-shadow */
    }

    /* 1. MENU TÌM KIẾM */
    .search-menu {
        justify-content: flex-start; /* Bắt đầu từ bên trái */
        overflow-x: auto; /* Cho phép cuộn ngang */
        gap: 20px; /* Giảm khoảng cách giữa các mục */
        padding-bottom: 10px; /* Thêm padding dưới để cuộn */
        margin-bottom: 10px;
    }
    
    /* Ẩn thanh cuộn ngang trên một số trình duyệt để giao diện gọn hơn */
    .search-menu::-webkit-scrollbar {
        display: none;
    }
    .search-menu {
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
    }

    .search-menu li {
        flex-shrink: 0; /* Ngăn các mục bị co lại */
        gap: 4px;
        font-size: 13px; /* Giảm font chữ */
        padding-bottom: 5px;
    }
    
    .search-menu img {
        width: 18px;
        height: 18px;
    }
    
    /* 2. FORM TÌM KIẾM */
    .search-form {
        flex-direction: column; /* Xếp chồng các mục form */
        align-items: stretch; /* Căng rộng các mục ra toàn bộ chiều rộng */
        padding: 0;
        gap: 10px; /* Thêm khoảng cách giữa các trường */
    }

    /* Ẩn đường chia dọc */
    .search-divider {
        display: none;
    }

    /* Điều chỉnh các form group để chiếm toàn bộ chiều rộng */
    .form-group {
        width: 93%;
        flex: none !important; /* Bỏ flex: 2 của trường input đầu tiên */
        border: 1px solid #ddd; /* Thêm lại border cho form mobile */
        border-radius: 10px;
        padding: 10px 15px;
    }

    .form-group label {
        display: block; /* Đảm bảo label chiếm hết hàng */
        margin-bottom: 5px;
        font-size: 13px;
    }

    .form-group input,
    .form-group select {
        padding: 5px 0; /* Giảm padding */
        font-size: 14px;
    }
    
    /* Nút tìm kiếm */
    .search-btn {
        width: 100%; /* Căng rộng nút tìm kiếm */
        height: 48px; /* Chiều cao cố định */
        border-radius: 10px;
        background-color: #0066ff; /* Thêm màu nền cho nút */
        margin-top: 10px;
    }
    
    .search-btn img {
        width: 24px; /* Giảm kích thước icon */
        height: 24px;
    }
}

/* GRID ICON */
.icon-row {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 50px;
}

.icon-box {
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    color: #000;
}

.icon-img-box {
    background: #e5f7ff;
    padding: 15px;
    border-radius: 14px;
    display: inline-block;
    transition: 0.25s;
    border: 2px solid transparent;
}

.icon-img-box img {
    width: 40px;
    height: 40px;
}

.icon-text {
    margin-top: 8px;
    font-size: 15px;
    font-weight: 500;
    transition: 0.25s;
}

.icon-box:hover .icon-img-box {
    border-color: #0aa2e8;
    box-shadow: 0 0 6px rgba(0, 150, 255, 0.3);
}

.icon-box:hover .icon-text {
    color: #0aa2e8;
}

/* Media Query cho màn hình nhỏ (tối đa 768px) */
@media (max-width: 768px) {
    
    .icon-row {
        /* Chuyển từ Flexbox ngang sang CSS Grid để tạo lưới */
        display: grid;
        
        /* Chia thành 3 cột đều nhau trên mobile */
        grid-template-columns: repeat(3, 1fr); 
        
        gap: 10px; /* Giảm khoảng cách giữa các icon */
        
        /* Loại bỏ căn giữa nếu bạn muốn nó chiếm toàn bộ chiều rộng */
        /* Nếu bạn có container cho icon-row, đảm bảo nó có padding hai bên */
        padding: 0 15px; 
        margin-bottom: 30px; /* Giảm margin dưới */
    }
    
    /* Thiết lập cho mỗi icon-box */
    .icon-box {
        padding: 5px 0; /* Thêm padding nhẹ */
        text-align: center;
    }

    .icon-img-box {
        padding: 10px; /* Giảm padding của hộp hình ảnh */
        border-radius: 10px; /* Giảm bo góc */
    }

    .icon-img-box img {
        width: 35px; /* Giảm kích thước icon */
        height: 35px;
    }

    .icon-text {
        margin-top: 5px; /* Giảm khoảng cách */
        font-size: 11px; /* Giảm kích thước font chữ cho phù hợp với 3 cột */
        /* Đảm bảo text không bị tràn, có thể thêm line-height hoặc text-overflow nếu cần */
        line-height: 1.2;
    }
    
    /* Tùy chọn: Nếu muốn chỉ 2 cột trên điện thoại nhỏ hơn (ví dụ: < 480px) */
    @media (max-width: 480px) {
        .icon-row {
            grid-template-columns: repeat(2, 1fr); /* Chuyển thành 2 cột */
            gap: 15px;
        }
        
        .icon-text {
            font-size: 13px; /* Tăng font chữ lại */
        }
    }
}

/* AUTO SLIDER */
.slider-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    max-width: 1300px;
    margin: 0 auto 30px auto;
}

.slider-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px; 
    animation: scroll 18s linear infinite;
}

.slider-track a {
    flex: 0 0 calc((100% - 20px) / 3);
    display: block;
    text-decoration: none;
    margin: 0;
    padding: 0;
}

.slider-track img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

/* Animation */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Stop when hover */
.infinite-slider:hover .slide-track {
    animation-play-state: paused;
}

/*KHÁM PHÁ VIETRAVEL */
.vietravel-product-slider {
    width: 100%;
    margin-top: 50px;
    margin-bottom: 30px;
    max-width: 1300px;
    margin: 0 auto;
}

/* HEADER */
.vps-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.vps-header-left h2 {
    color: #004AAD; 
    font-weight: 620;
    font-size: 35px;
    position: relative;
    margin-bottom: 14px;
}

.vps-header-left h2::after {
    content: "";
    display: block;
    width: 70px;
    height: 4px;
    background: #004AAD;
    margin-top: 8px;
    border-radius: 2px;
}

.vps-header-left p {
    width: 65%;
    line-height: 1.5;
    font-weight: 500;
    font-size: 19px;
}

/* ARROWS (đưa vào header, bỏ trong slider) */
.vps-header-arrows {
    display: flex;
    gap: 10px;
}

.vps-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden;
}

.vps-track {
    display: flex;
    gap: 10px;
    transition: transform 0.35s ease;
}

.vps-item {
    position: relative;
    flex: 0 0 calc((100% - 20px) / 3); /* 3 items + 2 gaps = 20px */
    overflow: hidden;
    border-radius: 10px;
    cursor: pointer;
}

.vps-item img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 10px;
}

.vps-title {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 12px 14px;
    color: white;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    font-weight: 700;
    font-size: 16px;
}

.vps-nav {
    position: static;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    border: none;
    background: white;
    width: 42px;
    height: 42px;
    font-size: 20px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.vps-prev {
    left: -20px;
}

.vps-next {
    right: -20px;
}

/* Media Query cho màn hình nhỏ (tối đa 768px) */
@media (max-width: 768px) {
    
    .vietravel-product-slider {
        padding: 0 15px; 
        margin-top: 30px;
        margin-right: 10px;
    }

    /* 1. HEADER */
    .vps-header {
        flex-direction: column; /* Xếp chồng tiêu đề và mũi tên điều hướng */
        align-items: flex-start; /* Căn trái */
        margin-bottom: 15px;
    }

    .vps-header-left h2 {
        font-size: 24px; /* Giảm kích thước tiêu đề chính */
        margin-bottom: 8px;
    }

    .vps-header-left h2::after {
        width: 50px; /* Giảm chiều dài của gạch dưới */
        height: 3px;
        margin-top: 4px;
    }

    .vps-header-left p {
        width: 90%; /* Cho phép đoạn mô tả chiếm toàn bộ chiều rộng */
        font-size: 14px; /* Giảm font chữ */
        line-height: 1.4;
    }
    
    .vps-header-arrows {
        /* Đặt mũi tên điều hướng dưới cùng, căn phải */
        width: 100%;
        display: flex;
        justify-content: flex-end; 
    }

    /* 2. SLIDER ITEMS */
    .vps-wrapper {
        overflow-x: auto; /* Cho phép cuộn ngang */
        -webkit-overflow-scrolling: touch; /* Tăng tốc độ cuộn trên iOS */
        padding-bottom: 10px; /* Thêm padding để tránh thanh cuộn dính vào sản phẩm */
        margin-right: 10px;
    }
    
    /* Ẩn thanh cuộn ngang trên một số trình duyệt */
    .vps-wrapper::-webkit-scrollbar {
        display: none;
    }
    .vps-wrapper {
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
        width: 100%;
        overflow-x: auto;
        padding: 0 10px 15px;
        box-sizing: border-box;
    }

    .vps-track {
        gap: 12px; /* Điều chỉnh khoảng cách */
        width: max-content;
        padding-right: 15px; /* bằng padding trái */
        box-sizing: border-box;
    }
    
    .vps-item {
        flex: 0 0 80%; 
        max-width: 80%; 
    }
    
    .vps-item img {
        height: 180px;
    }

    .vps-title {
        padding: 8px 10px; /* Giảm padding */
        font-size: 14px; /* Giảm font chữ tiêu đề sản phẩm */
    }
    
    /* Ẩn các nút điều hướng khỏi header (vì chúng ta đã dùng cuộn ngang) */
    .vps-nav {
        display: none;
    }
}

/* ƯU ĐÃI GIỜ CHÓT */
.lastminute-section {
    background: #e5f3ff;
    width: 100%;
    padding: 40px 0;
    margin-top: 70px;
}

.lastminute-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px; /* tránh sát mép khi màn nhỏ */
}

.lm-header {
    width: 100%;
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Phần trên: tiêu đề lớn */
.lm-header-top h2 {
    text-transform: uppercase;
    color: #004AAD; 
    font-weight: 620;
    font-size: 35px;
    position: relative;
    margin-bottom: 14px;
}

.lm-header-top h2::after {
    content: "";
    display: block;
    width: 70px;
    height: 4px;
    background: #004AAD;
    margin-top: 8px;
    border-radius: 2px;
}

/* Phần dưới: chia 2 phần trái – phải */
.lm-header-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Bên trái: mô tả */
.lm-header-left p {
    font-weight: 500;
    font-size: 19px;
}

/* Bên phải: nút điều hướng */
.lm-header-right {
    display: flex;
    gap: 10px;
}

.lm-arrow {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    cursor: pointer;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.2s;
}

.lm-arrow:hover {
    background: #f0f0f0;
}

.lm-wrapper {
    display: flex;
    align-items: center;
    position: relative;
}

.lm-slider {
    display: flex;
    overflow: hidden;
    gap: 20px;
    scroll-behavior: smooth;
}

/* ==== LAYOUT CHUNG ==== */
.lm-item {
    width: 350px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.lm-img {
    position: relative;
}

.lm-img img {
    width: 100%;
    height: 170px;
    object-fit: cover;
}

/* TRÊN: icon trái tim */
.lm-img-top {
    position: absolute;
    top: 10px;
    left: 10px;
}

.lm-heart img {
    width: 22px;
    height: 22px;
    cursor: pointer;
}

/* DƯỚI: thanh chứa "Giờ chót" + timer */
.lm-img-bottom {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lm-bottom-left {
    font-size: 14px;
    font-weight: 600;
    color: #0077c8;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    padding: 6px 10px;
}

.lm-bottom-right {
    font-size: 14px;
    font-weight: 700;
    color: #ff3c2f;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    padding: 6px 10px;
}

/* ==== CONTENT ==== */
.lm-content {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Icon trước các mục trong lm-content */
.lm-content .lm-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    margin-right: 6px;
    flex-shrink: 0;
}

/* Giúp icon + text thẳng hàng */
.lm-header,
.lm-code,
.lm-depart,
.lm-date,
.lm-info div {
    display: flex;
    align-items: center;
}

/* 1) HEADER – title tối đa 2 dòng + ... */

.lm-header {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: #111;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 2) CODE */

.lm-code {
    font-size: 16px;
    color: black;
    font-weight: bold;
}

/* 3) DEPART */

.lm-depart {
    font-size: 16px;
}

.lm-depart span {
    color: #0075d4;
    font-weight: 600;
}

/* 4) DATE */

.lm-date {
    font-size: 16px;
}

.lm-date strong {
    font-weight: 600;
}

/* 5) INFO chia 2 bên */

.lm-info {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    margin-top: 3px;
}

.lm-days {
    font-weight: 600;
}

.lm-seats {
    color: #d62828;
    font-weight: 600;
}

/* 6) PRICE chia trái – phải */

.lm-price {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.lm-price-left {
    display: flex;
    flex-direction: column;
}

.lm-price-left .old {
    text-decoration: line-through;
    color: #888;
    font-size: 16px;
}

.lm-price-left .new {
    color: #c60000;
    font-size: 22px;
    font-weight: bold;
    line-height: 1.1;
}

.lm-book {
    background: #fff;
    color: #ef3b2d;
    border: 1px solid #ef3b2d;
    padding: 15px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    white-space: nowrap;
    font-size: 16px;
}

.lm-book:hover {
    background: #ef3b2d;
    color: #fff;
}

.lm-viewall {
    margin-top: 25px;
    text-align: center;
}

.lm-viewall button {
    padding: 15px 30px;
    border: 1px solid #0a4d86;
    background: #e5f3ff;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 18px;
    color: #0a4d86;
}

.lm-viewall button:hover {
    background: #0a4d86;
    color: #fff;
}

/* Media Query cho màn hình nhỏ (tối đa 768px) */
@media (max-width: 768px) {

    .lastminute-section {
        padding: 25px 0;
        margin-top: 40px;
    }

    .lastminute-container {
        padding: 0 15px;
    }

    /* HEADER */
    .lm-header-top h2 {
        font-size: 24px;
        margin-bottom: 8px;
    }

    .lm-header-top h2::after {
        width: 50px;
        height: 3px;
        margin-top: 4px;
    }

    .lm-header-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .lm-header-left p {
        font-size: 14px;
    }

    .lm-header-right {
        display: none;
    }

    /* SLIDER & ITEMS */
    .lm-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        padding-bottom: 10px;
    }

    .lm-wrapper::-webkit-scrollbar {
        display: none;
    }

    .lm-wrapper {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .lm-slider {
        display: flex;
        gap: 15px;
        flex-wrap: nowrap; /* quan trọng: không xuống dòng */
        overflow: visible; /* Bỏ overflow hidden */
        width: max-content; /* rộng đủ cho các item */
    }

    .lm-item {
        width: 250px; /* phù hợp màn nhỏ */
        flex-shrink: 0; /* không bị co lại */
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .lm-img img {
        height: 150px;
    }

    .lm-content {
        padding: 12px;
        gap: 6px;
    }

    .lm-header {
        font-size: 15px;
        -webkit-line-clamp: 3;
    }

    .lm-code,
    .lm-depart,
    .lm-date {
        font-size: 13px;
    }

    .lm-content .lm-icon {
        width: 18px;
        height: 18px;
        margin-right: 4px;
    }

    .lm-heart img {
        width: 18px;
        height: 18px;
    }

    .lm-price {
        margin-top: 8px;
        align-items: center;
    }

    .lm-price-left .old {
        font-size: 13px;
    }

    .lm-price-left .new {
        font-size: 18px;
    }

    .lm-book {
        padding: 10px 15px;
        font-size: 14px;
    }

    .lm-viewall {
        margin-top: 20px;
    }

    .lm-viewall button {
        padding: 10px 20px;
        font-size: 15px;
    }
}

/* ================= ĐIỂM ĐẾN YÊU THÍCH ================= */
.section-title {
    text-align: center;
    font-size: 30px;
    margin-top: 40px;
    position: relative;
    display: inline-block;
    color: #0051a1;
}

.title-wrapper {
    text-align: center;
}

.section-title::after {
    content: "";
    width: 120px;
    height: 4px;
    background: #0051a1;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -10px;
    border-radius: 10px;
}

.desc {
    text-align: center;
    font-size: 18px;
    color: #292929;
    width: 70%;
    margin: 10px auto 40px auto;
    line-height: 1.6;
}

/* Tabs */
.tabs {
    display: flex;
    justify-content: center;
    column-gap: 30px;
    margin-bottom: 40px;
}
.tab {
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    color: #292929;
    padding-bottom: 10px;
    border-bottom: 3px solid transparent;
}
.tab.active {
    color: #0051a1;
    border-color: #0051a1;
}

/* Grid */
.grid {
    width: 85%;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
}

/* Card */
.card {
    position: relative;
    height: 360px;
    overflow: hidden;
    border-radius: 12px;
    cursor: pointer;
}
.card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.4s;
}
.card::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: 0.4s;
}
.card .title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
}
.card .title::after {
    content: "";
    width: 60px;
    height: 3px;
    background: #fff;
    display: block;
    margin: 6px auto 0 auto;
    opacity: 0;
    transition: 0.4s;
}
.explore-btn {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, 20px);
    padding: 10px 24px;
    background: #0051a1;
    color: #fff;
    font-size: 16px;
    border-radius: 6px;
    border: 2px solid #fff;
    opacity: 0;
    transition: 0.4s;
    cursor: pointer;
}
.card:hover img {
    transform: scale(1.07);
    filter: brightness(65%);
}
.card:hover .explore-btn {
    opacity: 1;
    transform: translate(-50%, 0);
}
.card:hover .title::after {
    opacity: 1;
}
.explore-btn:hover {
    background: #003a7a;
    border: none;
}

/* Media Query cho màn hình nhỏ (tối đa 768px) */
@media (max-width: 768px) {
    
    .favorite-dest {
        padding: 0 0 40px 0; /* Giảm padding */
    }

    /* 1. TIÊU ĐỀ */
    .section-title {
        font-size: 24px; /* Giảm kích thước tiêu đề */
        margin-top: 30px;
    }

    .section-title::after {
        width: 80px; /* Giảm chiều dài gạch dưới */
        height: 3px;
    }

    .desc {
        width: 90%; /* Cho phép mô tả rộng hơn */
        font-size: 14px; /* Giảm font chữ */
        margin: 8px auto 25px auto;
    }

    /* 2. TAB MENU (Chuyển sang cuộn ngang) */
    .tabs {
        justify-content: flex-start; /* Căn trái */
        overflow-x: auto; /* Kích hoạt cuộn ngang */
        -webkit-overflow-scrolling: touch; 
        column-gap: 20px; /* Giảm khoảng cách giữa các tab */
        margin-bottom: 25px;
        padding: 0 15px; /* Thêm padding ngang để tabs không dính mép */
    }
    
    .tab {
        font-size: 14px; /* Giảm font chữ tab */
        padding-bottom: 8px;
        flex-shrink: 0; /* Quan trọng: Ngăn tabs bị co lại */
    }

    /* Ẩn thanh cuộn ngang (tùy chọn) */
    .tabs::-webkit-scrollbar {
        display: none;
    }
    .tabs {
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
    }

    /* 3. GRID HIỂN THỊ ĐỊA ĐIỂM */
    .grid {
        width: 90%; /* Chiếm toàn bộ chiều rộng (trừ padding) */
        padding: 0 15px;
        
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
        gap: 15px; /* Giảm khoảng cách giữa các card */
    }

    /* 4. CARD ĐỊA ĐIỂM */
    .card {
        height: 250px; /* Giảm chiều cao của card */
        border-radius: 8px;
    }
    
    .card .title {
        font-size: 18px; /* Giảm kích thước tiêu đề */
    }

    .explore-btn {
        padding: 8px 18px; /* Giảm kích thước nút Khám phá */
        font-size: 14px;
        /* Giữ nguyên hiệu ứng hover/transform để đảm bảo tính năng hoạt động */
    }
    
}


/* ================= COMBO GIÁ TỐT ================= */

.combo-section {
    background: #d9efff;
    padding: 55px 0 70px 0;
    text-align: center;
}

.combo-tabs {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
}

.combo-tab {
    padding: 12px 35px;
    border-radius: 50px;
    border: 2px solid #b2d8ff;
    background: white;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    transition: 0.25s;
}
.combo-tab.active,
.combo-tab:hover {
    background: #e6f3ff;
    border-color:#003a7a;
}

.combo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* FIXED 4 COLUMNS */
    gap: 10px;
    width: 90%;
    margin: auto;
}

.combo-card {
    background: white;
    border-radius: 18px;
    padding: 28px;
    text-align: left;
    box-shadow: 0 0 10px rgba(0,0,0,0.06);
    transition: 0.3s;
}
.combo-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

.combo-card h3 {
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 15px 0;
    color: #004b8f;
}

/* ROW ALIGN */
.card-row {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-size: 15px;
    color: #000;
}
.icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

.price-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 18px;
}

.price-label {
    font-size: 14px;
    color: #555;
}

.price {
    font-size: 22px;
    font-weight: bold;
    color: #ff0000;
}

/* BUTTON */
.combo-viewall-wrapper {
    text-align: center;
    margin-top: 40px;
}
.combo-viewall-btn {
    background: transparent;
    color:#003a7a;
    border: 2px solid #003a7a;
    border-radius: 6px;
    padding: 10px 25px;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    transition: .25s;
}
.combo-viewall-btn:hover {
    background: #003a7a;
    color: #fff;
}

/* Media Query cho màn hình nhỏ (tối đa 768px) */
@media (max-width: 768px) {
    
    .combo-section {
        padding: 40px 0; /* Giảm padding tổng thể */
    }

    /* 1. TIÊU ĐỀ & MÔ TẢ */
    /* Nếu bạn đang sử dụng các class này từ phần trước, có thể bỏ qua phần này 
       nếu đã định nghĩa ở nơi khác, nhưng tôi sẽ thêm vào để đảm bảo tính độc lập. */
    .section-title {
        font-size: 24px; 
        margin-top: 20px;
    }
    
    .desc {
        width: 90%; /* Cho phép mô tả rộng hơn */
        font-size: 14px; 
        margin: 8px auto 25px auto;
    }

    /* 2. TAB MENU (Chuyển sang cuộn ngang) */
    .combo-tabs {
        justify-content: flex-start; /* Căn trái */
        overflow-x: auto; /* Kích hoạt cuộn ngang */
        -webkit-overflow-scrolling: touch; /* Hỗ trợ cuộn mượt trên iOS */
        gap: 10px; /* Giảm khoảng cách giữa các tab */
        margin-bottom: 25px;
        padding: 0 15px; /* Thêm padding ngang để tabs không dính mép */
    }
    
    .combo-tab {
        padding: 10px 20px; /* Giảm padding tab */
        font-size: 15px; /* Giảm font chữ tab */
        flex-shrink: 0; /* Quan trọng: Ngăn tabs bị co lại */
        border-radius: 20px; /* Làm bo tròn ít hơn (tùy chọn) */
    }

    /* Ẩn thanh cuộn ngang (tùy chọn) */
    .combo-tabs::-webkit-scrollbar {
        display: none;
    }
    .combo-tabs {
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
    }


    /* 3. LƯỚI COMBO (1 CỘT) */
    .combo-grid {
        grid-template-columns: 1fr; 
        gap: 15px; 
        width: 90%; 
        padding: 0 15px; /* Giữ padding ngang cho lưới */
    }

    /* 4. CARD COMBO */
    .combo-card {
        padding: 20px; 
        border-radius: 12px;
        /* 🔥 BỔ SUNG QUAN TRỌNG: Đảm bảo nội dung không tràn ra khỏi card */
        overflow: hidden; 
    }

    .combo-card h3 {
        font-size: 16px; 
        margin-bottom: 10px;
        /* Áp dụng ngắt từ cho các tiêu đề (ngay cả khi bạn nghĩ không phải nguyên nhân chính)
           Đây là biện pháp an toàn cho các chuỗi ký tự dài không có khoảng trắng. */
        word-wrap: break-word; 
        overflow-wrap: break-word; 
    }

    .card-row {
        /* Đảm bảo nội dung trong các dòng Mã tour, Khách sạn... không tràn */
        display: flex; /* Giữ nguyên flexbox nếu bạn có */
        align-items: flex-start; /* Căn trên, quan trọng nếu nội dung xuống dòng */
        font-size: 14px; 
        margin-bottom: 8px;
    }
    
    /* 🔥 BỔ SUNG QUAN TRỌNG: Áp dụng ngắt từ cho nội dung bên trong .card-row */
    .card-row strong, .card-row span:not(.icon) {
        word-wrap: break-word;
        overflow-wrap: break-word;
        /* Cho phép nội dung của Mã tour hoặc tên khách sạn dài tự ngắt */
        flex-shrink: 1; /* Quan trọng: Cho phép nội dung co lại */
    }

    /* 5. NÚT XEM TẤT CẢ */
    .combo-viewall-wrapper {
        margin-top: 25px; /* Giảm margin trên nút */
    }
    .combo-viewall-btn {
        padding: 8px 20px;
        font-size: 15px;
    }
}

/* WRAPPER – căn giữa */
.newsletter-wrapper {
    width: 90%;
    display: flex;
    justify-content: center;
    padding: 40px 0;
    margin: auto;
}

/* BOX chính */
.newsletter-box {
    width: 80%;
    background: #d9efff;
    border-radius: 20px;
    padding: 40px;
    display: flex;
    align-items: center;
    gap: 40px;

    /* Quan trọng: giữ ảnh và nội dung nằm ngang */
    flex-direction: row;
    flex-wrap: nowrap;
}

/* LEFT – 40% */
.newsletter-left {
    flex: 0 0 40%;
    display: flex;
    justify-content: center;
}

.newsletter-left img {
    width: 100%;
    height: auto;
}

/* RIGHT – 60% */
.newsletter-right {
    flex: 0 0 60%;
    margin-right: 40px;
    padding-right: 40px;
}

/* TITLE */
.newsletter-title {
    font-size: 26px;
    font-weight: 700;
    color: #0056a3;
    margin-bottom: 10px;
}

/* DESC */
.newsletter-desc {
    font-size: 15px;
    color: #333;
    margin-bottom: 20px;
}

/* FORM */
.newsletter-form {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    max-width: 600px;
}

/* INPUT */
.newsletter-form input {
    flex: 1;
    min-width: 250px;
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid #aac7e6;
    font-size: 15px;
    outline: none;
}

.newsletter-form input:focus {
    border-color: #0056a3;
}

/* BUTTON */
.newsletter-form button {
    padding: 12px 25px;
    border: none;
    background:#0c79c1;
    color:white;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.25s ease;
}


@media screen and (max-width: 768px) {
    /* 1. ẨN PHẦN ẢNH (LEFT) */
    .newsletter-left {
        display: none;
    }

    /* 2. CHUYỂN NỀN THÀNH MÀU TRẮNG VÀ BỐ CỤC CỘT DỌC */
    .newsletter-box {
        flex-direction: column; /* Xếp chồng dọc (Chỉ còn Text/Form) */
        background: #FFFFFF;     /* Nền chuyển thành màu trắng */
        text-align: center;      /* Căn giữa nội dung văn bản */
        padding: 25px 20px;
        gap: 20px;
        width: 100%;
        box-shadow: none; /* Nên bỏ bóng đổ khi nền trắng */
    }

    /* Đảm bảo phần wrapper vẫn căn giữa và có khoảng trống */
    .newsletter-wrapper {
        width: 95%;
        padding: 20px 0;
    }

    /* Cột nội dung (Right) chiếm 100% */
    .newsletter-right {
        flex: 0 0 100%;
        width: 100%;
        margin-right: 0;
        padding-right: 0;
    }

    /* 3. INPUT VÀ BUTTON CÓ ĐỘ RỘNG BẰNG NHAU (Dàn ngang trong form) */
    .newsletter-form {
        flex-direction: row; 
        justify-content: space-between; /* Giữ khoảng cách giữa 2 phần tử */
        gap: 10px; /* Giảm gap để tối ưu không gian */
        width: 100%;
        max-width: none;
        margin: 0 auto; /* Căn giữa form */
    }

    /* Thiết lập cho mỗi phần tử chiếm khoảng 50% */
    .newsletter-form input,
    .newsletter-form button {
        width: calc(50% - 5px); 
        min-width: unset;
        flex: 1 1 calc(50% - 5px); /* Đảm bảo cả hai đều giãn ra 50% */
        text-align: center;
    }

    /* Điều chỉnh nhẹ font size tiêu đề */
    .newsletter-title {
        font-size: 20px;
    }

    /* Điều chỉnh cho tablet lớn (giữ nguyên layout cũ nhưng giảm kích thước) */
    @media screen and (min-width: 769px) and (max-width: 992px) {
         /* Vẫn giữ bố cục Desktop (ảnh + text) nhưng giảm kích thước, nền vẫn là màu cũ */
         .newsletter-box {
            padding: 30px;
            gap: 30px;
            width: 100%;
        }
        .newsletter-right {
            margin-right: 0;
            padding-right: 0;
        }
    }
}

/* ================= FOOTER ================= */
.site-footer {
    background-color: #f8f8f8;
    color: #333;
    font-size: 14px;
    line-height: 1.6;
    padding: 40px 20px;
}

.site-footer a {
    color: #333;
    text-decoration: none;
}

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

.footer-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 30px;
}

.footer-contact {
    flex: 1 1 250px;
    margin-bottom: 20px;
}

.footer-links {
    flex: 1 1 200px;
    margin-bottom: 20px;
}

.footer-links ul {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-certifications, .footer-payments {
    flex: 1 1 300px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.footer-certifications img,
.footer-payments img {
    margin-right: 15px;
    margin-bottom: 10px;
    max-height: 30px;
}

.footer-bottom {
    border-top: 1px solid #ddd;
    padding-top: 20px;
    text-align: center;
}

.footer-bottom p {
    margin: 5px 0;
}

@media (max-width: 768px) {
    footer {
        padding-left: 10px !important; 
        padding-right: 10px !important;
    }
    
    .footer-top {
        flex-direction: column;
        align-items: center;
        gap: 30px; 
        padding: 0; 
    }
    
    .footer-contact,
    .footer-links,
    .footer-certifications,
    .footer-payments {
        flex: 1 1 100%;
        text-align: center;
        margin-bottom: 20px;
    }
    
    .copyright-section div { 
        padding: 0 10px !important; 
    }

    /* ép 3 cột xuống hàng */
    [style*="display:flex"][style*="gap:40px"][style*="align-items:flex-start"] {
        flex-wrap: wrap !important;
    }

    /* ép phần Ứng dụng di động chiếm 100% chiều rộng */
    [style*="display:flex"][style*="gap:40px"][style*="align-items:flex-start"] > div:last-child {
        width: 100% !important;
        margin-top: 20px;
    }
}