/* ===== GRID ===== */
.ntb-video-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:28px;
    width:100%;
}

.ntb-video-card{
    min-width:0;
}

.ntb-video-thumb{
    position:relative;
    display:block;
    width:100%;
    padding:0;
    border:0;
    background:#eee;
    overflow:hidden;
    border-radius:22px;
    cursor:pointer;
    aspect-ratio:16/10;
}

.ntb-video-thumb img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .35s ease;
}

.ntb-video-thumb:hover img{
    transform:scale(1.025);
}

.ntb-video-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.08);
    transition:background .25s ease;
}

.ntb-video-thumb:hover .ntb-video-overlay{
    background:rgba(0,0,0,.14);
}

.ntb-play-button{
    position:absolute;
    top:50%;
    left:50%;
    width:78px;
    height:78px;
    transform:translate(-50%,-50%);
    border:4px solid rgba(255,255,255,.95);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    transition:transform .25s ease, background .25s ease;
}

.ntb-video-thumb:hover .ntb-play-button{
    transform:translate(-50%,-50%) scale(1.07);
    background:rgba(255,255,255,.12);
}

.ntb-play-triangle{
    width:0;
    height:0;
    border-top:14px solid transparent;
    border-bottom:14px solid transparent;
    border-left:22px solid #fff;
    margin-left:6px;
}

.ntb-video-title{
    margin:13px 0 0;
    font-size:18px;
    line-height:1.45;
    font-weight:600;
    text-align:center;
}

/* ===== MODAL =====
   Z-index rất cao + modal được JS chuyển trực tiếp xuống body.
   Cách này tránh header, sticky menu, banner, UX Builder, slider... đè lên.
*/
.ntb-video-modal{
    position:fixed !important;
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;
    width:100vw !important;
    height:100vh !important;
    z-index:2147483647 !important;
    display:none;
    align-items:center;
    justify-content:center;
    padding:24px;
    margin:0 !important;
    transform:none !important;
    opacity:1;
    visibility:visible;
    isolation:isolate;
    box-sizing:border-box;
}

.ntb-video-modal.is-open{
    display:flex !important;
}

.ntb-video-modal-backdrop{
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    background:rgba(0,0,0,.86) !important;
}

.ntb-video-modal-dialog{
    position:relative !important;
    width:min(1000px,92vw) !important;
    max-width:1000px !important;
    z-index:2 !important;
    margin:auto !important;
    transform:none !important;
}

.ntb-video-frame-wrap{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    background:#000;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.55);
}

.ntb-video-iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
    z-index:1;
}

.ntb-video-modal-close{
    position:absolute !important;
    top:-48px !important;
    right:0 !important;
    width:40px !important;
    height:40px !important;
    min-height:40px !important;
    padding:0 !important;
    margin:0 !important;
    border:1px solid rgba(255,255,255,.45) !important;
    border-radius:50% !important;
    background:rgba(0,0,0,.4) !important;
    color:#fff !important;
    font-size:30px !important;
    font-weight:300 !important;
    line-height:36px !important;
    text-align:center !important;
    cursor:pointer;
    z-index:3 !important;
    box-shadow:none !important;
}

.ntb-video-modal-close:hover{
    background:rgba(255,255,255,.15) !important;
    color:#fff !important;
}

html.ntb-video-modal-open,
html.ntb-video-modal-open body,
body.ntb-video-modal-open{
    overflow:hidden !important;
}

/* Khi Flatsome có sticky header / popup / back-to-top thì modal vẫn nằm trên cùng */
body.ntb-video-modal-open #header,
body.ntb-video-modal-open .header-wrapper,
body.ntb-video-modal-open .mfp-wrap,
body.ntb-video-modal-open .back-to-top,
body.ntb-video-modal-open .ux-live-tools{
    /* Không ẩn, chỉ modal dùng z-index tối đa */
}

@media (max-width:849px){
    .ntb-video-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:20px;
    }
}

@media (max-width:549px){
    .ntb-video-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .ntb-video-thumb{
        border-radius:16px;
    }

    .ntb-play-button{
        width:66px;
        height:66px;
        border-width:3px;
    }

    .ntb-play-triangle{
        border-top-width:12px;
        border-bottom-width:12px;
        border-left-width:19px;
    }

    .ntb-video-title{
        font-size:16px;
    }

    .ntb-video-modal{
        padding:14px !important;
    }

    .ntb-video-modal-dialog{
        width:100% !important;
    }

    .ntb-video-modal-close{
        top:-44px !important;
    }
}