/* --- PHẦN RESPONSIVE TỔNG THỂ --- */
/* Kết hợp chiều rộng HOẶC thiết bị có màn hình cảm ứng */
@media screen and (max-width: 1024px), screen and (pointer: coarse) {
    
    .menu-toggle {
        display: flex ;
        visibility: visible ;
        background: transparent;
        border: none;
        color: #ffffff ;
        font-size: 1.8rem;
        cursor: pointer;
        padding: 5px;
        order: -1; 
    }

    .header-content {
        display: flex ;
        justify-content: flex-start ;
        gap: 15px;
        position: relative;
        padding: 12px 15px;
    }

    #nav-menu {
        display: none; 
        flex-direction: column ;
        position: absolute ;
        top: 100% ;
        left: 0 ;
        width: 100% ;
        background-color: #1e293b ;
        z-index: 99999 ;
        padding: 10px 0 ;
        box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    }

    #nav-menu.show {
        display: flex ;
    }

    #nav-menu a {
        color: white ;
        padding: 15px 20px ;
        display: block ;
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }

    .main-layout {
        flex-direction: column;
    }

    #player-details {
        position: static;
        width: 100%;
        order: -1; 
    }

    .table-wrapper {
        width: 100%;
    }

    .dropdown-content {
        display: flex; 
        flex-direction: column;
        padding-left: 20px;
        gap: 5px;
        margin-top: 5px;
    }

    .dropdown-content a {
        font-size: 0.9rem ;
        color: #94a3b8 ;
        border-left: 2px solid rgba(255,255,255,0.1);
        padding: 8px 15px ;
    }
    
    .dropdown-content a:hover {
        color: #fff ;
        border-left: 2px solid var(--primary-color);
    }
}

@media (max-width: 768px) {
    .table-wrapper {
        overflow-x: hidden ;
    }

    .players-table {
        min-width: 100% ;
        width: 100%;
        table-layout: fixed;
    }

    .col-stt {
        width: 40px;
        padding: 8px 4px ;
    }

    .name-column {
        width: auto;
        white-space: normal;
    }

    .col-pos {
        width: 60px;
        text-align: center;
        padding: 8px 4px ;
    }

    .col-rate {
        width: 50px;
        text-align: center;
        padding: 8px 4px ;
    }

    .col-club, .col-nat, .col-price,
    .players-table th:nth-child(3),
    .players-table th:nth-child(4),
    .players-table th:nth-child(7) {
        display: none ;
    }

    .pos-badge {
        min-width: 35px ;
        font-size: 0.7rem ;
        padding: 2px 4px ;
    }

    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 30px;
    }

    .footer-section h4::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .social-links {
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .players-table th, .players-table td {
        padding: 8px 5px;
        font-size: 13px;
    }
}