*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#17233f;background:#fff}
.container{width:min(1200px,92%);margin:auto}

.site-header{
height:86px;
background:#fff;
position:sticky;
top:0;
z-index:20;
box-shadow:0 2px 18px #0b4fc21a
}

.nav{
height:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:25px
}

.logo{
color:#064fd1;
text-decoration:none;
font-family:Georgia,serif;
font-size:25px;
line-height:1
}

.logo b{
display:block;
font:700 12px Arial;
text-align:center;
letter-spacing:1px;
margin-top:5px
}

.nav nav{
display:flex;
gap:34px
}

.nav nav a{
color:#17233f;
text-decoration:none;
font-size:14px;
font-weight:600;
padding:32px 0
}

.nav nav a.active,
.nav nav a:hover{
color:#0757dc;
border-bottom:3px solid #0757dc
}

.hotline{
border:1px solid #e4e8f0;
border-radius:35px;
padding:9px 16px;
color:#0757dc;
text-decoration:none;
box-shadow:0 4px 15px #0a55cc12
}

.hotline strong{display:block}
.hotline small{color:#53627c}

.hero{
height:410px;
position:relative;
overflow:hidden
}

.hero-bg{
position:absolute;
inset:0;
background:linear-gradient(90deg,#eef7ff 0%,#d9efff 34%,#7fc2ed 60%,#cceaff 100%)
}

.hero-bg:after{
content:"";
position:absolute;
right:-5%;
top:8%;
width:65%;
height:95%;
background:linear-gradient(140deg,#fff,#b9dfff 35%,#77b7df 36%,#eaf8ff 37%,#fff 60%);
opacity:.9;
transform:skewX(-12deg);
filter:blur(1px)
}

.hero-content{
position:relative;
height:100%;
display:flex;
align-items:center
}

.hero-copy{max-width:650px}

.script{
font:italic 38px Georgia,serif;
color:#0757dc;
margin-bottom:2px
}

/* ĐÃ SỬA: TOÀN BỘ TIÊU ĐỀ NHÀ VINHOMES HÓC MÔN MÀU XANH */
.hero h1{
font-size:55px;
line-height:1;
margin:0;
color:#0757dc;
letter-spacing:-2px
}

.hero h1 span{color:#0757dc}

.hero p{
font-size:17px;
line-height:1.7
}

.hero-points{
display:flex;
gap:22px;
background:#ffffffeb;
padding:14px 18px;
border-radius:30px;
width:max-content
}

.hero-points div{
display:grid;
grid-template-columns:34px 1fr;
column-gap:7px
}

.hero-points i{
grid-row:span 2;
color:#0757dc;
font-size:26px;
font-style:normal
}

.hero-points b{font-size:13px}
.hero-points small{font-size:10px;color:#65718a}

.stats{
margin-top:-20px;
position:relative;
z-index:4;
background:#fff;
border-radius:18px;
box-shadow:0 8px 30px #143b7318;
display:grid;
grid-template-columns:repeat(4,1fr);
padding:20px
}

.stats div{
display:grid;
grid-template-columns:50px 1fr;
align-items:center;
padding:4px 25px;
border-right:1px solid #e7ebf2
}

.stats div:last-child{border:0}

.stats i{
grid-row:span 2;
color:#0757dc;
font-size:27px
}

.stats strong{
font-size:26px;
color:#0647b8
}

.stats span{font-size:13px}

.section{
padding:65px 0;
display:grid;
grid-template-columns:1fr 1.55fr;
gap:60px;
align-items:center
}

.overview-text label,
.contact label{
font-weight:800;
color:#0757dc;
font-size:14px
}

.overview-text h2,
.section-title h2{
font-size:27px;
color:#0647b8
}

.overview-text p{
line-height:1.7;
color:#53627c
}

.overview-text ul{
padding:0;
list-style:none;
line-height:2.2;
font-size:14px
}

.overview-text li:before{
content:"✓";
color:#0757dc;
font-weight:bold;
margin-right:9px
}

.btn-outline,
.btn-primary{
display:inline-block;
border:1px solid #0757dc;
border-radius:7px;
padding:11px 18px;
background:#fff;
color:#0757dc;
font-weight:700;
text-decoration:none
}

.overview-image{
height:290px;
border-radius:18px;
background:linear-gradient(145deg,#b9e2ff,#4a9edc 50%,#d7f1ff);
position:relative;
overflow:hidden
}

.overview-image:after{
content:"";
position:absolute;
inset:18% -10%;
background:repeating-linear-gradient(15deg,#ffffff88 0 8px,transparent 8px 25px);
transform:rotate(-8deg)
}

.play{
position:absolute;
z-index:2;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:68px;
height:68px;
border-radius:50%;
background:#fff;
color:#0757dc;
display:grid;
place-items:center;
font-size:25px;
box-shadow:0 5px 20px #16467b44
}

.properties{
display:block;
padding-top:15px
}

.section-title{
display:flex;
align-items:center;
justify-content:center;
gap:16px;
margin:10px 0 25px
}

.section-title span{
height:1px;
width:55px;
background:#4b8be7
}

.section-title h2{font-size:22px}

.cards{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:12px
}

.card{
border:1px solid #e4e9f1;
border-radius:13px;
overflow:hidden;
background:#fff;
box-shadow:0 5px 18px #143b7310
}

.property-img{
height:135px;
position:relative;
background:linear-gradient(145deg,#dcefff,#80bce8 50%,#f6fbff)
}

.property-img:after{
content:"";
position:absolute;
left:20%;
right:5%;
bottom:15%;
height:45%;
background:linear-gradient(160deg,#fff,#d6e5f3);
clip-path:polygon(0 100%,15% 45%,30% 65%,48% 25%,70% 60%,100% 0,100% 100%)
}

.property-img b,
.property-img em{
position:relative;
z-index:2;
font-size:9px;
background:#fff;
padding:6px;
border-radius:5px;
margin:7px;
display:inline-block
}

.property-img em{
float:right;
background:#0757dc;
color:#fff;
font-style:normal
}

.card h3,
.card p,
.card small,
.card>strong{
margin-left:12px;
margin-right:12px
}

.card h3{
font-size:14px;
margin-bottom:7px
}

.card p,
.card small{
display:block;
font-size:10px;
color:#65718a
}

.card>strong{
display:block;
color:#0757dc;
font-size:17px;
margin-top:10px;
margin-bottom:14px
}

.properties>.btn-primary{
display:block;
margin:20px auto
}

.btn-primary{
background:#0757dc;
color:#fff
}

.why{
background:#f3f8ff;
padding:28px 0
}

.why-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:10px
}

.why-grid div{
padding:18px;
text-align:center;
color:#0757dc;
font-size:26px
}

.why-grid b,
.why-grid small{
display:block;
color:#17233f;
font-size:13px;
margin-top:8px
}

.why-grid small{
color:#65718a;
font-size:11px
}

.contact{
margin:35px auto;
padding:28px;
background:#fff;
border:1px solid #e8edf5;
border-radius:16px;
box-shadow:0 5px 22px #123d7510;
display:grid;
grid-template-columns:1.3fr 1fr .7fr;
gap:30px
}

.contact p{
font-size:12px;
line-height:1.7;
color:#53627c
}

.subscribe{display:flex}

.subscribe input{
flex:1;
border:1px solid #dce3ee;
padding:11px
}

.subscribe button{
border:0;
background:#0757dc;
color:#fff;
padding:0 15px;
font-weight:700
}

.qr{
width:95px;
height:95px;
border:8px solid #111;
display:grid;
place-items:center;
font-size:12px;
font-weight:800;
background:repeating-linear-gradient(45deg,#fff 0 4px,#111 4px 7px)
}

footer{
background:#f5f9ff;
border-top:1px solid #e2e9f3
}

.footer-grid{
padding:35px 0;
display:grid;
grid-template-columns:2fr 1fr 1fr 1fr;
gap:30px
}

.footer-grid>div:not(:first-child){
display:flex;
flex-direction:column;
gap:8px;
font-size:11px;
color:#65718a
}

.footer-grid b{
color:#0647b8;
font-size:12px
}

.copyright{
text-align:center;
padding:12px;
border-top:1px solid #dfe7f2;
font-size:11px;
color:#65718a
}

.ai-fab{
position:fixed;
right:22px;
bottom:24px;
z-index:30;
border:0;
background:#0757dc;
color:#fff;
width:65px;
height:65px;
border-radius:50%;
font-size:25px;
box-shadow:0 8px 25px #0757dc55
}

.ai-fab small{
display:block;
font-size:9px
}

.ai-chat{
position:fixed;
right:22px;
bottom:100px;
width:330px;
background:#fff;
border:1px solid #dce5f2;
border-radius:15px;
box-shadow:0 12px 40px #183e7528;
z-index:29;
overflow:hidden;
display:none
}

.ai-chat.open{display:block}

.ai-head{
background:#0757dc;
color:#fff;
padding:14px;
font-weight:700
}

.ai-head button{
float:right;
background:none;
border:0;
color:#fff;
font-size:20px
}

.ai-body{padding:12px}

.ai-body p{
font-size:12px;
line-height:1.5
}

.ai-body>button{
display:block;
border:1px solid #d9e4f3;
background:#fff;
color:#0757dc;
border-radius:20px;
padding:7px 10px;
margin:7px 0;
font-size:11px
}

.ai-input{
display:flex;
margin-top:12px
}

.ai-input input{
flex:1;
padding:10px;
border:1px solid #dce3ee
}

.ai-input button{
border:0;
background:#0757dc;
color:#fff;
width:45px
}

@media(max-width:900px){

.nav nav{display:none}

.section{
grid-template-columns:1fr
}

.cards{
grid-template-columns:repeat(2,1fr)
}

.why-grid{
grid-template-columns:repeat(2,1fr)
}

.contact,
.footer-grid{
grid-template-columns:1fr
}

.hero h1{
font-size:42px
}

.hero-points{
max-width:95%
}

.stats{
grid-template-columns:repeat(2,1fr)
}

.stats div:nth-child(2){
border:0
}

}

@media(max-width:560px){

.hotline{display:none}

.hero{
height:450px
}

.hero-copy{
padding-top:30px
}

.hero-points{
display:none
}

.cards{
grid-template-columns:1fr
}

.stats{
grid-template-columns:1fr
}

.stats div{
border:0;
border-bottom:1px solid #eee
}

.ai-chat{
width:calc(100% - 30px);
right:15px
}

.ai-fab{
right:15px
}

}
<!doctype html>
<html lang="vi">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Vinhomes Hóc Môn | Nhà bán Vinhomes Hóc Môn</title>
  <meta name="description" content="Website chuyên bán nhà Vinhomes Hóc Môn – nhà phố, biệt thự, shophouse, liền kề.">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="site-header">
    <div class="container nav">
      <a class="logo" href="#"><span>VINHOMES</span><b>HÓC MÔN</b></a>
      <nav>
        <a class="active" href="#home">Trang chủ</a>
        <a href="#gioi-thieu">Giới thiệu</a>
        <a href="#nha-ban">Nhà bán</a>
        <a href="#tien-ich">Tiện ích</a>
        <a href="#tin-tuc">Tin tức</a>
        <a href="#lien-he">Liên hệ</a>
      </nav>
      <a class="hotline" href="tel:0996616667">☎ <strong>099 661 6667</strong><small>Gọi / Zalo 24/7</small></a>
    </div>
  </header>

  <main id="home">
    <section class="hero">
      <div class="hero-bg"></div>
      <div class="container hero-content">
        <div class="hero-copy">
          <div class="script">Chuyên bán</div>
          <h1>NHÀ VINHOMES<br><span>HÓC MÔN</span></h1>
          <p>Đại đô thị đẳng cấp phía Tây Bắc TP.HCM<br>Sống xanh – Tiện nghi – Đầu tư bền vững</p>
          <div class="hero-points">
            <div><i>⌖</i><b>Vị trí chiến lược</b><small>Kết nối trung tâm TP.HCM</small></div>
            <div><i>✧</i><b>Tiện ích đẳng cấp</b><small>Tiêu chuẩn Vinhomes</small></div>
            <div><i>✓</i><b>Pháp lý minh bạch</b><small>Sổ hồng lâu dài</small></div>
          </div>
        </div>
      </div>
    </section>

    <section class="stats container">
      <div><i>⌂</i><strong>1000+</strong><span>Sản phẩm</span></div>
      <div><i>♙</i><strong>95%</strong><span>Khách hàng hài lòng</span></div>
      <div><i>◉</i><strong>24/7</strong><span>Hỗ trợ tận tâm</span></div>
      <div><i>▣</i><strong>0%</strong><span>Phí môi giới</span></div>
    </section>

    <section class="section container" id="gioi-thieu">
      <div class="overview-text">
        <label>TỔNG QUAN DỰ ÁN</label>
        <h2>VINHOMES HÓC MÔN</h2>
        <p>Không gian sống hiện đại, quy hoạch đồng bộ và hệ sinh thái tiện ích all-in-one.</p>
        <ul>
          <li>Quy mô: ~900ha</li>
          <li>Vị trí: Hóc Môn, TP.HCM</li>
          <li>Chủ đầu tư: Vinhomes – Tập đoàn Vingroup</li>
          <li>Loại hình: Nhà phố, Biệt thự, Shophouse, Liền kề</li>
        </ul>
        <a class="btn-outline" href="#nha-ban">XEM CHI TIẾT DỰ ÁN</a>
      </div>
      <div class="overview-image"><div class="play">▶</div></div>
    </section>

    <section class="section properties" id="nha-ban">
      <div class="section-title"><span></span><h2>NHÀ BÁN NỔI BẬT</h2><span></span></div>
      <div class="cards">
        <article class="card"><div class="property-img img1"><b>NHÀ PHỐ</b><em>PHÂN KHU A</em></div><h3>Nhà phố liền kề</h3><p>5x20m | 1 trệt 3 lầu</p><small>Phân khu A – Vinhomes Hóc Môn</small><strong>6.8 tỷ</strong></article>
        <article class="card"><div class="property-img img2"><b>BIỆT THỰ</b><em>PHÂN KHU B</em></div><h3>Biệt thự song lập</h3><p>10x20m | 1 trệt 2 lầu</p><small>Phân khu B – Vinhomes Hóc Môn</small><strong>12.5 tỷ</strong></article>
        <article class="card"><div class="property-img img3"><b>SHOPHOUSE</b><em>PHÂN KHU C</em></div><h3>Shophouse</h3><p>6x20m | 1 trệt 4 lầu</p><small>Phân khu C – Vinhomes Hóc Môn</small><strong>9.2 tỷ</strong></article>
        <article class="card"><div class="property-img img4"><b>LIỀN KỀ</b><em>PHÂN KHU A</em></div><h3>Nhà liền kề</h3><p>5x18m | 1 trệt 3 lầu</p><small>Phân khu A – Vinhomes Hóc Môn</small><strong>5.9 tỷ</strong></article>
        <article class="card"><div class="property-img img5"><b>BIỆT THỰ</b><em>PHÂN KHU B</em></div><h3>Biệt thự đơn lập</h3><p>15x20m | 1 trệt 2 lầu</p><small>Phân khu B – Vinhomes Hóc Môn</small><strong>18.9 tỷ</strong></article>
      </div>
      <button class="btn-primary">XEM TẤT CẢ SẢN PHẨM</button>
    </section>

    <section class="why" id="tien-ich">
      <div class="container">
        <div class="section-title"><span></span><h2>VÌ SAO CHỌN CHÚNG TÔI?</h2><span></span></div>
        <div class="why-grid">
          <div>🛡️ <b>Sản phẩm thật – Giá tốt</b><small>Cam kết thông tin chính xác</small></div>
          <div>♙ <b>Tư vấn chuyên sâu</b><small>Đội ngũ am hiểu dự án</small></div>
          <div>◉ <b>Hỗ trợ xem nhà 24/7</b><small>Xem nhà thực tế miễn phí</small></div>
          <div>▣ <b>Hỗ trợ pháp lý</b><small>Hỗ trợ thủ tục nhanh</small></div>
        </div>
      </div>
    </section>

    <section class="contact container" id="lien-he">
      <div><label>NHẬN THÔNG TIN MỚI NHẤT</label><p>Nhận bảng hàng, chính sách và ưu đãi mới nhất.</p><div class="subscribe"><input placeholder="Nhập email của bạn"><button>ĐĂNG KÝ NGAY</button></div></div>
      <div><label>KẾT NỐI VỚI CHÚNG TÔI</label><p>☎ <b>099 661 6667</b> – Gọi / Zalo 24/7</p><p>✉ info@vinhomeshocmon.vn</p><p>⌖ Hóc Môn, TP. Hồ Chí Minh</p></div>
      <div><label>KẾT NỐI ZALO NGAY</label><div class="qr">ZALO<br>QR</div></div>
    </section>
  </main>

  <footer id="tin-tuc">
    <div class="container footer-grid">
      <div class="logo">VINHOMES <b>HÓC MÔN</b></div>
      <div><b>DANH MỤC</b><span>Giới thiệu</span><span>Nhà bán</span><span>Tiện ích</span><span>Liên hệ</span></div>
      <div><b>LOẠI HÌNH NHÀ</b><span>Nhà phố</span><span>Biệt thự</span><span>Shophouse</span><span>Liền kề</span></div>
      <div><b>KẾT NỐI</b><span>Facebook</span><span>YouTube</span><span>TikTok</span></div>
    </div>
    <div class="copyright">© 2026 Vinhomes Hóc Môn. All rights reserved.</div>
  </footer>

  <div class="ai-chat" id="aiChat">
    <div class="ai-head">🤖 Trợ lý AI Vinhomes <button onclick="toggleAI()">×</button></div>
    <div class="ai-body">
      <p>Xin chào! Tôi là trợ lý AI của Vinhomes Hóc Môn. Tôi có thể giúp gì cho bạn?</p>
      <button>Giá bán các phân khu</button><button>Tiện ích dự án</button><button>Chính sách bán hàng</button><button>Hỗ trợ xem nhà</button>
      <div class="ai-input"><input placeholder="Nhập tin nhắn..."><button>➤</button></div>
    </div>
  </div>
  <button class="ai-fab" onclick="toggleAI()">🤖<small>AI</small></button>
  <script src="script.js"></script>
</body>
</html>