/* TiziShop · 03-navigation-effects.css */
/* Icon SVG tự vẽ: luôn hiển thị kể cả khi font icon bên ngoài chưa tải */
        .nav-btn { color:#475569; font-weight:600; }
        .nav-btn:hover:not(.is-active) { background:#f1f5f9; }
        .nav-btn .nav-icon { width:20px; height:20px; flex-shrink:0; display:block; color:var(--nav-color,#6366f1); }
        .nav-btn.is-active {
            color:#fff; font-weight:600;
            background:linear-gradient(105deg,#4f46e5,#7c3aed);
            box-shadow:0 5px 12px rgba(99,102,241,.23);
        }
        .nav-btn.is-active .nav-icon { color:#fff; }
        .mobile-nav-item { min-width:0; color:#64748b; font-size:10px; font-weight:600; }
        .mobile-nav-item .mobile-icon-frame {
            height:32px; width:38px; display:flex; align-items:center; justify-content:center;
            border-radius:12px; color:var(--nav-color,#6366f1);
            transition:all .2s ease;
        }
        .mobile-nav-item .nav-icon { display:block; width:20px; height:20px; }
        .mobile-nav-item.is-active { color:#6d28d9; }
        .mobile-nav-item.is-active .mobile-icon-frame {
            background:linear-gradient(120deg,#4f46e5,#9333ea); color:#fff;
            box-shadow:0 5px 12px rgba(99,102,241,.2);
        }
        @media (max-width:1023px) {
            main { padding-bottom:105px!important; }
            .mobile-bottom-nav { padding-bottom:env(safe-area-inset-bottom, 0px); }
        }

        /* Hiệu ứng cánh hoa anh đào rơi nhẹ ở nửa trên website */
        #sakuraLayer {
            position: absolute;
            inset: 0 auto auto 0;
            width: 100%;
            height: min(58vh, 760px);
            overflow: hidden;
            pointer-events: none;
            z-index: 0;
            mask-image: linear-gradient(to bottom, rgba(0,0,0,.95) 0%, rgba(0,0,0,.9) 72%, rgba(0,0,0,0) 100%);
            -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.95) 0%, rgba(0,0,0,.9) 72%, rgba(0,0,0,0) 100%);
        }
        .sakura-petal {
            position: absolute;
            top: -40px;
            width: var(--petal-size, 16px);
            height: calc(var(--petal-size, 16px) * 0.78);
            background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.9) 0%, rgba(255,234,244,.95) 16%, rgba(255,196,223,.94) 56%, rgba(244,114,182,.88) 100%);
            border-radius: 75% 0 75% 0;
            opacity: var(--petal-opacity, .75);
            box-shadow: 0 6px 14px rgba(236, 72, 153, 0.10);
            transform: rotate(45deg);
            animation: sakura-fall linear infinite;
            animation-duration: var(--fall-duration, 12s);
            animation-delay: var(--fall-delay, 0s);
            will-change: transform, opacity;
        }
        .sakura-petal::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 75% 0 75% 0;
            transform: translate(-38%, 32%) rotate(-18deg) scale(0.72);
            background: inherit;
            opacity: .93;
        }
        @keyframes sakura-fall {
            0% {
                transform: translate3d(0, -10%, 0) rotate(18deg) scale(var(--petal-scale, 1));
                opacity: 0;
            }
            10% { opacity: var(--petal-opacity, .75); }
            50% {
                transform: translate3d(calc(var(--petal-drift, 24px) * .55), 220px, 0) rotate(160deg) scale(var(--petal-scale, 1));
            }
            100% {
                transform: translate3d(var(--petal-drift, 24px), 560px, 0) rotate(320deg) scale(var(--petal-scale, 1));
                opacity: 0;
            }
        }


/* TiziShop · Giữ menu trái cố định trên desktop.
   Chỉ vùng nội dung bên phải di chuyển khi cuộn trang. */
@media (min-width: 1024px) {
    /* Chừa đúng bề rộng sidebar (Tailwind w-72 = 18rem). */
    body {
        padding-left: 18rem;
    }

    #sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: 18rem;
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        z-index: 40;
    }

    /* Phần chính chỉ chiếm không gian còn lại, không bị che bởi sidebar. */
    body > main {
        min-width: 0;
        width: 100%;
        max-width: 80rem;
    }
}