  
<!doctype html>
<html lang="zxx">

<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	
	<!-- Template CSS -->
	<link rel="stylesheet" href="assets/css/style-starter.css">
	<!-- Template CSS -->
	<link href="//fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700,800&display=swap" rel="stylesheet">
	<link href="//fonts.googleapis.com/css?family=Pacifico&display=swap" rel="stylesheet">

	<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
	<link rel="stylesheet" type="text/css"
		href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>


	<!-- Thêm Slick Carousel CSS và JS -->
	<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
	<link rel="stylesheet" type="text/css"
		href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />

	<!-- Template CSS -->

</head>

<body>
	<!-- Headers-4 block -->
	<section class="w3l-header-4 mobile-header">
		<div class="header-tophny">
			<div class="container-fluid">
				<header class="top-headerhny">
					<!--/nav-->
					<nav class="navbar navbar-expand-lg navbar-light">

						<a class="navbar-brand" href="index.html">
							<span></span>Khám Phá Hải Hậu</a>

						</a>
						<button class="navbar-toggler" type="button" data-toggle="collapse"
							data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
							aria-expanded="false" aria-label="Toggle navigation">
							<span class="navbar-toggler-icon"></span>
						</button>

						<div class="collapse navbar-collapse" id="navbarSupportedContent">
							<ul class="navbar-nav ml-auto">
								<li class="nav-item active">
									<a class="nav-link" href="index.html">Trang Chủ</a>
								</li>
								<li class="nav-item" style="position: relative;">
									<a class="nav-link" >Giới thiệu</a>
									<ul class="dropdown-menu">
										<li class="dropdown-items" style="position: relative;">
											<a class="dropdown-item">văn hóa và lịch sử</a>
											<ul class="dropdown-menu child-menu">
												<li class="dropdown-items" style="position: relative;" ><a class="dropdown-item"   >Di tích lịch sử</a>
													<ul class="dropdown-menu child-menu">
														<li><a class="dropdown-item" href="chua_luong.html">Chùa Lương- Đền Thuỷ tổ</a></li>
														<li><a class="dropdown-item" href="cau_ngoi.html">Cầu Ngói</a></li>
														<li><a class="dropdown-item" href="den_bao_ninh.html">Đền Bảo Ninh </a></li>
														<li><a class="dropdown-item" href="den_an_trach.html">Đền An Trạch</a></li>
														<li><a class="dropdown-item" href="den_an_phu.html">Đền An Phú</a></li>
														<li><a class="dropdown-item" href="den_liet_sy.html">Đền Liệt sỹ Hải Hậu</a></li>
                                                        <li><a class="dropdown-item" href="chien_thang_cau_doi.html">Chiến thắng Cầu Đôi</a></li>    
													</ul>
												</li>
												<li class="dropdown-items" style="position: relative;" ><a class="dropdown-item"  >Di tích lịch sử cấp tỉnh</a>
													<ul class="dropdown-menu child-menu">
														<li><a class="dropdown-item" href="chua_phuc_hai.html">Chùa Phúc Hải</a></li>
														<li><a class="dropdown-item" href="den_an_phu.html">Đền An Phú</a></li>
														<li><a class="dropdown-item" href="den_an_trach.html">Đền An Trạch</a></li>
													</ul>
												</li>
												<li class="dropdown-items" style="position: relative;"><a class="dropdown-item"  >Di tích lịch sử cấp quốc gia</a>
													<ul class="dropdown-menu child-menu">
														<li><a class="dropdown-item" href="chua_luong.html">Chùa Lương- Đền Thuỷ tổ</a></li>
														<li><a class="dropdown-item"  >Cầu Ngói</a></li>
														<li><a class="dropdown-item" href="chua_phuc_hai.html">Chùa Phúc Hải</a></li>
														<li><a class="dropdown-item" href="chua_anh_quang.html">Chùa Anh Quang </a></li>
														<li><a class="dropdown-item" href="chua_phuc_son.html">Chùa Phúc sơn</a></li>
														<li><a class="dropdown-item"  >Chùa Quy Hồn</a></li>
														<li><a class="dropdown-item" href="den_an_trach.html">Đền Bảo Ninh</a></li>
													</ul>
												</li>
											</ul>
										</li>
										
										<li class="dropdown-items" style="position: relative;"><a class="dropdown-item"  >Khu du lịch nổi tiếng</a>
											<ul class="dropdown-menu child-menu">
												<li><a class="dropdown-item" href="nha_tho_do.html">Nhà thờ đổ </a></li>
												<li><a class="dropdown-item" href="bien_thinh_long.html">Bãi tắm Thịnh Long</a></li>
												<li><a class="dropdown-item" href="nha_tho_hung_nghia.html" >Nhà thờ Hưng Nghĩa</a></li>
											</ul>
										</li>
										<li class="dropdown-items" style="position: relative;"><a class="dropdown-item"  >làng nghề truyền thống</a>
											<ul class="dropdown-menu child-menu">
												<li><a class="dropdown-item" href="nghe_duc_nhom.html">Đúc nhôm</a></li>
												<li><a class="dropdown-item" href="nghe_banh_nhan.html">Làm bánh nhãn</a></li>
												<li><a class="dropdown-item" href="nghe_lam_ken.html">Làng kèn đồng</a></li>
												<li><a class="dropdown-item" href="nghe_xe_day.html">Xe đay - dệt chiếu</a></li>
                                                <li><a class="dropdown-item" href="nghe_lam_cau.html">Cau Khô</a></li>
                                                <li><a class="dropdown-item" href="nghe_dan_luoi.html">Đan Lưới</a></li>
                                                <li><a class="dropdown-item" href="nghe_lam_muoi.html">Làm Muối</a></li>
											</ul>
										</li>
										<li class="dropdown-items" style="position: relative;"><a class="dropdown-item"  >lễ hội truyền thống</a>
											<ul class="dropdown-menu child-menu">
												<li><a class="dropdown-item" href="2-9.html" >2 - 9</a></li>
												<li><a class="dropdown-item" href="le_hoi_chua_luong.html" >chùa lương</a></li>
											</ul>
										</li> 
										
									</ul>
								</li>
								
								<li class="nav-item">
									<a class="nav-link" href="contact.html">Liên hệ</a>
								</li>
							</ul>
						</div>




					</nav>
					<!--//nav-->
				</header>
			</div>
		</div>
	</section>

	<!-- Headers-4 block -->
	<!-- feature with photo1 -->
	<section class="w3l-feature-with-photo-1">
		<div class="feature-with-photo-hny py-5">
			<div class="container py-lg-5">
				<div class="button-container">
					<button class="custom-button gallery " id="galleryButton">
						<span class="icon">🖼️</span> 
						<span class="text">Hình ảnh</span>
					</button>
					<div class="button-group">
						<button class="custom-button video" id="videoButton">
							<span class="icon">🎥</span> 
							<span class="text">Video</span>
						</button>
						<div class="video-source">
							<span class="source-icon">📽</span>
							<span class="source-text">Nguồn: Kênh youtube Hải Đăng TV</span>
						</div>
					</div>
					<button class="custom-button maps" id="mapsButton">
						<span class="icon"><img src="assets/images/icon_1.png" alt="Maps" style="width: 20px; height: 20px;"></span>
						<span class="text">Góc nhìn 3D</span>
					</button>
				</div>

				<div id="galleryModal" class="modal">
					<div class="modal-content">
						<span class="close-button" id="closeModal">&times;</span>
						<div class="gallery-container">
							<div class="gallery-slider">
								<div><img src="./assets/images/thinh_long_1.jpg" alt="Image 1"></div>
								<div><img src="./assets/images/thinh_long_2.jpg" alt="Image 2"></div>
								<div><img src="./assets/images/thinh_long_3.jpg" alt="Image 3"></div>
								<div><img src="./assets/images/thinh_long_4.jpg" alt="Image 4"></div>
							</div>
						</div>
					</div>
				</div>

				<div id="videoModal" class="modal">
					<div class="modal-content">
						<span class="close-button" id="closeModalvideo">&times;</span>
						<div class="video-container">
							<iframe id="videoIframe" src="" frameborder="0" 
								allow="autoplay; encrypted-media" allowfullscreen>
							</iframe>
						</div>
					</div>
				</div>

				<div class="title-content mb-lg-5 mb-4">
					<span class="sub-title">Thông tin chi tiết</span>
					<h3 class="hny-title">Khu Du Lịch Biển Thịnh Long</h3>
				</div>

				<!-- Phần Giới thiệu -->
				<div class="feature-with-photo-content">
					<div class="ab-in-flow row mb-lg-5 mb-3">
						<div class="col-lg-6 ab-left">
							<img src="assets/images/thinh_long_1.jpg" class="img-fluid" alt="Bãi biển Thịnh Long">
							<p class="image-source">Nguồn: Ảnh sưu tầm</p>
						</div>
						<div class="col-lg-6 ab-right pl-lg-4">
							<h3 class="hny-title">Tổng Quan</h3>
							<p class="my-4">
								Khu nghỉ mát và du lịch Thịnh Long sở hữu bãi biển sạch trải dài hơn 3,5 km với dải cát mịn thoải, không bị bùn lún, an toàn tuyệt đối. Nằm tại thị trấn Thịnh Long, huyện Hải Hậu, cách thành phố Nam Định khoảng 45 km.
							</p>
							<ul class="feature-list">
								<li><i class="fa fa-check"></i> Diện tích quy hoạch: 277 ha</li>
								<li><i class="fa fa-check"></i> Bãi tắm dài 3,5 km</li>
								<li><i class="fa fa-check"></i> Nước trong, cát già</li>
								<li><i class="fa fa-check"></i> Cảnh quan thiên nhiên đẹp</li>
							</ul>
						</div>
					</div>
				</div>

				<!-- Phần Cơ sở hạ tầng -->
				<div class="feature-with-photo-content">
					<div class="ab-in-flow row mb-lg-5 mb-3">
						<div class="col-lg-6 ab-right pl-lg-4">
							<h3 class="hny-title">Cơ Sở Hạ Tầng & Dịch Vụ</h3>
							<p class="my-4">
								Khu du lịch được quy hoạch chuyên nghiệp với nhiều khu vực chức năng:
							</p>
							<ul class="feature-list">
								<li><i class="fa fa-hotel"></i> 120 cơ sở lưu trú với 1.000+ phòng nghỉ</li>
								<li><i class="fa fa-star"></i> 2 khách sạn 2 sao, 3 khách sạn 1 sao</li>
								<li><i class="fa fa-store"></i> Khu ki-ốt ven biển</li>
								<li><i class="fa fa-gamepad"></i> Khu vui chơi giải trí</li>
								<li><i class="fa fa-fish"></i> Chợ hải sản</li>
								<li><i class="fa fa-tree"></i> Khu cây xanh</li>
							</ul>
						</div>
						<div class="col-lg-6 ab-left">
							<img src="assets/images/thinh_long_2.jpg" class="img-fluid" alt="Cơ sở hạ tầng">
							<p class="image-source">Nguồn: Ảnh sưu tầm</p>
						</div>
					</div>
				</div>

				<!-- Phần Dịch vụ du lịch -->
				<div class="feature-with-photo-content">
					<div class="ab-in-flow row mb-lg-5 mb-3">
						<div class="col-lg-6 ab-left">
							<img src="assets/images/thinh_long_3.jpg" class="img-fluid" alt="Dịch vụ du lịch">
							<p class="image-source">Nguồn: Ảnh sưu tầm</p>
						</div>
						<div class="col-lg-6 ab-right pl-lg-4">
							<h3 class="hny-title">Dịch Vụ Du Lịch</h3>
							<ul class="feature-list">
								<li><i class="fa fa-car"></i> 42 xe điện phục vụ tham quan</li>
								<li><i class="fa fa-utensils"></i> Ẩm thực hải sản phong phú</li>
								<li><i class="fa fa-history"></i> Tour tham quan di tích lịch sử</li>
								<li><i class="fa fa-shopping-bag"></i> Chợ quà lưu niệm</li>
							</ul>
							<p class="mt-4">
								Mỗi năm đón khoảng 200.000 lượt khách, doanh thu đạt 40-50 tỷ đồng.
							</p>
						</div>
					</div>
				</div>

				<!-- Phần Tiềm năng phát triển -->
				<div class="feature-with-photo-content">
					<div class="ab-in-flow row mb-lg-5 mb-3">
						<div class="col-lg-6 ab-right pl-lg-4">
							<h3 class="hny-title">Tiềm Năng Phát Triển</h3>
							<p class="my-4">
								Với vị trí chiến lược và hệ thống giao thông thuận lợi:
							</p>
							<ul class="feature-list">
								<li><i class="fa fa-road"></i> Quốc lộ 21a, 21b kết nối thuận tiện</li>
								<li><i class="fa fa-bridge"></i> Cầu Thịnh Long - tuyến đường bộ ven biển</li>
								<li><i class="fa fa-leaf"></i> Môi trường "sáng - xanh - sạch - đẹp"</li>
								<li><i class="fa fa-chart-line"></i> Tiềm năng phát triển công nghiệp, thương mại</li>
							</ul>
						</div>
						<div class="col-lg-6 ab-left">
							<img src="assets/images/thinh_long_4.jpg" class="img-fluid" alt="Tiềm năng phát triển">
							<p class="image-source">Nguồn: Ảnh sưu tầm</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!-- //feature with photo1 -->
	<section class="w3l-content-4">
		<div class="container py-lg-5">
			<!-- Timeline Section -->
			<section class="w3l-content-4">
				<div class="container py-lg-5">
					<h3 class="hny-title text-center mb-5">Khám phá Hải Hậu</h3>
					<div class="destination-buttons">
						<div class="row">
							<div class="col-lg-4 col-md-6 mb-4" data-aos="zoom-in" data-aos-delay="100">
								<a href="cau_ngoi.html" class="destination-card">
									<div class="card-overlay"></div>
									<div class="card-img">
										<img src="assets/images/cau_ngoi.jpg" alt="Cầu Ngói">
									</div>
									<div class="card-content">
										<div class="card-icon">
											<i class="fa fa-building"></i>
										</div>
										<h4>Cầu Ngói - Chùa Lương</h4>
										<p>Di tích lịch sử văn hóa độc đáo</p>
										<div class="card-stats">
											<span><i class="fa fa-clock-o"></i> 2-3 giờ</span>
											<span><i class="fa fa-map-marker"></i> Hải Anh</span>
										</div>
										<div class="explore-btn">
											Khám phá ngay <i class="fa fa-arrow-right"></i>
										</div>
									</div>
								</a>
							</div>

							<div class="col-lg-4 col-md-6 mb-4" data-aos="zoom-in" data-aos-delay="200">
								<a href="bien_thinh_long.html" class="destination-card">
									<div class="card-overlay"></div>
									<div class="card-img">
										<img src="assets/images/bien_thinh_long.jpeg" alt="Biển Thịnh Long">
									</div>
									<div class="card-content">
										<div class="card-icon">
											<i class="fa fa-water"></i>
										</div>
										<h4>Biển Thịnh Long</h4>
										<p>Bãi biển hoang sơ tuyệt đẹp</p>
										<div class="card-stats">
											<span><i class="fa fa-clock-o"></i> Cả ngày</span>
											<span><i class="fa fa-map-marker"></i> Thịnh Long</span>
										</div>
										<div class="explore-btn">
											Khám phá ngay <i class="fa fa-arrow-right"></i>
										</div>
									</div>
								</a>
							</div>

							<div class="col-lg-4 col-md-6 mb-4" data-aos="zoom-in" data-aos-delay="300">
								<a href="lang_nghe.html" class="destination-card">
									<div class="card-overlay"></div>
									<div class="card-img">
										<img src="assets/images/lang_nghe.jpg" alt="Làng nghề">
									</div>
									<div class="card-content">
										<div class="card-icon">
											<i class="fa fa-hands"></i>
										</div>
										<h4>Làng nghề truyền thống</h4>
										<p>Khám phá văn hóa làng nghề</p>
										<div class="card-stats">
											<span><i class="fa fa-clock-o"></i> 2-3 giờ</span>
											<span><i class="fa fa-map-marker"></i> Hải Hậu</span>
										</div>
										<div class="explore-btn">
											Khám phá ngay <i class="fa fa-arrow-right"></i>
										</div>
									</div>
								</a>
							</div>
						</div>
					</div>
				</div>
			</section>

			<!-- Feature Cards -->
			<div class="feature-section mt-5">
				<div class="row">
					<div class="col-lg-4 col-md-6 mb-4" data-aos="flip-left" data-aos-delay="100">
						<a href="location.html" class="feature-card-3d">
							<div class="card-inner">
								<div class="card-front">
									<div class="card-img-wrapper">
										<img src="assets/images/location.jpg" alt="Vị trí">
										<div class="img-overlay"></div>
									</div>
									<div class="card-icon pulse">
										<i class="fa fa-map-marker"></i>
									</div>
									<div class="card-content">
										<h4>Vị trí thuận tiện</h4>
										<div class="card-tags">
											<span><i class="fa fa-car"></i> 45 phút</span>
											<span><i class="fa fa-map"></i> Nam Định</span>
										</div>
									</div>
								</div>
								<div class="card-back">
									<div class="back-content">
										<i class="fa fa-map-marker icon-large"></i>
										<h4>Hướng dẫn di chuyển</h4>
										<ul class="feature-list">
											<li><i class="fa fa-check"></i> Xe khách từ Hà Nội</li>
											<li><i class="fa fa-check"></i> Xe bus địa phương</li>
											<li><i class="fa fa-check"></i> Taxi/Grab</li>
										</ul>
										<button class="explore-btn">
											Xem chi tiết <i class="fa fa-arrow-right"></i>
										</button>
									</div>
								</div>
							</div>
						</a>
					</div>

					<div class="col-lg-4 col-md-6 mb-4" data-aos="flip-left" data-aos-delay="200">
						<a href="culture.html" class="feature-card-3d">
							<div class="card-inner">
								<div class="card-front">
									<div class="card-img-wrapper">
										<img src="assets/images/culture.jpg" alt="Văn hóa">
										<div class="img-overlay"></div>
									</div>
									<div class="card-icon pulse">
										<i class="fa fa-history"></i>
									</div>
									<div class="card-content">
										<h4>Di sản văn hóa</h4>
										<div class="card-tags">
											<span><i class="fa fa-calendar"></i> Thế kỷ XV</span>
											<span><i class="fa fa-star"></i> Di tích Quốc gia</span>
										</div>
									</div>
								</div>
								<div class="card-back">
									<div class="back-content">
										<i class="fa fa-history icon-large"></i>
										<h4>Khám phá di sản</h4>
										<ul class="feature-list">
											<li><i class="fa fa-check"></i> Kiến trúc cổ</li>
											<li><i class="fa fa-check"></i> Lễ hội truyền thống</li>
											<li><i class="fa fa-check"></i> Nghệ thuật điêu khắc</li>
										</ul>
										<button class="explore-btn">
											Xem chi tiết <i class="fa fa-arrow-right"></i>
										</button>
									</div>
								</div>
							</div>
						</a>
					</div>

					<div class="col-lg-4 col-md-6 mb-4" data-aos="flip-left" data-aos-delay="300">
						<a href="food.html" class="feature-card-3d">
							<div class="card-inner">
								<div class="card-front">
									<div class="card-img-wrapper">
										<img src="assets/images/food.jpg" alt="Ẩm thực">
										<div class="img-overlay"></div>
									</div>
									<div class="card-icon pulse">
										<i class="fa fa-cutlery"></i>
									</div>
									<div class="card-content">
										<h4>Ẩm thực đặc sắc</h4>
										<div class="card-tags">
											<span><i class="fa fa-utensils"></i> Đặc sản</span>
											<span><i class="fa fa-heart"></i> Truyền thống</span>
										</div>
									</div>
								</div>
								<div class="card-back">
									<div class="back-content">
										<i class="fa fa-cutlery icon-large"></i>
										<h4>Khám phá ẩm thực</h4>
										<ul class="feature-list">
											<li><i class="fa fa-check"></i> Hải sản tươi sống</li>
											<li><i class="fa fa-check"></i> Món ăn truyền thống</li>
											<li><i class="fa fa-check"></i> Quà tặng đặc sản</li>
										</ul>
										<button class="explore-btn">
											Xem chi tiết <i class="fa fa-arrow-right"></i>
										</button>
									</div>
								</div>
							</div>
						</a>
					</div>
				</div>
			</div>
		</div>
	</section>

	<!-- teams 33 block -->


	<!-- footer-66 -->
	<footer class="w3l-footer-66">
		<section class="footer-inner-main">
			<div class="footer-hny-grids py-5">
				<div class="container py-lg-4">
					<div class="text-txt">
						<div class="right-side">
							<div class="row sub-columns">
								<div class="col-lg-4 col-md-6 sub-one-left pr-lg-4">
									<h2><a class="navbar-brand" href="index.html">
											Khám phá<span class="fa fa-globe" aria-hidden="true"></span>Hải Hậu</a></h2>
									<p>Cung cấp dịch vụ du lịch chuyên nghiệp trọn gói hàng đầu. Đừng chần chừ,
										hãy liên lạc cho chúng tôi.
									</p>
									<p>Hotline: 0349.118.394 </p>

									<div class="columns-2">
										<ul class="social">
											<li><a href="#facebook"><span class="fa fa-facebook"
														aria-hidden="true"></span></a>
											</li>
											<li><a href="#linkedin"><span class="fa fa-linkedin"
														aria-hidden="true"></span></a>
											</li>
											<li><a href="#twitter"><span class="fa fa-twitter"
														aria-hidden="true"></span></a>
											</li>
											<li><a href="#google"><span class="fa fa-google-plus"
														aria-hidden="true"></span></a>
											</li>
											<li><a href="#github"><span class="fa fa-github"
														aria-hidden="true"></span></a>
											</li>
										</ul>
									</div>
								</div>
								<div class="col-lg-4 col-md-6 sub-one-left mid-footer-gd">
									<div class="sub-two-right">
										<h6>TRUY CẬP </h6>
										<ul>
											<li><a href="index.html"><span
														class="fa fa-angle-double-right mr-2"></span>Trang chủ</a>
											</li>
											<li><a ><span
														class="fa fa-angle-double-right mr-2"></span>Giới thiệu</a>
											</li>
											<li><a href="services.html"><span
														class="fa fa-angle-double-right mr-2"></span>Điểm đến</a>
											</li>
											<li><a href="contact.html"><span
														class="fa fa-angle-double-right mr-2"></span>Liên hệ</a></li>
										</ul>
									</div>
									<div class="sub-two-right">
										<h6>HỖ TRỢ</h6>
										<ul>
											<li><a href="index.html"><span
														class="fa fa-angle-double-right mr-2"></span>Live
													Chart</a></li>
											<li><a ><span
														class="fa fa-angle-double-right mr-2"></span>Faq</a>
											</li>
											<li><a href="#support"><span
														class="fa fa-angle-double-right mr-2"></span>Support</a></li>
											<li><a href="#terms"><span
														class="fa fa-angle-double-right mr-2"></span>Terms
													of Services</a></li>
										</ul>
									</div>
								</div>
								
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- copyright -->
			<!-- move top -->
			<button onclick="topFunction()" id="movetop" title="Go to top">
				<span class="fa fa-arrow-up" aria-hidden="true"></span>
			</button>
			<script>
				// When the user scrolls down 20px from the top of the document, show the button
				window.onscroll = function () {
					scrollFunction()
				};

				function scrollFunction() {
					if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
						document.getElementById("movetop").style.display = "block";
					} else {
						document.getElementById("movetop").style.display = "none";
					}
				}

				// When the user clicks on the button, scroll to the top of the document
				function topFunction() {
					document.body.scrollTop = 0;
					document.documentElement.scrollTop = 0;
				}
			</script>
			<!-- /move top -->

		</section>
	</footer>
	<!--//footer-66 -->
