Spaces:

bep40
/

Supersale

No application file

App Files Files Community

bep40 commited on 6 days ago

Commit

3a613d7

verified ·

1 Parent(s): 1a8d96e

Create index.html

Browse files

Files changed (1) hide show

index.html +1311 -0

index.html ADDED Viewed

	@@ -0,0 +1,1311 @@

+<!DOCTYPE html>
+<html lang="vi">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TRUMP SUPER SALE - Tiết kiệm lên đến 35% khi đặt hàng nhà bếp</title>
+  <meta
+    property="og:image"
+    content="https://i.ibb.co/RTKmXw72/IMG-20250408-221429.jpg" />
+    <meta
+    property="og:description"
+    content="Các sản phẩm thiết kế thi công nội thất nhà bếp, thiết bị phụ kiện bếp Malloca, Eurogold, Grob - Khóa vân tay Demax, Kassler, Hubert" />
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Playfair+Display:wght@700&display=swap');
+        body {
+            font-family: 'Montserrat', sans-serif;
+            background-color: #f8f9fa;
+        }
+        .sale-tag {
+            clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
+        }
+        .floating-bubble {
+            position: fixed;
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: white;
+            font-size: 28px;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+            cursor: pointer;
+            transition: all 0.3s ease;
+            z-index: 100;
+        }
+        .floating-bubble:hover {
+            transform: scale(1.1);
+        }
+        .product-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
+        }
+        .video-container {
+            position: relative;
+            padding-bottom: 133.33%; /* 4:3 Aspect Ratio */
+            height: 0;
+            overflow: hidden;
+        }
+        .video-container iframe {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+        .gradient-text {
+            background: linear-gradient(45deg, #FF7B25, #4CAF50);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+        }
+        .discount-badge {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            background: #ff5722;
+            color: white;
+            padding: 5px 10px;
+            border-radius: 20px;
+            font-weight: bold;
+            font-size: 14px;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+        }
+        .pulse {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+            100% { transform: scale(1); }
+        }
+    </style>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&display=swap');
+        body {
+            font-family: 'Be Vietnam Pro', sans-serif;
+        }
+        .pdf-viewer-container {
+            display: none;
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            z-index: 1000;
+            width: 80%;
+            max-width: 850px;
+            background: white;
+            box-shadow: 0 10px 50px rgba(0,0,0,0.3);
+            border-radius: 12px;
+            overflow: hidden;
+            border: 1px solid #e2e8f0;
+            max-height: 95vh;
+        }
+        .pdf-iframe {
+            width: 100%;
+            height: 70vh;
+            border: none;
+            display: block;
+        }
+        .overlay {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,0.8);
+            z-index: 999;
+            backdrop-filter: blur(5px);
+        }
+        .close-btn {
+            position: absolute;
+            top: 15px;
+            right: 15px;
+            background: #ef4444;
+            color: white;
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            z-index: 1001;
+            border: 2px solid white;
+            transition: all 0.2s;
+        }
+        .close-btn:hover {
+            background: #dc2626;
+            transform: scale(1.1);
+        }
+        .brand-tag {
+            position: absolute;
+            top: 15px;
+            left: 15px;
+            padding: 4px 12px;
+            border-radius: 20px;
+            font-size: 12px;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+        .catalogue-card {
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            perspective: 1000px;
+        }
+        .catalogue-card:hover {
+            transform: translateY(-8px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+        .card-inner {
+            position: relative;
+            transform-style: preserve-3d;
+            transition: transform 0.6s;
+        }
+        .catalogue-card:hover .card-inner {
+            transform: rotateY(5deg) rotateX(2deg);
+        }
+        .filter-btn.active {
+            background-color: #2563eb;
+            color: white;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+        }
+        .header-gradient {
+            background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
+        }
+        /* Animation for cards */
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        .animate-card {
+            animation: fadeInUp 0.6s ease-out forwards;
+        }
+        /* Delays for staggered animation */
+        .delay-100 { animation-delay: 0.1s; }
+        .delay-200 { animation-delay: 0.2s; }
+        .delay-300 { animation-delay: 0.3s; }
+        .delay-400 { animation-delay: 0.4s; }
+        .delay-500 { animation-delay: 0.5s; }
+        /* PDF controls */
+        .pdf-controls {
+            position: absolute;
+            top: 15px;
+            right: 60px;
+            display: flex;
+            gap: 10px;
+            z-index: 1001;
+        }
+        .pdf-control-btn {
+            background: white;
+            color: #1e3a8a;
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            border: 2px solid #e2e8f0;
+            transition: all 0.2s;
+            font-size: 14px;
+        }
+        .pdf-control-btn:hover {
+            background: #2563eb;
+            color: white;
+            transform: scale(1.05);
+        }
+        #search-form {
+            position: absolute;
+            top: 15px;
+            left: 15px;
+            right: 150px;
+            z-index: 1001;
+            display: none;
+        }
+        #search-input {
+            width: 100%;
+            padding: 8px 15px;
+            border-radius: 20px;
+            border: none;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        #search-results {
+            position: absolute;
+            top: 65px;
+            left: 15px;
+            background: white;
+            padding: 10px;
+            border-radius: 8px;
+            box-shadow: 0 3px 15px rgba(0,0,0,0.2);
+            z-index: 1001;
+            display: none;
+            max-height: 300px;
+            overflow-y: auto;
+            width: 300px;
+        }
+        .search-result-item {
+            padding: 8px;
+            border-bottom: 1px solid #eee;
+            cursor: pointer;
+        }
+        .search-result-item:hover {
+            background-color: #f5f5f5;
+        }
+        #pdf-progress {
+            position: absolute;
+            bottom: 10px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(0,0,0,0.7);
+            color: white;
+            padding: 5px 15px;
+            border-radius: 20px;
+            font-size: 14px;
+            z-index: 1001;
+        }
+    </style>
+</head>
+<body class="min-h-screen">
+<script src="https://sf-cdn.coze.com/obj/unpkg-va/flow-platform/chat-app-sdk/1.2.0-beta.6/libs/oversea/index.js"></script>
+<script>
+    const cozeWebSDK = new CozeWebSDK.WebChatClient({
+  config: {
+    botId: '7467927051141103624',
+    isIframe: false,
+  },
+  auth:  {
+    type: 'token',
+    token: 'pat_2TMDFg89bIpvSgPtEkQf7d9LlaWr475szH4k9BxeJKtYsFnEcnaj4xPFHJevxH8A',
+    onRefreshToken: async () => 'pat_2TMDFg89bIpvSgPtEkQf7d9LlaWr475szH4k9BxeJKtYsFnEcnaj4xPFHJevxH8A',
+  },
+      userInfo: {
+      id: '123',
+      url: 'https://i.ibb.co/TxTdsZhG/IMG-20250410-215405-200-x-200-pixel.png',
+      nickname: 'Khách hàng BẾP 4.0',
+    },
+    ui: {
+      base: {
+          icon: 'https://i.ibb.co/fGqwxw2z/IMG-20250410-222625-500-x-500-pixel.png',
+          layout: 'pc',
+          zIndex: 900,
+      },
+      asstBtn: {
+          isNeed: true,
+      },
+      header: {
+          isShow: true,
+          isNeedClose: true,
+       },
+      footer: {
+        isShow: true,
+        expressionText: 'Powered by {{name}}',
+        linkvars: {
+          name: {
+            text: 'BẾP 4.0',
+            link: 'https://zalo.me/bep40vn'
+          },
+        },
+      },
+      chatBot: {
+        title: "CHATBOT AI | BẾP 4.0",
+        uploadable: true,
+        width: 350,
+        height: 400,
+        el: undefined,
+        onHide: () => {
+         //
+        },
+        onShow: () => {
+          //Đóng chatbot AI
+        },
+      },
+    },
+  });
+</script>
+   <!-- Floating contact bubbles -->
+  <a href="https://drive.google.com/drive/folders/1jYr0XS7FzFjI0m87chg9kVDcJreeHCy7" class="floating-bubble bg-blue-600 bottom-44 right-6" style="animation-delay: 0.1s">
+        <i class="fa-solid fa-book"></i>
+  </a>
+    <a href="https://www.facebook.com/share/1EW4Zet7gB/" class="floating-bubble bg-blue-600 bottom-32 right-6" style="animation-delay: 0.1s">
+        <i class="fab fa-facebook-f"></i>
+    </a>
+    <a href="https://tiktok.com/@bep40.sale" class="floating-bubble bg-cyan-500 bottom-20 right-6" style="animation-delay: 0.2s">
+        <i class="fab fa-tiktok"></i>
+    </a>
+    <a href="https://zalo.me/bep40vn" class="floating-bubble bg-cyan-500 bottom-56 right-6" style="animation-delay: 0.2s" target="_blanl">
+        <img src="https://caohungphat.com/wp-content/uploads/2019/07/icon_zalomessage.png" width="50" alt="">
+      </a>
+    <!-- Header -->
+    <header class="bg-white shadow-md">
+        <div class="container mx-auto px-4 py-6 flex justify-between items-center">
+            <h1 class="text-4xl font-bold gradient-text pulse">TRUMP SUPER SALE</h1>
+            <div class="bg-orange-500 text-white font-bold px-6 py-2 rounded-full sale-tag">
+                <span class="text-xl">Tiết kiệm đến <span class="text-3xl">35%</span></span>
+            </div>
+        </div>
+    </header>
+    <!-- Hero Section -->
+    <section class="bg-gradient-to-r from-green-50 to-orange-50 py-16">
+        <div class="container mx-auto px-4 text-center">
+            <h2 class="text-3xl md:text-5xl font-bold text-gray-800 mb-6">CHƯƠNG TRÌNH KHUYẾN MÃI ĐẶC BIỆT</h2>
+            <p class="text-xl md:text-2xl text-gray-700 mb-8">Tiết kiệm cực lớn khi đặt hàng nhà bếp trọn gói thiết bị phụ kiện cao cấp</p>
+            <!-- Video Section -->
+    <section class="py-16 bg-white">
+        <div class="container mx-auto px-4">
+            <h2 class="text-2xl font-bold text-center mb-12 text-gray-800">VIDEO CHƯƠNG TRÌNH</h2>
+            <div class="max-w-3xl mx-auto">
+                <div class="sp-embed-player" data-id="cTfI2Bnj00r"><script src="https://go.screenpal.com/player/appearance/cTfI2Bnj00r"></script><iframe width="100%" height="100%" style="border:0;" scrolling="no" src="https://go.screenpal.com/player/cTfI2Bnj00r?width=100%&height=100%&ff=1&title=0" allowfullscreen="true"></iframe></div>   <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
+                <div class="bg-white p-6 rounded-lg shadow-lg border-t-4 border-red-500 hover:shadow-xl transition duration-300">
+                    <h3 class="text-2xl font-bold text-red-600 mb-4">THIẾT KẾ NHÀ BẾP BẰNG AI MIỄN PHÍ & THI CÔNG NHÀ BẾP</h3>
+                    <p class="text-lg mb-4">Giảm tối đa <span class="text-3xl font-bold text-orange-500">12%</span></p>
+                    <img src="https://i.ibb.co/5hgHBj2j/image-2025-04-09-T091739-706.webp" alt="Malloca Kitchen" class="w-full h-48 object-cover rounded">
+                </div>
+            <div class="max-w-3xl mx-auto">
+                <div class="sp-embed-player" data-id="cTfI2Bnj00r"><script src="https://go.screenpal.com/player/appearance/cTfI2Bnj00r"></script><iframe width="100%" height="100%" style="border:0;" scrolling="no" src="https://go.screenpal.com/player/cTfI2Bnj00r?width=100%&height=100%&ff=1&title=0" allowfullscreen="true"></iframe></div>   <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
+                <div class="bg-white p-6 rounded-lg shadow-lg border-t-4 border-green-500 hover:shadow-xl transition duration-300">
+                    <h3 class="text-2xl font-bold text-green-600 mb-4">THIẾT BỊ BẾP MALLOCA</h3>
+                    <p class="text-lg mb-4">Giảm tối đa <span class="text-3xl font-bold text-orange-500">30%</span></p>
+                    <img src="https://i.ibb.co/0wk52D1/20250327-102047.jpgat&fit=crop&w=1470&q=80" alt="Malloca Kitchen" class="w-full h-48 object-cover rounded">
+                </div>
+                <div class="bg-white p-6 rounded-lg shadow-lg border-t-4 border-orange-500 hover:shadow-xl transition duration-300">
+                    <h3 class="text-2xl font-bold text-orange-600 mb-4">PHỤ KIỆN ÂM TỦ THÔNG MINH</h3>
+                    <p class="text-lg mb-4">Eurogold, Grob giảm tới <span class="text-3xl font-bold text-green-500">35%</span></p>
+                    <img src="https://i.ibb.co/PG8knTmH/T-i-sao-Ph-ki-n-t-b-p-h-p-kim-nh-m-ph-Nano-l-s-n-ph-m-hot-nh-t-n-m-2023-V-KLmkiftf-E-exported-23073.jpgfit=crop&w=1470&q=80" alt="Smart Cabinet" class="w-full h-48 object-cover rounded">
+                </div>
+                <div class="bg-white p-6 rounded-lg shadow-lg border-t-4 border-blue-500 hover:shadow-xl transition duration-300">
+                    <h3 class="text-2xl font-bold text-blue-600 mb-4">KHÓA VÂN TAY CAO CẤP</h3>
+                    <p class="text-lg mb-4">Kassler, Demax, Hubert giảm <span class="text-3xl font-bold text-orange-500">35%</span></p>
+                    <img src="https://i.ibb.co/QFjWS4FM/Kh-a-tay-g-t-m-n-h-nh-chu-ng-Demax-SL-C66-GS-demax-khoademax-khoathongminh-J12k-Ydi-NVA-exported-116.jpg" alt="Fingerprint Lock" class="w-full h-48 object-cover rounded">
+                </div>
+            </div>
+            <div class="bg-orange-100 border-l-4 border-orange-500 p-4 max-w-3xl mx-auto mb-8">
+                <div class="flex">
+                    <div class="flex-shrink-0">
+                        <i class="fas fa-exclamation-circle text-orange-500 text-2xl mr-3 mt-1"></i>
+                    </div>
+                    <div><img src="https://i.ibb.co/dwpVcS8H/Flyerwiz-1743945445436.png" alt="Fingerprint Lock" width="100%" height="100%">
+                        <p class="text-xl font-bold text-orange-700">Thời gian ưu đãi có hạn</p>
+                        <p class="text-gray-700">Chương trình chỉ áp dụng đến hết ngày <span class="font-bold text-orange-600">31/05/2025</span>. Nhanh tay đặt hàng ngay!</p>
+                    </div>
+                </div>
+            </div>
+            <a href="#products" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-8 rounded-full inline-flex items-center transition duration-300">
+                <span>XEM SẢN PHẨM THỰC TẾ MỚI NHẤT</span>
+                <i class="fas fa-arrow-down ml-2"></i>
+            </a>
+        </div>
+    </section>
+<body class="bg-gray-50">
+    <!-- Header -->
+    <header class="header-gradient text-white shadow-xl">
+        <div class="container mx-auto px-4 py-8">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="mb-6 md:mb-0 text-center md:text-left">
+                    <h1 class="text-3xl md:text-4xl font-bold">BẾP 4.0</h1>
+                    <p class="mt-2 text-blue-100 font-medium">Bộ sưu tập catalogue thiết kế 3D nội thất nhà bếp, thiết bị nhà bếp & khóa thông minh</p>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <div class="relative bg-white/20 rounded-full p-1">
+                        <input type="text" placeholder="Tìm kiếm catalogue..."
+                            class="px-4 py-2 rounded-full bg-transparent text-white placeholder-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-300 w-64">
+                        <i class="fas fa-search absolute right-4 top-3 text-blue-100"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+    <!-- Main Content -->
+    <main class="container mx-auto px-4 py-8">
+        <!-- Brand Filter -->
+        <div class="mb-8 bg-white rounded-2xl shadow-md p-6 sticky top-0 z-50">
+            <h2 class="text-xl font-semibold text-gray-800 mb-4">Lọc theo thương hiệu</h2>
+            <div class="flex flex-wrap gap-2">
+                <button class="filter-btn px-4 py-2 rounded-full border border-gray-200 hover:bg-blue-50 transition-colors active" data-brand="all">
+                    Tất cả
+                </button>
+              <button class="filter-btn px-4 py-2 rounded-full border border-gray-200 hover:bg-orange-50 transition-colors" data-brand="nhabep40">
+                    <i class="fas fa-fire mr-2 text-orange-500"></i> Nhà Bếp 4.0
+              </button>
+                <button class="filter-btn px-4 py-2 rounded-full border border-gray-200 hover:bg-orange-50 transition-colors" data-brand="malloca">
+                    <i class="fas fa-fire mr-2 text-orange-500"></i> Malloca
+                </button>
+                <button class="filter-btn px-4 py-2 rounded-full border border-gray-200 hover:bg-red-50 transition-colors" data-brand="eurogold">
+                    <i class="fas fa-crown mr-2 text-red-500"></i> Eurogold
+                </button>
+                <button class="filter-btn px-4 py-2 rounded-full border border-gray-200 hover:bg-yellow-50 transition-colors" data-brand="grob">
+                    <i class="fas fa-utensils mr-2 text-yellow-500"></i> Grob
+                </button>
+                <button class="filter-btn px-4 py-2 rounded-full border border-gray-200 hover:bg-purple-50 transition-colors" data-brand="kassler">
+                    <i class="fas fa-fingerprint mr-2 text-purple-500"></i> Kassler
+                </button>
+                <button class="filter-btn px-4 py-2 rounded-full border border-gray-200 hover:bg-green-50 transition-colors" data-brand="demax">
+                    <i class="fas fa-bolt mr-2 text-green-500"></i> Demax
+                </button>
+                <button class="filter-btn px-4 py-2 rounded-full border border-gray-200 hover:bg-indigo-50 transition-colors" data-brand="hubert">
+                    <i class="fas fa-home mr-2 text-indigo-500"></i> Hubert
+                </button>
+            </div>
+        </div>
+        <!-- Catalogue Grid -->
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+          <!-- Nhabep40 -->
+            <div class="catalogue-card bg-white rounded-xl shadow-sm overflow-hidden animate-card delay-100" data-brand="nhabep40">
+                <div class="card-inner">
+                    <span class="brand-tag bg-orange-500 text-white">Catalogue BEP4.0</span>
+                    <div class="h-48 bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center">
+                        <img src="https://i.ibb.co/TxTdsZhG/IMG-20250410-215405-200-x-200-pixel.png" alt="Malloca" class="h-24 object-contain">
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-semibold text-gray-800 mb-2">Catalogue BẾP 4.0 2025</h3>
+                        <p class="text-gray-600 mb-4">Ứng dụng AI vào thiết kế và 4.0 vào thi công nhà bếp</p>
+                        <button class="view-pdf-btn w-full px-4 py-2 bg-orange-500 hover:bg-orange-600 text-white rounded-lg transition-colors"
+                                data-title="Catalogue BẾP 4.0 2025"
+                                data-pdf="https://drive.google.com/drive/folders/1jYr0XS7FzFjI0m87chg9kVDcJreeHCy7">
+                            <i class="far fa-file-pdf mr-2"></i> Xem catalogue
+                        </button>
+                    </div>
+                </div>
+            </div>
+          <!-- Malloca 1 -->
+            <div class="catalogue-card bg-white rounded-xl shadow-sm overflow-hidden animate-card delay-100" data-brand="malloca">
+                <div class="card-inner">
+                    <span class="brand-tag bg-orange-500 text-white">Malloca</span>
+                    <div class="h-48 bg-gradient-to-br from-orange-400 to-orange-600 flex items-center justify-center">
+                        <img src="https://i.ibb.co/ks8cT4LL/IMG-20250405-210523-666.jpg" alt="Malloca" class="h-24 object-contain">
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-semibold text-gray-800 mb-2">Catalogue Malloca 2025</h3>
+                        <p class="text-gray-600 mb-4">Công nghệ cảm ứng tiên tiến với thiết kế sang trọng</p>
+                        <button class="view-pdf-btn w-full px-4 py-2 bg-orange-500 hover:bg-orange-600 text-white rounded-lg transition-colors"
+                                data-title="Catalogue Malloca 2025"
+                                data-pdf="https://drive.google.com/file/d/1UqO_2KbGuMIDu8yokDr1neTm5x67gKiW/preview">
+                            <i class="far fa-file-pdf mr-2"></i> Xem catalogue
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <!-- Eurogold -->
+            <div class="catalogue-card bg-white rounded-xl shadow-sm overflow-hidden animate-card delay-200" data-brand="eurogold">
+                <div class="card-inner">
+                    <span class="brand-tag bg-red-500 text-white">Eurogold</span>
+                    <div class="h-48 bg-gradient-to-br from-red-400 to-red-600 flex items-center justify-center">
+                        <img src="https://i.ibb.co/xq9PmNwb/IMG-20250405-210635-338.jpg" alt="Eurogold" class="h-20 object-contain">
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-semibold text-gray-800 mb-2">Phụ kiện âm tủ Eurogold 2025</h3>
+                        <p class="text-gray-600 mb-4">Thiết kế châu Âu sang trọng với công nghệ hiện đại</p>
+                        <button class="view-pdf-btn w-full px-4 py-2 bg-red-500 hover:bg-red-600 text-white rounded-lg transition-colors"
+                                data-title="Phụ kiện âm tủ Eurogold 2025"
+                                data-pdf="https://drive.google.com/file/d/17YnoBDFExR77S2oZuUDgMsUrs3O7aylo/preview">
+                            <i class="far fa-file-pdf mr-2"></i> Xem catalogue
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <!-- Grob -->
+            <div class="catalogue-card bg-white rounded-xl shadow-sm overflow-hidden animate-card delay-300" data-brand="grob">
+                <div class="card-inner">
+                    <span class="brand-tag bg-yellow-500 text-white">Phụ kiện âm tủ Grob 2025</span>
+                    <div class="h-48 bg-gradient-to-br from-yellow-400 to-yellow-600 flex items-center justify-center">
+                        <img src="https://i.ibb.co/7N2sPRqZ/IMG-20250405-210706-289.jpg" alt="Grob" class="h-16 object-contain">
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-semibold text-gray-800 mb-2">Phụ kiện âm tủ Grob 2025</h3>
+                        <p class="text-gray-600 mb-4">Công nghệ tiên tiến cho căn bếp chuyên nghiệp</p>
+                        <button class="view-pdf-btn w-full px-4 py-2 bg-yellow-500 hover:bg-yellow-600 text-white rounded-lg transition-colors"
+                                data-title="Phụ kiện âm tủ Grob 2025"
+                                data-pdf="https://drive.google.com/file/d/1cZT8Zjxe5qBkGisB8i6MOu0UaCFa37jI/preview">
+                            <i class="far fa-file-pdf mr-2"></i> Xem catalogue
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <!-- Kassler -->
+            <div class="catalogue-card bg-white rounded-xl shadow-sm overflow-hidden animate-card delay-400" data-brand="kassler">
+                <div class="card-inner">
+                    <span class="brand-tag bg-purple-500 text-white">Khóa vân tay Kassler</span>
+                    <div class="h-48 bg-gradient-to-br from-purple-400 to-purple-600 flex items-center justify-center">
+                        <img src="https://i.ibb.co/ymvC1KTr/IMG-20250405-210744-501.jpg" alt="Kassler" class="h-20 object-contain">
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-semibold text-gray-800 mb-2">Khóa vân tay Kassler</h3>
+                        <p class="text-gray-600 mb-4">Công nghệ bảo mật vân tay tiên tiến nhất</p>
+                        <button class="view-pdf-btn w-full px-4 py-2 bg-purple-500 hover:bg-purple-600 text-white rounded-lg transition-colors"
+                                data-title="Khóa vân tay Kassler"
+                                data-pdf="https://drive.google.com/file/d/1TULmQBh-T9DKM26pP1l8VQsXblHoNRsX/preview">
+                            <i class="far fa-file-pdf mr-2"></i> Xem catalogue
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <!-- Demax -->
+            <div class="catalogue-card bg-white rounded-xl shadow-sm overflow-hidden animate-card delay-200" data-brand="demax">
+                <div class="card-inner">
+                    <span class="brand-tag bg-green-500 text-white">Khóa vân tay Demax</span>
+                    <div class="h-48 bg-gradient-to-br from-green-400 to-green-600 flex items-center justify-center">
+                        <img src="https://i.ibb.co/spkdvJsk/IMG-20250405-210820-066.jpg" alt="Demax" class="h-16 object-contain">
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-semibold text-gray-800 mb-2">Khóa vân tay Demax</h3>
+                        <p class="text-gray-600 mb-4">Thiết kế hiện đại với tính năng thông minh</p>
+                        <button class="view-pdf-btn w-full px-4 py-2 bg-green-500 hover:bg-green-600 text-white rounded-lg transition-colors"
+                                data-title="Khóa vân tay Demax"
+                                data-pdf="https://drive.google.com/file/d/1yk6pG5hLQ1haUrfyCS4gmVz_jGIO3sR5/preview">
+                            <i class="far fa-file-pdf mr-2"></i> Xem catalogue
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <!-- Hubert -->
+            <div class="catalogue-card bg-white rounded-xl shadow-sm overflow-hidden animate-card delay-500" data-brand="hubert">
+                <div class="card-inner">
+                    <span class="brand-tag bg-indigo-500 text-white">Khóa vân tay Hubert</span>
+                    <div class="h-48 bg-gradient-to-br from-indigo-400 to-indigo-600 flex items-center justify-center">
+                        <img src="https://i.ibb.co/TD6646ny/logo-hubert-1.png" alt="Hubert" class="h-20 object-contain">
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-semibold text-gray-800 mb-2">Khóa vân tay Hubert</h3>
+                        <p class="text-gray-600 mb-4">Kết nối thông minh, vận hành đơn giản</p>
+                        <button class="view-pdf-btn w-full px-4 py-2 bg-indigo-500 hover:bg-indigo-600 text-white rounded-lg transition-colors"
+                                data-title="Khóa vân tay Hubert"
+                                data-pdf="https://drive.google.com/file/d/1T8pWNoyBfbCiogk7spOT7GjuWK-HHHOf/preview">
+                            <i class="far fa-file-pdf mr-2"></i> Xem catalogue
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    <!-- Services Section -->
+    <section id="services" class="py-16 bg-white">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">DỊCH VỤ <span class="text-orange-600">4 CỰC</span></h2>
+                <p class="text-gray-600 max-w-2xl mx-auto">Bếp 4.0 cam kết mang đến chất lượng dịch vụ tốt nhất với 4 tiêu chí quan trọng</p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+                <!-- Service 1 -->
+                <div class="service-card bg-white rounded-xl p-8 text-center border border-gray-100">
+                    <div class="w-20 h-20 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-6">
+                        <i class="fas fa-percentage text-orange-600 text-3xl"></i>
+                    </div>
+                    <h3 class="text-2xl font-bold text-gray-800 mb-4">CHIẾT KHẤU <span class="text-orange-600">CỰC CAO</span></h3>
+                    <p class="text-gray-600">Chính sách giá cực kỳ cạnh tranh với chiết khấu lên đến 53% cho mọi đơn hàng, giúp tiết kiệm tối đa chi phí kinh doanh.</p>
+                </div>
+                <!-- Service 2 -->
+                <div class="service-card bg-white rounded-xl p-8 text-center border border-gray-100">
+                    <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
+                        <i class="fas fa-clipboard-check text-green-600 text-3xl"></i>
+                    </div>
+                    <h3 class="text-2xl font-bold text-gray-800 mb-4">LÊN ĐƠN <span class="text-green-600">CỰC CHUẨN</span></h3>
+                    <p class="text-gray-600">Quy trình lên đơn chuẩn chỉnh từ khâu tiếp nhận đến xác nhận, đảm bảo 100% đơn hàng chính xác, chi tiết, đầy đủ hình ảnh, thông số kỹ thuật theo yêu cầu.</p>
+                </div>
+                <!-- Service 3 -->
+                <div class="service-card bg-white rounded-xl p-8 text-center border border-gray-100">
+                    <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6">
+                        <i class="fas fa-rocket text-blue-600 text-3xl"></i>
+                    </div>
+                    <h3 class="text-2xl font-bold text-gray-800 mb-4">GIAO HÀNG <span class="text-blue-600">CỰC NHANH</span></h3>
+                    <p class="text-gray-600">Hệ thống logistics mạnh với thời gian giao hàng nhanh chóng chỉ trong vòng 24 giờ sau khi đặt hàng tại nội thành.</p>
+                </div>
+                <!-- Service 4 -->
+                <div class="service-card bg-white rounded-xl p-8 text-center border border-gray-100">
+                    <div class="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-6">
+                        <i class="fas fa-gem text-purple-600 text-3xl"></i>
+                    </div>
+                    <h3 class="text-2xl font-bold text-gray-800 mb-4">HẬU MÃI <span class="text-purple-600">CỰC TỐT</span></h3>
+                    <p class="text-gray-600">Với tiêu chí "Giữ bếp trong tâm - Trăm năm chăm sóc". Chính sách hậu mãi đặc biệt với ưu đãi định kỳ, hỗ trợ tận tâm và giải quyết mọi khiếu nại trong vòng 24h.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- PDF Viewer -->
+    <div class="overlay"></div>
+    <div class="pdf-viewer-container">
+        <div class="close-btn">
+            <i class="fas fa-times"></i>
+        </div>
+        <div class="pdf-controls">
+            <button class="pdf-control-btn" id="search-btn" title="Tìm kiếm trong PDF">
+                <i class="fas fa-search"></i>
+            </button>
+            <button class="pdf-control-btn" id="fullscreen-btn" title="Toàn màn hình">
+                <i class="fas fa-expand"></i>
+            </button>
+            <button class="pdf-control-btn" id="zoom-in-btn" title="Phóng to">
+                <i class="fas fa-search-plus"></i>
+            </button>
+            <button class="pdf-control-btn" id="zoom-out-btn" title="Thu nhỏ">
+                <i class="fas fa-search-minus"></i>
+            </button>
+        </div>
+        <form id="search-form">
+            <input type="text" id="search-input" placeholder="Nhập từ khóa tìm kiếm...">
+        </form>
+        <div id="search-results"></div>
+        <div class="absolute top-0 left-0 w-full h-12 bg-gray-100 flex items-center px-4">
+            <h3 id="pdf-title" class="font-semibold text-gray-700"></h3>
+        </div>
+        <iframe class="pdf-iframe" id="pdf-frame" allowfullscreen></iframe>
+        <div id="pdf-progress">Trang 1 / 32</div>
+    </div>
+    <script>
+        // Initialize PDF.js
+        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.worker.min.js';
+        document.addEventListener('DOMContentLoaded', function() {
+            // Variables for PDF search functionality
+            let currentPdfDoc = null;
+            let currentPageNum = 1;
+            let pdfTextContent = [];
+            let currentSearchTerm = '';
+            let searchActive = false;
+            // Activate filter buttons
+            const filterButtons = document.querySelectorAll('.filter-btn');
+            const catalogueCards = document.querySelectorAll('.catalogue-card');
+            filterButtons.forEach(button => {
+                button.addEventListener('click', function() {
+                    // Remove active class from all buttons
+                    filterButtons.forEach(btn => btn.classList.remove('active'));
+                    // Add active class to clicked button
+                    this.classList.add('active');
+                    const brandToFilter = this.dataset.brand;
+                    // Filter catalogue cards
+                    catalogueCards.forEach(card => {
+                        if (brandToFilter === 'all' || card.dataset.brand === brandToFilter) {
+                            card.style.display = 'block';
+                        } else {
+                            card.style.display = 'none';
+                        }
+                    });
+                });
+            });
+            // PDF Viewer functionality
+            const pdfButtons = document.querySelectorAll('.view-pdf-btn');
+            const pdfViewer = document.querySelector('.pdf-viewer-container');
+            const pdfFrame = document.getElementById('pdf-frame');
+            const overlay = document.querySelector('.overlay');
+            const closeBtn = document.querySelector('.close-btn');
+            const pdfTitle = document.getElementById('pdf-title');
+            const searchBtn = document.getElementById('search-btn');
+            const searchForm = document.getElementById('search-form');
+            const searchInput = document.getElementById('search-input');
+            const searchResults = document.getElementById('search-results');
+            const fullscreenBtn = document.getElementById('fullscreen-btn');
+            const zoomInBtn = document.getElementById('zoom-in-btn');
+            const zoomOutBtn = document.getElementById('zoom-out-btn');
+            const pdfProgress = document.getElementById('pdf-progress');
+            // Load PDF from Google Drive and extract text
+            async function loadPdfWithText(pdfUrl) {
+                try {
+                    // Load PDF for display
+                    pdfFrame.src = pdfUrl;
+                    // Load PDF for text extraction
+                    const loadingTask = pdfjsLib.getDocument(pdfUrl);
+                    currentPdfDoc = await loadingTask.promise;
+                    // Extract text from all pages
+                    pdfTextContent = [];
+                    for (let i = 1; i <= currentPdfDoc.numPages; i++) {
+                        const page = await currentPdfDoc.getPage(i);
+                        const textContent = await page.getTextContent();
+                        const textItems = textContent.items.map(item => item.str);
+                        pdfTextContent.push({
+                            page: i,
+                            text: textItems.join(' ')
+                        });
+                    }
+                    // Update progress indicator
+                    pdfProgress.textContent = `Trang 1 / ${currentPdfDoc.numPages}`;
+                } catch (error) {
+                    console.error('Error loading PDF:', error);
+                }
+            }
+            // Search in PDF text
+            function searchInPdf(searchTerm) {
+                currentSearchTerm = searchTerm;
+                if (!currentSearchTerm.trim()) {
+                    searchResults.style.display = 'none';
+                    return;
+                }
+                const results = [];
+                const lowerSearchTerm = currentSearchTerm.toLowerCase();
+                // Search through all pages
+                pdfTextContent.forEach(page => {
+                    const lowerText = page.text.toLowerCase();
+                    const regex = new RegExp(lowerSearchTerm, 'gi');
+                    // Find all matches
+                    let match;
+                    while ((match = regex.exec(lowerText)) !== null) {
+                        const startIndex = Math.max(0, match.index - 20);
+                        const endIndex = Math.min(lowerText.length, match.index + lowerSearchTerm.length + 40);
+                        const snippet = page.text.substring(startIndex, endIndex);
+                        results.push({
+                            page: page.page,
+                            index: match.index,
+                            snippet: snippet.replace(
+                                new RegExp(currentSearchTerm, 'gi'),
+                                match => `<mark>${match}</mark>`
+                            )
+                        });
+                    }
+                });
+                // Display results
+                if (results.length > 0) {
+                    searchResults.innerHTML = results.map(result => `
+                        <div class="search-result-item" data-page="${result.page}">
+                            <div class="font-semibold">Trang ${result.page}</div>
+                            <div class="text-gray-600">...${result.snippet}...</div>
+                        </div>
+                    `).join('');
+                    searchResults.style.display = 'block';
+                    // Add click event to result items
+                    document.querySelectorAll('.search-result-item').forEach(item => {
+                        item.addEventListener('click', function() {
+                            const pageNum = parseInt(this.dataset.page);
+                            currentPageNum = pageNum;
+                            pdfFrame.src = `${pdfFrame.src.split('&')[0]}#page=${pageNum}`;
+                            pdfProgress.textContent = `Trang ${pageNum} / ${currentPdfDoc.numPages}`;
+                            searchResults.style.display = 'none';
+                        });
+                    });
+                } else {
+                    searchResults.innerHTML = '<div class="p-4 text-gray-500">Không tìm thấy kết quả</div>';
+                    searchResults.style.display = 'block';
+                }
+            }
+            // Event listeners for PDF viewer
+            pdfButtons.forEach(button => {
+                button.addEventListener('click', function() {
+                    const pdfUrl = this.dataset.pdf;
+                    const title = this.dataset.title;
+                    // Set PDF source and title
+                    pdfTitle.textContent = title;
+                    loadPdfWithText(pdfUrl);
+                    // Show viewer and overlay
+                    pdfViewer.style.display = 'block';
+                    overlay.style.display = 'block';
+                    document.body.style.overflow = 'hidden';
+                    currentPageNum = 1;
+                });
+            });
+            // Search button click
+            searchBtn.addEventListener('click', function() {
+                searchForm.style.display = searchForm.style.display === 'block' ? 'none' : 'block';
+                if (searchForm.style.display === 'block') {
+                    searchInput.focus();
+                }
+            });
+            // Search input event
+            searchInput.addEventListener('input', function() {
+                searchInPdf(this.value);
+            });
+            // Fullscreen button
+            fullscreenBtn.addEventListener('click', function() {
+                if (!document.fullscreenElement) {
+                    pdfViewer.requestFullscreen().catch(err => {
+                        console.error('Error attempting to enable fullscreen:', err);
+                    });
+                } else {
+                    document.exitFullscreen();
+                }
+            });
+            // Zoom in/out buttons
+            zoomInBtn.addEventListener('click', function() {
+                const currentHeight = parseInt(pdfFrame.style.height || '70vh');
+                pdfFrame.style.height = `${Math.min(currentHeight + 50, 1000)}px`;
+            });
+            zoomOutBtn.addEventListener('click', function() {
+                const currentHeight = parseInt(pdfFrame.style.height || '70vh');
+                pdfFrame.style.height = `${Math.max(currentHeight - 50, 300)}px`;
+            });
+            // Close PDF viewer
+            function closeViewer() {
+                pdfViewer.style.display = 'none';
+                overlay.style.display = 'none';
+                document.body.style.overflow = 'auto';
+                pdfFrame.src = '';
+                searchForm.style.display = 'none';
+                searchResults.style.display = 'none';
+                searchInput.value = '';
+            }
+            closeBtn.addEventListener('click', closeViewer);
+            overlay.addEventListener('click', closeViewer);
+            // Search functionality for catalogue list
+            const catalogueSearchInput = document.querySelector('input[type="text"]');
+            catalogueSearchInput.addEventListener('input', function() {
+                const searchTerm = this.value.toLowerCase();
+                catalogueCards.forEach(card => {
+                    const title = card.querySelector('h3').textContent.toLowerCase();
+                    const desc = card.querySelector('p').textContent.toLowerCase();
+                    if (title.includes(searchTerm) || desc.includes(searchTerm)) {
+                        card.style.display = 'block';
+                    } else {
+                        card.style.display = 'none';
+                    }
+                });
+            });
+            // Stagger animations for cards
+            const cards = document.querySelectorAll('.animate-card');
+            cards.forEach((card, index) => {
+                card.style.animationDelay = `${index * 0.1}s`;
+            });
+        });
+    </script>
+    <!-- Products Section -->
+    <section id="products" class="py-16 bg-gray-50">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">DANH SÁCH SẢN PHẨM MỚI NHẤT BẾP 4.0 2025</h2>
+            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+                <!-- Product 1 -->
+                <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 relative">
+                    <div class="discount-badge">-37%</div>
+                    <a href="https://qr.bitly.ac/s/fYIRRnmN"><img src="https://i.ibb.co/TMM0XWVR/t-i-xu-ng-8.jpg" alt="Malloca Oven" class="w-full h-48 object-cover"></a>
+                    <div class="p-4">
+                        <a href="https://qr.bitly.ac/s/fYIRRnmN"><h3 class="font-bold text-gray-800 mb-2">Máy rửa chén Malloca MDW15-5035TD </h3></a>
+                        <p class="text-sm text-gray-600">Máy rửa chén đứng độc lập (hoặc lắp âm tủ), Màu sắc: Sơn đen tĩnh điện, Sức chứa: 15 bộ chén dĩa, 6 Chương trình rửa tích hợp, Hiệu suất năng lượng: A+, Độ ồn: 55dB, Công suất: 1760-2100W, Điện áp: 220-240V/50Hz, Kích thước: W598 x D600 x H805mm, Xuất xứ: Trung Quốc (theo bản quyền Malloca)</p>
+                    </div>
+                </div>
+                <!-- Product 2 -->
+                <!--<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 relative">
+                    <div class="discount-badge">-35%</div>
+                    <img src="https://images.unsplash.com/photo-1603808033588-4078085fe8fa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Cooktop Malloca" class="w-full h-48 object-cover">
+                    <div class="p-4">
+                        <h3 class="font-bold text-gray-800 mb-2">Bếp từ Malloca MCI-688</h3>
+                        <p class="text-sm text-gray-600">4 vùng nấu, công suất 7200W</p>
+                    </div>
+                </div>
+                <!-- Product 3 -->
+                <!--<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 relative">
+                    <div class="discount-badge">-53%</div>
+                    <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Smart Cabinet" class="w-full h-48 object-cover">
+                    <div class="p-4">
+                        <h3 class="font-bold text-gray-800 mb-2">Phụ kiện tủ âm Eurogold</h3>
+                        <p class="text-sm text-gray-600">Bộ phụ kiện tủ bếp cao cấp</p>
+                    </div>
+                </div>
+                <!-- Product 4 -->
+                <!--<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 relative">
+                    <div class="discount-badge">-50%</div>
+                    <img src="https://images.unsplash.com/photo-1586802978403-6406fb3ddfff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Fingerprint Lock" class="w-full h-48 object-cover">
+                    <div class="p-4">
+                        <h3 class="font-bold text-gray-800 mb-2">Khóa vân tay Kassler K8</h3>
+                        <p class="text-sm text-gray-600">Mở khóa vân tay, mật mã, thẻ từ</p>
+                    </div>
+                </div>
+                <!-- Product 5 -->
+                <!--<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 relative">
+                    <div class="discount-badge">-30%</div>
+                    <img src="https://images.unsplash.com/photo-1586700977855-9516a4365b49?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Range Hood" class="w-full h-48 object-cover">
+                    <div class="p-4">
+                        <h3 class="font-bold text-gray-800 mb-2">Hút mùi Malloca MH-988</h3>
+                        <p class="text-sm text-gray-600">Công suất 1200m³/h, điều khiển cảm ứng</p>
+                    </div>
+                </div>
+                <!-- Product 6 -->
+                <!--<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 relative">
+                    <div class="discount-badge">-45%</div>
+                    <img src="https://images.unsplash.com/photo-1598301257983-0f54af5a3597?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Smart Cabinet 2" class="w-full h-48 object-cover">
+                    <div class="p-4">
+                        <h3 class="font-bold text-gray-800 mb-2">Tủ bếp thông minh Grob</h3>
+                        <p class="text-sm text-gray-600">Hệ thống tủ bếp cao cấp châu Âu</p>
+                    </div>
+                </div>
+                <!-- Product 7 -->
+                <!--<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 relative">
+                    <div class="discount-badge">-48%</div>
+                    <img src="https://images.unsplash.com/photo-1566668689150-c995bf5767f4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1509&q=80" alt="Fingerprint Lock 2" class="w-full h-48 object-cover">
+                    <div class="p-4">
+                        <h3 class="font-bold text-gray-800 mb-2">Khóa vân tay Demax D9</h3>
+                        <p class="text-sm text-gray-600">Chống nước IP65, kết nối WiFi</p>
+                    </div>
+                </div>
+                <!-- Product 8 -->
+                <!--<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 relative">
+                    <div class="discount-badge">-28%</div>
+                    <img src="https://images.unsplash.com/photo-1556910639-87c4e294e04c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Bếp gas" class="w-full h-48 object-cover">
+                    <div class="p-4">
+                        <h3 class="font-bold text-gray-800 mb-2">Bếp gas Malloca MGA-868</h3>
+                        <p class="text-sm text-gray-600">Kính cường lực, an toàn tự ngắt gas</p>
+                    </div>
+                </div>-->
+          </div>
+            <div class="text-center mt-12">
+                <a href="#" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-8 rounded-full inline-flex items-center transition duration-300">
+                    <i class="fas fa-shopping-cart mr-2"></i>
+                    <span>ĐẶT HÀNG NGAY</span>
+                </a>
+            </div>
+        </div>
+    </section>
+    <!-- Countdown Timer -->
+    <section class="py-12 bg-gradient-to-r from-green-500 to-orange-500">
+        <div class="container mx-auto px-4 text-center text-white">
+            <h2 class="text-3xl font-bold mb-6">THỜI GIAN ƯU ĐÃI CÒN LẠI</h2>
+            <div class="flex justify-center">
+                <div class="bg-white bg-opacity-20 rounded-lg p-6 backdrop-blur-sm">
+                    <div id="countdown" class="flex justify-center">
+                        <div class="text-center mx-2">
+                            <div class="text-5xl font-bold" id="days">00</div>
+                            <div class="text-lg">Ngày</div>
+                        </div>
+                        <div class="text-5xl font-bold pt-3">:</div>
+                        <div class="text-center mx-2">
+                            <div class="text-5xl font-bold" id="hours">00</div>
+                            <div class="text-lg">Giờ</div>
+                        </div>
+                        <div class="text-5xl font-bold pt-3">:</div>
+                        <div class="text-center mx-2">
+                            <div class="text-5xl font-bold" id="minutes">00</div>
+                            <div class="text-lg">Phút</div>
+                        </div>
+                        <div class="text-5xl font-bold pt-3">:</div>
+                        <div class="text-center mx-2">
+                            <div class="text-5xl font-bold" id="seconds">00</div>
+                            <div class="text-lg">Giây</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <p class="mt-8 text-xl">Chương trình kết thúc sau thời gian trên</p>
+        </div>
+    </section>
+    <!-- Advantages Section -->
+    <section id="advantages" class="py-16 bg-gray-50">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">LỢI ÍCH KHI SỬ DỤNG DỊCH VỤ & SẢN PHẨM BẾP 4.0</h2>
+                <p class="text-gray-600 max-w-2xl mx-auto">Những giá trị vượt trội chỉ có tại Bếp 4.0</p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <!-- Advantage 1 -->
+                <div class="bg-white p-8 rounded-xl shadow-sm">
+                    <div class="flex items-center mb-4">
+                        <div class="bg-orange-100 p-3 rounded-full mr-4">
+                            <i class="fas fa-money-bill-wave text-orange-600 text-xl"></i>
+                        </div>
+                        <h3 class="text-xl font-bold text-gray-800">Tiết kiệm chi phí</h3>
+                    </div>
+                    <p class="text-gray-600">Nhờ chính sách chiết khấu cực cao, doanh nghiệp của bạn có thể cắt giảm đến 53% chi phí nguyên liệu so với thị trường.</p>
+                </div>
+                <!-- Advantage 2 -->
+                <div class="bg-white p-8 rounded-xl shadow-sm">
+                    <div class="flex items-center mb-4">
+                        <div class="bg-green-100 p-3 rounded-full mr-4">
+                            <i class="fas fa-stopwatch text-green-600 text-xl"></i>
+                        </div>
+                        <h3 class="text-xl font-bold text-gray-800">Tiết kiệm thời gian</h3>
+                    </div>
+                    <p class="text-gray-600">Hệ thống lên đơn thông minh và giao hàng siêu tốc giúp doanh nghiệp tập trung vào hoạt động cốt lõi thay vì quản lý chuỗi cung ứng.</p>
+                </div>
+                <!-- Advantage 3 -->
+                <div class="bg-white p-8 rounded-xl shadow-sm">
+                    <div class="flex items-center mb-4">
+                        <div class="bg-blue-100 p-3 rounded-full mr-4">
+                            <i class="fas fa-chart-line text-blue-600 text-xl"></i>
+                        </div>
+                        <h3 class="text-xl font-bold text-gray-800">Tăng hiệu quả kinh doanh</h3>
+                    </div>
+                    <p class="text-gray-600">Dịch vụ ứng dụng AI từ Bếp 4.0 giúp cải thiện trải nghiệm khách hàng, từ đó tăng doanh thu và lợi nhuận cho doanh nghiệp của bạn.</p>
+                </div>
+            </div>
+            <div class="mt-12 bg-gradient-to-r from-orange-500 to-orange-600 rounded-xl p-8 text-white">
+                <div class="flex flex-col md:flex-row items-center">
+                    <div class="md:w-2/3 mb-6 md:mb-0">
+                        <h3 class="text-2xl font-bold mb-2">LIÊN HỆ TƯ VẤN</h3>
+                        <p class="opacity-90">Liên hệ ngay hôm nay để nhận ưu đãi đặc biệt lên đến 53% cho lần đặt hàng đầu tiên!</p>
+                    </div>
+                    <div class="md:w-1/3 text-right">
+                        <a href="https://zalo.me/bep40vn" class="bg-white text-orange-600 hover:bg-gray-100 px-6 py-3 rounded-full font-bold inline-block transition duration-300 shadow-lg">Liên hệ ngay</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+  <!-- FAQ Section -->
+    <section class="py-16 bg-white">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">CÂU HỎI THƯỜNG GẶP</h2>
+                <p class="text-gray-600 max-w-2xl mx-auto">Tìm hiểu thêm về dịch vụ của Bếp 4.0</p>
+            </div>
+            <div class="max-w-3xl mx-auto">
+                <div class="border border-gray-200 rounded-xl mb-4 overflow-hidden">
+                    <button class="faq-question w-full text-left p-6 bg-gray-50 hover:bg-gray-100 transition duration-300 flex justify-between items-center">
+                        <span class="font-medium text-gray-800">Tôi có thể nhận chiết khấu cao nhất là bao nhiêu?</span>
+                        <i class="fas fa-chevron-down text-orange-600 transition-transform duration-300"></i>
+                    </button>
+                    <div class="faq-answer hidden p-6 bg-white">
+                        <p class="text-gray-600">Chiết khấu tại Bếp 4.0 áp dụng 1 mức chiết khấu như trên cho mọi đơn hàng, mức chiết khấu có thể lên đến 35%.</p>
+                    </div>
+                </div>
+                <div class="border border-gray-200 rounded-xl mb-4 overflow-hidden">
+                    <button class="faq-question w-full text-left p-6 bg-gray-50 hover:bg-gray-100 transition duration-300 flex justify-between items-center">
+                        <span class="font-medium text-gray-800">Thời gian giao hàng trung bình là bao lâu?</span>
+                        <i class="fas fa-chevron-down text-orange-600 transition-transform duration-300"></i>
+                    </button>
+                    <div class="faq-answer hidden p-6 bg-white">
+                        <p class="text-gray-600">Tại khu vực nội thành, thời gian giao hàng trung bình trong vòng 24 giờ sau khi xác nhận đơn. Đối với khu vực ngoại thành, thời gian giao hàng là từ 1-2 ngày tùy vào vị trí cụ thể.</p>
+                    </div>
+                </div>
+                <div class="border border-gray-200 rounded-xl mb-4 overflow-hidden">
+                    <button class="faq-question w-full text-left p-6 bg-gray-50 hover:bg-gray-100 transition duration-300 flex justify-between items-center">
+                        <span class="font-medium text-gray-800">Tôi có thể đặt hàng bằng cách nào?</span>
+                        <i class="fas fa-chevron-down text-orange-600 transition-transform duration-300"></i>
+                    </button>
+                    <div class="faq-answer hidden p-6 bg-white">
+                        <p class="text-gray-600">Bếp 4.0 cung cấp nhiều cách thức đặt hàng linh hoạt: qua hotline, mạng xã hội trên trang. Đặc biệt, hệ thống đặt hàng online của chúng tôi hoạt động 24/7 để đáp ứng mọi nhu cầu của khách hàng.</p>
+                    </div>
+                </div>
+                <div class="border border-gray-200 rounded-xl mb-4 overflow-hidden">
+                    <button class="faq-question w-full text-left p-6 bg-gray-50 hover:bg-gray-100 transition duration-300 flex justify-between items-center">
+                        <span class="font-medium text-gray-800">Chính sách hậu mãi bao gồm những gì?</span>
+                        <i class="fas fa-chevron-down text-orange-600 transition-transform duration-300"></i>
+                    </button>
+                    <div class="faq-answer hidden p-6 bg-white">
+                        <p class="text-gray-600">Chúng tôi có nhiều chương trình hậu mãi đặc biệt như: khuyến mãi giảm giá định kỳ, hỗ trợ đổi trả sản phẩm trong vòng 24h, dịch vụ chăm sóc khách hàng 24/7 và nhiều ưu đãi bất ngờ khác dành riêng cho khách hàng thân thiết.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-gray-800 text-white py-12">
+        <div class="container mx-auto px-4">
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div>
+                    <h3 class="text-2xl font-bold mb-4">SUPER HOLIDAY SALE</h3>
+                    <p class="mb-4">Chương trình khuyến mãi đặc biệt tháng 5/2025 với mức giảm giá cực sốc lên đến 53%.</p>
+                    <div class="flex space-x-4">
+                        <a href="#" class="text-white hover:text-green-400 text-xl"><i class="fab fa-facebook-f"></i></a>
+                        <a href="#" class="text-white hover:text-green-400 text-xl"><i class="fab fa-youtube"></i></a>
+                        <a href="#" class="text-white hover:text-green-400 text-xl"><i class="fab fa-tiktok"></i></a>
+                        <a href="#" class="text-white hover:text-green-400 text-xl"><i class="fas fa-phone-alt"></i></a>
+                    </div>
+                </div>
+                <div>
+                    <h4 class="text-xl font-bold mb-4">SẢN PHẨM KHUYẾN MÃI</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="hover:text-green-400 transition">Thiết bị bếp Malloca</a></li>
+                        <li><a href="#" class="hover:text-green-400 transition">Phụ kiện âm tủ Eurogold</a></li>
+                        <li><a href="#" class="hover:text-green-400 transition">Phụ kiện tủ bếp Grob</a></li>
+                        <li><a href="#" class="hover:text-green-400 transition">Khóa vân tay Kassler</a></li>
+                        <li><a href="#" class="hover:text-green-400 transition">Khóa vân tay Demax</a></li>
+                        <li><a href="#" class="hover:text-green-400 transition">Khóa vân tay Hubert</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-xl font-bold mb-4">LIÊN HỆ</h4>
+                    <ul class="space-y-2">
+                        <li class="flex items-center"><i class="fas fa-map-marker-alt mr-3"></i> </li>
+                        <li class="flex items-center"><i class="fas fa-phone-alt mr-3"></i>zalo.me/bep40vn </li>
+                        <li class="flex items-center"><i class="fas fa-envelope mr-3"></i> </li>
+                    </ul>
+                </div>
+            </div>
+            <div class="border-t border-gray-700 mt-8 pt-8 text-sm text-center text-gray-400">
+                <p>© 2025 SUPER HOLIDAY SALE - All rights reserved. Chương trình áp dụng đến hết ngày 31/05/2025.</p>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Countdown timer
+        function updateCountdown() {
+            const endDate = new Date('May 31, 2025 23:59:59').getTime();
+            const now = new Date().getTime();
+            const timeLeft = endDate - now;
+            if (timeLeft < 0) {
+                document.getElementById('countdown').innerHTML = '<div class="text-3xl font-bold">Chương trình đã kết thúc</div>';
+                return;
+            }
+            const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
+            const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+            const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
+            const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
+            document.getElementById('days').innerHTML = days.toString().padStart(2, '0');
+            document.getElementById('hours').innerHTML = hours.toString().padStart(2, '0');
+            document.getElementById('minutes').innerHTML = minutes.toString().padStart(2, '0');
+            document.getElementById('seconds').innerHTML = seconds.toString().padStart(2, '0');
+        }
+        setInterval(updateCountdown, 1000);
+        updateCountdown();
+        // Smooth scroll for anchor links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                document.querySelector(this.getAttribute('href')).scrollIntoView({
+                    behavior: 'smooth'
+                });
+            });
+        });
+    </script>
+  <script>
+        // FAQ toggle
+        document.querySelectorAll('.faq-question').forEach(button => {
+            button.addEventListener('click', () => {
+                const answer = button.nextElementSibling;
+                const icon = button.querySelector('i');
+                answer.classList.toggle('hidden');
+                icon.classList.toggle('rotate-180');
+            });
+        });
+        // Smooth scrolling for anchor links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                document.querySelector(this.getAttribute('href')).scrollIntoView({
+                    behavior: 'smooth'
+                });
+            });
+        });
+  </script>
+</body>
+</html>