<!DOCTYPE html>
<html lang="en">
<head>
    <?php require $_SERVER['DOCUMENT_ROOT'].'/hethong/head2.php';?>
    <title>Trang Chủ | <?=$lxtdev['ten_web'];?></title>
    <?php require $_SERVER['DOCUMENT_ROOT'].'/hethong/nav.php';?>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
        /* ===== HERO BANNER — PC LARGE ===== */
        .hero-bg {
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 340px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 24px;
            margin-bottom: 2.5rem;
        }

        .hero-bg::before {
            content: '';
            position: absolute;
            width: 200%;
            height: 200%;
            top: -50%;
            left: -50%;
            background: radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px);
            background-size: 50px 50px;
            animation: bgMove 20s linear infinite;
        }

        @keyframes bgMove {
            0% { transform: translate(0, 0); }
            100% { transform: translate(50px, 50px); }
        }

        .hero-content {
            position: relative;
            z-index: 2;
            text-align: center;
            padding: 2.5rem;
        }

        .hero-title {
            font-size: 3rem;
            font-weight: 800;
            color: #fff;
            text-shadow: 0 4px 30px rgba(0,0,0,0.15);
            margin-bottom: 0.6rem;
            letter-spacing: -0.5px;
            animation: fadeInUp 0.8s ease;
        }

        .hero-subtitle {
            color: rgba(255,255,255,0.92);
            font-size: 1.15rem;
            font-weight: 400;
            animation: fadeInUp 0.8s ease 0.2s both;
        }

        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* ===== FLOATING PARTICLES ===== */
        .particle {
            position: absolute;
            border-radius: 50%;
            background: rgba(255,255,255,0.12);
            animation: float 6s ease-in-out infinite;
        }

        .particle:nth-child(1) { width: 70px; height: 70px; top: 15%; left: 8%; animation-delay: 0s; }
        .particle:nth-child(2) { width: 45px; height: 45px; top: 65%; left: 82%; animation-delay: 1s; }
        .particle:nth-child(3) { width: 90px; height: 90px; top: 35%; left: 55%; animation-delay: 2s; }
        .particle:nth-child(4) { width: 35px; height: 35px; top: 75%; left: 25%; animation-delay: 3s; }
        .particle:nth-child(5) { width: 55px; height: 55px; top: 8%; left: 72%; animation-delay: 1.5s; }
        .particle:nth-child(6) { width: 40px; height: 40px; top: 50%; left: 15%; animation-delay: 2.5s; }
        .particle:nth-child(7) { width: 60px; height: 60px; top: 20%; left: 90%; animation-delay: 0.8s; }

        @keyframes float {
            0%, 100% { transform: translateY(0) scale(1); opacity: 0.4; }
            50% { transform: translateY(-20px) scale(1.15); opacity: 0.7; }
        }

        /* ===== GLOW ORB — Trang trí thêm cho PC ===== */
        .glow-orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(60px);
            opacity: 0.3;
            animation: orbFloat 8s ease-in-out infinite alternate;
        }

        .glow-orb.orb-1 {
            width: 200px; height: 200px;
            background: #ff6b9d;
            top: -40px; left: -40px;
            animation-delay: 0s;
        }

        .glow-orb.orb-2 {
            width: 180px; height: 180px;
            background: #c471f5;
            bottom: -30px; right: -30px;
            animation-delay: 3s;
        }

        .glow-orb.orb-3 {
            width: 140px; height: 140px;
            background: #48c6ef;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            animation-delay: 5s;
            opacity: 0.15;
        }

        @keyframes orbFloat {
            0% { transform: translate(0, 0) scale(1); }
            100% { transform: translate(20px, -15px) scale(1.1); }
        }

        /* ===== PRODUCT GRID — CSS Grid 4 cột PC ===== */
        .product-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.75rem;
        }

        /* ===== PREMIUM PRODUCT CARD ===== */
        .premium-product-card {
            border: 1px solid rgba(0, 0, 0, 0.05) !important;
            border-radius: 20px !important;
            transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
            overflow: hidden;
            background: #ffffff;
            position: relative;
            padding: 1.5rem !important;
        }

        [data-bs-theme="dark"] .premium-product-card {
            background: #1e1e2d;
            border: 1px solid rgba(255, 255, 255, 0.06) !important;
        }

        /* Shimmer sweep trên hover */
        .premium-product-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
            transition: left 0.6s ease;
            z-index: 5;
            pointer-events: none;
        }

        .premium-product-card:hover::before {
            left: 100%;
        }

        .premium-product-card:hover {
            transform: translateY(-14px) scale(1.025);
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(48, 133, 214, 0.15) !important;
            border-color: rgba(48, 133, 214, 0.25) !important;
        }

        [data-bs-theme="dark"] .premium-product-card:hover {
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(48, 133, 214, 0.2) !important;
        }

        /* ===== PRODUCT IMAGE ===== */
        .product-img-wrapper {
            position: relative;
            width: 100%;
            padding-top: 60%;
            overflow: hidden;
            border-radius: 14px;
            background: linear-gradient(135deg, #f5f8fa 0%, #e8ecf1 100%);
        }

        [data-bs-theme="dark"] .product-img-wrapper {
            background: linear-gradient(135deg, #151521 0%, #1e1e2d 100%);
        }

        .product-img-wrapper img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .premium-product-card:hover .product-img-wrapper img {
            transform: scale(1.12);
        }

        /* Overlay khi hover */
        .img-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.1) 40%, transparent 70%);
            opacity: 0;
            transition: opacity 0.4s ease;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            padding-bottom: 1.25rem;
            z-index: 2;
        }

        .premium-product-card:hover .img-overlay {
            opacity: 1;
        }

        .img-overlay-text {
            color: #fff;
            font-weight: 700;
            font-size: 0.9rem;
            transform: translateY(12px);
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            background: rgba(255,255,255,0.15);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            padding: 8px 20px;
            border-radius: 30px;
            border: 1px solid rgba(255,255,255,0.2);
        }

        .premium-product-card:hover .img-overlay-text {
            transform: translateY(0);
        }

        /* ===== BADGE ===== */
        .product-badge {
            position: absolute;
            top: 12px;
            right: 12px;
            background: linear-gradient(135deg, #ff6b6b, #ee5a5a);
            color: #fff;
            padding: 5px 14px;
            border-radius: 20px;
            font-size: 0.72rem;
            font-weight: 800;
            z-index: 3;
            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.35);
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }

        /* ===== CARD TITLE ===== */
        .card-title-text {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            font-size: 1.02rem;
            font-weight: 700;
            line-height: 1.45;
            min-height: 2.9em;
            color: #1a1a2e;
            transition: color 0.3s ease;
        }

        .premium-product-card:hover .card-title-text {
            color: #3085d6;
        }

        [data-bs-theme="dark"] .card-title-text {
            color: #e0e0e0;
        }

        [data-bs-theme="dark"] .premium-product-card:hover .card-title-text {
            color: #5ba8f5;
        }

        /* ===== CARD FOOTER ===== */
        .card-footer-actions {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            margin-top: 1.25rem;
            padding-top: 1.25rem;
            border-top: 1px solid rgba(0,0,0,0.06);
        }

        [data-bs-theme="dark"] .card-footer-actions {
            border-top-color: rgba(255,255,255,0.06);
        }

        .price-label {
            font-size: 0.68rem;
            font-weight: 800;
            text-transform: uppercase;
            color: #999;
            letter-spacing: 0.8px;
            margin-bottom: 3px;
        }

        .price-value {
            font-size: 1.45rem;
            font-weight: 900;
            color: #3085d6;
            white-space: nowrap;
            line-height: 1.2;
        }

        .price-value .currency {
            font-size: 0.8rem;
            font-weight: 700;
            vertical-align: super;
            margin-left: 2px;
        }

        /* ===== PREMIUM BUTTON ===== */
        .btn-premium-view {
            background: linear-gradient(135deg, #2e86de, #3085d6) !important;
            border: none !important;
            color: #fff !important;
            font-weight: 800 !important;
            border-radius: 14px !important;
            padding: 12px 26px !important;
            font-size: 0.88rem !important;
            letter-spacing: 0.3px;
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
            box-shadow: 0 4px 18px rgba(48, 133, 214, 0.3) !important;
            position: relative;
            overflow: hidden;
            white-space: nowrap;
            display: inline-flex !important;
            align-items: center !important;
        }

        .btn-premium-view::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255,255,255,0.2);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.5s, height 0.5s;
        }

        .btn-premium-view:hover::after {
            width: 250px;
            height: 250px;
        }

        .btn-premium-view:hover {
            transform: translateY(-3px) scale(1.06) !important;
            box-shadow: 0 10px 30px rgba(48, 133, 214, 0.5) !important;
        }

        .btn-premium-view:active {
            transform: translateY(0) scale(0.97) !important;
            box-shadow: 0 2px 8px rgba(48, 133, 214, 0.3) !important;
        }

        /* ===== WALLET BUTTON ===== */
        .wallet-btn {
            background: linear-gradient(135deg, #00b894, #00a885) !important;
            border: none !important;
            color: #fff !important;
            font-weight: 800 !important;
            border-radius: 14px !important;
            padding: 12px 24px !important;
            font-size: 0.9rem !important;
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
            box-shadow: 0 4px 18px rgba(0, 184, 148, 0.3) !important;
            display: inline-flex !important;
            align-items: center !important;
            letter-spacing: 0.3px;
        }

        .wallet-btn:hover {
            transform: translateY(-3px) scale(1.04) !important;
            box-shadow: 0 8px 25px rgba(0, 184, 148, 0.45) !important;
        }

        .wallet-btn:active {
            transform: translateY(0) scale(0.97) !important;
        }

        /* ===== STAGGER ANIMATION ===== */
        .stagger-in {
            opacity: 0;
            transform: translateY(40px);
            animation: staggerFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }

        @keyframes staggerFadeIn {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* ===== SECTION DIVIDER ===== */
        .section-divider {
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(0,0,0,0.08), transparent);
            margin: 2.5rem 0;
        }

        [data-bs-theme="dark"] .section-divider {
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
        }

        /* ===== STAT BAR — Trang trí thêm cho PC ===== */
        .stat-bar {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 3rem;
            margin-bottom: 2.5rem;
            padding: 1.5rem 2rem;
            background: #ffffff;
            border-radius: 18px;
            border: 1px solid rgba(0,0,0,0.04);
            box-shadow: 0 2px 12px rgba(0,0,0,0.03);
        }

        [data-bs-theme="dark"] .stat-bar {
            background: #1e1e2d;
            border-color: rgba(255,255,255,0.05);
            box-shadow: 0 2px 12px rgba(0,0,0,0.2);
        }

        .stat-item {
            text-align: center;
        }

        .stat-number {
            font-size: 1.75rem;
            font-weight: 900;
            color: #3085d6;
            line-height: 1.2;
        }

        .stat-label {
            font-size: 0.78rem;
            font-weight: 600;
            color: #999;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            margin-top: 2px;
        }

        .stat-divider {
            width: 1px;
            height: 40px;
            background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.1), transparent);
        }

        [data-bs-theme="dark"] .stat-divider {
            background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.08), transparent);
        }

        /* ===== EMPTY STATE ===== */
        .empty-state-icon {
            font-size: 4rem;
            opacity: 0.35;
            color: #999;
        }

        /* ===== SCROLLBAR ===== */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #f8f9fa; }
        ::-webkit-scrollbar-thumb {
            background: linear-gradient(135deg, #667eea, #764ba2);
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(135deg, #764ba2, #667eea);
        }

        /* ===== BREADCRUMB ===== */
        .breadcrumb-item a { transition: color 0.3s ease; }
        .breadcrumb-item a:hover { color: #3085d6 !important; }

        /* ===== REDUCED MOTION ===== */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
            .stagger-in { opacity: 1; transform: none; }
        }

        /* ===== RIPPLE KEYFRAMES ===== */
        @keyframes rippleEffect {
            to { transform: scale(2.5); opacity: 0; }
        }
    </style>
</head>

<body id="kt_app_body" data-kt-app-layout="light-sidebar" data-kt-app-header-fixed="true"
    data-kt-app-sidebar-enabled="true" data-kt-app-sidebar-fixed="true" data-kt-app-sidebar-hoverable="true"
    data-kt-app-sidebar-push-header="true" data-kt-app-sidebar-push-toolbar="true"
    data-kt-app-sidebar-push-footer="true" data-kt-app-toolbar-enabled="true" class="app-default">

    <script>var defaultThemeMode = "light"; var themeMode; if (document.documentElement) { if (document.documentElement.hasAttribute("data-bs-theme-mode")) { themeMode = document.documentElement.getAttribute("data-bs-theme-mode"); } else { if (localStorage.getItem("data-bs-theme") !== null) { themeMode = localStorage.getItem("data-bs-theme"); } else { themeMode = defaultThemeMode; } } if (themeMode === "system") { themeMode = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; } document.documentElement.setAttribute("data-bs-theme", themeMode); }</script>

    <div class="d-flex flex-column flex-root app-root" id="kt_app_root">
        <div class="app-page flex-column flex-column-fluid" id="kt_app_page">

            <div class="app-wrapper flex-column flex-row-fluid" id="kt_app_wrapper">
                <?php require $_SERVER['DOCUMENT_ROOT'].'/hethong/sider.php';?>
            </div>

            <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
                <div class="d-flex flex-column flex-column-fluid">

                    <!-- TOOLBAR -->
                    <div id="kt_app_toolbar" class="app-toolbar py-4 py-lg-6">
                        <div id="kt_app_toolbar_container" class="app-container container-fluid d-flex flex-stack">
                            <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                                <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0" style="font-size: 1.5rem;">
                                    <i class="fa-solid fa-shapes text-primary fs-4 mb-1"></i> Kho Giao Diện Website
                                </h1>
                                <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                                    <li class="breadcrumb-item text-muted"><a href="/" class="text-muted text-hover-primary">Home</a></li>
                                    <li class="breadcrumb-item"><span class="bullet bg-gray-400 w-5px h-2px"></span></li>
                                    <li class="breadcrumb-item text-muted">Bảng Tính</li>
                                </ul>
                            </div>
                            <div class="d-flex align-items-center gap-2">
                                <a href="#" class="wallet-btn" data-bs-toggle="modal" data-bs-target="#kt_modal_create_app">
                                    <i class="fa-solid fa-wallet me-2"></i> <?=tien($user['money']);?>đ
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- MAIN CONTENT -->
                    <div id="kt_app_content" class="app-content flex-column-fluid">
                        <div class="container-xxl" id="kt_content_container">

                            <!-- HERO BANNER -->
                            <div class="hero-bg">
                                <!-- Glow Orbs -->
                                <div class="glow-orb orb-1"></div>
                                <div class="glow-orb orb-2"></div>
                                <div class="glow-orb orb-3"></div>

                                <!-- Particles -->
                                <div class="particle"></div>
                                <div class="particle"></div>
                                <div class="particle"></div>
                                <div class="particle"></div>
                                <div class="particle"></div>
                                <div class="particle"></div>
                                <div class="particle"></div>

                                <div class="hero-content">
                                    <h2 class="hero-title">Khám Phá Kho Giao Diện</h2>
                                    <p class="hero-subtitle">Hàng trăm mẫu website đẹp mắt, hiện đại và chuyên nghiệp</p>
                                </div>
                            </div>

                            <!-- STAT BAR -->
                            <?php
                            $count_result = mysqli_query($ketnoi, "SELECT COUNT(*) as total FROM `list_mau_web` WHERE `status`='ON'");
                            $count_row = mysqli_fetch_assoc($count_result);
                            $total_products = $count_row['total'];
                            ?>
                            <div class="stat-bar">
                                <div class="stat-item">
                                    <div class="stat-number"><?=$total_products;?></div>
                                    <div class="stat-label">Mẫu giao diện</div>
                                </div>
                                <div class="stat-divider"></div>
                                <div class="stat-item">
                                    <div class="stat-number">24/7</div>
                                    <div class="stat-label">Hỗ trợ kỹ thuật</div>
                                </div>
                                <div class="stat-divider"></div>
                                <div class="stat-item">
                                    <div class="stat-number">100%</div>
                                    <div class="stat-label">Bảo hành trọn đời</div>
                                </div>
                                <div class="stat-divider"></div>
                                <div class="stat-item">
                                    <div class="stat-number">3s</div>
                                    <div class="stat-label">Tốc độ tải trang</div>
                                </div>
                            </div>

                            <!-- DANH SÁCH MẪU WEB -->
                            <div class="product-grid" id="product-grid">
                                <?php
                                    $delay = 0;
                                    $result = mysqli_query($ketnoi,"SELECT * FROM `list_mau_web` WHERE `status`='ON' ORDER BY `id` DESC ");
                                    while($row = mysqli_fetch_assoc($result)) { 
                                    $delay += 0.07;
                                    if ($delay > 0.7) $delay = 0.07;
                                ?>

                                    <div class="stagger-in" style="animation-delay: <?=$delay;?>s;">
                                        <div class="premium-product-card h-100 d-flex flex-column justify-content-between">
                                            <div>
                                                <!-- Ảnh sản phẩm -->
                                                <div class="product-img-wrapper mb-4">
                                                    <img src="<?=$row['img'];?>" alt="<?=htmlspecialchars($row['title']);?>" loading="lazy" />
                                                    <div class="img-overlay">
                                                        <span class="img-overlay-text">
                                                            <i class="fa-solid fa-eye me-2"></i>Xem trước
                                                        </span>
                                                    </div>
                                                    <span class="product-badge">HOT</span>
                                                </div>

                                                <!-- Tiêu đề -->
                                                <h3 class="card-title-text mb-0">
                                                    <?=$row['title'];?>
                                                </h3>
                                            </div>

                                            <!-- Giá + Nút -->
                                            <div class="card-footer-actions">
                                                <div>
                                                    <div class="price-label">Chi phí tạo</div>
                                                    <div class="price-value">
                                                        <?=tien($row['gia']);?><span class="currency">đ</span>
                                                    </div>
                                                </div>

                                                <a href="/tao-web/<?=$row['id'];?>" class="btn btn-sm btn-premium-view">
                                                    <i class="fa-solid fa-rocket me-2" style="font-size: 0.8rem;"></i>Khám Phá
                                                </a>
                                            </div>
                                        </div>
                                    </div>

                                <?php } ?>
                            </div>

                            <div class="section-divider"></div>

                            <!-- Empty state -->
                            <?php if ($total_products == 0) { ?>
                            <div class="text-center py-5">
                                <div class="mb-4">
                                    <i class="fa-solid fa-box-open empty-state-icon"></i>
                                </div>
                                <h3 class="text-muted fw-bold mb-2">Chưa có mẫu website nào</h3>
                                <p class="text-muted">Vui lòng quay lại sau để khám phá các mẫu mới nhất!</p>
                            </div>
                            <?php } ?>

                        </div>
                    </div>

                </div>
                <!--begin::Footer-->
                <?php require $_SERVER['DOCUMENT_ROOT'].'/hethong/foot.php';?>
                <!--end::Footer-->
            </div>
        </div>
    </div>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        /* === Intersection Observer — Chạy animation khi card vào viewport === */
        if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.style.animationPlayState = 'running';
                        observer.unobserve(entry.target);
                    }
                });
            }, { root: null, rootMargin: '60px 0px', threshold: 0.05 });

            document.querySelectorAll('.stagger-in').forEach(el => {
                el.style.animationPlayState = 'paused';
                observer.observe(el);
            });
        } else {
            document.querySelectorAll('.stagger-in').forEach(el => {
                el.style.opacity = '1';
                el.style.transform = 'none';
            });
        }

        /* === Ripple effect cho nút === */
        document.querySelectorAll('.btn-premium-view, .wallet-btn').forEach(btn => {
            btn.addEventListener('click', function(e) {
                const ripple = document.createElement('span');
                const rect = this.getBoundingClientRect();
                const size = Math.max(rect.width, rect.height);
                const x = e.clientX - rect.left - size / 2;
                const y = e.clientY - rect.top - size / 2;

                ripple.style.cssText = `
                    position: absolute;
                    width: ${size}px;
                    height: ${size}px;
                    left: ${x}px;
                    top: ${y}px;
                    background: rgba(255,255,255,0.35);
                    border-radius: 50%;
                    transform: scale(0);
                    animation: rippleEffect 0.55s ease-out;
                    pointer-events: none;
                    z-index: 10;
                `;

                this.appendChild(ripple);
                setTimeout(() => ripple.remove(), 550);
            });
        });

        /* === Tilt nhẹ khi hover card (PC only) === */
        document.querySelectorAll('.premium-product-card').forEach(card => {
            card.addEventListener('mousemove', function(e) {
                const rect = this.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;
                const centerX = rect.width / 2;
                const centerY = rect.height / 2;
                const rotateX = ((y - centerY) / centerY) * -3;
                const rotateY = ((x - centerX) / centerX) * 3;

                this.style.transform = `translateY(-14px) scale(1.025) perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
            });

            card.addEventListener('mouseleave', function() {
                this.style.transform = '';
            });
        });
    });
    </script>

</body>
</html>