</body>

</html>

<script src="assets/js/jquery-3.3.1.min.js"></script>
<script src="assets/js/jquery.chocolat.js "></script>
<!-- disable body scroll which navbar is in active -->
<script>
	$(function () {
		$('.navbar-toggler').click(function () {
			$('body').toggleClass('noscroll');
		})
		// $('.button-container .custom-button.gallery').Chocolat();

		// Get modal and button elements
		const galleryButton = document.getElementById('galleryButton');
		const galleryModal = document.getElementById('galleryModal');
		const closeModal = document.getElementById('closeModal');

		// Show modal when clicking Gallery button
		galleryButton.addEventListener('click', function () {
			galleryModal.style.display = 'flex'; // Show the modal
			// Initialize Slick Carousel when modal is opened
			$('.gallery-slider').slick({
				dots: true, // Hiển thị các chấm điều hướng
				arrows: true, // Hiển thị mũi tên điều hướng
				infinite: true, // Lặp lại vòng tròn
				speed: 500, // Tốc độ chuyển đổi giữa các ảnh
				slidesToShow: 1, // Chỉ hiển thị một ảnh tại một thời điểm
				slidesToScroll: 1 // Chuyển 1 ảnh mỗi lần
			});
		});

		// Close the modal when clicking the close button
		closeModal.addEventListener('click', function () {
			galleryModal.style.display = 'none'; // Hide the modal
			// Destroy Slick Carousel when modal is closed
			$('.gallery-slider').slick('unslick');
		});

		// Close the modal if clicking outside of the modal content
		window.addEventListener('click', function (event) {
			if (event.target === galleryModal) {
				galleryModal.style.display = 'none'; // Hide the modal if clicked outside
				// Destroy Slick Carousel when modal is closed
				$('.gallery-slider').slick('unslick');
			}
		});




		// Get modal, iframe, and button elements
		const videoButton = document.getElementById('videoButton');
		const videoModal = document.getElementById('videoModal');
		const closeModalvideo = document.getElementById('closeModalvideo');
		const videoIframe = document.getElementById('videoIframe');

		// URL của video (ví dụ là YouTube)
		const videoURL = 'https://www.youtube.com/embed/X7VJWjrfk3Y';  // Thay đổi URL video ở đây

		// Khi người dùng nhấn nút Video, mở modal và hiển thị video
		videoButton.addEventListener('click', function () {
			videoModal.style.display = 'flex';  // Mở modal
			videoIframe.src = videoURL;  // Set nguồn video vào iframe
		});

		// Khi người dùng nhấn nút đóng, đóng modal và dừng video
		closeModalvideo.addEventListener('click', function () {
			videoModal.style.display = 'none';  // Đóng modal
			videoIframe.src = '';  // Dừng video bằng cách làm trống src của iframe
		});

		// Khi người dùng nhấn vào ngoài modal, đóng modal
		window.addEventListener('click', function (event) {
			if (event.target === videoModal) {
				videoModal.style.display = 'none';  // Đóng modal
				videoIframe.src = '';  // Dừng video
			}
		});

	});
