@media screen and (max-width: 1200px) {
    .pagewrap {
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
    }
    .menu > li.is_step_2 > ul {
        width: 100%;
        left: 0;
        transform: translateX(0) !important;
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
    }
    .input_search {
        width: 320px;
    }
}

/* ----- Tối ưu cho màn hình Tablet (Dọc) - Bắt đầu thay đổi layout chính ----- */
@media screen and (max-width: 992px) {
    /* --- Header --- */
    .header_top ul.left_id_top, .header_top ul.right_id_top {
        float: none;
        text-align: center;
        display: block;
    }
    .header_top ul li {
        float: none;
        display: inline-block;
    }
    .logo_top {
        float: none;
        text-align: center;
        padding-left: 0;
        margin-bottom: 15px;
    }
    .right_header {
        position: static;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .hotline_header {
        order: 2;
        margin-top: 15px;
    }
    .timkiem_top {
        order: 1;
        margin-right: 0;
        width: 80%;
        display: none;
    }
    .input_search {
        width: calc(100% - 50px);
    }
    .giohang_top {
        order: 3;
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        margin-top: 15px;
    }
    .why_home li {
        display: none; /* Ẩn hình ảnh người trên tablet để gọn gàng hơn */
    }
    .why_home ul {
        width: 100%;
    }

    /* --- Menu --- */
    /* Ghi chú: Menu desktop hiện tại quá phức tạp cho di động. 
       Giải pháp tốt nhất là ẩn nó đi và thay bằng một menu dạng "hamburger" (cần HTML và JavaScript).
       Trong phạm vi chỉ dùng CSS, tôi sẽ ẩn menu desktop để tránh vỡ giao diện. */
    .menu {
        display: none;
    }
    .box_menu {
        padding: 10px 0;
        text-align: center;
                height: 46px;
    }

    /* --- Cấu trúc cột --- */
    .ttvb_home_l, .ttvb_home_c, .ttvb_home_r {
        width: 100%;
        margin: 0 0 30px 0;
        float: none;
    }
    .tour_id ul {
        /*width: calc(50% - 20px);*/
    }
    .footer_company, .map_footer, .dangkynhantin_footer {
        width: 100%;
        margin: 0 0 30px 0;
        float: none;
    }
    .left_tour_view, .right_tour_view, .left_contact, .right_contact {
        width: 100%;
        float: none;
        padding: 15px;
        box-sizing: border-box;
    }
    .right_tour_view {
        padding-top: 30px;
    }
    .right_contact {
        margin-top: 30px;
    }
    .left_book, .right_book {
        width: 100%;
        float: none;
        border-left: none;
        padding-left: 0;
        margin-left: 0;
    }
    .right_book {
        margin-top: 30px;
    }

    /* --- Trang chi tiết sản phẩm/tour --- */
    .col-md-9.cart-items, .col-md-4.cart-total {
        width: 100%;
        float: none;
    }
    .col-md-4.cart-total {
        margin-top: 30px;
    }
}

/* ----- Tối ưu cho màn hình Điện thoại di động ----- */
@media screen and (max-width: 767px) {
    body {
        font-size: 16px;
        line-height: 26px;
    }

    /* --- Spacing & Font size --- */
    .box_home_2, .dichvu_home, .why_home_box, .support_home_box {
        padding: 50px 15px;
    }
    .box_home_2 ul h3, .title_home_bg ul h3 {
        font-size: 28px;
        line-height: 38px;
    }
    .box_home_2 ul p {
        font-size: 20px;
    }
    .title_bs {
        font-size: 24px;
        margin-bottom: 20px;
    }
    .xemall {
        position: relative;
        display: block;
        text-align: center;
        margin-top: 20px;
        top: 0;
        right: 0;
    }

    /* --- Header --- */
    .header_top { display: none; } /* Ẩn bớt thông tin không cần thiết trên mobile */
    .timkiem_top { width: 100%; }
    .hotline_header {display: none;}
    .giohang_top {margin-right: 20px;}
    .hotline_header ul li {
        font-size: 30px;
        line-height: 35px;
    }
    .hotline_header ul h3 {
        font-size: 20px;
        line-height: 22px;
    }
    .hotline_header ul h3 span {
        font-size: 13px;
        line-height: 18px;
    }

    /* --- Banner --- */
    .bannerMain, .banner, .bannerInside {
        height: 50vh;
    }
    .box_title_banner {
        top: 20%;
        width: calc(100% - 30px);
        padding: 15px;
    }
    .box_title_banner ul h3 a {
        font-size: 20px;
        line-height: 28px;
    }
    .box_title_banner ul p {
        font-size: 16px;
        line-height: 24px;
    }
    
    /* --- Bố cục 1 cột --- */
    .tour_id ul, .tour_id_home {
        /*width: calc(100% - 20px);
        margin: 0 10px 20px 10px;*/
    }
    .tintuc_home_id ul, .thuvienanh_id ul {
        width: 100%;
        margin: 0 0 20px 0;
    }
    .dichvu_home_id {
        width: 100%;
        display: block;
        padding: 15px;
        box-sizing: border-box;
    }
    .dichvu_home_id li {
        width: 100%;
        text-align: center;
        margin-bottom: 15px;
    }
    .dichvu_home_id ul {
        width: 100%;
        padding-left: 0;
        text-align: center;
    }
    .dichvu_home_id ul h4 a {
        float: none;
        display: inline-block;
    }
    .col-md-7 {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .banner_bosuutap {
        width: 100%;
        margin: 5px 0;
    }
    .support_home_id ul {
        width: 100%;
        margin: 0 0 20px 0;
    }

    /* --- Trang liên hệ --- */
    .left_contact li img {
        height: auto;
    }

    /* --- Thanh công cụ bên phải --- */
    .rightNav {
        display: none;
    }

    /* --- Breadcrumb & Tiêu đề trang --- */
    .link_page {
        padding: 10px;
    }
    .link_page h3 {
        float: none;
        margin: 0 0 10px 0;
        font-size: 22px;
    }
    .link_page ul {
        float: none;
        margin: 0;
    }

    /* --- Bảng biểu (quan trọng cho trang giỏ hàng, bảng giá) --- */
    #table_responsive table, #table_responsive thead, #table_responsive tbody, #table_responsive th, #table_responsive td, #table_responsive tr {
        display: block;
    }
    #table_responsive thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    #table_responsive tr {
        border: 1px solid #ccc;
        margin-bottom: 10px;
    }
    #table_responsive td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50% !important;
        text-align: right !important;
    }
    #table_responsive td:before {
        position: absolute;
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
    }
    /* Gán nội dung cho pseudo-element :before từ a-data của a */
    #table_responsive td:nth-of-type(1):before { content: "STT"; }
    #table_responsive td:nth-of-type(2):before { content: "Sản phẩm"; }
    #table_responsive td:nth-of-type(3):before { content: "Đơn giá"; }
    #table_responsive td:nth-of-type(4):before { content: "Số lượng"; }
    #table_responsive td:nth-of-type(5):before { content: "Thành tiền"; }
    #table_responsive td:nth-of-type(6):before { content: "Xóa"; }

    /* --- Giỏ hàng & Checkout --- */
    .cart-item {
        width: 25%;
    }
    #checkout .left_contact, #checkout .right_contact {
        width: 100%;
        float: none;
    }
    #checkout .right_contact {
        margin-top: 30px;
    }
    
    /* --- Popup --- */
    .taoweb_class, #popup_product, #popup_cookie {
        width: 95% !important;
        max-width: 95% !important;
    }
    .step_10 .chitiet_sp>li, .step_10 .chitiet_sp>ul {
        width: 100%;
    }

    /* --- Phân trang --- */
    .nums a {
        margin: 0 2px;
    }
}

