/* Popup video Showroom — modal sáng, mượt, không giật layout trang */

/* Bỏ bù scrollbar gây nhảy giao diện khi mở popup */
html.with-fancybox body.hide-scrollbar {
    margin-right: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
}

html.demo-fancybox-open .demo-card:hover {
    transform: none;
    box-shadow: 0 10px 28px rgba(24, 40, 72, .08);
}

/* Container popup video */
.demo-fancybox-video.fancybox__container {
    --fancybox-bg: rgba(15, 23, 42, 0.52);
    --fancybox-color: #64748b;
    --fancybox-hover-color: #0f172a;
}

.demo-fancybox-video .fancybox__backdrop {
    background: rgba(15, 23, 42, 0.48);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.demo-fancybox-video .fancybox__slide {
    padding: 16px;
}

.demo-fancybox-video .fancybox__content {
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 24px 56px rgba(15, 23, 42, 0.22);
    padding: 0;
}

/* Kích thước cố định 16:9 — tránh giật khi iframe YouTube load */
.demo-fancybox-video.has-youtube .fancybox__content,
.demo-fancybox-video.has-vimeo .fancybox__content,
.demo-fancybox-video.has-html5video .fancybox__content,
.demo-fancybox-video.has-iframe .fancybox__content {
    width: min(900px, calc(100vw - 32px)) !important;
    height: min(506px, calc((100vw - 32px) * 9 / 16)) !important;
    max-height: calc(100vh - 48px);
}

.demo-fancybox-video .fancybox__html5video,
.demo-fancybox-video .fancybox__iframe {
    width: 100% !important;
    height: 100% !important;
    display: block;
    border: 0;
    background: #0f172a;
}

/* Che tiêu đề + pill "Video khác" của YouTube embed (UI native, không tắt hẳn bằng param) */
.demo-fancybox-video .fancybox__slide.demo-fb-youtube-clean .fancybox__content {
    overflow: hidden;
    position: relative;
    background: #0f172a;
    border: solid 3px #909090bf;
}

.demo-fancybox-video .fancybox__slide.demo-fb-youtube-clean .fancybox__iframe {
    position: absolute;
    left: 0;
    top: -52px;
    width: 100% !important;
    height: calc(100% + 104px) !important;
    display: block;
    border: 0;
}

/* Nút đóng kiểu modal (vuông bo góc) */
.demo-fancybox-video .fancybox__content > .f-button.is-close-btn {
    --f-button-width: 36px;
    --f-button-height: 36px;
    --f-button-border-radius: 40px;
    --f-button-color: #64748b;
    --f-button-bg: #fff;
    --f-button-border: 1px solid #e2e8f0;
    --f-button-hover-color: #0f172a;
    --f-button-hover-bg: #f8fafc;
    --f-button-svg-width: 18px;
    --f-button-svg-height: 18px;
    --f-button-svg-stroke-width: 2;
    top: 10px;
    right: 10px;
    opacity: 1;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
}

.demo-fancybox-video .fancybox__toolbar {
    --f-button-border-radius: 8px;
    padding: 8px;
}

/* Animation mở/đóng mượt */
.demo-fancybox-video.fancybox__container.is-animated[aria-hidden="false"] .fancybox__backdrop {
    animation: demoFbFadeIn .26s ease both;
}

.demo-fancybox-video.fancybox__container.is-animated[aria-hidden="false"] .fancybox__content {
    animation: demoFbModalIn .3s cubic-bezier(.22, 1, .36, 1) both;
}

.demo-fancybox-video.fancybox__container.is-animated[aria-hidden="true"] .fancybox__backdrop {
    animation: demoFbFadeOut .2s ease both;
}

.demo-fancybox-video.fancybox__container.is-animated[aria-hidden="true"] .fancybox__content {
    animation: demoFbModalOut .2s ease both;
}

@keyframes demoFbFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes demoFbFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes demoFbModalIn {
    from { opacity: 0; transform: scale(.96) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes demoFbModalOut {
    from { opacity: 1; transform: scale(1) translateY(0); }
    to { opacity: 0; transform: scale(.98) translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
    .demo-fancybox-video.fancybox__container.is-animated[aria-hidden="false"] .fancybox__backdrop,
    .demo-fancybox-video.fancybox__container.is-animated[aria-hidden="false"] .fancybox__content,
    .demo-fancybox-video.fancybox__container.is-animated[aria-hidden="true"] .fancybox__backdrop,
    .demo-fancybox-video.fancybox__container.is-animated[aria-hidden="true"] .fancybox__content {
        animation: none !important;
    }

    .demo-fancybox-gallery.fancybox__container.is-animated[aria-hidden="false"] .fancybox__backdrop,
    .demo-fancybox-gallery.fancybox__container.is-animated[aria-hidden="false"] .fancybox__slide.has-image > .fancybox__content,
    .demo-fancybox-gallery.fancybox__container.is-animated[aria-hidden="true"] .fancybox__backdrop,
    .demo-fancybox-gallery.fancybox__container.is-animated[aria-hidden="true"] .fancybox__slide.has-image > .fancybox__content {
        animation: none !important;
    }
}

@media (max-width: 560px) {
    .demo-fancybox-video .fancybox__slide {
        padding: 10px;
    }

    .demo-fancybox-video.has-youtube .fancybox__content,
    .demo-fancybox-video.has-vimeo .fancybox__content,
    .demo-fancybox-video.has-html5video .fancybox__content,
    .demo-fancybox-video.has-iframe .fancybox__content {
        width: calc(100vw - 20px) !important;
        height: calc((100vw - 20px) * 9 / 16) !important;
    }
}

/* ===== Popup gallery ảnh — mượt, không giật layout ===== */
html.demo-fancybox-open .detail-product-hero {
    transform: none;
}

.demo-fancybox-gallery.fancybox__container {
    --fancybox-bg: rgba(15, 23, 42, 0.52);
    --fancybox-color: #64748b;
    --fancybox-hover-color: #0f172a;
}

.demo-fancybox-gallery .fancybox__backdrop {
    background: rgba(15, 23, 42, 0.48);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.demo-fancybox-gallery .fancybox__slide {
    padding: 16px;
}

.demo-fancybox-gallery .fancybox__content {
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 24px 56px rgba(15, 23, 42, 0.22);
    padding: 0;
    max-width: min(960px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
}

.demo-fancybox-gallery .fancybox__image {
    width: auto;
    height: auto;
    max-width: min(960px, calc(100vw - 32px));
    max-height: calc(100vh - 80px);
    object-fit: contain;
    display: block;
    background: #0f172a;
}

.demo-fancybox-gallery .fancybox__content > .f-button.is-close-btn {
    --f-button-width: 36px;
    --f-button-height: 36px;
    --f-button-border-radius: 40px;
    --f-button-color: #64748b;
    --f-button-bg: #fff;
    --f-button-border: 1px solid #e2e8f0;
    --f-button-hover-color: #0f172a;
    --f-button-hover-bg: #f8fafc;
    top: 10px;
    right: 10px;
    opacity: 1;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
}

.demo-fancybox-gallery .fancybox__toolbar {
    padding: 8px;
}

.demo-fancybox-gallery .fancybox__nav .f-button {
    --f-button-bg: rgba(255, 255, 255, 0.92);
    --f-button-border: 1px solid #e2e8f0;
    --f-button-color: #334155;
}

.demo-fancybox-gallery.fancybox__container.is-animated[aria-hidden="false"] .fancybox__backdrop {
    animation: demoFbFadeIn .26s ease both;
}

.demo-fancybox-gallery.fancybox__container.is-animated[aria-hidden="false"] .fancybox__slide.has-image > .fancybox__content {
    animation: demoFbFadeIn .24s ease both;
}

.demo-fancybox-gallery.fancybox__container.is-animated[aria-hidden="true"] .fancybox__backdrop {
    animation: demoFbFadeOut .2s ease both;
}

.demo-fancybox-gallery.fancybox__container.is-animated[aria-hidden="true"] .fancybox__slide.has-image > .fancybox__content {
    animation: demoFbFadeOut .18s ease both;
}

.demo-fancybox-gallery .fancybox__slide.has-image > .fancybox__content {
    transition: none !important;
}

.demo-fancybox-gallery.is-animating .fancybox__slide.has-image > .fancybox__content {
    will-change: opacity;
}

@media (max-width: 560px) {
    .demo-fancybox-gallery .fancybox__slide {
        padding: 10px;
    }

    .demo-fancybox-gallery .fancybox__content {
        max-width: calc(100vw - 20px);
    }
}