Spaces:

huylaughmad
/

website

Runtime error

App Files Files Community

huylaughmad commited on Apr 29

Commit

d55c559

verified ·

1 Parent(s): f7aa429

Upload 8 files

Browse files

Files changed (8) hide show

templates/bfat.html +599 -0
templates/blog.html +526 -0
templates/bloglist.html +792 -0
templates/dichvu.html +660 -0
templates/hanhtrinhkh.html +524 -0
templates/index.html +776 -0
templates/lienhe.html +485 -0
templates/thuvien.html +624 -0

templates/bfat.html ADDED Viewed

	@@ -0,0 +1,599 @@

+<!DOCTYPE html>
+<html lang="vi">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Case Study - {{ case.title }} | TTL1979</title>
+    <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>
+        body {
+            background-color: #000;
+            color: #fff;
+            overflow-x: hidden;
+        }
+        .parallax-bg {
+            background-attachment: fixed;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: cover;
+            position: relative;
+            overflow: hidden;
+        }
+        .glow-effect {
+            position: absolute;
+            width: 200px;
+            height: 200px;
+            border-radius: 50%;
+            filter: blur(60px);
+            opacity: 0.3;
+            z-index: 0;
+        }
+        .glow-teal {
+            background: #38b2ac;
+        }
+        .glow-blue {
+            background: #3b82f6;
+        }
+        .glow-purple {
+            background: #8b5cf6;
+        }
+        .case-comparison {
+            position: relative;
+            width: 100%;
+            height: 600px;
+            overflow: hidden;
+            border-radius: 16px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+        }
+        .before-image, .after-image {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        .before-image {
+            clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%);
+        }
+        .after-image {
+            clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
+        }
+        .comparison-slider {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            width: 4px;
+            background: white;
+            left: 50%;
+            transform: translateX(-50%);
+            cursor: ew-resize;
+            z-index: 10;
+        }
+        .comparison-slider::before {
+            content: '';
+            position: absolute;
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            background: white;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+        .comparison-slider::after {
+            content: '\f337';
+            font-family: 'Font Awesome 6 Free';
+            font-weight: 900;
+            position: absolute;
+            color: #000;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 20px;
+        }
+        .treatment-timeline {
+            position: relative;
+            padding-left: 30px;
+        }
+        .treatment-timeline::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            bottom: 0;
+            width: 4px;
+            background: linear-gradient(to bottom, #3b82f6, #8b5cf6);
+        }
+        .timeline-item {
+            position: relative;
+            padding-bottom: 30px;
+        }
+        .timeline-item::before {
+            content: '';
+            position: absolute;
+            left: -33px;
+            top: 5px;
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background: #3b82f6;
+            border: 2px solid white;
+        }
+        .gallery-slider {
+            scroll-snap-type: x mandatory;
+            scroll-behavior: smooth;
+        }
+        .gallery-slide {
+            scroll-snap-align: start;
+            flex: 0 0 100%;
+        }
+        @media (max-width: 768px) {
+            .parallax-bg {
+                background-attachment: scroll;
+            }
+            .case-comparison {
+                height: 400px;
+            }
+            .gallery-slide {
+                flex: 0 0 100%;
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- Floating Glow Effects -->
+    <div class="glow-effect glow-teal" style="top: 10%; left: 10%;"></div>
+    <div class="glow-effect glow-blue" style="top: 60%; right: 5%;"></div>
+    <div class="glow-effect glow-purple" style="bottom: 10%; left: 20%;"></div>
+    <!-- Header -->
+    <header class="py-6 px-4 fixed w-full z-50 bg-black bg-opacity-80 backdrop-filter backdrop-blur-sm">
+        <div class="container mx-auto flex justify-between items-center">
+            <div class="flex items-center">
+                <i class="fas fa-tooth text-3xl text-teal-400 mr-3"></i>
+                <h1 class="text-2xl font-bold bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">TTL1979</h1>
+            </div>
+            <button id="menu-toggle" class="md:hidden text-white">
+                <i class="fas fa-bars text-2xl"></i>
+            </button>
+            <nav id="main-nav" class="hidden md:flex space-x-8">
+                <a href="/" class="nav-link text-white hover:text-teal-400 transition">Home</a>
+                <a href="/thuvien" class="nav-link text-white hover:text-teal-400 transition">Thư viện</a>
+                <a href="/dichvu" class="nav-link text-white hover:text-teal-400 transition">Dịch vụ</a>
+                <a href="/lienhe" class="nav-link text-white hover:text-teal-400 transition">Liên hệ</a>
+            </nav>
+        </div>
+    </header>
+    <!-- Mobile Menu -->
+    <div id="mobile-menu" class="fixed inset-0 bg-black bg-opacity-90 z-40 hidden flex-col items-center justify-center space-y-8">
+        <button id="close-menu" class="absolute top-6 right-6 text-white text-2xl">
+            <i class="fas fa-times"></i>
+        </button>
+        <a href="/" class="text-white text-2xl hover:text-teal-400 transition">Home</a>
+        <a href="/thuvien" class="text-white text-2xl hover:text-teal-400 transition">Thư viện</a>
+        <a href="/dichvu" class="text-white text-2xl hover:text-teal-400 transition">Dịch vụ</a>
+        <a href="/lienhe" class="text-white text-2xl hover:text-teal-400 transition">Liên hệ</a>
+    </div>
+    <!-- Case Study Hero -->
+    <section class="pt-32 pb-20 px-4">
+        <div class="container mx-auto">
+            {% if case %}
+            <div class="flex flex-col md:flex-row items-center mb-12">
+                <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
+                    <span class="inline-block bg-gradient-to-r from-teal-500 to-blue-600 text-white px-4 py-1 rounded-full text-sm font-semibold mb-4">Case #{{ case.case_id }}</span>
+                    <h1 class="text-4xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">{{ case.title }}</h1>
+                    <p class="text-xl text-gray-300 mb-6">{{ case.initial_condition }}</p>
+                    <div class="flex items-center">
+                        <div class="w-16 h-16 rounded-full overflow-hidden border-2 border-teal-500 mr-4">
+                            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Patient" class="w-full h-full object-cover">
+                        </div>
+                        <div>
+                            <h4 class="font-bold">{{ case.patient_name }}</h4>
+                            <p class="text-teal-400">Khách hàng hài lòng</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="md:w-1/2">
+                    <div class="bg-gradient-to-br from-teal-500 to-blue-600 p-1 rounded-2xl">
+                        <div class="case-comparison bg-black rounded-xl overflow-hidden">
+                            <img src="{{ case.before_image }}" alt="Before treatment" class="before-image">
+                            <img src="{{ case.after_image }}" alt="After treatment" class="after-image">
+                            <div class="comparison-slider"></div>
+                            <div class="absolute top-4 left-4 bg-black bg-opacity-70 text-white px-3 py-1 rounded-full text-sm">
+                                <i class="fas fa-arrow-left mr-1"></i> Trước
+                            </div>
+                            <div class="absolute top-4 right-4 bg-black bg-opacity-70 text-white px-3 py-1 rounded-full text-sm">
+                                Sau <i class="fas fa-arrow-right ml-1"></i>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="flex flex-wrap justify-center gap-4 mb-12">
+                <span class="bg-gray-800 text-teal-400 px-4 py-2 rounded-full font-medium">{{ case.treatment_method }}</span>
+                <span class="bg-gray-800 text-blue-400 px-4 py-2 rounded-full font-medium">Thẩm mỹ</span>
+                <span class="bg-gray-800 text-purple-400 px-4 py-2 rounded-full font-medium">Không đau</span>
+                <span class="bg-gray-800 text-pink-400 px-4 py-2 rounded-full font-medium">{{ case.treatment_duration }}</span>
+            </div>
+            {% else %}
+            <div class="text-center">
+                <h1 class="text-4xl font-bold mb-6 text-gray-300">Chưa có dữ liệu ca điều trị</h1>
+                <p class="text-xl text-gray-400">Vui lòng thêm dữ liệu vào dataset để hiển thị ca điều trị.</p>
+            </div>
+            {% endif %}
+        </div>
+    </section>
+    <!-- Case Details -->
+    <section class="py-16 px-4 bg-gray-900 bg-opacity-50">
+        <div class="container mx-auto">
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
+                <div class="lg:col-span-2">
+                    <h2 class="text-3xl font-bold mb-8 bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">Chi tiết ca điều trị</h2>
+                    <div class="bg-gray-800 bg-opacity-70 rounded-xl p-6 mb-8 backdrop-filter backdrop-blur-sm">
+                        <h3 class="text-xl font-semibold mb-4 text-teal-400 flex items-center">
+                            <i class="fas fa-clipboard-list mr-2"></i> Tình trạng ban đầu
+                        </h3>
+                        <p class="text-gray-300 mb-4">{{ case.initial_condition }}</p>
+                        <ul class="list-disc pl-6 text-gray-300 space-y-2">
+                            {% for detail in case.initial_details.split(';') %}
+                            <li>{{ detail.strip() }}</li>
+                            {% endfor %}
+                        </ul>
+                    </div>
+                    <div class="bg-gray-800 bg-opacity-70 rounded-xl p-6 mb-8 backdrop-filter backdrop-blur-sm">
+                        <h3 class="text-xl font-semibold mb-4 text-blue-400 flex items-center">
+                            <i class="fas fa-procedures mr-2"></i> Phương pháp điều trị
+                        </h3>
+                        <p class="text-gray-300 mb-4">{{ case.treatment_method }} với các ưu điểm:</p>
+                        <ul class="list-disc pl-6 text-gray-300 space-y-2">
+                            {% for benefit in case.treatment_benefits.split(';') %}
+                            <li>{{ benefit.strip() }}</li>
+                            {% endfor %}
+                        </ul>
+                    </div>
+                    <div class="bg-gray-800 bg-opacity-70 rounded-xl p-6 backdrop-filter backdrop-blur-sm">
+                        <h3 class="text-xl font-semibold mb-4 text-purple-400 flex items-center">
+                            <i class="fas fa-smile-beam mr-2"></i> Kết quả đạt được
+                        </h3>
+                        <p class="text-gray-300 mb-4">Sau khi hoàn thành điều trị, bệnh nhân đạt được:</p>
+                        <ul class="list-disc pl-6 text-gray-300 space-y-2">
+                            {% for result in case.results.split(';') %}
+                            <li>{{ result.strip() }}</li>
+                            {% endfor %}
+                        </ul>
+                    </div>
+                </div>
+                <div>
+                    <div class="sticky top-24">
+                        <div class="bg-gray-800 bg-opacity-70 rounded-xl p-6 mb-6 backdrop-filter backdrop-blur-sm">
+                            <h3 class="text-xl font-semibold mb-4 border-b border-gray-700 pb-2">Thông tin ca điều trị</h3>
+                            <div class="space-y-4">
+                                <div>
+                                    <p class="text-gray-400 text-sm">Bệnh nhân</p>
+                                    <p class="font-medium">{{ case.patient_name }}</p>
+                                </div>
+                                <div>
+                                    <p class="text-gray-400 text-sm">Tuổi</p>
+                                    <p class="font-medium">{{ case.patient_age }}</p>
+                                </div>
+                                <div>
+                                    <p class="text-gray-400 text-sm">Phương pháp</p>
+                                    <p class="font-medium text-teal-400">{{ case.treatment_method }}</p>
+                                </div>
+                                <div>
+                                    <p class="text-gray-400 text-sm">Số răng điều trị</p>
+                                    <p class="font-medium">{{ case.num_teeth }}</p>
+                                </div>
+                                <div>
+                                    <p class="text-gray-400 text-sm">Thời gian</p>
+                                    <p class="font-medium">{{ case.treatment_duration }}</p>
+                                </div>
+                                <div>
+                                    <p class="text-gray-400 text-sm">Độ bền</p>
+                                    <p class="font-medium">{{ case.durability }}</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="bg-gray-800 bg-opacity-70 rounded-xl p-6 backdrop-filter backdrop-blur-sm">
+                            <h3 class="text-xl font-semibold mb-4 border-b border-gray-700 pb-2">Bác sĩ điều trị</h3>
+                            <div class="flex items-center mb-4">
+                                <div class="w-16 h-16 rounded-full overflow-hidden border-2 border-blue-500 mr-4">
+                                    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Doctor" class="w-full h-full object-cover">
+                                </div>
+                                <div>
+                                    <h4 class="font-bold">{{ case.doctor_name }}</h4>
+                                    <p class="text-blue-400">Chuyên gia thẩm mỹ nha khoa</p>
+                                </div>
+                            </div>
+                            <p class="text-gray-300 text-sm">{{ case.doctor_experience }}</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Image Gallery Slider -->
+    <section class="py-16 px-4 bg-black">
+        <div class="container mx-auto">
+            <h2 class="text-3xl font-bold mb-12 text-center bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">Hình ảnh điều trị</h2>
+            <div class="relative">
+                <div class="gallery-slider flex overflow-x-auto snap-x snap-mandatory scroll-smooth rounded-xl shadow-2xl" id="gallery-slider">
+                    {% for image in case.gallery_images.split(',') %}
+                    <div class="gallery-slide flex-shrink-0 w-full">
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <div class="bg-gray-900 rounded-xl overflow-hidden">
+                                <img src="{{ image.strip() }}" alt="Before treatment" class="w-full h-96 object-cover">
+                                <div class="p-4 bg-gray-800">
+                                    <h4 class="font-semibold text-teal-400">Trước điều trị</h4>
+                                    <p class="text-gray-400 text-sm">{{ ['Nhìn thẳng', 'Góc nghiêng', 'Cận cảnh'][loop.index0] }}</p>
+                                </div>
+                            </div>
+                            <div class="bg-gray-900 rounded-xl overflow-hidden">
+                                <img src="{{ image.strip() }}" alt="After treatment" class="w-full h-96 object-cover">
+                                <div class="p-4 bg-gray-800">
+                                    <h4 class="font-semibold text-blue-400">Sau điều trị</h4>
+                                    <p class="text-gray-400 text-sm">{{ ['Nhìn thẳng', 'Góc nghiêng', 'Cận cảnh'][loop.index0] }}</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    {% endfor %}
+                </div>
+                <div class="flex justify-center mt-6 space-x-2">
+                    {% for image in case.gallery_images.split(',') %}
+                    <button class="gallery-dot w-3 h-3 rounded-full bg-gray-700 hover:bg-gray-500 transition" data-slide="{{ loop.index0 }}"></button>
+                    {% endfor %}
+                </div>
+                <button class="absolute left-4 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-70 text-white p-3 rounded-full hover:bg-opacity-90 transition" id="prev-slide">
+                    <i class="fas fa-chevron-left"></i>
+                </button>
+                <button class="absolute right-4 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-70 text-white p-3 rounded-full hover:bg-opacity-90 transition" id="next-slide">
+                    <i class="fas fa-chevron-right"></i>
+                </button>
+            </div>
+        </div>
+    </section>
+    <!-- Patient Testimonial -->
+    <section class="py-16 px-4 bg-gradient-to-br from-gray-900 to-gray-800">
+        <div class="container mx-auto max-w-4xl">
+            <div class="bg-gray-800 bg-opacity-70 rounded-xl p-8 md:p-12 backdrop-filter backdrop-blur-sm">
+                <div class="flex flex-col md:flex-row items-center mb-8">
+                    <div class="md:w-1/4 mb-6 md:mb-0 flex justify-center">
+                        <div class="w-32 h-32 rounded-full overflow-hidden border-4 border-teal-500">
+                            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Patient" class="w-full h-full object-cover">
+                        </div>
+                    </div>
+                    <div class="md:w-3/4 md:pl-8 text-center md:text-left">
+                        <h3 class="text-2xl font-bold mb-2">{{ case.patient_name }}</h3>
+                        <p class="text-teal-400 mb-4">Khách hàng hài lòng</p>
+                        <div class="flex justify-center md:justify-start space-x-1 text-yellow-400">
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star"></i>
+                        </div>
+                    </div>
+                </div>
+                <div class="text-center">
+                    <blockquote class="text-xl italic mb-8">
+                        "{{ case.patient_testimonial }}"
+                    </blockquote>
+                    <div class="flex justify-center space-x-4">
+                        <button class="bg-teal-600 hover:bg-teal-700 text-white px-6 py-3 rounded-full font-medium transition flex items-center">
+                            <i class="fas fa-calendar-check mr-2"></i> Đặt lịch ngay
+                        </button>
+                        <button class="bg-transparent border-2 border-teal-500 text-teal-400 hover:bg-teal-900 hover:bg-opacity-30 px-6 py-3 rounded-full font-medium transition flex items-center">
+                            <i class="fas fa-phone-alt mr-2"></i> 0901.234.567
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-black py-12 px-4">
+        <div class="container mx-auto">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                <div>
+                    <div class="flex items-center mb-4">
+                        <i class="fas fa-tooth text-3xl text-teal-400 mr-3"></i>
+                        <h3 class="text-2xl font-bold bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">TTL1979</h3>
+                    </div>
+                    <p class="text-gray-400 mb-4">Nha khoa thẩm mỹ hàng đầu Việt Nam với hơn 15 năm kinh nghiệm.</p>
+                    <div class="flex space-x-4">
+                        <a href="#" class="text-gray-400 hover:text-teal-400 transition">
+                            <i class="fab fa-facebook-f"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-teal-400 transition">
+                            <i class="fab fa-instagram"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-teal-400 transition">
+                            <i class="fab fa-youtube"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-teal-400 transition">
+                            <i class="fab fa-tiktok"></i>
+                        </a>
+                    </div>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4 text-white border-b border-gray-800 pb-2">Dịch vụ</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-teal-400 transition">Dán sứ Veneer</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-teal-400 transition">Bọc răng sứ</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-teal-400 transition">Niềng răng</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-teal-400 transition">Cấy ghép Implant</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-teal-400 transition">Tẩy trắng răng</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4 text-white border-b border-gray-800 pb-2">Liên hệ</h4>
+                    <ul class="space-y-3 text-gray-400">
+                        <li class="flex items-start">
+                            <i class="fas fa-map-marker-alt mt-1 mr-3 text-teal-400"></i>
+                            <span>123 Nguyễn Văn Linh, Quận 7, TP.HCM</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-phone-alt mr-3 text-teal-400"></i>
+                            <span>0901.234.567</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-envelope mr-3 text-teal-400"></i>
+                            <span>info@ttl1979.com</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-clock mr-3 text-teal-400"></i>
+                            <span>8:00 - 20:00 (T2 - CN)</span>
+                        </li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4 text-white border-b border-gray-800 pb-2">Đăng ký nhận tin</h4>
+                    <p class="text-gray-400 mb-4">Nhận thông tin ưu đãi và kiến thức nha khoa hữu ích.</p>
+                    <form class="flex">
+                        <input type="email" placeholder="Email của bạn" class="bg-gray-900 text-white px-4 py-2 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-teal-500 w-full">
+                        <button type="submit" class="bg-teal-600 hover:bg-teal-700 text-white px-4 py-2 rounded-r-lg">
+                            <i class="fas fa-paper-plane"></i>
+                        </button>
+                    </form>
+                </div>
+            </div>
+            <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
+                <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2023 TTL1979. All rights reserved.</p>
+                <div class="flex space-x-6">
+                    <a href="#" class="text-gray-500 hover:text-teal-400 text-sm transition">Chính sách bảo mật</a>
+                    <a href="#" class="text-gray-500 hover:text-teal-400 text-sm transition">Điều khoản sử dụng</a>
+                    <a href="#" class="text-gray-500 hover:text-teal-400 text-sm transition">Sitemap</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Mobile menu toggle
+        const menuToggle = document.getElementById('menu-toggle');
+        const closeMenu = document.getElementById('close-menu');
+        const mobileMenu = document.getElementById('mobile-menu');
+        menuToggle.addEventListener('click', () => {
+            mobileMenu.classList.remove('hidden');
+            mobileMenu.classList.add('flex');
+        });
+        closeMenu.addEventListener('click', () => {
+            mobileMenu.classList.add('hidden');
+            mobileMenu.classList.remove('flex');
+        });
+        // Before/After slider
+        const slider = document.querySelector('.comparison-slider');
+        const beforeImage = document.querySelector('.before-image');
+        let isDragging = false;
+        slider.addEventListener('mousedown', (e) => {
+            isDragging = true;
+            document.addEventListener('mousemove', onDrag);
+            document.addEventListener('mouseup', () => {
+                isDragging = false;
+                document.removeEventListener('mousemove', onDrag);
+            });
+        });
+        slider.addEventListener('touchstart', (e) => {
+            isDragging = true;
+            document.addEventListener('touchmove', onDrag);
+            document.addEventListener('touchend', () => {
+                isDragging = false;
+                document.removeEventListener('touchmove', onDrag);
+            });
+        });
+        function onDrag(e) {
+            if (!isDragging) return;
+            let x;
+            if (e.type === 'mousemove') {
+                x = e.clientX;
+            } else if (e.type === 'touchmove') {
+                x = e.touches[0].clientX;
+            }
+            const containerRect = slider.parentNode.getBoundingClientRect();
+            let percentage = ((x - containerRect.left) / containerRect.width) * 100;
+            // Limit between 5% and 95%
+            percentage = Math.max(5, Math.min(95, percentage));
+            beforeImage.style.clipPath = `polygon(0 0, ${percentage}% 0, ${percentage}% 100%, 0% 100%)`;
+            slider.style.left = `${percentage}%`;
+        }
+        // Image gallery slider
+        const gallerySlider = document.getElementById('gallery-slider');
+        const prevSlide = document.getElementById('prev-slide');
+        const nextSlide = document.getElementById('next-slide');
+        const dots = document.querySelectorAll('.gallery-dot');
+        let currentSlide = 0;
+        function goToSlide(index) {
+            currentSlide = index;
+            gallerySlider.scrollTo({
+                left: gallerySlider.offsetWidth * index,
+                behavior: 'smooth'
+            });
+            updateDots();
+        }
+        function updateDots() {
+            dots.forEach((dot, index) => {
+                if (index === currentSlide) {
+                    dot.classList.add('bg-teal-500');
+                    dot.classList.remove('bg-gray-700');
+                } else {
+                    dot.classList.add('bg-gray-700');
+                    dot.classList.remove('bg-teal-500');
+                }
+            });
+        }
+        prevSlide.addEventListener('click', () => {
+            currentSlide = (currentSlide - 1 + dots.length) % dots.length;
+            goToSlide(currentSlide);
+        });
+        nextSlide.addEventListener('click', () => {
+            currentSlide = (currentSlide + 1) % dots.length;
+            goToSlide(currentSlide);
+        });
+        dots.forEach((dot, index) => {
+            dot.addEventListener('click', () => {
+                goToSlide(index);
+            });
+        });
+        // Initialize
+        updateDots();
+    </script>
+</body>
+</html>

templates/blog.html ADDED Viewed

	@@ -0,0 +1,526 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>10 Mẹo Chăm Sóc Răng Miệng Tại Nhà Hiệu Quả | TTL1979</title>
+    <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>
+        body {
+            background-color: #000;
+            color: #fff;
+            overflow-x: hidden;
+        }
+        .parallax-bg {
+            background-attachment: fixed;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: cover;
+            position: relative;
+            overflow: hidden;
+        }
+        .glow-effect {
+            position: absolute;
+            width: 200px;
+            height: 200px;
+            border-radius: 50%;
+            filter: blur(60px);
+            opacity: 0.3;
+            z-index: 0;
+        }
+        .glow-teal {
+            background: #38b2ac;
+        }
+        .glow-blue {
+            background: #3b82f6;
+        }
+        .glow-purple {
+            background: #8b5cf6;
+        }
+        .article-content img {
+            max-width: 100%;
+            height: auto;
+            border-radius: 8px;
+            margin: 30px 0;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+        }
+        .article-content h2 {
+            font-size: 1.8rem;
+            font-weight: bold;
+            margin: 40px 0 20px;
+            color: #38b2ac;
+            position: relative;
+            padding-left: 20px;
+        }
+        .article-content h2::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            height: 100%;
+            width: 5px;
+            background: linear-gradient(to bottom, #38b2ac, #3b82f6);
+            border-radius: 5px;
+        }
+        .article-content h3 {
+            font-size: 1.5rem;
+            font-weight: bold;
+            margin: 30px 0 15px;
+            color: #3b82f6;
+        }
+        .article-content p {
+            margin-bottom: 20px;
+            line-height: 1.8;
+            font-size: 1.1rem;
+        }
+        .article-content ul, .article-content ol {
+            margin-bottom: 20px;
+            padding-left: 30px;
+        }
+        .article-content ul {
+            list-style-type: disc;
+        }
+        .article-content ol {
+            list-style-type: decimal;
+        }
+        .article-content li {
+            margin-bottom: 10px;
+            line-height: 1.6;
+        }
+        .article-content blockquote {
+            border-left: 4px solid #38b2ac;
+            padding-left: 20px;
+            margin: 30px 0;
+            font-style: italic;
+            color: #a1a1aa;
+        }
+        .nav-link {
+            position: relative;
+        }
+        .nav-link::after {
+            content: '';
+            position: absolute;
+            width: 0;
+            height: 2px;
+            bottom: -2px;
+            left: 0;
+            background: #38b2ac;
+            transition: width 0.3s ease;
+        }
+        .nav-link:hover::after {
+            width: 100%;
+        }
+        .category-badge {
+            background: linear-gradient(45deg, #3b82f6, #8b5cf6);
+            color: white;
+            padding: 6px 12px;
+            border-radius: 20px;
+            font-size: 0.8rem;
+            font-weight: bold;
+            display: inline-block;
+        }
+        @media (max-width: 768px) {
+            .parallax-bg {
+                background-attachment: scroll;
+            }
+            .article-content h2 {
+                font-size: 1.5rem;
+            }
+            .article-content h3 {
+                font-size: 1.3rem;
+            }
+            .article-content p {
+                font-size: 1rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- Floating Glow Effects -->
+    <div class="glow-effect glow-teal" style="top: 10%; left: 10%;"></div>
+    <div class="glow-effect glow-blue" style="top: 60%; right: 5%;"></div>
+    <div class="glow-effect glow-purple" style="bottom: 10%; left: 20%;"></div>
+    <!-- Header -->
+    <header class="py-6 px-4 fixed w-full z-50 bg-black bg-opacity-80 backdrop-filter backdrop-blur-sm">
+        <div class="container mx-auto flex justify-between items-center">
+            <div class="flex items-center">
+                <i class="fas fa-tooth text-3xl text-teal-400 mr-3"></i>
+                <h1 class="text-2xl font-bold bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">TTL1979</h1>
+            </div>
+            <button id="menu-toggle" class="md:hidden text-white">
+                <i class="fas fa-bars text-2xl"></i>
+            </button>
+            <nav id="main-nav" class="hidden md:flex space-x-8">
+                <a href="index.html" class="nav-link text-white">Home</a>
+                <a href="thuvien.html" class="nav-link text-white">Thư viện</a>
+                <a href="dichvu.html" class="nav-link text-white">Dịch vụ</a>
+                <a href="blog.html" class="nav-link text-white font-bold text-teal-400">Blog</a>
+                <a href="lienhe.html" class="nav-link text-white">Liên hệ</a>
+            </nav>
+        </div>
+    </header>
+    <!-- Mobile Menu -->
+    <div id="mobile-menu" class="fixed inset-0 bg-black bg-opacity-90 z-40 hidden flex-col items-center justify-center space-y-8">
+        <button id="close-menu" class="absolute top-6 right-6 text-white text-2xl">
+            <i class="fas fa-times"></i>
+        </button>
+        <a href="index.html" class="text-white text-2xl">Home</a>
+        <a href="thuvien.html" class="text-white text-2xl">Thư viện</a>
+        <a href="dichvu.html" class="text-white text-2xl">Dịch vụ</a>
+        <a href="blog.html" class="text-white text-2xl font-bold text-teal-400">Blog</a>
+        <a href="lienhe.html" class="text-white text-2xl">Liên hệ</a>
+    </div>
+    <!-- Article Hero Section -->
+    <section class="parallax-bg min-h-[60vh] flex items-center justify-center pt-20" style="background-image: url('https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80')">
+        <div class="container mx-auto px-4 text-center relative z-10">
+            <div class="max-w-4xl mx-auto">
+                <span class="category-badge mb-4">Chăm sóc</span>
+                <h1 class="text-4xl md:text-5xl font-bold mb-6">10 Mẹo Chăm Sóc Răng Miệng Tại Nhà Hiệu Quả</h1>
+                <div class="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-8 text-gray-300">
+                    <div class="flex items-center">
+                        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author" class="w-10 h-10 rounded-full mr-3">
+                        <span>Bác sĩ Nguyễn Thị Hương</span>
+                    </div>
+                    <div class="flex items-center">
+                        <i class="far fa-calendar-alt mr-2"></i>
+                        <span>15/06/2023</span>
+                        <span class="mx-2">•</span>
+                        <i class="far fa-clock mr-2"></i>
+                        <span>5 phút đọc</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="absolute inset-0 bg-black bg-opacity-70"></div>
+    </section>
+    <!-- Article Content -->
+    <section class="py-16 px-4 relative">
+        <div class="container mx-auto max-w-4xl">
+            <div class="article-content">
+                <p class="text-xl mb-8">Chăm sóc răng miệng đúng cách không chỉ giúp bạn có hàm răng trắng sáng mà còn ngăn ngừa các bệnh lý về răng miệng. Dưới đây là 10 mẹo chăm sóc răng miệng tại nhà hiệu quả:</p>
+                <img src="https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Chăm sóc răng miệng tại nhà" class="rounded-xl">
+                <h2>1. Đánh răng đúng cách</h2>
+                <p>Đánh răng ít nhất 2 lần/ngày, mỗi lần 2 phút. Sử dụng bàn chải lông mềm và chải theo chiều dọc hoặc xoay tròn, không chải ngang.</p>
+                <p>Nên thay bàn chải 3-4 tháng/lần hoặc khi lông bàn chải bị xơ. Chọn kem đánh răng có chứa fluoride để giúp men răng chắc khỏe.</p>
+                <blockquote>
+                    "Thói quen đánh răng đúng cách là nền tảng của sức khỏe răng miệng. Hãy dành đủ thời gian và chú ý đến kỹ thuật chải răng."
+                </blockquote>
+                <h2>2. Sử dụng chỉ nha khoa</h2>
+                <p>Chỉ nha khoa giúp loại bỏ mảng bám và thức ăn thừa ở kẽ răng - nơi bàn chải không thể làm sạch được.</p>
+                <p>Cách dùng chỉ nha khoa đúng:</p>
+                <ul>
+                    <li>Lấy khoảng 45cm chỉ, cuốn phần lớn vào ngón tay giữa</li>
+                    <li>Giữ chỉ căng bằng ngón cái và ngón trỏ</li>
+                    <li>Nhẹ nhàng đưa chỉ vào kẽ răng, di chuyển lên xuống</li>
+                    <li>Dùng phần chỉ sạch cho mỗi kẽ răng</li>
+                </ul>
+                <h2>3. Súc miệng bằng nước muối</h2>
+                <p>Nước muối có tính sát khuẩn, giúp làm sạch khoang miệng và ngăn ngừa viêm nhiễm. Có thể pha 1/2 thìa cà phê muối với 250ml nước ấm.</p>
+                <p>Nên súc miệng sau khi đánh răng hoặc sau khi ăn nếu không thể đánh răng ngay.</p>
+                <img src="https://images.unsplash.com/photo-1606813907113-6e3bfa4b5a35?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Súc miệng bằng nước muối" class="rounded-xl">
+                <h2>4. Hạn chế thực phẩm có hại</h2>
+                <p>Giảm tiêu thụ đường, đồ ngọt, nước có gas và thực phẩm có màu dễ gây ố răng như cà phê, trà, rượu vang đỏ.</p>
+                <p>Nếu dùng các thực phẩm này, nên súc miệng bằng nước ngay sau đó.</p>
+                <h2>5. Uống nhiều nước</h2>
+                <p>Nước giúp làm sạch khoang miệng và kích thích tiết nước bọt - yếu tố bảo vệ răng tự nhiên. Nên uống 2-2.5 lít nước mỗi ngày.</p>
+                <h3>6. Ăn thực phẩm tốt cho răng</h3>
+                <p>Một số thực phẩm tốt cho răng miệng:</p>
+                <ul>
+                    <li><strong>Táo, cần tây:</strong> Giúp làm sạch răng tự nhiên</li>
+                    <li><strong>Phô mai, sữa chua:</strong> Giàu canxi tốt cho men răng</li>
+                    <li><strong>Rau xanh:</strong> Chứa nhiều vitamin và khoáng chất</li>
+                    <li><strong>Trà xanh:</strong> Chứa catechin có tác dụng kháng khuẩn</li>
+                </ul>
+                <img src="https://images.unsplash.com/photo-1490645935967-10de6ba17061?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Thực phẩm tốt cho răng" class="rounded-xl">
+                <h2>7. Không hút thuốc lá</h2>
+                <p>Thuốc lá gây vàng răng, hôi miệng và tăng nguy cơ ung thư khoang miệng. Nó cũng làm giảm khả năng lành thương của nướu.</p>
+                <h2>8. Khám nha khoa định kỳ</h2>
+                <p>Khám và cạo vôi răng 6 tháng/lần để:</p>
+                <ol>
+                    <li>Phát hiện sớm các vấn đề răng miệng</li>
+                    <li>Loại bỏ cao răng - nguyên nhân gây viêm nướu</li>
+                    <li>Được tư vấn chăm sóc răng miệng cá nhân hóa</li>
+                </ol>
+                <h2>9. Sử dụng dụng cụ vệ sinh lưỡi</h2>
+                <p>Làm sạch lưỡi giúp loại bỏ vi khuẩn gây hôi miệng. Nên vệ sinh lưỡi mỗi khi đánh răng bằng dụng cụ chuyên dụng hoặc mặt sau của bàn chải.</p>
+                <h2>10. Chú ý đến dấu hiệu bất thường</h2>
+                <p>Nên đi khám nha khoa ngay nếu có các dấu hiệu:</p>
+                <ul>
+                    <li>Chảy máu nướu khi đánh răng</li>
+                    <li>Răng nhạy cảm với nóng/lạnh</li>
+                    <li>Hôi miệng kéo dài</li>
+                    <li>Đau nhức răng hoặc nướu</li>
+                </ul>
+                <p>Áp dụng những mẹo đơn giản này hàng ngày sẽ giúp bạn có hàm răng khỏe mạnh và nụ cười tự tin!</p>
+            </div>
+            <!-- Article Tags -->
+            <div class="mt-12 pt-8 border-t border-gray-800">
+                <div class="flex flex-wrap gap-2">
+                    <span class="px-4 py-2 bg-gray-800 rounded-full text-sm">#chamsocrang</span>
+                    <span class="px-4 py-2 bg-gray-800 rounded-full text-sm">#vesinhrangmieng</span>
+                    <span class="px-4 py-2 bg-gray-800 rounded-full text-sm">#nhakhoa</span>
+                    <span class="px-4 py-2 bg-gray-800 rounded-full text-sm">#suckhoerangmieng</span>
+                </div>
+            </div>
+            <!-- Author Bio -->
+            <div class="mt-12 p-6 bg-gray-900 rounded-xl">
+                <div class="flex flex-col md:flex-row items-center">
+                    <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Bác sĩ Nguyễn Thị Hương" class="w-20 h-20 rounded-full mb-4 md:mb-0 md:mr-6">
+                    <div>
+                        <h3 class="text-xl font-bold">Bác sĩ Nguyễn Thị Hương</h3>
+                        <p class="text-gray-400 mb-3">Chuyên gia nha khoa với 15 năm kinh nghiệm</p>
+                        <p class="text-gray-300">Bác sĩ Hương tốt nghiệp Đại học Y Hà Nội, chuyên ngành Răng Hàm Mặt. Với kinh nghiệm lâm sàng phong phú, bác sĩ đã giúp hàng ngàn bệnh nhân cải thiện sức khỏe răng miệng.</p>
+                    </div>
+                </div>
+            </div>
+            <!-- Comments Section -->
+            <div class="mt-12 pt-8 border-t border-gray-800">
+                <h3 class="text-2xl font-bold mb-8 text-teal-400">Bình luận (3)</h3>
+                <div class="space-y-6 mb-8">
+                    <!-- Comment 1 -->
+                    <div class="flex">
+                        <div class="flex-shrink-0 mr-4">
+                            <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="User" class="w-12 h-12 rounded-full">
+                        </div>
+                        <div class="flex-grow">
+                            <div class="bg-gray-800 p-4 rounded-lg">
+                                <div class="flex justify-between items-center mb-2">
+                                    <h4 class="font-bold">Nguyễn Thị Mai</h4>
+                                    <span class="text-sm text-gray-500">2 ngày trước</span>
+                                </div>
+                                <p class="text-gray-300">Bài viết rất hữu ích, tôi đã áp dụng và thấy hiệu quả rõ rệt. Cảm ơn bác sĩ!</p>
+                                <button class="mt-2 text-sm text-gray-400 hover:text-teal-400">Trả lời</button>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Comment 2 -->
+                    <div class="flex">
+                        <div class="flex-shrink-0 mr-4">
+                            <img src="https://randomuser.me/api/portraits/men/54.jpg" alt="User" class="w-12 h-12 rounded-full">
+                        </div>
+                        <div class="flex-grow">
+                            <div class="bg-gray-800 p-4 rounded-lg">
+                                <div class="flex justify-between items-center mb-2">
+                                    <h4 class="font-bold">Trần Văn Nam</h4>
+                                    <span class="text-sm text-gray-500">1 tuần trước</span>
+                                </div>
+                                <p class="text-gray-300">Tôi đang tìm hiểu về dịch vụ này, bài viết giải đáp được nhiều thắc mắc của tôi.</p>
+                                <button class="mt-2 text-sm text-gray-400 hover:text-teal-400">Trả lời</button>
+                                <!-- Reply -->
+                                <div class="mt-4 pl-4 border-l-2 border-gray-700">
+                                    <div class="flex">
+                                        <div class="flex-shrink-0 mr-3">
+                                            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author" class="w-10 h-10 rounded-full">
+                                        </div>
+                                        <div class="bg-gray-700 p-3 rounded-lg">
+                                            <div class="flex justify-between items-center mb-1">
+                                                <h4 class="font-bold text-sm">Bác sĩ Hương</h4>
+                                            </div>
+                                            <p class="text-gray-300 text-sm">Cảm ơn anh Nam đã quan tâm. Nếu cần tư vấn thêm, anh có thể đặt lịch khám qua hotline 0832.919.878 nhé!</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Comment Form -->
+                <h3 class="text-2xl font-bold mb-6 text-teal-400">Để lại bình luận</h3>
+                <form class="space-y-4">
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <div>
+                            <input type="text" placeholder="Họ tên" class="w-full bg-gray-800 border border-gray-700 rounded-md px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-teal-500">
+                        </div>
+                        <div>
+                            <input type="email" placeholder="Email" class="w-full bg-gray-800 border border-gray-700 rounded-md px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-teal-500">
+                        </div>
+                    </div>
+                    <div>
+                        <textarea placeholder="Nội dung bình luận" rows="5" class="w-full bg-gray-800 border border-gray-700 rounded-md px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-teal-500"></textarea>
+                    </div>
+                    <button type="submit" class="bg-teal-500 hover:bg-teal-600 text-white px-6 py-3 rounded-md font-medium transition">Gửi bình luận</button>
+                </form>
+            </div>
+            <!-- Related Articles -->
+            <div class="mt-16">
+                <h3 class="text-2xl font-bold mb-8 text-teal-400">Bài viết liên quan</h3>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <!-- Related Article 1 -->
+                    <a href="#" class="group">
+                        <div class="flex items-center bg-gray-900 rounded-lg overflow-hidden transition hover:bg-gray-800">
+                            <div class="w-1/3">
+                                <img src="https://images.unsplash.com/photo-1622253692010-333f2da6031d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" alt="Tẩy trắng răng" class="w-full h-full object-cover">
+                            </div>
+                            <div class="w-2/3 p-4">
+                                <span class="text-xs text-teal-400">THẨM MỸ</span>
+                                <h4 class="font-bold mt-1 group-hover:text-teal-400 transition">Tẩy Trắng Răng: Những Điều Bạn Cần Biết</h4>
+                                <div class="flex items-center text-xs text-gray-500 mt-2">
+                                    <i class="far fa-clock mr-1"></i>
+                                    <span>7 phút đọc</span>
+                                </div>
+                            </div>
+                        </div>
+                    </a>
+                    <!-- Related Article 2 -->
+                    <a href="#" class="group">
+                        <div class="flex items-center bg-gray-900 rounded-lg overflow-hidden transition hover:bg-gray-800">
+                            <div class="w-1/3">
+                                <img src="https://images.unsplash.com/photo-1564078517170-9707c7a0e6b6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" alt="Niềng răng" class="w-full h-full object-cover">
+                            </div>
+                            <div class="w-2/3 p-4">
+                                <span class="text-xs text-blue-400">CHỈNH NHA</span>
+                                <h4 class="font-bold mt-1 group-hover:text-teal-400 transition">Niềng Răng Ở Tuổi Nào Là Tốt Nhất?</h4>
+                                <div class="flex items-center text-xs text-gray-500 mt-2">
+                                    <i class="far fa-clock mr-1"></i>
+                                    <span>10 phút đọc</span>
+                                </div>
+                            </div>
+                        </div>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- CTA Section -->
+    <section class="py-20 px-4 relative overflow-hidden bg-gradient-to-br from-gray-900 to-black">
+        <div class="glow-effect glow-teal" style="top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 300px;"></div>
+        <div class="container mx-auto text-center relative z-10">
+            <h2 class="text-3xl md:text-4xl font-bold mb-6 bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">Bạn có thắc mắc về sức khỏe răng miệng?</h2>
+            <p class="text-xl mb-8 max-w-2xl mx-auto text-gray-300">Đặt câu hỏi với bác sĩ chuyên khoa của chúng tôi</p>
+            <button class="bg-gradient-to-r from-teal-500 to-blue-600 text-white px-8 py-4 rounded-full font-semibold text-lg hover:opacity-90 transition shadow-lg">Đặt câu hỏi ngay</button>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-gray-900 text-white py-12 px-4">
+        <div class="container mx-auto">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                <div>
+                    <div class="flex items-center mb-4">
+                        <i class="fas fa-tooth text-2xl text-teal-400 mr-3"></i>
+                        <h3 class="text-xl font-bold">TTL1979</h3>
+                    </div>
+                    <p class="text-gray-400">Nha khoa thẩm mỹ lâu đời nhất Việt Nam</p>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Liên kết nhanh</h4>
+                    <ul class="space-y-2">
+                        <li><a href="index.html" class="text-gray-400 hover:text-teal-400 transition">Home</a></li>
+                        <li><a href="thuvien.html" class="text-gray-400 hover:text-teal-400 transition">Thư viện</a></li>
+                        <li><a href="dichvu.html" class="text-gray-400 hover:text-teal-400 transition">Dịch vụ</a></li>
+                        <li><a href="blog.html" class="text-gray-400 hover:text-teal-400 transition">Blog</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Liên hệ</h4>
+                    <ul class="space-y-2">
+                        <li class="flex items-center"><i class="fas fa-map-marker-alt mr-2 text-teal-400"></i> 160-162 Trần Phú, P. Vĩnh Thanh Vân, Tp. Rạch Giá, Kiên Giang</li>
+                        <li class="flex items-center"><i class="fas fa-phone mr-2 text-teal-400"></i> 0832.919.878 - 0849.421.979</li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Theo dõi chúng tôi</h4>
+                    <div class="flex space-x-4">
+                        <a href="https://www.facebook.com/nhakhoatranthanhlong" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-teal-500 transition">
+                            <i class="fab fa-facebook-f"></i>
+                        </a>
+                        <a href="https://www.instagram.com/nhakhoatranthanhlong/" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-blue-500 transition">
+                            <i class="fab fa-instagram"></i>
+                        </a>
+                        <a href="https://www.tiktok.com/@nkttl1979" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-purple-500 transition">
+                            <i class="fab fa-tiktok"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">
+                <p>&copy; 2023 TTL1979. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Mobile menu toggle
+        document.getElementById('menu-toggle').addEventListener('click', function() {
+            document.getElementById('mobile-menu').classList.remove('hidden');
+            document.getElementById('mobile-menu').classList.add('flex');
+            document.body.style.overflow = 'hidden';
+        });
+        document.getElementById('close-menu').addEventListener('click', function() {
+            document.getElementById('mobile-menu').classList.add('hidden');
+            document.getElementById('mobile-menu').classList.remove('flex');
+            document.body.style.overflow = 'auto';
+        });
+        // Parallax effect
+        window.addEventListener('scroll', function() {
+            const parallaxSections = document.querySelectorAll('.parallax-bg');
+            const scrollPosition = window.pageYOffset;
+            parallaxSections.forEach(section => {
+                if (window.innerWidth > 768) { // Only apply parallax on desktop
+                    section.style.backgroundPositionY = (scrollPosition * 0.5) + 'px';
+                }
+            });
+        });
+    </script>
+</body>
+</html>

templates/bloglist.html ADDED Viewed

	@@ -0,0 +1,792 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Blog - Trung Tâm Nha Khoa Nhẹ Nhàng</title>
+    <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>
+        body {
+            background-color: #000;
+            color: #fff;
+            overflow-x: hidden;
+        }
+        .parallax-bg {
+            background-attachment: fixed;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: cover;
+            position: relative;
+            overflow: hidden;
+        }
+        .glow-effect {
+            position: absolute;
+            width: 200px;
+            height: 200px;
+            border-radius: 50%;
+            filter: blur(60px);
+            opacity: 0.3;
+            z-index: 0;
+        }
+        .glow-teal {
+            background: #38b2ac;
+        }
+        .glow-blue {
+            background: #3b82f6;
+        }
+        .glow-purple {
+            background: #8b5cf6;
+        }
+        .blog-card {
+            position: relative;
+            overflow: hidden;
+            border-radius: 16px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+            transition: all 0.5s ease;
+            z-index: 1;
+            background: rgba(30, 41, 59, 0.7);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255,255,255,0.1);
+        }
+        .blog-card:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 15px 40px rgba(59, 130, 246, 0.4);
+        }
+        .blog-image {
+            position: relative;
+            width: 100%;
+            height: 250px;
+            overflow: hidden;
+        }
+        .blog-image img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            transition: transform 0.5s ease;
+        }
+        .blog-card:hover .blog-image img {
+            transform: scale(1.05);
+        }
+        .category-badge {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            background: linear-gradient(45deg, #3b82f6, #8b5cf6);
+            color: white;
+            padding: 6px 12px;
+            border-radius: 20px;
+            font-size: 0.8rem;
+            font-weight: bold;
+            z-index: 2;
+        }
+        .nav-link {
+            position: relative;
+        }
+        .nav-link::after {
+            content: '';
+            position: absolute;
+            width: 0;
+            height: 2px;
+            bottom: -2px;
+            left: 0;
+            background: #38b2ac;
+            transition: width 0.3s ease;
+        }
+        .nav-link:hover::after {
+            width: 100%;
+        }
+        .article-content img {
+            max-width: 100%;
+            height: auto;
+            border-radius: 8px;
+            margin: 20px 0;
+        }
+        .article-content h2 {
+            font-size: 1.5rem;
+            font-weight: bold;
+            margin: 20px 0 15px;
+            color: #38b2ac;
+        }
+        .article-content p {
+            margin-bottom: 15px;
+            line-height: 1.6;
+        }
+        .article-content ul {
+            list-style-type: disc;
+            padding-left: 20px;
+            margin-bottom: 15px;
+        }
+        @media (max-width: 768px) {
+            .parallax-bg {
+                background-attachment: scroll;
+            }
+            .blog-image {
+                height: 200px;
+            }
+            .blog-card:hover {
+                transform: none;
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- Floating Glow Effects -->
+    <div class="glow-effect glow-teal" style="top: 10%; left: 10%;"></div>
+    <div class="glow-effect glow-blue" style="top: 60%; right: 5%;"></div>
+    <div class="glow-effect glow-purple" style="bottom: 10%; left: 20%;"></div>
+    <!-- Header -->
+    <header class="py-6 px-4 fixed w-full z-50 bg-black bg-opacity-80 backdrop-filter backdrop-blur-sm">
+        <div class="container mx-auto flex justify-between items-center">
+            <div class="flex items-center">
+                <i class="fas fa-tooth text-3xl text-teal-400 mr-3"></i>
+                <h1 class="text-2xl font-bold bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">TTL1979</h1>
+            </div>
+            <button id="menu-toggle" class="md:hidden text-white">
+                <i class="fas fa-bars text-2xl"></i>
+            </button>
+            <nav id="main-nav" class="hidden md:flex space-x-8">
+                <a href="index.html" class="nav-link text-white">Home</a>
+                <a href="thuvien.html" class="nav-link text-white">Thư viện</a>
+                <a href="dichvu.html" class="nav-link text-white">Dịch vụ</a>
+                <a href="blog.html" class="nav-link text-white font-bold text-teal-400">Blog</a>
+                <a href="lienhe.html" class="nav-link text-white">Liên hệ</a>
+            </nav>
+        </div>
+    </header>
+    <!-- Mobile Menu -->
+    <div id="mobile-menu" class="fixed inset-0 bg-black bg-opacity-90 z-40 hidden flex-col items-center justify-center space-y-8">
+        <button id="close-menu" class="absolute top-6 right-6 text-white text-2xl">
+            <i class="fas fa-times"></i>
+        </button>
+        <a href="index.html" class="text-white text-2xl">Home</a>
+        <a href="thuvien.html" class="text-white text-2xl">Thư viện</a>
+        <a href="dichvu.html" class="text-white text-2xl">Dịch vụ</a>
+        <a href="blog.html" class="text-white text-2xl font-bold text-teal-400">Blog</a>
+        <a href="lienhe.html" class="text-white text-2xl">Liên hệ</a>
+    </div>
+    <!-- Hero Section -->
+    <section class="parallax-bg min-h-[50vh] flex items-center justify-center pt-20" style="background-image: url('https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80')">
+        <div class="container mx-auto px-4 text-center relative z-10">
+            <h2 class="text-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">Kiến Thức Nha Khoa</h2>
+            <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto text-gray-300">Cập nhật những thông tin mới nhất về chăm sóc răng miệng và các dịch vụ nha khoa</p>
+        </div>
+        <div class="absolute inset-0 bg-black bg-opacity-60"></div>
+    </section>
+    <!-- Blog Section -->
+    <section class="py-20 px-4 relative overflow-hidden">
+        <div class="container mx-auto">
+            <div class="text-center mb-16 relative z-10">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4 bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">Bài Viết Mới Nhất</h2>
+                <p class="text-gray-400 max-w-2xl mx-auto">Khám phá những kiến thức hữu ích về chăm sóc răng miệng</p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 relative z-10">
+                <!-- Blog Post 1 -->
+                <div class="blog-card">
+                    <div class="blog-image">
+                        <img src="https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Chăm sóc răng miệng">
+                        <div class="category-badge">Chăm sóc</div>
+                    </div>
+                    <div class="p-6">
+                        <div class="flex items-center text-sm text-gray-400 mb-3">
+                            <i class="far fa-calendar-alt mr-2"></i>
+                            <span>15/06/2023</span>
+                            <span class="mx-2">•</span>
+                            <i class="far fa-clock mr-2"></i>
+                            <span>5 phút đọc</span>
+                        </div>
+                        <h3 class="font-bold text-xl mb-3">10 Mẹo Chăm Sóc Răng Miệng Tại Nhà Hiệu Quả</h3>
+                        <p class="text-gray-400 mb-4">Khám phá những phương pháp đơn giản nhưng hiệu quả để duy trì sức khỏe răng miệng tại nhà...</p>
+                        <div class="flex justify-between items-center">
+                            <a href="#" class="text-teal-400 hover:text-teal-300 font-medium">Đọc tiếp <i class="fas fa-arrow-right ml-1"></i></a>
+                            <div class="flex items-center text-gray-500 text-sm">
+                                <i class="far fa-eye mr-1"></i>
+                                <span>1.2K</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Blog Post 2 -->
+                <div class="blog-card">
+                    <div class="blog-image">
+                        <img src="https://images.unsplash.com/photo-1622253692010-333f2da6031d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Tẩy trắng răng">
+                        <div class="category-badge">Thẩm mỹ</div>
+                    </div>
+                    <div class="p-6">
+                        <div class="flex items-center text-sm text-gray-400 mb-3">
+                            <i class="far fa-calendar-alt mr-2"></i>
+                            <span>10/06/2023</span>
+                            <span class="mx-2">•</span>
+                            <i class="far fa-clock mr-2"></i>
+                            <span>7 phút đọc</span>
+                        </div>
+                        <h3 class="font-bold text-xl mb-3">Tẩy Trắng Răng: Những Điều Bạn Cần Biết Trước Khi Thực Hiện</h3>
+                        <p class="text-gray-400 mb-4">Tẩy trắng răng là phương pháp thẩm mỹ phổ biến nhưng không phải ai cũng hiểu rõ về quy trình và hiệu quả...</p>
+                        <div class="flex justify-between items-center">
+                            <a href="#" class="text-teal-400 hover:text-teal-300 font-medium">Đọc tiếp <i class="fas fa-arrow-right ml-1"></i></a>
+                            <div class="flex items-center text-gray-500 text-sm">
+                                <i class="far fa-eye mr-1"></i>
+                                <span>2.5K</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Blog Post 3 -->
+                <div class="blog-card">
+                    <div class="blog-image">
+                        <img src="https://images.unsplash.com/photo-1564078517170-9707c7a0e6b6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Niềng răng">
+                        <div class="category-badge">Chỉnh nha</div>
+                    </div>
+                    <div class="p-6">
+                        <div class="flex items-center text-sm text-gray-400 mb-3">
+                            <i class="far fa-calendar-alt mr-2"></i>
+                            <span>05/06/2023</span>
+                            <span class="mx-2">•</span>
+                            <i class="far fa-clock mr-2"></i>
+                            <span>10 phút đọc</span>
+                        </div>
+                        <h3 class="font-bold text-xl mb-3">Niềng Răng Ở Tuổi Nào Là Tốt Nhất? Giải Đáp Từ Chuyên Gia</h3>
+                        <p class="text-gray-400 mb-4">Nhiều người thắc mắc về độ tuổi thích hợp để niềng răng. Bài viết này sẽ giúp bạn hiểu rõ hơn về vấn đề này...</p>
+                        <div class="flex justify-between items-center">
+                            <a href="#" class="text-teal-400 hover:text-teal-300 font-medium">Đọc tiếp <i class="fas fa-arrow-right ml-1"></i></a>
+                            <div class="flex items-center text-gray-500 text-sm">
+                                <i class="far fa-eye mr-1"></i>
+                                <span>3.1K</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Blog Post 4 -->
+                <div class="blog-card">
+                    <div class="blog-image">
+                        <img src="https://images.unsplash.com/photo-1597251377449-eb8a2dea9a8a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Trám răng">
+                        <div class="category-badge">Điều trị</div>
+                    </div>
+                    <div class="p-6">
+                        <div class="flex items-center text-sm text-gray-400 mb-3">
+                            <i class="far fa-calendar-alt mr-2"></i>
+                            <span>01/06/2023</span>
+                            <span class="mx-2">•</span>
+                            <i class="far fa-clock mr-2"></i>
+                            <span>6 phút đọc</span>
+                        </div>
+                        <h3 class="font-bold text-xl mb-3">Trám Răng Thẩm Mỹ: Giải Pháp Cho Răng Sứt Mẻ, Thưa Kẽ</h3>
+                        <p class="text-gray-400 mb-4">Trám răng thẩm mỹ không chỉ khắc phục các khuyết điểm mà còn mang lại nụ cười tự nhiên, hài hòa...</p>
+                        <div class="flex justify-between items-center">
+                            <a href="#" class="text-teal-400 hover:text-teal-300 font-medium">Đọc tiếp <i class="fas fa-arrow-right ml-1"></i></a>
+                            <div class="flex items-center text-gray-500 text-sm">
+                                <i class="far fa-eye mr-1"></i>
+                                <span>1.8K</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Blog Post 5 -->
+                <div class="blog-card">
+                    <div class="blog-image">
+                        <img src="https://images.unsplash.com/photo-1560869713-8acaebf44127?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Cấy ghép implant">
+                        <div class="category-badge">Phục hình</div>
+                    </div>
+                    <div class="p-6">
+                        <div class="flex items-center text-sm text-gray-400 mb-3">
+                            <i class="far fa-calendar-alt mr-2"></i>
+                            <span>25/05/2023</span>
+                            <span class="mx-2">•</span>
+                            <i class="far fa-clock mr-2"></i>
+                            <span>8 phút đọc</span>
+                        </div>
+                        <h3 class="font-bold text-xl mb-3">Cấy Ghép Implant: Giải Pháp Tối Ưu Cho Răng Mất</h3>
+                        <p class="text-gray-400 mb-4">Implant không chỉ khôi phục chức năng nhai mà còn ngăn ngừa tiêu xương hàm, bảo vệ sức khỏe lâu dài...</p>
+                        <div class="flex justify-between items-center">
+                            <a href="#" class="text-teal-400 hover:text-teal-300 font-medium">Đọc tiếp <i class="fas fa-arrow-right ml-1"></i></a>
+                            <div class="flex items-center text-gray-500 text-sm">
+                                <i class="far fa-eye mr-1"></i>
+                                <span>2.2K</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Blog Post 6 -->
+                <div class="blog-card">
+                    <div class="blog-image">
+                        <img src="https://images.unsplash.com/photo-1564078517170-9707c7a0e6b6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Chăm sóc trẻ em">
+                        <div class="category-badge">Nhi khoa</div>
+                    </div>
+                    <div class="p-6">
+                        <div class="flex items-center text-sm text-gray-400 mb-3">
+                            <i class="far fa-calendar-alt mr-2"></i>
+                            <span>20/05/2023</span>
+                            <span class="mx-2">•</span>
+                            <i class="far fa-clock mr-2"></i>
+                            <span>4 phút đọc</span>
+                        </div>
+                        <h3 class="font-bold text-xl mb-3">Hướng Dẫn Chăm Sóc Răng Miệng Cho Trẻ Em Theo Từng Độ Tuổi</h3>
+                        <p class="text-gray-400 mb-4">Chăm sóc răng miệng cho trẻ cần được thực hiện ngay từ khi chiếc răng đầu tiên xuất hiện...</p>
+                        <div class="flex justify-between items-center">
+                            <a href="#" class="text-teal-400 hover:text-teal-300 font-medium">Đọc tiếp <i class="fas fa-arrow-right ml-1"></i></a>
+                            <div class="flex items-center text-gray-500 text-sm">
+                                <i class="far fa-eye mr-1"></i>
+                                <span>1.5K</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="flex justify-center mt-16">
+                <nav class="flex items-center space-x-2">
+                    <a href="#" class="px-4 py-2 border border-gray-700 rounded-md text-gray-400 hover:bg-teal-500 hover:text-white hover:border-teal-500 transition">
+                        <i class="fas fa-chevron-left"></i>
+                    </a>
+                    <a href="#" class="px-4 py-2 border border-teal-500 bg-teal-500 rounded-md text-white">1</a>
+                    <a href="#" class="px-4 py-2 border border-gray-700 rounded-md text-gray-400 hover:bg-teal-500 hover:text-white hover:border-teal-500 transition">2</a>
+                    <a href="#" class="px-4 py-2 border border-gray-700 rounded-md text-gray-400 hover:bg-teal-500 hover:text-white hover:border-teal-500 transition">3</a>
+                    <a href="#" class="px-4 py-2 border border-gray-700 rounded-md text-gray-400 hover:bg-teal-500 hover:text-white hover:border-teal-500 transition">
+                        <i class="fas fa-chevron-right"></i>
+                    </a>
+                </nav>
+            </div>
+        </div>
+    </section>
+    <!-- Popular Categories -->
+    <section class="py-16 px-4 bg-gray-900 relative overflow-hidden">
+        <div class="container mx-auto">
+            <div class="text-center mb-12 relative z-10">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4 bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">Chuyên Mục Phổ Biến</h2>
+                <p class="text-gray-400 max-w-2xl mx-auto">Khám phá các chủ đề được quan tâm nhiều nhất</p>
+            </div>
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-6 relative z-10">
+                <a href="#" class="bg-gray-800 rounded-xl p-6 hover:bg-teal-500 transition group">
+                    <div class="w-16 h-16 bg-teal-500 rounded-full flex items-center justify-center mb-4 group-hover:bg-white">
+                        <i class="fas fa-tooth text-2xl text-white group-hover:text-teal-500"></i>
+                    </div>
+                    <h3 class="font-bold text-lg mb-2 group-hover:text-white">Chăm sóc</h3>
+                    <p class="text-gray-400 text-sm group-hover:text-gray-200">12 bài viết</p>
+                </a>
+                <a href="#" class="bg-gray-800 rounded-xl p-6 hover:bg-blue-500 transition group">
+                    <div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center mb-4 group-hover:bg-white">
+                        <i class="fas fa-smile text-2xl text-white group-hover:text-blue-500"></i>
+                    </div>
+                    <h3 class="font-bold text-lg mb-2 group-hover:text-white">Thẩm mỹ</h3>
+                    <p class="text-gray-400 text-sm group-hover:text-gray-200">8 bài viết</p>
+                </a>
+                <a href="#" class="bg-gray-800 rounded-xl p-6 hover:bg-purple-500 transition group">
+                    <div class="w-16 h-16 bg-purple-500 rounded-full flex items-center justify-center mb-4 group-hover:bg-white">
+                        <i class="fas fa-teeth text-2xl text-white group-hover:text-purple-500"></i>
+                    </div>
+                    <h3 class="font-bold text-lg mb-2 group-hover:text-white">Chỉnh nha</h3>
+                    <p class="text-gray-400 text-sm group-hover:text-gray-200">6 bài viết</p>
+                </a>
+                <a href="#" class="bg-gray-800 rounded-xl p-6 hover:bg-pink-500 transition group">
+                    <div class="w-16 h-16 bg-pink-500 rounded-full flex items-center justify-center mb-4 group-hover:bg-white">
+                        <i class="fas fa-baby text-2xl text-white group-hover:text-pink-500"></i>
+                    </div>
+                    <h3 class="font-bold text-lg mb-2 group-hover:text-white">Nhi khoa</h3>
+                    <p class="text-gray-400 text-sm group-hover:text-gray-200">5 bài viết</p>
+                </a>
+            </div>
+        </div>
+    </section>
+    <!-- Article Detail Modal (Hidden by default) -->
+    <div id="article-modal" class="fixed inset-0 bg-black bg-opacity-90 z-50 hidden overflow-y-auto">
+        <div class="container mx-auto px-4 py-20 relative">
+            <button id="close-modal" class="absolute top-6 right-6 text-white text-3xl hover:text-teal-400 transition">
+                <i class="fas fa-times"></i>
+            </button>
+            <div class="max-w-4xl mx-auto bg-gray-900 rounded-xl overflow-hidden">
+                <div class="relative h-96 overflow-hidden">
+                    <img id="modal-image" src="" alt="" class="w-full h-full object-cover">
+                    <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
+                    <div class="absolute bottom-0 left-0 p-8">
+                        <span id="modal-category" class="inline-block px-4 py-1 bg-teal-500 text-white rounded-full text-sm font-medium mb-3"></span>
+                        <h2 id="modal-title" class="text-3xl md:text-4xl font-bold text-white mb-4"></h2>
+                        <div class="flex items-center text-gray-300">
+                            <div class="flex items-center mr-6">
+                                <i class="far fa-calendar-alt mr-2"></i>
+                                <span id="modal-date"></span>
+                            </div>
+                            <div class="flex items-center">
+                                <i class="far fa-clock mr-2"></i>
+                                <span id="modal-time"></span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="p-8 md:p-12">
+                    <div id="modal-content" class="article-content text-gray-300">
+                        <!-- Content will be loaded here -->
+                    </div>
+                    <div class="mt-12 pt-8 border-t border-gray-800">
+                        <h3 class="text-xl font-bold mb-6 text-teal-400">Bình luận (3)</h3>
+                        <div class="space-y-6 mb-8">
+                            <!-- Comment 1 -->
+                            <div class="flex">
+                                <div class="flex-shrink-0 mr-4">
+                                    <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="User" class="w-12 h-12 rounded-full">
+                                </div>
+                                <div>
+                                    <div class="bg-gray-800 p-4 rounded-lg">
+                                        <div class="flex justify-between items-center mb-2">
+                                            <h4 class="font-bold">Nguyễn Thị Mai</h4>
+                                            <span class="text-sm text-gray-500">2 ngày trước</span>
+                                        </div>
+                                        <p class="text-gray-300">Bài viết rất hữu ích, tôi đã áp dụng và thấy hiệu quả rõ rệt. Cảm ơn bác sĩ!</p>
+                                    </div>
+                                </div>
+                            </div>
+                            <!-- Comment 2 -->
+                            <div class="flex">
+                                <div class="flex-shrink-0 mr-4">
+                                    <img src="https://randomuser.me/api/portraits/men/54.jpg" alt="User" class="w-12 h-12 rounded-full">
+                                </div>
+                                <div>
+                                    <div class="bg-gray-800 p-4 rounded-lg">
+                                        <div class="flex justify-between items-center mb-2">
+                                            <h4 class="font-bold">Trần Văn Nam</h4>
+                                            <span class="text-sm text-gray-500">1 tuần trước</span>
+                                        </div>
+                                        <p class="text-gray-300">Tôi đang tìm hiểu về dịch vụ này, bài viết giải đáp được nhiều thắc mắc của tôi.</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <h3 class="text-xl font-bold mb-6 text-teal-400">Để lại bình luận</h3>
+                        <form class="space-y-4">
+                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                <div>
+                                    <input type="text" placeholder="Họ tên" class="w-full bg-gray-800 border border-gray-700 rounded-md px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-teal-500">
+                                </div>
+                                <div>
+                                    <input type="email" placeholder="Email" class="w-full bg-gray-800 border border-gray-700 rounded-md px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-teal-500">
+                                </div>
+                            </div>
+                            <div>
+                                <textarea placeholder="Nội dung bình luận" rows="4" class="w-full bg-gray-800 border border-gray-700 rounded-md px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-teal-500"></textarea>
+                            </div>
+                            <button type="submit" class="bg-teal-500 hover:bg-teal-600 text-white px-6 py-3 rounded-md font-medium transition">Gửi bình luận</button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- CTA Section -->
+    <section class="py-20 px-4 relative overflow-hidden">
+        <div class="glow-effect glow-teal" style="top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 300px;"></div>
+        <div class="container mx-auto text-center relative z-10">
+            <h2 class="text-3xl md:text-4xl font-bold mb-6 bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">Bạn có thắc mắc về sức khỏe răng miệng?</h2>
+            <p class="text-xl mb-8 max-w-2xl mx-auto text-gray-300">Đặt câu hỏi với bác sĩ chuyên khoa của chúng tôi</p>
+            <button class="bg-gradient-to-r from-teal-500 to-blue-600 text-white px-8 py-4 rounded-full font-semibold text-lg hover:opacity-90 transition shadow-lg">Đặt câu hỏi ngay</button>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-gray-900 text-white py-12 px-4">
+        <div class="container mx-auto">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                <div>
+                    <div class="flex items-center mb-4">
+                        <i class="fas fa-tooth text-2xl text-teal-400 mr-3"></i>
+                        <h3 class="text-xl font-bold">TTL1979</h3>
+                    </div>
+                    <p class="text-gray-400">Nha khoa thẩm mỹ lâu đời nhất Việt Nam</p>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Liên kết nhanh</h4>
+                    <ul class="space-y-2">
+                        <li><a href="index.html" class="text-gray-400 hover:text-teal-400 transition">Home</a></li>
+                        <li><a href="thuvien.html" class="text-gray-400 hover:text-teal-400 transition">Thư viện</a></li>
+                        <li><a href="dichvu.html" class="text-gray-400 hover:text-teal-400 transition">Dịch vụ</a></li>
+                        <li><a href="blog.html" class="text-gray-400 hover:text-teal-400 transition">Blog</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Liên hệ</h4>
+                    <ul class="space-y-2">
+                        <li class="flex items-center"><i class="fas fa-map-marker-alt mr-2 text-teal-400"></i> 160-162 Trần Phú, P. Vĩnh Thanh Vân, Tp. Rạch Giá, Kiên Giang</li>
+                        <li class="flex items-center"><i class="fas fa-phone mr-2 text-teal-400"></i> 0832.919.878 - 0849.421.979</li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Theo dõi chúng tôi</h4>
+                    <div class="flex space-x-4">
+                        <a href="https://www.facebook.com/nhakhoatranthanhlong" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-teal-500 transition">
+                            <i class="fab fa-facebook-f"></i>
+                        </a>
+                        <a href="https://www.instagram.com/nhakhoatranthanhlong/" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-blue-500 transition">
+                            <i class="fab fa-instagram"></i>
+                        </a>
+                        <a href="https://www.tiktok.com/@nkttl1979" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-purple-500 transition">
+                            <i class="fab fa-tiktok"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">
+                <p>&copy; 2023 TTL1979. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Mobile menu toggle
+        document.getElementById('menu-toggle').addEventListener('click', function() {
+            document.getElementById('mobile-menu').classList.remove('hidden');
+            document.getElementById('mobile-menu').classList.add('flex');
+        });
+        document.getElementById('close-menu').addEventListener('click', function() {
+            document.getElementById('mobile-menu').classList.add('hidden');
+            document.getElementById('mobile-menu').classList.remove('flex');
+        });
+        // Article modal functionality
+        const blogCards = document.querySelectorAll('.blog-card');
+        const articleModal = document.getElementById('article-modal');
+        const closeModal = document.getElementById('close-modal');
+        // Sample articles data (in a real app, this would come from a database)
+        const articles = {
+            'article1': {
+                title: '10 Mẹo Chăm Sóc Răng Miệng Tại Nhà Hiệu Quả',
+                category: 'Chăm sóc',
+                date: '15/06/2023',
+                time: '5 phút đọc',
+                image: 'https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80',
+                content: `
+                    <p>Chăm sóc răng miệng đúng cách không chỉ giúp bạn có hàm răng trắng sáng mà còn ngăn ngừa các bệnh lý về răng miệng. Dưới đây là 10 mẹo chăm sóc răng miệng tại nhà hiệu quả:</p>
+                    <h2>1. Đánh răng đúng cách</h2>
+                    <p>Đánh răng ít nhất 2 lần/ngày, mỗi lần 2 phút. Sử dụng bàn chải lông mềm và chải theo chiều dọc hoặc xoay tròn, không chải ngang.</p>
+                    <img src="https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Đánh răng đúng cách">
+                    <h2>2. Sử dụng chỉ nha khoa</h2>
+                    <p>Chỉ nha khoa giúp loại bỏ mảng bám và thức ăn thừa ở kẽ răng - nơi bàn chải không thể làm sạch được.</p>
+                    <h2>3. Súc miệng bằng nước muối</h2>
+                    <p>Nước muối có tính sát khuẩn, giúp làm sạch khoang miệng và ngăn ngừa viêm nhiễm.</p>
+                    <h2>4. Hạn chế thực phẩm có hại</h2>
+                    <p>Giảm tiêu thụ đường, đồ ngọt, nước có gas và thực phẩm có màu dễ gây ố răng.</p>
+                    <h2>5. Uống nhiều nước</h2>
+                    <p>Nước giúp làm sạch khoang miệng và kích thích tiết nước bọt - yếu tố bảo vệ răng tự nhiên.</p>
+                    <h2>6. Ăn thực phẩm tốt cho răng</h2>
+                    <p>Táo, cần tây, phô mai, sữa chua... là những thực phẩm giúp làm sạch và bảo vệ răng.</p>
+                    <h2>7. Thay bàn chải định kỳ</h2>
+                    <p>Thay bàn chải 3-4 tháng/lần hoặc khi lông bàn chải bị xơ.</p>
+                    <h2>8. Không hút thuốc lá</h2>
+                    <p>Thuốc lá gây vàng răng, hôi miệng và tăng nguy cơ ung thư khoang miệng.</p>
+                    <h2>9. Khám nha khoa định kỳ</h2>
+                    <p>Khám và cạo vôi răng 6 tháng/lần để phát hiện sớm các vấn đề răng miệng.</p>
+                    <h2>10. Sử dụng dụng cụ vệ sinh lưỡi</h2>
+                    <p>Làm sạch lưỡi giúp loại bỏ vi khuẩn gây hôi miệng.</p>
+                    <p>Áp dụng những mẹo đơn giản này hàng ngày sẽ giúp bạn có hàm răng khỏe mạnh và nụ cười tự tin!</p>
+                `
+            },
+            'article2': {
+                title: 'Tẩy Trắng Răng: Những Điều Bạn Cần Biết Trước Khi Thực Hiện',
+                category: 'Thẩm mỹ',
+                date: '10/06/2023',
+                time: '7 phút đọc',
+                image: 'https://images.unsplash.com/photo-1622253692010-333f2da6031d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80',
+                content: `
+                    <p>Tẩy trắng răng là phương pháp thẩm mỹ nha khoa phổ biến giúp cải thiện màu sắc răng. Tuy nhiên, không phải ai cũng hiểu rõ về phương pháp này.</p>
+                    <h2>1. Nguyên nhân gây ố vàng răng</h2>
+                    <ul>
+                        <li>Thực phẩm, đồ uống có màu: cà phê, trà, rượu vang đỏ, nước ngọt có gas</li>
+                        <li>Hút thuốc lá</li>
+                        <li>Vệ sinh răng miệng kém</li>
+                        <li>Tuổi tác (răng bị xỉn màu tự nhiên theo thời gian)</li>
+                        <li>Một số loại thuốc kháng sinh</li>
+                    </ul>
+                    <h2>2. Các phương pháp tẩy trắng răng</h2>
+                    <h3>Tẩy trắng tại phòng nha</h3>
+                    <p>Được thực hiện bởi bác sĩ nha khoa, sử dụng thuốc tẩy nồng độ cao kết hợp với đèn chiếu để kích hoạt. Hiệu quả ngay sau 1 lần điều trị.</p>
+                    <h3>Tẩy trắng tại nhà</h3>
+                    <p>Bác sĩ sẽ làm máng tẩy và cung cấp thuốc tẩy nồng độ thấp để sử dụng tại nhà trong 1-2 tuần.</p>
+                    <h3>Tẩy trắng kết hợp</h3>
+                    <p>Kết hợp cả 2 phương pháp trên để đạt hiệu quả tối ưu.</p>
+                    <h2>3. Ai nên và không nên tẩy trắng răng?</h2>
+                    <p><strong>Nên tẩy trắng:</strong> Người có răng ố vàng do thực phẩm, thuốc lá, tuổi tác; Răng khỏe mạnh, không sâu, không viêm nướu.</p>
+                    <p><strong>Không nên tẩy trắng:</strong> Phụ nữ mang thai và cho con bú; Trẻ em dưới 16 tuổi; Người dị ứng với thành phần thuốc tẩy; Răng nhạy cảm; Răng có miếng trám lớn hoặc răng sứ.</p>
+                    <h2>4. Hiệu quả và độ bền</h2>
+                    <p>Tùy phương pháp và cơ địa mỗi người, răng có thể trắng hơn từ 3-8 tông màu. Hiệu quả duy trì từ 6 tháng đến 2 năm.</p>
+                    <h2>5. Tác dụng phụ có thể gặp</h2>
+                    <ul>
+                        <li>Răng nhạy cảm tạm thời</li>
+                        <li>Kích ứng nướu nhẹ</li>
+                        <li>Khó chịu ở cổ họng nếu nuốt phải thuốc tẩy</li>
+                    </ul>
+                    <p>Để đảm bảo an toàn và hiệu quả, bạn nên tẩy trắng răng tại các cơ sở nha khoa uy tín dưới sự giám sát của bác sĩ chuyên khoa.</p>
+                `
+            },
+            'article3': {
+                title: 'Niềng Răng Ở Tuổi Nào Là Tốt Nhất? Giải Đáp Từ Chuyên Gia',
+                category: 'Chỉnh nha',
+                date: '05/06/2023',
+                time: '10 phút đọc',
+                image: 'https://images.unsplash.com/photo-1564078517170-9707c7a0e6b6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80',
+                content: `
+                    <p>Niềng răng là phương pháp chỉnh nha phổ biến giúp điều chỉnh các khuyết điểm về vị trí răng và hàm. Nhiều người thắc mắc về độ tuổi thích hợp để niềng răng.</p>
+                    <h2>1. Độ tuổi vàng để niềng răng</h2>
+                    <p>Theo Hiệp hội Nha khoa Hoa Kỳ (ADA), độ tuổi lý tưởng nhất để niềng răng là từ 9-14 tuổi. Ở giai đoạn này:</p>
+                    <ul>
+                        <li>Xương hàm đang phát triển, dễ điều chỉnh</li>
+                        <li>Răng vĩnh viễn đã mọc gần đầy đủ</li>
+                        <li>Cơ thể có khả năng thích nghi và phục hồi tốt</li>
+                    </ul>
+                    <h2>2. Niềng răng ở người trưởng thành</h2>
+                    <p>Ngày nay, niềng răng vẫn có thể thực hiện hiệu quả ở người trưởng thành. Tuy nhiên:</p>
+                    <ul>
+                        <li>Thời gian điều trị lâu hơn (thường 18-36 tháng)</li>
+                        <li>Có thể cần nhổ răng hoặc phẫu thuật chỉnh hình trong một số trường hợp</li>
+                        <li>Chi phí cao hơn so với trẻ em</li>
+                    </ul>
+                    <h2>3. Các phương pháp niềng răng phổ biến</h2>
+                    <h3>Niềng răng mắc cài kim loại</h3>
+                    <p>Phương pháp truyền thống, hiệu quả cao, chi phí thấp nhưng kém thẩm mỹ.</p>
+                    <h3>Niềng răng mắc cài sứ</h3>
+                    <p>Mắc cài làm từ sứ có màu gần giống răng, thẩm mỹ hơn mắc cài kim loại.</p>
+                    <h3>Niềng răng mặt trong</h3>
+                    <p>Mắc cài gắn ở mặt trong răng, hoàn toàn vô hình khi nhìn từ bên ngoài.</p>
+                    <h3>Niềng răng trong suốt (Invisalign)</h3>
+                    <p>Sử dụng khay nhựa trong suốt có thể tháo lắp, thẩm mỹ cao nhưng chi phí đắt nhất.</p>
+                    <h2>4. Dấu hiệu cần niềng răng</h2>
+                    <ul>
+                        <li>Răng hô, móm, thưa, chen chúc</li>
+                        <li>Khớp cắn không chuẩn (cắn hở, cắn sâu, cắn chéo)</li>
+                        <li>Khó khăn khi nhai hoặc phát âm</li>
+                        <li>Đau khớp thái dương hàm</li>
+                    </ul>
+                    <h2>5. Lợi ích của niềng răng</h2>
+                    <ul>
+                        <li>Cải thiện chức năng nhai</li>
+                        <li>Ngăn ngừa các vấn đề về khớp thái dương hàm</li>
+                        <li>Dễ dàng vệ sinh răng miệng</li>
+                        <li>Tăng tính thẩm mỹ và sự tự tin</li>
+                    </ul>
+                    <p>Dù ở độ tuổi nào, bạn nên thăm khám với bác sĩ chỉnh nha để được tư vấn phương pháp phù hợp nhất với tình trạng răng miệng của mình.</p>
+                `
+            }
+        };
+        // Add click event to blog cards
+        blogCards.forEach((card, index) => {
+            card.addEventListener('click', function() {
+                const articleId = 'article' + (index + 1);
+                const article = articles[articleId];
+                if (article) {
+                    document.getElementById('modal-title').textContent = article.title;
+                    document.getElementById('modal-category').textContent = article.category;
+                    document.getElementById('modal-date').textContent = article.date;
+                    document.getElementById('modal-time').textContent = article.time;
+                    document.getElementById('modal-image').src = article.image;
+                    document.getElementById('modal-content').innerHTML = article.content;
+                    articleModal.classList.remove('hidden');
+                    document.body.style.overflow = 'hidden';
+                }
+            });
+        });
+        // Close modal
+        closeModal.addEventListener('click', function() {
+            articleModal.classList.add('hidden');
+            document.body.style.overflow = 'auto';
+        });
+        // Close modal when clicking outside
+        articleModal.addEventListener('click', function(e) {
+            if (e.target === articleModal) {
+                articleModal.classList.add('hidden');
+                document.body.style.overflow = 'auto';
+            }
+        });
+        // Parallax effect
+        window.addEventListener('scroll', function() {
+            const parallaxSections = document.querySelectorAll('.parallax-bg');
+            const scrollPosition = window.pageYOffset;
+            parallaxSections.forEach(section => {
+                if (window.innerWidth > 768) { // Only apply parallax on desktop
+                    section.style.backgroundPositionY = (scrollPosition * 0.5) + 'px';
+                }
+            });
+        });
+    </script>
+</body>
+</html>

templates/dichvu.html ADDED Viewed

	@@ -0,0 +1,660 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Porcelain Veneers | DentalArt</title>
+    <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>
+        body {
+            background-color: #000;
+            color: #fff;
+            overflow-x: hidden;
+        }
+        .parallax-bg {
+            background-attachment: fixed;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: cover;
+            position: relative;
+            overflow: hidden;
+        }
+        .glow-effect {
+            position: absolute;
+            width: 200px;
+            height: 200px;
+            border-radius: 50%;
+            filter: blur(60px);
+            opacity: 0.3;
+            z-index: 0;
+        }
+        .glow-teal {
+            background: #38b2ac;
+        }
+        .glow-blue {
+            background: #3b82f6;
+        }
+        .glow-purple {
+            background: #8b5cf6;
+        }
+        .treatment-hero {
+            background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255,255,255,0.1);
+        }
+        .process-step {
+            position: relative;
+            background: rgba(30, 41, 59, 0.7);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255,255,255,0.1);
+            transition: all 0.3s ease;
+        }
+        .process-step:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
+            border-color: rgba(59, 130, 246, 0.5);
+        }
+        .process-step::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 4px;
+            height: 0;
+            background: linear-gradient(to bottom, #38b2ac, #3b82f6);
+            transition: height 0.6s ease;
+        }
+        .process-step:hover::before {
+            height: 100%;
+        }
+        .comparison-slider {
+            position: relative;
+            width: 100%;
+            overflow: hidden;
+            border-radius: 12px;
+            box-shadow: 0 15px 30px rgba(0,0,0,0.5);
+        }
+        .comparison-before, .comparison-after {
+            position: absolute;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+        }
+        .comparison-before {
+            width: 50%;
+        }
+        .comparison-slider img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            pointer-events: none;
+        }
+        .comparison-slider-handle {
+            position: absolute;
+            left: 50%;
+            top: 0;
+            bottom: 0;
+            width: 4px;
+            background: white;
+            transform: translateX(-50%);
+            cursor: ew-resize;
+            z-index: 10;
+        }
+        .comparison-slider-handle::after {
+            content: '';
+            position: absolute;
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background: white;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            box-shadow: 0 0 15px rgba(0,0,0,0.5);
+        }
+        .comparison-slider-handle::before {
+            content: '\f337';
+            font-family: 'Font Awesome 6 Free';
+            font-weight: 900;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            color: #3b82f6;
+            font-size: 14px;
+        }
+        .faq-item {
+            background: rgba(30, 41, 59, 0.7);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255,255,255,0.1);
+            transition: all 0.3s ease;
+        }
+        .faq-item:hover {
+            border-color: rgba(59, 130, 246, 0.5);
+        }
+        .faq-question {
+            cursor: pointer;
+            transition: color 0.3s ease;
+        }
+        .faq-question:hover {
+            color: #38b2ac;
+        }
+        .faq-answer {
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.5s ease, padding 0.3s ease;
+        }
+        .faq-item.active .faq-answer {
+            max-height: 500px;
+            padding-top: 15px;
+        }
+        .nav-link {
+            position: relative;
+        }
+        .nav-link::after {
+            content: '';
+            position: absolute;
+            width: 0;
+            height: 2px;
+            bottom: -2px;
+            left: 0;
+            background: #38b2ac;
+            transition: width 0.3s ease;
+        }
+        .nav-link:hover::after {
+            width: 100%;
+        }
+        @media (max-width: 768px) {
+            .parallax-bg {
+                background-attachment: scroll;
+            }
+            .treatment-hero {
+                padding-top: 120px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- Floating Glow Effects -->
+    <div class="glow-effect glow-teal" style="top: 10%; left: 10%;"></div>
+    <div class="glow-effect glow-blue" style="top: 60%; right: 5%;"></div>
+    <div class="glow-effect glow-purple" style="bottom: 10%; left: 20%;"></div>
+    <!-- Header -->
+    <header class="py-6 px-4 fixed w-full z-50 bg-black bg-opacity-80 backdrop-filter backdrop-blur-sm">
+        <div class="container mx-auto flex justify-between items-center">
+            <div class="flex items-center">
+                <i class="fas fa-tooth text-3xl text-teal-400 mr-3"></i>
+                <h1 class="text-2xl font-bold bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">DentalArt</h1>
+            </div>
+            <button id="menu-toggle" class="md:hidden text-white">
+                <i class="fas fa-bars text-2xl"></i>
+            </button>
+            <nav id="main-nav" class="hidden md:flex space-x-8">
+                <a href="#" class="nav-link text-white">Home</a>
+                <a href="#" class="nav-link text-white">Gallery</a>
+                <a href="#" class="nav-link text-white text-teal-400 font-semibold">Treatments</a>
+                <a href="#" class="nav-link text-white">Contact</a>
+            </nav>
+        </div>
+    </header>
+    <!-- Mobile Menu -->
+    <div id="mobile-menu" class="fixed inset-0 bg-black bg-opacity-90 z-40 hidden flex-col items-center justify-center space-y-8">
+        <button id="close-menu" class="absolute top-6 right-6 text-white text-2xl">
+            <i class="fas fa-times"></i>
+        </button>
+        <a href="#" class="text-white text-2xl">Home</a>
+        <a href="#" class="text-white text-2xl">Gallery</a>
+        <a href="#" class="text-white text-2xl text-teal-400 font-semibold">Treatments</a>
+        <a href="#" class="text-white text-2xl">Contact</a>
+    </div>
+    <!-- Treatment Hero Section -->
+    <section class="treatment-hero min-h-[60vh] flex items-center pt-20 relative overflow-hidden">
+        <div class="container mx-auto px-4 py-16 relative z-10">
+            <div class="flex flex-col lg:flex-row items-center">
+                <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12">
+                    <span class="inline-block bg-gradient-to-r from-teal-500 to-blue-600 text-white px-4 py-2 rounded-full text-sm font-semibold mb-4">Most Popular</span>
+                    <h1 class="text-4xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">Porcelain Veneers</h1>
+                    <p class="text-xl text-gray-300 mb-8">Transform your smile with custom-crafted porcelain veneers that look and feel completely natural. Our veneers are individually designed to enhance your unique facial features.</p>
+                    <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
+                        <button class="bg-gradient-to-r from-teal-500 to-blue-600 text-white px-8 py-3 rounded-full font-semibold hover:opacity-90 transition shadow-lg">Book Consultation</button>
+                        <button class="border-2 border-white px-8 py-3 rounded-full font-semibold hover:bg-white hover:text-black transition">View Before/After</button>
+                    </div>
+                </div>
+                <div class="lg:w-1/2">
+                    <div class="comparison-slider" style="height: 400px;">
+                        <div class="comparison-after">
+                            <img src="https://images.unsplash.com/photo-1622253692010-333f2da6031d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="After veneers">
+                        </div>
+                        <div class="comparison-before">
+                            <img src="https://images.unsplash.com/photo-1564078517170-9707c7a0e6b6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Before veneers">
+                        </div>
+                        <div class="comparison-slider-handle"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="absolute inset-0 bg-gradient-to-b from-black via-transparent to-black opacity-70 z-0"></div>
+    </section>
+    <!-- Treatment Benefits -->
+    <section class="py-20 px-4 relative">
+        <div class="container mx-auto">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4 bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">Why Choose Porcelain Veneers?</h2>
+                <p class="text-gray-400 max-w-2xl mx-auto">The ultimate cosmetic solution for a flawless smile transformation</p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="bg-gray-900 bg-opacity-70 p-8 rounded-xl backdrop-filter backdrop-blur-sm border border-gray-800 hover:border-teal-500 transition">
+                    <div class="w-14 h-14 bg-teal-900 bg-opacity-50 rounded-full flex items-center justify-center text-teal-400 text-2xl mb-6">
+                        <i class="fas fa-gem"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Natural Appearance</h3>
+                    <p class="text-gray-400">Porcelain mimics the light-reflecting properties of natural teeth, creating a beautifully authentic smile.</p>
+                </div>
+                <div class="bg-gray-900 bg-opacity-70 p-8 rounded-xl backdrop-filter backdrop-blur-sm border border-gray-800 hover:border-blue-500 transition">
+                    <div class="w-14 h-14 bg-blue-900 bg-opacity-50 rounded-full flex items-center justify-center text-blue-400 text-2xl mb-6">
+                        <i class="fas fa-clock"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Long-Lasting</h3>
+                    <p class="text-gray-400">With proper care, veneers can last 10-15 years, making them a durable investment in your smile.</p>
+                </div>
+                <div class="bg-gray-900 bg-opacity-70 p-8 rounded-xl backdrop-filter backdrop-blur-sm border border-gray-800 hover:border-purple-500 transition">
+                    <div class="w-14 h-14 bg-purple-900 bg-opacity-50 rounded-full flex items-center justify-center text-purple-400 text-2xl mb-6">
+                        <i class="fas fa-teeth"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Stain Resistant</h3>
+                    <p class="text-gray-400">Porcelain is highly resistant to stains from coffee, tea, and smoking, maintaining your bright smile.</p>
+                </div>
+                <div class="bg-gray-900 bg-opacity-70 p-8 rounded-xl backdrop-filter backdrop-blur-sm border border-gray-800 hover:border-teal-500 transition">
+                    <div class="w-14 h-14 bg-teal-900 bg-opacity-50 rounded-full flex items-center justify-center text-teal-400 text-2xl mb-6">
+                        <i class="fas fa-user-shield"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Minimally Invasive</h3>
+                    <p class="text-gray-400">Requires minimal tooth reduction compared to crowns, preserving more of your natural tooth structure.</p>
+                </div>
+                <div class="bg-gray-900 bg-opacity-70 p-8 rounded-xl backdrop-filter backdrop-blur-sm border border-gray-800 hover:border-blue-500 transition">
+                    <div class="w-14 h-14 bg-blue-900 bg-opacity-50 rounded-full flex items-center justify-center text-blue-400 text-2xl mb-6">
+                        <i class="fas fa-customize"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Customizable</h3>
+                    <p class="text-gray-400">Each veneer is custom-shaped and tinted to match your desired shade and facial features.</p>
+                </div>
+                <div class="bg-gray-900 bg-opacity-70 p-8 rounded-xl backdrop-filter backdrop-blur-sm border border-gray-800 hover:border-purple-500 transition">
+                    <div class="w-14 h-14 bg-purple-900 bg-opacity-50 rounded-full flex items-center justify-center text-purple-400 text-2xl mb-6">
+                        <i class="fas fa-heart"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Instant Results</h3>
+                    <p class="text-gray-400">Complete your smile makeover in just 2-3 visits with dramatic, immediate results.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Treatment Process -->
+    <section class="py-20 px-4 relative bg-gradient-to-b from-gray-900 to-black">
+        <div class="container mx-auto">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4 bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">The Veneer Process</h2>
+                <p class="text-gray-400 max-w-2xl mx-auto">Our streamlined 4-step process ensures exceptional results</p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                <div class="process-step p-8 rounded-xl">
+                    <div class="text-4xl font-bold text-teal-400 mb-4">01</div>
+                    <h3 class="text-xl font-bold mb-3">Consultation & Design</h3>
+                    <p class="text-gray-400">We'll assess your smile, discuss goals, and create a digital preview of your new smile.</p>
+                </div>
+                <div class="process-step p-8 rounded-xl">
+                    <div class="text-4xl font-bold text-blue-400 mb-4">02</div>
+                    <h3 class="text-xl font-bold mb-3">Tooth Preparation</h3>
+                    <p class="text-gray-400">Minimal enamel removal (0.3-0.5mm) and impressions taken for custom veneers.</p>
+                </div>
+                <div class="process-step p-8 rounded-xl">
+                    <div class="text-4xl font-bold text-purple-400 mb-4">03</div>
+                    <h3 class="text-xl font-bold mb-3">Temporary Veneers</h3>
+                    <p class="text-gray-400">Wear temporary veneers while your permanent ones are crafted in our dental lab.</p>
+                </div>
+                <div class="process-step p-8 rounded-xl">
+                    <div class="text-4xl font-bold text-teal-400 mb-4">04</div>
+                    <h3 class="text-xl font-bold mb-3">Final Fitting</h3>
+                    <p class="text-gray-400">Permanent veneers are bonded to your teeth, completing your transformation.</p>
+                </div>
+            </div>
+            <div class="mt-16 text-center">
+                <div class="inline-block p-1 rounded-full bg-gradient-to-r from-teal-500 to-blue-600">
+                    <div class="bg-gray-900 rounded-full px-8 py-3">
+                        <span class="text-white font-semibold">Treatment Time: </span>
+                        <span class="text-teal-400">2-3 weeks</span>
+                        <span class="text-gray-500 mx-2">|</span>
+                        <span class="text-white font-semibold">Visits Required: </span>
+                        <span class="text-blue-400">2-3</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Before/After Gallery -->
+    <section class="py-20 px-4 relative overflow-hidden">
+        <div class="container mx-auto">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4 bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">Veneer Transformations</h2>
+                <p class="text-gray-400 max-w-2xl mx-auto">See the dramatic difference porcelain veneers can make</p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <div class="group relative overflow-hidden rounded-xl h-80">
+                    <img src="https://images.unsplash.com/photo-1564078517170-9707c7a0e6b6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Before veneers" class="absolute inset-0 w-full h-full object-cover transition-opacity duration-500 group-hover:opacity-0">
+                    <img src="https://images.unsplash.com/photo-1622253692010-333f2da6031d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="After veneers" class="absolute inset-0 w-full h-full object-cover">
+                    <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-6">
+                        <div class="flex justify-between items-end">
+                            <div>
+                                <h3 class="font-bold text-white">Case #V-1245</h3>
+                                <p class="text-sm text-gray-300">8 Porcelain Veneers</p>
+                            </div>
+                            <span class="text-xs bg-teal-500 text-white px-2 py-1 rounded-full">+90% Improvement</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="group relative overflow-hidden rounded-xl h-80">
+                    <img src="https://images.unsplash.com/photo-1597251377449-eb8a2dea9a8a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Before veneers" class="absolute inset-0 w-full h-full object-cover transition-opacity duration-500 group-hover:opacity-0">
+                    <img src="https://images.unsplash.com/photo-1622253692010-333f2da6031d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="After veneers" class="absolute inset-0 w-full h-full object-cover">
+                    <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-6">
+                        <div class="flex justify-between items-end">
+                            <div>
+                                <h3 class="font-bold text-white">Case #V-1892</h3>
+                                <p class="text-sm text-gray-300">6 Porcelain Veneers</p>
+                            </div>
+                            <span class="text-xs bg-blue-500 text-white px-2 py-1 rounded-full">+85% Improvement</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="group relative overflow-hidden rounded-xl h-80">
+                    <img src="https://images.unsplash.com/photo-1560869713-8acaebf44127?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Before veneers" class="absolute inset-0 w-full h-full object-cover transition-opacity duration-500 group-hover:opacity-0">
+                    <img src="https://images.unsplash.com/photo-1622253692010-333f2da6031d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="After veneers" class="absolute inset-0 w-full h-full object-cover">
+                    <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-6">
+                        <div class="flex justify-between items-end">
+                            <div>
+                                <h3 class="font-bold text-white">Case #V-1567</h3>
+                                <p class="text-sm text-gray-300">10 Porcelain Veneers</p>
+                            </div>
+                            <span class="text-xs bg-purple-500 text-white px-2 py-1 rounded-full">+95% Improvement</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="text-center mt-16">
+                <button class="border-2 border-white px-8 py-3 rounded-full font-semibold hover:bg-white hover:text-black transition">View All Veneer Cases</button>
+            </div>
+        </div>
+    </section>
+    <!-- FAQ Section -->
+    <section class="py-20 px-4 relative bg-gray-900">
+        <div class="container mx-auto">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4 bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">Veneer FAQs</h2>
+                <p class="text-gray-400 max-w-2xl mx-auto">Answers to common questions about porcelain veneers</p>
+            </div>
+            <div class="max-w-3xl mx-auto space-y-4">
+                <div class="faq-item p-6 rounded-xl">
+                    <div class="faq-question flex justify-between items-center">
+                        <h3 class="text-lg font-semibold">How long do porcelain veneers last?</h3>
+                        <i class="fas fa-chevron-down text-teal-400 transition-transform"></i>
+                    </div>
+                    <div class="faq-answer">
+                        <p class="text-gray-400">With proper care and maintenance, porcelain veneers typically last between 10-15 years. Their longevity depends on factors like oral hygiene, regular dental check-ups, and avoiding habits like teeth grinding or nail biting. We provide a 5-year guarantee on our veneers.</p>
+                    </div>
+                </div>
+                <div class="faq-item p-6 rounded-xl">
+                    <div class="faq-question flex justify-between items-center">
+                        <h3 class="text-lg font-semibold">Is the veneer procedure painful?</h3>
+                        <i class="fas fa-chevron-down text-blue-400 transition-transform"></i>
+                    </div>
+                    <div class="faq-answer">
+                        <p class="text-gray-400">Most patients report minimal discomfort during the veneer procedure. We use local anesthesia to ensure you're completely comfortable during tooth preparation. Some sensitivity to hot and cold may occur temporarily after the procedure, but this typically subsides within a few days.</p>
+                    </div>
+                </div>
+                <div class="faq-item p-6 rounded-xl">
+                    <div class="faq-question flex justify-between items-center">
+                        <h3 class="text-lg font-semibold">Can veneers be removed or reversed?</h3>
+                        <i class="fas fa-chevron-down text-purple-400 transition-transform"></i>
+                    </div>
+                    <div class="faq-answer">
+                        <p class="text-gray-400">Veneers are considered permanent because they require removal of a small amount of tooth enamel. While they can technically be removed, your teeth would then require another restoration like new veneers or crowns. We always recommend considering veneers as a long-term commitment to your smile.</p>
+                    </div>
+                </div>
+                <div class="faq-item p-6 rounded-xl">
+                    <div class="faq-question flex justify-between items-center">
+                        <h3 class="text-lg font-semibold">How do I care for my veneers?</h3>
+                        <i class="fas fa-chevron-down text-teal-400 transition-transform"></i>
+                    </div>
+                    <div class="faq-answer">
+                        <p class="text-gray-400">Care for veneers just like your natural teeth: brush twice daily with a non-abrasive toothpaste, floss regularly, and visit your dentist for check-ups. Avoid chewing on hard objects (ice, pens, etc.) and consider wearing a nightguard if you grind your teeth. While veneers are stain-resistant, it's still good to limit consumption of staining foods and drinks.</p>
+                    </div>
+                </div>
+                <div class="faq-item p-6 rounded-xl">
+                    <div class="faq-question flex justify-between items-center">
+                        <h3 class="text-lg font-semibold">Are veneers right for everyone?</h3>
+                        <i class="fas fa-chevron-down text-blue-400 transition-transform"></i>
+                    </div>
+                    <div class="faq-answer">
+                        <p class="text-gray-400">Veneers are an excellent option for many people wanting to improve their smile, but not everyone is an ideal candidate. They work best for patients with generally healthy teeth and gums. Those with significant tooth decay, gum disease, or insufficient tooth enamel may need other treatments first. During your consultation, we'll determine if veneers are right for you.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- CTA Section -->
+    <section class="py-20 px-4 relative overflow-hidden">
+        <div class="glow-effect glow-teal" style="top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 300px;"></div>
+        <div class="container mx-auto text-center relative z-10">
+            <h2 class="text-3xl md:text-4xl font-bold mb-6 bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">Ready for Your Dream Smile?</h2>
+            <p class="text-xl mb-8 max-w-2xl mx-auto text-gray-300">Schedule a veneer consultation today and get a personalized smile preview</p>
+            <button class="bg-gradient-to-r from-teal-500 to-blue-600 text-white px-8 py-4 rounded-full font-semibold text-lg hover:opacity-90 transition shadow-lg">Book Your Veneer Consultation</button>
+            <p class="mt-4 text-gray-400 text-sm">or call us at <a href="tel:+15551234567" class="text-teal-400 hover:underline">(555) 123-4567</a></p>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-gray-900 text-white py-12 px-4">
+        <div class="container mx-auto">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                <div>
+                    <div class="flex items-center mb-4">
+                        <i class="fas fa-tooth text-2xl text-teal-400 mr-3"></i>
+                        <h3 class="text-xl font-bold">DentalArt</h3>
+                    </div>
+                    <p class="text-gray-400">Specializing in cosmetic dentistry and smile makeovers with cutting-edge technology.</p>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-teal-400 transition">Home</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-teal-400 transition">Gallery</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-teal-400 transition">Treatments</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-teal-400 transition">About Us</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Contact</h4>
+                    <ul class="space-y-2">
+                        <li class="flex items-center"><i class="fas fa-map-marker-alt mr-2 text-teal-400"></i> 123 Dental Ave, Smile City</li>
+                        <li class="flex items-center"><i class="fas fa-phone mr-2 text-teal-400"></i> (555) 123-4567</li>
+                        <li class="flex items-center"><i class="fas fa-envelope mr-2 text-teal-400"></i> info@dentalart.com</li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Follow Us</h4>
+                    <div class="flex space-x-4">
+                        <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-teal-500 transition">
+                            <i class="fab fa-facebook-f"></i>
+                        </a>
+                        <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-blue-500 transition">
+                            <i class="fab fa-instagram"></i>
+                        </a>
+                        <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-purple-500 transition">
+                            <i class="fab fa-tiktok"></i>
+                        </a>
+                        <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-red-500 transition">
+                            <i class="fab fa-youtube"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">
+                <p>&copy; 2023 DentalArt. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Mobile menu toggle
+        document.getElementById('menu-toggle').addEventListener('click', function() {
+            document.getElementById('mobile-menu').classList.remove('hidden');
+            document.getElementById('mobile-menu').classList.add('flex');
+        });
+        document.getElementById('close-menu').addEventListener('click', function() {
+            document.getElementById('mobile-menu').classList.add('hidden');
+            document.getElementById('mobile-menu').classList.remove('flex');
+        });
+        // Comparison slider functionality
+        const slider = document.querySelector('.comparison-slider');
+        const before = document.querySelector('.comparison-before');
+        const handle = document.querySelector('.comparison-slider-handle');
+        let isDragging = false;
+        handle.addEventListener('mousedown', function(e) {
+            isDragging = true;
+            document.addEventListener('mousemove', moveHandler);
+            document.addEventListener('mouseup', stopDrag);
+        });
+        handle.addEventListener('touchstart', function(e) {
+            isDragging = true;
+            document.addEventListener('touchmove', moveHandler);
+            document.addEventListener('touchend', stopDrag);
+        });
+        function moveHandler(e) {
+            if (!isDragging) return;
+            let x;
+            if (e.type === 'mousemove') {
+                x = e.pageX - slider.getBoundingClientRect().left;
+            } else {
+                x = e.touches[0].pageX - slider.getBoundingClientRect().left;
+            }
+            const sliderWidth = slider.offsetWidth;
+            let percentage = (x / sliderWidth) * 100;
+            // Limit between 10% and 90%
+            percentage = Math.max(10, Math.min(90, percentage));
+            before.style.width = percentage + '%';
+            handle.style.left = percentage + '%';
+        }
+        function stopDrag() {
+            isDragging = false;
+            document.removeEventListener('mousemove', moveHandler);
+            document.removeEventListener('touchmove', moveHandler);
+        }
+        // FAQ accordion functionality
+        const faqItems = document.querySelectorAll('.faq-item');
+        faqItems.forEach(item => {
+            const question = item.querySelector('.faq-question');
+            const answer = item.querySelector('.faq-answer');
+            const icon = item.querySelector('.fa-chevron-down');
+            question.addEventListener('click', function() {
+                // Close all other items
+                faqItems.forEach(otherItem => {
+                    if (otherItem !== item) {
+                        otherItem.classList.remove('active');
+                        otherItem.querySelector('.fa-chevron-down').classList.remove('rotate-180');
+                    }
+                });
+                // Toggle current item
+                item.classList.toggle('active');
+                icon.classList.toggle('rotate-180');
+            });
+        });
+        // Parallax effect
+        window.addEventListener('scroll', function() {
+            const parallaxSections = document.querySelectorAll('.parallax-bg');
+            const scrollPosition = window.pageYOffset;
+            parallaxSections.forEach(section => {
+                if (window.innerWidth > 768) { // Only apply parallax on desktop
+                    section.style.backgroundPositionY = (scrollPosition * 0.5) + 'px';
+                }
+            });
+        });
+    </script>
+</body>
+</html>

templates/hanhtrinhkh.html ADDED Viewed

	@@ -0,0 +1,524 @@

+<!DOCTYPE html>
+<html lang="vi">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hành trình khách hàng - Chị Nguyễn Thị Minh Anh | Nha khoa TTL1979</title>
+    <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>
+        body {
+            background-color: #000;
+            color: #fff;
+            font-family: 'Arial', sans-serif;
+        }
+        .glow-effect {
+            position: fixed;
+            width: 200px;
+            height: 200px;
+            border-radius: 50%;
+            filter: blur(60px);
+            opacity: 0.3;
+            z-index: 0;
+        }
+        .journey-hero {
+            background: linear-gradient(135deg, #111827 0%, #1e3a8a 100%);
+        }
+        .journey-card {
+            position: relative;
+            overflow: hidden;
+            border-radius: 16px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+            background: rgba(30, 41, 59, 0.7);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255,255,255,0.1);
+        }
+        .timeline {
+            position: relative;
+            padding-left: 30px;
+        }
+        .timeline::before {
+            content: '';
+            position: absolute;
+            left: 10px;
+            top: 0;
+            bottom: 0;
+            width: 2px;
+            background: linear-gradient(to bottom, #38b2ac, #3b82f6);
+        }
+        .timeline-item {
+            position: relative;
+            margin-bottom: 30px;
+        }
+        .timeline-item::before {
+            content: '';
+            position: absolute;
+            left: -30px;
+            top: 5px;
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background: #38b2ac;
+            border: 2px solid #fff;
+        }
+        .testimonial-quote {
+            position: relative;
+        }
+        .testimonial-quote::before {
+            content: '"';
+            position: absolute;
+            top: -20px;
+            left: -10px;
+            font-size: 60px;
+            color: rgba(56, 178, 172, 0.3);
+            font-family: serif;
+        }
+        .progress-bar {
+            height: 6px;
+            background: rgba(255,255,255,0.1);
+            border-radius: 3px;
+            overflow: hidden;
+        }
+        .progress-fill {
+            height: 100%;
+            background: linear-gradient(to right, #38b2ac, #3b82f6);
+            border-radius: 3px;
+        }
+        .nav-link {
+            position: relative;
+        }
+        .nav-link::after {
+            content: '';
+            position: absolute;
+            width: 0;
+            height: 2px;
+            bottom: -2px;
+            left: 0;
+            background: #38b2ac;
+            transition: width 0.3s ease;
+        }
+        .nav-link:hover::after {
+            width: 100%;
+        }
+        .before-after-slider {
+            position: relative;
+            height: 400px;
+            overflow: hidden;
+            border-radius: 12px;
+        }
+        .before-image, .after-image {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        .slider-handle {
+            position: absolute;
+            width: 4px;
+            height: 100%;
+            background: white;
+            left: 50%;
+            transform: translateX(-50%);
+            cursor: ew-resize;
+            z-index: 10;
+        }
+        .slider-handle::after {
+            content: '';
+            position: absolute;
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background: white;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            box-shadow: 0 0 10px rgba(0,0,0,0.5);
+        }
+        .slider-handle::before {
+            content: '◀ ▶';
+            position: absolute;
+            color: #333;
+            font-size: 12px;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            z-index: 11;
+        }
+        .milestone-card {
+            transition: all 0.3s ease;
+        }
+        .milestone-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
+        }
+    </style>
+</head>
+<body>
+    <!-- Floating Glow Effects -->
+    <div class="glow-effect" style="top: 10%; left: 10%; background: #38b2ac;"></div>
+    <div class="glow-effect" style="top: 60%; right: 5%; background: #3b82f6;"></div>
+    <!-- Header -->
+    <header class="py-6 px-4 fixed w-full z-50 bg-black bg-opacity-80 backdrop-filter backdrop-blur-sm">
+        <div class="container mx-auto flex justify-between items-center">
+            <div class="flex items-center">
+                <i class="fas fa-tooth text-3xl text-teal-400 mr-3"></i>
+                <h1 class="text-2xl font-bold bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">TTL1979</h1>
+            </div>
+            <nav class="hidden md:flex space-x-8">
+                <a href="index.html" class="nav-link text-white">Home</a>
+                <a href="thuvien.html" class="nav-link text-white">Thư viện</a>
+                <a href="dichvu.html" class="nav-link text-white">Dịch vụ</a>
+                <a href="lienhe.html" class="nav-link text-white">Liên hệ</a>
+            </nav>
+        </div>
+    </header>
+    <!-- Hero Section -->
+    <section class="min-h-screen flex items-center justify-center pt-20 px-4 relative overflow-hidden journey-hero">
+        <div class="container mx-auto">
+            <div class="flex flex-col lg:flex-row items-center gap-12">
+                <div class="lg:w-1/2 relative z-10">
+                    <h1 class="text-4xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">Hành Trình Của Chị Minh Anh</h1>
+                    <p class="text-xl text-gray-300 mb-8">18 tháng niềng răng Invisalign đã thay đổi nụ cười và sự tự tin của chị</p>
+                    <div class="flex items-center mb-8">
+                        <div class="w-16 h-16 rounded-full overflow-hidden border-2 border-teal-500 mr-4">
+                            <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Chị Nguyễn Thị Minh Anh" class="w-full h-full object-cover">
+                        </div>
+                        <div>
+                            <h3 class="text-xl font-bold">Chị Nguyễn Thị Minh Anh</h3>
+                            <p class="text-teal-400">Khách hàng niềng răng Invisalign</p>
+                        </div>
+                    </div>
+                    <div class="flex space-x-4">
+                        <div class="bg-gray-800 bg-opacity-50 px-4 py-2 rounded-lg">
+                            <p class="text-sm text-gray-400">Thời gian</p>
+                            <p class="font-medium">18 tháng</p>
+                        </div>
+                        <div class="bg-gray-800 bg-opacity-50 px-4 py-2 rounded-lg">
+                            <p class="text-sm text-gray-400">Đánh giá</p>
+                            <div class="flex">
+                                <i class="fas fa-star text-yellow-400"></i>
+                                <i class="fas fa-star text-yellow-400"></i>
+                                <i class="fas fa-star text-yellow-400"></i>
+                                <i class="fas fa-star text-yellow-400"></i>
+                                <i class="fas fa-star text-yellow-400"></i>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="lg:w-1/2 relative">
+                    <div class="before-after-slider">
+                        <img src="https://images.unsplash.com/photo-1605497788044-5a32c7078486?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Before" class="before-image">
+                        <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=761&q=80" alt="After" class="after-image" style="clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);">
+                        <div class="slider-handle"></div>
+                    </div>
+                    <div class="flex justify-between mt-2 text-sm text-gray-400">
+                        <span>Trước điều trị</span>
+                        <span>Sau điều trị</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-black to-transparent"></div>
+    </section>
+    <!-- Journey Details -->
+    <section class="py-20 px-4 relative">
+        <div class="container mx-auto max-w-5xl">
+            <div class="journey-card p-8 mb-16">
+                <h2 class="text-3xl font-bold mb-6 bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">Câu Chuyện Của Chị Minh Anh</h2>
+                <div class="grid md:grid-cols-2 gap-8 mb-12">
+                    <div>
+                        <p class="text-gray-300 mb-4">Chị Minh Anh đến với Nha khoa TTL1979 với hàm răng khấp khểnh và luôn cảm thấy thiếu tự tin khi cười. Sau khi tham khảo nhiều phương pháp, chị đã quy��t định lựa chọn niềng răng Invisalign vì tính thẩm mỹ và tiện lợi.</p>
+                        <p class="text-gray-300">"Tôi đã từng rất ngại cười vì hàm răng không đều. Nhưng sau 18 tháng kiên trì với Invisalign, giờ đây tôi có thể tự tin cười lớn mà không cần phải che miệng nữa."</p>
+                    </div>
+                    <div class="bg-gray-800 bg-opacity-50 p-6 rounded-lg">
+                        <h3 class="text-xl font-bold mb-4">Thông tin điều trị</h3>
+                        <div class="space-y-4">
+                            <div>
+                                <p class="text-sm text-gray-400">Phương pháp</p>
+                                <p class="font-medium">Niềng răng Invisalign</p>
+                            </div>
+                            <div>
+                                <p class="text-sm text-gray-400">Bác sĩ điều trị</p>
+                                <p class="font-medium">BS. Trần Văn Nam</p>
+                            </div>
+                            <div>
+                                <p class="text-sm text-gray-400">Thời gian</p>
+                                <p class="font-medium">18 tháng (2021-2022)</p>
+                            </div>
+                            <div>
+                                <p class="text-sm text-gray-400">Số lượng khay niềng</p>
+                                <p class="font-medium">32 khay</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <h3 class="text-2xl font-bold mb-6">Các Mốc Quan Trọng</h3>
+                <div class="timeline">
+                    <div class="timeline-item">
+                        <div class="milestone-card bg-gray-800 bg-opacity-50 p-6 rounded-lg">
+                            <div class="flex items-center mb-3">
+                                <div class="w-10 h-10 rounded-full bg-teal-500 flex items-center justify-center mr-4">
+                                    <i class="fas fa-calendar-check text-white"></i>
+                                </div>
+                                <h4 class="font-bold text-lg">Ngày đầu tiên</h4>
+                            </div>
+                            <p class="text-gray-300">Chị Anh được bác sĩ thăm khám tổng quát, chụp phim X-quang và lấy dấu mẫu hàm để thiết kế khay niềng Invisalign phù hợp.</p>
+                            <div class="mt-3 flex">
+                                <span class="bg-teal-900 bg-opacity-50 text-teal-300 text-xs px-2 py-1 rounded mr-2">Khám tổng quát</span>
+                                <span class="bg-blue-900 bg-opacity-50 text-blue-300 text-xs px-2 py-1 rounded">Lấy dấu mẫu</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="timeline-item">
+                        <div class="milestone-card bg-gray-800 bg-opacity-50 p-6 rounded-lg">
+                            <div class="flex items-center mb-3">
+                                <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center mr-4">
+                                    <i class="fas fa-procedures text-white"></i>
+                                </div>
+                                <h4 class="font-bold text-lg">Tuần thứ 2</h4>
+                            </div>
+                            <p class="text-gray-300">Chị nhận bộ khay niềng đầu tiên và được hướng dẫn chi tiết cách đeo, vệ sinh và bảo quản khay niềng.</p>
+                            <div class="mt-3 flex">
+                                <span class="bg-purple-900 bg-opacity-50 text-purple-300 text-xs px-2 py-1 rounded">Nhận khay niềng</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="timeline-item">
+                        <div class="milestone-card bg-gray-800 bg-opacity-50 p-6 rounded-lg">
+                            <div class="flex items-center mb-3">
+                                <div class="w-10 h-10 rounded-full bg-purple-500 flex items-center justify-center mr-4">
+                                    <i class="fas fa-tooth text-white"></i>
+                                </div>
+                                <h4 class="font-bold text-lg">Tháng thứ 6</h4>
+                            </div>
+                            <p class="text-gray-300">Tái khám định kỳ và nhận bộ khay niềng mới. Những thay đổi đầu tiên đã xuất hiện rõ rệt, răng bắt đầu dịch chuyển về đúng vị trí.</p>
+                            <div class="mt-3 flex">
+                                <span class="bg-yellow-900 bg-opacity-50 text-yellow-300 text-xs px-2 py-1 rounded mr-2">Tái khám</span>
+                                <span class="bg-pink-900 bg-opacity-50 text-pink-300 text-xs px-2 py-1 rounded">Thay đổi rõ</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="timeline-item">
+                        <div class="milestone-card bg-gray-800 bg-opacity-50 p-6 rounded-lg">
+                            <div class="flex items-center mb-3">
+                                <div class="w-10 h-10 rounded-full bg-yellow-500 flex items-center justify-center mr-4">
+                                    <i class="fas fa-smile-beam text-white"></i>
+                                </div>
+                                <h4 class="font-bold text-lg">Tháng thứ 18</h4>
+                            </div>
+                            <p class="text-gray-300">Kết thúc quá trình niềng răng. Hàm răng đều đẹp như mong đợi, chị Anh tự tin hơn trong giao tiếp và công việc.</p>
+                            <div class="mt-3 flex">
+                                <span class="bg-green-900 bg-opacity-50 text-green-300 text-xs px-2 py-1 rounded mr-2">Hoàn thành</span>
+                                <span class="bg-red-900 bg-opacity-50 text-red-300 text-xs px-2 py-1 rounded">Kết quả tốt</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="journey-card p-8">
+                <h3 class="text-2xl font-bold mb-6 bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">Cảm Nhận Sau Điều Trị</h3>
+                <div class="grid md:grid-cols-2 gap-8">
+                    <div>
+                        <div class="testimonial-quote pl-4 mb-8">
+                            <p class="text-gray-300 italic text-lg">"Tôi không ngờ Invisalign lại hiệu quả đến vậy. Cảm ơn bác sĩ và đội ngũ nha khoa đã đồng hành cùng tôi suốt 18 tháng qua. Giờ đây tôi có thể tự tin cười nói mà không cần phải che miệng nữa."</p>
+                        </div>
+                        <div class="flex items-center">
+                            <div class="w-16 h-16 rounded-full overflow-hidden border-2 border-teal-500 mr-4">
+                                <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Chị Nguyễn Thị Minh Anh" class="w-full h-full object-cover">
+                            </div>
+                            <div>
+                                <h3 class="font-bold">Chị Nguyễn Thị Minh Anh</h3>
+                                <p class="text-teal-400 text-sm">Khách hàng niềng răng Invisalign</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div>
+                        <div class="bg-gray-800 bg-opacity-50 p-6 rounded-lg h-full">
+                            <h4 class="font-bold text-lg mb-4">Đánh giá của bác sĩ</h4>
+                            <p class="text-gray-300 mb-4">"Trường hợp của chị Anh là một ví dụ điển hình về hiệu quả của niềng răng Invisalign. Chị đã tuân thủ rất tốt phác đồ điều trị và kết quả đạt được vượt ngoài mong đợi."</p>
+                            <div class="flex items-center">
+                                <div class="w-12 h-12 rounded-full overflow-hidden border-2 border-blue-500 mr-3">
+                                    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="BS. Trần Văn Nam" class="w-full h-full object-cover">
+                                </div>
+                                <div>
+                                    <p class="font-medium">BS. Trần Văn Nam</p>
+                                    <p class="text-blue-400 text-sm">Chuyên gia chỉnh nha</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Gallery Section -->
+    <section class="py-16 px-4 bg-gray-900 bg-opacity-50">
+        <div class="container mx-auto max-w-5xl">
+            <h2 class="text-3xl font-bold mb-8 text-center bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">Hình Ảnh Quá Trình</h2>
+            <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
+                <div class="overflow-hidden rounded-lg">
+                    <img src="https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Before treatment" class="w-full h-48 object-cover hover:scale-105 transition duration-300">
+                    <p class="text-center text-sm mt-2 text-gray-400">Trước điều trị</p>
+                </div>
+                <div class="overflow-hidden rounded-lg">
+                    <img src="https://images.unsplash.com/photo-1621841957884-1210fe19daca?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="During treatment" class="w-full h-48 object-cover hover:scale-105 transition duration-300">
+                    <p class="text-center text-sm mt-2 text-gray-400">Giữa quá trình</p>
+                </div>
+                <div class="overflow-hidden rounded-lg">
+                    <img src="https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="After treatment" class="w-full h-48 object-cover hover:scale-105 transition duration-300">
+                    <p class="text-center text-sm mt-2 text-gray-400">Sau điều trị</p>
+                </div>
+                <div class="overflow-hidden rounded-lg">
+                    <img src="https://images.unsplash.com/photo-1621841957884-1210fe19daca?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="X-ray before" class="w-full h-48 object-cover hover:scale-105 transition duration-300">
+                    <p class="text-center text-sm mt-2 text-gray-400">Phim X-quang trước</p>
+                </div>
+                <div class="overflow-hidden rounded-lg">
+                    <img src="https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="X-ray after" class="w-full h-48 object-cover hover:scale-105 transition duration-300">
+                    <p class="text-center text-sm mt-2 text-gray-400">Phim X-quang sau</p>
+                </div>
+                <div class="overflow-hidden rounded-lg">
+                    <img src="https://images.unsplash.com/photo-1621841957884-1210fe19daca?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Happy customer" class="w-full h-48 object-cover hover:scale-105 transition duration-300">
+                    <p class="text-center text-sm mt-2 text-gray-400">Chị Anh hạnh phúc</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- CTA Section -->
+    <section class="py-20 px-4 relative overflow-hidden" style="background: linear-gradient(135deg, #111827 0%, #1e3a8a 100%);">
+        <div class="container mx-auto max-w-4xl text-center relative z-10">
+            <h2 class="text-3xl md:text-4xl font-bold mb-6 bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">Bạn Cũng Muốn Có Nụ Cười Hoàn Hảo?</h2>
+            <p class="text-xl text-gray-300 mb-8">Hãy để chúng tôi đồng hành cùng bạn trên hành trình thay đổi nụ cười</p>
+            <a href="lienhe.html" class="inline-block bg-gradient-to-r from-teal-400 to-blue-500 text-white font-bold py-3 px-8 rounded-full hover:opacity-90 transition duration-300 shadow-lg">
+                Đặt lịch tư vấn ngay
+            </a>
+        </div>
+        <div class="absolute top-0 left-0 right-0 h-32 bg-gradient-to-b from-black to-transparent"></div>
+        <div class="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-black to-transparent"></div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-black py-12 px-4">
+        <div class="container mx-auto">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="flex items-center mb-6 md:mb-0">
+                    <i class="fas fa-tooth text-3xl text-teal-400 mr-3"></i>
+                    <h1 class="text-2xl font-bold bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">TTL1979</h1>
+                </div>
+                <div class="flex space-x-6 mb-6 md:mb-0">
+                    <a href="#" class="text-gray-400 hover:text-teal-400 transition duration-300">
+                        <i class="fab fa-facebook-f text-xl"></i>
+                    </a>
+                    <a href="#" class="text-gray-400 hover:text-teal-400 transition duration-300">
+                        <i class="fab fa-instagram text-xl"></i>
+                    </a>
+                    <a href="#" class="text-gray-400 hover:text-teal-400 transition duration-300">
+                        <i class="fab fa-youtube text-xl"></i>
+                    </a>
+                </div>
+                <div class="text-center md:text-right">
+                    <p class="text-gray-400">© 2023 Nha khoa TTL1979. All rights reserved.</p>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Before-After Slider
+        const slider = document.querySelector('.before-after-slider');
+        const handle = document.querySelector('.slider-handle');
+        const beforeImage = document.querySelector('.before-image');
+        let isDragging = false;
+        handle.addEventListener('mousedown', () => {
+            isDragging = true;
+        });
+        document.addEventListener('mouseup', () => {
+            isDragging = false;
+        });
+        document.addEventListener('mousemove', (e) => {
+            if (!isDragging) return;
+            const sliderRect = slider.getBoundingClientRect();
+            let x = e.clientX - sliderRect.left;
+            // Constrain within slider bounds
+            x = Math.max(0, Math.min(x, sliderRect.width));
+            const percent = (x / sliderRect.width) * 100;
+            handle.style.left = `${percent}%`;
+            beforeImage.style.clipPath = `polygon(0 0, ${percent}% 0, ${percent}% 100%, 0 100%)`;
+        });
+        // Touch support for mobile
+        handle.addEventListener('touchstart', () => {
+            isDragging = true;
+        });
+        document.addEventListener('touchend', () => {
+            isDragging = false;
+        });
+        document.addEventListener('touchmove', (e) => {
+            if (!isDragging) return;
+            const sliderRect = slider.getBoundingClientRect();
+            let x = e.touches[0].clientX - sliderRect.left;
+            // Constrain within slider bounds
+            x = Math.max(0, Math.min(x, sliderRect.width));
+            const percent = (x / sliderRect.width) * 100;
+            handle.style.left = `${percent}%`;
+            beforeImage.style.clipPath = `polygon(0 0, ${percent}% 0, ${percent}% 100%, 0 100%)`;
+        });
+    </script>
+</body>
+</html>

templates/index.html ADDED Viewed

	@@ -0,0 +1,776 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Trung Tâm Nha Khoa Nhẹ Nhàng</title>
+    <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>
+        body {
+            background-color: #000;
+            color: #fff;
+            overflow-x: hidden;
+        }
+        .parallax-bg {
+            background-attachment: fixed;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: cover;
+            position: relative;
+            overflow: hidden;
+        }
+        .glow-effect {
+            position: absolute;
+            width: 200px;
+            height: 200px;
+            border-radius: 50%;
+            filter: blur(60px);
+            opacity: 0.3;
+            z-index: 0;
+        }
+        .glow-teal {
+            background: #38b2ac;
+        }
+        .glow-blue {
+            background: #3b82f6;
+        }
+        .glow-purple {
+            background: #8b5cf6;
+        }
+        .case-card {
+            position: relative;
+            overflow: hidden;
+            border-radius: 16px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+            transition: all 0.5s ease;
+            z-index: 1;
+            background: rgba(30, 41, 59, 0.7);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255,255,255,0.1);
+        }
+        .case-card:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 15px 40px rgba(59, 130, 246, 0.4);
+        }
+        .image-container {
+            position: relative;
+            width: 100%;
+            height: 300px;
+            overflow: hidden;
+        }
+        .before-image, .after-image {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            transition: all 1s cubic-bezier(0.65, 0, 0.35, 1);
+        }
+        .before-image {
+            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
+        }
+        .after-image {
+            clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
+        }
+        .case-card:hover .before-image {
+            clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
+        }
+        .case-card:hover .after-image {
+            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
+        }
+        .transition-label {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            background: rgba(0,0,0,0.7);
+            color: white;
+            padding: 6px 12px;
+            border-radius: 20px;
+            font-size: 0.8rem;
+            z-index: 2;
+            display: flex;
+            align-items: center;
+        }
+        .transition-label i {
+            margin-right: 5px;
+            color: #38b2ac;
+        }
+        .treatment-badge {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            background: linear-gradient(45deg, #3b82f6, #8b5cf6);
+            color: white;
+            padding: 6px 12px;
+            border-radius: 20px;
+            font-size: 0.8rem;
+            font-weight: bold;
+            z-index: 2;
+        }
+        .nav-link {
+            position: relative;
+        }
+        .nav-link::after {
+            content: '';
+            position: absolute;
+            width: 0;
+            height: 2px;
+            bottom: -2px;
+            left: 0;
+            background: #38b2ac;
+            transition: width 0.3s ease;
+        }
+        .nav-link:hover::after {
+            width: 100%;
+        }
+        @media (max-width: 768px) {
+            .parallax-bg {
+                background-attachment: scroll;
+            }
+            .image-container {
+                height: 250px;
+            }
+            .case-card:hover {
+                transform: none;
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- Floating Glow Effects -->
+    <div class="glow-effect glow-teal" style="top: 10%; left: 10%;"></div>
+    <div class="glow-effect glow-blue" style="top: 60%; right: 5%;"></div>
+    <div class="glow-effect glow-purple" style="bottom: 10%; left: 20%;"></div>
+    <!-- Header -->
+    <header class="py-6 px-4 fixed w-full z-50 bg-black bg-opacity-80 backdrop-filter backdrop-blur-sm">
+        <div class="container mx-auto flex justify-between items-center">
+            <div class="flex items-center">
+                <i class="fas fa-tooth text-3xl text-teal-400 mr-3"></i>
+                <h1 class="text-2xl font-bold bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">TTL1979</h1>
+            </div>
+            <button id="menu-toggle" class="md:hidden text-white">
+                <i class="fas fa-bars text-2xl"></i>
+            </button>
+            <nav id="main-nav" class="hidden md:flex space-x-8">
+                <a href="index.html" class="nav-link text-white">Home</a>
+                <a href="thuvien.html" class="nav-link text-white">Thư viện</a>
+                <a href="dichvu.html" class="nav-link text-white">Dịch vụ</a>
+                <a href="lienhe.html" class="nav-link text-white">Liên hệ</a>
+            </nav>
+        </div>
+    </header>
+    <!-- Mobile Menu -->
+    <div id="mobile-menu" class="fixed inset-0 bg-black bg-opacity-90 z-40 hidden flex-col items-center justify-center space-y-8">
+        <button id="close-menu" class="absolute top-6 right-6 text-white text-2xl">
+            <i class="fas fa-times"></i>
+        </button>
+        <a href="index.html" class="text-white text-2xl">Home</a>
+        <a href="thuvien.html" class="text-white text-2xl">Thư viện</a>
+        <a href="dichvu.html" class="text-white text-2xl">Dịch vụ</a>
+        <a href="lienhe.html" class="text-white text-2xl">Liên hệ</a>
+    </div>
+    <!-- Hero Section -->
+    <section class="parallax-bg min-h-screen flex items-center justify-center pt-20" style="background-image: url('https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80')">
+        <div class="container mx-auto px-4 text-center relative z-10">
+            <h2 class="text-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">Biến Đổi Nụ Cười</h2>
+            <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto text-gray-300">Bạn sẽ chứng kiến sự thay đổi ngoạn mục cho nụ cười trên môi bạn</p>
+            <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
+                <button class="bg-gradient-to-r from-teal-500 to-blue-600 text-white px-8 py-3 rounded-full font-semibold hover:opacity-90 transition shadow-lg">Xem thư viện</button>
+                <button class="border-2 border-white px-8 py-3 rounded-full font-semibold hover:bg-white hover:text-black transition">Đặt hẹn tư vấn</button>
+            </div>
+        </div>
+        <div class="absolute inset-0 bg-black bg-opacity-60"></div>
+    </section>
+    <!-- Khu vực thư viện -->
+    <section class="py-20 px-4 relative overflow-hidden">
+        <div class="container mx-auto">
+            <div class="text-center mb-16 relative z-10">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4 bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">Thư viện Before & After</h2>
+                <p class="text-gray-400 max-w-2xl mx-auto"Chạm vào ảnh để xem</p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 relative z-10">
+                <!-- Case 1 -->
+                <div class="case-card">
+                    <div class="image-container">
+                        <img src="/hinhanh/86.png" alt="Trước" class="before-image">
+                        <img src="/hinhanh/85.png" alt="Sau" class="after-image">
+                        <div class="transition-label">
+                            <i class="fas fa-arrows-alt-h"></i> Chạm vào để xem
+                        </div>
+                        <div class="treatment-badge">Veneers</div>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="font-bold text-xl mb-2">Complete Smile Makeover</h3>
+                        <p class="text-gray-400 text-sm">Porcelain veneers transformed this patient's smile in just 2 visits</p>
+                        <div class="flex justify-between items-center mt-4">
+                            <span class="text-teal-400 text-sm">Case #DT-1245</span>
+                            <button class="text-blue-400 hover:text-blue-300 text-sm">Xem chi tiết</button>
+                        </div>
+                    </div>
+                </div>
+                <!-- Case 2 -->
+                <div class="case-card">
+                    <div class="image-container">
+                        <img src="https://images.unsplash.com/photo-1597251377449-eb8a2dea9a8a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Before dental treatment" class="before-image">
+                        <img src="https://images.unsplash.com/photo-1622253692010-333f2da6031d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="After dental treatment" class="after-image">
+                        <div class="transition-label">
+                            <i class="fas fa-arrows-alt-h"></i> Chạm vào để xem
+                        </div>
+                        <div class="treatment-badge">Whitening</div>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="font-bold text-xl mb-2">Professional Teeth Whitening</h3>
+                        <p class="text-gray-400 text-sm">8 shades whiter in just one 90-minute session</p>
+                        <div class="flex justify-between items-center mt-4">
+                            <span class="text-teal-400 text-sm">Case #DT-1892</span>
+                            <button class="text-blue-400 hover:text-blue-300 text-sm">Xem chi tiết</button>
+                        </div>
+                    </div>
+                </div>
+                <!-- Case 3 -->
+                <div class="case-card">
+                    <div class="image-container">
+                        <img src="https://images.unsplash.com/photo-1560869713-8acaebf44127?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Before dental treatment" class="before-image">
+                        <img src="https://images.unsplash.com/photo-1622253692010-333f2da6031d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="After dental treatment" class="after-image">
+                        <div class="transition-label">
+                            <i class="fas fa-arrows-alt-h"></i> Chạm vào để xem
+                        </div>
+                        <div class="treatment-badge">Invisalign</div>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="font-bold text-xl mb-2">Orthodontic Treatment</h3>
+                        <p class="text-gray-400 text-sm">18 months of Invisalign for perfectly aligned teeth</p>
+                        <div class="flex justify-between items-center mt-4">
+                            <span class="text-teal-400 text-sm">Case #DT-1567</span>
+                            <button class="text-blue-400 hover:text-blue-300 text-sm">Xem chi tiết</button>
+                        </div>
+                    </div>
+                </div>
+                <!-- Case 4 -->
+                <div class="case-card">
+                    <div class="image-container">
+                        <img src="https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Before dental treatment" class="before-image">
+                        <img src="https://images.unsplash.com/photo-1622253692010-333f2da6031d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="After dental treatment" class="after-image">
+                        <div class="transition-label">
+                            <i class="fas fa-arrows-alt-h"></i> Chạm vào để xem
+                        </div>
+                        <div class="treatment-badge">Implants</div>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="font-bold text-xl mb-2">Single Tooth Implant</h3>
+                        <p class="text-gray-400 text-sm">Natural-looking solution for a missing front tooth</p>
+                        <div class="flex justify-between items-center mt-4">
+                            <span class="text-teal-400 text-sm">Case #DT-1349</span>
+                            <button class="text-blue-400 hover:text-blue-300 text-sm">Xem chi tiết</button>
+                        </div>
+                    </div>
+                </div>
+                <!-- Case 5 -->
+                <div class="case-card">
+                    <div class="image-container">
+                        <img src="https://images.unsplash.com/photo-1564078517170-9707c7a0e6b6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Before dental treatment" class="before-image">
+                        <img src="https://images.unsplash.com/photo-1622253692010-333f2da6031d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="After dental treatment" class="after-image">
+                        <div class="transition-label">
+                            <i class="fas fa-arrows-alt-h"></i> Chạm vào để xem
+                        </div>
+                        <div class="treatment-badge">Bonding</div>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="font-bold text-xl mb-2">Composite Bonding</h3>
+                        <p class="text-gray-400 text-sm">Chipped front tooth repaired in one visit</p>
+                        <div class="flex justify-between items-center mt-4">
+                            <span class="text-teal-400 text-sm">Case #DT-1783</span>
+                            <button class="text-blue-400 hover:text-blue-300 text-sm">Xem chi tiết</button>
+                        </div>
+                    </div>
+                </div>
+                <!-- Case 6 -->
+                <div class="case-card">
+                    <div class="image-container">
+                        <img src="https://images.unsplash.com/photo-1597251377449-eb8a2dea9a8a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Before dental treatment" class="before-image">
+                        <img src="https://images.unsplash.com/photo-1622253692010-333f2da6031d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="After dental treatment" class="after-image">
+                        <div class="transition-label">
+                            <i class="fas fa-arrows-alt-h"></i> Chạm vào để xem
+                        </div>
+                        <div class="treatment-badge">Full Mouth</div>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="font-bold text-xl mb-2">Full Mouth Reconstruction</h3>
+                        <p class="text-gray-400 text-sm">Combination of veneers, crowns and implants</p>
+                        <div class="flex justify-between items-center mt-4">
+                            <span class="text-teal-400 text-sm">Case #DT-1654</span>
+                            <button class="text-blue-400 hover:text-blue-300 text-sm">Xem chi tiết</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="text-center mt-16">
+                <button class="bg-gradient-to-r from-teal-500 to-blue-600 text-white px-8 py-3 rounded-full font-semibold hover:opacity-90 transition shadow-lg">Xem tất cả</button>
+            </div>
+        </div>
+    </section>
+    <!-- Hành trình khách hàng -->
+    <section class="py-20 px-4 relative overflow-hidden">
+        <div class="container mx-auto">
+            <div class="text-center mb-16 relative z-10">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4 bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">Hành trình khách hàng</h2>
+                <p class="text-gray-400 max-w-2xl mx-auto"Chạm vào ảnh để xem</p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 relative z-10">
+                <!-- Case 1 -->
+                <div class="case-card">
+                    <div class="image-container">
+                        <img src="https://images.unsplash.com/photo-1597251377449-eb8a2dea9a8a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Before dental treatment" class="before-image">
+                        <img src="https://images.unsplash.com/photo-1622253692010-333f2da6031d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="After dental treatment" class="after-image">
+                        <div class="transition-label">
+                            <i class="fas fa-arrows-alt-h"></i> Chạm vào để xem
+                        </div>
+                        <div class="treatment-badge">Full Mouth</div>
+                    </div>
+                    <div class="p-6">
+                    	<div class="flex items-center mb-6">
+                        <div class="w-16 h-16 rounded-full overflow-hidden border-2 border-teal-500">
+                            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Patient" class="w-full h-full object-cover">
+                        </div>
+                        <div class="ml-4">
+                            <h4 class="font-bold">Chị Minh Thơ</h4>
+                            <p class="text-sm text-teal-400">Tẩy trắng răng</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-300 mb-4">"Tôi đã không thể tin được răng của tôi sáng lên trông thấy chỉ sau một lần tẩy trắng"</p>
+                        <div class="flex text-yellow-400">
+                          <i class="fas fa-star"></i>
+                          <i class="fas fa-star"></i>
+                          <i class="fas fa-star"></i>
+                          <i class="fas fa-star"></i>
+                          <i class="fas fa-star"></i>
+                      </div>
+                        <div class="flex justify-between items-center mt-4">
+                            <span class="text-teal-400 text-sm">Case #DT-1654</span>
+                            <button class="text-blue-400 hover:text-blue-300 text-sm">Xem chi tiết</button>
+                        </div>
+                    </div>
+                </div>
+                <!-- Case 2 -->
+                <div class="case-card">
+                    <div class="image-container">
+                        <img src="https://images.unsplash.com/photo-1597251377449-eb8a2dea9a8a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Before dental treatment" class="before-image">
+                        <img src="https://images.unsplash.com/photo-1622253692010-333f2da6031d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="After dental treatment" class="after-image">
+                        <div class="transition-label">
+                            <i class="fas fa-arrows-alt-h"></i> Chạm vào để xem
+                        </div>
+                        <div class="treatment-badge">Full Mouth</div>
+                    </div>
+                    <div class="p-6">
+                    	<div class="flex items-center mb-6">
+                        <div class="w-16 h-16 rounded-full overflow-hidden border-2 border-teal-500">
+                            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Patient" class="w-full h-full object-cover">
+                        </div>
+                        <div class="ml-4">
+                            <h4 class="font-bold">Chị Minh Thơ</h4>
+                            <p class="text-sm text-teal-400">Tẩy trắng răng</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-300 mb-4">"Tôi đã không thể tin được răng của tôi sáng lên trông thấy chỉ sau một lần tẩy trắng"</p>
+                        <div class="flex text-yellow-400">
+                          <i class="fas fa-star"></i>
+                          <i class="fas fa-star"></i>
+                          <i class="fas fa-star"></i>
+                          <i class="fas fa-star"></i>
+                          <i class="fas fa-star"></i>
+                      </div>
+                        <div class="flex justify-between items-center mt-4">
+                            <span class="text-teal-400 text-sm">Case #DT-1654</span>
+                            <button class="text-blue-400 hover:text-blue-300 text-sm">Xem chi tiết</button>
+                        </div>
+                    </div>
+                </div>
+                <!-- Case 3 -->
+                <div class="case-card">
+                    <div class="image-container">
+                        <img src="https://images.unsplash.com/photo-1597251377449-eb8a2dea9a8a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Before dental treatment" class="before-image">
+                        <img src="https://images.unsplash.com/photo-1622253692010-333f2da6031d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="After dental treatment" class="after-image">
+                        <div class="transition-label">
+                            <i class="fas fa-arrows-alt-h"></i> Chạm vào để xem
+                        </div>
+                        <div class="treatment-badge">Full Mouth</div>
+                    </div>
+                    <div class="p-6">
+                    	<div class="flex items-center mb-6">
+                        <div class="w-16 h-16 rounded-full overflow-hidden border-2 border-teal-500">
+                            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Patient" class="w-full h-full object-cover">
+                        </div>
+                        <div class="ml-4">
+                            <h4 class="font-bold">Chị Minh Thơ</h4>
+                            <p class="text-sm text-teal-400">Tẩy trắng răng</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-300 mb-4">"Tôi đã không thể tin được răng của tôi sáng lên trông thấy chỉ sau một lần tẩy trắng"</p>
+                        <div class="flex text-yellow-400">
+                          <i class="fas fa-star"></i>
+                          <i class="fas fa-star"></i>
+                          <i class="fas fa-star"></i>
+                          <i class="fas fa-star"></i>
+                          <i class="fas fa-star"></i>
+                      </div>
+                        <div class="flex justify-between items-center mt-4">
+                            <span class="text-teal-400 text-sm">Case #DT-1654</span>
+                            <button class="text-blue-400 hover:text-blue-300 text-sm">Xem chi tiết</button>
+                        </div>
+                    </div>
+                </div>
+                <!-- Case 4 -->
+                <div class="case-card">
+                    <div class="image-container">
+                        <img src="https://images.unsplash.com/photo-1597251377449-eb8a2dea9a8a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Before dental treatment" class="before-image">
+                        <img src="https://images.unsplash.com/photo-1622253692010-333f2da6031d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="After dental treatment" class="after-image">
+                        <div class="transition-label">
+                            <i class="fas fa-arrows-alt-h"></i> Chạm vào để xem
+                        </div>
+                        <div class="treatment-badge">Full Mouth</div>
+                    </div>
+                    <div class="p-6">
+                    	<div class="flex items-center mb-6">
+                        <div class="w-16 h-16 rounded-full overflow-hidden border-2 border-teal-500">
+                            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Patient" class="w-full h-full object-cover">
+                        </div>
+                        <div class="ml-4">
+                            <h4 class="font-bold">Chị Minh Thơ</h4>
+                            <p class="text-sm text-teal-400">Tẩy trắng răng</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-300 mb-4">"Tôi đã không thể tin được răng của tôi sáng lên trông thấy chỉ sau một lần tẩy trắng"</p>
+                        <div class="flex text-yellow-400">
+                          <i class="fas fa-star"></i>
+                          <i class="fas fa-star"></i>
+                          <i class="fas fa-star"></i>
+                          <i class="fas fa-star"></i>
+                          <i class="fas fa-star"></i>
+                      </div>
+                        <div class="flex justify-between items-center mt-4">
+                            <span class="text-teal-400 text-sm">Case #DT-1654</span>
+                            <button class="text-blue-400 hover:text-blue-300 text-sm">Xem chi tiết</button>
+                        </div>
+                    </div>
+                </div>
+                <!-- Case 5 -->
+                <div class="case-card">
+                    <div class="image-container">
+                        <img src="https://images.unsplash.com/photo-1597251377449-eb8a2dea9a8a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Before dental treatment" class="before-image">
+                        <img src="https://images.unsplash.com/photo-1622253692010-333f2da6031d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="After dental treatment" class="after-image">
+                        <div class="transition-label">
+                            <i class="fas fa-arrows-alt-h"></i> Chạm vào để xem
+                        </div>
+                        <div class="treatment-badge">Full Mouth</div>
+                    </div>
+                    <div class="p-6">
+                    	<div class="flex items-center mb-6">
+                        <div class="w-16 h-16 rounded-full overflow-hidden border-2 border-teal-500">
+                            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Patient" class="w-full h-full object-cover">
+                        </div>
+                        <div class="ml-4">
+                            <h4 class="font-bold">Chị Minh Thơ</h4>
+                            <p class="text-sm text-teal-400">Tẩy trắng răng</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-300 mb-4">"Tôi đã không thể tin được răng của tôi sáng lên trông thấy chỉ sau một lần tẩy trắng"</p>
+                        <div class="flex text-yellow-400">
+                          <i class="fas fa-star"></i>
+                          <i class="fas fa-star"></i>
+                          <i class="fas fa-star"></i>
+                          <i class="fas fa-star"></i>
+                          <i class="fas fa-star"></i>
+                      </div>
+                        <div class="flex justify-between items-center mt-4">
+                            <span class="text-teal-400 text-sm">Case #DT-1654</span>
+                            <button class="text-blue-400 hover:text-blue-300 text-sm">Xem chi tiết</button>
+                        </div>
+                    </div>
+                </div>
+                <!-- Case 6 -->
+                <div class="case-card">
+                    <div class="image-container">
+                        <img src="https://images.unsplash.com/photo-1597251377449-eb8a2dea9a8a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Before dental treatment" class="before-image">
+                        <img src="https://images.unsplash.com/photo-1622253692010-333f2da6031d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="After dental treatment" class="after-image">
+                        <div class="transition-label">
+                            <i class="fas fa-arrows-alt-h"></i> Chạm vào để xem
+                        </div>
+                        <div class="treatment-badge">Full Mouth</div>
+                    </div>
+                    <div class="p-6">
+                    	<div class="flex items-center mb-6">
+                        <div class="w-16 h-16 rounded-full overflow-hidden border-2 border-teal-500">
+                            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Patient" class="w-full h-full object-cover">
+                        </div>
+                        <div class="ml-4">
+                            <h4 class="font-bold">Chị Minh Thơ</h4>
+                            <p class="text-sm text-teal-400">Tẩy trắng răng</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-300 mb-4">"Tôi đã không thể tin được răng của tôi sáng lên trông thấy chỉ sau một lần tẩy trắng"</p>
+                        <div class="flex text-yellow-400">
+                          <i class="fas fa-star"></i>
+                          <i class="fas fa-star"></i>
+                          <i class="fas fa-star"></i>
+                          <i class="fas fa-star"></i>
+                          <i class="fas fa-star"></i>
+                      </div>
+                        <div class="flex justify-between items-center mt-4">
+                            <span class="text-teal-400 text-sm">Case #DT-1654</span>
+                            <button class="text-blue-400 hover:text-blue-300 text-sm">Xem chi tiết</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="text-center mt-16">
+                <button class="bg-gradient-to-r from-teal-500 to-blue-600 text-white px-8 py-3 rounded-full font-semibold hover:opacity-90 transition shadow-lg">Xem tất cả</button>
+            </div>
+        </div>
+    </section>
+    <!-- Testimonials -->
+    <section class="parallax-bg py-20 px-4 relative" style="background-image: url('https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80')">
+        <div class="absolute inset-0 bg-black bg-opacity-70"></div>
+        <div class="container mx-auto relative z-10">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4 bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">Kiến thức nha khoa</h2>
+                <p class="text-gray-400 max-w-2xl mx-auto">Hear from our patients about their transformation experiences</p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="bg-gray-900 bg-opacity-70 p-8 rounded-xl backdrop-filter backdrop-blur-sm border border-gray-800 hover:border-teal-500 transition">
+                    <div class="flex items-center mb-6">
+                        <div class="w-16 h-16 rounded-full overflow-hidden border-2 border-teal-500">
+                            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Patient" class="w-full h-full object-cover">
+                        </div>
+                        <div class="ml-4">
+                            <h4 class="font-bold">Sarah Johnson</h4>
+                            <p class="text-sm text-teal-400">Teeth Whitening</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-300 mb-4">"The sliding transition effect perfectly shows my transformation. I couldn't believe the difference after just one whitening session!"</p>
+                    <div class="flex text-yellow-400">
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                    </div>
+                </div>
+                <div class="bg-gray-900 bg-opacity-70 p-8 rounded-xl backdrop-filter backdrop-blur-sm border border-gray-800 hover:border-blue-500 transition">
+                    <div class="flex items-center mb-6">
+                        <div class="w-16 h-16 rounded-full overflow-hidden border-2 border-blue-500">
+                            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Patient" class="w-full h-full object-cover">
+                        </div>
+                        <div class="ml-4">
+                            <h4 class="font-bold">Michael Chen</h4>
+                            <p class="text-sm text-blue-400">Veneers</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-300 mb-4">"The before/after effect was so impressive I had to show all my friends. My new smile looks completely natural and changed my confidence."</p>
+                    <div class="flex text-yellow-400">
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                    </div>
+                </div>
+                <div class="bg-gray-900 bg-opacity-70 p-8 rounded-xl backdrop-filter backdrop-blur-sm border border-gray-800 hover:border-purple-500 transition">
+                    <div class="flex items-center mb-6">
+                        <div class="w-16 h-16 rounded-full overflow-hidden border-2 border-purple-500">
+                            <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Patient" class="w-full h-full object-cover">
+                        </div>
+                        <div class="ml-4">
+                            <h4 class="font-bold">Emma Rodriguez</h4>
+                            <p class="text-sm text-purple-400">Invisalign</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-300 mb-4">"Seeing my teeth transform with the sliding animation made me realize how much my smile has improved. The treatment was worth every penny."</p>
+                    <div class="flex text-yellow-400">
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- CTA Section -->
+    <section class="py-20 px-4 relative overflow-hidden">
+        <div class="glow-effect glow-teal" style="top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 300px;"></div>
+        <div class="container mx-auto text-center relative z-10">
+            <h2 class="text-3xl md:text-4xl font-bold mb-6 bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">Bạn đã sẵn sàng cho một nụ cười mới chưa?</h2>
+            <p class="text-xl mb-8 max-w-2xl mx-auto text-gray-300">Đặt lịch ngay hôm nay và hướng tới hành trình nụ cười hoàn hảo</p>
+            <button class="bg-gradient-to-r from-teal-500 to-blue-600 text-white px-8 py-4 rounded-full font-semibold text-lg hover:opacity-90 transition shadow-lg">Đặt lịch khám và tư vấn miễn phí</button>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-gray-900 text-white py-12 px-4">
+        <div class="container mx-auto">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                <div>
+                    <div class="flex items-center mb-4">
+                        <i class="fas fa-tooth text-2xl text-teal-400 mr-3"></i>
+                        <h3 class="text-xl font-bold">TTL1979</h3>
+                    </div>
+                    <p class="text-gray-400">Nha khoa thẩm mỹ lâu đời nhất Việt Nam</p>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
+                    <ul class="space-y-2">
+                        <li><a href="index.html" class="text-gray-400 hover:text-teal-400 transition">Home</a></li>
+                        <li><a href="thuvien.html" class="text-gray-400 hover:text-teal-400 transition">Thư viện</a></li>
+                        <li><a href="dichvu.html" class="text-gray-400 hover:text-teal-400 transition">Dịch vụ</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-teal-400 transition">Về chúng tôi</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Liên hệ</h4>
+                    <ul class="space-y-2">
+                        <li class="flex items-center"><i class="fas fa-map-marker-alt mr-2 text-teal-400"></i> 160-162 Trần Phú, P. Vĩnh Thanh Vân, Tp. Rạch Giá, Kiên Giang</li>
+                        <li class="flex items-center"><i class="fas fa-phone mr-2 text-teal-400"></i> 0832.919.878 - 0849.421.979</li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Theo dõi chúng tôi</h4>
+                    <div class="flex space-x-4">
+                        <a href="https://www.facebook.com/nhakhoatranthanhlong" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-teal-500 transition">
+                            <i class="fab fa-facebook-f"></i>
+                        </a>
+                        <a href="https://www.instagram.com/nhakhoatranthanhlong/" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-blue-500 transition">
+                            <i class="fab fa-instagram"></i>
+                        </a>
+                        <a href="https://www.tiktok.com/@nkttl1979" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-purple-500 transition">
+                            <i class="fab fa-tiktok"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">
+                <p>&copy; 2023 DentalArt. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Mobile menu toggle
+        document.getElementById('menu-toggle').addEventListener('click', function() {
+            document.getElementById('mobile-menu').classList.remove('hidden');
+            document.getElementById('mobile-menu').classList.add('flex');
+        });
+        document.getElementById('close-menu').addEventListener('click', function() {
+            document.getElementById('mobile-menu').classList.add('hidden');
+            document.getElementById('mobile-menu').classList.remove('flex');
+        });
+        // Make case cards interactive on mobile (tap instead of hover)
+        if (window.innerWidth <= 768) {
+            const caseCards = document.querySelectorAll('.case-card');
+            caseCards.forEach(card => {
+                card.addEventListener('click', function() {
+                    this.classList.toggle('active');
+                    const beforeImage = this.querySelector('.before-image');
+                    const afterImage = this.querySelector('.after-image');
+                    if (this.classList.contains('active')) {
+                        beforeImage.style.clipPath = 'polygon(0 0, 0% 0, 0% 100%, 0 100%)';
+                        afterImage.style.clipPath = 'polygon(0 0, 100% 0, 100% 100%, 0% 100%)';
+                    } else {
+                        beforeImage.style.clipPath = 'polygon(0 0, 100% 0, 100% 100%, 0% 100%)';
+                        afterImage.style.clipPath = 'polygon(100% 0, 100% 0, 100% 100%, 100% 100%)';
+                    }
+                });
+            });
+        }
+        // Parallax effect
+        window.addEventListener('scroll', function() {
+            const parallaxSections = document.querySelectorAll('.parallax-bg');
+            const scrollPosition = window.pageYOffset;
+            parallaxSections.forEach(section => {
+                if (window.innerWidth > 768) { // Only apply parallax on desktop
+                    section.style.backgroundPositionY = (scrollPosition * 0.5) + 'px';
+                }
+            });
+        });
+        // Smooth scroll for navigation
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function(e) {
+                e.preventDefault();
+                const targetId = this.getAttribute('href');
+                const targetElement = document.querySelector(targetId);
+                if (targetElement) {
+                    window.scrollTo({
+                        top: targetElement.offsetTop - 80,
+                        behavior: 'smooth'
+                    });
+                    // Close mobile menu if open
+                    document.getElementById('mobile-menu').classList.add('hidden');
+                    document.getElementById('mobile-menu').classList.remove('flex');
+                }
+            });
+        });
+    </script>
+</body>
+</html>

templates/lienhe.html ADDED Viewed

	@@ -0,0 +1,485 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Contact Us | DentalArt</title>
+    <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>
+        body {
+            background-color: #000;
+            color: #fff;
+            overflow-x: hidden;
+        }
+        .parallax-bg {
+            background-attachment: fixed;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: cover;
+            position: relative;
+            overflow: hidden;
+        }
+        .glow-effect {
+            position: absolute;
+            width: 200px;
+            height: 200px;
+            border-radius: 50%;
+            filter: blur(60px);
+            opacity: 0.3;
+            z-index: 0;
+        }
+        .glow-teal {
+            background: #38b2ac;
+        }
+        .glow-blue {
+            background: #3b82f6;
+        }
+        .glow-purple {
+            background: #8b5cf6;
+        }
+        .nav-link {
+            position: relative;
+        }
+        .nav-link::after {
+            content: '';
+            position: absolute;
+            width: 0;
+            height: 2px;
+            bottom: -2px;
+            left: 0;
+            background: #38b2ac;
+            transition: width 0.3s ease;
+        }
+        .nav-link:hover::after {
+            width: 100%;
+        }
+        .contact-hero {
+            background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255,255,255,0.1);
+        }
+        .contact-card {
+            transition: all 0.3s ease;
+            border: 1px solid rgba(255,255,255,0.1);
+        }
+        .contact-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(59, 130, 246, 0.2);
+            border-color: transparent;
+        }
+        .form-input {
+            background-color: rgba(255,255,255,0.05);
+            border: 1px solid rgba(255,255,255,0.1);
+            transition: all 0.3s ease;
+        }
+        .form-input:focus {
+            outline: none;
+            border-color: #38b2ac;
+            box-shadow: 0 0 0 3px rgba(56, 178, 172, 0.2);
+        }
+        .map-container {
+            position: relative;
+            overflow: hidden;
+            border-radius: 12px;
+            box-shadow: 0 10px 25px rgba(0,0,0,0.5);
+        }
+        .map-container iframe {
+            width: 100%;
+            height: 100%;
+            min-height: 400px;
+            border: none;
+        }
+        @media (max-width: 768px) {
+            .parallax-bg {
+                background-attachment: scroll;
+            }
+            .contact-hero {
+                padding-top: 120px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- Floating Glow Effects -->
+    <div class="glow-effect glow-teal" style="top: 10%; left: 10%;"></div>
+    <div class="glow-effect glow-blue" style="top: 60%; right: 5%;"></div>
+    <div class="glow-effect glow-purple" style="bottom: 10%; left: 20%;"></div>
+    <!-- Header -->
+    <header class="py-6 px-4 fixed w-full z-50 bg-black bg-opacity-80 backdrop-filter backdrop-blur-sm">
+        <div class="container mx-auto flex justify-between items-center">
+            <div class="flex items-center">
+                <i class="fas fa-tooth text-3xl text-teal-400 mr-3"></i>
+                <h1 class="text-2xl font-bold bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">DentalArt</h1>
+            </div>
+            <button id="menu-toggle" class="md:hidden text-white">
+                <i class="fas fa-bars text-2xl"></i>
+            </button>
+            <nav id="main-nav" class="hidden md:flex space-x-8">
+                <a href="#" class="nav-link text-white">Home</a>
+                <a href="#" class="nav-link text-white">Gallery</a>
+                <a href="#" class="nav-link text-white">Treatments</a>
+                <a href="#" class="nav-link text-white text-teal-400 font-semibold">Contact</a>
+            </nav>
+        </div>
+    </header>
+    <!-- Mobile Menu -->
+    <div id="mobile-menu" class="fixed inset-0 bg-black bg-opacity-90 z-40 hidden flex-col items-center justify-center space-y-8">
+        <button id="close-menu" class="absolute top-6 right-6 text-white text-2xl">
+            <i class="fas fa-times"></i>
+        </button>
+        <a href="#" class="text-white text-2xl">Home</a>
+        <a href="#" class="text-white text-2xl">Gallery</a>
+        <a href="#" class="text-white text-2xl">Treatments</a>
+        <a href="#" class="text-white text-2xl text-teal-400 font-semibold">Contact</a>
+    </div>
+    <!-- Contact Hero Section -->
+    <section class="contact-hero min-h-[60vh] flex items-center pt-20 relative overflow-hidden parallax-bg" style="background-image: url('https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');">
+        <div class="container mx-auto px-4 py-16 relative z-10">
+            <div class="max-w-4xl mx-auto text-center">
+                <h1 class="text-4xl md:text-5xl font-bold mb-6">Contact Our Dental Experts</h1>
+                <p class="text-xl text-gray-300 mb-8">We're here to answer your questions and help you achieve your perfect smile. Schedule a consultation today.</p>
+                <div class="flex flex-wrap justify-center gap-4">
+                    <a href="#contact-form" class="bg-teal-500 text-white font-bold px-8 py-3 rounded-lg hover:bg-teal-600 transition duration-300">
+                        <i class="fas fa-envelope mr-2"></i> Send Message
+                    </a>
+                    <a href="tel:5551234567" class="bg-white text-gray-800 font-bold px-8 py-3 rounded-lg hover:bg-gray-100 transition duration-300">
+                        <i class="fas fa-phone mr-2"></i> Call Now
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Contact Info Section -->
+    <section class="py-20">
+        <div class="container mx-auto px-4">
+            <div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
+                <!-- Location Card -->
+                <div class="contact-card bg-gray-900 rounded-xl p-8 text-center">
+                    <div class="w-16 h-16 bg-teal-500 rounded-full flex items-center justify-center mx-auto mb-6">
+                        <i class="fas fa-map-marker-alt text-white text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-4">Our Location</h3>
+                    <p class="text-gray-400 mb-4">123 Smile Avenue<br>Beverly Hills, CA 90210</p>
+                    <a href="#map" class="text-teal-400 hover:text-teal-300 font-medium">View on Map <i class="fas fa-arrow-right ml-1"></i></a>
+                </div>
+                <!-- Hours Card -->
+                <div class="contact-card bg-gray-900 rounded-xl p-8 text-center">
+                    <div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center mx-auto mb-6">
+                        <i class="fas fa-clock text-white text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-4">Working Hours</h3>
+                    <div class="space-y-2 text-gray-400 mb-4">
+                        <p class="flex justify-between"><span>Monday - Friday</span> <span>8:00 AM - 6:00 PM</span></p>
+                        <p class="flex justify-between"><span>Saturday</span> <span>9:00 AM - 3:00 PM</span></p>
+                        <p class="flex justify-between"><span>Sunday</span> <span>Closed</span></p>
+                    </div>
+                    <a href="#contact-form" class="text-blue-400 hover:text-blue-300 font-medium">Book Appointment <i class="fas fa-arrow-right ml-1"></i></a>
+                </div>
+                <!-- Contact Card -->
+                <div class="contact-card bg-gray-900 rounded-xl p-8 text-center">
+                    <div class="w-16 h-16 bg-purple-500 rounded-full flex items-center justify-center mx-auto mb-6">
+                        <i class="fas fa-envelope text-white text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-4">Contact Info</h3>
+                    <div class="space-y-2 text-gray-400 mb-4">
+                        <p><i class="fas fa-phone-alt mr-2 text-purple-400"></i> (555) 123-4567</p>
+                        <p><i class="fas fa-envelope mr-2 text-purple-400"></i> hello@dentalart.com</p>
+                        <p><i class="fas fa-comment-alt mr-2 text-purple-400"></i> Live Chat Available</p>
+                    </div>
+                    <a href="mailto:hello@dentalart.com" class="text-purple-400 hover:text-purple-300 font-medium">Email Us <i class="fas fa-arrow-right ml-1"></i></a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Map Section -->
+    <section id="map" class="py-10 bg-gray-900">
+        <div class="container mx-auto px-4">
+            <div class="max-w-6xl mx-auto">
+                <h2 class="text-3xl font-bold mb-8 text-center">Find Our Dental Clinic</h2>
+                <div class="map-container">
+                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3304.453356395495!2d-118.400837924136!3d34.07373357314439!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2bc85f0f266b3%3A0x6c10d01c2e6a5a4!2sBeverly%20Hills%2C%20CA%2090210%2C%20USA!5e0!3m2!1sen!2s!4v1689876543210!5m2!1sen!2s" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Contact Form Section -->
+    <section id="contact-form" class="py-20">
+        <div class="container mx-auto px-4">
+            <div class="max-w-4xl mx-auto">
+                <div class="bg-gray-900 rounded-xl p-8 md:p-12">
+                    <h2 class="text-3xl font-bold mb-2">Send Us a Message</h2>
+                    <p class="text-gray-400 mb-8">Fill out the form below and our team will get back to you within 24 hours.</p>
+                    <form class="space-y-6">
+                        <div class="grid md:grid-cols-2 gap-6">
+                            <div>
+                                <label for="name" class="block text-gray-300 mb-2">Full Name</label>
+                                <input type="text" id="name" class="form-input w-full px-4 py-3 rounded-lg" placeholder="John Smith" required>
+                            </div>
+                            <div>
+                                <label for="email" class="block text-gray-300 mb-2">Email Address</label>
+                                <input type="email" id="email" class="form-input w-full px-4 py-3 rounded-lg" placeholder="john@example.com" required>
+                            </div>
+                        </div>
+                        <div class="grid md:grid-cols-2 gap-6">
+                            <div>
+                                <label for="phone" class="block text-gray-300 mb-2">Phone Number</label>
+                                <input type="tel" id="phone" class="form-input w-full px-4 py-3 rounded-lg" placeholder="(555) 123-4567">
+                            </div>
+                            <div>
+                                <label for="service" class="block text-gray-300 mb-2">Service Interested In</label>
+                                <select id="service" class="form-input w-full px-4 py-3 rounded-lg">
+                                    <option value="">Select a service</option>
+                                    <option value="veneers">Porcelain Veneers</option>
+                                    <option value="implants">Dental Implants</option>
+                                    <option value="whitening">Teeth Whitening</option>
+                                    <option value="invisalign">Invisalign</option>
+                                    <option value="cosmetic">Cosmetic Dentistry</option>
+                                    <option value="other">Other</option>
+                                </select>
+                            </div>
+                        </div>
+                        <div>
+                            <label for="message" class="block text-gray-300 mb-2">Your Message</label>
+                            <textarea id="message" rows="5" class="form-input w-full px-4 py-3 rounded-lg" placeholder="Tell us about your dental needs..."></textarea>
+                        </div>
+                        <div class="flex items-center">
+                            <input type="checkbox" id="consent" class="rounded text-teal-500 focus:ring-teal-400" required>
+                            <label for="consent" class="ml-2 text-gray-300">I consent to DentalArt contacting me about my inquiry.</label>
+                        </div>
+                        <button type="submit" class="w-full bg-teal-500 text-white font-bold px-6 py-4 rounded-lg hover:bg-teal-600 transition duration-300">
+                            Send Message <i class="fas fa-paper-plane ml-2"></i>
+                        </button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- FAQ Section -->
+    <section class="py-20 bg-gray-900">
+        <div class="container mx-auto px-4">
+            <div class="max-w-4xl mx-auto">
+                <h2 class="text-3xl font-bold mb-12 text-center">Frequently Asked Questions</h2>
+                <div class="space-y-4">
+                    <!-- FAQ Item 1 -->
+                    <div class="bg-gray-800 rounded-xl overflow-hidden">
+                        <button class="faq-toggle w-full text-left px-6 py-4 flex justify-between items-center">
+                            <span class="font-medium">How soon can I get an appointment?</span>
+                            <i class="fas fa-chevron-down text-teal-400 transition-transform duration-300"></i>
+                        </button>
+                        <div class="faq-content px-6 pb-4 hidden">
+                            <p class="text-gray-400">We typically have availability within 1-2 weeks for new patient consultations. For emergency cases, we offer same-day appointments when possible.</p>
+                        </div>
+                    </div>
+                    <!-- FAQ Item 2 -->
+                    <div class="bg-gray-800 rounded-xl overflow-hidden">
+                        <button class="faq-toggle w-full text-left px-6 py-4 flex justify-between items-center">
+                            <span class="font-medium">Do you accept dental insurance?</span>
+                            <i class="fas fa-chevron-down text-teal-400 transition-transform duration-300"></i>
+                        </button>
+                        <div class="faq-content px-6 pb-4 hidden">
+                            <p class="text-gray-400">Yes, we accept most major dental insurance plans. Our team will work with your provider to maximize your benefits. We also offer flexible financing options for treatments not covered by insurance.</p>
+                        </div>
+                    </div>
+                    <!-- FAQ Item 3 -->
+                    <div class="bg-gray-800 rounded-xl overflow-hidden">
+                        <button class="faq-toggle w-full text-left px-6 py-4 flex justify-between items-center">
+                            <span class="font-medium">What safety measures do you have in place?</span>
+                            <i class="fas fa-chevron-down text-teal-400 transition-transform duration-300"></i>
+                        </button>
+                        <div class="faq-content px-6 pb-4 hidden">
+                            <p class="text-gray-400">Your safety is our top priority. We follow strict sterilization protocols, use advanced air purification systems, and maintain the highest standards of infection control in compliance with ADA and CDC guidelines.</p>
+                        </div>
+                    </div>
+                    <!-- FAQ Item 4 -->
+                    <div class="bg-gray-800 rounded-xl overflow-hidden">
+                        <button class="faq-toggle w-full text-left px-6 py-4 flex justify-between items-center">
+                            <span class="font-medium">How much does a consultation cost?</span>
+                            <i class="fas fa-chevron-down text-teal-400 transition-transform duration-300"></i>
+                        </button>
+                        <div class="faq-content px-6 pb-4 hidden">
+                            <p class="text-gray-400">New patient consultations are $95, which includes a comprehensive exam and digital X-rays. This fee may be covered by your insurance, and we'll verify your benefits before your visit.</p>
+                        </div>
+                    </div>
+                    <!-- FAQ Item 5 -->
+                    <div class="bg-gray-800 rounded-xl overflow-hidden">
+                        <button class="faq-toggle w-full text-left px-6 py-4 flex justify-between items-center">
+                            <span class="font-medium">What payment options do you offer?</span>
+                            <i class="fas fa-chevron-down text-teal-400 transition-transform duration-300"></i>
+                        </button>
+                        <div class="faq-content px-6 pb-4 hidden">
+                            <p class="text-gray-400">We accept all major credit cards, cash, checks, and offer interest-free payment plans through third-party financing companies like CareCredit. We also offer a 5% discount for upfront payments in full.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- CTA Section -->
+    <section class="py-20 bg-gradient-to-r from-teal-700 to-blue-700">
+        <div class="container mx-auto px-4 text-center">
+            <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready for Your Smile Transformation?</h2>
+            <p class="text-xl mb-8 max-w-2xl mx-auto">Book a consultation with our cosmetic dentistry specialists to discuss your smile goals.</p>
+            <div class="flex flex-col sm:flex-row justify-center gap-4">
+                <a href="#contact-form" class="bg-white text-teal-700 font-bold px-8 py-4 rounded-lg hover:bg-gray-100 transition duration-300">Book Consultation</a>
+                <a href="tel:5551234567" class="bg-transparent border-2 border-white text-white font-bold px-8 py-4 rounded-lg hover:bg-white hover:bg-opacity-10 transition duration-300">Call Us: (555) 123-4567</a>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-black py-12">
+        <div class="container mx-auto px-4">
+            <div class="grid md:grid-cols-4 gap-8 mb-8">
+                <div>
+                    <div class="flex items-center mb-4">
+                        <i class="fas fa-tooth text-3xl text-teal-400 mr-3"></i>
+                        <h3 class="text-2xl font-bold bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">DentalArt</h3>
+                    </div>
+                    <p class="text-gray-400 mb-4">Premium cosmetic dentistry for your most confident smile.</p>
+                    <div class="flex space-x-4">
+                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
+                    </div>
+                </div>
+                <div>
+                    <h4 class="text-white font-bold mb-4">Quick Links</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-teal-400">Home</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-teal-400">About Us</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-teal-400">Services</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-teal-400">Smile Gallery</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-teal-400 text-teal-400 font-semibold">Contact</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-white font-bold mb-4">Services</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-teal-400">Porcelain Veneers</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-teal-400">Dental Implants</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-teal-400">Teeth Whitening</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-teal-400">Invisalign</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-teal-400">Cosmetic Bonding</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-white font-bold mb-4">Contact</h4>
+                    <ul class="space-y-2">
+                        <li class="flex items-start">
+                            <i class="fas fa-map-marker-alt text-teal-400 mt-1 mr-3"></i>
+                            <span class="text-gray-400">123 Smile Avenue, Beverly Hills, CA 90210</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-phone-alt text-teal-400 mr-3"></i>
+                            <span class="text-gray-400">(555) 123-4567</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-envelope text-teal-400 mr-3"></i>
+                            <span class="text-gray-400">hello@dentalart.com</span>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div class="pt-8 border-t border-gray-800 text-center text-gray-500">
+                <p>&copy; 2023 DentalArt. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Mobile menu toggle
+        const menuToggle = document.getElementById('menu-toggle');
+        const closeMenu = document.getElementById('close-menu');
+        const mobileMenu = document.getElementById('mobile-menu');
+        menuToggle.addEventListener('click', () => {
+            mobileMenu.classList.remove('hidden');
+            mobileMenu.classList.add('flex');
+        });
+        closeMenu.addEventListener('click', () => {
+            mobileMenu.classList.add('hidden');
+            mobileMenu.classList.remove('flex');
+        });
+        // FAQ accordion functionality
+        const faqToggles = document.querySelectorAll('.faq-toggle');
+        faqToggles.forEach(toggle => {
+            toggle.addEventListener('click', () => {
+                const content = toggle.nextElementSibling;
+                const icon = toggle.querySelector('i');
+                // Toggle content visibility
+                content.classList.toggle('hidden');
+                // Rotate icon
+                icon.classList.toggle('rotate-180');
+                // Close other open FAQs
+                faqToggles.forEach(otherToggle => {
+                    if (otherToggle !== toggle) {
+                        otherToggle.nextElementSibling.classList.add('hidden');
+                        otherToggle.querySelector('i').classList.remove('rotate-180');
+                    }
+                });
+            });
+        });
+        // Form submission
+        const contactForm = document.querySelector('form');
+        if (contactForm) {
+            contactForm.addEventListener('submit', (e) => {
+                e.preventDefault();
+                // Here you would typically send the form data to your server
+                // For this example, we'll just show an alert
+                alert('Thank you for your message! We will contact you shortly.');
+                contactForm.reset();
+            });
+        }
+    </script>
+</body>
+</html>

templates/thuvien.html ADDED Viewed

	@@ -0,0 +1,624 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Smile Gallery | DentalArt</title>
+    <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>
+        body {
+            background-color: #000;
+            color: #fff;
+            overflow-x: hidden;
+        }
+        .parallax-bg {
+            background-attachment: fixed;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: cover;
+            position: relative;
+            overflow: hidden;
+        }
+        .glow-effect {
+            position: absolute;
+            width: 200px;
+            height: 200px;
+            border-radius: 50%;
+            filter: blur(60px);
+            opacity: 0.3;
+            z-index: 0;
+        }
+        .glow-teal {
+            background: #38b2ac;
+        }
+        .glow-blue {
+            background: #3b82f6;
+        }
+        .glow-purple {
+            background: #8b5cf6;
+        }
+        .gallery-hero {
+            background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255,255,255,0.1);
+        }
+        .gallery-item {
+            position: relative;
+            overflow: hidden;
+            border-radius: 12px;
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        .gallery-item:hover {
+            transform: translateY(-8px);
+            box-shadow: 0 20px 25px rgba(59, 130, 246, 0.2);
+        }
+        .gallery-item::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 50%);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+        .gallery-item:hover::before {
+            opacity: 1;
+        }
+        .gallery-info {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            padding: 1.5rem;
+            transform: translateY(100%);
+            transition: transform 0.3s ease;
+            background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%);
+        }
+        .gallery-item:hover .gallery-info {
+            transform: translateY(0);
+        }
+        .filter-btn {
+            transition: all 0.3s ease;
+            border: 1px solid rgba(255,255,255,0.1);
+        }
+        .filter-btn:hover, .filter-btn.active {
+            background: linear-gradient(to right, #38b2ac, #3b82f6);
+            border-color: transparent;
+            color: white;
+        }
+        .nav-link {
+            position: relative;
+        }
+        .nav-link::after {
+            content: '';
+            position: absolute;
+            width: 0;
+            height: 2px;
+            bottom: -2px;
+            left: 0;
+            background: #38b2ac;
+            transition: width 0.3s ease;
+        }
+        .nav-link:hover::after {
+            width: 100%;
+        }
+        .lightbox {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,0.9);
+            z-index: 1000;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.3s ease;
+        }
+        .lightbox.active {
+            opacity: 1;
+            pointer-events: all;
+        }
+        .lightbox-content {
+            position: relative;
+            max-width: 90%;
+            max-height: 90%;
+        }
+        .lightbox img {
+            max-width: 100%;
+            max-height: 80vh;
+            border-radius: 8px;
+            box-shadow: 0 10px 25px rgba(0,0,0,0.5);
+        }
+        .lightbox-close {
+            position: absolute;
+            top: -40px;
+            right: 0;
+            color: white;
+            font-size: 2rem;
+            cursor: pointer;
+            transition: color 0.3s ease;
+        }
+        .lightbox-close:hover {
+            color: #38b2ac;
+        }
+        .lightbox-nav {
+            position: absolute;
+            top: 50%;
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            padding: 0 20px;
+            transform: translateY(-50%);
+        }
+        .lightbox-nav button {
+            background: rgba(0,0,0,0.5);
+            color: white;
+            border: none;
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: background 0.3s ease;
+        }
+        .lightbox-nav button:hover {
+            background: rgba(59, 130, 246, 0.8);
+        }
+        @media (max-width: 768px) {
+            .parallax-bg {
+                background-attachment: scroll;
+            }
+            .gallery-hero {
+                padding-top: 120px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- Floating Glow Effects -->
+    <div class="glow-effect glow-teal" style="top: 10%; left: 10%;"></div>
+    <div class="glow-effect glow-blue" style="top: 60%; right: 5%;"></div>
+    <div class="glow-effect glow-purple" style="bottom: 10%; left: 20%;"></div>
+    <!-- Header -->
+    <header class="py-6 px-4 fixed w-full z-50 bg-black bg-opacity-80 backdrop-filter backdrop-blur-sm">
+        <div class="container mx-auto flex justify-between items-center">
+            <div class="flex items-center">
+                <i class="fas fa-tooth text-3xl text-teal-400 mr-3"></i>
+                <h1 class="text-2xl font-bold bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">DentalArt</h1>
+            </div>
+            <button id="menu-toggle" class="md:hidden text-white">
+                <i class="fas fa-bars text-2xl"></i>
+            </button>
+            <nav id="main-nav" class="hidden md:flex space-x-8">
+                <a href="#" class="nav-link text-white">Home</a>
+                <a href="#" class="nav-link text-white text-teal-400 font-semibold">Gallery</a>
+                <a href="#" class="nav-link text-white">Treatments</a>
+                <a href="#" class="nav-link text-white">Contact</a>
+            </nav>
+        </div>
+    </header>
+    <!-- Mobile Menu -->
+    <div id="mobile-menu" class="fixed inset-0 bg-black bg-opacity-90 z-40 hidden flex-col items-center justify-center space-y-8">
+        <button id="close-menu" class="absolute top-6 right-6 text-white text-2xl">
+            <i class="fas fa-times"></i>
+        </button>
+        <a href="#" class="text-white text-2xl">Home</a>
+        <a href="#" class="text-white text-2xl text-teal-400 font-semibold">Gallery</a>
+        <a href="#" class="text-white text-2xl">Treatments</a>
+        <a href="#" class="text-white text-2xl">Contact</a>
+    </div>
+    <!-- Gallery Hero Section -->
+    <section class="gallery-hero min-h-[50vh] flex items-center pt-20 relative overflow-hidden parallax-bg" style="background-image: url('https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');">
+        <div class="container mx-auto px-4 py-16 relative z-10">
+            <div class="max-w-2xl mx-auto text-center">
+                <h1 class="text-4xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">Smile Gallery</h1>
+                <p class="text-xl text-gray-300 mb-8">Explore our collection of stunning smile transformations. Each case represents our commitment to excellence in cosmetic dentistry.</p>
+                <div class="flex justify-center">
+                    <button class="bg-gradient-to-r from-teal-500 to-blue-600 text-white px-8 py-3 rounded-full font-semibold hover:opacity-90 transition shadow-lg">View Our Treatments</button>
+                </div>
+            </div>
+        </div>
+        <div class="absolute inset-0 bg-gradient-to-b from-black via-transparent to-black opacity-70 z-0"></div>
+    </section>
+    <!-- Gallery Filters -->
+    <section class="py-12 px-4 bg-gray-900 sticky top-0 z-30 shadow-lg">
+        <div class="container mx-auto">
+            <div class="flex flex-wrap justify-center gap-3">
+                <button class="filter-btn active px-6 py-2 rounded-full font-medium" data-filter="all">All Cases</button>
+                <button class="filter-btn px-6 py-2 rounded-full font-medium" data-filter="veneers">Veneers</button>
+                <button class="filter-btn px-6 py-2 rounded-full font-medium" data-filter="implants">Implants</button>
+                <button class="filter-btn px-6 py-2 rounded-full font-medium" data-filter="whitening">Whitening</button>
+                <button class="filter-btn px-6 py-2 rounded-full font-medium" data-filter="orthodontics">Orthodontics</button>
+                <button class="filter-btn px-6 py-2 rounded-full font-medium" data-filter="full-mouth">Full Mouth</button>
+            </div>
+        </div>
+    </section>
+    <!-- Gallery Grid -->
+    <section class="py-16 px-4">
+        <div class="container mx-auto">
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Gallery Item 1 -->
+                <div class="gallery-item h-80" data-category="veneers">
+                    <img src="https://images.unsplash.com/photo-1622253692010-333f2da6031d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Porcelain veneers transformation" class="w-full h-full object-cover">
+                    <div class="gallery-info">
+                        <h3 class="text-xl font-bold mb-1">Porcelain Veneers</h3>
+                        <p class="text-sm text-gray-300 mb-2">8 upper veneers for complete smile makeover</p>
+                        <span class="inline-block bg-teal-500 text-white text-xs px-2 py-1 rounded-full">+90% Improvement</span>
+                    </div>
+                </div>
+                <!-- Gallery Item 2 -->
+                <div class="gallery-item h-80" data-category="implants">
+                    <img src="https://images.unsplash.com/photo-1605497788044-5a32ffe2d1c5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Dental implants transformation" class="w-full h-full object-cover">
+                    <div class="gallery-info">
+                        <h3 class="text-xl font-bold mb-1">Dental Implants</h3>
+                        <p class="text-sm text-gray-300 mb-2">Single tooth implant with crown</p>
+                        <span class="inline-block bg-blue-500 text-white text-xs px-2 py-1 rounded-full">Natural Look</span>
+                    </div>
+                </div>
+                <!-- Gallery Item 3 -->
+                <div class="gallery-item h-80" data-category="whitening">
+                    <img src="https://images.unsplash.com/photo-1590439471364-192aa70c0b53?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Teeth whitening transformation" class="w-full h-full object-cover">
+                    <div class="gallery-info">
+                        <h3 class="text-xl font-bold mb-1">Professional Whitening</h3>
+                        <p class="text-sm text-gray-300 mb-2">8 shades improvement in one session</p>
+                        <span class="inline-block bg-purple-500 text-white text-xs px-2 py-1 rounded-full">Instant Results</span>
+                    </div>
+                </div>
+                <!-- Gallery Item 4 -->
+                <div class="gallery-item h-80" data-category="orthodontics">
+                    <img src="https://images.unsplash.com/photo-1622253692010-333f2da6031d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Invisalign treatment" class="w-full h-full object-cover">
+                    <div class="gallery-info">
+                        <h3 class="text-xl font-bold mb-1">Invisalign</h3>
+                        <p class="text-sm text-gray-300 mb-2">6 months treatment for crowded teeth</p>
+                        <span class="inline-block bg-teal-500 text-white text-xs px-2 py-1 rounded-full">Discreet</span>
+                    </div>
+                </div>
+                <!-- Gallery Item 5 -->
+                <div class="gallery-item h-80" data-category="full-mouth">
+                    <img src="https://images.unsplash.com/photo-1564078517170-9707c7a0e6b6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Full mouth reconstruction" class="w-full h-full object-cover">
+                    <div class="gallery-info">
+                        <h3 class="text-xl font-bold mb-1">Full Mouth Reconstruction</h3>
+                        <p class="text-sm text-gray-300 mb-2">Combination of veneers, crowns and implants</p>
+                        <span class="inline-block bg-blue-500 text-white text-xs px-2 py-1 rounded-full">Complete Makeover</span>
+                    </div>
+                </div>
+                <!-- Gallery Item 6 -->
+                <div class="gallery-item h-80" data-category="veneers">
+                    <img src="https://images.unsplash.com/photo-1622253692010-333f2da6031d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Lumineers transformation" class="w-full h-full object-cover">
+                    <div class="gallery-info">
+                        <h3 class="text-xl font-bold mb-1">Lumineers</h3>
+                        <p class="text-sm text-gray-300 mb-2">Minimal prep veneers for natural teeth</p>
+                        <span class="inline-block bg-purple-500 text-white text-xs px-2 py-1 rounded-full">No Drilling</span>
+                    </div>
+                </div>
+                <!-- Gallery Item 7 -->
+                <div class="gallery-item h-80" data-category="orthodontics">
+                    <img src="https://images.unsplash.com/photo-1597251377449-eb8a2dea9a8a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Traditional braces" class="w-full h-full object-cover">
+                    <div class="gallery-info">
+                        <h3 class="text-xl font-bold mb-1">Traditional Braces</h3>
+                        <p class="text-sm text-gray-300 mb-2">18 months treatment for bite correction</p>
+                        <span class="inline-block bg-teal-500 text-white text-xs px-2 py-1 rounded-full">Effective</span>
+                    </div>
+                </div>
+                <!-- Gallery Item 8 -->
+                <div class="gallery-item h-80" data-category="implants">
+                    <img src="https://images.unsplash.com/photo-1605497788044-5a32ffe2d1c5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="All-on-4 implants" class="w-full h-full object-cover">
+                    <div class="gallery-info">
+                        <h3 class="text-xl font-bold mb-1">All-on-4 Implants</h3>
+                        <p class="text-sm text-gray-300 mb-2">Full arch restoration with 4 implants</p>
+                        <span class="inline-block bg-blue-500 text-white text-xs px-2 py-1 rounded-full">Fixed Teeth</span>
+                    </div>
+                </div>
+                <!-- Gallery Item 9 -->
+                <div class="gallery-item h-80" data-category="full-mouth">
+                    <img src="https://images.unsplash.com/photo-1560869713-8acaebf44127?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Smile design" class="w-full h-full object-cover">
+                    <div class="gallery-info">
+                        <h3 class="text-xl font-bold mb-1">Digital Smile Design</h3>
+                        <p class="text-sm text-gray-300 mb-2">Complete smile analysis and design</p>
+                        <span class="inline-block bg-purple-500 text-white text-xs px-2 py-1 rounded-full">Precision</span>
+                    </div>
+                </div>
+            </div>
+            <div class="text-center mt-16">
+                <button class="border-2 border-white px-8 py-3 rounded-full font-semibold hover:bg-white hover:text-black transition">Load More Cases</button>
+            </div>
+        </div>
+    </section>
+    <!-- Testimonials Section -->
+    <section class="py-20 px-4 bg-gray-900">
+        <div class="container mx-auto">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4 bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">Patient Stories</h2>
+                <p class="text-gray-400 max-w-2xl mx-auto">Hear from our patients about their smile transformation experiences</p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="bg-gray-800 bg-opacity-70 p-8 rounded-xl backdrop-filter backdrop-blur-sm border border-gray-700">
+                    <div class="flex items-center mb-6">
+                        <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
+                            <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Patient" class="w-full h-full object-cover">
+                        </div>
+                        <div>
+                            <h4 class="font-bold">Sarah Johnson</h4>
+                            <p class="text-sm text-teal-400">Veneers Patient</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-300 mb-4">"I was nervous about getting veneers, but the team at DentalArt made the process so comfortable. The results exceeded all my expectations - I finally have the smile I've always wanted!"</p>
+                    <div class="flex text-yellow-400">
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                    </div>
+                </div>
+                <div class="bg-gray-800 bg-opacity-70 p-8 rounded-xl backdrop-filter backdrop-blur-sm border border-gray-700">
+                    <div class="flex items-center mb-6">
+                        <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
+                            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Patient" class="w-full h-full object-cover">
+                        </div>
+                        <div>
+                            <h4 class="font-bold">Michael Chen</h4>
+                            <p class="text-sm text-blue-400">Implant Patient</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-300 mb-4">"After years of hiding my smile due to missing teeth, DentalArt gave me back my confidence with implants that look and feel completely natural. The entire process was seamless."</p>
+                    <div class="flex text-yellow-400">
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                    </div>
+                </div>
+                <div class="bg-gray-800 bg-opacity-70 p-8 rounded-xl backdrop-filter backdrop-blur-sm border border-gray-700">
+                    <div class="flex items-center mb-6">
+                        <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
+                            <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Patient" class="w-full h-full object-cover">
+                        </div>
+                        <div>
+                            <h4 class="font-bold">Emily Rodriguez</h4>
+                            <p class="text-sm text-purple-400">Invisalign Patient</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-300 mb-4">"Invisalign with DentalArt transformed not just my teeth but my whole facial appearance. The subtle changes made a huge difference, and no one even noticed I was wearing aligners!"</p>
+                    <div class="flex text-yellow-400">
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- CTA Section -->
+    <section class="py-20 px-4 relative overflow-hidden">
+        <div class="glow-effect glow-teal" style="top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 300px;"></div>
+        <div class="container mx-auto text-center relative z-10">
+            <h2 class="text-3xl md:text-4xl font-bold mb-6 bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">Ready for Your Smile Transformation?</h2>
+            <p class="text-xl mb-8 max-w-2xl mx-auto text-gray-300">Book a consultation to discuss your personalized treatment plan</p>
+            <button class="bg-gradient-to-r from-teal-500 to-blue-600 text-white px-8 py-4 rounded-full font-semibold text-lg hover:opacity-90 transition shadow-lg">Book Your Consultation</button>
+            <p class="mt-4 text-gray-400 text-sm">or call us at <a href="tel:+15551234567" class="text-teal-400 hover:underline">(555) 123-4567</a></p>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-gray-900 text-white py-12 px-4">
+        <div class="container mx-auto">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                <div>
+                    <div class="flex items-center mb-4">
+                        <i class="fas fa-tooth text-2xl text-teal-400 mr-3"></i>
+                        <h3 class="text-xl font-bold">DentalArt</h3>
+                    </div>
+                    <p class="text-gray-400">Specializing in cosmetic dentistry and smile makeovers with cutting-edge technology.</p>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-teal-400 transition">Home</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-teal-400 transition">Gallery</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-teal-400 transition">Treatments</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-teal-400 transition">About Us</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Contact</h4>
+                    <ul class="space-y-2">
+                        <li class="flex items-center"><i class="fas fa-map-marker-alt mr-2 text-teal-400"></i> 123 Dental Ave, Smile City</li>
+                        <li class="flex items-center"><i class="fas fa-phone mr-2 text-teal-400"></i> (555) 123-4567</li>
+                        <li class="flex items-center"><i class="fas fa-envelope mr-2 text-teal-400"></i> info@dentalart.com</li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Follow Us</h4>
+                    <div class="flex space-x-4">
+                        <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-teal-500 transition">
+                            <i class="fab fa-facebook-f"></i>
+                        </a>
+                        <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-blue-500 transition">
+                            <i class="fab fa-instagram"></i>
+                        </a>
+                        <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-purple-500 transition">
+                            <i class="fab fa-tiktok"></i>
+                        </a>
+                        <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-red-500 transition">
+                            <i class="fab fa-youtube"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">
+                <p>&copy; 2023 DentalArt. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+    <!-- Lightbox -->
+    <div class="lightbox">
+        <div class="lightbox-content">
+            <span class="lightbox-close"><i class="fas fa-times"></i></span>
+            <img src="" alt="Gallery image">
+            <div class="lightbox-nav">
+                <button class="lightbox-prev"><i class="fas fa-chevron-left"></i></button>
+                <button class="lightbox-next"><i class="fas fa-chevron-right"></i></button>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Mobile menu toggle
+        document.getElementById('menu-toggle').addEventListener('click', function() {
+            document.getElementById('mobile-menu').classList.remove('hidden');
+            document.getElementById('mobile-menu').classList.add('flex');
+        });
+        document.getElementById('close-menu').addEventListener('click', function() {
+            document.getElementById('mobile-menu').classList.add('hidden');
+            document.getElementById('mobile-menu').classList.remove('flex');
+        });
+        // Gallery filter functionality
+        const filterButtons = document.querySelectorAll('.filter-btn');
+        const galleryItems = document.querySelectorAll('.gallery-item');
+        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 filterValue = this.getAttribute('data-filter');
+                // Filter gallery items
+                galleryItems.forEach(item => {
+                    if (filterValue === 'all' || item.getAttribute('data-category') === filterValue) {
+                        item.style.display = 'block';
+                    } else {
+                        item.style.display = 'none';
+                    }
+                });
+            });
+        });
+        // Lightbox functionality
+        const lightbox = document.querySelector('.lightbox');
+        const lightboxImg = lightbox.querySelector('img');
+        const lightboxClose = document.querySelector('.lightbox-close');
+        const galleryImages = document.querySelectorAll('.gallery-item img');
+        let currentImageIndex = 0;
+        // Open lightbox when gallery image is clicked
+        galleryImages.forEach((img, index) => {
+            img.addEventListener('click', function() {
+                currentImageIndex = index;
+                lightboxImg.src = this.src;
+                lightbox.classList.add('active');
+                document.body.style.overflow = 'hidden';
+            });
+        });
+        // Close lightbox
+        lightboxClose.addEventListener('click', function() {
+            lightbox.classList.remove('active');
+            document.body.style.overflow = 'auto';
+        });
+        // Lightbox navigation
+        const lightboxPrev = document.querySelector('.lightbox-prev');
+        const lightboxNext = document.querySelector('.lightbox-next');
+        lightboxPrev.addEventListener('click', function() {
+            currentImageIndex = (currentImageIndex - 1 + galleryImages.length) % galleryImages.length;
+            lightboxImg.src = galleryImages[currentImageIndex].src;
+        });
+        lightboxNext.addEventListener('click', function() {
+            currentImageIndex = (currentImageIndex + 1) % galleryImages.length;
+            lightboxImg.src = galleryImages[currentImageIndex].src;
+        });
+        // Close lightbox when clicking outside image
+        lightbox.addEventListener('click', function(e) {
+            if (e.target === lightbox) {
+                lightbox.classList.remove('active');
+                document.body.style.overflow = 'auto';
+            }
+        });
+        // Parallax effect
+        window.addEventListener('scroll', function() {
+            const parallaxSections = document.querySelectorAll('.parallax-bg');
+            const scrollPosition = window.pageYOffset;
+            parallaxSections.forEach(section => {
+                if (window.innerWidth > 768) { // Only apply parallax on desktop
+                    section.style.backgroundPositionY = (scrollPosition * 0.5) + 'px';
+                }
+            });
+        });
+    </script>
+</body>
+</html>