/* ----- Tối ưu cho màn hình Điện thoại nhỏ ----- */
@media screen and (max-width: 480px) {
    .tour_id ul {
       /* width: 100%; 
        margin: 0 0 20px 0;*/
    }
    .formBox li input, .formBox li textarea {
        padding-left: 15px; /* Giảm padding để có thêm không gian */
    }
    .formBox li:after {
        display: none; /* Ẩn icon trong form để tiết kiệm không gian */
    }
    .listtabs li a {
        padding: 0 10px;
        font-size: 15px;
    }
    .footer_company h2 {
        font-size: 20px;
    }
}


* {
    box-sizing: border-box;
}
img {
    max-width: 100%;
    height: auto;
}

/* ----------------------
   MENU MOBILE
------------------------- */
.menu-toggle {
    display: none;
    cursor: pointer;
    width: 35px;
    height: 25px;
    flex-direction: column;
    justify-content: space-between;
}
.menu-toggle span {
    display: block;
    height: 4px;
    background: #333;
    border-radius: 2px;
    transition: 0.3s;
}
.menu-toggle.open span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}
.menu-toggle.open span:nth-child(2) {
    opacity: 0;
}
.menu-toggle.open span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* ----------------------
   TABLET (<= 991px)
------------------------- */
@media (max-width: 991px) {
    .pagewrap {
        width: 95%;
        padding: 0 10px;
    }

    /* Header & Logo */
    .logo_top {
        text-align: center;
    }
    .logo_top img {
        max-width: 250px;
        height: auto;
    }

    /* Menu */
    .menu-toggle {
        display: flex;
        position: absolute;
        top: 25px;
        right: 20px;
        z-index: 1001;
    }
    .menu {
        position: relative;
    }
    .menu > ul {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 70px;
        right: 0;
        background: #fff;
        width: 240px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        z-index: 1000;
    }
    .menu > ul.active {
        display: flex;
    }
    .menu > ul li {
        border-bottom: 1px solid #eee;
    }
    .menu > ul li a {
        padding: 12px 15px;
        display: block;
        color: #333;
    }

    /* Search */
    .timkiem_top {
        margin-top: 10px;
        width: 100%;
    }
    .timkiem_top .input_search {
        width: 100%;
        font-size: 14px;
    }

    /* Banner */
    .banner_top img {
        height: auto;
        max-height: 300px;
        object-fit: cover;
    }

    /* Content & Sidebar */
    .content, .sidebar {
        width: 100% !important;
        float: none;
    }

    /* Footer */
    .footer {
        text-align: center;
    }
    .footer .col {
        width: 100% !important;
        margin-bottom: 20px;
    }
}

