/* ==========================================================================
   HOMEPAGE LAYOUT: BASE WRAPPER & CONTAINER
   ========================================================================== */

.phone-home-wrapper {
    background-color: var(--ps-bg-deep, #f8fafc);
    color: var(--ps-text-main, #0f172a);
    font-family: var(--font-family, 'Plus Jakarta Sans', sans-serif);
    overflow-x: hidden;
    position: relative;
    padding-bottom: 60px;
}

.phone-home-wrapper a {
    text-decoration: none;
    color: inherit;
    transition: all 0.25s ease;
}

.ps-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ==========================================================================
   SCROLL REVEAL (HIỆU ỨNG TRƯỢT MƯỢT TỪ TỪ LÊN KHI CUỘN TRANG - APPLE/LINEAR TIER)
   ========================================================================== */
.scroll-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.scroll-reveal.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delay helper classes */
.scroll-reveal.delay-1 { transition-delay: 0.08s; }
.scroll-reveal.delay-2 { transition-delay: 0.16s; }
.scroll-reveal.delay-3 { transition-delay: 0.24s; }
.scroll-reveal.delay-4 { transition-delay: 0.32s; }
.scroll-reveal.delay-5 { transition-delay: 0.40s; }
.scroll-reveal.delay-6 { transition-delay: 0.48s; }

/* Hiệu ứng tia sáng lướt qua khi rê chuột vào Card (Card Shine Sweep) */
.phone-reel-card,
.cat-card-item,
.cat-promo-card,
.bento-spotlight-card,
.bento-mini-card {
    position: relative;
    overflow: hidden;
}

.phone-reel-card::after,
.cat-promo-card::after,
.bento-spotlight-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(60deg, transparent 40%, rgba(255, 255, 255, 0.18) 50%, transparent 60%);
    transform: rotate(25deg) translateX(-150%);
    transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    z-index: 10;
}

.phone-reel-card:hover::after,
.cat-promo-card:hover::after,
.bento-spotlight-card:hover::after {
    transform: rotate(25deg) translateX(150%);
}

/* ==========================================================================
   HAPTIC MICRO-PHYSICS (ĐỘ NẢY VẬT LÝ KHI BẤM NÚT / CLICK)
   ========================================================================== */
.hero-cta-btn:active,
.reel-view-btn:active,
.section-link-more:active,
.bento-cta-link:active,
.cat-promo-btn:active,
.floating-action:active,
.pagination .page-link:active,
.cat-card-item:active {
    transform: scale(0.96) !important;
    transition: transform 0.1s cubic-bezier(0.16, 1, 0.3, 1) !important;
}