/* Thiết lập cho màn hình từ 768px trở xuống (bao gồm iPhone XR) */
@media screen and (max-width: 768px) {
    /* 1. Reset toàn bộ để triệt tiêu mọi nguyên nhân gây tràn */
    *, *:before, *:after {
        box-sizing: border-box ;
    }

    html, body {
        overflow-x: hidden ;
        width: 100% ;
        margin: 0 ;
        padding: 0 ;
    }

    /* 2. Ép Container chính không được rộng hơn màn hình */
    .history-page-container {
        width: 100% ;
        max-width: 100vw ;
        margin: 0 ;
        padding: 10px 5px ; /* Giảm padding tối đa */
        overflow: hidden ;
    }

    /* 3. Card phải co giãn theo lề */
    .card {
        width: 100% ;
        margin: 0 0 15px 0 ;
        padding: 10px ;
        box-shadow: none ; /* Giảm tải cho GPU mobile */
    }

    /* 4. ĐỊNH DẠNG BẢNG "KHÔNG THỂ TRÀN" */
    .players-table {
        display: table ;
        width: 100% ;
        table-layout: fixed ; /* Bắt buộc để tuân thủ % chiều rộng */
        border-collapse: collapse ;
    }

    /* Cột 1: STT (#) */
    .players-table th:nth-child(1), 
    .players-table td:nth-child(1) { 
        text-align: center;
        padding: 8px 2px ;
    }

    /* Cột 2: Player - GIẢM WIDTH */
    .players-table th:nth-child(2), 
    .players-table td:nth-child(2) { 
        padding: 8px 4px ;
        overflow: hidden;
        text-overflow: ellipsis; 
        white-space: nowrap; /* Giữ tên trên 1 dòng, quá dài sẽ hiện ... */
    }

    /* Cột 3: Period - TĂNG WIDTH ĐỂ KHÔNG BỊ MẤT */
    .players-table th:nth-child(3), 
    .players-table td:nth-child(3) { 
        padding: 8px 4px ;
        text-align: left ;
        overflow: visible ; /* Đảm bảo nội dung không bị ẩn */
    }

    /* Tối ưu badge hiển thị thời gian */
    .time-badge {
        font-size: 0.7rem ;
        padding: 2px 4px ;
        display: inline-block ;
        white-space: normal ; /* Cho phép xuống dòng nếu vẫn quá chật */
        word-break: break-all;
        line-height: 1.2;
        max-width: 100%;
        text-align: right;
    }

    .status-dot {
        display: none ; /* Ẩn chấm xanh để tránh đẩy dòng */
    }
    
    /* 6. Tối ưu Header/Footer (Nếu chúng là nguyên nhân gây tràn) */
    .header, .footer, .header-content, .footer-content {
        width: 100% ;
        max-width: 100vw ;
        padding-left: 10px ;
        padding-right: 10px ;
        box-sizing: border-box ;
    }
}


@media screen and (max-width: 350px) {
    /* Ép tất cả hàng bảng hoạt động như Flexbox để chia tỷ lệ chính xác */
    .players-table thead tr, 
    .players-table tbody tr {
        display: flex ;
        width: 100% ;
        align-items: center;
        justify-content: space-between;
    }

    /* Cột 1: STT - Chiếm 10% */
    .players-table th:nth-child(1), 
    .players-table td:nth-child(1) { 
        flex: 0 0 10% ;
        max-width: 10% ;
        padding: 8px 0 ;
        font-size: 0.65rem ;
        text-align: center;
    }

    /* Cột 2: Player - ÉP CỨNG CHỈ CHIẾM 50% */
    .players-table th:nth-child(2), 
    .players-table td:nth-child(2) { 
        flex: 0 0 50% ;
        max-width: 50% ;
        padding: 8px 2px ;
        font-size: 0.75rem ;
        white-space: nowrap ;
        overflow: hidden ;
        text-overflow: ellipsis ; /* Tên dài sẽ bị cắt bằng dấu ... */
    }

    /* Cột 3: Period - DÀNH 40% CÒN LẠI (Đủ chỗ cho ngày tháng) */
    .players-table th:nth-child(3), 
    .players-table td:nth-child(3) { 
        flex: 0 0 40% ;
        max-width: 40% ;
        padding: 8px 0 ;
        text-align: right ; /* Đẩy chữ về bên phải màn hình */
    }

    /* Tối ưu chữ trong cột Period */
    .time-badge {
        display: block ;
        font-size: 0.65rem ;
        font-weight: 600;
        white-space: nowrap ;
        background: transparent ; /* Bỏ khung để lấy thêm không gian */
        padding: 0 ;
        margin: 0 ;
        color: #475569;
        text-align: right;
    }

    /* Triệt tiêu mọi padding thừa từ card để bảng rộng hơn */
    .card {
        padding: 8px 4px ;
    }
}