/* =====================================================================
   Harbor Real — BẢN VÁ GIAO DIỆN AN TOÀN (28/09/2026)
   Nguồn: review thiết kế harborreal.com.vn (mobile trước).
   Cách chèn: <link rel="stylesheet" href="harbor-fix.css?v=20260928">
   đặt NGAY TRƯỚC </head> (sau mọi <style> inline trong head) của các trang
   dùng styles.css. KHÔNG chèn vào stress-test-vay-mua-nha.html (giao diện
   riêng Quy hoạch Gia sản — xem HUONG-DAN.md mục 3).
   Nguyên tắc: không đổi màu thương hiệu, không đổi bố cục lớn.
   ===================================================================== */

:root{
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --tap:44px;
}

/* ---------------------------------------------------------------------
   1. [ĐỎ] Khối "Tính thử dòng tiền" bị cắt ~140px trên mobile
   Gốc: styles.css:61 .more{white-space:nowrap} + link dài ở index.html:436
   làm min-content của .calc = ~468px; .tool dùng track 1fr (= minmax(auto,1fr))
   ở index.html:142-143 nên track phình theo min-content, .tool overflow:hidden
   (index.html:141) cắt mất phần thừa.
   --------------------------------------------------------------------- */
.tool{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.tool .side,.tool .calc{min-width:0}
.tool .more,.res .more{white-space:normal}
@media (max-width:760px){
  .tool{grid-template-columns:minmax(0,1fr)}
  .tool .side{padding:24px 20px}
  .tool .calc{padding:22px 18px}
}

/* 1b. cong-cu.html:22-23,29 — cùng lỗi: .tool-grid track 1fr + <code> URL
   white-space:nowrap trong .urlbox => .tcard rộng 383px, trang cuộn ngang 8px ở 375px. */
.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.tcard,.tcard .urlbox{min-width:0}
@media (max-width:760px){.tool-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------------------------------------------------------------------
   2. [ĐỎ/CAM] Header mobile cao 199px -> ~100px
   Gốc: .top .wrap flex-wrap (styles.css:32) + .nav flex:1 0 100% wrap nhiều
   hàng (styles.css:38) + nút EN, nút gọi (.call do chatbot.js:353 chèn),
   ô ngôn ngữ, nút theme dồn thành 3-4 hàng.
   Cách vá: hàng 1 = logo + ngôn ngữ + theme; hàng 2 = menu 1 hàng vuốt ngang.
   Nút gọi trên header ẩn vì đã có .mcall cố định ở đáy (cùng số, cùng tel:).
   --------------------------------------------------------------------- */
@media (max-width:640px){
  .top .wrap{min-height:0;gap:6px 8px;padding-top:6px;padding-bottom:0}
  .brand-logo{height:40px}
  .top .wrap > a[href="index-en.html"]{display:none}   /* trùng với ô chọn ngôn ngữ */
  .top .call,.top .cta{display:none}                  /* đã có .mcall ở đáy */
  .langsel{min-height:var(--tap);margin-right:0}
  .top .tg{width:var(--tap);height:var(--tap)}

  .nav{
    flex:1 0 100%;flex-wrap:nowrap;justify-content:flex-start;
    overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
    gap:0 2px;padding:0 24px 0 0;margin:0;
    border-top:1px solid var(--line);
    -webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);
            mask-image:linear-gradient(90deg,#000 86%,transparent);
  }
  .nav > *{flex:0 0 auto}
  .nav a,.nav-dd-t{min-height:var(--tap);display:inline-flex;align-items:center}

  /* Menu con: thoát khỏi vùng cuộn của .nav, bám theo .top (sticky = đã định vị) */
  .nav-dd{position:static}
  .nav-dd-menu{position:absolute;top:100%;left:12px;right:12px;transform:none;min-width:0}
  .nav .nav-dd-menu a{min-height:var(--tap);display:flex;align-items:center;white-space:normal}

  /* Chừa chỗ cho nút gọi + bong bóng chat cố định ở đáy */
  body{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
  .mcall{bottom:max(18px,env(safe-area-inset-bottom))}
}

/* du-an.html:72 — thanh lọc sticky top:62px nằm dưới header 199px
   và bản thân cao ~250px trên mobile -> thôi dính trên mobile. */
@media (max-width:820px){
  .filters{position:static;padding-top:12px}
}

/* ---------------------------------------------------------------------
   3. [CAM] Vùng bấm >= 44px trên màn cảm ứng
   --------------------------------------------------------------------- */
@media (pointer:coarse){
  .search select,.search .go,.fb select,.reset,.lhead select,
  .seg button,.tcard .acts a,.tcard .acts button,.share-menu button,
  .chips button,.social button{min-height:var(--tap)}
  .pg a{width:var(--tap);height:var(--tap)}
  #hb-close{min-width:var(--tap);min-height:var(--tap)}
  .hb-acts button,.hb-quick button{min-height:40px}
  .hb-input button{width:var(--tap);height:var(--tap)}

  /* iOS Safari tự phóng to khi focus ô nhập < 16px */
  .search select,.search input,.fb select,.lhead select,.langsel,
  .inp,.numin,.hb-input input,.hb-lead input{font-size:16px}
}

/* ---------------------------------------------------------------------
   4. [CAM] Chữ nhãn quá nhỏ (11.2–12.8px) -> >= 12.5–14px
   --------------------------------------------------------------------- */
.search .f label{font-size:.8rem;letter-spacing:.04em}           /* index.html:96  11.52px -> 12.8px */
.fb label{font-size:.8rem;letter-spacing:.04em}                  /* du-an.html:76   11.2px -> 12.8px */
.demoTag{font-size:.78rem}                                       /* styles.css:101  11.2px -> 12.5px */
.pc .ph .badge,.pc .ph .st,.pc .badge,.pc .st{font-size:.78rem}  /* index.html:128,130 · du-an.html:89-90 */
.pc .meta span{font-size:.8rem}                                  /* index.html:135 · du-an.html:96 */
.pc .price small{font-size:.78rem}                               /* du-an.html:99 */
.strip .s .d{font-size:.875rem}                                  /* index.html:113  12.8px -> 14px */
.dir{font-size:.75rem}                                           /* gem-park:133   10.56px -> 12px */
.dir .d{font-size:.82rem}
.dir.center div[style]{font-size:.72rem !important}              /* JS gem-park:428 ghi inline .6rem */
.hb-foot{font-size:.75rem}                                       /* styles.css:256  10.9px -> 12px */
.buybox .cx,.phero .tags span{font-size:.8rem}                   /* gem-park:95,70 */

/* Heading tiếng Việt: dấu chồng cần line-height >= ~1.15 */
.hero h1,.head h1,.phero h1{line-height:1.18}

/* ---------------------------------------------------------------------
   5. [CAM] Tương phản chữ (không đụng màu thương hiệu)
   --------------------------------------------------------------------- */
.cta p{color:#E3EDF5}                    /* #B9D2DB trên #1766AE = 3.75:1 -> 4.99:1 */
.tool .side p{color:#E3EDF5}
:root[data-theme="dark"] .cta p,
:root[data-theme="dark"] .tool .side p{color:var(--muted)}
.pc .price .cf{color:#0B7A50}            /* tide #0F8A5B cỡ 12.5px = 4.37:1 -> 5.37:1 */
:root[data-theme="dark"] .pc .price .cf{color:var(--tide)}

/* ---------------------------------------------------------------------
   6. [CAM/VÀNG] Chuyển động
   --------------------------------------------------------------------- */
/* 6a. Nút play video: transition:.2s (= all) -> thuộc tính cụ thể (index.html:298).
       Tăng độ đặc hiệu vì khối <style> của video nằm trong body, sau file này. */
.hero-video .hv-play{transition:transform .16s var(--ease-out),background-color .16s ease}
/* Vòng sóng quanh nút play: lặp vô hạn -> 3 lần rồi dừng (index.html:301) */
.hero-video .hv-play::after{animation-iteration-count:3}

/* 6b. Nổi thẻ khi hover chỉ bật với chuột, tránh "dính hover" khi chạm */
@media (hover:none){
  .pc:hover,.fc:hover,.jc:hover{transform:none}
  #hb-toggle:hover{transform:none}
  .hero-video .hv-play:hover{transform:translate(-50%,-50%)}
}
.pc,.jc,.fc{transition-timing-function:var(--ease-out)}

/* 6c. Phản hồi khi nhấn: co 0.97 ngay lúc chạm */
.btn,.search .go,.cta .b1,.cta .b2,.top .call,.mcall,.buybox .b1,.buybox .b2,
.reset,.tcard .acts a,.tcard .acts button,.hb-lead button,.hb-input button{
  transition:transform .12s var(--ease-out);
}
.btn:active,.search .go:active,.cta .b1:active,.cta .b2:active,.top .call:active,
.mcall:active,.buybox .b1:active,.buybox .b2:active,.reset:active,
.tcard .acts a:active,.tcard .acts button:active,.hb-lead button:active,
.hb-input button:active{transform:scale(.97)}

/* 6d. Khung chat mở: hiện từ góc nút bấm thay vì bật tức thì */
#hb-root.hb-open #hb-panel{transform-origin:bottom right;animation:hbIn .2s var(--ease-out)}
@keyframes hbIn{from{opacity:0;transform:scale(.96) translateY(6px)}}

/* 6e. Khung chat mobile: 100vh bị thanh địa chỉ iOS che -> dùng dvh */
@supports (height:100dvh){
  #hb-panel{max-height:calc(100dvh - 100px)}
  @media (max-width:460px){#hb-panel{height:calc(100dvh - 90px)}}
}

/* 6f. Tôn trọng "Giảm chuyển động" của hệ điều hành */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .pc:hover,.fc:hover,.jc:hover,#hb-toggle:hover{transform:none !important}
}

/* ---------------------------------------------------------------------
   7. [VÀNG] Lưới ảnh Gem Park trên mobile (du-an-gem-park.html:76,82)
   5 ô nhưng chỉ khai báo 2 hàng 1fr trong khung cao 300px -> hàng 3 (ô 4-5)
   cao 0, chú thích "Tiến độ công trường"/"Vị trí kết nối" đè lên hàng 2.
   --------------------------------------------------------------------- */
@media (max-width:640px){
  .gallery{height:auto;grid-template-rows:200px;grid-auto-rows:120px}
}

/* ---------------------------------------------------------------------
   8. TUỲ CHỌN — CHỜ ANH DUYỆT (đang tắt). Cam #EF5A28 làm chữ nhỏ trên nền
   sáng chỉ đạt 3.14–3.41:1; chữ trắng trên nút cam 3.41:1 (chuẩn AA 4.5:1).
   Đề xuất thêm 1 sắc "cam đậm" #C24116 cho CHỮ và nền nút (5.17:1),
   giữ #EF5A28 cho mảng lớn/trang trí.
   ---------------------------------------------------------------------
*/
:root{--brass-ink:#C24116}
.eyebrow,.hero .eye,.more,.sh .more,.fc .lnk,.persc .go,.nc .dt,.pol .tag,.tl .d{color:var(--brass-ink)}
.btn-brass,.search .go,.cta .b1,.top .call,.mcall,.buybox .b1{background:var(--brass-ink)}
.btn-brass:hover,.search .go:hover,.top .call:hover{background:#A93810}


/* ---------------------------------------------------------------------
   9. [VÀNG] Bấm link neo (#congcu, #duan…) tiêu đề bị header sticky che
   --------------------------------------------------------------------- */
section[id]{scroll-margin-top:124px}
@media (max-width:640px){section[id]{scroll-margin-top:110px}}

/* ---------------------------------------------------------------------
   10. [ĐỎ] Trang dự án/bài viết: lưới viết inline (1.5fr .9fr, repeat(4..5),
   1fr 1fr) không có media query → tràn ngang trên điện thoại.
   --------------------------------------------------------------------- */
@media (max-width:760px){
  [style*="grid-template-columns:1.5fr .9fr"]{grid-template-columns:minmax(0,1fr)!important}
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:480px){
  [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:minmax(0,1fr)!important}
}