/* =========================================================
   HEADER DESKTOP V10.17
   - Chỉ áp dụng desktop >= 1200px.
   - Tách cụm button header thành một thanh riêng phía TRÊN video.
   - Button không còn đè/che nội dung video.
   - Thanh button dùng tông đỏ rượu + viền vàng để đồng bộ với
     artwork button và banner/video game bên dưới.
   - Mobile + tablet < 1200px tiếp tục dùng V10.16, không thay đổi.
   ========================================================= */

@media (min-width: 1200px) {

    /*
     * Header chuyển về layout theo flow:
     * [ thanh button ]
     * [ video banner  ]
     */
    .header {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        background: #170608 !important;
    }

    /* Thanh riêng chứa các button đầu trang */
    .header > .container {
        position: relative !important;
        z-index: 20 !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 11px 24px 13px !important;
        box-sizing: border-box !important;

        background:
            linear-gradient(180deg,
                rgba(44, 6, 8, 0.99) 0%,
                rgba(93, 12, 15, 0.98) 48%,
                rgba(46, 6, 9, 0.99) 100%) !important;

        border-top: 1px solid rgba(255, 229, 132, 0.24) !important;
        border-bottom: 1px solid rgba(255, 211, 74, 0.82) !important;

        box-shadow:
            inset 0 -1px 0 rgba(91, 18, 13, 0.72),
            0 5px 16px rgba(0, 0, 0, 0.26) !important;
    }

    /* Một hàng button gọn, cân giữa trên desktop */
    .header .social.social-footer {
        position: relative !important;
        z-index: 2 !important;

        width: min(100%, 1100px) !important;
        max-width: 1100px !important;

        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 10px !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    .header .social.social-footer > li {
        width: auto !important;
        max-width: 212px !important;
        min-width: 0 !important;

        flex: 1 1 0 !important;

        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .header .social.social-footer > li > a {
        position: relative !important;
        display: block !important;

        width: 100% !important;
        max-width: 212px !important;

        margin: 0 auto !important;
        padding: 0 !important;
        line-height: 0 !important;

        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.28));
    }

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

    /* Chữ giữ đúng tâm trong artwork button */
    .header .social.social-footer li .name {
        top: 50% !important;
        left: 39% !important;
        right: 3% !important;
        width: auto !important;

        transform: translateY(-50%) !important;

        font-size: clamp(16px, 1.25vw, 20px) !important;
        line-height: 1 !important;
        text-align: center !important;
        white-space: nowrap !important;

        margin: 0 !important;
        padding: 0 !important;
        pointer-events: none !important;
    }

    /*
     * Video trở thành một khối riêng trong flow, nằm ngay dưới menu.
     * Không dùng absolute/translate như CSS gốc nữa nên menu không thể
     * đè lên hình ảnh trong video.
     */
    .header > .video {
        position: relative !important;
        z-index: 1 !important;

        inset: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;

        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: clamp(560px, 37.5vw, 720px) !important;

        margin: 0 !important;
        overflow: hidden !important;

        background: #130609 !important;
        border-bottom: 1px solid rgba(255, 205, 65, 0.25) !important;
        box-shadow: inset 0 8px 18px rgba(0, 0, 0, 0.18) !important;
    }

    .header > .video > video {
        display: block !important;

        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-width: none !important;

        margin: 0 !important;

        object-fit: cover !important;
        object-position: center center !important;
    }
}

/* Desktop rất rộng: tránh button bị phóng quá lớn, giữ bố cục thanh lịch. */
@media (min-width: 1600px) {
    .header .social.social-footer {
        max-width: 1140px !important;
        gap: 12px !important;
    }

    .header .social.social-footer > li,
    .header .social.social-footer > li > a {
        max-width: 216px !important;
    }
}