/* --- CSS CHO MÀN HÌNH TABLET & MOBILE (Dưới 820px) --- */
@media (max-width: 840px) {
    /* 1. Thiết lập lưới 2 cột */
    .footer_inner-container {
        display: grid !important;
        grid-template-columns: 35% 65% !important; /* Chia 2 cột đều nhau */
        gap: 30px 20px; /* Khoảng cách: Dọc 30px, Ngang 20px */
        width: 100%;
        padding: 0 15px; /* Cách lề 2 bên một chút cho đẹp */
    }
    /* 2. QUAN TRỌNG NHẤT: Xóa bỏ 2 "kẻ phá đám" do class .container sinh ra */
    /* Nếu không có đoạn này, Grid sẽ tính 2 cái này là ô trống và đẩy nội dung lệch đi */
    .footer_inner-container::before,
    .footer_inner-container::after {
        display: none !important;
        content: none !important;
    }
    /* 3. Dùng "display: contents" để phá bỏ thẻ bao .footerTopContainer */
    /* Giúp 2 menu con (Tin tức & Báo giá) nhảy ra ngoài lưới để sắp xếp cùng Logo và Liên hệ */
    .footerTopContainer {
        display: contents !important;
    }
    .footerTopContainer::before,
    .footerTopContainer::after {
        display: none !important;
        content: none !important;
    }
    /* 4. Reset độ rộng cho các phần tử con để lấp đầy ô lưới */
    .footerLogoContainer, 
    .box-footer-left, 
    .box-footer-right, 
    .footer-end {
        width: 100% !important;
        max-width: 100%;
        margin: 0 !important;
        padding-right: 15px;
    }
    /* Canh chỉnh Logo nằm bên trái */
    .footerLogoContainer {
        text-align: left;
    }
}
@media(max-width: 600px){
    .footer_inner-container {
        display: flex;
        grid-template-columns: unset !important;
        gap: unset;
    }
    .footerLogoContainer {
         text-align: center; 
    }
}
@media (max-width: 580px) {
    .box-footer-left,
    .box-footer-right {
        padding-right: unset;
    }
}
@media (max-width: 540px){
    .img-content img{
        width: 480px !important;
    }
}
@media (max-width: 520px){
    .img-content img{
        width: 350px !important;
    }
}
/* --- MOBILE NHỎ (Dưới 480px) --- */
/* Tách riêng ra để không bị lỗi cú pháp */
@media (max-width: 480px) {
    .footer_inner-container {
        grid-template-columns: 1fr !important; /* Về 1 cột dọc */
    }
}