/* ==========================================================================
   Bố cục riêng của từng khối nội dung trên landing page (index.html)
   ========================================================================== */

/* ===== HEADER ===== */
header.site{position:sticky;top:0;z-index:60;background:var(--green-900);box-shadow:0 6px 24px -10px rgba(0,0,0,.35)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:10px 24px;max-width:var(--maxw);margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand img{height:46px;width:auto;border-radius:6px}
.navlinks{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.navlinks a{color:#f2efe6;font-size:.86rem;font-weight:600;letter-spacing:.02em;white-space:nowrap;padding:6px 2px;border-bottom:2px solid transparent}
.navlinks a:hover{border-color:var(--gold)}
.navlinks a.hot{color:var(--amber)}
.navcta{display:flex;align-items:center;gap:12px;flex-shrink:0}
.phonepill{display:flex;align-items:center;gap:8px;color:#fff;font-weight:700;font-size:.88rem;white-space:nowrap}
.phonepill svg{width:16px;height:16px;fill:var(--gold)}
.navtoggle{display:none;background:none;border:1px solid rgba(255,255,255,.4);color:#fff;border-radius:8px;padding:8px 10px;cursor:pointer}
@media (max-width:980px){
  .navlinks{position:absolute;top:100%;left:0;right:0;background:var(--green-900);flex-direction:column;align-items:flex-start;padding:6px 24px 18px;gap:4px;display:none}
  .navlinks.open{display:flex}
  .navlinks a{width:100%;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .navtoggle{display:inline-flex}
  .phonepill span{display:none}
}

/* ===== HERO ===== */
.hero{position:relative;min-height:92vh;display:flex;align-items:flex-end;color:#fff;background:#012219}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center}
.hero .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,25,18,.35) 0%,rgba(1,25,18,.55) 45%,rgba(1,25,18,.94) 100%)}
.hero-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:64px 24px 56px;width:100%}
.hero-tag{display:inline-block;padding:6px 14px;border:1px solid rgba(255,255,255,.4);border-radius:999px;font-size:.72rem;letter-spacing:.16em;font-weight:700;text-transform:uppercase;margin-bottom:22px;color:#f4ead0}
.hero h1{color:#fff;font-size:clamp(2rem,5vw,3.6rem);max-width:820px;font-weight:600}
.hero h1 em{font-style:italic;color:var(--gold)}
.hero p.lead{max-width:620px;color:#e9e6da;font-size:1.05rem;margin-bottom:30px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:40px}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid rgba(255,255,255,.22);padding-top:24px}
.hero-stats div{padding-right:16px}
.hero-stats b{display:block;font-family:'Playfair Display',serif;font-size:clamp(1.2rem,2.4vw,1.7rem);color:var(--gold)}
.hero-stats span{font-size:.76rem;color:#d8d4c6;letter-spacing:.03em}
@media (max-width:720px){.hero-stats{grid-template-columns:repeat(2,1fr);row-gap:18px}}

/* ===== OVERVIEW (Tổng quan) ===== */
.overview-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.overview-grid img{border-radius:var(--radius);box-shadow:var(--shadow)}
.specs{margin-top:26px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--paper)}
.specs .row{display:flex;justify-content:space-between;gap:12px;padding:13px 18px;font-size:.92rem;border-bottom:1px solid var(--line)}
.specs .row:last-child{border-bottom:none}
.specs .row b{color:var(--green-900);font-weight:700;text-align:right}
.specs .row span{color:var(--ink-soft)}
@media (max-width:900px){.overview-grid{grid-template-columns:1fr}}

/* ===== LOCATION (Vị trí) ===== */
.section.alt{background:var(--green-050)}
.loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.loc-grid img{border-radius:var(--radius);box-shadow:var(--shadow)}
.loc-list{list-style:none;margin:22px 0 30px;padding:0;display:flex;flex-direction:column;gap:14px}
.loc-list li{display:flex;gap:14px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.loc-list .t{background:var(--green-900);color:var(--gold);font-weight:800;font-size:.78rem;border-radius:999px;padding:6px 11px;flex-shrink:0}
@media (max-width:900px){.loc-grid{grid-template-columns:1fr}}

/* ===== AMENITIES (Tiện ích) ===== */
.amenity-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.amenity-card{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow);cursor:pointer}
.amenity-card img{width:100%;height:100%;object-fit:cover;transition:.4s transform}
.amenity-card:hover img{transform:scale(1.07)}
.amenity-card .cap{position:absolute;left:0;right:0;bottom:0;padding:16px;background:linear-gradient(180deg,transparent,rgba(1,25,18,.9));color:#fff;font-weight:700;font-size:.95rem}
@media (max-width:900px){.amenity-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.amenity-grid{grid-template-columns:1fr}}

/* ===== FLOOR PLAN (Mặt bằng) ===== */
.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.plan-grid figure{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:#fff;cursor:zoom-in}
.plan-grid figcaption{padding:12px 16px;font-weight:700;color:var(--green-900);border-top:1px solid var(--line)}
@media (max-width:800px){.plan-grid{grid-template-columns:1fr}}

/* ===== PRICE BANNER (Bảng giá) ===== */
.price-banner{background:radial-gradient(120% 160% at 15% 15%,var(--green-700),var(--green-900) 60%);color:#fff;border-radius:24px;padding:52px 40px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:28px;position:relative;overflow:hidden}
.price-banner::after{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(201,161,90,.35),transparent 70%)}
.price-banner h2{color:#fff;margin-bottom:10px;font-size:clamp(1.4rem,3vw,2rem)}
.price-banner p{color:#dcd6c2;max-width:520px;margin:0}
.price-banner .side{position:relative;z-index:1}

/* ===== UNIT TYPES (Căn hộ) ===== */
.unit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.unit-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.unit-card .ph{aspect-ratio:1/1;overflow:hidden}
.unit-card .ph img{width:100%;height:100%;object-fit:cover;transition:.4s transform}
.unit-card:hover .ph img{transform:scale(1.06)}
.unit-card .body{padding:16px 18px 20px}
.unit-card h4{margin:0 0 4px;font-size:1.05rem}
.unit-card p{margin:0;color:var(--ink-soft);font-size:.85rem}
@media (max-width:900px){.unit-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.unit-grid{grid-template-columns:1fr}}
.center-cta{text-align:center;margin-top:34px}

/* ===== POLICY (Chính sách) ===== */
.policy-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.policy-grid figure{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);cursor:zoom-in;background:#fff}
@media (max-width:800px){.policy-grid{grid-template-columns:1fr}}

/* ===== VIDEO (Video tiến độ) ===== */
.video-wrap{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:#000}
.video-embed{position:relative;width:100%;aspect-ratio:16/9}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* ===== ADVISOR (Về nhà tư vấn) ===== */
.advisor{background:var(--green-900);color:#fff;border-radius:24px;overflow:hidden;box-shadow:var(--shadow);display:grid;grid-template-columns:minmax(280px,440px) 1fr;align-items:center}
.advisor .badge{display:inline-block;background:rgba(201,161,90,.18);color:var(--gold);border:1px solid rgba(201,161,90,.5);padding:6px 14px;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.14em;margin-bottom:16px}
.advisor h2{color:#fff}
.advisor p{color:#d8d4c6}
.advisor .facts{list-style:none;margin:20px 0 26px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.advisor .facts li{font-size:.88rem;color:#efece0;display:flex;gap:8px;align-items:flex-start}
.advisor .facts li::before{content:"✓";color:var(--gold);font-weight:900}
.advisor-content{padding:48px}
.advisor-photo{width:100%;aspect-ratio:1/1}
.advisor-photo img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:900px){.advisor{grid-template-columns:1fr}.advisor-photo{max-width:none}.advisor .facts{grid-template-columns:1fr}.advisor-content{padding:32px}}

/* ===== CONTACT CTA (Liên hệ tư vấn cụ thể) ===== */
.contact-cta{background:radial-gradient(120% 160% at 85% 20%,var(--green-700),var(--green-900) 65%);color:#fff;border-radius:24px;padding:56px 40px;text-align:center;position:relative;overflow:hidden}
.contact-cta::before{content:"";position:absolute;left:-70px;bottom:-70px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(201,161,90,.3),transparent 70%)}
.contact-cta h2{color:#fff;position:relative;z-index:1}
.contact-cta p{color:#dcd6c2;max-width:560px;margin:0 auto 26px;position:relative;z-index:1}
.contact-cta .actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;position:relative;z-index:1}

/* ===== FOOTER ===== */
footer.site{background:#01201a;color:#cfd6d0;padding:56px 0 26px;margin-top:20px}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px}
footer.site h4{color:#fff;font-family:'Be Vietnam Pro',sans-serif;font-size:.95rem;letter-spacing:.04em;margin-bottom:14px}
footer.site p,footer.site a{font-size:.87rem;color:#b9c2ba}
footer.site ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
footer.site .flogo{height:40px;margin-bottom:14px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:36px;padding-top:20px;font-size:.78rem;color:#8d9791;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}
@media (max-width:800px){.footer-grid{grid-template-columns:1fr}}

/* ===== FLOATING (Zalo/gọi nhanh + thanh dính mobile) ===== */
.floaters{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:12px;z-index:70}
.floaters a{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px -8px rgba(0,0,0,.4);color:#fff;font-size:1.3rem}
.fab-call{background:var(--amber)}
.fab-zalo{background:#0068ff;font-weight:800;font-size:.78rem}
.mobile-sticky{display:none;position:fixed;left:0;right:0;bottom:0;z-index:65;background:var(--green-900);padding:10px 14px;box-shadow:0 -8px 20px rgba(0,0,0,.25);gap:10px}
.mobile-sticky a{flex:1;text-align:center}
@media (max-width:720px){.mobile-sticky{display:flex}.floaters{bottom:78px}}

/* ===== ENTRY POPUP (ưu đãi đăng ký sớm) ===== */
.entry-popup{position:fixed;left:18px;bottom:18px;max-width:300px;background:#fff;border-radius:16px;box-shadow:0 24px 50px -18px rgba(0,0,0,.4);padding:20px;z-index:75;display:none;border:1px solid var(--line)}
.entry-popup.show{display:block}
.entry-popup button.x{position:absolute;top:8px;right:10px;background:none;border:none;font-size:1rem;cursor:pointer;color:var(--ink-soft)}
.entry-popup h4{margin:0 0 6px;font-size:1rem}
.entry-popup p{margin:0 0 14px;font-size:.82rem;color:var(--ink-soft)}
@media (max-width:720px){.entry-popup{left:10px;right:10px;bottom:84px;max-width:none}}