Initial start

This commit is contained in:
Quang Khai Nguyen committed 2026-10-12 09:39:13 +02:00
1 parent 52ad441aa5
commit 5c3d5e4bf7
3 files changed
+743

No files matched your search

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 906 KiB

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 396 KiB

Executable
+743
View File
@@ -0,0 +1,743 @@
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title data-i18n="page_title">Nha Trang — Thiên đường du lịch biển Việt Nam | 芽庄 | Nha Trang | Нячанг</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- FontAwesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
brand: {
50: '#eef8ff',
100: '#d8effe',
500: '#0088cc',
600: '#006699',
700: '#004d73',
}
},
fontFamily: {
sans: ['"Plus Jakarta Sans"', '"Noto Sans SC"', 'sans-serif'],
}
}
}
}
</script>
<style>
.hero-bg {
background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.55)), url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1920&q=80');
background-size: cover;
background-position: center;
}
</style>
</head>
<body class="bg-gray-50 text-gray-800 font-sans antialiased">
<!-- Top Bar / Navigation -->
<header class="sticky top-0 z-50 bg-white/95 backdrop-blur-md shadow-sm transition-all">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-20">
<!-- Logo -->
<div class="flex items-center space-x-3">
<div class="bg-brand-500 text-white p-2.5 rounded-xl shadow-md">
<i class="fa-solid fa-umbrella-beach text-xl"></i>
</div>
<div>
<span class="text-xl font-bold tracking-tight text-gray-900 block leading-none">Nha Trang</span>
<span class="text-xs font-semibold text-brand-600 tracking-wider uppercase" data-i18n="logo_sub">Paradise Bay</span>
</div>
</div>
<!-- Desktop Menu -->
<nav class="hidden md:flex items-center space-x-6 lg:space-x-8 font-medium text-sm lg:text-base">
<a href="#about" class="text-gray-600 hover:text-brand-600 transition" data-i18n="nav_about">Về Nha Trang</a>
<a href="#attractions" class="text-gray-600 hover:text-brand-600 transition" data-i18n="nav_attractions">Điểm đến</a>
<a href="#weather" class="text-gray-600 hover:text-brand-600 transition" data-i18n="nav_weather">Thời tiết</a>
<a href="#food" class="text-gray-600 hover:text-brand-600 transition" data-i18n="nav_food">Ẩm thực</a>
</nav>
<!-- Action & Language Toggle -->
<div class="flex items-center space-x-3">
<!-- Language Switcher (VI / RU / EN / ZH) -->
<div class="bg-gray-100 p-1 rounded-xl flex items-center shadow-inner text-xs">
<button onclick="setLanguage('vi')" id="btn-vi" class="px-2.5 py-1.5 font-bold rounded-lg transition bg-white text-brand-600 shadow-sm">VI</button>
<button onclick="setLanguage('ru')" id="btn-ru" class="px-2.5 py-1.5 font-bold rounded-lg transition text-gray-600">RU</button>
<button onclick="setLanguage('en')" id="btn-en" class="px-2.5 py-1.5 font-bold rounded-lg transition text-gray-600">EN</button>
<button onclick="setLanguage('zh')" id="btn-zh" class="px-2.5 py-1.5 font-bold rounded-lg transition text-gray-600">中文</button>
</div>
<a href="#booking" class="hidden sm:inline-flex items-center justify-center px-4 py-2.5 bg-brand-500 hover:bg-brand-600 text-white text-sm font-semibold rounded-xl shadow-lg shadow-brand-500/25 transition transform hover:-translate-y-0.5" data-i18n="nav_cta">
Đặt tour
</a>
<!-- Mobile Menu Button -->
<button onclick="toggleMobileMenu()" class="md:hidden text-gray-700 p-2 focus:outline-none">
<i class="fa-solid fa-bars text-2xl"></i>
</button>
</div>
</div>
</div>
<!-- Mobile Drawer -->
<div id="mobile-menu" class="hidden md:hidden bg-white border-b px-4 pt-2 pb-6 space-y-3 shadow-lg">
<a href="#about" onclick="toggleMobileMenu()" class="block py-2 text-gray-600 font-medium" data-i18n="nav_about">Về Nha Trang</a>
<a href="#attractions" onclick="toggleMobileMenu()" class="block py-2 text-gray-600 font-medium" data-i18n="nav_attractions">Điểm đến</a>
<a href="#weather" onclick="toggleMobileMenu()" class="block py-2 text-gray-600 font-medium" data-i18n="nav_weather">Thời tiết</a>
<a href="#food" onclick="toggleMobileMenu()" class="block py-2 text-gray-600 font-medium" data-i18n="nav_food">Ẩm thực</a>
<a href="#booking" onclick="toggleMobileMenu()" class="block text-center py-3 bg-brand-500 text-white font-semibold rounded-xl shadow" data-i18n="nav_cta">Đặt tour</a>
</div>
</header>
<!-- Hero Section -->
<section class="hero-bg min-h-[85vh] flex items-center justify-center text-center px-4 relative">
<div class="max-w-4xl mx-auto text-white space-y-6">
<span class="inline-block px-4 py-1.5 bg-white/20 backdrop-blur-md rounded-full text-sm font-semibold tracking-wide uppercase border border-white/30" data-i18n="hero_badge">
🇻🇳 Thiên đường biển Việt Nam
</span>
<h1 class="text-4xl sm:text-6xl lg:text-7xl font-extrabold tracking-tight leading-tight" data-i18n="hero_title">
Khám phá vẻ đẹp kỳ diệu Nha Trang
</h1>
<p class="text-lg sm:text-xl text-gray-200 max-w-2xl mx-auto font-light" data-i18n="hero_subtitle">
Tận hưởng làn nước biếc, bãi cát trắng mịn, ánh nắng nhiệt đới rực rỡ và những trải nghiệm khó quên.
</p>
<div class="pt-4 flex flex-col sm:flex-row justify-center gap-4">
<a href="#attractions" class="px-8 py-4 bg-brand-500 hover:bg-brand-600 text-white font-bold rounded-2xl shadow-xl shadow-brand-500/30 transition text-lg" data-i18n="hero_btn_explore">
Khám phá ngay
</a>
<a href="#booking" class="px-8 py-4 bg-white/10 hover:bg-white/20 text-white font-bold rounded-2xl backdrop-blur-md border border-white/30 transition text-lg" data-i18n="hero_btn_book">
Đặt tour
</a>
</div>
</div>
</section>
<!-- Why Visit Section -->
<section id="about" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-3xl mx-auto mb-16 space-y-4">
<h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900" data-i18n="why_title">Tại sao nên chọn Nha Trang?</h2>
<p class="text-gray-600 text-lg" data-i18n="why_desc">Điểm đến hàng đầu cho kỳ nghỉ hoàn hảo của gia đình và bạn bè.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Card 1 -->
<div class="bg-gray-50 p-8 rounded-3xl border border-gray-100 hover:shadow-xl transition group">
<div class="w-14 h-14 bg-brand-50 text-brand-500 rounded-2xl flex items-center justify-center text-2xl font-bold mb-6 group-hover:bg-brand-500 group-hover:text-white transition">
<i class="fa-solid fa-sun"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3" data-i18n="feature_1_title">Khí hậu tuyệt vời</h3>
<p class="text-gray-600 leading-relaxed text-sm" data-i18n="feature_1_desc">Hơn 300 ngày nắng ấm trong năm, bầu trời trong xanh và không khí biển trong lành.</p>
</div>
<!-- Card 2 -->
<div class="bg-gray-50 p-8 rounded-3xl border border-gray-100 hover:shadow-xl transition group">
<div class="w-14 h-14 bg-brand-50 text-brand-500 rounded-2xl flex items-center justify-center text-2xl font-bold mb-6 group-hover:bg-brand-500 group-hover:text-white transition">
<i class="fa-solid fa-water"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3" data-i18n="feature_2_title">Bãi biển thiên đường</h3>
<p class="text-gray-600 leading-relaxed text-sm" data-i18n="feature_2_desc">Hàng kilômét bờ cát trắng mịn màng cùng làn nước biển màu ngọc lam tuyệt đẹp.</p>
</div>
<!-- Card 3 -->
<div class="bg-gray-50 p-8 rounded-3xl border border-gray-100 hover:shadow-xl transition group">
<div class="w-14 h-14 bg-brand-50 text-brand-500 rounded-2xl flex items-center justify-center text-2xl font-bold mb-6 group-hover:bg-brand-500 group-hover:text-white transition">
<i class="fa-solid fa-landmark"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3" data-i18n="feature_3_title">Di sản văn hóa</h3>
<p class="text-gray-600 leading-relaxed text-sm" data-i18n="feature_3_desc">Khám phá Tháp Bà Ponagar cổ kính, chùa chiền linh thiêng và văn hóa Champa độc đáo.</p>
</div>
<!-- Card 4 -->
<div class="bg-gray-50 p-8 rounded-3xl border border-gray-100 hover:shadow-xl transition group">
<div class="w-14 h-14 bg-brand-50 text-brand-500 rounded-2xl flex items-center justify-center text-2xl font-bold mb-6 group-hover:bg-brand-500 group-hover:text-white transition">
<i class="fa-solid fa-utensils"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3" data-i18n="feature_4_title">Ẩm thực hải sản</h3>
<p class="text-gray-600 leading-relaxed text-sm" data-i18n="feature_4_desc">Thưởng thức hải sản tươi sống đánh bắt trực tiếp từ vịnh và các món đặc sản trứ danh.</p>
</div>
</div>
</div>
</section>
<!-- Attractions Section -->
<section id="attractions" class="py-20 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-3xl mx-auto mb-12 space-y-4">
<h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900" data-i18n="attr_title">Điểm đến nổi bật</h2>
<p class="text-gray-600 text-lg" data-i18n="attr_desc">Những địa danh không thể bỏ lỡ khi ghé thăm thành phố biển.</p>
<!-- Filter Buttons -->
<div class="flex flex-wrap justify-center gap-2 pt-4">
<button onclick="filterAttractions('all')" class="filter-btn active px-5 py-2 rounded-xl text-sm font-bold bg-brand-500 text-white shadow" data-i18n="filter_all">Tất cả</button>
<button onclick="filterAttractions('culture')" class="filter-btn px-5 py-2 rounded-xl text-sm font-bold bg-white text-gray-600 hover:bg-gray-100 shadow-sm" data-i18n="filter_culture">Văn hóa</button>
<button onclick="filterAttractions('fun')" class="filter-btn px-5 py-2 rounded-xl text-sm font-bold bg-white text-gray-600 hover:bg-gray-100 shadow-sm" data-i18n="filter_fun">Giải trí</button>
<button onclick="filterAttractions('nature')" class="filter-btn px-5 py-2 rounded-xl text-sm font-bold bg-white text-gray-600 hover:bg-gray-100 shadow-sm" data-i18n="filter_nature">Thiên nhiên</button>
</div>
</div>
<!-- Attractions Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="attractions-grid">
<!-- Item 1 -->
<div class="attraction-card bg-white rounded-3xl overflow-hidden shadow-md hover:shadow-2xl transition border border-gray-100 flex flex-col" data-category="culture">
<div class="relative h-64 overflow-hidden">
<img src="images/ThapBa.png" alt="Ponagar" class="w-full h-full object-cover transform hover:scale-105 transition duration-500">
<span class="absolute top-4 right-4 bg-black/60 backdrop-blur-md text-white text-xs px-3 py-1.5 rounded-full font-semibold" data-i18n="cat_culture">Văn hóa</span>
</div>
<div class="p-6 flex-1 flex flex-col justify-between">
<div>
<h3 class="text-xl font-bold text-gray-900 mb-2" data-i18n="attr_1_title">Tháp Bà Ponagar</h3>
<p class="text-gray-600 text-sm leading-relaxed mb-4" data-i18n="attr_1_desc">Quần thể kiến trúc đền tháp Champa cổ kính xây dựng từ thế kỷ thứ VIII, nằm trên đồi cao hướng ra sông Cái.</p>
</div>
<div class="flex items-center text-brand-600 font-semibold text-sm">
<i class="fa-solid fa-location-dot mr-2"></i> <span data-i18n="attr_1_loc">Đường 2 Tháng 4, Vĩnh Phước</span>
</div>
</div>
</div>
<!-- Item 2 -->
<div class="attraction-card bg-white rounded-3xl overflow-hidden shadow-md hover:shadow-2xl transition border border-gray-100 flex flex-col" data-category="fun">
<div class="relative h-64 overflow-hidden">
<img src="images/VinWonders.jpg" alt="VinWonders" class="w-full h-full object-cover transform hover:scale-105 transition duration-500">
<span class="absolute top-4 right-4 bg-black/60 backdrop-blur-md text-white text-xs px-3 py-1.5 rounded-full font-semibold" data-i18n="cat_fun">Giải trí</span>
</div>
<div class="p-6 flex-1 flex flex-col justify-between">
<div>
<h3 class="text-xl font-bold text-gray-900 mb-2" data-i18n="attr_2_title">VinWonders Nha Trang</h3>
<p class="text-gray-600 text-sm leading-relaxed mb-4" data-i18n="attr_2_desc">Công viên giải trí của những kỷ lục trên đảo Hòn Tre với cáp treo vượt biển, công viên nước và thủy cung hiện đại.</p>
</div>
<div class="flex items-center text-brand-600 font-semibold text-sm">
<i class="fa-solid fa-location-dot mr-2"></i> <span data-i18n="attr_2_loc">Đảo Hòn Tre, Vĩnh Nguyên</span>
</div>
</div>
</div>
<!-- Item 3 -->
<div class="attraction-card bg-white rounded-3xl overflow-hidden shadow-md hover:shadow-2xl transition border border-gray-100 flex flex-col" data-category="nature">
<div class="relative h-64 overflow-hidden">
<img src="https://images.unsplash.com/photo-1512343879784-a960bf40e7f2?auto=format&fit=crop&w=800&q=80" alt="Mud Bath" class="w-full h-full object-cover transform hover:scale-105 transition duration-500">
<span class="absolute top-4 right-4 bg-black/60 backdrop-blur-md text-white text-xs px-3 py-1.5 rounded-full font-semibold" data-i18n="cat_nature">Thiên nhiên</span>
</div>
<div class="p-6 flex-1 flex flex-col justify-between">
<div>
<h3 class="text-xl font-bold text-gray-900 mb-2" data-i18n="attr_3_title">Suối khoáng & Tắm bùn</h3>
<p class="text-gray-600 text-sm leading-relaxed mb-4" data-i18n="attr_3_desc">Trải nghiệm dịch vụ tắm bùn khoáng nóng tự nhiên giúp thư giãn cơ thể, phục hồi sức khỏe và làm đẹp da.</p>
</div>
<div class="flex items-center text-brand-600 font-semibold text-sm">
<i class="fa-solid fa-location-dot mr-2"></i> <span data-i18n="attr_3_loc">Tháp Bà / I-Resort Nha Trang</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Weather & Season Guide -->
<section id="weather" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-3xl mx-auto mb-16 space-y-4">
<h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900" data-i18n="weather_title">Thời điểm lý tưởng du lịch</h2>
<p class="text-gray-600 text-lg" data-i18n="weather_desc">Lên kế hoạch cho chuyến đi của bạn với thông tin thời tiết chính xác.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
<!-- Dry Season -->
<div class="bg-gradient-to-br from-amber-50 to-orange-50 border border-amber-200/60 p-8 rounded-3xl shadow-sm space-y-4">
<div class="flex items-center space-x-3 text-amber-600">
<i class="fa-solid fa-sun text-3xl"></i>
<span class="font-extrabold text-lg" data-i18n="season_dry_title">Tháng 1 — Tháng 8 (Mùa khô)</span>
</div>
<p class="text-gray-700 text-sm leading-relaxed" data-i18n="season_dry_desc">
Thời kỳ hoàn hảo nhất cho du lịch biển. Trời nắng rực rỡ, biển êm, nước trong vắt, cực kỳ thích hợp cho các hoạt động lặn ngắm san hô, tắm biển và tham quan đảo.
</p>
<div class="pt-2 text-xs font-bold text-amber-700 uppercase tracking-wider" data-i18n="season_dry_tag">✨ Khuyên dùng cho nghỉ dưỡng</div>
</div>
<!-- Rainy Season -->
<div class="bg-gradient-to-br from-blue-50 to-sky-50 border border-blue-200/60 p-8 rounded-3xl shadow-sm space-y-4">
<div class="flex items-center space-x-3 text-blue-600">
<i class="fa-solid fa-cloud-rain text-3xl"></i>
<span class="font-extrabold text-lg" data-i18n="season_rain_title">Tháng 9 — Tháng 12 (Mùa mưa)</span>
</div>
<p class="text-gray-700 text-sm leading-relaxed" data-i18n="season_rain_desc">
Mùa mưa ngắn, thỉnh thoảng có mưa rào nhưng nhiệt độ vẫn ấm áp. Đây là giai đoạn lý tưởng để nghỉ dưỡng tiết kiệm, thưởng thức ẩm thực ấm cúng và trải nghiệm dịch vụ spa.
</p>
<div class="pt-2 text-xs font-bold text-blue-700 uppercase tracking-wider" data-i18n="season_rain_tag">💡 Chi phí tiết kiệm</div>
</div>
</div>
</div>
</section>
<!-- Food Section -->
<section id="food" class="py-20 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-3xl mx-auto mb-16 space-y-4">
<h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900" data-i18n="food_title">Ẩm thực Nha Trang</h2>
<p class="text-gray-600 text-lg" data-i18n="food_desc">Hương vị biển cả đậm đà khó quên.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white rounded-3xl p-6 shadow-sm border border-gray-100 space-y-4">
<div class="h-48 rounded-2xl overflow-hidden">
<img src="https://images.unsplash.com/photo-1559847844-5315695dadae?auto=format&fit=crop&w=600&q=80" alt="Seafood" class="w-full h-full object-cover">
</div>
<h3 class="text-xl font-bold text-gray-900" data-i18n="food_1_title">Hải sản tươi sống</h3>
<p class="text-gray-600 text-sm" data-i18n="food_1_desc">Tôm hùm, mực nướng, ốc các loại chế biến trực tiếp tại các nhà hàng ven biển với gia vị đặc trưng.</p>
</div>
<div class="bg-white rounded-3xl p-6 shadow-sm border border-gray-100 space-y-4">
<div class="h-48 rounded-2xl overflow-hidden">
<img src="https://images.unsplash.com/photo-1569718212165-3a8278d5f624?auto=format&fit=crop&w=600&q=80" alt="Pho" class="w-full h-full object-cover">
</div>
<h3 class="text-xl font-bold text-gray-900" data-i18n="food_2_title">Phở & Bún cá Nha Trang</h3>
<p class="text-gray-600 text-sm" data-i18n="food_2_desc">Món bún cá chả thanh ngọt đậm đà hương vị biển hoặc phở bò truyền thống chuẩn vị Việt Nam.</p>
</div>
<div class="bg-white rounded-3xl p-6 shadow-sm border border-gray-100 space-y-4">
<div class="h-48 rounded-2xl overflow-hidden">
<img src="https://images.unsplash.com/photo-1504674900247-0877df9cc836?auto=format&fit=crop&w=600&q=80" alt="Banh Xeo" class="w-full h-full object-cover">
</div>
<h3 class="text-xl font-bold text-gray-900" data-i18n="food_3_title">Bánh xèo mực</h3>
<p class="text-gray-600 text-sm" data-i18n="food_3_desc">Bánh xèo giòn rụm nhân mực tươi ngọt lịm ăn kèm rau sống và nước mắm chua ngọt đặc chế.</p>
</div>
</div>
</div>
</section>
<!-- Booking Section / Contact Form -->
<section id="booking" class="py-20 bg-brand-700 text-white relative overflow-hidden">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="text-center space-y-4 mb-12">
<h2 class="text-3xl sm:text-4xl font-extrabold" data-i18n="book_title">Đặt tour & Tư vấn miễn phí</h2>
<p class="text-brand-100 text-lg" data-i18n="book_desc">Hãy để chúng tôi giúp bạn lên kế hoạch cho chuyến đi hoàn hảo nhất.</p>
</div>
<form onsubmit="handleBooking(event)" class="bg-white text-gray-800 p-8 sm:p-12 rounded-3xl shadow-2xl space-y-6">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
<div>
<label class="block text-sm font-bold text-gray-700 mb-2" data-i18n="form_name">Họ và tên</label>
<input type="text" required class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:border-brand-500 transition" placeholder="John / 张伟 / Alexey / Nguyen Van A">
</div>
<div>
<label class="block text-sm font-bold text-gray-700 mb-2" data-i18n="form_email">Email</label>
<input type="email" required class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:border-brand-500 transition" placeholder="example@mail.com">
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
<div>
<label class="block text-sm font-bold text-gray-700 mb-2" data-i18n="form_phone">Số điện thoại</label>
<input type="tel" required class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:border-brand-500 transition" placeholder="+84 / +86 / +7 / +1 ...">
</div>
<div>
<label class="block text-sm font-bold text-gray-700 mb-2" data-i18n="form_package">Lựa chọn gói tour</label>
<select class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:border-brand-500 transition bg-white">
<option value="standard" data-i18n="pkg_1">Khám phá thành phố & VinWonders</option>
<option value="island" data-i18n="pkg_2">Tour lặn biển & Các đảo</option>
<option value="relax" data-i18n="pkg_3">Nghỉ dưỡng & Tắm bùn khoáng</option>
</select>
</div>
</div>
<div>
<label class="block text-sm font-bold text-gray-700 mb-2" data-i18n="form_notes">Yêu cầu đặc biệt</label>
<textarea rows="3" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:border-brand-500 transition" placeholder="..."></textarea>
</div>
<button type="submit" class="w-full py-4 bg-brand-500 hover:bg-brand-600 text-white font-bold rounded-xl shadow-lg shadow-brand-500/30 transition text-lg" data-i18n="form_submit">
Gửi yêu cầu đặt tour
</button>
</form>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-gray-400 py-12 border-t border-gray-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row justify-between items-center gap-6">
<div class="flex items-center space-x-3">
<div class="bg-brand-500 text-white p-2 rounded-xl">
<i class="fa-solid fa-umbrella-beach"></i>
</div>
<span class="text-white font-bold text-lg">Nha Trang Tourism</span>
</div>
<p class="text-sm text-center md:text-left" data-i18n="footer_copy">© 2026 Nha Trang Travel Guide. All rights reserved.</p>
<div class="flex space-x-4 text-xl">
<a href="#" class="hover:text-white transition"><i class="fa-brands fa-telegram"></i></a>
<a href="#" class="hover:text-white transition"><i class="fa-brands fa-whatsapp"></i></a>
<a href="#" class="hover:text-white transition"><i class="fa-brands fa-weixin"></i></a>
<a href="#" class="hover:text-white transition"><i class="fa-brands fa-instagram"></i></a>
</div>
</div>
</footer>
<!-- Success Modal -->
<div id="success-modal" class="hidden fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4">
<div class="bg-white rounded-3xl max-w-md w-full p-8 text-center space-y-4 shadow-2xl">
<div class="w-16 h-16 bg-green-100 text-green-500 rounded-full flex items-center justify-center text-3xl mx-auto">
<i class="fa-solid fa-check"></i>
</div>
<h3 class="text-2xl font-bold text-gray-900" data-i18n="modal_title">Thành công!</h3>
<p class="text-gray-600 text-sm" data-i18n="modal_desc">Yêu cầu của bạn đã được gửi. Chúng tôi sẽ liên hệ lại sớm nhất.</p>
<button onclick="closeModal()" class="w-full py-3 bg-brand-500 text-white font-bold rounded-xl shadow hover:bg-brand-600 transition" data-i18n="modal_btn">Đóng</button>
</div>
</div>
<!-- Translations & Script Logic -->
<script>
const translations = {
vi: {
page_title: "Nha Trang — Thiên đường du lịch biển Việt Nam",
logo_sub: "Paradise Bay",
nav_about: "Về Nha Trang",
nav_attractions: "Điểm đến",
nav_weather: "Thời tiết",
nav_food: "Ẩm thực",
nav_cta: "Đặt tour",
hero_badge: "🇻🇳 Thiên đường biển Việt Nam",
hero_title: "Khám phá vẻ đẹp kỳ diệu Nha Trang",
hero_subtitle: "Tận hưởng làn nước biếc, bãi cát trắng mịn, ánh nắng nhiệt đới rực rỡ và những trải nghiệm khó quên.",
hero_btn_explore: "Khám phá ngay",
hero_btn_book: "Đặt tour",
why_title: "Tại sao nên chọn Nha Trang?",
why_desc: "Điểm đến hàng đầu cho kỳ nghỉ hoàn hảo của gia đình và bạn bè.",
feature_1_title: "Khí hậu tuyệt vời",
feature_1_desc: "Hơn 300 ngày nắng ấm trong năm, bầu trời trong xanh và không khí biển trong lành.",
feature_2_title: "Bãi biển thiên đường",
feature_2_desc: "Hàng kilômét bờ cát trắng mịn màng cùng làn nước biển màu ngọc lam tuyệt đẹp.",
feature_3_title: "Di sản văn hóa",
feature_3_desc: "Khám phá Tháp Bà Ponagar cổ kính, chùa chiền linh thiêng và văn hóa Champa độc đáo.",
feature_4_title: "Ẩm thực hải sản",
feature_4_desc: "Thưởng thức hải sản tươi sống đánh bắt trực tiếp từ vịnh và các món đặc sản trứ danh.",
attr_title: "Điểm đến nổi bật",
attr_desc: "Những địa danh không thể bỏ lỡ khi ghé thăm thành phố biển.",
filter_all: "Tất cả",
filter_culture: "Văn hóa",
filter_fun: "Giải trí",
filter_nature: "Thiên nhiên",
cat_culture: "Văn hóa",
cat_fun: "Giải trí",
cat_nature: "Thiên nhiên",
attr_1_title: "Tháp Bà Ponagar",
attr_1_desc: "Quần thể kiến trúc đền tháp Champa cổ kính xây dựng từ thế kỷ thứ VIII, nằm trên đồi cao hướng ra sông Cái.",
attr_1_loc: "Đường 2 Tháng 4, Vĩnh Phước",
attr_2_title: "VinWonders Nha Trang",
attr_2_desc: "Công viên giải trí của những kỷ lục trên đảo Hòn Tre với cáp treo vượt biển, công viên nước và thủy cung hiện đại.",
attr_2_loc: "Đảo Hòn Tre, Vĩnh Nguyên",
attr_3_title: "Suối khoáng & Tắm bùn",
attr_3_desc: "Trải nghiệm dịch vụ tắm bùn khoáng nóng tự nhiên giúp thư giãn cơ thể, phục hồi sức khỏe và làm đẹp da.",
attr_3_loc: "Tháp Bà / I-Resort Nha Trang",
weather_title: "Thời điểm lý tưởng du lịch",
weather_desc: "Lên kế hoạch cho chuyến đi của bạn với thông tin thời tiết chính xác.",
season_dry_title: "Tháng 1 — Tháng 8 (Mùa khô)",
season_dry_desc: "Thời kỳ hoàn hảo nhất cho du lịch biển. Trời nắng rực rỡ, biển êm, nước trong vắt, cực kỳ thích hợp cho các hoạt động lặn ngắm san hô, tắm biển và tham quan đảo.",
season_dry_tag: "✨ Khuyên dùng cho nghỉ dưỡng",
season_rain_title: "Tháng 9 — Tháng 12 (Mùa mưa)",
season_rain_desc: "Mùa mưa ngắn, thỉnh thoảng có mưa rào nhưng nhiệt độ vẫn ấm áp. Đây là giai đoạn lý tưởng để nghỉ dưỡng tiết kiệm, thưởng thức ẩm thực ấm cúng và trải nghiệm dịch vụ spa.",
season_rain_tag: "💡 Chi phí tiết kiệm",
food_title: "Ẩm thực Nha Trang",
food_desc: "Hương vị biển cả đậm đà khó quên.",
food_1_title: "Hải sản tươi sống",
food_1_desc: "Tôm hùm, mực nướng, ốc các loại chế biến trực tiếp tại các nhà hàng ven biển với gia vị đặc trưng.",
food_2_title: "Phở & Bún cá Nha Trang",
food_2_desc: "Món bún cá chả thanh ngọt đậm đà hương vị biển hoặc phở bò truyền thống chuẩn vị Việt Nam.",
food_3_title: "Bánh xèo mực",
food_3_desc: "Bánh xèo giòn rụm nhân mực tươi ngọt lịm ăn kèm rau sống và nước mắm chua ngọt đặc chế.",
book_title: "Đặt tour & Tư vấn miễn phí",
book_desc: "Hãy để chúng tôi giúp bạn lên kế hoạch cho chuyến đi hoàn hảo nhất.",
form_name: "Họ và tên",
form_email: "Email",
form_phone: "Số điện thoại",
form_package: "Lựa chọn gói tour",
pkg_1: "Khám phá thành phố & VinWonders",
pkg_2: "Tour lặn biển & Các đảo",
pkg_3: "Nghỉ dưỡng & Tắm bùn khoáng",
form_notes: "Yêu cầu đặc biệt",
form_submit: "Gửi yêu cầu đặt tour",
footer_copy: "© 2026 Nha Trang Travel Guide. All rights reserved.",
modal_title: "Thành công!",
modal_desc: "Yêu cầu của bạn đã được gửi. Chúng tôi sẽ liên hệ lại sớm nhất.",
modal_btn: "Đóng"
},
ru: {
page_title: "Нячанг — Жемчужина Вьетнама",
logo_sub: "Paradise Bay",
nav_about: "О Нячанге",
nav_attractions: "Достопримечательности",
nav_weather: "Погода",
nav_food: "Кухня",
nav_cta: "Бронировать",
hero_badge: "🇻🇳 Жемчужина Южно-Китайского моря",
hero_title: "Откройте для себя магию Нячанга",
hero_subtitle: "Белоснежные пляжи, бирюзовая вода, тропическое солнце и незабываемые приключения во Вьетнаме.",
hero_btn_explore: "Исследовать",
hero_btn_book: "Забронировать",
why_title: "Почему стоит посетить Нячанг?",
why_desc: "Идеальное направление для отдыха всей семьей и с друзьями.",
feature_1_title: "Идеальный климат",
feature_1_desc: "Более 300 солнечных дней в году, ясное небо и освежающий морской бриз.",
feature_2_title: "Роскошные пляжи",
feature_2_desc: "Километры белоснежного побережья, омываемого чистейшей бирюзовой водой.",
feature_3_title: "Богатое наследие",
feature_3_desc: "Древние Чамские башни Понагар, древние пагоды и уникальная культура Тямпы.",
feature_4_title: "Гастрономический рай",
feature_4_desc: "Свежайшие морепродукты прямо из залива и изысканные блюда вьетнамской кухни.",
attr_title: "Лучшие достопримечательности",
attr_desc: "Места, которые обязательно стоит посетить в прибрежном городе.",
filter_all: "Все",
filter_culture: "Культура",
filter_fun: "Развлечения",
filter_nature: "Природа",
cat_culture: "Культура",
cat_fun: "Развлечения",
cat_nature: "Природа",
attr_1_title: "Башни Понагар",
attr_1_desc: "Древний индуистский храмовый комплекс VIII века, возвышающийся на холме с живописным видом на реку Кай.",
attr_1_loc: "Ул. 2 Февраля, Винь Фыок",
attr_2_title: "VinWonders Nha Trang",
attr_2_desc: "Легендарный парк развлечений на острове Хон Тре с канатной дорогой над морем, аквапарком и океанариумом.",
attr_2_loc: "Остров Хон Тре, Винь Нгуен",
attr_3_title: "Минеральные источники и грязи",
attr_3_desc: "Расслабляющие оздоровительные процедуры в целебных термальных источниках и грязелечебницах.",
attr_3_loc: "Комплексы Tháp Bà / I-Resort",
weather_title: "Лучшее время для поездки",
weather_desc: "Спланируйте свою поездку на основе точных метеорологических данных.",
season_dry_title: "Январь — Август (Сухой сезон)",
season_dry_desc: "Идеальный период для пляжного отдыха. Ясное солнце, спокойное море, прозрачная вода — лучшее время для дайвинга и морских прогулок.",
season_dry_tag: "✨ Рекомендуется для отдыха",
season_rain_title: "Сентябрь — Декабрь (Сезон дождей)",
season_rain_desc: "Короткие тропические дожди при комфортной температуре воздуха. Отличная возможность отдохнуть по выгодным ценам и насладиться уютом.",
season_rain_tag: "💡 Экономичный вариант",
food_title: "Кулинарный путеводитель",
food_desc: "Незабываемые вкусы и ароматы вьетнамского побережья.",
food_1_title: "Свежие морепродукты",
food_1_desc: "Лобстеры, креветки, кальмары и рыба, приготовленные на гриле или по традиционным рецептам.",
food_2_title: "Суп Фо и рыбный суп Бун Ка",
food_2_desc: "Ароматный традиционный суп фо с говядиной или фирменный рыбный суп с рыбными котлетками.",
food_3_title: "Блинчики Бань Хео",
food_3_desc: "Хрустящие вьетнамские блинчики с начинкой из креветок и кальмаров, подаваемые с зеленью.",
book_title: "Бронирование тура и консультация",
book_desc: "Позвольте нам организовать для вас незабываемое путешествие.",
form_name: "Ваше имя",
form_email: "Эл. почта",
form_phone: "Телефон",
form_package: "Выберите тур",
pkg_1: "Обзорный тур + VinWonders",
pkg_2: "Морская прогулка & Дайвинг",
pkg_3: "Спа-отдых & Термальные источники",
form_notes: "Пожелания / Заметки",
form_submit: "Отправить заявку",
footer_copy: "© 2026 Nha Trang Travel Guide. Все права защищены.",
modal_title: "Успешно!",
modal_desc: "Ваша заявка отправлена. Мы свяжемся с вами в ближайшее время.",
modal_btn: "Закрыть"
},
en: {
page_title: "Nha Trang — Vietnam's Coastal Paradise",
logo_sub: "Paradise Bay",
nav_about: "About",
nav_attractions: "Attractions",
nav_weather: "Weather",
nav_food: "Cuisine",
nav_cta: "Book Tour",
hero_badge: "🇻🇳 Vietnam's Premier Beach Destination",
hero_title: "Discover the Wonders of Nha Trang",
hero_subtitle: "Enjoy turquoise waters, fine white sand beaches, tropical sunshine, and unforgettable coastal adventures.",
hero_btn_explore: "Explore Now",
hero_btn_book: "Book Tour",
why_title: "Why Choose Nha Trang?",
why_desc: "The top destination for an unforgettable vacation with family and friends.",
feature_1_title: "Ideal Climate",
feature_1_desc: "Over 300 sunny days per year, clear blue skies, and refreshing sea breezes.",
feature_2_title: "Paradise Beaches",
feature_2_desc: "Miles of powdery white sand coastline surrounded by crystal-clear turquoise waters.",
feature_3_title: "Rich Cultural Heritage",
feature_3_desc: "Explore ancient Ponagar Cham Towers, serene Buddhist pagodas, and vibrant history.",
feature_4_title: "Seafood Heaven",
feature_4_desc: "Savor ocean-fresh seafood caught directly from the bay and authentic Vietnamese delicacies.",
attr_title: "Top Attractions",
attr_desc: "Must-visit places and iconic highlights when visiting the coastal city.",
filter_all: "All",
filter_culture: "Culture",
filter_fun: "Entertainment",
filter_nature: "Nature",
cat_culture: "Culture",
cat_fun: "Entertainment",
cat_nature: "Nature",
attr_1_title: "Ponagar Cham Towers",
attr_1_desc: "An ancient Cham temple complex dating back to the 8th century, set atop a hill overlooking the Cai River.",
attr_1_loc: "2 Thang 4 Street, Vinh Phuoc",
attr_2_title: "VinWonders Nha Trang",
attr_2_desc: "World-class theme park on Hon Tre Island featuring cross-sea cable cars, water park, and aquariums.",
attr_2_loc: "Hon Tre Island, Vinh Nguyen",
attr_3_title: "Mineral Springs & Mud Baths",
attr_3_desc: "Relaxing natural thermal mud baths designed to rejuvenate your body, health, and skin.",
attr_3_loc: "Thap Ba / I-Resort Nha Trang",
weather_title: "Best Time to Visit",
weather_desc: "Plan your trip with accurate seasonal weather insights.",
season_dry_title: "January — August (Dry Season)",
season_dry_desc: "The absolute best season for beach holidays. Bright sunshine, calm seas, and crystal-clear water, perfect for snorkeling and island hopping.",
season_dry_tag: "✨ Recommended for Vacations",
season_rain_title: "September — December (Rainy Season)",
season_rain_desc: "Short tropical showers with warm temperatures. Ideal for budget travelers wanting cozy spa days and culinary explorations.",
season_rain_tag: "💡 Great Value Season",
food_title: "Nha Trang Cuisine Guide",
food_desc: "Unforgettable flavors from the heart of the sea.",
food_1_title: "Fresh Seafood",
food_1_desc: "Lobsters, grilled squid, and fresh shellfish prepared live with authentic coastal spices.",
food_2_title: "Fish Cake Noodle & Pho",
food_2_desc: "Savory fish cake noodle soup or traditional Vietnamese beef Pho prepared to perfection.",
food_3_title: "Squid Crispy Pancakes",
food_3_desc: "Crispy Vietnamese Banh Xeo filled with fresh local squid, served with fresh herbs and dipping sauce.",
book_title: "Book Your Tour & Free Consultation",
book_desc: "Let us help you design the perfect itinerary for your getaway.",
form_name: "Full Name",
form_email: "Email Address",
form_phone: "Phone Number",
form_package: "Select Package",
pkg_1: "City Highlights & VinWonders",
pkg_2: "Island Hopping & Scuba Diving",
pkg_3: "Wellness Spa & Mineral Mud Baths",
form_notes: "Special Requests",
form_submit: "Submit Request",
footer_copy: "© 2026 Nha Trang Travel Guide. All rights reserved.",
modal_title: "Success!",
modal_desc: "Your booking request has been sent. We will contact you shortly.",
modal_btn: "Close"
},
zh: {
page_title: "芽庄 — 越南海滨度假天堂",
logo_sub: "Paradise Bay",
nav_about: "关于芽庄",
nav_attractions: "热门景点",
nav_weather: "天气指南",
nav_food: "美食推荐",
nav_cta: "预订行程",
hero_badge: "🇻🇳 越南海滨度假天堂",
hero_title: "探索芽庄的迷人魅力",
hero_subtitle: "尽享碧海蓝天、细软白沙滩、温暖阳光与难忘的海滨度假时光。",
hero_btn_explore: "立即探索",
hero_btn_book: "预订行程",
why_title: "为什么选择芽庄?",
why_desc: "家庭亲友度假与休闲放松的绝佳首选目的地。",
feature_1_title: "宜人气候",
feature_1_desc: "全年阳光明媚超过300天,蓝天白云,海风习习。",
feature_2_title: "天堂沙滩",
feature_2_desc: "绵延数公里的细软白沙滩,清澈见底的翡翠色海水。",
feature_3_title: "深厚文化",
feature_3_desc: "探索古老的占婆塔、灵验的佛教寺庙与独特占婆文化。",
feature_4_title: "海鲜盛宴",
feature_4_desc: "品尝从海湾直接捕捞的冰鲜海鲜与地道越南风味美食。",
attr_title: "精选热门景点",
attr_desc: "来到芽庄不可错过的标志性打卡胜地。",
filter_all: "全部",
filter_culture: "历史文化",
filter_fun: "主题娱乐",
filter_nature: "自然休养",
cat_culture: "历史文化",
cat_fun: "主题娱乐",
cat_nature: "自然休养",
attr_1_title: "婆那加占婆塔",
attr_1_desc: "建于公元8世纪的古老占婆印度教寺庙建筑群,矗立于山丘之上俯瞰丐河。",
attr_1_loc: "Vinh Phuoc区 2 Thang 4路",
attr_2_title: "芽庄珍珠岛乐园 (VinWonders)",
attr_2_desc: "位于竹岛上的旗舰级主题乐园,拥有跨海缆车、大型水上乐园和海洋水族馆。",
attr_2_loc: "Vinh Nguyen区 竹岛 (Hon Tre)",
attr_3_title: "温泉与矿物泥浆浴",
attr_3_desc: "体验天然热矿物泥浆浴,放松身心、舒缓疲劳并滋养肌肤。",
attr_3_loc: "Thap Ba / I-Resort 泥浴中心",
weather_title: "最佳旅游季节",
weather_desc: "根据精准气候指南,轻松规划您的完美行程。",
season_dry_title: "1月 — 8月 (旱季)",
season_dry_desc: "海滨旅游的黄金季节。阳光灿烂,风平浪静,海水清澈,极其适合潜水、游泳及跳岛游。",
season_dry_tag: "✨ 度假强烈推荐",
season_rain_title: "9月 — 12月 (雨季)",
season_rain_desc: "阵雨短暂且气温舒适宜人。非常适合预算游、享受SPA水疗与品尝地道美食。",
season_rain_tag: "💡 超值实惠季节",
food_title: "芽庄美食指南",
food_desc: "令人回味无穷的大海鲜香与地道风味。",
food_1_title: "新鲜海鲜盛宴",
food_1_desc: "龙虾、炭烤鱿鱼、各类海螺,海边餐厅现捞现做,佐以特制调味。",
food_2_title: "芽庄鱼饼粉 & 越南河粉",
food_2_desc: "鲜美清甜的芽庄特色鱼饼米粉,或正宗浓郁的越南牛肉河粉。",
food_3_title: "鲜鱿鱼煎饼 (Banh Xeo)",
food_3_desc: "香脆的越南煎饼裹着新鲜小鱿鱼,搭配新鲜蘸酱与时令蔬菜。",
book_title: "行程预订 & 免费咨询",
book_desc: "让我们为您量身定制最完美的芽庄之旅。",
form_name: "您的姓名",
form_email: "电子邮箱",
form_phone: "联系电话",
form_package: "选择套餐",
pkg_1: "市区经典 & 珍珠岛乐园",
pkg_2: "出海跳岛 & 潜水体验",
pkg_3: "温泉泥浴 & 养生SPA",
form_notes: "特殊需求 / 备注",
form_submit: "提交预订申请",
footer_copy: "© 2026 Nha Trang Travel Guide. 保留所有权利。",
modal_title: "提交成功!",
modal_desc: "您的预订申请已成功发送,我们将尽快与您联系。",
modal_btn: "关闭"
}
};
let currentLang = 'vi';
function setLanguage(lang) {
currentLang = lang;
document.querySelectorAll('[data-i18n]').forEach(el => {
const key = el.getAttribute('data-i18n');
if (translations[lang] && translations[lang][key]) {
el.textContent = translations[lang][key];
}
});
// Reset language button styles
const langs = ['vi', 'ru', 'en', 'zh'];
langs.forEach(l => {
const btn = document.getElementById(`btn-${l}`);
if (btn) {
if (l === lang) {
btn.className = "px-2.5 py-1.5 font-bold rounded-lg transition bg-white text-brand-600 shadow-sm";
} else {
btn.className = "px-2.5 py-1.5 font-bold rounded-lg transition text-gray-600 hover:text-brand-600";
}
}
});
document.documentElement.lang = lang;
}
function toggleMobileMenu() {
const menu = document.getElementById('mobile-menu');
menu.classList.toggle('hidden');
}
function filterAttractions(category) {
document.querySelectorAll('.filter-btn').forEach(btn => {
btn.className = "filter-btn px-5 py-2 rounded-xl text-sm font-bold bg-white text-gray-600 hover:bg-gray-100 shadow-sm";
});
event.target.className = "filter-btn active px-5 py-2 rounded-xl text-sm font-bold bg-brand-500 text-white shadow";
document.querySelectorAll('.attraction-card').forEach(card => {
if (category === 'all' || card.getAttribute('data-category') === category) {
card.style.display = 'flex';
} else {
card.style.display = 'none';
}
});
}
function handleBooking(event) {
event.preventDefault();
document.getElementById('success-modal').classList.remove('hidden');
}
function closeModal() {
document.getElementById('success-modal').classList.add('hidden');
}
// Initialize default language
setLanguage('vi');
</script>
</body>
</html>