</script>
<!--/MENU-JS-->

<!--light-box-files -->

<script src="assets/js/bootstrap.min.js"></script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<!-- Add AOS Library -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
	AOS.init({
		duration: 1000,
		once: true
	});
</script>

<style>
/* Ocean theme styles */
body {
    background: linear-gradient(180deg, #e3f2fd 0%, #bbdefb 100%);
    color: #37474f;
}


.feature-with-photo-content {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 15px;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
    backdrop-filter: blur(4px);
    margin: 30px 0;
    padding: 30px;
    position: relative;
    overflow: hidden;
}

.feature-with-photo-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #1976d2, #64b5f6, #1976d2);
}

.hny-title {
    color: #1565c0;
    font-weight: 600;
    position: relative;
    padding-bottom: 15px;
}

.hny-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: #64b5f6;
}

.ab-left img {
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.ab-left img:hover {
    transform: scale(1.02);
}

/* Wave animation at bottom */
.wave-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: url('assets/images/wave.png');
    background-size: 1000px 100px;
    animation: wave 10s linear infinite;
    z-index: -1;
    opacity: 0.3;
}

.wave-container::before {
    content: '';
    width: 100%;
    height: 100px;
    background: url('assets/images/wave.png');
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.4;
    animation: wave-reverse 8s linear infinite;
}

