/* HTcons — landing page + công cụ ước tính quy mô
   Màu lấy từ chính website xaydunghtcons.vn: #283891 (navy) · #25AAE1 (cyan) */

:root{
  --navy:#283891; --navy-d:#1c2868; --navy-l:#3b4dab;
  --cyan:#25aae1; --cyan-d:#1789b8;
  --ink:#14192e; --body:#4a5169; --muted:#767d94;
  --line:#e3e6ef; --bg:#ffffff; --bg-soft:#f5f7fb; --bg-navy:#1c2868;
  --radius:14px; --shadow:0 4px 24px rgba(20,25,46,.08);
  --shadow-lg:0 12px 40px rgba(20,25,46,.14);
  --wrap:1140px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--body);
  font-family:"Be Vietnam Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
h1,h2,h3,h4{color:var(--ink);line-height:1.25;margin:0 0 .5em;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(1.85rem,5vw,3.05rem);letter-spacing:-.025em}
h2{font-size:clamp(1.5rem,3.6vw,2.25rem);letter-spacing:-.02em}
h3{font-size:1.2rem}
p{margin:0 0 1.1em}
a{color:var(--navy)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.narrow{max-width:820px}
section{padding:72px 0}
@media(max-width:640px){section{padding:52px 0}body{font-size:16px}}
.soft{background:var(--bg-soft)}
.eyebrow{
  display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--cyan-d);margin-bottom:14px;
}
.lead{font-size:1.14rem;color:var(--body)}
.center{text-align:center}

/* ── nút ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 30px;border-radius:var(--radius);font-weight:700;font-size:1.03rem;
  text-decoration:none;border:2px solid transparent;cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
  font-family:inherit;line-height:1.3;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--cyan);color:#fff;box-shadow:0 6px 18px rgba(37,170,225,.34)}
.btn-primary:hover{background:var(--cyan-d);box-shadow:0 10px 26px rgba(37,170,225,.42)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-d)}
.btn-block{width:100%}

/* ── thanh đầu ── */
header{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line);
}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0}
.logo{display:block;text-decoration:none;line-height:1}
.logo img{height:34px;width:auto}
.logo small{display:block;font-size:.63rem;font-weight:600;color:var(--muted);letter-spacing:.13em;text-transform:uppercase;margin-top:3px}
.hot{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--navy);font-weight:700;white-space:nowrap}
.hot em{display:block;font-style:normal;font-size:.7rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.07em}
.hot b{font-size:1.1rem;letter-spacing:-.01em}
@media(max-width:560px){
  .hot em{display:none}
  .hot b{font-size:1.02rem}
  .logo img{height:27px}
  .logo small{display:none}      /* slogan xuống 2 dòng làm header phình trên mobile */
}

/* ── hero ── */
.hero{
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy-d) 55%,#141d4d 100%);
  color:#fff;padding:76px 0 84px;position:relative;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;right:-14%;top:-32%;width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle,rgba(37,170,225,.24),transparent 68%);pointer-events:none;
}
.hero .wrap{position:relative;z-index:1}
.hero h1{color:#fff;max-width:16ch}
.hero .lead{color:rgba(255,255,255,.86);font-size:1.18rem;max-width:56ch}
.hero .eyebrow{color:#7ed4f5}
.hero-cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:30px}
.hero-trust{
  display:flex;flex-wrap:wrap;gap:34px;margin-top:48px;
  padding-top:30px;border-top:1px solid rgba(255,255,255,.19);
}
.hero-trust div strong{display:block;font-size:1.85rem;color:#fff;line-height:1.15;letter-spacing:-.02em}
.hero-trust div span{font-size:.87rem;color:rgba(255,255,255,.72)}

/* ── công cụ ── */
.tool{
  background:#fff;border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--shadow-lg);overflow:hidden;
}
.tool-head{background:var(--navy);color:#fff;padding:24px 30px}
.tool-head h3{color:#fff;margin:0 0 4px;font-size:1.28rem}
.tool-head p{margin:0;color:rgba(255,255,255,.78);font-size:.94rem}
.tool-body{padding:30px}
@media(max-width:640px){.tool-body,.tool-head{padding:22px 18px}}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:640px){.grid2{grid-template-columns:1fr}}
.field{margin-bottom:18px}
.field label{display:block;font-weight:600;color:var(--ink);margin-bottom:7px;font-size:.95rem}
.field .hint{font-weight:400;color:var(--muted);font-size:.85rem}
input[type=number],input[type=text],input[type=tel],select{
  width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:11px;
  font-size:1.02rem;font-family:inherit;color:var(--ink);background:#fff;transition:border-color .15s,box-shadow .15s;
}
input:focus,select:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(37,170,225,.16)}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  padding:9px 17px;border:1.5px solid var(--line);border-radius:999px;background:#fff;
  cursor:pointer;font-size:.94rem;font-weight:600;color:var(--body);font-family:inherit;transition:all .15s;
}
.chip:hover{border-color:var(--cyan)}
.chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}

