/* ============================================================
   Đông Tây Land CN Nha Trang — bộ giao diện chung cho toàn site
   Bảng màu: xanh biển sâu (thương hiệu) + cát vàng (nhấn)
   ============================================================ */
:root{
  --bg:#f7f8fa; --bg2:#eef2f5; --card:#fff; --line:#e2e7ee;
  --tx:#111820; --tx2:#5b6673;
  --acc:#0d5c73;            /* xanh biển sâu */
  --acc-d:#08414f;
  --acc-l:#e6f1f4;
  --gold:#b8862f;           /* cát vàng */
  --gold-l:#fbf3e2;
  --sh:0 1px 2px rgba(16,24,40,.05),0 4px 14px rgba(16,24,40,.07);
  --sh-lg:0 10px 30px rgba(16,24,40,.12);
  --r:14px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0e1216; --bg2:#141a20; --card:#171d24; --line:#262e38;
    --tx:#e9edf2; --tx2:#98a4b2;
    --acc:#4fb3ce; --acc-d:#7fcbe0; --acc-l:#0f2a33;
    --gold:#e0b45f; --gold-l:#2a2113;
    --sh:0 1px 3px rgba(0,0,0,.5); --sh-lg:0 12px 34px rgba(0,0,0,.55);
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--tx);
  font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.25;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(28px,4.4vw,46px);font-weight:800}
h2{font-size:clamp(22px,3vw,32px);font-weight:750}
h3{font-size:19px;font-weight:700}
p{margin:0 0 1em}
.wrap{max-width:1140px;margin:0 auto;padding:0 18px}
.muted{color:var(--tx2)}
.small{font-size:14px}

/* ---------- Header ---------- */
header{
  position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--card) 88%,transparent);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line);
}
.nav{max-width:1140px;margin:0 auto;padding:11px 18px;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;color:var(--tx)}
.brand:hover{text-decoration:none}
.brand .mark{
  width:34px;height:34px;border-radius:9px;flex:none;
  background:linear-gradient(140deg,var(--acc),var(--acc-d));
  display:grid;place-items:center;color:#fff;font-size:15px;font-weight:800
}
.brand small{display:block;font-size:11px;font-weight:500;color:var(--tx2);letter-spacing:.02em}
.nav .sp{flex:1}
.menu{display:flex;gap:4px;align-items:center}
.menu a{
  padding:8px 13px;border-radius:9px;font-size:15px;font-weight:600;color:var(--tx2)
}
.menu a:hover{background:var(--bg2);color:var(--tx);text-decoration:none}
.menu a.on{color:var(--acc);background:var(--acc-l)}
.tel{
  background:var(--acc);color:#fff!important;padding:9px 15px;border-radius:10px;
  font-weight:700;font-size:15px;white-space:nowrap
}
.tel:hover{filter:brightness(1.1);text-decoration:none}
.burger{display:none;border:1px solid var(--line);background:var(--card);color:var(--tx);
  border-radius:9px;padding:7px 11px;font-size:18px;cursor:pointer;line-height:1}
/* tên dự án viết đủ (Vinhomes Pearl Bay, CharmoraCity, BĐS Dòng Tiền) nên menu dài —
   bóp chữ ở màn hình vừa, và thu vào nút ☰ sớm hơn thay vì để menu tràn xuống dòng */
