/* Container cho các loại video */
.popup-youtube,
.upload-youtube {
    position: relative;
    display: block;
    
}

.popup-tiktok {
    position: relative;
    display: block;
    
}



/* Biểu tượng play */
.popup-youtube i,
.upload-youtube i {
    font-size: 40px;
    position: absolute;
    top: 30%;
    left: 30%;
    color: #e70000;
    
}

.popup-tiktok i {
    font-size: 40px;
    position: absolute;
    top: 30% !important;
    left: 30% !important;
    color: #e70000;
}

/* Tùy chỉnh iframe trong Magnific Popup */
.mfp-youtube .mfp-iframe-holder .mfp-content {
    max-width: 900px;
    width: 100%;
    aspect-ratio: 16 / 9 !important;
    height: auto;
}

.mfp-tiktok .mfp-iframe-holder .mfp-content {
    max-width: 330px;
    width: 100%;
    aspect-ratio: 9 / 16 !important;
    height: auto;
}

/* Đảm bảo iframe lấp đầy container */
.mfp-iframe-holder .mfp-content iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
}

/* Media query cho các thiết bị có chiều rộng màn hình nhỏ hơn hoặc bằng 768px (giao diện điện thoại) */
@media (max-width: 768px) {
    .popup-youtube i,
    .upload-youtube i {
        font-size: 60px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .popup-tiktok i {
        font-size: 60px;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    

    .mfp-youtube .mfp-iframe-holder .mfp-content {
        max-width: 100%;
        aspect-ratio: 16 / 9 !important;
    }

    .mfp-tiktok .mfp-iframe-holder .mfp-content {
        max-width: 330px;
        aspect-ratio: 9 / 16 !important;
        height: auto;
        max-height: 80vh;
    }
}

/* == J2 Css start here == */
.extended-container ul.list-inline {
    padding: 0;
    margin: 0;
}

.extended-container ul.list-inline li {
    margin: 0 5px 0 0;
    list-style: none;
    display: inline-block;
}

/* == J2 Css end here == */