/*
Theme Name: NOXH Happy Home Tràng Cát
Description: Trang giới thiệu dự án nhà ở xã hội Happy Home Tràng Cát — Vinhomes, Hải Phòng. Một trang dài, bắt khách bằng form nhận tư vấn. Màu và thông tin liên hệ đổi trong Cài đặt.
Version: 1.0
Author: Realtor OS
*/

:root{
  /* Màu lấy đúng theo bộ nhận diện Happy Home (đọc từ CSS trang chủ dự án):
     tím #6450a2 là màu chính, cam #ee9734 là màu nhấn, nền xám rất nhạt. */
  --cam:#6450a2;          /* MÀU CHÍNH — nút, link, tiêu đề nhỏ */
  --cam-dam:#53418b;
  --nhan:#ee9734;         /* màu nhấn — con số lớn, dấu tích */
  --navy:#6450a2;
  --tim-nhat:#f3f1fa;     /* nền dải mở đầu, rất sáng */
  --chu:#1f2124;
  --mo:#5f6a76;
  --vien:#e4e8ec;
  --nen-nhat:#f7f8f9;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:74px}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
     color:var(--chu);background:#fff;font-size:17px;line-height:1.65;
     -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
.khung{max-width:1140px;margin:0 auto;padding:0 20px}

/* ---------- Đầu trang ---------- */
.dau{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--vien)}
.dau .khung{display:flex;align-items:center;gap:20px;padding-top:12px;padding-bottom:12px}
.hieu{font-weight:800;font-size:1.02rem;letter-spacing:-.02em;line-height:1.15;flex:0 0 auto}
.hieu span{display:block;font-weight:600;font-size:.72rem;letter-spacing:.14em;
           color:var(--cam);text-transform:uppercase}
.menu{display:flex;gap:18px;flex-wrap:wrap;margin-left:auto;min-width:0}
.menu a{font-size:.9rem;font-weight:500;color:var(--mo);white-space:nowrap}
.menu a:hover{color:var(--cam)}
.nut{display:inline-block;background:var(--cam);color:#fff;font-weight:700;
     font-size:.95rem;padding:11px 22px;border-radius:8px;border:0;cursor:pointer;
     font-family:inherit;text-align:center;white-space:nowrap}
.nut:hover{background:var(--cam-dam)}
.dau .nut{flex:0 0 auto;padding:9px 18px;font-size:.9rem}

/* ---------- Dải mở đầu ---------- */
/* Nền SÁNG, không dùng nền tối phủ ảnh: trang mẫu của dự án đi theo hướng
   sáng - thoáng, và chữ đen trên nền sáng dễ đọc hơn hẳn ngoài nắng. */