@media (max-width:1240px) and (min-width:1101px){
  .menu a{padding:8px 9px;font-size:14px}
  .brand small{display:none}
}
@media (max-width:1100px){
  .burger{display:block}
  .menu{
    display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    background:var(--card);border-bottom:1px solid var(--line);padding:8px 14px 14px;gap:2px
  }
  .menu.open{display:flex}
  .menu a{padding:11px 12px;font-size:16px}
}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--acc-d),var(--acc));color:#fff}
.hero::after{
  content:"";position:absolute;inset:0;opacity:.18;
  background:radial-gradient(900px 380px at 82% -10%,#fff,transparent 60%)
}
.hero .wrap{position:relative;z-index:1;padding:74px 18px 78px;max-width:1140px}
.hero h1{color:#fff;max-width:19ch}
.hero p{font-size:clamp(16px,2vw,19px);color:#e2f0f5;max-width:60ch}
.eyebrow{
  display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:#ffe4ad;margin-bottom:14px
}
.hero-sub .eyebrow{color:var(--gold)}
.hero-sub{background:var(--bg2);color:var(--tx);border-bottom:1px solid var(--line)}
.hero-sub::after{display:none}
.hero-sub h1{color:var(--tx)}
.hero-sub p{color:var(--tx2)}
.hero-sub .wrap{padding:52px 18px 46px}

.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.btn{
  display:inline-block;padding:13px 24px;border-radius:11px;font-weight:700;font-size:16px;
  border:1.5px solid transparent;cursor:pointer;font-family:inherit
}
.btn:hover{text-decoration:none;filter:brightness(1.07)}
.btn-gold{background:var(--gold);color:#1a1206}
.btn-ghost{border-color:rgba(255,255,255,.55);color:#fff}
.hero-sub .btn-ghost{border-color:var(--line);color:var(--tx)}
.btn-acc{background:var(--acc);color:#fff}

/* ---------- Khối nội dung ---------- */
section{padding:58px 0}
section.tight{padding:40px 0}
.alt{background:var(--bg2)}
.head{margin-bottom:32px}
.head h2{margin:0}
.head p{color:var(--tx2);font-size:17px;margin:0 0 12px}
.head p:last-child{margin-bottom:0}
/* Máy tính: tiêu đề trái · đoạn dẫn phải — lấp hết chiều ngang, không dồn về một góc */
@media (min-width:920px){
  .head{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
        gap:8px 52px;align-items:start}
  .head h2{grid-column:1}
  .head p{grid-column:2}
}

.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:22px;box-shadow:var(--sh)
}
.card h3{margin-bottom:8px}
.card p:last-child{margin-bottom:0}

/* thẻ dự án ở trang chủ */
.proj{
  display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);transition:transform .18s,box-shadow .18s
}
.proj:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);text-decoration:none}
.proj .top{
  height:132px;display:flex;align-items:flex-end;padding:16px;color:#fff;font-weight:800;font-size:20px;
  background:linear-gradient(150deg,var(--acc-d),var(--acc))
}
.proj.sun .top{background:linear-gradient(150deg,#8a4a12,#d08a2c)}
.proj.pho .top{background:linear-gradient(150deg,#134e3a,#2c8f63)}
.proj .body{padding:18px 20px 22px;flex:1;display:flex;flex-direction:column;gap:10px;color:var(--tx)}
.proj .body p{margin:0;color:var(--tx2);font-size:15px}
.proj .more{margin-top:auto;color:var(--acc);font-weight:700;font-size:15px}

.tag{
  display:inline-block;background:var(--acc-l);color:var(--acc);border-radius:999px;
  padding:4px 11px;font-size:12.5px;font-weight:700;margin:0 6px 6px 0
}
.tag.gold{background:var(--gold-l);color:var(--gold)}

ul.check{list-style:none;padding:0;margin:0 0 1em}
ul.check li{position:relative;padding-left:26px;margin-bottom:9px}
ul.check li::before{
  content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;border-radius:50%;
  background:var(--gold)
}

/* bảng */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);
  border-radius:var(--r);background:var(--card);box-shadow:var(--sh)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--bg2);font-weight:700;font-size:13.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--tx2)}
tr:last-child td{border-bottom:none}
td strong{color:var(--tx)}

.note{
  border-left:4px solid var(--gold);background:var(--gold-l);color:var(--tx);
  padding:14px 18px;border-radius:0 10px 10px 0;margin:22px 0
}
.note p:last-child{margin-bottom:0}

/* dải CTA cuối trang */
.strip{background:linear-gradient(150deg,var(--acc-d),var(--acc));color:#fff;text-align:center}
.strip h2{color:#fff}
.strip p{color:#dcecf1;max-width:56ch;margin:0 auto 8px}
.strip .cta-row{justify-content:center}

/* form liên hệ */
form.lh{display:grid;gap:14px;max-width:560px}
.f label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.f input,.f select,.f textarea{
  width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:10px;
  background:var(--bg);color:var(--tx);font:inherit;font-size:15px
}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--acc);outline-offset:-1px}
.f textarea{min-height:110px;resize:vertical}
.hint{font-size:13.5px;color:var(--tx2);margin:0}

/* ---------- Footer ---------- */
footer{background:var(--card);border-top:1px solid var(--line);padding:40px 0 30px;font-size:15px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}
@media (max-width:760px){.fgrid{grid-template-columns:1fr}}
footer h4{font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:var(--tx2);margin:0 0 10px}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-bottom:7px}
footer a{color:var(--tx)}
.copy{border-top:1px solid var(--line);margin-top:28px;padding-top:18px;color:var(--tx2);font-size:13.5px}

/* ============================================================
   KHỐI DÙNG CHO TRANG DỰ ÁN
   ============================================================ */

/* --- hero có ảnh nền --- */
.hero-img{position:relative;background:#08222b;color:#fff;overflow:hidden}
.hero-img>img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55
}
.hero-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(4,26,33,.92) 0%,rgba(4,26,33,.72) 42%,rgba(4,26,33,.25) 100%)
}
.hero-img .wrap{position:relative;z-index:2;padding:86px 18px 78px}
.hero-img h1{color:#fff;max-width:17ch;text-shadow:0 2px 20px rgba(0,0,0,.35)}
.hero-img p{color:#dbeaf0;max-width:56ch;font-size:clamp(16px,2vw,19px)}
.hero-img .eyebrow{color:#f0c987}

/* --- dải số liệu --- */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)
}
.stats div{background:var(--card);padding:20px 18px;text-align:center}
.stats b{display:block;font-size:clamp(22px,3vw,30px);font-weight:800;letter-spacing:-.02em;color:var(--acc)}
.stats span{display:block;font-size:13px;color:var(--tx2);margin-top:3px}
@media (max-width:700px){.stats{grid-template-columns:1fr 1fr}}

/* --- khối ảnh + chữ xen kẽ --- */
.media{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.media.dao{direction:rtl}.media.dao>*{direction:ltr}
.media img{border-radius:var(--r);box-shadow:var(--sh-lg);width:100%;height:auto}
@media (max-width:820px){.media{grid-template-columns:1fr;gap:22px}.media.dao{direction:ltr}}

/* --- thẻ dòng sản phẩm có ảnh --- */
.sp{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sh);display:flex;flex-direction:column}
.sp>img{width:100%;aspect-ratio:3/2;object-fit:cover}
.sp .in{padding:18px 20px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.sp h3{margin:0}
.sp .dl{margin:0;font-size:14.5px;color:var(--tx2);display:grid;grid-template-columns:auto 1fr;
  gap:3px 12px}
.sp .dl dt{color:var(--tx2)}
.sp .dl dd{margin:0;color:var(--tx);font-weight:600}

/* --- thư viện ảnh --- */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gal figure{margin:0;position:relative;border-radius:12px;overflow:hidden;box-shadow:var(--sh)}
.gal img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .35s}
.gal figure:hover img{transform:scale(1.05)}
.gal figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;color:#fff;font-size:13.5px;
  background:linear-gradient(transparent,rgba(4,20,26,.85))
}
@media (max-width:760px){.gal{grid-template-columns:1fr 1fr;gap:9px}}

