/* ========================= */
/* ✅ Lightbox Overlay chung */
/* ========================= */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.85);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.lightbox-content {
    position: relative;
    max-width: 80%;
    max-height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .lightbox-content img,
    .lightbox-content iframe {
        max-width: 100%;
        max-height: 100%;
        border-radius: 12px
    }

/* ========================= */
/* Navigation arrows */
.lightbox-prev, .lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    cursor: pointer;
    z-index: 10001;
    transition: all 0.2s ease;
}

    .lightbox-prev:hover,
    .lightbox-next:hover {
        scale: 1.25;
    }

.lightbox-prev {
    left: 8px;
    transform: rotate(180deg)
}

.lightbox-next {
    right: 8px;
}

/* Close button */
.lightbox-close {
    position: absolute;
    top: 0px;
    right: 16px;
    font-size: 32px;
    /*    color: #fff;*/
    /*    background: rgba(0,0,0,0.4);*/
    border: none;
    cursor: pointer;
    z-index: 1;
    transition: all 0.2s ease-in;
}

    .lightbox-close:hover {
        transform: scale(1.5);
        color: white;
    }

/* ========================= */
/* ✅ Gallery Image Hover */
/* ========================= */
.gallery-item {
    position: relative;
    display: inline-block;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
}

    .gallery-item img {
        display: inline-block;
        width: 49%; /* vì 2 ảnh cạnh nhau trong 1 thẻ */
        border-radius: 12px;
        margin: 0 0.5%;
        transition: transform 0.3s ease, filter 0.3s ease;
        cursor: pointer;
    }

        /* Hover effect: chỉ phóng to ảnh */
        .gallery-item img:hover {
            transform: scale(1.05);
            filter: brightness(1.05);
        }

/* ========================= */
/* ✅ Video Thumbnail (Play) */
/* ========================= */
.video-thumb-wrap {
    position: relative;
    display: inline-block;
    width: 100%;
    line-height: 0;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
}

    .video-thumb-wrap img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 12px;
        transition: transform 0.25s ease, filter 0.25s ease;
    }

    /* Nút Play */
    .video-thumb-wrap .play-badge {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: clamp(48px, 10vw, 64px);
        height: clamp(48px, 10vw, 64px);
        border-radius: 50%;
        pointer-events: none;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(0,0,0,0.28); /* đen mờ */
    }

        /* Tam giác trắng bo cong */
        .video-thumb-wrap .play-badge::after {
            content: "";
            display: block;
            width: clamp(28px, 5vw, 36px);
            height: clamp(32px, 5.6vw, 44px);
            margin-left: 4px;
            background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 140'>\
  <path fill='%23ffffff' d='M42 28\
    C36 32 34 38 34 46\
    L34 94\
    C34 102 36 108 42 112\
    C46 114 52 112 56 108\
    L90 78\
    C96 72 96 68 90 62\
    L56 32\
    C52 28 46 26 42 28Z'/>\
</svg>");
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }

    /* Hover effect video */
    .video-thumb-wrap:hover img {
        transform: scale(1.03);
        filter: brightness(1.05);
    }

    .video-thumb-wrap:hover .play-badge {
        background: rgba(0,0,0,0.65);
        transform: translate(-50%, -50%) scale(1.06);
    }