/* ----------------------
   MOBILE (<= 576px)
------------------------- */
@media (max-width: 576px) {
    .logo_top img {
        max-width: 180px;
    }

    .timkiem_top {
        display: none; /* Ẩn form tìm kiếm nếu quá nhỏ */
    }

    .menu ul {
        width: 100%; /* full màn hình */
        left: 0;
        right: 0;
    }

    .banner_top img {
        max-height: 200px;
    }

    .footer {
        font-size: 14px;
    }
}



.mobile-menu-toggle {
    display: none;
    cursor: pointer;
    width: 35px;
    height: 25px;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1100;
}
.mobile-menu-toggle span {
    display: block;
    height: 4px;
    width: 30px;
    background: #fff;
    border-radius: 2px;
    transition: 0.3s;
}
.mobile-menu-toggle.open span:nth-child(1) {
    transform: rotate(45deg) translate(9px, 9px);
}
.mobile-menu-toggle.open span:nth-child(2) {
    opacity: 0;
}
.mobile-menu-toggle.open span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile Menu */
.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    right: -100%;
    width: 240px;
    height: 100%;
    background: #fff;
    box-shadow: -2px 0 6px rgba(0,0,0,0.2);
    z-index: 1099;
    padding-top: 60px;
    transition: right 0.3s ease;
}
.mobile-menu.active {
    right: 0;
    display: block;
}
.mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mobile-menu ul li {
    border-bottom: 1px solid #eee;
}
.mobile-menu ul li a {
    display: block;
    padding: 14px 20px;
    color: #333;
    text-decoration: none;
}
.mobile-menu ul li a:hover {
    background: #f5f5f5;
}

/* Chỉ hiển thị trên mobile */
@media (max-width: 991px) {
    .mobile-menu-toggle {
        display: flex;
    }
    .menu { 
        display: none; /* Ẩn menu desktop */
    }
}