/* TT SHOP SPA - APP TRANSITIONS */

#ttSpaContent{
    position:relative;
    transform-origin:50% 8%;
    will-change:opacity,transform,filter;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}

/* Khi rời danh sách để mở chi tiết */
#ttSpaContent.tt-spa-leave-list{
    animation:ttSpaLeaveList .14s ease forwards;
    pointer-events:none;
}

/* Khi rời chi tiết để quay về danh sách */
#ttSpaContent.tt-spa-leave-detail{
    animation:ttSpaLeaveDetail .14s ease forwards;
    pointer-events:none;
}

/* Khi đổi lọc, danh mục, phân trang */
#ttSpaContent.tt-spa-leave-page{
    animation:ttSpaLeavePage .12s ease forwards;
    pointer-events:none;
}

/* Mở trang chi tiết: nhỏ nhẹ rồi bung full màn hình */
#ttSpaContent.tt-spa-enter-detail{
    animation:ttSpaEnterDetail .42s cubic-bezier(.18,.88,.25,1) both;
}

/* Quay về danh sách: trượt nhẹ từ trên xuống */
#ttSpaContent.tt-spa-enter-list{
    animation:ttSpaEnterList .34s cubic-bezier(.2,.8,.2,1) both;
}

/* Đổi lọc / trang: hiện từ trên xuống, nhanh hơn */
#ttSpaContent.tt-spa-enter-page{
    animation:ttSpaEnterPage .28s cubic-bezier(.2,.75,.2,1) both;
}

@keyframes ttSpaLeaveList{
    from{
        opacity:1;
        transform:scale(1) translateY(0);
        filter:blur(0);
    }
    to{
        opacity:.18;
        transform:scale(.985) translateY(8px);
        filter:blur(1px);
    }
}

@keyframes ttSpaLeaveDetail{
    from{
        opacity:1;
        transform:scale(1) translateY(0);
    }
    to{
        opacity:.15;
        transform:scale(.97) translateY(14px);
    }
}

@keyframes ttSpaLeavePage{
    from{
        opacity:1;
        transform:translateY(0);
    }
    to{
        opacity:.2;
        transform:translateY(8px);
    }
}

@keyframes ttSpaEnterDetail{
    0%{
        opacity:0;
        transform:scale(.90) translateY(30px);
        filter:blur(3px);
    }
    55%{
        opacity:1;
        transform:scale(1.012) translateY(-2px);
        filter:blur(0);
    }
    100%{
        opacity:1;
        transform:scale(1) translateY(0);
        filter:blur(0);
    }
}

@keyframes ttSpaEnterList{
    0%{
        opacity:0;
        transform:translateY(-24px) scale(.985);
    }
    100%{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

@keyframes ttSpaEnterPage{
    0%{
        opacity:0;
        transform:translateY(-16px);
    }
    100%{
        opacity:1;
        transform:translateY(0);
    }
}

/* Loading bar trên cùng */
#ttSpaLoadingBar{
    position:fixed;
    top:0;
    left:0;
    z-index:999999;
    width:0;
    height:3px;
    opacity:0;
    pointer-events:none;
    background:linear-gradient(90deg,#facc15,#22c55e,#38bdf8);
    box-shadow:0 0 12px rgba(56,189,248,.72);
}

#ttSpaLoadingBar.show{
    opacity:1;
    animation:ttSpaLoading 1s ease-in-out infinite;
}

@keyframes ttSpaLoading{
    0%{width:5%}
    45%{width:64%}
    100%{width:96%}
}

html.tt-spa-loading{
    cursor:progress;
}

/* Mobile: hiệu ứng rõ nhưng vẫn nhẹ */
@media (max-device-width:1179px) and (max-width:768px){
    #ttSpaContent{
        transform-origin:50% 4%;
    }

    #ttSpaContent.tt-spa-enter-detail{
        animation-duration:.38s;
    }

    #ttSpaContent.tt-spa-enter-list{
        animation-duration:.30s;
    }

    #ttSpaContent.tt-spa-enter-page{
        animation-duration:.24s;
    }
}

/* Tôn trọng cài đặt giảm chuyển động của thiết bị */
@media(prefers-reduced-motion:reduce){
    #ttSpaContent,
    #ttSpaContent[class*="tt-spa-"]{
        animation:none!important;
        transition:none!important;
        transform:none!important;
        filter:none!important;
    }

    #ttSpaLoadingBar.show{
        animation:none!important;
        width:100%!important;
    }
}
/* Viewer ảnh chi tiết phải nằm trên header/menu nổi và không truyền thao tác
   vuốt xuống cho trang SPA phía sau. Panzoom của Fancybox vẫn xử lý kéo/pinch. */
html.with-fancybox,
html.with-fancybox body{
    overscroll-behavior:none!important;
}

html.with-fancybox .fancybox__container{
    z-index:2147483000!important;
    overscroll-behavior:none!important;
}

html.with-fancybox .fancybox__viewport,
html.with-fancybox .fancybox__carousel,
html.with-fancybox .fancybox__slide{
    overscroll-behavior:contain!important;
}

html.with-fancybox body.tt-detail-page #ttSpaContent,
html.with-fancybox body.tt-is-detail-page #ttSpaContent{
    overflow:hidden!important;
    overscroll-behavior:none!important;
}
/* Khóa riêng scroller trang chi tiết khi viewer ảnh đang mở. */
html.with-fancybox.with-fancybox body.tt-detail-page #ttSpaContent,
html.with-fancybox.with-fancybox body.tt-is-detail-page #ttSpaContent{
    overflow:hidden!important;
    overflow-y:hidden!important;
    overscroll-behavior:none!important;
}