/* ==========================================================================
   ⚡ APHIM SUPER — PRO MOBILE INTERACTION & GESTURE SUITE (2026 EDITION)
   Tối ưu hóa chuyên biệt 100% cho màn hình Di động (Mobile Only)
   - Lướt Ngang 120FPS Native Hardware Glide (Chuẩn Netflix / Disney+ Web Mobile)
   - Lướt Dọc Tự Nhiên Không Khựng / Không Giật
   - Phản Hồi Ấn Chạm Nhanh 0ms Tap Latency
   - Bottom Nav Dock & Floating Action Bar Tương Thích Hoàn Hảo
   * TUYỆT ĐỐI KHÔNG ẢNH HƯỞNG ĐẾN DESKTOP
   ========================================================================== */

@media (max-width: 768px), (hover: none) and (pointer: coarse) {

    /* ─── 1. TỐI ƯU LƯỚT DỌC MÀN HÌNH (120FPS NATIVE HARDWARE ACCELERATED) ─── */
    html {
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: auto !important;
    }

    body {
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y;
        overscroll-behavior-y: auto;
    }

    /* ─── 2. TỐI ƯU LƯỚT NGANG CÁC DANH SÁCH PHIM (FLUID 120FPS NATIVE GLIDE) ─── */
    /* Trình duyệt di động sử dụng 100% C++ Compositor Thread mượt mà như Native App */
    .de-cu-slider,
    .cs-scroll-container,
    .country-scroll-container,
    .ranking-grid-container,
    .top10-platforms-scroll,
    .interests-wrapper,
    #heroThumbnails,
    .home-comments-track,
    .cat-tab-container,
    .similar-movies-track,
    .mobile-thumb-wrapper,
    .horizontal-scroll,
    .overflow-x-auto,
    .scrollbar-hide {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x pan-y !important;
        scroll-behavior: auto !important;
        overscroll-behavior-x: contain !important;
        overscroll-behavior-y: auto !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        transform: none !important;
        will-change: auto !important;
    }

    .de-cu-slider::-webkit-scrollbar,
    .cs-scroll-container::-webkit-scrollbar,
    .country-scroll-container::-webkit-scrollbar,
    .ranking-grid-container::-webkit-scrollbar,
    .top10-platforms-scroll::-webkit-scrollbar,
    .interests-wrapper::-webkit-scrollbar,
    #heroThumbnails::-webkit-scrollbar,
    .home-comments-track::-webkit-scrollbar,
    .cat-tab-container::-webkit-scrollbar,
    .overflow-x-auto::-webkit-scrollbar,
    .scrollbar-hide::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* Layout Containment chuẩn Netflix/Disney+: Trình duyệt chỉ render thẻ hiển thị,
       hoàn toàn giải phóng CPU/GPU khi lướt tốc độ cao */
    .de-cu-slider > *,
    .cs-scroll-container > *,
    .country-scroll-container > *,
    .ranking-grid-container > *,
    .top10-platforms-scroll > *,
    .interests-wrapper > *,
    #heroThumbnails > *,
    .home-comments-track > *,
    .cat-tab-container > *,
    .similar-movies-track > * {
        flex-shrink: 0 !important;
        contain: layout style;
        content-visibility: visible !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        -webkit-user-drag: none !important;
        -webkit-touch-callout: none !important;
    }

    /* Chống ghost-drag ảnh khi ngón tay vuốt lướt ngang qua poster */
    .de-cu-slider img,
    .cs-scroll-container img,
    .country-scroll-container img,
    .ranking-grid-container img,
    .top10-platforms-scroll img,
    .interests-wrapper img,
    #heroThumbnails img,
    .home-comments-track img,
    .similar-movies-track img {
        pointer-events: none !important;
        -webkit-user-drag: none !important;
        user-select: none !important;
        -webkit-user-select: none !important;
    }

    /* ─── 3. TỐI ƯU HÓA THAO TÁC ẤN CHẠM (0MS DELAY & ZERO FLICKER) ─── */
    a,
    button,
    [role="button"],
    .bn-tab,
    .movie-card,
    .movie-item,
    .cs-movie-card,
    .top10-card,
    .interests-item,
    .home-comment-card,
    .motchill-movie-card,
    .az-btn,
    .btn,
    .btn-primary,
    .btn-secondary,
    .app-btn,
    .comment-switch-btn,
    .showcase-dot,
    .fd-btn-top,
    .theme-toggle-fab,
    #episode-list button,
    .cat-tab-btn,
    .top10-type-btn,
    .top10-region-capsule {
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    /* CHỈ áp dụng hiệu ứng nén đàn hồi cho các NÚT BẤM (Buttons), KHÔNG áp dụng lên Card phim */
    .btn:active,
    .btn-primary:active,
    .btn-secondary:active,
    .app-btn:active,
    #showcase3DBtnWatch:active,
    #showcase3DBtnInfo:active,
    .fd-btn-top:active,
    .theme-toggle-fab:active,
    #episode-list button:active,
    .az-btn:active,
    .cat-tab-btn:active,
    .top10-type-btn:active,
    .top10-region-capsule:active {
        transform: scale(0.94) !important;
        transition: transform 0.08s ease !important;
    }

    /* ─── 4. TỐI ƯU HÓA BOTTOM NAVIGATION DOCK TRÊN MOBILE ─── */
    #bottom-nav-dock {
        padding-bottom: max(6px, env(safe-area-inset-bottom, 0px)) !important;
    }

    .bn-tab {
        transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.15s ease !important;
    }

    .bn-tab:active {
        transform: scale(0.88) !important;
    }

    .bn-tab-center:active .bn-center-circle {
        transform: scale(0.88) !important;
        box-shadow: 0 0 25px rgba(252, 213, 118, 0.95) !important;
    }

    .bn-tab.active .bn-tab-icon {
        animation: bnIconBounce 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }

    @keyframes bnIconBounce {
        0% { transform: scale(1); }
        50% { transform: scale(1.18); }
        100% { transform: scale(1); }
    }

    /* ─── 5. TỐI ƯU HÓA NÚT NỔI (FLOATING DOCK & THEME FAB) ─── */
    #floatingDockContainer {
        bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
        right: 12px !important;
        z-index: 9400 !important;
    }

    /* ─── 6. MOBILE DRAWER TRANSITIONS (MƯỢT MÀ KHÔNG GIẬT) ─── */
    #mm-drawer {
        touch-action: pan-y;
        will-change: transform;
    }
}