/* =========================================================
   SOCIAL / HOME BUTTON RESPONSIVE V10.3
   Fix riêng nhóm .social-footer trong index_tpl.php.
   Không ảnh hưởng khối Nạp thẻ hay các section khác.
   ========================================================= */

/* Base cho nhóm social-footer */
.social-footer {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.social-footer > li {
    box-sizing: border-box !important;
}

.social-footer > li > a {
    width: 100%;
    display: block;
    line-height: 0;
    transform-origin: center center;
}

.social-footer > li > a > img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 320 / 100;
    object-fit: contain;
}

/* ---------------------------------------------------------
   992px - 1199px
   3 cột x 2 hàng nếu có 6 button.
   Đây là breakpoint đang lỗi rõ nhất.
   --------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .social-footer {
        width: min(100%, 900px) !important;
        margin: 0 auto !important;

        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px 18px !important;

        align-items: center !important;
        justify-content: center !important;
    }

    .social-footer > li {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        flex: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .social-footer > li > a {
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto !important;
    }

    /* Hover nhẹ hơn để không chạm item bên cạnh */
    .social-footer > li > a.xhover:hover {
        transform: translateY(-2px) scale(1.025) !important;
    }
}

/* ---------------------------------------------------------
   768px - 991px
   Vẫn giữ 3 cột nhưng co gọn hơn.
   --------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991.98px) {
    .social-footer {
        width: min(100%, 760px) !important;
        margin: 0 auto !important;

        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px 12px !important;

        align-items: center !important;
        justify-content: center !important;
    }

    .social-footer > li {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        flex: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .social-footer > li > a {
        width: 100% !important;
        max-width: 235px !important;
        margin: 0 auto !important;
    }

    .social-footer > li > a.xhover:hover {
        transform: translateY(-1px) scale(1.018) !important;
    }
}

/* ---------------------------------------------------------
   Mobile < 768px
   2 cột đều nhau, bỏ col-6/ps-md-4 gây offset.
   --------------------------------------------------------- */
@media (max-width: 767.98px) {
    .social-footer {
        width: 100% !important;
        margin: 0 auto !important;

        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;

        align-items: center !important;
        justify-content: center !important;
    }

    .social-footer > li {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        flex: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .social-footer > li > a {
        width: 100% !important;
        margin: 0 auto !important;
    }

    /* Touch/mobile không scale tránh rung/lệch layout */
    .social-footer > li > a.xhover:hover {
        transform: none !important;
    }
}

/* Màn hình rất nhỏ */
@media (max-width: 420px) {
    .social-footer {
        gap: 5px !important;
    }
}