/* --- sa bàn 3D nhúng --- */
.saban{
  position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--sh-lg);background:#08222b;aspect-ratio:16/9
}
.saban iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* ảnh mồi: chưa bấm thì KHÔNG tải ứng dụng 3D, giữ trang nhẹ */
.saban .moi{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6}
.saban .phu{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;text-align:center;padding:24px;cursor:pointer;color:#fff;
  background:linear-gradient(180deg,rgba(4,26,33,.35),rgba(4,26,33,.8))
}
.saban .phu b{font-size:clamp(18px,2.6vw,25px);letter-spacing:-.02em;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.saban .phu span{font-size:14.5px;color:#cfe3ea;max-width:46ch}
.saban .play{
  width:70px;height:70px;border-radius:50%;background:var(--gold);color:#1a1206;
  display:grid;place-items:center;font-size:26px;box-shadow:0 8px 26px rgba(0,0,0,.4);
  transition:transform .18s
}
.saban .phu:hover .play{transform:scale(1.08)}
@media (max-width:700px){.saban{aspect-ratio:4/5}}   /* dọc màn hình điện thoại cho dễ xoay sa bàn */

/* --- câu hỏi thường gặp dạng gập --- */
.faq{border:1px solid var(--line);border-radius:var(--r);background:var(--card);overflow:hidden;
  box-shadow:var(--sh)}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:none}
.faq summary{
  padding:16px 20px;cursor:pointer;font-weight:650;font-size:16.5px;list-style:none;
  display:flex;justify-content:space-between;gap:14px;align-items:flex-start
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--acc);font-size:21px;line-height:1;font-weight:700}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{background:var(--bg2)}
.faq .tl{padding:0 20px 18px;color:var(--tx2);max-width:80ch}
.faq .tl p:last-child{margin-bottom:0}