/* ── kết quả ── */
.result{margin-top:26px;padding-top:26px;border-top:2px dashed var(--line);display:none}
.result.on{display:block;animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.figure{
  background:linear-gradient(135deg,var(--bg-soft),#eaf6fd);border:1px solid #d3e9f6;
  border-radius:var(--radius);padding:24px;text-align:center;margin-bottom:20px;
}
.figure em{display:block;font-style:normal;font-size:.87rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.07em}
/* Dải giá dài hơn con số m² cũ nhiều ("2,15 tỷ – 2,91 tỷ") nên phải co theo bề ngang,
   không để cỡ cố định — mobile 375px mà 2,6rem là tràn dòng, vỡ khối. */
.figure strong{
  display:block;font-size:clamp(1.5rem,6.4vw,2.45rem);color:var(--navy);
  line-height:1.2;margin:8px 0 6px;letter-spacing:-.02em;
  text-wrap:balance;
}
.figure > span b{color:var(--navy)}
/* CHỈ con trực tiếp — nếu để `.figure span` thì nó bắt luôn #tongSan nằm trong <strong> và ép về .95rem */
.figure > span{font-size:.95rem;color:var(--body)}
/* ── Khối khoá giá ──────────────────────────────────────────────────
   Giá tính xong rồi nhưng làm MỜ cho tới khi khách để lại số điện thoại.
   Cố ý cho thấy có kết quả thật phía sau, chứ không phải một ô trống —
   ô trống thì khách bỏ đi, còn con số mờ thì khách muốn biết nó là bao nhiêu.
   Đây KHÔNG phải rào bảo mật: giá trị vẫn nằm trong DOM. Nó là cách dẫn dắt,
   và trang nói thẳng "nhập số điện thoại để xem" chứ không giấu giếm gì. */
.khoa{
  position:relative;border:1px solid #d3e9f6;border-radius:var(--radius);
  overflow:hidden;margin:0 0 22px;background:#fff;
}
.khoa-gia{
  background:linear-gradient(135deg,var(--bg-soft),#eaf6fd);padding:22px 24px;text-align:center;
  filter:blur(9px);user-select:none;pointer-events:none;opacity:.85;
  transition:filter .5s ease,opacity .5s ease;
}
.khoa-gia em{display:block;font-style:normal;font-size:.87rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.07em}
.khoa-gia strong{
  display:block;font-size:clamp(1.5rem,6.4vw,2.45rem);color:var(--navy);
  line-height:1.2;margin:8px 0 6px;letter-spacing:-.02em;
}
.khoa-gia > span{font-size:.95rem;color:var(--body)}
.khoa-gia b{color:var(--navy)}
.khoa-phu{padding:24px;border-top:1px solid var(--line)}
.khoa-icon{font-size:1.7rem;text-align:center;margin-bottom:6px}
.khoa-phu h3{text-align:center;font-size:1.12rem;margin-bottom:8px}
.khoa-phu > p{font-size:.97rem;margin-bottom:18px}
.khoa-cam-ket{
  margin:12px 0 0;font-size:.85rem;color:var(--muted);text-align:center;
}
/* mở khoá */
.khoa.mo .khoa-gia{filter:none;user-select:auto;pointer-events:auto;opacity:1}
.khoa.mo .khoa-phu{display:none}
@media(max-width:640px){.khoa-phu,.khoa-gia{padding:20px 16px}}

.breakdown{list-style:none;padding:0;margin:0 0 20px;font-size:.95rem}
.breakdown li{display:flex;justify-content:space-between;gap:14px;padding:10px 2px;border-bottom:1px solid var(--line)}
.breakdown li:last-child{border-bottom:none;font-weight:700;color:var(--ink)}
.breakdown li span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.tag{background:#eaf6fd;color:var(--navy);border-radius:999px;padding:6px 14px;font-size:.87rem;font-weight:600}
/* ── Vật tư + công trình lân cận ─────────────────────────────────────
   Hai khối này nằm TRƯỚC cửa khoá, cố ý. Chúng là mồi: khách chưa cho số
   vẫn xem được đủ thứ có giá trị, nên có lý do đọc tiếp thay vì đóng tab
   ngay ở bước quy mô. Chuyển chúng vào trong khoá là gỡ mất mồi. */
.muc{font-size:1.05rem;margin:0 0 10px}

/* Nhãn nguồn số. Hai màu khác nhau vì hai độ tin cậy khác nhau —
   xanh lá là số bóc từ hồ sơ HTcons, xám là quy đổi theo định mức ngành.
   Đừng cho chúng cùng màu: gộp lại là nói dối về chỗ con số đến từ đâu. */
.nhan{
  display:inline-block;vertical-align:middle;font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;border-radius:999px;
  padding:3px 8px;margin-left:6px;background:#eef1f4;color:#68727d;
}
.nhan-that{background:#e4f4e8;color:#1f7a3d}
.ghi-nguon{font-size:.83rem;color:var(--muted);margin:-8px 0 22px;line-height:1.55}
.vattu li span:first-child{display:flex;align-items:center;flex-wrap:wrap;gap:2px}
.vattu em{font-style:normal;color:var(--muted);font-size:.88em}
/* dòng cuối bảng vật tư không phải dòng tổng, nên bỏ nét đậm mặc định của .breakdown */
.vattu li:last-child{font-weight:400;color:inherit}

.lancan{display:none;margin:0 0 22px}
.lancan.on{display:block}
.ct-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-bottom:10px}

/* Trên điện thoại, 4 thẻ xếp dọc cao 1.433 px — bằng 1,8 màn hình chỉ để khoe
   công trình. Đo ngày 11/09, và đó là thứ đẩy ô nhập số xuống tận màn hình thứ 4.
   Cho cuộn ngang thì vẫn khoe đủ 4 thẻ mà chỉ chiếm ~330 px. */
@media(max-width:640px){
  .ct-luoi{
    display:flex;gap:10px;margin-bottom:10px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-bottom:6px;
  }
  .ct-luoi .ct-the{flex:0 0 240px;scroll-snap-align:start}
  .ct-luoi::-webkit-scrollbar{height:4px}
  .ct-luoi::-webkit-scrollbar-thumb{background:#cfd8e0;border-radius:4px}
}

/* ── Khối chi tiết gập sẵn ────────────────────────────────────────────
   Bảng quy đổi + vật tư là 718 px số liệu dày. Mở sẵn thì khách lướt qua
   không đọc, lại chắn đường. Gập lại, kèm tóm tắt ngay trên nút để ai
   quan tâm mới mở. */
.chitiet{
  border:1px solid var(--line);border-radius:12px;background:#fff;
  margin:0 0 22px;overflow:hidden;
}
.chitiet summary{
  cursor:pointer;padding:14px 16px;font-weight:700;color:var(--navy);
  font-size:.97rem;list-style:none;display:flex;align-items:center;gap:8px;
}
.chitiet summary::-webkit-details-marker{display:none}
.chitiet summary::before{
  content:'+';font-size:1.15rem;line-height:1;width:20px;height:20px;flex:0 0 20px;
  display:inline-flex;align-items:center;justify-content:center;
  background:#eaf6fd;border-radius:50%;
}
.chitiet[open] summary::before{content:'−'}
.chitiet summary span{font-weight:400;color:var(--muted);font-size:.88rem}
.chitiet-trong{padding:0 16px 4px;border-top:1px solid var(--line)}
.chitiet-trong h3{margin-top:16px}
.ct-the{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
.ct-chu{padding:11px 13px 12px}
/* Khối giữ chỗ cho công trình chưa có phối cảnh — cùng tỷ lệ 4:3 với ảnh thật
   để hàng thẻ không bị so le. Ghi quy mô thay vì để trống trơn. */
.ct-trong{
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;gap:7px;
  background:linear-gradient(135deg,var(--bg-soft),#e3eef6);color:var(--navy);
}
.ct-trong b{font-size:2.5rem;line-height:1;letter-spacing:-.02em}
.ct-trong em{font-style:normal;font-size:.95rem;color:var(--muted);align-self:flex-end;padding-bottom:7px}
/* Khung ảnh giữ tỷ lệ 4:3 cố định. Có aspect-ratio kèm width/height trên thẻ img
   nên trình duyệt chừa sẵn chỗ trước khi ảnh tải xong — không giật layout, thứ
   rất khó chịu khi bốn thẻ cùng nhảy lúc khách đang đọc dở. */
.ct-khung{position:relative;background:#eef2f5}
.ct-anh{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
/* Nhãn Phối cảnh 3D — ĐỪNG GỠ. Ảnh là bản vẽ chứ không phải ảnh chụp nhà đã xây;
   không dán nhãn là để khách tự hiểu nhầm, đúng cái bẫy đã phải gỡ hôm 10/09. */
.ct-dan{
  position:absolute;left:8px;bottom:8px;background:rgba(12,28,44,.82);color:#fff;
  font-size:.72rem;font-weight:600;letter-spacing:.02em;padding:3px 9px;border-radius:999px;
}
.ct-the b{display:block;font-size:.93rem;color:var(--ink);margin-bottom:6px;line-height:1.35}
.ct-tinh{
  display:inline-block;font-size:.82rem;font-weight:700;color:var(--navy);
  background:#eaf6fd;border-radius:999px;padding:3px 10px;margin:0 5px 4px 0;
}
.ct-nhan{
  display:inline-block;font-size:.78rem;color:var(--muted);
  background:#f4f6f8;border-radius:999px;padding:3px 10px;margin:0 5px 4px 0;
}
.ct-xong{background:#e4f4e8;color:#1f7a3d;font-weight:600}

/* Cơ cấu tiền — nằm trong khối bị làm mờ, căn trái cho dễ đọc dù khối cha căn giữa */
.cocau{margin:16px 0 0;font-size:.9rem;text-align:left}
.cocau li{border-bottom-color:rgba(0,0,0,.08)}
.cocau li:last-child{font-weight:400;color:inherit;border-bottom:none}

.note{
  background:#fffaf0;border-left:3px solid #e8a33d;border-radius:0 10px 10px 0;
  padding:14px 16px;font-size:.9rem;color:#7a5a1e;margin:0 0 22px;
}
.note b{color:#5c430f}

/* ── thẻ ── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:22px;margin-top:38px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;transition:transform .18s,box-shadow .18s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card h3{margin-bottom:8px}
.card p{margin:0;font-size:.97rem}
.card .num{
  width:42px;height:42px;border-radius:11px;background:#eaf6fd;color:var(--navy);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem;margin-bottom:15px;
}
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:38px}
.step{position:relative;padding:24px 22px 22px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.step::before{
  counter-increment:s;content:counter(s);position:absolute;top:-15px;left:22px;
  width:34px;height:34px;border-radius:50%;background:var(--cyan);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.95rem;
  box-shadow:0 3px 10px rgba(37,170,225,.4);
}
.step h3{font-size:1.05rem;margin:8px 0 5px}
.step p{margin:0;font-size:.93rem;color:var(--muted)}
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:20px;margin-top:34px}
.quote{background:#fff;border:1px solid var(--line);border-left:3px solid var(--cyan);border-radius:0 var(--radius) var(--radius) 0;padding:22px 24px}
.quote p{font-style:italic;color:var(--ink);margin:0 0 12px;font-size:1.02rem}
.quote span{font-size:.87rem;color:var(--muted)}

/* ── liên hệ ── */
.contact{background:var(--bg-navy);color:#fff}
.contact h2{color:#fff}
.contact .lead{color:rgba(255,255,255,.82)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr;gap:32px}}
.contact-form{background:#fff;border-radius:18px;padding:28px;box-shadow:var(--shadow-lg)}
.contact-form h3{margin-bottom:6px}
.contact-form .sub{font-size:.93rem;color:var(--muted);margin-bottom:20px}
.ways{list-style:none;padding:0;margin:26px 0 0}
.ways li{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}
.ways .ico{width:40px;height:40px;flex:0 0 40px;border-radius:11px;background:rgba(255,255,255,.11);display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.ways em{display:block;font-style:normal;font-size:.8rem;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.07em}
.ways a,.ways b{color:#fff;text-decoration:none;font-weight:700;font-size:1.05rem}
.ok{display:none;background:#eafaf1;border:1px solid #b7e8cd;color:#1a6b42;border-radius:12px;padding:18px;font-size:.96rem}
.ok.on{display:block}
.ok-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.ok-cta .btn{flex:1;min-width:170px;padding:12px 16px;font-size:.96rem}
.err{color:#c0392b;font-size:.88rem;margin-top:6px;display:none}
.err.on{display:block}
footer{background:#131a3d;color:rgba(255,255,255,.62);padding:34px 0;font-size:.89rem}
.foot{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center}
footer a{color:rgba(255,255,255,.85)}
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:10px;padding:10px 14px;
  background:rgba(255,255,255,.97);border-top:1px solid var(--line);box-shadow:0 -4px 20px rgba(0,0,0,.09);
}
.sticky-cta .btn{flex:1;padding:13px 10px;font-size:.97rem}
@media(max-width:640px){
  .sticky-cta{display:flex}
  /* Ẩn khi màn hình mở đầu còn trong tầm nhìn — lúc đó nút của màn hình mở đầu
     và nút của thanh này trùng nhau cả chữ lẫn đích đến, khách phải dừng lại cân
     nhắc một việc vốn không cần cân nhắc. Cuộn qua rồi thanh mới hiện, và lúc đó
     nó có ích thật vì nút gốc đã trôi khỏi màn hình. Xem `thanhDuoi()` trong app.js. */
  .sticky-cta.an{display:none}
  body{padding-bottom:70px}
}
/* Ghi chú 2026-09-10: từng phải chừa 56px dưới thanh nút vì huy hiệu "Powered by Netlify"
   nổi ở góc dưới bên phải và đè lên nút. Đã tắt hẳn huy hiệu trong
   Netlify → Project configuration → General → Powered by Netlify badge (miễn phí),
   nên khoảng chừa đó không cần nữa. Đổi hosting mà huy hiệu quay lại thì thêm
   `padding-bottom:56px` cho `.sticky-cta` trong khối trên. */

/* ── Báo lỗi ô bắt buộc + cảnh báo tỉnh (thêm 19/09 sau góp ý các phòng ban) ──
   Trước đây bấm "Tính ngay" khi để trống thì trang im lặng. Im lặng là trạng
   thái tệ nhất: khách không biết lỗi ở mình hay ở web. */
.buoc{
  display:inline-block;font-size:.62rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:#b23b2e;background:#fdeceb;border-radius:4px;
  padding:1px 6px;margin-left:4px;vertical-align:1px;
}
.loi-o{
  display:none;margin:6px 0 0;font-size:.88rem;font-weight:600;color:#b23b2e;line-height:1.45;
}
.loi-o.on{display:block}
input.o-loi,select.o-loi{border-color:#d9503f;box-shadow:0 0 0 3px rgba(217,80,63,.13)}
.canh-bao{
  display:none;margin:0 0 12px;padding:10px 14px;font-size:.92rem;line-height:1.5;
  color:#7a4a12;background:#fdf4e3;border:1px solid #f0d9a8;border-left:3px solid #d99a2b;
  border-radius:8px;
}
.canh-bao.on{display:block}

/* ── Khối "Thêm chi tiết để chính xác hơn" (gập sẵn, 19/09) ──────────── */
.them{border:1px solid var(--line);border-radius:12px;background:var(--bg-soft);margin:4px 0 18px}
.them>summary{
  list-style:none;cursor:pointer;padding:13px 16px;display:flex;flex-direction:column;gap:2px;
  border-radius:12px;transition:background .15s;
}
.them>summary::-webkit-details-marker{display:none}
.them>summary::after{
  content:"";position:absolute;right:18px;margin-top:6px;width:8px;height:8px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .18s;
}
.them>summary{position:relative;padding-right:44px}
.them[open]>summary::after{transform:rotate(225deg);margin-top:10px}
.them>summary:hover{background:#eef1f8}
.them>summary b{font-size:.98rem;color:var(--ink);font-weight:700}
.them>summary em{font-style:normal;font-size:.83rem;color:var(--muted);line-height:1.45}
.them-trong{padding:2px 16px 16px;border-top:1px solid var(--line)}
.them-trong .field:last-child{margin-bottom:0}

/* ── Diện tích quy đổi: phép cộng + nút (i) ──────────────────────────── */
.hoi{
  display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;
  border-radius:50%;border:1.4px solid currentColor;background:none;color:inherit;
  font:700 .68rem/1 "Be Vietnam Pro",sans-serif;cursor:pointer;opacity:.62;
  vertical-align:1px;margin-left:3px;padding:0;
}
.hoi:hover{opacity:1}
.cong-thuc{
  margin:10px 0 0;font-size:.87rem;line-height:1.6;color:var(--body);
  background:rgba(255,255,255,.5);border-radius:8px;padding:8px 12px;
}
.cong-thuc b{color:var(--navy);font-weight:700}
.giai-thich{
  margin-top:10px;padding:12px 14px;background:rgba(255,255,255,.62);
  border-radius:8px;font-size:.89rem;line-height:1.65;text-align:left;color:var(--body);
}
.giai-thich b{display:block;color:var(--ink);margin-bottom:3px}
.giai-thich a{display:inline-block;margin-top:6px;font-weight:600}

/* ── Biểu đồ cơ cấu chi phí (góp ý #6) ──────────────────────────────── */
.cocau-thanh{display:flex;height:30px;border-radius:7px;overflow:hidden;margin:14px 0 10px}
.cocau-thanh span{display:flex;align-items:center;justify-content:center;min-width:0}
.cocau-thanh em{
  font-style:normal;font-size:.76rem;font-weight:700;color:#fff;
  white-space:nowrap;overflow:hidden;text-shadow:0 1px 2px rgba(0,0,0,.18);
}
.cham{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:7px;vertical-align:0}

/* ── Tiến độ công trình: mỗi trạng thái một màu (góp ý #8) ───────────── */
.ct-nhan.td-xong{background:#e7f4ec;color:#1f6b3e;border-color:#c2e3d0}
.ct-nhan.td-hoanthien{background:#e8f1fb;color:#1f5a92;border-color:#c5dcf2}
.ct-nhan.td-thicong{background:#fdf3e2;color:#8a5a12;border-color:#f2ddb4}
.ct-nhan.td-khoicong{background:#f3eefb;color:#5b3d8f;border-color:#ddd0f0}
.ct-nhan.td-chuanbi,.ct-nhan.td-khac{background:#f0f2f6;color:#5a6274;border-color:#dfe3ec}

/* ── Link sang website công ty trong khối công trình (góp ý #9) ──────── */
.xem-them-ct{margin:14px 0 6px;font-size:.94rem;font-weight:600}

/* ── Dải con số app.html (19/09) ─────────────────────────────────────
   Phòng MKT xin thêm uy tín ở màn hình đầu. Bản 11/09 từng đáp bằng hai khối
   bằng chứng và đẩy ô nhập xuống 4,1 màn hình điện thoại — phải gỡ. Dải này
   nằm NGANG, một dòng, tốn ~40px: nói cùng một điều mà không chắn đường. */
.mini-trust{
  display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;
  margin:14px auto 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.17);max-width:560px;
}
.mini-trust div{display:flex;align-items:baseline;gap:5px;line-height:1.35}
.mini-trust strong{font-size:1.02rem;font-weight:800;color:#fff}
.mini-trust span{font-size:.79rem;color:rgba(255,255,255,.78)}
@media(max-width:560px){
  .mini-trust{gap:2px 13px}
  .mini-trust strong{font-size:.95rem}.mini-trust span{font-size:.74rem}
}

/* ── Khối "Con số trên đã gồm những gì" (sếp chốt 19/09: tặng thiết kế) ── */
.gom-gi{
  margin:18px 0 0;padding:16px 18px;border-radius:12px;
  background:#eef6f0;border:1px solid #cfe5d6;font-size:.94rem;line-height:1.65;
}
.gom-gi>b{display:block;color:#1f6b3e;margin-bottom:8px;font-size:.98rem}
.gom-gi ul{margin:0;padding-left:20px}
.gom-gi li{margin-bottom:6px;color:var(--body)}
.gom-gi li:last-child{margin-bottom:0}
.gom-gi li b{color:var(--ink)}

/* ── Popup xem phối cảnh 3D (phòng MKT xin 19/09) ─────────────────────
   Ảnh trong thẻ chỉ rộng ~170px. Đây là chỗ duy nhất khách xem được ảnh
   ở cỡ thật mà không phải rời trang. */
.ct-the.bam-duoc{cursor:zoom-in;transition:transform .15s,box-shadow .15s}
.ct-the.bam-duoc:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.ct-the.bam-duoc:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.ct-the.bam-duoc .ct-khung::after{
  content:"Bấm để xem lớn";position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
  background:rgba(20,25,46,.78);color:#fff;font-size:.66rem;font-weight:600;
  padding:3px 9px;border-radius:99px;white-space:nowrap;opacity:0;transition:opacity .15s;
}
.ct-the.bam-duoc:hover .ct-khung::after,
.ct-the.bam-duoc:focus-visible .ct-khung::after{opacity:1}

.xem-anh{
  position:fixed;inset:0;z-index:90;background:rgba(12,16,32,.9);
  display:flex;align-items:center;justify-content:center;padding:24px;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.xem-anh[hidden]{display:none}
.xem-anh-khung{margin:0;max-width:min(1000px,100%);max-height:100%;display:flex;flex-direction:column;gap:12px}
.xem-anh-khung img{
  max-width:100%;max-height:78vh;width:auto;height:auto;margin:0 auto;
  border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.xem-anh-khung figcaption{
  color:rgba(255,255,255,.88);font-size:.92rem;line-height:1.55;text-align:center;
}
.xem-anh-khung figcaption b{
  display:inline-block;background:var(--cyan);color:#06263a;font-size:.72rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:2px 8px;border-radius:5px;margin-right:6px;vertical-align:1px;
}
.xem-anh-dong{
  position:absolute;top:14px;right:16px;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.12);color:#fff;
  font-size:1.6rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.xem-anh-dong:hover{background:rgba(255,255,255,.22)}
.xem-anh-dong:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
@media(max-width:640px){
  .xem-anh{padding:14px}
  .xem-anh-khung img{max-height:68vh}
  .xem-anh-dong{top:8px;right:10px;width:38px;height:38px}
}

/* ── Chân trang gọn cho app.html (phòng MKT xin năm thành lập, 19/09) ── */
.chan-gon{
  padding:22px 0 28px;text-align:center;font-size:.86rem;color:var(--muted);
  border-top:1px solid var(--line);background:var(--bg);margin-top:8px;
}
.chan-gon a{color:var(--navy);font-weight:600}