Hugging Face's logo

Spaces:
bep40
/
superholidaysale
Running

App Files Community
bep40 commited on
Commit
f9070bc
·
verified ·
1 Parent(s): 411f44b

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +440 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Superholidaysale
3
- emoji: 💻
4
- colorFrom: red
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: superholidaysale
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,440 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="vi">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>SUPER HOLIDAY SALE - Giảm giá lên đến 53%</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
9
+ <style>
10
+ body {
11
+ font-family: 'Roboto', sans-serif;
12
+ }
13
+ .title-font {
14
+ font-family: 'Montserrat', sans-serif;
15
+ }
16
+ .video-container {
17
+ position: relative;
18
+ padding-bottom: 133.33%; /* 4:3 Aspect Ratio */
19
+ height: 0;
20
+ overflow: hidden;
21
+ }
22
+ .video-container iframe {
23
+ position: absolute;
24
+ top: 0;
25
+ left: 0;
26
+ width: 100%;
27
+ height: 100%;
28
+ }
29
+ .sale-tag {
30
+ animation: pulse 1.5s infinite;
31
+ }
32
+ .product-card:hover {
33
+ transform: translateY(-5px);
34
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
35
+ }
36
+ @keyframes pulse {
37
+ 0% {
38
+ transform: scale(1);
39
+ }
40
+ 50% {
41
+ transform: scale(1.05);
42
+ }
43
+ 100% {
44
+ transform: scale(1);
45
+ }
46
+ }
47
+ .discount-badge {
48
+ position: absolute;
49
+ top: 10px;
50
+ right: 10px;
51
+ background-color: #f97316;
52
+ color: white;
53
+ padding: 5px 10px;
54
+ border-radius: 9999px;
55
+ font-weight: bold;
56
+ font-size: 1rem;
57
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
58
+ }
59
+ </style>
60
+ </head>
61
+ <body class="bg-white">
62
+ <!-- Header Section -->
63
+ <header class="bg-orange-600 text-white">
64
+ <div class="container mx-auto px-4 py-6">
65
+ <div class="flex flex-col md:flex-row justify-between items-center">
66
+ <div>
67
+ <h1 class="title-font text-4xl md:text-5xl font-bold tracking-tight">SUPER HOLIDAY SALE</h1>
68
+ <p class="mt-2 text-xl md:text-2xl font-medium">Tiết kiệm lên đến <span class="font-black">53%</span></p>
69
+ </div>
70
+ <div class="mt-4 md:mt-0">
71
+ <div class="bg-white text-orange-600 py-3 px-6 rounded-full shadow-lg text-center font-bold text-xl sale-tag">
72
+ KÉO DÀI ĐẾN 31/05/2025
73
+ </div>
74
+ </div>
75
+ </div>
76
+ </div>
77
+ </header>
78
+
79
+ <!-- Main Banner -->
80
+ <section class="relative bg-gradient-to-r from-orange-500 to-orange-400 py-16">
81
+ <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80')] bg-cover bg-center opacity-20"></div>
82
+ <div class="container mx-auto px-4 text-center relative z-10">
83
+ <h2 class="title-font text-3xl md:text-5xl font-bold text-white mb-6">GIẢM GIÁ ĐỘC QUYỀN</h2>
84
+ <p class="text-xl md:text-2xl text-white font-medium mb-8">Cơ hội duy nhất trong năm với mức giảm chưa từng có</p>
85
+ <a href="#products" class="bg-white text-orange-600 hover:bg-orange-100 py-3 px-8 rounded-full font-bold text-lg transition duration-300 inline-block shadow-lg">
86
+ XEM NGAY
87
+ </a>
88
+ </div>
89
+ </section>
90
+
91
+ <!-- Video Section -->
92
+ <section class="py-12 bg-white">
93
+ <div class="container mx-auto px-4">
94
+ <h2 class="title-font text-3xl text-center font-bold text-orange-600 mb-8">TỔNG QUAN SẢN PHẨM</h2>
95
+ <div class="max-w-4xl mx-auto">
96
+ <div class="video-container shadow-2xl rounded-xl overflow-hidden">
97
+ <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
98
+ </div>
99
+ </div>
100
+ </div>
101
+ </section>
102
+
103
+ <!-- Products Section -->
104
+ <section id="products" class="py-12 bg-gray-50">
105
+ <div class="container mx-auto px-4">
106
+ <!-- Malloca Kitchen Appliances -->
107
+ <div class="mb-16">
108
+ <div class="flex items-center mb-8">
109
+ <div class="w-16 h-16 bg-orange-500 rounded-full flex items-center justify-center text-white font-bold text-2xl mr-4">1</div>
110
+ <h3 class="title-font text-2xl md:text-3xl font-bold text-orange-600">THIẾT BỊ BẾP MALLOCA</h3>
111
+ </div>
112
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
113
+ <!-- Product 1 -->
114
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden transition duration-300 product-card">
115
+ <div class="relative">
116
+ <img src="https://images.unsplash.com/photo-1583778176475-e8f8a3e4a46e?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Bếp từ Malloca" class="w-full h-64 object-cover">
117
+ <div class="discount-badge">-37%</div>
118
+ </div>
119
+ <div class="p-6">
120
+ <div class="flex items-center mb-2">
121
+ <img src="https://via.placeholder.com/100x30?text=Malloca" alt="Malloca" class="h-6">
122
+ </div>
123
+ <h4 class="font-bold text-xl mb-2">Bếp điện từ Malloca Premium</h4>
124
+ <div class="flex items-center">
125
+ <span class="text-gray-500 line-through mr-3">12.990.000đ</span>
126
+ <span class="text-orange-600 font-bold text-xl">8.183.700đ</span>
127
+ </div>
128
+ <button class="mt-4 w-full bg-orange-500 hover:bg-orange-600 text-white py-2 rounded transition duration-300 font-medium">
129
+ THÊM VÀO GIỎ
130
+ </button>
131
+ </div>
132
+ </div>
133
+
134
+ <!-- Product 2 -->
135
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden transition duration-300 product-card">
136
+ <div class="relative">
137
+ <img src="https://images.unsplash.com/photo-1606804196591-f9d2c9d3f1a1?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Bếp từ Malloca" class="w-full h-64 object-cover">
138
+ <div class="discount-badge">-35%</div>
139
+ </div>
140
+ <div class="p-6">
141
+ <div class="flex items-center mb-2">
142
+ <img src="https://via.placeholder.com/100x30?text=Malloca" alt="Malloca" class="h-6">
143
+ </div>
144
+ <h4 class="font-bold text-xl mb-2">Bếp từ Malloca Deluxe</h4>
145
+ <div class="flex items-center">
146
+ <span class="text-gray-500 line-through mr-3">9.990.000đ</span>
147
+ <span class="text-orange-600 font-bold text-xl">6.493.500đ</span>
148
+ </div>
149
+ <button class="mt-4 w-full bg-orange-500 hover:bg-orange-600 text-white py-2 rounded transition duration-300 font-medium">
150
+ THÊM VÀO GIỎ
151
+ </button>
152
+ </div>
153
+ </div>
154
+
155
+ <!-- Product 3 -->
156
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden transition duration-300 product-card">
157
+ <div class="relative">
158
+ <img src="https://images.unsplash.com/photo-1606143810209-df9b1713f0cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Máy hút mùi Malloca" class="w-full h-64 object-cover">
159
+ <div class="discount-badge">-30%</div>
160
+ </div>
161
+ <div class="p-6">
162
+ <div class="flex items-center mb-2">
163
+ <img src="https://via.placeholder.com/100x30?text=Malloca" alt="Malloca" class="h-6">
164
+ </div>
165
+ <h4 class="font-bold text-xl mb-2">Máy hút mùi Malloca</h4>
166
+ <div class="flex items-center">
167
+ <span class="text-gray-500 line-through mr-3">7.990.000đ</span>
168
+ <span class="text-orange-600 font-bold text-xl">5.593.000đ</span>
169
+ </div>
170
+ <button class="mt-4 w-full bg-orange-500 hover:bg-orange-600 text-white py-2 rounded transition duration-300 font-medium">
171
+ THÊM VÀO GIỎ
172
+ </button>
173
+ </div>
174
+ </div>
175
+ </div>
176
+ </div>
177
+
178
+ <!-- Eurogold & Grob Accessories -->
179
+ <div class="mb-16">
180
+ <div class="flex items-center mb-8">
181
+ <div class="w-16 h-16 bg-orange-500 rounded-full flex items-center justify-center text-white font-bold text-2xl mr-4">2</div>
182
+ <h3 class="title-font text-2xl md:text-3xl font-bold text-orange-600">PHỤ KIỆN ÂM TỦ THÔNG MINH</h3>
183
+ </div>
184
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
185
+ <!-- Product 1 -->
186
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden transition duration-300 product-card">
187
+ <div class="relative">
188
+ <img src="https://images.unsplash.com/photo-1583845112208-9b38adc2e585?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Phụ kiện Eurogold" class="w-full h-64 object-cover">
189
+ <div class="discount-badge">-53%</div>
190
+ </div>
191
+ <div class="p-6">
192
+ <div class="flex items-center mb-2">
193
+ <img src="https://via.placeholder.com/100x30?text=Eurogold" alt="Eurogold" class="h-6">
194
+ </div>
195
+ <h4 class="font-bold text-xl mb-2">Phụ kiện âm tủ Eurogold</h4>
196
+ <div class="flex items-center">
197
+ <span class="text-gray-500 line-through mr-3">5.990.000đ</span>
198
+ <span class="text-orange-600 font-bold text-xl">2.815.300đ</span>
199
+ </div>
200
+ <button class="mt-4 w-full bg-orange-500 hover:bg-orange-600 text-white py-2 rounded transition duration-300 font-medium">
201
+ THÊM VÀO GIỎ
202
+ </button>
203
+ </div>
204
+ </div>
205
+
206
+ <!-- Product 2 -->
207
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden transition duration-300 product-card">
208
+ <div class="relative">
209
+ <img src="https://images.unsplash.com/photo-1565538287410-e8ba026b0699?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Phụ kiện Grob" class="w-full h-64 object-cover">
210
+ <div class="discount-badge">-50%</div>
211
+ </div>
212
+ <div class="p-6">
213
+ <div class="flex items-center mb-2">
214
+ <img src="https://via.placeholder.com/100x30?text=Grob" alt="Grob" class="h-6">
215
+ </div>
216
+ <h4 class="font-bold text-xl mb-2">Phụ kiện tủ bếp Grob</h4>
217
+ <div class="flex items-center">
218
+ <span class="text-gray-500 line-through mr-3">4.490.000đ</span>
219
+ <span class="text-orange-600 font-bold text-xl">2.245.000đ</span>
220
+ </div>
221
+ <button class="mt-4 w-full bg-orange-500 hover:bg-orange-600 text-white py-2 rounded transition duration-300 font-medium">
222
+ THÊM VÀO GIỎ
223
+ </button>
224
+ </div>
225
+ </div>
226
+
227
+ <!-- Product 3 -->
228
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden transition duration-300 product-card">
229
+ <div class="relative">
230
+ <img src="https://images.unsplash.com/photo-1586023492125-27c2a2afe482?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Phụ kiện thông minh" class="w-full h-64 object-cover">
231
+ <div class="discount-badge">-45%</div>
232
+ </div>
233
+ <div class="p-6">
234
+ <div class="flex items-center mb-2">
235
+ <img src="https://via.placeholder.com/100x30?text=Eurogold" alt="Eurogold" class="h-6">
236
+ </div>
237
+ <h4 class="font-bold text-xl mb-2">Phụ kiện thông minh</h4>
238
+ <div class="flex items-center">
239
+ <span class="text-gray-500 line-through mr-3">3.990.000đ</span>
240
+ <span class="text-orange-600 font-bold text-xl">2.194.500đ</span>
241
+ </div>
242
+ <button class="mt-4 w-full bg-orange-500 hover:bg-orange-600 text-white py-2 rounded transition duration-300 font-medium">
243
+ THÊM VÀO GIỎ
244
+ </button>
245
+ </div>
246
+ </div>
247
+ </div>
248
+ </div>
249
+
250
+ <!-- Smart Locks -->
251
+ <div>
252
+ <div class="flex items-center mb-8">
253
+ <div class="w-16 h-16 bg-orange-500 rounded-full flex items-center justify-center text-white font-bold text-2xl mr-4">3</div>
254
+ <h3 class="title-font text-2xl md:text-3xl font-bold text-orange-600">KHÓA VÂN TAY CAO CẤP</h3>
255
+ </div>
256
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
257
+ <!-- Product 1 -->
258
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden transition duration-300 product-card">
259
+ <div class="relative">
260
+ <img src="https://images.unsplash.com/photo-1623874514711-0f321325a0b1?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Khóa Kassler" class="w-full h-64 object-cover">
261
+ <div class="discount-badge">-50%</div>
262
+ </div>
263
+ <div class="p-6">
264
+ <div class="flex items-center mb-2">
265
+ <img src="https://via.placeholder.com/100x30?text=Kassler" alt="Kassler" class="h-6">
266
+ </div>
267
+ <h4 class="font-bold text-xl mb-2">Khóa vân tay Kassler</h4>
268
+ <div class="flex items-center">
269
+ <span class="text-gray-500 line-through mr-3">8.990.000đ</span>
270
+ <span class="text-orange-600 font-bold text-xl">4.495.000đ</span>
271
+ </div>
272
+ <button class="mt-4 w-full bg-orange-500 hover:bg-orange-600 text-white py-2 rounded transition duration-300 font-medium">
273
+ THÊM VÀO GIỎ
274
+ </button>
275
+ </div>
276
+ </div>
277
+
278
+ <!-- Product 2 -->
279
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden transition duration-300 product-card">
280
+ <div class="relative">
281
+ <img src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Khóa Demax" class="w-full h-64 object-cover">
282
+ <div class="discount-badge">-45%</div>
283
+ </div>
284
+ <div class="p-6">
285
+ <div class="flex items-center mb-2">
286
+ <img src="https://via.placeholder.com/100x30?text=Demax" alt="Demax" class="h-6">
287
+ </div>
288
+ <h4 class="font-bold text-xl mb-2">Khóa điện tử Demax</h4>
289
+ <div class="flex items-center">
290
+ <span class="text-gray-500 line-through mr-3">6.990.000đ</span>
291
+ <span class="text-orange-600 font-bold text-xl">3.844.500đ</span>
292
+ </div>
293
+ <button class="mt-4 w-full bg-orange-500 hover:bg-orange-600 text-white py-2 rounded transition duration-300 font-medium">
294
+ THÊM VÀO GIỎ
295
+ </button>
296
+ </div>
297
+ </div>
298
+
299
+ <!-- Product 3 -->
300
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden transition duration-300 product-card">
301
+ <div class="relative">
302
+ <img src="https://images.unsplash.com/photo-1615992174118-9b8e9be025e7?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Khóa Hubert" class="w-full h-64 object-cover">
303
+ <div class="discount-badge">-40%</div>
304
+ </div>
305
+ <div class="p-6">
306
+ <div class="flex items-center mb-2">
307
+ <img src="https://via.placeholder.com/100x30?text=Hubert" alt="Hubert" class="h-6">
308
+ </div>
309
+ <h4 class="font-bold text-xl mb-2">Khóa thông minh Hubert</h4>
310
+ <div class="flex items-center">
311
+ <span class="text-gray-500 line-through mr-3">5.490.000đ</span>
312
+ <span class="text-orange-600 font-bold text-xl">3.294.000đ</span>
313
+ </div>
314
+ <button class="mt-4 w-full bg-orange-500 hover:bg-orange-600 text-white py-2 rounded transition duration-300 font-medium">
315
+ THÊM VÀO GIỎ
316
+ </button>
317
+ </div>
318
+ </div>
319
+ </div>
320
+ </div>
321
+ </div>
322
+ </section>
323
+
324
+ <!-- Countdown Timer -->
325
+ <section class="bg-orange-600 py-8 text-white">
326
+ <div class="container mx-auto px-4 text-center">
327
+ <h3 class="title-font text-2xl md:text-3xl font-bold mb-4">ƯU ĐÃI KẾT THÚC TRONG</h3>
328
+ <div class="flex justify-center space-x-4 md:space-x-8">
329
+ <div class="bg-white text-orange-600 rounded-lg py-3 px-4 md:px-6 shadow-lg">
330
+ <div class="text-3xl md:text-4xl font-bold" id="days">00</div>
331
+ <div class="text-sm md:text-base">NGÀY</div>
332
+ </div>
333
+ <div class="bg-white text-orange-600 rounded-lg py-3 px-4 md:px-6 shadow-lg">
334
+ <div class="text-3xl md:text-4xl font-bold" id="hours">00</div>
335
+ <div class="text-sm md:text-base">GIỜ</div>
336
+ </div>
337
+ <div class="bg-white text-orange-600 rounded-lg py-3 px-4 md:px-6 shadow-lg">
338
+ <div class="text-3xl md:text-4xl font-bold" id="minutes">00</div>
339
+ <div class="text-sm md:text-base">PHÚT</div>
340
+ </div>
341
+ <div class="bg-white text-orange-600 rounded-lg py-3 px-4 md:px-6 shadow-lg">
342
+ <div class="text-3xl md:text-4xl font-bold" id="seconds">00</div>
343
+ <div class="text-sm md:text-base">GIÂY</div>
344
+ </div>
345
+ </div>
346
+ </div>
347
+ </section>
348
+
349
+ <!-- CTA Section -->
350
+ <section class="py-12 bg-white">
351
+ <div class="container mx-auto px-4 text-center">
352
+ <h2 class="title-font text-3xl md:text-4xl font-bold text-orange-600 mb-6">BẠN ĐÃ SẴN SÀNG MUA SẮM?</h2>
353
+ <p class="text-xl text-gray-700 mb-8 max-w-3xl mx-auto">Không cần đợi đến Black Friday, ưu đãi tốt nhất năm đang chờ bạn!</p>
354
+ <a href="#products" class="bg-orange-600 hover:bg-orange-700 text-white py-3 px-8 rounded-full font-bold text-lg transition duration-300 inline-block shadow-lg">
355
+ MUA NGAY
356
+ </a>
357
+ </div>
358
+ </section>
359
+
360
+ <!-- Footer -->
361
+ <footer class="bg-gray-800 text-white py-8">
362
+ <div class="container mx-auto px-4">
363
+ <div class="flex flex-col md:flex-row justify-between">
364
+ <div class="mb-6 md:mb-0">
365
+ <h3 class="title-font text-2xl font-bold mb-4">SUPER HOLIDAY SALE</h3>
366
+ <p class="max-w-xs">Chương trình khuyến mãi đặc biệt với mức giảm giá cực sốc lên đến 53%.</p>
367
+ </div>
368
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
369
+ <div>
370
+ <h4 class="font-bold text-lg mb-3">Sản phẩm</h4>
371
+ <ul class="space-y-2">
372
+ <li><a href="#" class="hover:text-orange-400 transition duration-200">Thiết bị bếp</a></li>
373
+ <li><a href="#" class="hover:text-orange-400 transition duration-200">Phụ kiện âm tủ</a></li>
374
+ <li><a href="#" class="hover:text-orange-400 transition duration-200">Khóa thông minh</a></li>
375
+ </ul>
376
+ </div>
377
+ <div>
378
+ <h4 class="font-bold text-lg mb-3">Thương hiệu</h4>
379
+ <ul class="space-y-2">
380
+ <li><a href="#" class="hover:text-orange-400 transition duration-200">Malloca</a></li>
381
+ <li><a href="#" class="hover:text-orange-400 transition duration-200">Eurogold</a></li>
382
+ <li><a href="#" class="hover:text-orange-400 transition duration-200">Grob</a></li>
383
+ <li><a href="#" class="hover:text-orange-400 transition duration-200">Kassler</a></li>
384
+ <li><a href="#" class="hover:text-orange-400 transition duration-200">Demax</a></li>
385
+ <li><a href="#" class="hover:text-orange-400 transition duration-200">Hubert</a></li>
386
+ </ul>
387
+ </div>
388
+ <div>
389
+ <h4 class="font-bold text-lg mb-3">Thông tin</h4>
390
+ <ul class="space-y-2">
391
+ <li><a href="#" class="hover:text-orange-400 transition duration-200">Chính sách bảo hành</a></li>
392
+ <li><a href="#" class="hover:text-orange-400 transition duration-200">Hướng dẫn đặt hàng</a></li>
393
+ <li><a href="#" class="hover:text-orange-400 transition duration-200">Vận chuyển & lắp đặt</a></li>
394
+ </ul>
395
+ </div>
396
+ </div>
397
+ </div>
398
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
399
+ <p>© 2024 - 2025 SUPER HOLIDAY SALE. Chương trình kéo dài đến hết ngày 31/05/2025.</p>
400
+ </div>
401
+ </div>
402
+ </footer>
403
+
404
+ <!-- Countdown Timer Script -->
405
+ <script>
406
+ // Set the date we're counting down to (May 31, 2025)
407
+ const countDownDate = new Date("May 31, 2025 23:59:59").getTime();
408
+
409
+ // Update the count down every 1 second
410
+ const x = setInterval(function() {
411
+ // Get today's date and time
412
+ const now = new Date().getTime();
413
+
414
+ // Find the distance between now and the count down date
415
+ const distance = countDownDate - now;
416
+
417
+ // Time calculations for days, hours, minutes and seconds
418
+ const days = Math.floor(distance / (1000 * 60 * 60 * 24));
419
+ const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
420
+ const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
421
+ const seconds = Math.floor((distance % (1000 * 60)) / 1000);
422
+
423
+ // Output the result in elements with id="..."
424
+ document.getElementById("days").innerHTML = days.toString().padStart(2, '0');
425
+ document.getElementById("hours").innerHTML = hours.toString().padStart(2, '0');
426
+ document.getElementById("minutes").innerHTML = minutes.toString().padStart(2, '0');
427
+ document.getElementById("seconds").innerHTML = seconds.toString().padStart(2, '0');
428
+
429
+ // If the count down is over, write some text
430
+ if (distance < 0) {
431
+ clearInterval(x);
432
+ document.getElementById("days").innerHTML = "00";
433
+ document.getElementById("hours").innerHTML = "00";
434
+ document.getElementById("minutes").innerHTML = "00";
435
+ document.getElementById("seconds").innerHTML = "00";
436
+ }
437
+ }, 1000);
438
+ </script>
439
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=bep40/superholidaysale" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
440
+ </html>