@keyframes wave {
    0% { background-position-x: 0; }
    100% { background-position-x: 1000px; }
}

@keyframes wave-reverse {
    0% { background-position-x: 1000px; }
    100% { background-position-x: 0; }
}

/* Custom navigation style */
.navbar {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 0 0 15px 15px;
}

/* Custom button style */
.custom-button {
    background: linear-gradient(45deg, #1976d2, #64b5f6);
    border: none;
    color: white;
    padding: 12px 25px;
    border-radius: 25px;
    transition: all 0.3s ease;
}

.custom-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(25, 118, 210, 0.3);
}

/* Gallery modal ocean style */
#galleryModal .modal-content {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.gallery-slider .slick-slide img {
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .feature-with-photo-content {
        padding: 20px;
    }
    
    .wave-container {
        height: 50px;
        background-size: 500px 50px;
    }
}
.destination-card {
    display: block;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    height: 400px;
    text-decoration: none;
    color: white;
    transition: all 0.3s ease;
}

.destination-card:hover {
    transform: translateY(-10px);
    text-decoration: none;
    color: white;
}

.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.8));
    z-index: 1;
    transition: all 0.3s ease;
}

.destination-card:hover .card-overlay {
    background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.9));
}

.card-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.destination-card:hover .card-img img {
    transform: scale(1.1);
}

