Spaces:

huylaughmad
/

website

Runtime error

App Files Files Community

huylaughmad commited on Apr 30

Commit

67c1978

verified ·

1 Parent(s): 5a711fa

Create vechungtoi.html

Browse files

Files changed (1) hide show

templates/vechungtoi.html +610 -0

templates/vechungtoi.html ADDED Viewed

	@@ -0,0 +1,610 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Về Chúng Tôi - TTL1979 Nha Khoa Thẩm Mỹ</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">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');
+        body {
+            font-family: 'Montserrat', sans-serif;
+            background-color: #0a0a0a;
+            color: #fff;
+            overflow-x: hidden;
+            scroll-behavior: smooth;
+        }
+        .hero-gradient {
+            background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(59, 130, 246, 0.1) 50%, rgba(139, 92, 246, 0.1) 100%);
+        }
+        .glow-effect {
+            position: absolute;
+            width: 200px;
+            height: 200px;
+            border-radius: 50%;
+            filter: blur(80px);
+            opacity: 0.3;
+            z-index: 0;
+            animation: float 6s ease-in-out infinite;
+        }
+        .glow-teal {
+            background: #10b981;
+        }
+        .glow-blue {
+            background: #3b82f6;
+        }
+        .glow-purple {
+            background: #8b5cf6;
+        }
+        .glow-pink {
+            background: #ec4899;
+        }
+        .card-glass {
+            background: rgba(30, 41, 59, 0.5);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            transition: all 0.4s ease;
+        }
+        .card-glass:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 20px 40px rgba(59, 130, 246, 0.3);
+            border-color: rgba(59, 130, 246, 0.5);
+        }
+        .nav-link {
+            position: relative;
+        }
+        .nav-link::after {
+            content: '';
+            position: absolute;
+            width: 0;
+            height: 2px;
+            bottom: -2px;
+            left: 0;
+            background: #10b981;
+            transition: width 0.3s ease;
+        }
+        .nav-link:hover::after {
+            width: 100%;
+        }
+        .btn-primary {
+            background: linear-gradient(45deg, #10b981, #3b82f6);
+            box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
+            transition: all 0.3s ease;
+        }
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 20px rgba(59, 130, 246, 0.6);
+        }
+        .btn-secondary {
+            border: 2px solid #fff;
+            transition: all 0.3s ease;
+        }
+        .btn-secondary:hover {
+            background: #fff;
+            color: #000;
+        }
+        .floating {
+            animation: float 6s ease-in-out infinite;
+        }
+        @keyframes float {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-20px); }
+            100% { transform: translateY(0px); }
+        }
+        .section-title {
+            position: relative;
+            display: inline-block;
+        }
+        .section-title::after {
+            content: '';
+            position: absolute;
+            bottom: -10px;
+            left: 0;
+            width: 50%;
+            height: 3px;
+            background: linear-gradient(90deg, #10b981, #3b82f6);
+            border-radius: 3px;
+        }
+        .parallax-bg {
+            background-attachment: fixed;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: cover;
+        }
+        .team-card {
+            transition: all 0.4s ease;
+            perspective: 1000px;
+        }
+        .team-card:hover {
+            transform: translateY(-10px) rotateX(5deg);
+            box-shadow: 0 20px 40px rgba(0,0,0,0.3);
+        }
+        .team-photo {
+            transition: all 0.4s ease;
+        }
+        .team-card:hover .team-photo {
+            transform: scale(1.05);
+        }
+        .timeline-item {
+            position: relative;
+            padding-left: 60px;
+            margin-bottom: 50px;
+        }
+        .timeline-item::before {
+            content: '';
+            position: absolute;
+            left: 20px;
+            top: 0;
+            width: 2px;
+            height: 100%;
+            background: linear-gradient(to bottom, #10b981, #3b82f6);
+        }
+        .timeline-dot {
+            position: absolute;
+            left: 12px;
+            top: 5px;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: linear-gradient(45deg, #10b981, #3b82f6);
+            border: 4px solid #1e293b;
+            z-index: 1;
+        }
+        .value-card {
+            transition: all 0.4s ease;
+        }
+        .value-card:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 20px 40px rgba(16, 185, 129, 0.2);
+        }
+        @media (max-width: 768px) {
+            .parallax-bg {
+                background-attachment: scroll;
+            }
+            .timeline-item {
+                padding-left: 40px;
+            }
+            .timeline-item::before {
+                left: 10px;
+            }
+            .timeline-dot {
+                left: 2px;
+            }
+        }
+    </style>
+</head>
+<body class="relative">
+    <!-- Floating Glow Effects -->
+    <div class="glow-effect glow-teal" style="top: 10%; left: 10%; animation-delay: 0s;"></div>
+    <div class="glow-effect glow-blue" style="top: 60%; right: 5%; animation-delay: 1s;"></div>
+    <div class="glow-effect glow-purple" style="bottom: 10%; left: 20%; animation-delay: 2s;"></div>
+    <div class="glow-effect glow-pink" style="top: 30%; right: 20%; animation-delay: 3s;"></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 animate-pulse"></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">Trang chủ</a>
+                <a href="about.html" class="nav-link text-teal-400">Về chúng tôi</a>
+                <a href="services.html" class="nav-link text-white">Dịch vụ</a>
+                <a href="gallery.html" class="nav-link text-white">Thư viện</a>
+                <a href="contact.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 hover:text-teal-400 transition">Trang chủ</a>
+        <a href="about.html" class="text-teal-400 text-2xl transition">Về chúng tôi</a>
+        <a href="services.html" class="text-white text-2xl hover:text-teal-400 transition">Dịch vụ</a>
+        <a href="gallery.html" class="text-white text-2xl hover:text-teal-400 transition">Thư viện</a>
+        <a href="contact.html" class="text-white text-2xl hover:text-teal-400 transition">Liên hệ</a>
+    </div>
+    <!-- Hero Section -->
+    <section class="min-h-[60vh] flex items-center justify-center pt-20 hero-gradient relative overflow-hidden">
+        <div class="absolute inset-0">
+            <div class="absolute inset-0 bg-black opacity-60"></div>
+            <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="Dental Clinic" class="w-full h-full object-cover">
+        </div>
+        <div class="container mx-auto px-4 text-center relative z-10 animate__animated animate__fadeIn">
+            <h1 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">Về TTL1979</h1>
+            <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto text-gray-300">Hành trình 20+ năm kiến tạo nụ cười Việt</p>
+        </div>
+    </section>
+    <!-- Our Story Section -->
+    <section class="py-20 px-4 relative overflow-hidden">
+        <div class="container mx-auto">
+            <div class="flex flex-col lg:flex-row items-center">
+                <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12 relative">
+                    <div class="relative rounded-xl overflow-hidden">
+                        <img src="https://images.unsplash.com/photo-1550831107-1553da8c8464?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Our Story" class="w-full h-auto rounded-xl transform hover:scale-105 transition duration-500">
+                        <div class="absolute -bottom-6 -right-6 bg-white p-4 rounded-xl shadow-xl hidden md:block">
+                            <div class="flex items-center">
+                                <div class="bg-teal-500 text-white p-3 rounded-full mr-3">
+                                    <i class="fas fa-calendar-alt text-xl"></i>
+                                </div>
+                                <div>
+                                    <p class="font-bold text-gray-800">Từ năm 1979</p>
+                                    <p class="text-sm text-gray-600">Hành trình kiến tạo nụ cười</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="lg:w-1/2">
+                    <h2 class="text-3xl md:text-4xl font-bold mb-6 section-title">Câu Chuyện Của Chúng Tôi</h2>
+                    <p class="text-gray-400 mb-6">TTL1979 được thành lập từ năm 1979 bởi Bác sĩ Trần Thanh Long với sứ mệnh mang đến những nụ cười hoàn hảo cho người Việt. Từ một phòng khám nhỏ, chúng tôi đã phát triển thành hệ thống nha khoa thẩm mỹ hàng đầu với 5 chi nhánh trên toàn quốc.</p>
+                    <div class="mb-8">
+                        <div class="timeline-item">
+                            <div class="timeline-dot"></div>
+                            <h4 class="font-bold text-xl mb-2">1979 - Khởi đầu</h4>
+                            <p class="text-gray-400">Phòng khám đầu tiên được thành lập tại Rạch Giá với 2 phòng điều trị</p>
+                        </div>
+                        <div class="timeline-item">
+                            <div class="timeline-dot"></div>
+                            <h4 class="font-bold text-xl mb-2">1995 - Mở rộng</h4>
+                            <p class="text-gray-400">Chuyển đổi sang mô hình nha khoa đa chuyên khoa với 10 phòng điều trị</p>
+                        </div>
+                        <div class="timeline-item">
+                            <div class="timeline-dot"></div>
+                            <h4 class="font-bold text-xl mb-2">2010 - Hiện đại hóa</h4>
+                            <p class="text-gray-400">Đầu tư hệ thống máy móc CAD/CAM hiện đại từ Đức và Thụy Sĩ</p>
+                        </div>
+                        <div class="timeline-item">
+                            <div class="timeline-dot"></div>
+                            <h4 class="font-bold text-xl mb-2">2023 - Toàn cầu</h4>
+                            <p class="text-gray-400">Mở rộng 5 chi nhánh và trở thành đối tác của Hiệp hội Nha khoa Thẩm mỹ Châu Âu</p>
+                        </div>
+                    </div>
+                    <a href="#team" class="inline-flex items-center text-teal-400 font-semibold hover:text-teal-300 transition">
+                        Gặp đội ngũ của chúng tôi
+                        <i class="fas fa-arrow-right ml-2"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Mission Section -->
+    <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-80"></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 section-title">Sứ Mệnh & Giá Trị</h2>
+                <p class="text-gray-400 max-w-2xl mx-auto">Những điều chúng tôi cam kết và theo đuổi</p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <!-- Mission 1 -->
+                <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 transform hover:-translate-y-2 value-card">
+                    <div class="bg-teal-500 bg-opacity-20 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-6 mx-auto">
+                        <i class="fas fa-heart text-teal-400 text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-4 text-center">Sứ Mệnh</h3>
+                    <p class="text-gray-300 text-center">Mang đến những giải pháp nha khoa thẩm mỹ an toàn, hiệu quả nhất, giúp khách hàng tự tin với nụ cười rạng rỡ.</p>
+                </div>
+                <!-- Mission 2 -->
+                <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 transform hover:-translate-y-2 value-card">
+                    <div class="bg-blue-500 bg-opacity-20 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-6 mx-auto">
+                        <i class="fas fa-eye text-blue-400 text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-4 text-center">Tầm Nhìn</h3>
+                    <p class="text-gray-300 text-center">Trở thành hệ thống nha khoa thẩm mỹ hàng đầu Đông Nam Á với tiêu chuẩn quốc tế và dịch vụ đẳng cấp.</p>
+                </div>
+                <!-- Mission 3 -->
+                <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 transform hover:-translate-y-2 value-card">
+                    <div class="bg-purple-500 bg-opacity-20 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-6 mx-auto">
+                        <i class="fas fa-star text-purple-400 text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-4 text-center">Giá Trị Cốt Lõi</h3>
+                    <p class="text-gray-300 text-center">Chuyên môn cao - An toàn tuyệt đối - Công nghệ hiện đại - Dịch vụ tận tâm - Minh bạch về chi phí.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Team Section -->
+    <section id="team" 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 section-title">Đội Ngũ Chuyên Gia</h2>
+                <p class="text-gray-400 max-w-2xl mx-auto">Những bác sĩ giàu kinh nghiệm và tận tâm với nghề</p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+                <!-- Doctor 1 -->
+                <div class="team-card bg-gray-900 rounded-xl overflow-hidden card-glass">
+                    <div class="relative overflow-hidden h-80">
+                        <img src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Doctor" class="w-full h-full object-cover team-photo">
+                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
+                            <h3 class="text-xl font-bold">BS. Trần Thanh Long</h4>
+                            <p class="text-teal-400 text-sm">Giám đốc chuyên môn</p>
+                        </div>
+                    </div>
+                    <div class="p-6">
+                        <p class="text-gray-400 mb-4">Chuyên gia với 30+ năm kinh nghiệm trong lĩnh vực nha khoa thẩm mỹ và phục hình răng.</p>
+                        <div class="flex space-x-3">
+                            <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-blue-400 transition"><i class="fab fa-linkedin-in"></i></a>
+                            <a href="#" class="text-gray-400 hover:text-pink-400 transition"><i class="fab fa-instagram"></i></a>
+                        </div>
+                    </div>
+                </div>
+                <!-- Doctor 2 -->
+                <div class="team-card bg-gray-900 rounded-xl overflow-hidden card-glass">
+                    <div class="relative overflow-hidden h-80">
+                        <img src="https://images.unsplash.com/photo-1594824476967-48c8b964273f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Doctor" class="w-full h-full object-cover team-photo">
+                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
+                            <h3 class="text-xl font-bold">BS. Nguyễn Thị Minh</h4>
+                            <p class="text-blue-400 text-sm">Chuyên gia niềng răng</p>
+                        </div>
+                    </div>
+                    <div class="p-6">
+                        <p class="text-gray-400 mb-4">Chuyên gia chỉnh nha với 15 năm kinh nghiệm, thành thạo các kỹ thuật niềng răng hiện đại.</p>
+                        <div class="flex space-x-3">
+                            <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-blue-400 transition"><i class="fab fa-linkedin-in"></i></a>
+                            <a href="#" class="text-gray-400 hover:text-pink-400 transition"><i class="fab fa-instagram"></i></a>
+                        </div>
+                    </div>
+                </div>
+                <!-- Doctor 3 -->
+                <div class="team-card bg-gray-900 rounded-xl overflow-hidden card-glass">
+                    <div class="relative overflow-hidden h-80">
+                        <img src="https://images.unsplash.com/photo-1622253692010-333f2da6031d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Doctor" class="w-full h-full object-cover team-photo">
+                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
+                            <h3 class="text-xl font-bold">BS. Lê Văn Tuấn</h4>
+                            <p class="text-purple-400 text-sm">Chuyên gia implant</p>
+                        </div>
+                    </div>
+                    <div class="p-6">
+                        <p class="text-gray-400 mb-4">Bác sĩ phẫu thuật implant với hơn 2.000 ca thành công, chuyên gia về phục hình răng.</p>
+                        <div class="flex space-x-3">
+                            <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-blue-400 transition"><i class="fab fa-linkedin-in"></i></a>
+                            <a href="#" class="text-gray-400 hover:text-pink-400 transition"><i class="fab fa-instagram"></i></a>
+                        </div>
+                    </div>
+                </div>
+                <!-- Doctor 4 -->
+                <div class="team-card bg-gray-900 rounded-xl overflow-hidden card-glass">
+                    <div class="relative overflow-hidden h-80">
+                        <img src="https://images.unsplash.com/photo-1551601651-bc60f254d532?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Doctor" class="w-full h-full object-cover team-photo">
+                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
+                            <h3 class="text-xl font-bold">BS. Phạm Thị Hương</h4>
+                            <p class="text-pink-400 text-sm">Chuyên gia thẩm mỹ nha khoa</p>
+                        </div>
+                    </div>
+                    <div class="p-6">
+                        <p class="text-gray-400 mb-4">Chuyên gia về răng sứ thẩm mỹ và tẩy trắng răng với phong cách làm việc tỉ mỉ, chu đáo.</p>
+                        <div class="flex space-x-3">
+                            <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-blue-400 transition"><i class="fab fa-linkedin-in"></i></a>
+                            <a href="#" class="text-gray-400 hover:text-pink-400 transition"><i class="fab fa-instagram"></i></a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Technology Section -->
+    <section class="py-20 px-4 bg-gradient-to-r from-gray-900 to-gray-800 relative overflow-hidden">
+        <div class="container mx-auto">
+            <div class="flex flex-col lg:flex-row items-center">
+                <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12">
+                    <h2 class="text-3xl md:text-4xl font-bold mb-6 section-title">Công Nghệ Hiện Đại</h2>
+                    <p class="text-gray-400 mb-6">TTL1979 luôn tiên phong trong việc ứng dụng các công nghệ nha khoa hiện đại nhất thế giới để mang lại kết quả điều trị tốt nhất cho khách hàng.</p>
+                    <div class="space-y-6">
+                        <div class="flex items-start">
+                            <div class="bg-teal-500 bg-opacity-20 p-3 rounded-full mr-4">
+                                <i class="fas fa-microchip text-teal-400"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-bold mb-1">CAD/CAM 3D</h4>
+                                <p class="text-gray-400">Công nghệ thiết kế và sản xuất răng sứ bằng máy tính hiện đại từ Đức</p>
+                            </div>
+                        </div>
+                        <div class="flex items-start">
+                            <div class="bg-blue-500 bg-opacity-20 p-3 rounded-full mr-4">
+                                <i class="fas fa-laptop-medical text-blue-400"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-bold mb-1">Máy CT Cone Beam</h4>
+                                <p class="text-gray-400">Chụp phim 3D độ phân giải cao giúp chẩn đoán chính xác</p>
+                            </div>
+                        </div>
+                        <div class="flex items-start">
+                            <div class="bg-purple-500 bg-opacity-20 p-3 rounded-full mr-4">
+                                <i class="fas fa-bolt text-purple-400"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-bold mb-1">Laser nha khoa</h4>
+                                <p class="text-gray-400">Điều trị không đau, không chảy máu, hồi phục nhanh</p>
+                            </div>
+                        </div>
+                        <div class="flex items-start">
+                            <div class="bg-pink-500 bg-opacity-20 p-3 rounded-full mr-4">
+                                <i class="fas fa-robot text-pink-400"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-bold mb-1">Invisalign AI</h4>
+                                <p class="text-gray-400">Công nghệ niềng răng trong suốt với trí tuệ nhân tạo</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="lg:w-1/2">
+                    <div class="grid grid-cols-2 gap-4">
+                        <div class="rounded-xl overflow-hidden">
+                            <img src="https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Technology" class="w-full h-full object-cover transform hover:scale-105 transition duration-500">
+                        </div>
+                        <div class="rounded-xl overflow-hidden">
+                            <img src="https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Technology" class="w-full h-full object-cover transform hover:scale-105 transition duration-500">
+                        </div>
+                        <div class="rounded-xl overflow-hidden">
+                            <img src="https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Technology" class="w-full h-full object-cover transform hover:scale-105 transition duration-500">
+                        </div>
+                        <div class="rounded-xl overflow-hidden">
+                            <img src="https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Technology" class="w-full h-full object-cover transform hover:scale-105 transition duration-500">
+                        </div>
+                    </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">
+            <div class="max-w-3xl mx-auto bg-gray-900 bg-opacity-70 rounded-xl p-8 md:p-12 backdrop-filter backdrop-blur-sm border border-gray-800 transform hover:scale-[1.01] transition duration-500">
+                <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?</h2>
+                <p class="text-xl mb-8 text-gray-300">Đặt lịch ngay hôm nay để được tư vấn miễn phí với bác sĩ chuyên khoa</p>
+                <a href="contact.html" class="btn-primary text-white px-8 py-4 rounded-full font-semibold text-lg inline-block">Đặt lịch khám ngay</a>
+            </div>
+        </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 mb-4">Nha khoa thẩm mỹ lâu đời nhất Việt Nam với hơn 20 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-blue-400 transition"><i class="fab fa-twitter"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-pink-400 transition"><i class="fab fa-instagram"></i></a>
+                    </div>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Dịch vụ</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-teal-400 transition">Tẩy trắng răng</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-teal-400 transition">Niềng răng Invisalign</a></li>
+                        <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">Cấy ghép Implant</a></li>
+                    </ul>
+                </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">Trang chủ</a></li>
+                        <li><a href="about.html" class="text-teal-400 transition">Về chúng tôi</a></li>
+                        <li><a href="services.html" class="text-gray-400 hover:text-teal-400 transition">Dịch vụ</a></li>
+                        <li><a href="gallery.html" class="text-gray-400 hover:text-teal-400 transition">Thư viện</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ú, Rạch Giá</li>
+                        <li class="flex items-center"><i class="fas fa-phone mr-2 text-teal-400"></i> 0832.919.878</li>
+                        <li class="flex items-center"><i class="fas fa-envelope mr-2 text-teal-400"></i> info@ttl1979.com</li>
+                    </ul>
+                </div>
+            </div>
+            <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">
+                <p>&copy; 2023 Nha Khoa TTL1979. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+    <!-- Back to Top Button -->
+    <a href="#" id="back-to-top" class="fixed bottom-8 right-8 bg-teal-500 text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg transform transition duration-300 opacity-0 invisible hover:bg-teal-600">
+        <i class="fas fa-arrow-up"></i>
+    </a>
+    <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');
+        });
+        // Back to top button
+        window.addEventListener('scroll', function() {
+            const backToTopButton = document.getElementById('back-to-top');
+            if (window.pageYOffset > 300) {
+                backTo
+</html>