/* =====================================================================
   SAIGON LIMO - RESPONSIVE MOBILE  (v3 - viết theo đúng cấu trúc saigonlimo.com)
   File: /css/responsive.css
   - Chỉ tác dụng khi màn hình < 992px. Giao diện máy tính GIỮ NGUYÊN.
   ===================================================================== */

/* Trên máy tính: ẩn nút MENU và nút +/- (chỉ dùng cho điện thoại) */
.rsp-menu-btn,
.rsp-sub-btn {
    display: none;
}

@media (max-width: 991.98px) {

    /* ---------- 1. KHUNG TRANG ---------- */
    html, body {
        overflow-x: hidden;
    }

    body {
        display: block !important; /* bỏ kiểu dàn trang -webkit-box cũ */
        min-width: 0 !important;
        font-size: 16px !important;
        padding-top: 50px !important; /* chừa chỗ cho thanh MENU cố định */
        padding-bottom: 90px !important; /* chừa chỗ cho nút Zalo / Gọi nổi */
        -webkit-text-size-adjust: 100%;
    }

    #aspnetForm {
        display: block;
        width: 100%;
    }

    #contain, .wrap {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .section {
        padding: 14px 14px !important;
    }

    .footer {
        padding: 18px 14px !important;
    }

    .section-title {
        font-size: 19px !important;
    }

    h1 {
        font-size: 22px !important;
    }

    img {
        max-width: 100% !important;
    }

    /* Các ô chữ SEO có chiều rộng cố định 800px / 822px */
    p[style*="800px"],
    p[style*="822px"] {
        width: auto !important;
        max-width: 100% !important;
    }

    /* ---------- 2. ĐẦU TRANG: gọn 2 hàng ---------- */
    /* Ẩn dòng chữ SEO trên cùng (máy tính vốn bị menu che) */
    #contain > div.section:first-of-type {
        display: none !important;
    }

    table[id*="headerinfo"],
    table[id*="headerinfo"] > tbody {
        display: block !important;
        width: 100% !important;
    }

        table[id*="headerinfo"] > tbody > tr > td {
            display: block !important;
            width: auto !important;
            padding: 0 !important;
        }
        /* Hàng 1: logo bên trái - hotline bên phải */
        table[id*="headerinfo"] > tbody > tr:nth-child(1) {
            display: flex !important;
            align-items: center;
            justify-content: space-between;
            padding: 8px 12px 6px;
        }

        table[id*="headerinfo"] img[src*="logo_web"] {
            width: 125px !important;
            display: block;
        }

        table[id*="headerinfo"] > tbody > tr:nth-child(1) > td:nth-child(1) br,
        table[id*="headerinfo"] > tbody > tr:nth-child(1) > td:nth-child(1) div {
            display: none !important;
        }

        table[id*="headerinfo"] > tbody > tr:nth-child(1) > td:nth-child(2) {
            text-align: right !important;
        }

            table[id*="headerinfo"] > tbody > tr:nth-child(1) > td:nth-child(2) > div {
                font-size: 0 !important; /* ẩn chữ "Hotline" */
                line-height: 1.5 !important;
            }

        table[id*="headerinfo"] a[href^="tel:"] {
            font-size: 18px !important;
            font-weight: bold;
        }

        table[id*="headerinfo"] .pps-btn-img img {
            height: 18px !important;
            margin-left: 4px;
            vertical-align: -3px;
        }
        /* Ẩn khối chữ to "Saigon Limo / Công Ty CP..." và các hàng đệm */
        table[id*="headerinfo"] > tbody > tr:nth-child(1) > td:nth-child(3),
        table[id*="headerinfo"] > tbody > tr:nth-child(2),
        table[id*="headerinfo"] > tbody > tr:nth-child(4) {
            display: none !important;
        }
        /* Hàng 2: cờ ngôn ngữ + số tổng đài, chữ nhỏ */
        table[id*="headerinfo"] > tbody > tr:nth-child(3) {
            display: flex !important;
            align-items: center;
            justify-content: space-between;
            padding: 6px 12px;
            border-top: 1px solid #6a6a6a;
            font-size: 14px !important;
        }

            table[id*="headerinfo"] > tbody > tr:nth-child(3) > td:nth-child(1) a {
                font-size: 0 !important;
                margin-right: 8px;
            }

            table[id*="headerinfo"] > tbody > tr:nth-child(3) > td:nth-child(1) img {
                width: 26px !important;
                height: 17px !important;
            }

            table[id*="headerinfo"] > tbody > tr:nth-child(3) > td:nth-child(2) {
                display: none !important;
            }
    /* email */

    /* ---------- 3. SLIDER ẢNH XE ---------- */
    #slideshow {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 900 / 385;
    }

        #slideshow img {
            width: 100% !important;
            height: 100% !important;
            max-width: 100% !important;
            object-fit: cover;
        }

    /* ---------- 4. MENU: thanh cố định trên cùng + nút MENU ---------- */
    nav[id*="MainMenu"] {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999998;
        background: #1a1a1a;
    }

    .rsp-menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 50px;
        padding: 0 16px;
        border: 0;
        border-bottom: 2px solid #c9a227;
        background: #1a1a1a;
        color: #f0e6c8;
        font: bold 17px Arial, sans-serif;
        letter-spacing: 1px;
        cursor: pointer;
    }

        .rsp-menu-btn .rsp-bars {
            font-size: 26px;
            line-height: 1;
        }

    ul.menu-nav {
        display: none !important;
        position: static !important;
        width: 100% !important;
        height: auto !important;
        max-height: calc(100vh - 50px);
        overflow-y: auto;
        padding: 0 !important;
        text-align: left !important;
        background: #1a1a1a !important;
    }

        ul.menu-nav.rsp-open {
            display: block !important;
        }

        ul.menu-nav > li {
            font-size: 0 !important;
        }
            /* bỏ khoảng trắng &nbsp; thừa sau mỗi mục */
            ul.menu-nav > li > a {
                font-size: 17px !important;
            }

        ul.menu-nav > li,
        ul.menu-nav .sub-menu li {
            display: block !important;
            position: relative !important;
            margin: 0 !important;
            padding: 0 !important;
            border-bottom: 1px solid #333;
        }

        ul.menu-nav a {
            display: block !important;
            padding: 12px 56px 12px 16px !important;
            color: #f0e6c8 !important;
            text-decoration: none !important;
        }

        ul.menu-nav .sub-menu {
            display: none !important; /* tắt kiểu rê chuột xổ menu */
            position: static !important;
            width: 100% !important;
            padding: 0 !important;
            background: #2a2a2a !important;
        }

        ul.menu-nav li.rsp-sub-open > .sub-menu {
            display: block !important;
        }

        ul.menu-nav .sub-menu a {
            padding-left: 30px !important;
            font-size: 16px !important;
        }

    .rsp-sub-btn {
        display: block !important;
        position: absolute;
        top: 0;
        right: 0;
        width: 50px;
        height: 48px;
        border: 0;
        border-left: 1px solid #333;
        background: transparent;
        color: #c9a227;
        font: bold 24px Arial, sans-serif;
        cursor: pointer;
    }

    /* ---------- 5. ẢNH XE & DANH SÁCH XE ---------- */
    .section figure img,
    article figure img {
        width: 100% !important;
        height: auto !important;
    }

    .car-card, .car-img, .car-info,
    .strengths, .strength {
        display: block !important;
        width: 100% !important;
    }

    .car-info {
        padding-left: 0 !important;
        padding-top: 10px;
    }

    .car-img img {
        width: 100% !important;
    }

    .strength {
        margin-bottom: 10px;
    }

    /* ---------- 6. BẢNG ---------- */
    /* Bảng giá / bảng dữ liệu: vuốt ngang để xem */
    #contain table:not([id*="headerinfo"]) {
        display: block !important;
        width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Khối Clip / Sự kiện / Người nổi tiếng: xếp dọc từng ô */
    #contain .bordershadow table,
    #contain .bordershadow table > tbody,
    #contain .bordershadow table > tbody > tr,
    #contain .bordershadow table > tbody > tr > td {
        display: block !important;
        width: 100% !important;
        overflow: visible;
    }

        #contain .bordershadow table > tbody > tr > td {
            padding: 6px 0 !important;
        }

    #contain .bordershadow img {
        width: 100% !important;
        height: auto !important;
    }

    /* ---------- 7. VIDEO YOUTUBE / BẢN ĐỒ ---------- */
    iframe {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9;
    }

    /* ---------- 8. NÚT BẢNG GIÁ & MENU CUỐI TRANG ---------- */
    .btn-price {
        margin: 4px 2px;
        font-size: 15px !important;
    }

    .bottom-nav a {
        display: inline-block;
        padding: 6px 8px;
    }

    /* ---------- 9. NÚT NỔI ZALO / GỌI / WHATSAPP ---------- */
    .hotline-phone-ring-wrap,
    .hotline-phone-ring-wrap-2,
    .hotline-phone-ring-wrap-3,
    .hotline-phone-ring-wrap-4 {
        transform: scale(.7);
        transform-origin: bottom left;
    }

    .hotline-phone-ring-wrap-2 {
        left: 0 !important;
    }

    .hotline-phone-ring-wrap {
        left: 72px !important;
    }

    .hotline-phone-ring-wrap-3 {
        left: 144px !important;
    }

    .hotline-phone-ring-wrap-4 {
        left: 216px !important;
    }

    .top-wrap {
        right: 10px !important;
        bottom: 20px !important;
    }

    /* ---------- 10. Ô NHẬP LIỆU (chống iPhone tự phóng to) ---------- */
    input, select, textarea {
        font-size: 16px !important;
        max-width: 100%;
    }
}
/* ---------- BỔ SUNG v5: slogan đầy đủ dưới logo + giãn hotline ---------- */
@media (max-width: 991.98px) {
    table[id*="headerinfo"] > tbody > tr:nth-child(1) > td:nth-child(1) {
        text-align: center !important;
    }

    table[id*="headerinfo"] img[src*="logo_web"] {
        margin: 0 auto;
    }

    table[id*="headerinfo"] > tbody > tr:nth-child(1) > td:nth-child(1) div {
        display: block !important;
        margin-top: 3px;
        font-size: 10.5px !important;
        line-height: 1.2;
        color: #f0e6c8;
        white-space: nowrap;
    }

    table[id*="headerinfo"] > tbody > tr:nth-child(1) > td:nth-child(2) > div {
        line-height: 1.75 !important;
    }

    table[id*="headerinfo"] a[href^="tel:"] {
        font-size: 17px !important;
    }

    table[id*="headerinfo"] .pps-btn-img {
        margin-left: 12px;
    }

        table[id*="headerinfo"] .pps-btn-img img {
            margin-left: 0 !important;
        }
}
/* ---------- BỔ SUNG v6: logo & slogan canh thẳng hàng với 2 số hotline ---------- */
@media (max-width: 991.98px) {
    table[id*="headerinfo"] > tbody > tr:nth-child(1) {
        align-items: stretch !important;
    }

        table[id*="headerinfo"] > tbody > tr:nth-child(1) > td:nth-child(1) {
            display: flex !important;
            flex-direction: column;
            justify-content: space-between; /* logo trên cùng - slogan dưới cùng */
            align-items: center;
            padding: 1px 0 8px !important;
        }

            table[id*="headerinfo"] > tbody > tr:nth-child(1) > td:nth-child(1) br {
                display: none !important;
            }

            table[id*="headerinfo"] > tbody > tr:nth-child(1) > td:nth-child(1) div {
                margin-top: 0 !important;
            }

        table[id*="headerinfo"] > tbody > tr:nth-child(1) > td:nth-child(2) > div {
            line-height: 2 !important;
        }
}
/* ---------- BỔ SUNG v7: bảng giá chữ nhỏ cho vừa màn hình + sửa đầu trang tiếng Anh ---------- */
@media (max-width: 991.98px) {
    #contain table:not([id*="headerinfo"]) td,
    #contain table:not([id*="headerinfo"]) th {
        font-size: 13px !important;
        padding: 5px 4px !important;
        line-height: 1.35 !important;
    }

        #contain table:not([id*="headerinfo"]) td *,
        #contain table:not([id*="headerinfo"]) th * {
            font-size: inherit !important;
        }

    #contain .bordershadow table td {
        font-size: 16px !important;
    }
    /* khối Tin tức / Clip giữ chữ vừa đọc */
    /* Trang tiếng Anh có thêm khoảng trống 20px trên hotline */
    table[id*="headerinfo"] > tbody > tr:nth-child(1) > td:nth-child(2) > div[style*="height"] {
        display: none !important;
    }
}