.card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px;
    z-index: 2;
}

.card-icon {
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(5px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.card-icon i {
    font-size: 24px;
}

.card-content h4 {
    font-size: 24px;
    margin-bottom: 10px;
}

.card-content p {
    opacity: 0.8;
    margin-bottom: 15px;
}

.card-stats {
    display: flex;
    gap: 15px;
    font-size: 14px;
    opacity: 0.8;
    margin-bottom: 20px;
}

.card-stats span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.explore-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(5px);
    border-radius: 25px;
    transition: all 0.3s ease;
}

.destination-card:hover .explore-btn {
    background: #2a9d8f;
}

.explore-btn i {
    transition: transform 0.3s ease;
}

.destination-card:hover .explore-btn i {
    transform: translateX(5px);
}

@media (max-width: 768px) {
    .destination-card {
        height: 300px;
    }
}
.feature-card-3d {
    perspective: 1500px;
    display: block;
    width: 100%;
    height: 400px;
    text-decoration: none;
    color: inherit;
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    cursor: pointer;
}

.feature-card-3d:hover .card-inner {
    transform: rotateY(180deg);
}

.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.card-front {
    background: white;
}

.card-back {
    background: linear-gradient(135deg, #2a9d8f, #264653);
    color: white;
    transform: rotateY(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.card-img-wrapper {
    height: 250px;
    position: relative;
    overflow: hidden;
}

.card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.img-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.3));
}

.card-icon {
    width: 60px;
    height: 60px;
    background: #2a9d8f;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -30px auto 15px;
    position: relative;
    z-index: 1;
}

.card-icon i {
    color: white;
    font-size: 24px;
}

.pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(42, 157, 143, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(42, 157, 143, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(42, 157, 143, 0);
    }
}

.card-tags {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
}

.card-tags span {
    font-size: 14px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 5px;
}

.back-content {
    text-align: center;
}

.icon-large {
    font-size: 48px;
    margin-bottom: 20px;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.feature-list li {
    margin: 10px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.explore-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px auto 0;
    transition: all 0.3s ease;
}

.explore-btn:hover {
    background: rgba(255,255,255,0.3);
}

.explore-btn i {
    transition: transform 0.3s ease;
}

.explore-btn:hover i {
    transform: translateX(5px);
}

@media (max-width: 768px) {
    .feature-card-3d {
        height: 350px;
    }
}

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-source {
    margin-top: 20px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9em;
    color: #666;
}

.modal-content {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    padding: 20px;
}

@media (max-width: 768px) {
    .video-source {
        font-size: 0.8em;
        padding: 8px;
        margin-top: 15px;
    }
}

.button-container {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 30px;
}

.button-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.video-source {
    font-size: 0.8em;
    color: #666;
    background: rgba(0, 0, 0, 0.05);
    padding: 8px 12px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 300px;
    text-align: center;
}

.source-icon {
    font-size: 1.2em;
}

.source-text {
    line-height: 1.4;
}

@media (max-width: 768px) {
    .button-container {
        flex-direction: column;
        align-items: center;
    }
    
    .video-source {
        font-size: 0.75em;
        padding: 6px 10px;
    }
}
</style>

<!-- Add wave container to HTML -->
<div class="wave-container"></div>

<!-- Modal cho Góc nhìn 3D -->
<div id="mapsModal" class="modal">
    <div class="modal-content">
        <span class="close-button" id="closeMapsModal">&times;</span>
        <div class="maps-container">
            <iframe 
                src="https://www.google.com/maps/embed?pb=!4v1736242067533!6m8!1m7!1sCAoSLEFGMVFpcE52TS1WNEVZSmN1TmJ5SkNHYWNFbzVZQm5NWktVY21ZdUNXcHlp!2m2!1d20.02578788000636!2d106.220148365761!3f277.1266017280127!4f4.132291608415571!5f0.7820865974627469"
                width="100%" 
                height="450" 
                style="border:0;" 
                allowfullscreen="" 
                loading="lazy" 
                referrerpolicy="no-referrer-when-downgrade">
            </iframe>
        </div>
    </div>
</div>

<script>
// Lấy các phần tử DOM
const mapsButton = document.getElementById('mapsButton');
const mapsModal = document.getElementById('mapsModal');
const closeMapsModal = document.getElementById('closeMapsModal');

// Xử lý sự kiện click vào button Góc nhìn 3D
mapsButton.onclick = function() {
    mapsModal.style.display = "block";
}

// Xử lý sự kiện đóng modal
closeMapsModal.onclick = function() {
    mapsModal.style.display = "none";
}

// Đóng modal khi click bên ngoài
window.onclick = function(event) {
    if (event.target == mapsModal) {
        mapsModal.style.display = "none";
    }
}
</script>

<style>
/* CSS cho modal bản đồ */
.maps-container {
    width: 100%;
    height: 100%;
}

.maps-container iframe {
    width: 100%;
    height: 100%;
    min-height: 450px;
}

/* Đảm bảo modal hiển thị đúng */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
}

.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    width: 90%;
    max-width: 1000px;
    height: 80vh;
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-button:hover {
    color: black;
}
</style>

<!-- Gallery Modal -->
<div id="galleryModal" class="modal">
    <div class="modal-content">
        <span class="close-button" id="closeModal">&times;</span>
        <div class="gallery-container">
            <div class="gallery-slider">
                <div><img src="./assets/images/thinh_long_1.jpg" alt="Image 1"></div>
                <div><img src="./assets/images/thinh_long_2.jpg" alt="Image 2"></div>
                <div><img src="./assets/images/thinh_long_3.jpg" alt="Image 3"></div>
                <div><img src="./assets/images/thinh_long_4.jpg" alt="Image 4"></div>
            </div>
        </div>
    </div>
</div>

<style>
/* Gallery Modal Styles */
.gallery-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 0;
}

.gallery-slider {
    width: 100%;
}

.gallery-slider div {
    padding: 10px;
}

.gallery-slider img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Slick Slider Custom Styles */
.slick-prev, .slick-next {
    width: 40px;
    height: 40px;
    z-index: 1;
}

.slick-prev {
    left: -50px;
}

.slick-next {
    right: -50px;
}

.slick-prev:before, .slick-next:before {
    font-size: 40px;
    color: #333;
}

.slick-dots {
    bottom: -40px;
}

.slick-dots li button:before {
    font-size: 12px;
    color: #333;
}

/* Modal Content Adjustments */
.modal-content {
    background-color: #fff;
    margin: 2% auto;
    padding: 20px;
    width: 90%;
    max-width: 1000px;
    position: relative;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .gallery-slider img {
        height: 300px;
    }
    
    .slick-prev {
        left: 10px;
    }
    
    .slick-next {
        right: 10px;
    }
}
</style>

<script>
$(document).ready(function(){
    $('.gallery-slider').slick({
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 3000,
        fade: true,
        cssEase: 'linear',
        responsive: [
            {
                breakpoint: 768,
                settings: {
                    arrows: false
                }
            }
        ]
    });
});
</script>