/* --- CẤU HÌNH CHO MOBILE (Dưới 768px) --- */
@media (max-width: 767px) {
    .table-responsive {
        border: none !important;
        overflow-x: auto !important; /* Cho phép cuộn ngang */
        -webkit-overflow-scrolling: touch;
    }

    .table-responsive table {
        /* Ép bảng rộng ra để có chỗ cho cột 1 rộng 120% màn hình */
        min-width: 700px !important; 
        table-layout: auto !important; 
    }

    .table-responsive td:first-child {
        /* 120% chiều rộng màn hình iPhone Mini (khoảng 320px * 1.2) */
        /* Chúng ta dùng đơn vị vw (view-width) để chính xác theo mọi loại điện thoại */
        min-width: 120vw !important; 
        white-space: normal !important;
        word-break: break-word;
        background-color: #ffffff; /* Để tránh lộ chữ khi dùng sticky (nếu có) */
    }

    .table-responsive td:not(:first-child) {
        min-width: 100px !important; /* Đảm bảo các cột giá/bảo hành có không gian riêng */
        text-align: center;
    }
}

/* --- CẤU HÌNH CHO LAPTOP (768px trở lên) --- */
@media (min-width: 768px) {
    .table-responsive {
        overflow-x: visible !important; /* Không hiện thanh cuộn trên PC */
    }
    
    .table-responsive table {
        width: 100% !important;
        table-layout: auto !important; /* Để trình duyệt tự tính độ rộng dựa trên chữ */
    }

    .table-responsive td:first-child {
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }
}