.hero{background:linear-gradient(180deg,var(--tim-nhat) 0%,#fff 100%);
      border-bottom:1px solid var(--vien)}
.hero .khung{padding-top:56px;padding-bottom:60px}
.hero-luoi{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.hero-anh img{border-radius:16px;box-shadow:0 18px 44px rgba(100,80,162,.2);width:100%}
.hero .nhan{display:inline-block;background:var(--cam);color:#fff;font-weight:700;
     font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
     padding:6px 13px;border-radius:5px;margin-bottom:16px}
.hero h1{font-size:2.85rem;font-weight:800;line-height:1.1;letter-spacing:-.03em;
         margin:0 0 15px;color:var(--chu)}
.hero .dan{font-size:1.08rem;color:var(--mo);margin:0 0 26px}

/* Bốn số liệu nhanh dưới tiêu đề */
.solieu{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin:0 0 26px}
.solieu div{background:#fff;border:1px solid var(--vien);border-radius:10px;padding:12px 13px}
.solieu b{display:block;font-size:1.2rem;font-weight:800;line-height:1.2;color:var(--cam)}
.solieu span{font-size:.76rem;color:var(--mo)}

/* ---------- Khối liên hệ dùng lại nhiều nơi ---------- */
.form-tuvan{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.form-tuvan input[type=tel],.form-tuvan input[type=text]{
     flex:1 1 210px;min-width:0;border:1.5px solid var(--vien);border-radius:8px;
     background:#fff;font:inherit;font-size:1rem;color:var(--chu);padding:12px 15px}
.form-tuvan input::placeholder{color:#97a2ae}
.form-tuvan input:focus-visible{outline:2px solid var(--cam);outline-offset:1px;border-color:var(--cam)}
.form-tuvan .nut{flex:0 0 auto;padding:12px 26px}
/* Ô bẫy máy gửi rác: giấu khỏi mắt người nhưng KHÔNG dùng display:none —
   một số máy gửi rác biết bỏ qua ô display:none. */
.mg-bay{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cta-bao{margin:0 0 12px;font-weight:600;font-size:.97rem}
.cta-ok{color:#0a7d3f}
.cta-loi{color:#b4453c}
.dai-cta .cta-bao{color:#fff}
.ghi-chu{font-size:.83rem;color:var(--mo);margin:11px 0 0}
.dai-cta .ghi-chu{color:#ded7f0}

/* ---------- Khối chung ---------- */
.khoi{padding:64px 0;scroll-margin-top:74px}
.khoi-nhat{background:var(--nen-nhat)}
.tieu{font-size:.78rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
      color:var(--cam);margin:0 0 9px}
.khoi h2{font-size:2.05rem;font-weight:800;letter-spacing:-.025em;margin:0 0 14px;line-height:1.2}
.khoi .mo-ta{color:var(--mo);max-width:64ch;margin:0 0 30px;font-size:1.04rem}

/* Lưới thẻ dùng chung */
.the-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:18px}
.the{background:#fff;border:1px solid var(--vien);border-radius:12px;padding:22px}
.khoi-nhat .the{background:#fff}
.the h3{font-size:1.06rem;font-weight:700;margin:0 0 7px}
.the p{margin:0;color:var(--mo);font-size:.96rem}
.the .so{font-size:1.9rem;font-weight:800;color:var(--nhan);line-height:1.1;margin:0 0 4px}

/* Bảng */
.bang-bao{overflow-x:auto;-webkit-overflow-scrolling:touch;
          border:1px solid var(--vien);border-radius:12px;background:#fff}
table{border-collapse:collapse;width:100%;min-width:580px;font-size:.97rem}
th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--vien)}
th{background:var(--navy);color:#fff;font-weight:600;font-size:.88rem;
   letter-spacing:.02em;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:#fafbfc}
td b{color:var(--cam)}
.bang-bao th{background:var(--cam)}

/* Danh sách có dấu tích */
.ds-tich{list-style:none;padding:0;margin:0;display:grid;
         grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:11px 26px}
.ds-tich li{position:relative;padding-left:29px;color:var(--chu);font-size:.99rem}
.ds-tich li::before{content:"";position:absolute;left:0;top:.48em;width:17px;height:17px;
  border-radius:50%;background:var(--nhan);
  -webkit-mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;
          mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat}

/* Các bước đánh số */
.buoc{counter-reset:b;display:grid;gap:15px}
.buoc li{counter-increment:b;list-style:none;position:relative;padding-left:56px;
         background:#fff;border:1px solid var(--vien);border-radius:12px;padding-top:19px;
         padding-right:22px;padding-bottom:19px}
.buoc li::before{content:counter(b);position:absolute;left:18px;top:17px;
  width:26px;height:26px;border-radius:50%;background:var(--cam);color:#fff;
  font-weight:800;font-size:.87rem;display:grid;place-items:center}
.buoc h3{margin:0 0 5px;font-size:1.04rem;font-weight:700}
.buoc p{margin:0;color:var(--mo);font-size:.95rem}

/* Ảnh rộng chèn giữa nội dung — để người đọc hình dung thay vì chỉ đọc chữ */
figure{margin:0}
.anh-rong{margin:30px 0 0}
.anh-rong img{width:100%;border-radius:14px;border:1px solid var(--vien)}
.anh-rong figcaption{font-size:.88rem;color:var(--mo);margin-top:9px;text-align:center}

/* Ảnh cắt mái từng loại căn — xem được bố trí bên trong mà không cần biết đọc bản vẽ */
.anh-cat-mai{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
             gap:16px;margin:26px 0 14px}
.anh-cat-mai figure{background:#fff;border:1px solid var(--vien);border-radius:14px;padding:12px}
.anh-cat-mai img{width:100%;border-radius:8px}
.anh-cat-mai figcaption{font-size:.9rem;color:var(--mo);margin-top:9px;text-align:center}
.anh-cat-mai figcaption b{color:var(--chu)}

/* Thư viện ảnh */
.anh-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px}
.anh-luoi img{border-radius:10px;aspect-ratio:3/2;object-fit:cover;width:100%}
.anh-lon{grid-column:span 2}
@media(max-width:560px){.anh-lon{grid-column:span 1}}

/* Dải kêu gọi cuối */
.dai-cta{background:var(--navy);color:#fff;padding:60px 0}
.dai-cta h2{font-size:2rem;font-weight:800;margin:0 0 12px;letter-spacing:-.025em}
.dai-cta p{color:#c9d3e2;margin:0 0 26px;max-width:58ch}
.dai-cta .form-tuvan{max-width:660px}
.dai-cta .form-tuvan input{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.1);color:#fff}
.dai-cta .form-tuvan input::placeholder{color:#a9b6c9}

/* Chân trang */
.cuoi{background:var(--nen-nhat);color:var(--mo);padding:44px 0 30px;font-size:.94rem;
      border-top:1px solid var(--vien)}
.cuoi-luoi{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px;margin-bottom:26px}
.cuoi h4{color:var(--chu);font-size:1rem;margin:0 0 11px;font-weight:700}
.cuoi a{color:var(--cam)}
.cuoi a:hover{text-decoration:underline}
.cuoi p{margin:0 0 7px}
.cuoi-day{border-top:1px solid var(--vien);padding-top:18px;font-size:.87rem}
.mien-tru{color:#8a94a1;font-size:.85rem;margin-top:10px;line-height:1.55}

/* Hai nút nổi góc màn hình */
/* Chừa chỗ ở đáy trang cho hai nút nổi, nếu không chúng che mất dòng cuối. */
body{padding-bottom:104px}
/* Đặt ở góc PHẢI, không phải góc trái: nội dung trang căn trái, để bên trái là
   hai nút này đè lên ô nhập số điện thoại — đúng chỗ quan trọng nhất. */
.noi{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;flex-direction:column;
     align-items:flex-end;gap:12px}
.noi a{position:relative;display:flex;align-items:center;gap:9px;border-radius:999px;
       padding:12px 20px;color:#fff;font-weight:700;font-size:.95rem;
       box-shadow:0 8px 22px rgba(0,0,0,.28)}
.noi a:hover{transform:translateY(-1px)}
.noi-goi{background:#e03e2f}
.noi-zalo{background:#0068ff}
.noi svg{flex:0 0 auto}
/* Vòng sóng lan toả quanh nút gọi — cùng kiểu với các trang dự án quen thuộc,
   giúp mắt bắt được nút ngay. Tắt khi máy người dùng xin giảm chuyển động. */
.noi-goi::before,.noi-goi::after{content:"";position:absolute;left:9px;top:50%;
  width:30px;height:30px;margin-top:-15px;border-radius:50%;
  border:2px solid rgba(224,62,47,.55);pointer-events:none;
  animation:song 2s ease-out infinite}
.noi-goi::after{animation-delay:1s}
@keyframes song{
  0%{transform:scale(.85);opacity:.9}
  100%{transform:scale(2.5);opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .noi-goi::before,.noi-goi::after{animation:none;opacity:0}
}
.noi svg{flex:0 0 auto}

@media(max-width:900px){
  .cuoi-luoi{grid-template-columns:1fr;gap:22px}
  .solieu{grid-template-columns:repeat(2,1fr)}
  .hero-luoi{grid-template-columns:1fr;gap:28px}
  .hero-anh{order:-1}
  .hero h1{font-size:2.05rem}
  .hero .khung{padding-top:34px;padding-bottom:44px}
  .khoi{padding:48px 0}
  .khoi h2{font-size:1.68rem}
  .dai-cta h2{font-size:1.6rem}
}
@media(max-width:820px){
  /* Đầu trang trên điện thoại: tên dự án một hàng, menu trượt ngang hàng dưới.
     KHÔNG ẩn menu — phần lớn khách xem bằng điện thoại, ẩn đi là mất đường đi. */
  .dau .khung{flex-wrap:wrap;gap:10px}
  .hieu{font-size:.93rem}
  .dau .nut{margin-left:auto;padding:8px 14px;font-size:.85rem}
  .menu{order:3;flex:1 0 100%;margin-left:0;flex-wrap:nowrap;overflow-x:auto;
        scrollbar-width:none;gap:8px;margin:0 -20px;padding:2px 20px 4px}
  .menu::-webkit-scrollbar{display:none}
  .menu a{flex:0 0 auto;border:1px solid var(--vien);border-radius:999px;
          padding:6px 13px;font-size:.84rem}
  html{scroll-padding-top:108px}
  .khoi,.hero{scroll-margin-top:108px}
  /* Điện thoại: giữ nguyên số trên nút gọi vì đó là hành động chính,
     nút Zalo thu về hình tròn cho đỡ chiếm chỗ. */
  .noi{right:12px;bottom:12px;gap:10px}
  .noi a{padding:11px 17px;font-size:.9rem}
  .noi-zalo span{display:none}
  .noi-zalo{padding:12px;border-radius:50%}
}

/* Khung báo khi khách bấm Nhắn Zalo trên máy tính (Zalo Web bắt quét QR,
   nên ta sao chép số cho họ thay vì đẩy vào trang đăng nhập). */
.zalo-bao{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);
  z-index:70;max-width:min(520px,calc(100vw - 32px));
  background:#15213d;color:#fff;border-radius:12px;padding:14px 20px;
  font-size:.95rem;line-height:1.5;box-shadow:0 12px 34px rgba(0,0,0,.3);
  opacity:0;transition:opacity .25s ease,transform .25s ease;pointer-events:none}
.zalo-bao.hien{opacity:1;transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce){.zalo-bao{transition:none}}