Hugging Face's logo

Spaces:
huylaughmad
/
test
Running

App Files Community
test / bloglist.html
huylaughmad's picture
huylaughmad
Upload 8 files
bf6d14d verified
raw
history blame contribute delete
45.6 kB
 <!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>