/* ==========================================================================
   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)
   ========================================================================== */
.scroll-reveal {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

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

/* Các card con bên trong trượt lên từ từ và có độ trễ nhẹ */
.scroll-reveal.is-revealed .cat-card-item,
.scroll-reveal.is-revealed .showcase-product-card,
.scroll-reveal.is-revealed .bento-spotlight-card,
.scroll-reveal.is-revealed .bento-sub-card {
    animation: smoothFadeUp 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes smoothFadeUp {
    0% {
        opacity: 0;
        transform: translateY(35px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}