| Server IP : 103.161.17.216 / Your IP : 216.73.216.1 Web Server : nginx/1.18.0 System : Linux tipsysaigoncharming 5.4.0-216-generic #236-Ubuntu SMP Fri Apr 11 19:53:21 UTC 2025 x86_64 User : www-data ( 33) PHP Version : 7.4.3-4ubuntu2.29 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_get_handler,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,pcntl_async_signals,pcntl_unshare, MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : ON Directory : /var/www/thewincity.primehomes.vn/ |
Upload File : |
<!DOCTYPE html>
<html lang="vi">
<head>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-WM7X9667');</script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Lexend&display=swap" rel="stylesheet"/>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>The Win City | THẮNG ĐỜI 1 TỔ ẤM. Nơi ta sống - Ta vô lo - Ta hạnh phúc</title>
<link href="/manifest.json" rel="manifest"/>
<meta content="Sắp xuất hiện mùa hè này tại Đức Hoà - Tây Ninh" name="description"/>
<meta content="The Win City, dự án Đức Hòa, bất động sản Long An, chung cư, khu đô thị Long An" name="keywords"/>
<meta content="index, follow" name="robots"/>
<meta content="Thewincity" name="author"/>
<meta content="The Win City | THẮNG ĐỜI 1 TỔ ẤM Nơi ta sống - Ta vô lo - Ta hạnh phúc" property="og:title"/>
<meta content="Sắp xuất hiện mùa hè này tại Đức Hoà - Tây Ninh." property="og:description"/>
<meta content="https://thewincity.vn/thumbnail.jpg" property="og:image"/>
<meta content="https://thewincity.vn" property="og:url"/>
<meta content="website" property="og:type"/>
<link href="/favicon.ico" rel="icon" type="image/x-icon"/>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon"/>
<link href="/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180"/>
<link href="/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png"/>
<link href="/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png"/>
<link href="/site.webmanifest" rel="manifest"/>
<style>
@keyframes shake {
0% { transform: rotate(0deg); }
25% { transform: rotate(8deg); }
50% { transform: rotate(-8deg); }
75% { transform: rotate(3deg); }
100% { transform: rotate(0deg); }
}
body {
margin: 0;
padding: 0;
}
.hero-banner {
width: 100%;
aspect-ratio: 16 / 9;
background-image: url('desktop.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (max-width: 768px) {
.hero-banner {
background-image: url('mobile.jpg');
aspect-ratio: 9 / 16;
}
}
/* tao song */
/* Nút nổi chung (btn-datlich và btn-hotline) */
.btn-datlich, .btn-hotline { /* Áp dụng cho cả hai nút */
position: fixed;
animation: shake 2s infinite;
color: white;
border: none;
width: 56px;
height: 56px;
border-radius: 50%;
cursor: pointer;
z-index: 10000;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
overflow: hidden;
font-size: 14px;
text-decoration: none; /* Thêm cho thẻ <a> để loại bỏ gạch chân */
}
/* Vị trí và màu sắc riêng cho từng nút */
.btn-datlich {
bottom: 24px;
left: 24px;
background-color: #cc4400; /* Màu cam ban đầu */
}
.btn-hotline {
bottom: 88px; /* 24px (bottom của nút dưới) + 56px (chiều cao nút) + 8px (khoảng cách) */
left: 24px;
background-color: #FF0000; /* Đổi từ #28a745 sang màu đỏ tươi */
}
/* Hiệu ứng ripple và hover chung cho cả hai nút */
.btn-datlich::after, .btn-hotline::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
animation: ripple 1.5s infinite;
z-index: 0;
}
@keyframes ripple {
0% { transform: scale(1); opacity: 0.6; }
70% { transform: scale(1.8); opacity: 0; }
100% { transform: scale(1.8); opacity: 0; }
}
.btn-datlich .icon, .btn-hotline .icon {
position: relative;
z-index: 1; /* nổi lên trên ripple */
font-size: 20px;
color: white;
}
.btn-datlich .text, .btn-hotline .text {
display: none; /* ❌ KHÔNG dùng opacity/visibility */
margin-left: 15px;
font-weight: bold;
font-size: 14px;
white-space: nowrap;
color: white;
font-family: 'Lexend', sans-serif;
}
/* Hover: mở rộng nút + hiển thị chữ */
.btn-datlich:hover, .btn-hotline:hover {
width: 180px;
border-radius: 30px;
justify-content: flex-start;
padding-left: 20px;
padding-right: 16px;
}
.btn-datlich:hover .text, .btn-hotline:hover .text {
display: inline; /* ✅ Chỉ hiện khi hover */
}
/* Hiệu ứng ripple pulse bên trong (cho span.ripple) */
.btn-datlich .ripple, .btn-hotline .ripple {
position: absolute;
width: 90px; /* To hơn nút */
height: 90px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(255, 255, 255, 0.2);
border-radius: 50%;
animation: ripple-pulse 2s infinite;
z-index: 1;
}
@keyframes ripple-pulse {
0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
70% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}
/* Popup form */
.popup-overlay {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.6);
display: none;
justify-content: center;
align-items: center;
z-index: 9999;
}
.popup-content {
background: #fff;
padding: 2rem;
border-radius: 10px;
width: 80%;
max-width: 400px;
position: relative;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center; /* ✅ Căn giữa nội dung bên trong */
text-align: center;
}
.popup-content h3 {
margin-bottom: 1rem;
font-family: 'Lexend', sans-serif;
}
.popup-close {
position: absolute;
top: 10px;
right: 15px;
font-size: 24px;
color: #333;
cursor: pointer;
}
.popup-content form {
width: 100%; /* ✅ Đảm bảo form chiếm hết chiều ngang */
display: flex;
flex-direction: column;
align-items: center; /* ✅ Căn giữa các trường */
font-family: 'Lexend', sans-serif;
}
.popup-content input,
.popup-content button {
width: 100%;
padding: 0.75rem;
margin: 0.5rem 0;
border-radius: 6px;
border: 1px solid #ccc;
box-sizing: border-box;
}
.popup-content button {
background-color: #f1793b;
color: white;
font-weight: bold;
border: none;
cursor: pointer;
font-family: 'Lexend', sans-serif;
}
.popup-content button:hover {
background-color: #d45d1f;
}
.popup-content select {
width: 100%;
padding: 1rem;
margin: 1rem 0;
border-radius: 8px;
border: 2px solid #f1793b;
font-size: 16px;
font-weight: bold;
background-color: #fff8f3;
color: #333;
box-shadow: 0 0 8px rgba(241, 121, 59, 0.2);
transition: border 0.3s ease, box-shadow 0.3s ease;
font-family: 'Lexend', sans-serif;
}
.popup-content select:focus {
border-color: #d45d1f;
box-shadow: 0 0 12px rgba(212, 93, 31, 0.4);
outline: none;
}
.main-header {
position: fixed;
top: 0;
width: 100%;
z-index: 10001;
background: rgba(0, 100, 90, 0.9); /* Nền trong suốt */
backdrop-filter: blur(10px);
padding: 12px 24px;
box-sizing: border-box;
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
font-family: 'Lexend', sans-serif;
}
.nav-left, .nav-right {
display: flex;
list-style: none;
padding: 0;
margin: 0;
gap: 20px;
}
.nav-left li a, .nav-right li a {
text-decoration: none;
color: #fff !important;
font-weight: bold;
font-size: 16px;
letter-spacing: 1px;
text-transform: uppercase;
position: relative;
padding: 8px 12px;
transition: color 0.3s ease, text-shadow 0.3s ease;
text-shadow: 0 0 6px rgba(255, 255, 255, 0.5); /* làm chữ sáng nhẹ */
}
.nav-left li a:hover,
.nav-right li a:hover {
color: #f1793b !important;
text-shadow: 0 0 8px rgba(241, 121, 59, 0.5);
}
.nav-left li a:hover::after, .nav-right li a:hover::after {
width: calc(100% - 24px);
}
.nav-left li a:hover, .nav-right li a:hover {
color: #f1793b;
text-decoration: none;
}
.nav-logo img {
height: 45px;
}
/* Responsive cho mobile */
@media screen and (max-width: 768px) {
.nav-container {
flex-direction: column;
}
.nav-left, .nav-right {
flex-direction: column;
gap: 10px;
margin: 10px 0;
}
}
/* Mặc định ẩn hamburger + mobile menu */
.hamburger {
display: none;
font-size: 26px;
color: white;
cursor: pointer;
}
.mobile-menu {
position: fixed;
top: 0;
right: -100%;
width: 70%;
max-width: 300px;
background-color: #fff;
box-shadow: -2px 0 10px rgba(0,0,0,0.2);
padding: 2rem 1rem;
display: flex;
flex-direction: column;
gap: 16px;
transition: right 0.3s ease;
z-index: 10002;
}
.mobile-menu a {
text-decoration: none;
color: #333;
font-weight: bold;
font-family: 'Lexend', sans-serif;
font-size: 16px;
transition: color 0.2s ease;
}
.mobile-menu a:hover {
color: #f1793b;
}
.close-mobile {
font-size: 28px;
text-align: right;
cursor: pointer;
margin-bottom: 20px;
color: #333;
}
/* Responsive behavior */
@media screen and (max-width: 768px) {
.nav-left,
.nav-right.desktop {
display: none;
}
.hamburger.mobile {
display: block;
}
.nav-container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.7rem 1rem;
background-color: #f1793b; /* màu nền menu */
position: relative;
z-index: 10001;
}
/* Giữ logo ở giữa */
.nav-logo {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
/* Đảm bảo logo có vị trí cố định để không bị cuộn */
.nav-logo {
position: fixed; /* Giúp logo luôn hiển thị dù cuộn trang */
left: 30px; /* Cách lề trái 30px */
bottom: 15px; /* Cách lề dưới 30px */
top: auto; /* Đảm bảo không bị ghi đè bởi top */
transform: none; /* Hủy bỏ transform: translateX(-50%) để không còn nằm giữa */
z-index: 9999; /* Đảm bảo logo luôn hiển thị trên cùng */
/* Điều chỉnh kích thước logo cho mobile nếu cần */
width: 100px; /* Ví dụ: chiều rộng 100px, điều chỉnh nếu phù hợp */
height: auto; /* Giữ nguyên tỷ lệ khung hình */
}
}
/* Mobile hamburger luôn ở cuối cùng bên phải */
.hamburger.mobile {
margin-left: auto;
}
}
.mobile-menu a {
text-decoration: none;
color: #333;
font-weight: bold;
font-family: 'Lexend', sans-serif;
font-size: 16px;
transition: color 0.2s ease;
padding: 12px 0; /* Khoảng cách trên dưới */
border-bottom: 1px solid #f1793b; /* Đường ngăn cách màu cam */
display: block;
}
.mobile-menu a:last-child {
border-bottom: none; /* Không cần đường kẻ ở mục cuối */
}
@media screen and (max-width: 768px) {
#gioithieu {
flex-direction: column;
}
#gioithieu > div {
max-width: 100% !important;
}
#gioithieu img {
max-height: 400px;
height: auto;
width: 100%;
}
}
.gioithieu-image-wrapper {
position: relative;
display: inline-block;
max-width: 100%;
}
.gioithieu-image {
width: 100%;
max-width: 600px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.icon-pin {
position: absolute;
width: 42px;
height: 42px;
background-color: #f1793b;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
cursor: pointer;
transition: transform 0.3s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.icon-pin:hover {
transform: scale(1.2);
}
.info-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 6px 16px rgba(0,0,0,0.3);
z-index: 20;
display: none;
max-width: 280px;
text-align: center;
font-family: 'Lexend', sans-serif;
text-align: left; /* ✅ Căn lề trái */
white-space: pre-line; /* ✅ Cho phép xuống dòng bằng \n hoặc <br> */
}
.info-close {
position: absolute;
top: 6px;
right: 12px;
font-size: 18px;
color: #999;
cursor: pointer;
}
.tienich-container {
display: flex;
flex-wrap: nowrap; /* Giữ 2 cột trên cùng 1 hàng */
justify-content: space-between;
align-items: stretch;
}
.tienich-menu {
flex: 1 1 50%;
max-width: 50%;
padding: 20px;
display: grid;
grid-template-columns: 1fr 1fr; /* 2 cột trong menu tiện ích */
gap: 16px;
box-sizing: border-box;
}
.tienich-item {
background-color: #ffffff;
border: 2px solid #f1793b;
color: #333;
padding: 16px;
font-weight: bold;
font-size: 16px;
text-align: center;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.tienich-item:hover {
background-color: #f1793b;
color: white;
transform: scale(1.03);
}
.tienich-image {
flex: 1 1 50%;
max-width: 50%;
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.tienich-image img {
width: 100%;
max-width: 100%;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
@media screen and (max-width: 768px) {
.tienich-container {
flex-direction: column;
}
.tienich-menu,
.tienich-image {
max-width: 100%;
flex: 1 1 100%;
}
.tienich-item {
flex: 1 1 100%;
}
}
.tienich-title-wrapper {
display: flex;
align-items: center;
margin: 60px 20px 30px;
font-family: 'Lexend', sans-serif;
}
.tienich-title-box {
background-color: #f1793b;
color: white;
padding: 10px 20px;
border-radius: 8px;
font-size: 20px;
font-weight: bold;
white-space: nowrap;
z-index: 2;
position: relative;
}
.tienich-title-line {
flex: 1;
height: 2px;
background-color: #f1793b;
margin-left: 12px;
border-radius: 2px;
z-index: 1;
}
/* Mặt bằng Tabs CSS */
.matbang-tabs {
display: flex;
justify-content: center;
margin-bottom: 20px;
flex-wrap: wrap; /* Allow tabs to wrap on smaller screens */
}
.matbang-tab-button {
background-color: #d45d1f; /* Darker blue for active tab */
color: white;
padding: 10px 20px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
font-weight: bold;
margin: 0 5px 10px; /* Add margin-bottom for wrapping */
transition: background-color 0.3s ease;
}
.matbang-tab-button.active {
background-color: #d45d1f; /* Active tab color */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.matbang-tab-button:hover:not(.active) {
background-color: #003f7a;
}
.matbang-slider-container {
display: none; /* Hidden by default */
position: relative;
max-width: 1000px;
margin: auto;
overflow: hidden;
padding: 20px 0;
}
.matbang-slider-container.active {
display: block; /* Show when active */
}
.matbang-slides {
display: flex;
transition: transform 0.5s ease-in-out;
}
.slide-image {
min-width: 100%;
border-radius: 10px;
box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.slide-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(255, 255, 255, 0.8);
color: #084437;
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
font-size: 20px;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
z-index: 2;
transition: background 0.3s, transform 0.2s;
}
.slide-btn:hover {
background-color: #f1793b;
color: white;
transform: translateY(-50%) scale(1.1);
}
.slide-btn.prev {
left: 10px;
}
.slide-btn.next {
right: 10px;
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-auto-rows: 200px;
gap: 12px;
}
.gallery-item {
overflow: hidden;
border-radius: 8px;
position: relative;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
cursor: pointer;
transition: transform 0.3s ease;
}
.gallery-item img:hover {
transform: scale(1.05);
}
/* Tùy chọn chiều rộng/cao cho một số hình */
.gallery-item.tall {
grid-row: span 2;
}
.gallery-item.wide {
grid-column: span 2;
}
/* Mobile: reset về hình vuông 2 cột */
@media screen and (max-width: 768px) {
.gallery-grid {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 180px;
}
.gallery-item.tall,
.gallery-item.wide {
grid-row: span 1 !important;
grid-column: span 1 !important;
}
}
.news-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
}
.news-item {
background: #fafafa;
border-radius: 10px;
padding: 16px;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
transition: transform 0.3s ease;
}
.news-item:hover {
transform: translateY(-4px);
}
.news-item img {
width: 100%;
height: 250px;
object-fit: cover;
border-radius: 8px;
margin-bottom: 12px;
}
.news-item h3 {
font-size: 18px;
color: #f1793b;
margin: 8px 0;
}
.news-item p {
font-size: 15px;
color: #444;
line-height: 1.5;
margin-bottom: 16px;
}
.btn-readmore {
padding: 8px 16px;
background: white;
border: 2px solid #f1793b;
color: #f1793b;
border-radius: 6px;
text-decoration: none;
font-weight: bold;
transition: background 0.3s, color 0.3s;
display: inline-block;
}
.btn-readmore:hover {
background: #f1793b;
color: white;
}
.partner-logos {
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: center;
align-items: center;
}
.partner-logos img {
height: 150px;
object-fit: contain;
filter: grayscale(0);
transition: filter 0.3s ease;
}
.partner-logos img:hover {
filter: grayscale(100%);
}
/* Grid 6 logo ngang trên desktop */
.partner-slider {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 24px;
justify-items: center;
align-items: center;
padding: 10px 0;
}
/* Logo style */
.partner-slider img {
max-width: 100px;
max-height: 60px;
object-fit: contain;
transition: transform 0.3s ease;
background: white;
padding: 10px;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.partner-slider img:hover {
transform: scale(1.05);
}
/* Mobile: Slide 2 logo/trượt ngang */
@media screen and (max-width: 768px) {
.partner-slider {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 12px;
padding-bottom: 10px;
}
.partner-slider img {
flex: 0 0 45%;
scroll-snap-align: start;
margin-right: 8px;
}
.partner-slider::-webkit-scrollbar {
display: none;
}
}
footer form input,
footer form select,
footer form button {
width: 100%;
padding: 12px;
margin: 8px 0;
border-radius: 6px;
border: none;
font-family: 'Lexend', sans-serif;
box-sizing: border-box;
}
footer form input,
footer form select {
border: 1px solid #ccc;
}
footer form select {
background-color: #fff8f3;
border: 2px solid #f1793b;
font-weight: bold;
color: #333;
}
footer form select:focus {
outline: none;
border-color: #d45d1f;
box-shadow: 0 0 8px rgba(212, 93, 31, 0.3);
}
footer form button {
background-color: #f1793b;
color: white;
font-weight: bold;
border: none;
cursor: pointer;
transition: background 0.3s;
}
footer form button:hover {
background-color: #d45d1f;
}
.location-box {
padding: 16px 20px;
font-family: 'Lexend', sans-serif;
color: white;
font-size: 14px;
line-height: 1.5;
background-color: rgba(0, 0, 0, 0.1); /* Nền đen mờ */
backdrop-filter: blur(6px); /* Hiệu ứng mờ */
border-radius: 12px;
max-width: 300px;
margin-left: 40px;
}
.location-box h2 {
font-size: 20px;
font-weight: 600;
margin-bottom: 6px;
line-height: 1.2;
}
.location-box h3 {
font-size: 18px;
font-weight: 300;
margin-bottom: 16px;
line-height: 1.2;
}
.location-box p span {
color: #f9a825;
font-size: 18px;
font-weight: 600;
}
@media screen and (min-width: 1024px) {
.location-box {
padding-left: 100px;
}
}
.hero-banner {
position: relative;
width: 100%;
overflow: hidden;
aspect-ratio: 16/9; /* Tỷ lệ khung hình mặc định cho desktop */
min-height: 300px;
}
@media screen and (max-width: 768px) {
.hero-banner {
aspect-ratio: 9/16; /* Tỷ lệ khung hình cho mobile */
}
}
.slides-container {
display: flex;
transition: transform 0.6s ease-in-out;
width: 100%; /* Sẽ được JS điều chỉnh để chứa tất cả slide */
height: 100%;
}
.slide {
width: 100%;
flex-shrink: 0; /* Ngăn các slide bị co lại */
position: relative;
height: 100%;
}
.slide-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 1;
}
/* Hero Thumbs */
.hero-thumbs {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 10;
}
.hero-thumbs .thumb {
width: 80px; /* Kích thước thumbnail */
height: 50px;
object-fit: cover;
border: 2px solid transparent;
cursor: pointer;
transition: border-color 0.3s ease;
opacity: 0.7;
}
.hero-thumbs .thumb.active {
border-color: #fff; /* Viền trắng cho thumbnail đang hoạt động */
opacity: 1;
}
/* Nút điều hướng (Tùy chọn) */
.slide-nav-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 10px 15px;
cursor: pointer;
font-size: 24px;
z-index: 10;
}
.prev-slide {
left: 10px;
border-radius: 3px;
}
.next-slide {
right: 10px;
border-radius: 3px;
}
.slide-nav-button:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.banner-info-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(calc(-50% + -100px), -50%);
text-align: center;
z-index: 10;
max-width: 90%;
padding: 20px;
font-family: 'Lexend', sans-serif;
}
.banner-info-box h2 {
font-size: 24px;
margin-bottom: 20px;
color: #ffffff;
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
.info-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 14px 18px;
min-height: 72px;
border: 2px solid #ffffff;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(6px);
color: #ed540b;
font-size: 15px;
font-weight: 500;
line-height: 1.4;
text-shadow: 0 1px 2px rgba(255,255,255,0.6);
}
.info-item b {
color: #a43600;
}
.info-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 32px;
}
.cta-button {
display: inline-block;
padding: 12px 28px;
background: linear-gradient(to right, #fff1dd, #eac4a2);
color: #5a2101;
font-weight: bold;
border-radius: 999px;
text-decoration: none;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
transition: transform 0.2s ease;
}
.cta-button:hover {
transform: scale(1.05);
}
@media screen and (max-width: 768px) {
.banner-info-box h2 {
font-size: 18px;
}
.info-grid {
grid-template-columns: 1fr;
}
.cta-button {
font-size: 14px;
padding: 10px 24px;
}
}
@@media screen and (max-width: 768px) {
.info-grid {
grid-template-columns: 1fr;
}
.info-item {
font-size: 14px;
padding: 10px;
}
}
@media screen and (max-width: 768px) {
.banner-info-box {
transform: translate(-50%, -50%); /* ✅ về giữa lại */
left: 50%; /* đảm bảo không lệch phải */
padding: 16px;
}
}
.product-section {
background-image: url('/images/footer-bg.png'); /* hình nền section */
background-size: cover;
background-position: center;
padding: 60px 20px;
font-family: 'Lexend', sans-serif;
position: relative;
color: white;
}
.product-title {
text-align: center;
font-size: 32px;
font-weight: bold;
margin-bottom: 40px;
color: #fff;
}
/* --- Mobile Slider (hiển thị 1 frame) --- */
.product-slider {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 16px;
padding-bottom: 10px;
}
.product-slider::-webkit-scrollbar {
display: none;
}
.product-card {
scroll-snap-align: start;
flex: 0 0 100%;
background-color: #fffefb;
border: 2px solid #004225;
border-radius: 12px;
padding: 16px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
transition: transform 0.3s;
text-align: center;
}
.product-card:hover {
transform: translateY(-6px);
}
.product-card img {
width: auto;
height: 200px;
border-radius: 8px;
margin-bottom: 12px;
}
.product-card h3 {
color: #004225;
font-size: 18px;
font-weight: bold;
margin: 12px 0;
}
.product-card ul {
list-style: none;
padding: 0;
margin: 0 0 16px;
font-size: 14px;
color: #222;
text-align: left;
}
.product-card li {
border-top: 1px dashed #aaa;
padding: 6px 0;
}
.product-card .gia {
color: #d9342b;
font-weight: bold;
}
.btn-price {
background-color: #f13a29;
color: white;
font-weight: bold;
padding: 12px 16px;
border: none;
border-radius: 6px;
font-size: 15px;
cursor: pointer;
width: 100%;
transition: background 0.3s;
}
.btn-price:hover {
background-color: #c9261a;
}
/* --- Desktop layout: chuyển về lưới khi đủ rộng --- */
@media screen and (min-width: 768px) {
.product-slider {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
overflow: visible;
}
.product-card {
flex: none;
min-width: 0;
}
}
.product-slider-wrapper {
position: relative;
}
.nav-btn {
position: absolute;
top: 40%;
transform: translateY(-50%);
z-index: 10;
background-color: rgba(255, 255, 255, 0.8);
color: #004225;
border: none;
width: 40px;
height: 40px;
font-size: 24px;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
transition: background 0.3s ease;
}
.nav-btn:hover {
background-color: #fff;
color: #f13a29;
}
.nav-btn.prev {
left: 8px;
}
.nav-btn.next {
right: 8px;
}
/* Ẩn nút nếu không phải mobile */
@media screen and (min-width: 768px) {
.nav-btn {
display: none;
}
}
/* Animation float vào + bay bay */
@keyframes float-in {
0% {
opacity: 0;
transform: translateY(20px) scale(0.95);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes float-updown {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-6px);
}
100% {
transform: translateY(0px);
}
}
.gallery-item {
opacity: 0;
animation: float-in 0.8s ease forwards, float-updown 3s ease-in-out infinite;
}
/* Delay từng hình để nổi lần lượt */
.gallery-item:nth-child(1) { animation-delay: 0.1s; }
.gallery-item:nth-child(2) { animation-delay: 0.2s; }
.gallery-item:nth-child(3) { animation-delay: 0.3s; }
.gallery-item:nth-child(4) { animation-delay: 0.4s; }
.gallery-item:nth-child(5) { animation-delay: 0.5s; }
.gallery-item:nth-child(6) { animation-delay: 0.6s; }
.gallery-item:nth-child(7) { animation-delay: 0.7s; }
.gallery-item:nth-child(8) { animation-delay: 0.8s; }
.gallery-item:nth-child(9) { animation-delay: 0.9s; }
</style>
</head>
<body>
<header class="main-header">
<nav class="nav-container">
<div class="nav-left">
<a href="#gioithieu" style="color: #fff; text-decoration: none;">GIỚI THIỆU</a>
<a href="#vitri" style="color: #fff;text-decoration: none;">VỊ TRÍ</a>
<a href="#tienich" style="color: #fff;text-decoration: none;">TIỆN ÍCH</a>
<a href="#matbang"style="color: #fff;text-decoration: none;">MẶT BẰNG</a>
</div>
<div class="nav-logo">
<a href="/"><img alt="The Win City Logo" src="/logo.png"/></a>
</div>
<div class="nav-right desktop">
<a href="#sanpham"style="color: #fff;text-decoration: none;">SẢN PHẨM</a>
<a href="#thuvien"style="color: #fff;text-decoration: none;">THƯ VIỆN</a>
<a href="#tintuc"style="color: #fff;text-decoration: none;">TIN TỨC</a>
<a href="#lienhe"style="color: #fff;text-decoration: none;">LIÊN HỆ</a>
</div>
<div class="hamburger mobile" onclick="toggleMobileMenu()">
<i class="fas fa-bars"></i>
</div>
</nav>
<div class="mobile-menu" id="mobileMenu">
<span class="close-mobile" onclick="toggleMobileMenu()">×</span>
<a href="#gioithieu">Giới thiệu</a>
<a href="#vitri">Vị trí</a>
<a href="#tienich">Tiện ích</a>
<a href="#matbang">Mặt bằng</a>
<a href="#sanpham">Sản Phẩm</a>
<a href="#thuvien">Thư viện</a>
<a href="#tintuc">Tin tức</a>
<a href="#lienhe">Liên hệ</a>
</div>
</header>
<!-- Hero Slider -->
<div class="hero-banner">
<div class="slides-container" id="slidesContainer">
<div class="slide" data-desktop="images/slide1.jpg" data-mobile="images/slide1-m.jpg">
<div class="slide-bg"></div>
</div>
<div class="slide" data-desktop="images/slide2.jpg" data-mobile="images/slide2-m.jpg">
<div class="slide-bg"></div>
<div class="banner-info-box">
<h2>🔥 CỬA NGÕ PHÍA TÂY LÀ ĐIỂM ĐẾN “THẮNG ĐỜI” </h2>
<div class="info-grid">
<div class="info-item">✅ <b>Sổ Hồng </b>sẵn từng căn</div>
<div class="info-item">✅ <b>Bàn Giao Nhà</b>Q1/2027</div>
<div class="info-item">✅ <b>Mặt Tiền</b> TỈNH LỘ 1O</div>
<div class="info-item">✅ <b>Số Lượng </b> 6000 căn hộ</div>
</div>
<a href="javascript:void(0)" class="cta-button" onclick="openPopup()">ĐĂNG KÝ NHẬN THÔNG TIN</a>
</div>
</div>
<div class="slide" data-desktop="images/slide3.jpg" data-mobile="images/slide3-m.jpg">
<div class="slide-bg"></div>
<div class="banner-info-box">
<h2> TIỆN ÍCH NỘI KHU ĐA DẠNG – SỐNG TRỌN MỖI NGÀY </h2>
<a href="javascript:void(0)" class="cta-button" onclick="openPopup()">ĐĂNG KÝ NHẬN THÔNG TIN</a>
</div>
</div>
</div>
<!-- ✅ Nút điều hướng đúng vị trí -->
<button class="prev-slide slide-nav-button" onclick="heroPlusSlides(-1)">❮</button>
<button class="next-slide slide-nav-button" onclick="heroPlusSlides(1)">❯</button>
<!-- ✅ Thumbnail -->
<div class="hero-thumbs">
<img src="images/slide1.jpg" class="thumb active" onclick="heroCurrentSlide(0)">
<img src="images/slide2.jpg" class="thumb" onclick="heroCurrentSlide(1)">
<img src="images/slide3.jpg" class="thumb" onclick="heroCurrentSlide(2)">
</div>
</div>
<section id="gioithieu" style="display: flex; flex-wrap: wrap; align-items: center; padding: 60px 20px; background-color: #f7f7f7; font-family: 'Lexend', sans-serif;">
<div style="flex: 1 1 50%; max-width: 50%; padding: 20px; box-sizing: border-box;">
<!-- THAY H2 BẰNG IMG -->
<img alt="Tiêu đề Giới thiệu" src="/images/titlegt.png" style="max-width: 100%; height: auto; margin-bottom: 20px;"/>
<p style="font-size: 16px; color: #444; line-height: 1.6; white-space: pre-line;">
<b>Nằm tại vị trí trung tâm của đại đô thị The Win City</b>, Celesta là phân khu căn hộ cao tầng mang phong cách hiện đại, được thiết kế để trở thành điểm nhấn sống động giữa lòng khu đô thị kiểu mẫu phía Tây TP.HCM.
💎 <b>Tổng quan phân khu Celesta</b>
🔹 <b>Loại hình:</b> Căn hộ chung cư cao tầng
🔹 <b>Chiều cao:</b> 15–20 tầng
🔹 <b>Diện tích căn hộ:</b> Từ 45m² – 120m² (1PN – 3PN, có căn hộ Dual Key & căn hộ sân vườn)
🔹 <b>Phong cách thiết kế:</b> Tối giản hiện đại, chú trọng ánh sáng và không gian mở
🔹 <b>Đơn vị phát triển:</b> Tập đoàn Bất động sản hàng đầu Việt Nam
🔹 <b>Mật độ xây dựng thấp</b>, ưu tiên không gian xanh và tiện ích cộng đồng
</p>
</div>
<div style="flex: 1 1 50%; max-width: 50%; padding: 20px; text-align: center; box-sizing: border-box;">
<div class="gioithieu-image-wrapper">
<img src="/tongquan.jpg" alt="Giới thiệu" class="gioithieu-image"/>
<!-- Icon 1 -->
<div class="icon-pin" style="top: 25%; left: 40%;" onclick="showInfo(0)">
<i class="fas fa-building"></i>
</div>
<!-- Icon 2 -->
<div class="icon-pin" style="top: 75%; left: 55%;" onclick="showInfo(1)">
<i class="fas fa-swimmer"></i>
</div>
<!-- Hộp thông tin -->
<div id="infoBox" class="info-box">
<span class="info-close" onclick="hideInfo()">×</span>
<div id="infoContent">Thông tin chi tiết</div>
</div>
</div>
</div>
</section>
<div class="tienich-title-wrapper">
<div class="tienich-title-box">Vị Trí</div>
<div class="tienich-title-line"></div>
</div>
<section id="vitri" style="position: relative; width: 100%; height: 600px; background-image: url('vitri.gif'); background-size: cover; background-position: center; display: flex; align-items: center;">
<!-- Thêm link font nếu chưa có -->
<link href="https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;600&display=swap" rel="stylesheet"/>
<div class="location-box">
<h2>Kết nối tâm điểm</h2>
<p><span>05</span> phút<br/>
BV Đa Khoa Hậu Nghĩa - CS2<br/>
BV Đa Khoa Tân Tạo, TT. Đức Hòa/ Bình Chánh</p>
<p><span>10</span> phút<br/>
ĐH Tân Tạo, TT. Hậu Nghĩa</p>
<p><span>15</span> phút<br/>
BV Xuyên Á, BV Hậu Nghĩa, TT. Hậu Nghĩa</p>
<p><span>20</span> phút<br/>
Vĩnh Lộc, Chợ Đệm - Tân Tạo, QL1A</p>
<p><span>25</span> phút<br/>
Aeon Mall, BV Nhi Đồng, Củ Chi, Bến Lức</p>
<p><span>30</span> phút<br/>
Sân bay TSN, cao tốc HCM - Trung Lương,<br/>
Chợ Bình Điền, Trung tâm TP.HCM</p>
</div>
</section>
<section class="tienich-section" id="tienich">
<div class="tienich-title-wrapper">
<div class="tienich-title-box">Tiện ích</div>
<div class="tienich-title-line"></div>
</div>
<div class="tienich-container">
<div class="tienich-menu">
<div class="tienich-item" data-image="/images/congvien.jpg">Công viên trung tâm</div>
<div class="tienich-item" data-image="/images/tienich3.jpg">Hồ bơi resort</div>
<div class="tienich-item" data-image="/images/tienich3.jpg">Khu thể thao đa năng</div>
<div class="tienich-item" data-image="/images/tienich3.jpg">Trường học quốc tế</div>
<div class="tienich-item" data-image="/images/tienich3.jpg">Khu thương mại</div>
<div class="tienich-item" data-image="/images/tienich3.jpg">Bệnh viện tiêu chuẩn</div>
<div class="tienich-item" data-image="/images/tienich3.jpg">Công viên trung tâm</div>
<div class="tienich-item" data-image="/images/tienich3.jpg">Hồ bơi resort</div>
<div class="tienich-item" data-image="/images/tienich3.jpg">Khu thể thao đa năng</div>
<div class="tienich-item" data-image="/images/tienich3.jpg">Trường học quốc tế</div>
<div class="tienich-item" data-image="/images/tienich3.jpg">Khu thương mại</div>
<div class="tienich-item" data-image="/images/tienich3.jpg">Bệnh viện tiêu chuẩn</div>
</div>
<div class="tienich-image" id="tienichImage">
<img alt="Tiện ích" id="mainTienichImage" src="/images/congvien.jpg"/>
</div>
</div>
</section>
<section id="matbang" style="background-color: #084437; padding: 60px 20px; color: white; font-family: 'Lexend', sans-serif;">
<div class="tienich-title-wrapper">
<div class="tienich-title-box">Mặt bằng</div>
<div class="tienich-title-line" style="background-color: white;"></div>
</div>
<div class="matbang-tabs">
<button class="matbang-tab-button active" onclick="showMatBangTab('tab1', this)">Tầng 1-5</button>
<button class="matbang-tab-button" onclick="showMatBangTab('tab2', this)">Tầng 6-10</button>
<button class="matbang-tab-button" onclick="showMatBangTab('tab3', this)">Tầng 11-20</button>
<button class="matbang-tab-button" onclick="showMatBangTab('tab4', this)">Tầng 21-30</button>
</div>
<div class="matbang-slider-container active" id="tab1">
<button class="slide-btn prev" onclick="plusSlides(-1, 'tab1')">❮</button>
<div class="matbang-slides">
<img alt="Mặt bằng 1-5, Ảnh 1" class="slide-image" src="images/matbang1.jpg"/>
<img alt="Mặt bằng 1-5, Ảnh 2" class="slide-image" src="images/matbang2.jpg"/>
<img alt="Mặt bằng 1-5, Ảnh 3" class="slide-image" src="images/matbang3.jpg"/>
</div>
<button class="slide-btn next" onclick="plusSlides(1, 'tab1')">❯</button>
</div>
<div class="matbang-slider-container" id="tab2">
<button class="slide-btn prev" onclick="plusSlides(-1, 'tab2')">❮</button>
<div class="matbang-slides">
<img alt="Mặt bằng 6-10, Ảnh 1" class="slide-image" src="images/matbang4.jpg"/>
<img alt="Mặt bằng 6-10, Ảnh 2" class="slide-image" src="images/matbang5.jpg"/>
</div>
<button class="slide-btn next" onclick="plusSlides(1, 'tab2')">❯</button>
</div>
<div class="matbang-slider-container" id="tab3">
<button class="slide-btn prev" onclick="plusSlides(-1, 'tab3')">❮</button>
<div class="matbang-slides">
<img alt="Mặt bằng 11-20, Ảnh 1" class="slide-image" src="images/matbang6.jpg"/>
<img alt="Mặt bằng 11-20, Ảnh 2" class="slide-image" src="images/matbang7.jpg"/>
<img alt="Mặt bằng 11-20, Ảnh 3" class="slide-image" src="images/matbang8.jpg"/>
</div>
<button class="slide-btn next" onclick="plusSlides(1, 'tab3')">❯</button>
</div>
<div class="matbang-slider-container" id="tab4">
<button class="slide-btn prev" onclick="plusSlides(-1, 'tab4')">❮</button>
<div class="matbang-slides">
<img alt="Mặt bằng 21-30, Ảnh 1" class="slide-image" src="images/matbang9.jpg"/>
</div>
<button class="slide-btn next" onclick="plusSlides(1, 'tab4')">❯</button>
</div>
</section>
<section id="thuvien" style="padding: 60px 20px; background-color: #002c1f; font-family: 'Lexend', sans-serif;">
<div class="tienich-title-wrapper" style="display: flex; align-items: center; margin-bottom: 40px;">
<div class="tienich-title-box" style="background: #f1793b; color: white; padding: 8px 20px; border-radius: 6px; font-weight: bold;">Thư viện</div>
<div class="tienich-title-line" style="flex: 1; height: 2px; background: #f1793b; margin-left: 20px;"></div>
</div>
<div class="gallery-grid">
<div class="gallery-item tall"><img src="images/galery1.jpg" alt="Ảnh 1" onclick="openLightbox(this.src)"></div>
<div class="gallery-item"><img src="images/galery2.jpg" alt="Ảnh 2" onclick="openLightbox(this.src)"></div>
<div class="gallery-item wide"><img src="images/galery4.jpg" alt="Ảnh 3" onclick="openLightbox(this.src)"></div>
<div class="gallery-item"><img src="images/galery3.jpg" alt="Ảnh 4" onclick="openLightbox(this.src)"></div>
<div class="gallery-item tall"><img src="images/galery5.jpg" alt="Ảnh 5" onclick="openLightbox(this.src)"></div>
<div class="gallery-item"><img src="images/galery6.jpg" alt="Ảnh 6" onclick="openLightbox(this.src)"></div>
<div class="gallery-item"><img src="images/galery7.jpg" alt="Ảnh 7" onclick="openLightbox(this.src)"></div>
<div class="gallery-item"><img src="images/galery8.jpg" alt="Ảnh 8" onclick="openLightbox(this.src)"></div>
<div class="gallery-item"><img src="images/galery9.jpg" alt="Ảnh 9" onclick="openLightbox(this.src)"></div>
</div>
</section>
<!-- san pham dang ban -->
<section id="sanpham" class="product-section">
<h2 class="product-title">SẢN PHẨM ĐANG BÁN</h2>
<div class="product-slider-wrapper">
<button class="nav-btn prev" onclick="scrollProduct(-1)">❮</button>
<div class="product-slider" id="productSlider">
<!-- Căn hộ Studio -->
<div class="product-card">
<img src="/images/studio.png" alt="Căn hộ Studio">
<h3>CĂN HỘ STUDIO</h3>
<ul>
<li><strong>Diện tích:</strong> 34,5 m²</li>
<li><strong>Số phòng ngủ:</strong> 01</li>
<li><strong>WC:</strong> 01</li>
<li><strong>Giá bán:</strong> <span class="gia">1,7 - 1,9 tỷ</span></li>
</ul>
<button class="btn-price" onclick="openPopup()">NHẬN BÁO GIÁ</button>
</div>
<!-- Căn hộ 1PN -->
<div class="product-card">
<img src="/images/1pn.png" alt="Căn hộ 01 phòng ngủ">
<h3>CĂN HỘ 01 PHÒNG NGỦ</h3>
<ul>
<li><strong>Diện tích:</strong> 38 m²</li>
<li><strong>Số phòng ngủ:</strong> 01</li>
<li><strong>WC:</strong> 01</li>
<li><strong>Giá bán:</strong> <span class="gia">1,8 tỷ - 2 tỷ</span></li>
</ul>
<button class="btn-price" onclick="openPopup()">NHẬN BÁO GIÁ</button>
</div>
<!-- Căn hộ 2PN -->
<div class="product-card">
<img src="/images/2pn.png" alt="Căn hộ 02 phòng ngủ">
<h3>CĂN HỘ 02 PHÒNG NGỦ</h3>
<ul>
<li><strong>Diện tích:</strong> 86 - 96 m²</li>
<li><strong>Số phòng ngủ:</strong> 02</li>
<li><strong>WC:</strong> 02</li>
<li><strong>Giá bán:</strong> <span class="gia">3,6 tỷ - 5,6 tỷ</span></li>
</ul>
<button class="btn-price" onclick="openPopup()">NHẬN BÁO GIÁ</button>
</div>
<!-- Căn hộ 3PN -->
<div class="product-card">
<img src="/images/3pn.png" alt="Căn hộ 03 phòng ngủ">
<h3>CĂN HỘ 03 PHÒNG NGỦ</h3>
<ul>
<li><strong>Diện tích:</strong> 97 - 115 m²</li>
<li><strong>Số phòng ngủ:</strong> 03</li>
<li><strong>WC:</strong> 02</li>
<li><strong>Giá bán:</strong> <span class="gia">4,5 tỷ - 6,9 tỷ</span></li>
</ul>
<button class="btn-price" onclick="openPopup()">NHẬN BÁO GIÁ</button>
</div>
</div>
<button class="nav-btn next" onclick="scrollProduct(1)">❯</button>
</div>
</section>
<!-- end spdb-->
<section id="tintuc" style="padding: 60px 20px; background-color: #fff; font-family: 'Lexend', sans-serif;">
<div class="tienich-title-wrapper" style="display: flex; align-items: center; margin-bottom: 40px;">
<div class="tienich-title-box" style="background: #f1793b; color: white; padding: 8px 20px; border-radius: 6px; font-weight: bold;">Tin tức</div>
<div class="tienich-title-line" style="flex: 1; height: 2px; background: #f1793b; margin-left: 20px;"></div>
</div>
<div class="news-grid">
<div class="news-item">
<img alt="Tin tức 1" src="images/tintuc1.jpg"/>
<h3>Thắng Lợi Group, An Cường, Central liên danh phát triển căn hộ Đức Hòa</h3>
<p>The Win City tại Đức Hòa, quy mô hơn 13 ha là dự án căn hộ cao tầng đầu tiên do liên danh Thắng Lợi Group, gỗ An Cường và Central bắt tay phát triển..</p>
<a class="btn-readmore" href="#" target="_blank">Xem thêm</a>
</div>
<div class="news-item">
<img alt="Tin tức 2" src="images/tintuc2.jpg"/>
<h3>The Win City được báo chí nhắc đến</h3>
<p>Nhiều trang báo lớn đưa tin về tiềm năng và quy hoạch bài bản của dự án the Win City tại Đức Hòa chỉ cách thành phố Hồ Chí Minh 500m trên đường tỉnh lộ 10</p>
<a class="btn-readmore" href="#" target="_blank">Xem thêm</a>
</div>
<div class="news-item">
<img alt="Tin tức 3" src="images/tintuc3.jpg"/>
<h3>Tiến độ thi công dự án The Win City</h3>
<p>Tiến độ thi công dự án The Win City đang được triển khai khẩn trương đúng kế hoạch. Hiện tại, các hạng mục hạ tầng chính như đường nội khu, hệ thống điện nước, cây xanh đã hoàn thiện cơ bản. Một số phân khu căn hộ và nhà phố đang thi công phần móng và tầng trệt.</p>
<a class="btn-readmore" href="#" target="_blank">Xem thêm</a>
</div>
</div>
</section>
<section id="doitac" style="padding: 60px 20px; background-color: #f7f7f7; font-family: 'Lexend', sans-serif;">
<div class="tienich-title-wrapper" style="display: flex; align-items: center; margin-bottom: 40px;">
<div class="tienich-title-box" style="background: #f1793b; color: white; padding: 8px 20px; border-radius: 6px; font-weight: bold;">Đối tác chiến lược</div>
<div class="tienich-title-line" style="flex: 1; height: 2px; background: #f1793b; margin-left: 20px;"></div>
</div>
<div class="partner-logos">
<div class="partner-slider">
<img alt="Đối tác 1" src="/logo1.png"/>
<img alt="Đối tác 2" src="/logo2.png"/>
<img alt="Đối tác 3" src="/logo3.png"/>
<img alt="Đối tác 4" src="/logo4.png"/>
<img alt="Đối tác 5" src="/logo5.png"/>
<img alt="Đối tác 6" src="/logo6.png"/>
</div>
</div>
</section >
<footer id="lienhe" style="background-image: url('/images/footer-bg.png'); /* thay bằng đường dẫn hình ảnh của bạn */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: white; /* đảm bảo text vẫn rõ */
padding: 60px 20px;
font-family: 'Lexend', sans-serif;">
<div class="footer-container" style="display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px;">
<div style="flex: 1 1 300px;">
<h3 style="margin-bottom: 12px;">CÔNG TY CỔ PHẦN THE WIN CITY</h3>
<p>Địa chỉ: 123 Đường Số 1, Huyện Đức Hòa, Long An</p>
<p>Điện thoại: 0909 123 456</p>
<p>Email: info@thewincity.vn</p>
<div style="margin-top: 20px; display: flex; gap: 16px;">
<a href="#" target="_blank"><i class="fab fa-facebook-f" style="color:white; font-size: 20px;"></i></a>
<a href="#" target="_blank"><i class="fab fa-youtube" style="color:white; font-size: 20px;"></i></a>
<a href="#" target="_blank"><i class="fab fa-tiktok" style="color:white; font-size: 20px;"></i></a>
<a href="#" target="_blank"><i class="fab fa-instagram" style="color:white; font-size: 20px;"></i></a>
</div>
</div>
<div style="flex: 1 1 300px;">
<h3 style="margin-bottom: 12px;">Đăng ký nhận thông tin</h3>
<div style="background: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); color: black;">
<form id="footerForm">
<input name="name" placeholder="Họ và tên" required="" style="width: 100%; padding: 10px; margin-bottom: 10px; border-radius: 6px; border: 1px solid #ccc;" type="text"/>
<input name="phone" pattern="^0[0-9]{9}$" placeholder="Số điện thoại" required="" style="width: 100%; padding: 10px; margin-bottom: 10px; border-radius: 6px; border: 1px solid #ccc;" title="Nhập số hợp lệ 10 số bắt đầu bằng 0" type="tel"/>
<!--<input name="email" placeholder="Email" required="" style="width: 100%; padding: 10px; margin-bottom: 10px; border-radius: 6px; border: 1px solid #ccc;" type="email"/> -->
<select name="room" required="" style="width: 100%; padding: 10px; margin-bottom: 12px; border-radius: 6px; border: 1px solid #ccc;">
<option disabled="" selected="" value="">Chọn loại căn hộ</option>
<option value="1 phòng ngủ">1 phòng ngủ</option>
<option value="2 phòng ngủ">2 phòng ngủ</option>
<option value="3 phòng ngủ">3 phòng ngủ</option>
<option value="Studio">Studio</option>
</select>
<button style="width: 100%; padding: 12px; border: none; background-color: #f1793b; color: white; font-weight: bold; border-radius: 6px;" type="submit">Gửi</button>
</form>
</div>
</div>
</div>
</footer>
<button class="btn-datlich" onclick="openPopup()">
<span class="ripple"></span>
<i class="fa-solid fa-clipboard icon"></i>
<span class="text">Nhận Thông Tin</span>
</button>
<a href="tel:0943112117" class="btn-hotline">
<span class="ripple"></span>
<i class="fa-solid fa-phone-alt icon"></i> <span class="text">GỌI Hotline</span>
</a>
<noscript>
<iframe height="0" src="https://www.googletagmanager.com/ns.html?id=GTM-WM7X9667" style="display:none;visibility:hidden" width="0"></iframe>
</noscript>
<div class="popup-overlay" id="lightbox">
<span style="position: absolute; top: 20px; right: 30px; font-size: 40px; color: white; cursor: pointer;">×</span>
<img id="lightbox-img" style="max-width: 90%; max-height: 90%; object-fit: contain;"/>
</div>
<div class="popup-overlay" id="popupForm">
<div class="popup-content">
<span class="popup-close" onclick="closePopup()">×</span>
<h3>ĐĂNG KÝ NHẬN THÔNG TIN TỪ CHỦ ĐẦU TƯ</h3>
<form id="contactPopupForm">
<input id="popupName" name="name" placeholder="Họ và tên" required="" type="text"/>
<input id="popupPhone" name="phone" pattern="^0[0-9]{9}$" placeholder="Số điện thoại" required="" title="Vui lòng nhập đúng định dạng 10 số, bắt đầu bằng 0" type="tel"/>
<!--<input id="popupEmail" name="email" placeholder="Email" required="" type="email"/> -->
<select id="popupRoom" name="room" required="">
<option disabled="" selected="" value="">Chọn loại căn hộ</option>
<option value="1 phòng ngủ">1 phòng ngủ</option>
<option value="2 phòng ngủ">2 phòng ngủ</option>
<option value="3 phòng ngủ">3 phòng ngủ</option>
<option value="Studio">Studio</option>
</select>
<button type="submit">Gửi</button>
</form>
</div>
</div>
<script>
function scrollProduct(direction) {
const container = document.getElementById("productSlider");
const card = container.querySelector(".product-card");
const scrollAmount = card.offsetWidth + 16;
container.scrollBy({ left: direction * scrollAmount, behavior: 'smooth' });
}
</script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const heroSlidesContainer = document.getElementById('slidesContainer');
const heroSlides = document.querySelectorAll('.hero-banner .slide');
const heroThumbs = document.querySelectorAll('.hero-thumbs .thumb');
let heroSlideIndex = 0;
let heroAutoSlideInterval;
function updateHeroImages() {
const isMobile = window.innerWidth <= 768;
heroSlides.forEach(slide => {
const bg = slide.querySelector('.slide-bg');
const mobile = slide.getAttribute('data-mobile');
const desktop = slide.getAttribute('data-desktop');
const url = isMobile ? mobile : desktop;
bg.style.backgroundImage = `url('${url}')`;
});
}
function heroShowSlide(index) {
const total = heroSlides.length;
if (index >= total) index = 0;
if (index < 0) index = total - 1;
heroSlideIndex = index;
heroSlidesContainer.style.transform = `translateX(-${heroSlideIndex * (100 / total)}%)`;
heroThumbs.forEach((thumb, i) => {
thumb.classList.toggle('active', i === index);
});
updateHeroImages();
}
function heroPlusSlides(n) {
heroResetAutoSlide();
heroShowSlide(heroSlideIndex + n);
}
function heroCurrentSlide(n) {
heroResetAutoSlide();
heroShowSlide(n);
}
function heroStartAutoSlide() {
heroAutoSlideInterval = setInterval(() => {
heroShowSlide(heroSlideIndex + 1);
}, 8000);
}
function heroResetAutoSlide() {
clearInterval(heroAutoSlideInterval);
heroStartAutoSlide();
}
// ✅ Setup layout chính xác
const total = heroSlides.length;
heroSlidesContainer.style.width = `${total * 100}%`;
heroSlides.forEach(slide => {
slide.style.width = `${100 / total}%`;
});
// ✅ Khởi động
heroShowSlide(heroSlideIndex);
heroStartAutoSlide();
window.addEventListener('resize', updateHeroImages);
// ✅ Gắn vào global để gọi từ HTML onclick
window.heroPlusSlides = heroPlusSlides;
window.heroCurrentSlide = heroCurrentSlide;
});
const infoBox = document.getElementById('infoBox');
const infoContent = document.getElementById('infoContent');
const infoData = [
" 💎 Tổng quan phân khu Celesta.: <br>- LOẠI HÌNH: Căn hộ chung cư cao tầng <br>- CHIỀU CAO: 15–20 tầng<br>- DIỆN TÍCH CĂN HỘ : Từ 45m² – 120m² (1PN – 3PN, có căn hộ Dual Key & căn hộ sân ",
"🏊 28 tiện ích nội khu đa dạng."
];
function showInfo(index) {
infoContent.innerHTML = infoData[index]; // dùng innerHTML để hỗ trợ <br>
infoBox.style.display = 'block';
}
function hideInfo() {
infoBox.style.display = 'none';
}
</script>
<script>
// General script URL for Google Sheets
const SCRIPT_URL = 'https://script.google.com/macros/s/AKfycbzhuh8KoVQnI3nd3SAVN9I4dLXl4OREs_DLMw76VdwWaEONNxHA5ML8m8ksqhh6MuW-/exec';
// Function to handle form submission
async function handleFormSubmission(formElement) {
const phoneInput = formElement.querySelector('input[name="phone"]');
//const emailInput = formElement.querySelector('input[name="email"]');
const phone = phoneInput ? phoneInput.value.trim() : '';
//const email = emailInput ? emailInput.value.trim() : '';
const phonePattern = /^0\d{9}$/;
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (phoneInput && !phonePattern.test(phone)) {
alert("Số điện thoại không hợp lệ. Vui lòng nhập 10 số và bắt đầu bằng 0.");
return;
}
//if (emailInput && !emailPattern.test(email)) {
// alert("Email không hợp lệ. Vui lòng kiểm tra lại.");
// return;
// }
const formData = new FormData(formElement);
try {
const response = await fetch(SCRIPT_URL, {
method: 'POST',
body: formData
});
const result = await response.text();
alert("Gửi thành công!");
formElement.reset();
if (formElement.id === 'contactPopupForm') {
closePopup();
}
} catch (error) {
alert("Gửi thất bại!");
console.error("Lỗi:", error);
}
}
// Event listener for the popup form
document.getElementById('contactPopupForm').addEventListener('submit', async function(e) {
e.preventDefault();
await handleFormSubmission(this);
});
// Event listener for the footer form
document.getElementById('footerForm').addEventListener('submit', async function(e) {
e.preventDefault();
await handleFormSubmission(this);
});
function toggleMobileMenu() {
const menu = document.getElementById('mobileMenu');
const isOpen = menu.style.right === '0px';
menu.style.right = isOpen ? '-100%' : '0';
}
function openPopup() {
document.getElementById("popupForm").style.display = "flex";
}
function closePopup() {
document.getElementById("popupForm").style.display = "none";
}
const tienichItems = document.querySelectorAll('.tienich-item');
const tienichImage = document.getElementById('mainTienichImage');
tienichItems.forEach(item => {
item.addEventListener('mouseenter', () => {
const imgSrc = item.getAttribute('data-image');
tienichImage.setAttribute('src', imgSrc);
});
});
// Mặt bằng Slider with Tabs
const slideIndexes = {
'tab1': 0,
'tab2': 0,
'tab3': 0,
'tab4': 0
};
function plusSlides(n, tabId) {
const slidesContainer = document.querySelector(`#${tabId} .matbang-slides`);
const slides = slidesContainer.children;
const total = slides.length;
slideIndexes[tabId] = (slideIndexes[tabId] + n + total) % total;
slidesContainer.style.transform = 'translateX(' + (-slideIndexes[tabId] * 100) + '%)';
}
function showMatBangTab(tabId, clickedButton) {
// Hide all slider containers
document.querySelectorAll('.matbang-slider-container').forEach(container => {
container.classList.remove('active');
});
// Deactivate all tab buttons
document.querySelectorAll('.matbang-tab-button').forEach(button => {
button.classList.remove('active');
});
// Show the selected slider container
document.getElementById(tabId).classList.add('active');
// Activate the clicked tab button
clickedButton.classList.add('active');
// Reset the slide index for the newly active tab to 0
slideIndexes[tabId] = 0;
document.querySelector(`#${tabId} .matbang-slides`).style.transform = 'translateX(0%)';
}
// Lightbox functions
function openLightbox(src) {
document.getElementById('lightbox-img').src = src;
document.getElementById('lightbox').style.display = 'flex';
}
document.getElementById('lightbox').addEventListener('click', function () {
this.style.display = 'none';
});
</script>
</body>
</html>