/* --- hộp người tư vấn (EEAT) --- */
.tacgia{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;
  background:var(--card);border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:var(--r);padding:24px;box-shadow:var(--sh)}
.tacgia .avt{width:76px;height:76px;border-radius:50%;background:linear-gradient(140deg,var(--acc),var(--acc-d));
  display:grid;place-items:center;color:#fff;font-size:26px;font-weight:800;flex:none}
@media (max-width:560px){.tacgia{grid-template-columns:1fr}}

/* ============================================================
   THANH PHẢI — hộp chữ nhật sát mép phải, chia 2 nửa
   Máy tính rộng : neo cố định mép phải, luôn nhìn thấy khi cuộn.
   Máy hẹp/điện thoại: tự rơi xuống cuối trang thành 1 thẻ bình thường,
                       KHÔNG đè lên nội dung, KHÔNG chiếm chỗ đọc.
   ============================================================ */
.rail{
  background:var(--card);border:1px solid var(--line);
  box-shadow:var(--sh-lg);display:flex;flex-direction:column;overflow:hidden
}
.rail .nua{padding:20px 18px;flex:1;display:flex;flex-direction:column;justify-content:center}
.rail .nua + .nua{border-top:1px solid var(--line)}
.rail .ten{font-weight:800;font-size:17px;letter-spacing:-.02em;margin:0;line-height:1.25}
.rail .nghe{color:var(--tx2);font-size:13px;margin:3px 0 0}
/* nhãn nhỏ ngăn khối giới thiệu với khối số — mắt biết ngay đâu là chỗ bấm gọi */
.rail .nhan{
  margin:16px 0 8px;padding-top:14px;border-top:1px solid var(--line);
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tx2)
}
/* hai hotline ngang hàng nhau — không số nào "phụ" hơn số nào */
.rail .sdt{
  display:block;font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.5;
  color:var(--acc);text-decoration:none;font-variant-numeric:tabular-nums
}
.rail .sdt:hover{text-decoration:none;filter:brightness(1.12)}
.rail .zl{
  display:block;margin-top:14px;text-align:center;background:var(--gold);color:#1a1206;
  border-radius:10px;padding:11px;font-weight:700;font-size:15px;text-decoration:none
}
.rail .zl:hover{text-decoration:none;filter:brightness(1.06)}
.rail .cho{color:var(--tx2);font-size:13.5px;margin:0}

/* --- máy tính rộng: neo mép phải --- */
@media (min-width:1200px){
  body:has(.rail){padding-right:252px}                 /* chừa chỗ, không đè lên nội dung */
  .rail{
    position:fixed;right:0;top:50%;transform:translateY(-50%);
    width:236px;min-height:330px;max-height:82vh;z-index:40;
    border-right:none;border-radius:14px 0 0 14px
  }
}
/* --- máy hẹp & điện thoại: thành thẻ nằm cuối trang --- */
@media (max-width:1199px){
  .rail-wrap{max-width:1140px;margin:0 auto;padding:0 18px 34px}
  .rail{border-radius:14px}
  .rail .nua{padding:18px}
}
@media (min-width:560px) and (max-width:1199px){
  .rail{flex-direction:row}                 /* máy tính bảng: 2 nửa nằm ngang cho đỡ dài */
  .rail .nua + .nua{border-top:none;border-left:1px solid var(--line)}
}

/* nút gọi nổi trên mobile */
.fab{display:none}
@media (max-width:860px){
  .fab{
    display:flex;position:fixed;left:14px;right:14px;bottom:14px;z-index:60;gap:10px
  }
  .fab a{
    flex:1;text-align:center;padding:14px;border-radius:12px;font-weight:700;
    box-shadow:var(--sh-lg);font-size:16px
  }
  .fab .call{background:var(--acc);color:#fff}
  .fab .zalo{background:var(--gold);color:#1a1206}
  .fab a:hover{text-decoration:none}
  body{padding-bottom:76px}
}

/* ===== KHỐI BẮT KHÁCH giữa trang — dùng lại ở mọi trang dự án ===== */
.batkhach{
  background:linear-gradient(135deg,var(--acc) 0%,var(--acc-d) 100%);
  border-radius:var(--r);padding:30px;color:#fff;box-shadow:var(--sh-lg)
}
.batkhach h3{color:#fff;font-size:24px;margin:0 0 8px;line-height:1.3}
.batkhach p{color:rgba(255,255,255,.9);margin:0 0 18px}
.batkhach .f label{color:rgba(255,255,255,.92)}
.batkhach .f input,.batkhach .f select{
  background:rgba(255,255,255,.97);border-color:transparent;color:var(--tx)
}
.batkhach form.lh{max-width:none}
.batkhach .hint{color:rgba(255,255,255,.72);margin-bottom:0}
.batkhach .doc{display:grid;gap:10px;margin:0 0 18px;padding:0;list-style:none}
.batkhach .doc li{position:relative;padding-left:26px;color:rgba(255,255,255,.94);font-size:15px}
.batkhach .doc li::before{
  content:"✓";position:absolute;left:0;top:-1px;font-weight:700;color:var(--gold-l)
}
@media (min-width:860px){
  .batkhach{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;padding:38px}
  .batkhach .loi{margin:0}
}

/* ===== BẢNG THÔNG SỐ TỔNG QUAN ===== */
.thongso{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.thongso div{display:grid;grid-template-columns:minmax(140px,34%) 1fr;gap:0;border-bottom:1px solid var(--line)}
.thongso div:last-child{border-bottom:0}
.thongso dt,.thongso dd{margin:0;padding:13px 16px}
.thongso dt{background:var(--bg2);font-weight:600;font-size:14.5px;color:var(--tx2)}
.thongso dd{background:var(--card)}

/* ===== BẢNG KHOẢNG CÁCH ===== */
.kcach{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-top:22px}
.kcach div{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;box-shadow:var(--sh)
}
.kcach b{display:block;font-size:26px;color:var(--acc);line-height:1.15;letter-spacing:-.02em}
.kcach span{display:block;font-size:14px;color:var(--tx2);margin-top:3px}

/* ===== NÚT GỌI NỔI TRÊN MÁY TÍNH — thay cho thanh phải đã bỏ ===== */
/* Không chiếm chiều ngang: neo góc phải dưới, nội dung vẫn full màn hình. */
@media (min-width:861px){
  .fab{
    display:flex;flex-direction:column;gap:10px;
    position:fixed;right:20px;bottom:20px;z-index:60;align-items:flex-end
  }
  .fab a{
    padding:12px 20px;border-radius:999px;font-weight:700;font-size:15px;
    box-shadow:var(--sh-lg);white-space:nowrap
  }
  .fab .call{background:var(--acc);color:#fff}
  .fab .zalo{background:var(--gold);color:#1a1206}
  .fab a:hover{text-decoration:none;filter:brightness(1.08)}
}

/* ===== NỀN LUÂN PHIÊN — phá thế trắng đơn điệu ===== */
/* Dải xanh nhạt: dùng cho khối thông tin nặng (mặt bằng, tiện ích) */
.men{background:linear-gradient(180deg,var(--acc-l) 0%,var(--bg) 100%)}
/* Dải cát: dùng cho khối giá & chính sách, tạo cảm giác "ưu đãi" */
.cat{background:linear-gradient(180deg,var(--gold-l) 0%,var(--bg) 100%)}
/* Dải đậm: khối nhấn mạnh, chữ sáng trên nền sâu */
.dam{background:linear-gradient(160deg,var(--acc-d) 0%,#06323d 100%);color:#fff}
.dam h2,.dam h3{color:#fff}
.dam p,.dam li{color:rgba(255,255,255,.9)}
.dam .head p{color:rgba(255,255,255,.82)}
.dam .card{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
.dam .card p{color:rgba(255,255,255,.86)}
.dam .small.muted{color:rgba(255,255,255,.65)}
.dam .tbl-wrap{background:rgba(255,255,255,.05);border-radius:var(--r)}
.dam table{color:rgba(255,255,255,.92)}
.dam th{background:rgba(255,255,255,.1);color:#fff}
.dam td{border-color:rgba(255,255,255,.14)}
.dam a{color:var(--gold-l)}

/* ===== THẺ GIÁ KHỞI ĐIỂM ===== */
.gia{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.gia div{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 22px;text-align:center;box-shadow:var(--sh);position:relative;overflow:hidden
}
.gia div::before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--gold),var(--acc))
}
.gia h3{font-size:17px;margin:0 0 10px;letter-spacing:-.01em}
.gia b{display:block;font-size:33px;color:var(--acc);line-height:1.1;letter-spacing:-.03em}
.gia .tu{display:block;font-size:13px;color:var(--tx2);margin-bottom:2px}
.gia .ghi{display:block;font-size:13.5px;color:var(--tx2);margin-top:9px}

/* ===== MẶT BẰNG — ảnh bản vẽ nền trắng, cần khung ===== */
.mbang{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.mbang figure{
  margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--sh)
}
.mbang img{width:100%;display:block;background:#fff}
.mbang figcaption{
  padding:12px 16px;font-size:14px;color:var(--tx2);
  border-top:1px solid var(--line);background:var(--card)
}

/* ===== SƠ ĐỒ MẶT BẰNG TỔNG — ảnh rộng, cần xem to ===== */
.sodo{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--sh-lg)}
.sodo img{width:100%;display:block}
.sodo figcaption{padding:14px 18px;font-size:14.5px;color:var(--tx2);
  border-top:1px solid var(--line);background:var(--card)}

/* ===== 9 BỘ SƯU TẬP ===== */
.bst{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.bst figure{margin:0;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.bst img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}
.bst figcaption{padding:13px 16px;font-size:14px;color:var(--tx2);border-top:1px solid var(--line)}
.bst b{display:block;color:var(--tx);font-size:15.5px;margin-bottom:3px}

/* ===== HỒ SƠ DỰ ÁN — khối ấn tượng đầu trang ===== */
.hoso{
  background:linear-gradient(155deg,#0a4b5e 0%,var(--acc-d) 45%,#052a34 100%);
  border-radius:20px;padding:34px 30px;box-shadow:var(--sh-lg);position:relative;overflow:hidden
}
.hoso::before{  /* vệt sáng chéo cho đỡ phẳng */
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 88% 6%,rgba(184,134,47,.24),transparent 58%);
  pointer-events:none
}
.hoso > *{position:relative}

/* 3 số lớn nằm trên cùng */
.hoso .noibat{
  display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid rgba(255,255,255,.16)
}
.hoso .noibat div{text-align:center}
.hoso .noibat b{
  display:block;font-size:38px;line-height:1.05;letter-spacing:-.03em;
  color:#fff;font-weight:800
}
.hoso .noibat span{
  display:block;margin-top:6px;font-size:12.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold-l);font-weight:600
}

/* danh sách thông số 2 cột */
.hoso .ds{display:grid;gap:0;margin:0}
.hoso .ds > div{padding:15px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.hoso .ds dt{
  margin:0 0 5px;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold);font-weight:700
}
.hoso .ds dd{margin:0;color:#fff;font-size:16px;line-height:1.5}
@media (min-width:800px){
  .hoso{padding:40px 38px}
  .hoso .ds{grid-template-columns:1fr 1fr;column-gap:40px}
  .hoso .ds > div:nth-last-child(-n+2){border-bottom:none}
}
@media (max-width:799px){
  .hoso .ds > div:last-child{border-bottom:none}
  .hoso .noibat b{font-size:31px}
}

/* ===== FORM BẮT KHÁCH GỌN — một hàng ngang ===== */
.batnho{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:22px;box-shadow:var(--sh);margin-top:20px
}
.batnho .loi{margin:0 0 14px}
.batnho .loi b{display:block;font-size:17px;color:var(--tx);margin-bottom:3px}
.batnho .loi span{font-size:14px;color:var(--tx2)}
.batnho form{display:grid;gap:12px;max-width:none;margin:0}
.batnho .hint{margin:12px 0 0;font-size:12.5px;color:var(--tx2)}
@media (min-width:820px){
  .batnho{display:grid;grid-template-columns:minmax(200px,.9fr) 2.1fr;gap:26px;align-items:center;padding:24px 26px}
  .batnho .loi{margin:0}
  .batnho form{grid-template-columns:1fr 1fr 1fr auto;align-items:end}
  .batnho .hint{grid-column:1/-1;margin-top:2px}
}

/* ===== TRA CỨU THÔNG SỐ CĂN ===== */
.tracuu{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:26px;box-shadow:var(--sh)}
.tracuu .tim{display:grid;gap:12px}
.tracuu .tim input{width:100%;font-size:17px;letter-spacing:.02em}
@media (min-width:640px){
  .tracuu .tim{grid-template-columns:1fr auto;align-items:end}
}
.tracuu .goiy{margin:12px 0 0;font-size:13.5px;color:var(--tx2)}
.tracuu .goiy b{color:var(--tx)}
.tracuu .chip{display:inline-block;margin:5px 6px 0 0;padding:4px 11px;font-size:13px;
  border:1px solid var(--line);border-radius:999px;background:var(--bg2);
  color:var(--acc);cursor:pointer;font-weight:600}
.tracuu .chip:hover{background:var(--acc-l);border-color:var(--acc)}

/* thẻ kết quả */
.kq{margin-top:22px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.kq .dinh{background:linear-gradient(135deg,var(--acc) 0%,var(--acc-d) 100%);
  color:#fff;padding:18px 22px}
.kq .dinh b{display:block;font-size:26px;letter-spacing:-.02em;line-height:1.2}
.kq .dinh span{font-size:14px;color:rgba(255,255,255,.85)}
.kq .o{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  background:var(--line);gap:1px}
.kq .o > div{background:var(--card);padding:14px 16px}
.kq .o dt{margin:0 0 4px;font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--tx2);font-weight:700}
.kq .o dd{margin:0;font-size:17px;font-weight:650;color:var(--tx)}
.kq .o dd small{font-weight:400;font-size:13px;color:var(--tx2)}
.kq .san{padding:16px 20px;border-top:1px solid var(--line);background:var(--bg2)}
.kq .san .nhan{font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--tx2);font-weight:700;margin:0 0 10px}
.kq .san .cot{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(92px,1fr))}
.kq .san .cot div{background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:9px 10px;text-align:center}
.kq .san .cot b{display:block;font-size:16px;color:var(--acc)}
.kq .san .cot span{font-size:12px;color:var(--tx2)}
.kq .duoi{padding:16px 20px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.kq .duoi p{margin:0;flex:1;min-width:220px;font-size:14px;color:var(--tx2)}
.khong{margin-top:20px;padding:16px 18px;border:1px dashed var(--line);
  border-radius:var(--r);color:var(--tx2);font-size:15px}