/* * Trang TÌM NHÀ ĐẤT TRÊN BẢN ĐỒ (/ban-do-nha-dat/) — kiểu bản đồ Grab. * Điện thoại trước (360px), rồi máy tính (>= 900px). Xem class-bds-tim-ban-do.php. * * Tiền tố lớp: `tbd` (tìm bản đồ). Màu lấy từ token của theme (tokens.css), có mức dự phòng. */ body.tbd-trang { overflow: hidden; overscroll-behavior: none; } /* Nút chat nổi của website: đẩy lên khỏi ngăn danh sách trên điện thoại. */ body.tbd-trang .bds-chat { bottom: 126px; } /* Đang mở thẻ tin / bảng lọc / danh sách: tạm ẩn nút chat (xem capNhatChat() trong tim-ban-do.js). */ @media (max-width: 899.98px) { body.tbd-an-chat .bds-chat__fab { display: none; } /* * Đã đăng nhập ⇒ WordPress chèn thanh quản trị đen trên cùng (46px dưới 783px, 32px từ 783px), nằm * TRÊN bản đồ toàn màn ⇒ che ô tìm kiếm (anh Thành báo kèm ảnh 29/09/2026). Dời bản đồ xuống đúng * bằng chiều cao thanh. Khách chưa đăng nhập không có lớp .admin-bar nên không đổi gì. * (Máy tính >= 900px đã tự đo đáy header trong JS — --tbd-top — nên không cần.) */ body.admin-bar .tbd { top: 46px; } } @media (min-width: 783px) and (max-width: 899.98px) { body.admin-bar .tbd { top: 32px; } } .tbd { --tbd-do: var(--c-primary, #ca252b); --tbd-do-nhat: var(--c-primary-50, #fdecee); --tbd-chu: var(--c-text, #333); --tbd-mo: var(--c-muted, #666); --tbd-vien: var(--c-border, #e3e3e3); --tbd-bong: 0 2px 8px rgba(0, 0, 0, .16); --tbd-thap: 112px; /* chiều cao ngăn danh sách khi thu gọn */ --tbd-tren-h: 112px; /* JS đo lại chiều cao thanh tìm + hàng lọc */ position: fixed; inset: 0; z-index: 60; background: #e9e6df; color: var(--tbd-chu); font-family: var(--font, system-ui, sans-serif); font-size: 15px; } .tbd svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; } .tbd button { font: inherit; color: inherit; cursor: pointer; } .tbd [hidden] { display: none !important; } /* ---------- Thanh tìm + hàng lọc (nổi trên bản đồ) ---------- */ .tbd__tren { position: absolute; top: 0; left: 0; right: 0; z-index: 700; /* Sát mép trên để không che tầm nhìn (ảnh anh Thành 01/11/2026). `env()` chỉ cộng tối đa 12px: trình duyệt/nhúng (Zalo, Chrome) đã tự tránh tai thỏ, cộng hết inset làm thanh tụt xuống ~40px. Có thanh quản trị thì cả khối .tbd đã dời xuống 46/32px nên không chồng. */ padding: 4px 10px 0; padding: calc(4px + min(env(safe-area-inset-top), 12px)) 10px 0; pointer-events: none; } .tbd__tren > * { pointer-events: auto; } .tbd__hang-tim { position: relative; display: flex; gap: 8px; align-items: center; } .tbd__nut-tron { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 0; box-shadow: var(--tbd-bong); color: var(--tbd-chu); } .tbd__nut-tron:hover { background: #f6f6f6; } .tbd__nut-tron[aria-pressed="true"] { background: var(--tbd-do); color: #fff; } .tbd__nut-tron.dang-chay svg { animation: tbd-xoay 1s linear infinite; } @keyframes tbd-xoay { to { transform: rotate(360deg); } } .tbd__tim { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 6px 0 14px; border-radius: 23px; background: #fff; box-shadow: var(--tbd-bong); color: var(--tbd-mo); } .tbd__tim input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: inherit; font-size: 16px; color: var(--tbd-chu); /* 16px: iPhone không tự phóng to khi gõ */ } .tbd__tim input::-webkit-search-cancel-button { display: none; } .tbd__tim:focus-within { box-shadow: 0 0 0 2px var(--tbd-do), var(--tbd-bong); } .tbd .tbd__tim input:focus-visible { outline: 0; } /* khung ô tìm đã có vòng đỏ (focus-within) — bỏ viền thứ hai bên trong */ .tbd__xoa-q { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -6px; border: 0; background: none; border-radius: 50%; } .tbd__chips { display: flex; gap: 8px; margin: 8px -10px 0; padding: 0 10px 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-x; overscroll-behavior-x: contain; /* vuốt dải chip không kéo nhầm bản đồ */ } /* * Còn chip phía sau (gói UI/UX vòng 3, 29/09/2026): mép phải mờ dần + nút “›” 44px (JS gắn .co-them và * hiện .tbd__chips-tiep); cuộn tới cuối thì cả hai tắt. Đo trước: dải ~809px trong màn 360–390px mà * không có dấu hiệu nào ⇒ khách dễ bỏ sót Giá, Diện tích, Xã, Thêm. */ .tbd__chips.co-them { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent calc(100% - 8px)); mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent calc(100% - 8px)); } .tbd__chips-tiep { position: absolute; right: 4px; z-index: 2; width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--tbd-vien); border-radius: 50%; background: #fff; box-shadow: var(--tbd-bong); color: var(--tbd-chu); } .tbd__chips-tiep[hidden] { display: none; } .tbd__chips::-webkit-scrollbar { display: none; } .tbd-chip { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 12px 0 14px; border-radius: 22px; /* 44px: vùng chạm tối thiểu (trước 36px) */ background: #fff; border: 1px solid var(--tbd-vien); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); font-size: 14px; font-weight: 600; white-space: nowrap; } .tbd-chip[data-mo]::after { content: ""; width: 7px; height: 7px; margin: -3px 2px 0 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .6; } .tbd-chip[data-co="1"] { background: var(--tbd-do-nhat); border-color: var(--tbd-do); color: var(--c-primary-600, #a81d22); } .tbd-chip--xoa { color: var(--tbd-do); border-style: dashed; } .tbd-chip--noi-bat { color: #8a5a00; border-color: #f0c34d; background: #fff8e1; } .tbd-chip--noi-bat[aria-pressed="true"] { background: #e8a200; border-color: #e8a200; color: #3d2a00; } /* chữ nâu đậm trên cam: 6,3:1 (29/09/2026) */ /* ---------- Bản đồ ---------- */ .tbd__ban-do-khu { position: absolute; inset: 0; z-index: 0; } /* z-index 0: gói nút Leaflet (z 800–1000) dưới ngăn danh sách */ .tbd__ban-do { position: absolute; inset: 0; background: #e9e6df; } .tbd .leaflet-control-attribution { font-size: 10px; } /* * CHỈ iOS (mọi trình duyệt trên iPhone/iPad, kể cả Safari và trình duyệt nhúng của Zalo): bỏ `mix-blend-mode: * plus-lighter` mà leaflet.css 1.9.x đặt cho ô nền (sửa một lỗi kẻ trắng của Chrome). WebKit trên iOS hay * vẽ ô pha trộn kiểu này thành trống/xám — nền xám còn ghim vẫn hiện, đúng triệu chứng anh Thành báo * 28/09/2026. Chưa thử được trên iPhone thật nên chỉ ép ở iOS; Chrome/Android/máy tính không đổi. * `-webkit-touch-callout` chỉ WebKit trên iOS hiểu. */ @supports (-webkit-touch-callout: none) { .tbd .leaflet-container img.leaflet-tile { mix-blend-mode: normal; } } .tbd .leaflet-bottom { bottom: var(--tbd-thap); } .tbd__noi--phai { position: absolute; right: 10px; z-index: 650; bottom: calc(var(--tbd-thap) + 76px); /* chừa chỗ nút chat nổi của website (đo web thật 28/09) */ display: flex; flex-direction: column; gap: 10px; transition: bottom .25s ease; } .tbd[data-ds="giua"] .tbd__noi--phai { bottom: calc(50% + 14px); } .tbd[data-ds="cao"] .tbd__noi--phai, .tbd[data-the="1"] .tbd__noi--phai { opacity: 0; pointer-events: none; } .tbd__noi--phai.tbd__noi--an-tam { visibility: hidden; } /* khung thông tin quy hoạch đang mở mà không còn chỗ né: tạm ẩn cột nút phải */ .tbd__quanh { position: absolute; left: 10px; right: 10px; z-index: 660; top: calc(var(--tbd-tren-h) + 4px); background: #fff; border-radius: 14px; box-shadow: var(--tbd-bong); padding: 10px 12px; } .tbd__quanh-dau { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; } #tbd-quanh-ten { border: 0; background: none; text-align: left; font-size: 13px; font-weight: 700; min-height: 44px; padding: 0 4px; flex: 1; } .tbd__quanh.tbd__quanh--thu { right: auto; width: auto; max-width: calc(100% - 84px); padding: 0 8px; } .tbd__quanh--thu .tbd__quanh-tat { margin: 0; } .tbd__quanh-tat { width: 44px; height: 44px; margin: -6px -6px -6px 0; border: 0; background: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } .tbd__quanh-km { display: flex; gap: 6px; margin-top: 8px; overflow-x: auto; scrollbar-width: none; } .tbd__quanh-km button { flex: none; min-width: 52px; height: 34px; padding: 0 10px; border-radius: 17px; border: 1px solid var(--tbd-vien); background: #fff; font-size: 14px; font-weight: 600; } .tbd__quanh-km button[aria-pressed="true"] { background: #1a73e8; border-color: #1a73e8; color: #fff; } .tbd__tim-lai { position: absolute; left: 50%; transform: translateX(-50%); z-index: 660; top: calc(var(--tbd-tren-h) + 92px); height: 38px; padding: 0 16px; border-radius: 19px; border: 0; background: #1a73e8; color: #fff !important; font-weight: 600; font-size: 14px; box-shadow: var(--tbd-bong); white-space: nowrap; } .tbd__quanh[hidden] ~ .tbd__tim-lai { top: calc(var(--tbd-tren-h) + 6px); } .tbd__bao { position: absolute; left: 50%; transform: translateX(-50%); z-index: 670; width: max-content; max-width: calc(100% - 32px); margin: 0; padding: 9px 14px; border-radius: 10px; background: rgba(34, 34, 34, .92); color: #fff; font-size: 14px; line-height: 1.4; text-align: center; box-shadow: var(--tbd-bong); } .tbd__bao { top: calc(var(--tbd-tren-h) + 6px); } .tbd__bao:empty { display: none; } .tbd__bao a, .tbd__bao button { color: #ffd76a; background: none; border: 0; padding: 0; text-decoration: underline; font-weight: 600; } /* Ghim giá */ .tbd-ghim { background: none; border: 0; } .tbd-ghim > span { position: absolute; left: 0; top: 0; transform: translate(-50%, calc(-100% - 7px)); display: inline-block; padding: 4px 8px; border-radius: 14px; background: var(--m, #ca252b); color: #fff; border: 2px solid #fff; font: 700 12.5px/1.2 var(--font, system-ui, sans-serif); white-space: nowrap; box-shadow: 0 1px 5px rgba(0, 0, 0, .35); cursor: pointer; transition: transform .15s ease; } .tbd-ghim > span::after { content: ""; position: absolute; left: 50%; bottom: -8px; margin-left: -5px; border: 5px solid transparent; border-top-color: #fff; border-bottom: 0; border-width: 7px 5px 0; } /* ---- Ghim TIN NỔI BẬT (VIP / bán gấp / đã giảm giá) ---- */ .tbd-ghim__nhan { display: inline-block; margin: -1px 5px 0 -3px; padding: 1px 4px; border-radius: 6px; background: #fff; color: var(--m, #ca252b); font-size: 10px; line-height: 1.3; font-weight: 800; letter-spacing: .02em; vertical-align: 1px; } .tbd-ghim__sao { font-style: normal; margin-right: 3px; } .tbd-ghim--vip > span { background: linear-gradient(180deg, #ffd65a, #e8a200); color: #3b2a00; border-color: #fff; font-size: 13.5px; padding: 5px 10px; box-shadow: 0 0 0 3px rgba(232, 162, 0, .35), 0 2px 8px rgba(0, 0, 0, .35); } .tbd-ghim--vip .tbd-ghim__nhan { color: #b3261e; } .tbd-ghim--gap > span { animation: tbd-gap 1.8s ease-out infinite; } .tbd-ghim--gap:not(.tbd-ghim--vip) > span { background: #d62d20; } .tbd-ghim--giam:not(.tbd-ghim--vip) .tbd-ghim__nhan { color: #1a7f37; } @keyframes tbd-gap { 0% { box-shadow: 0 0 0 0 rgba(214, 45, 32, .55), 0 1px 5px rgba(0, 0, 0, .35); } 70% { box-shadow: 0 0 0 10px rgba(214, 45, 32, 0), 0 1px 5px rgba(0, 0, 0, .35); } 100% { box-shadow: 0 0 0 0 rgba(214, 45, 32, 0), 0 1px 5px rgba(0, 0, 0, .35); } } @media (prefers-reduced-motion: reduce) { .tbd-ghim--gap > span { animation: none; } } .tbd-ghim--chon { z-index: 1000 !important; } .tbd-ghim--chon > span { background: #222; transform: translate(-50%, calc(-100% - 7px)) scale(1.18); transform-origin: 50% 100%; } /* * Ghim ĐANG CHỌN luôn nền tối chữ sáng — kể cả tin nổi bật. Chủ dự án báo 29/09/2026: ghim VIP * đang chọn ra nền đen + chữ nâu (#3b2a00 của VIP) ⇒ "★ 2,75 tỷ" gần như không đọc được. * `.tbd` đứng trước để thắng `.tbd-ghim--gap:not(.tbd-ghim--vip) > span` (ghim GẤP đang chọn vẫn đỏ). */ .tbd .tbd-ghim.tbd-ghim--chon > span { background: #222; color: #fff; border-color: #fff; animation: none; box-shadow: 0 2px 10px rgba(0, 0, 0, .45); } .tbd .tbd-ghim.tbd-ghim--chon.tbd-ghim--vip > span { color: #ffd65a; border-color: #ffd65a; box-shadow: 0 0 0 3px rgba(232, 162, 0, .45), 0 2px 10px rgba(0, 0, 0, .45); } .tbd .tbd-ghim.tbd-ghim--chon > span::after { border-top-color: #fff; } .tbd .tbd-ghim.tbd-ghim--chon.tbd-ghim--vip > span::after { border-top-color: #ffd65a; } .tbd-ghim--da-xem > span { opacity: .78; } .tbd-cum { background: none; } .tbd-cum > div { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(202, 37, 43, .92); color: #fff; border: 3px solid #fff; font: 700 14px/1 var(--font, system-ui, sans-serif); box-shadow: 0 1px 6px rgba(0, 0, 0, .35); } .tbd-cum--lon > div { width: 50px; height: 50px; font-size: 15px; } /* Cụm TIN NỔI BẬT (01/10/2026): viên vàng "★ 5", khác hẳn cụm đỏ thường. */ /* Leaflet xếp lớp theo vĩ độ — cụm đỏ nằm thấp hơn đè lên viên vàng (đo 01/10/2026). Vàng luôn trên. */ .tbd .leaflet-marker-icon.tbd-cum--noi-bat { z-index: 900 !important; } .tbd-cum--noi-bat > div { width: 52px; height: 36px; border-radius: 18px; background: linear-gradient(180deg, #ffd65a, #e8a200); color: #3b2a00; font-size: 14px; box-shadow: 0 0 0 3px rgba(232, 162, 0, .35), 0 2px 8px rgba(0, 0, 0, .35); } .tbd-xa { background: none; border: 0; } .tbd-xa > a { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); display: block; padding: 4px 9px; border-radius: 8px; white-space: nowrap; background: rgba(255, 255, 255, .95); border: 1px solid rgba(0, 0, 0, .15); border-left: 5px solid var(--m, #e05a4e); color: #222; text-decoration: none; font: 12px/1.25 var(--font, system-ui, sans-serif); box-shadow: 0 1px 4px rgba(0, 0, 0, .2); } .tbd-xa b { display: block; font-size: 13px; } .tbd-toi { background: none; } .tbd-toi > span { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: #1a73e8; border: 3px solid #fff; box-shadow: 0 0 0 0 rgba(26, 115, 232, .5); animation: tbd-nhip 2s infinite; } .tbd-toi--diem > span { background: #222; animation: none; } @keyframes tbd-nhip { 70% { box-shadow: 0 0 0 14px rgba(26, 115, 232, 0); } 100% { box-shadow: 0 0 0 0 rgba(26, 115, 232, 0); } } /* ---------- Ngăn danh sách (điện thoại: kéo từ dưới lên) ---------- */ .tbd__ds { position: absolute; left: 0; right: 0; bottom: 0; z-index: 680; height: var(--tbd-thap); max-height: 100%; display: flex; flex-direction: column; background: #fff; border-radius: 16px 16px 0 0; box-shadow: 0 -2px 12px rgba(0, 0, 0, .16); transition: height .25s ease; padding-bottom: env(safe-area-inset-bottom); } .tbd[data-ds="giua"] .tbd__ds { height: 52%; } .tbd[data-ds="cao"] .tbd__ds { height: calc(100% - var(--tbd-tren-h) - 4px); } /* hàng lọc vẫn thấy khi kéo lên hết */ .tbd.dang-keo .tbd__ds { transition: none; } .tbd__ds-dau { position: relative; flex: none; padding: 8px 16px 10px; touch-action: none; cursor: grab; user-select: none; } .tbd__tay-nam { display: block; width: 40px; height: 5px; margin: 0 auto 4px; border-radius: 3px; background: #ccc; } /* Chỉ dấu mở/đóng nhìn thấy được của ngăn danh sách (vòng 3): trước chỉ có tay nắm + nút trong suốt. */ .tbd__ds-goi { display: flex; justify-content: center; align-items: center; gap: 4px; margin: 0 0 6px; font-size: 12.5px; font-weight: 600; color: var(--tbd-do); line-height: 1.3; } .tbd__ds-goi svg { width: 14px; height: 14px; } .tbd__ds-goi-thu { display: none; } .tbd[data-ds="cao"] .tbd__ds-goi-mo, .tbd[data-ds="giua"] .tbd__ds-goi-mo { display: none; } .tbd[data-ds="cao"] .tbd__ds-goi-thu, .tbd[data-ds="giua"] .tbd__ds-goi-thu { display: inline-flex; align-items: center; gap: 4px; } .tbd__ds-goi-mo { display: inline-flex; align-items: center; gap: 4px; } .tbd__ds-hang { display: flex; align-items: center; gap: 10px; } .tbd__dem { flex: 1; min-width: 0; margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3; } .tbd__dem small { display: block; font-size: 13px; font-weight: 400; color: var(--tbd-mo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tbd__sap select { height: 36px; max-width: 128px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--tbd-vien); background: #fff; font: inherit; font-size: 14px; color: var(--tbd-chu); } /* Điện thoại: chữ < 16px làm iOS tự phóng to trang khi chạm vào ô chọn. */ @media (max-width: 899.98px) { .tbd__sap select { height: 40px; max-width: 150px; font-size: 16px; } } .tbd__mo-ds { position: absolute; inset: 0; width: 100%; opacity: 0; border: 0; background: none; z-index: 0; } .tbd__mo-ds:focus-visible { opacity: 1; outline: 2px solid var(--tbd-do); outline-offset: -2px; background: transparent; color: transparent; } .tbd__ds-hang { position: relative; z-index: 1; pointer-events: none; } .tbd__ds-hang select { pointer-events: auto; } .tbd__ds-hang .tbd__luu-duoi { pointer-events: auto; min-height: 44px; font-size: 13px; padding: 0 10px; } .tbd__ds-hang .tbd__luu-duoi[aria-pressed="true"] { background: #b3261e; border-color: #b3261e; color: #fff; } .tbd__ds-hang { flex-wrap: wrap; } .tbd__ds-hang .tbd__dem { flex-basis: 100%; } .tbd__ds-hang .tbd__sap { margin-left: auto; } .tbd__cuon { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--tbd-vien); } .tbd__list { margin: 0; padding: 0; list-style: none; } .tbd-tom-tat { padding: 10px 16px; border-bottom: 1px solid var(--tbd-vien); background: #fff6e0; font-size: 13px; line-height: 1.5; } .tbd-tom-tat p { margin: 0 0 6px; } .tbd-hanh-trinh-dau { display: flex; align-items: center; gap: 4px; } .tbd-hanh-trinh-dau strong { flex: 1; } .tbd-hanh-trinh-dau button { flex: none; width: 44px; height: 44px; border: 0; border-radius: 8px; background: transparent; font-size: 20px; } .tbd-hanh-trinh-dau button:focus-visible { outline: 2px solid var(--tbd-do); } .tbd-hanh-trinh { padding: 12px 16px; list-style: none; } .tbd-hanh-trinh label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .tbd-hanh-trinh select { min-height: 44px; padding: 4px 10px; border: 1px solid #cce5cd; border-radius: 8px; font: inherit; background: white; } .tbd-hanh-trinh > small { display: block; margin-top: 8px; color: var(--tbd-mo); } .tbd-hanh-trinh button:disabled { opacity: .65; cursor: progress; } .tbd-hanh-trinh button { display: grid; grid-template-columns: 28px minmax(0, 1fr) 14px; align-items: center; gap: 12px; width: 100%; padding: 16px; border: 1px solid #cce5cd; border-radius: 16px; background: #eaf5e9; color: #223c29; text-align: left; font: inherit; cursor: pointer; } .tbd-hanh-trinh strong, .tbd-hanh-trinh small { display: block; } .tbd-hanh-trinh strong { font-size: 16px; line-height: 1.4; } .tbd-hanh-trinh small { margin-top: 3px; font-size: 13px; line-height: 1.5; color: #526759; } .tbd-hanh-trinh__icon { font-size: 28px; color: #3c853e; } .tbd-hanh-trinh button:hover { background: #dcefdc; } .tbd-hanh-trinh button:focus-visible { outline: 3px solid #3c853e; outline-offset: 3px; } .tbd-tom-tat .tbd-nut { min-height: 44px; white-space: normal; } .tbd-giup__dem small { display: block; margin-top: 6px; font-size: 13px; } .tbd[data-ds="thap"] .tbd__cuon { visibility: hidden; } .tbd-tin { border-bottom: 1px solid var(--tbd-vien); } .tbd-tin > button { display: grid; grid-template-columns: 104px 1fr; gap: 12px; width: 100%; padding: 12px 16px; border: 0; background: #fff; text-align: left; align-items: start; } .tbd-tin > button:hover, .tbd-tin--chon > button { background: #fff6e0; } .tbd-tin__anh { width: 104px; height: 78px; border-radius: 8px; object-fit: cover; background: #eee; display: block; } .tbd-tin__gia { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 16px; color: var(--tbd-do); } .tbd-tin__gia i { width: 9px; height: 9px; border-radius: 50%; background: var(--m); flex: none; } .tbd-tin__ten { margin: 2px 0 4px; font-size: 15px; line-height: 1.4; font-weight: 500; color: var(--tbd-chu); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tbd-tin__phu { font-size: 14px; color: var(--tbd-mo); line-height: 1.4; } .tbd-tin__cach { color: #1a73e8; font-weight: 600; } .tbd-tin__gia-cu { color: var(--tbd-mo); font-weight: 400; font-size: 13px; } .tbd-tin--vip > button { background: #fffaeb; box-shadow: inset 3px 0 0 #e8a200; } .tbd-nhan-hang { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 3px; } .tbd-nhan { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11.5px; font-weight: 700; line-height: 1.5; } .tbd-nhan--vip { background: #e8a200; color: #3d2a00; } .tbd-nhan--gap { background: #fdecea; color: #b3261e; } .tbd-nhan--giam { background: #e6f4ea; color: #1a7f37; } .tbd__cuoi { padding: 12px 16px 20px; font-size: 14px; color: var(--tbd-mo); text-align: center; } .tbd__cuoi:empty { display: none; } .tbd__cuoi p { margin: 0 0 10px; } .tbd__cuoi a, .tbd__cuoi button.tbd-link { color: var(--c-link, #b81f25); font-weight: 600; background: none; border: 0; padding: 0; text-decoration: underline; } .tbd-nut { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--tbd-vien); background: #fff; color: var(--tbd-chu) !important; font-weight: 600; font-size: 14px; text-decoration: none !important; } .tbd-nut--chinh { background: var(--tbd-do); border-color: var(--tbd-do); color: #fff !important; } .tbd-nut--zalo { background: var(--c-zalo, #0068ff); border-color: var(--c-zalo, #0068ff); color: #fff !important; } /* Khung chờ khi đang nạp */ .tbd-cho { padding: 12px 16px; display: grid; grid-template-columns: 104px 1fr; gap: 12px; } .tbd-cho span { display: block; border-radius: 6px; background: linear-gradient(90deg, #eee, #f6f6f6, #eee); background-size: 200% 100%; animation: tbd-sang 1.2s infinite; } .tbd-cho span:first-child { height: 78px; } .tbd-cho span + span { height: 14px; margin-top: 6px; box-shadow: 0 24px 0 #eee, 0 48px 0 #eee; width: 80%; } @keyframes tbd-sang { to { background-position: -200% 0; } } /* ---------- Thẻ tin đang chọn ---------- */ .tbd__the { position: absolute; left: 10px; right: 10px; z-index: 1100; /* trên nút Leaflet */ bottom: calc(var(--tbd-thap) + 24px); /* chừa dòng ghi nguồn bản đồ */ background: #fff; border-radius: 14px; box-shadow: 0 4px 18px rgba(0, 0, 0, .25); overflow: hidden; } .tbd__the-dong { position: absolute; top: 6px; right: 6px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); } .tbd a.tbd__the-than, .tbd a.tbd__the-than:hover { text-decoration: none; } .tbd__the-than { display: grid; grid-template-columns: 112px 1fr; gap: 12px; padding: 12px; padding-right: 44px; color: inherit; text-decoration: none; } .tbd__the-than img { width: 112px; height: 90px; border-radius: 8px; object-fit: cover; background: #eee; } /* * Hàng nút Chỉ đường / Gọi / Zalo / Chi tiết (04/10/2026). Trước là lưới 4 cột đều nhau: khi người dùng tăng cỡ * chữ trong máy (Android → Cỡ chữ), cột co lại dưới bề rộng chữ "Chỉ đường" ⇒ chữ gãy hai dòng, nút này cao hơn ba * nút kia, chữ lệch trái (anh Thành báo trên điện thoại). Nay: các nút chia đều bề rộng (flex 1 1 0) nhưng KHÔNG * hẹp hơn chữ của nó (min-width: max-content, chữ không xuống dòng); hết chỗ thật thì nút xuống hàng, không bẻ chữ. */ .tbd__the-nut { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 12px; } .tbd__the-nut .tbd-nut { flex: 1 1 0; min-width: max-content; padding: 0 6px; font-size: 13px; flex-direction: column; gap: 2px; min-height: 52px; white-space: nowrap; text-align: center; } .tbd__the-nut svg { width: 18px; height: 18px; } /* ---------- Bảng chọn của từng nút lọc ---------- */ .tbd__nen { position: fixed; inset: 0; z-index: 990; background: rgba(0, 0, 0, .42); } .tbd__bang { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; max-height: 78dvh; max-height: 78vh; display: flex; flex-direction: column; background: #fff; border-radius: 16px 16px 0 0; box-shadow: 0 -4px 20px rgba(0, 0, 0, .2); padding-bottom: env(safe-area-inset-bottom); animation: tbd-len .2s ease; } @keyframes tbd-len { from { transform: translateY(40px); opacity: 0; } } .tbd__bang-dau { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 8px; font-size: 17px; } .tbd__bang-dong { width: 44px; height: 44px; border: 0; background: #f2f2f2; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } .tbd__bang-than { overflow-y: auto; overflow-x: hidden; padding: 4px 16px 16px; } .tbd__bang-than h3 { margin: 12px 0 8px; font-size: 14px; color: var(--tbd-mo); font-weight: 600; } .tbd-chon { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .tbd-chon button { min-height: 46px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--tbd-vien); background: #fff; font-size: 14px; font-weight: 500; text-align: center; line-height: 1.25; } .tbd-chon button:hover { border-color: #bbb; } .tbd-chon button[aria-pressed="true"] { background: var(--tbd-do-nhat); border-color: var(--tbd-do); color: var(--c-primary-600, #a81d22); font-weight: 700; } .tbd-chon--1 { grid-template-columns: 1fr; } .tbd__bang-chan { position: sticky; bottom: -16px; margin: 12px -16px -16px; padding: 12px 16px; background: #fff; border-top: 1px solid var(--tbd-vien); display: flex; gap: 8px; } .tbd__bang-chan .tbd-nut { flex: 1; } .tbd :focus-visible { outline: 2px solid var(--tbd-do); outline-offset: 2px; } /* ================= MÁY TÍNH (>= 900px) ================= */ @media (min-width: 900px) { body.tbd-trang .bds-chat { bottom: 18px; } .tbd { top: var(--tbd-top, 0); z-index: 30; display: grid; grid-template-columns: 400px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); /* minmax: danh sách dài không kéo giãn hàng */ } .tbd__tren { position: relative; grid-column: 1 / -1; z-index: 700; display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #fff; border-bottom: 1px solid var(--tbd-vien); } .tbd__chi-dt { display: none; } .tbd__hang-tim { width: clamp(240px, 26vw, 368px); flex: none; } .tbd__tim { box-shadow: none; border: 1px solid var(--tbd-vien); height: 42px; } .tbd__chips { flex: 1; margin: 0; padding: 0; flex-wrap: wrap; overflow: visible; } .tbd-chip { box-shadow: none; } .tbd__ban-do-khu { position: relative; inset: auto; grid-column: 2; grid-row: 2; } .tbd__noi--phai { top: 12px; bottom: auto !important; opacity: 1 !important; pointer-events: auto !important; } .tbd__quanh { top: 12px; left: 56px; right: auto; width: 340px; } .tbd__tim-lai, .tbd__quanh[hidden] ~ .tbd__tim-lai { top: 12px; } .tbd__quanh:not([hidden]) ~ .tbd__tim-lai { top: 108px; left: 226px; } .tbd__bao { top: 12px; } .tbd .leaflet-bottom { bottom: 0; } .tbd__ds { position: relative; grid-column: 1; grid-row: 2; height: auto !important; min-height: 0; border-radius: 0; box-shadow: none; border-right: 1px solid var(--tbd-vien); z-index: 1; } .tbd__ds-dau { cursor: default; padding: 12px 16px; } .tbd__tay-nam, .tbd__mo-ds, .tbd__ds-goi { display: none; } .tbd[data-ds] .tbd__cuon { visibility: visible; } .tbd__the { left: 16px; right: auto; bottom: 24px; width: 380px; } .tbd__nen { background: transparent; } .tbd__bang { left: var(--x, 16px); right: auto; top: var(--y, 120px); bottom: auto; width: 340px; max-height: 70vh; border-radius: 12px; animation: none; box-shadow: 0 8px 28px rgba(0, 0, 0, .22); } .tbd__bang-dau { padding: 12px 14px 4px; font-size: 15px; } .tbd__bang-dong { width: 32px; height: 32px; } .tbd__bang-than { padding: 4px 14px 14px; } .tbd-chon button { min-height: 40px; } } /* ================= DỄ DÙNG CHO NGƯỜI KHÔNG RÀNH CÔNG NGHỆ (01/10/2026) ================= */ /* Nút chữ "Gần tôi" ở đầu hàng lọc — xanh dương như chấm vị trí của tôi. */ .tbd-chip--gan { color: #1a5fc8; border-color: #9cc0f5; background: #eef4ff; } .tbd-chip--gan svg { width: 17px; height: 17px; margin-right: 2px; } .tbd-chip--gan[aria-pressed="true"] { background: #1a73e8; border-color: #1a73e8; color: #fff; } .tbd-chip--gan::after { display: none; } /* Gợi ý khi gõ ô tìm */ .tbd__goi-y { position: absolute; top: calc(100% + 6px); left: 54px; right: 0; z-index: 1200; margin: 0; padding: 6px 0; list-style: none; max-height: 60vh; overflow-y: auto; background: #fff; border-radius: 14px; box-shadow: 0 6px 22px rgba(0, 0, 0, .22); } .tbd__goi-y li { display: flex; flex-direction: column; justify-content: center; min-height: 48px; padding: 6px 16px; cursor: pointer; } .tbd__goi-y li + li { border-top: 1px solid var(--tbd-vien); } .tbd__goi-y li b { font-size: 15px; font-weight: 600; color: var(--tbd-chu); } .tbd__goi-y li small { font-size: 13px; color: var(--tbd-mo); } .tbd__goi-y li:hover, .tbd__goi-y li[aria-selected="true"] { background: var(--tbd-do-nhat); } .tbd__goi-y li:last-child b { font-weight: 500; color: var(--c-link, #b81f25); } /* Thẻ "Cách dùng bản đồ" */ .tbd__hd { position: absolute; left: 10px; right: 10px; z-index: 1100; bottom: calc(var(--tbd-thap) + 14px); max-height: calc(100% - var(--tbd-tren-h) - var(--tbd-thap) - 28px); overflow-y: auto; padding: 16px; background: #fff; border-radius: 16px; box-shadow: 0 6px 24px rgba(0, 0, 0, .28); } .tbd__hd-ten { margin: 0 0 10px; font-size: 18px; color: var(--tbd-chu); } .tbd__hd-ds { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 10px; } .tbd__hd-ds li { display: grid; grid-template-columns: 58px 1fr; gap: 10px; align-items: center; font-size: 15px; line-height: 1.45; color: var(--tbd-chu); } .tbd__hd-mau { justify-self: center; display: inline-flex; align-items: center; justify-content: center; font: 700 12.5px/1.2 var(--font, system-ui, sans-serif); white-space: nowrap; } .tbd__hd-mau--gia { padding: 4px 7px; border-radius: 14px; background: #ca252b; color: #fff; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); } .tbd__hd-mau--cum { width: 36px; height: 36px; border-radius: 50%; background: rgba(202, 37, 43, .92); color: #fff; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); } .tbd__hd-mau--vip { width: 44px; height: 30px; border-radius: 15px; background: linear-gradient(180deg, #ffd65a, #e8a200); color: #3b2a00; font-size: 15px; } .tbd__hd-mau--gan { width: 38px; height: 38px; border-radius: 50%; background: #eef4ff; color: #1a5fc8; border: 1px solid #9cc0f5; } .tbd__hd-mau--gan svg { width: 20px; height: 20px; } .tbd__hd-mau--loc { padding: 6px 9px; border-radius: 16px; border: 1px solid var(--tbd-vien); background: #fff; color: var(--tbd-chu); font-weight: 600; } /* Liên kết "Báo lỗi bản đồ nền" (OSM fixthemap) — nhỏ, dưới danh sách hướng dẫn, không chiếm chỗ nút. */ .tbd__hd-baoloi { margin: 0 0 12px; text-align: center; font-size: 13px; line-height: 1.4; } .tbd__hd-baoloi a { color: var(--c-link, #b81f25); text-decoration: underline; } .tbd__hd-xong { width: 100%; min-height: 48px; font-size: 15px; } /* Nút mở lại hướng dẫn, cuối danh sách */ .tbd__giup { margin: 0; padding: 4px 16px 22px; text-align: center; font-size: 14px; } .tbd__giup .tbd-link { color: var(--c-link, #b81f25); font-weight: 600; background: none; border: 0; padding: 8px 4px; text-decoration: underline; min-height: 44px; } @media (min-width: 900px) { .tbd__goi-y { left: 0; } .tbd__hd { left: 16px; right: auto; bottom: 24px; width: 400px; max-height: calc(100% - 48px); } } /* ================= ĐÃ ĐI XEM THỰC TẾ — chỉ quản trị viên (02/10/2026, BDS_Di_Xem) ================= */ /* Dấu tròn ở góc phải trên của ghim: xanh lá có ✓ = đã đi xem; cam trơn = chưa đi xem. */ .tbd-ghim__tt { position: absolute; top: -8px; right: -8px; width: 17px; height: 17px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; font: 800 10px/1 var(--font, system-ui, sans-serif); font-style: normal; color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); } .tbd-ghim--tt-roi .tbd-ghim__tt { background: #1a7f37; } .tbd-ghim--tt-chua .tbd-ghim__tt { background: #f57c00; } .tbd-nhan--tt-roi { background: #e6f4ea; color: #1a7f37; } .tbd-nhan--tt-chua { background: #fff1e0; color: #b25e00; } .tbd__the-qt { padding: 0 12px 12px; } .tbd__the-qt .tbd-nut { width: 100%; min-height: 44px; font-size: 14px; } .tbd-nut--tt-chua { background: #fff3e0; border-color: #f5a623; color: #8a4b00 !important; } .tbd-nut--tt-roi { background: #e6f4ea; border-color: #7cc58f; color: #1a7f37 !important; } .tbd-nut[disabled] { opacity: .6; cursor: progress; } .tbd-chip--chua-xem { color: #8a4b00; border-color: #f5c27a; background: #fff3e0; } .tbd-chip--chua-xem[aria-pressed="true"] { background: #f57c00; border-color: #f57c00; color: #fff; } /* ================= HÀNG KÍN + GIÁ KÍN — chỉ quản trị + người được chỉ định (03/10/2026, BDS_Hang_Kin) ================= */ /* * HÀNG KÍN — nổi hẳn khi hiện CHUNG với tin thường (04/10/2026). Bảng màu của bản đồ: đỏ = tin thường, vàng = VIP / * bán gấp / giảm giá, TÍM = hàng kín (chỉ người được cấp quyền thấy). Ghim tím có khoá 🔒, vòng sáng nhấp nháy, * nằm trên mọi ghim khác; cụm tím riêng; dòng trong danh sách có vạch + nền tím nhạt; thẻ tin có viền tím. * Viết `.tbd .tbd-ghim.tbd-ghim--kin:not(.tbd-ghim--chon)` để thắng ghim GẤP (đỏ) / VIP (vàng) mà vẫn nhường * cho ghim ĐANG CHỌN (nền tối chữ sáng). */ .tbd-chip--kin { color: #5a2d91; border-color: #8f6bd1; background: #f1e8fc; box-shadow: 0 1px 4px rgba(111, 66, 193, .35); } .tbd-chip--kin[aria-pressed="true"] { background: #6f42c1; border-color: #6f42c1; color: #fff; } .tbd .tbd-ghim.tbd-ghim--kin:not(.tbd-ghim--chon) > span { background: linear-gradient(180deg, #8a5fe0, #5a2ea8); color: #fff; border-color: #fff; font-size: 13.5px; padding: 5px 10px; box-shadow: 0 0 0 3px rgba(111, 66, 193, .38), 0 2px 8px rgba(0, 0, 0, .35); animation: tbd-kin 2.2s ease-out infinite; } .tbd .tbd-ghim.tbd-ghim--kin:not(.tbd-ghim--chon) .tbd-ghim__nhan { color: #5a2ea8; } @keyframes tbd-kin { 0% { box-shadow: 0 0 0 0 rgba(111, 66, 193, .65), 0 0 0 3px rgba(111, 66, 193, .38), 0 2px 8px rgba(0, 0, 0, .35); } 70% { box-shadow: 0 0 0 13px rgba(111, 66, 193, 0), 0 0 0 3px rgba(111, 66, 193, .38), 0 2px 8px rgba(0, 0, 0, .35); } 100% { box-shadow: 0 0 0 0 rgba(111, 66, 193, 0), 0 0 0 3px rgba(111, 66, 193, .38), 0 2px 8px rgba(0, 0, 0, .35); } } /* Cụm hàng kín: viên tím "🔒 3", nằm trên cụm vàng (900) và cụm đỏ. */ .tbd .leaflet-marker-icon.tbd-cum--kin { z-index: 950 !important; } .tbd-cum--kin > div { width: 56px; height: 36px; border-radius: 18px; background: linear-gradient(180deg, #8a5fe0, #5a2ea8); color: #fff; font-size: 14px; box-shadow: 0 0 0 3px rgba(111, 66, 193, .38), 0 2px 8px rgba(0, 0, 0, .35); animation: tbd-kin 2.2s ease-out infinite; } @media (prefers-reduced-motion: reduce) { .tbd .tbd-ghim.tbd-ghim--kin > span, .tbd-cum--kin > div { animation: none; } } .tbd-nhan--kin { background: #6f42c1; color: #fff; } .tbd-tin--kin > button { background: #f6f0fd; box-shadow: inset 4px 0 0 #6f42c1; } .tbd-tin--kin > button:hover, .tbd-tin--kin.tbd-tin--chon > button { background: #ece0fa; } .tbd__the--kin { border-top: 4px solid #6f42c1; } /* Dòng đầu danh sách ở chế độ hàng kín: số hàng kín + nút đổi chế độ. */ .tbd-kin-ban { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; background: #efe6fb; color: #3f1f73; font-size: 13.5px; } .tbd-kin-ban .tbd-link { flex: none; color: #5a2d91; font-weight: 700; background: none; border: 0; padding: 6px 0; text-decoration: underline; font-size: inherit; cursor: pointer; } /* Hộp "cần đăng nhập + báo quản trị viên" cho người chưa có quyền xem hàng kín. */ .tbd-kin-xin { padding: 4px 2px 8px; font-size: 15px; line-height: 1.5; } .tbd-kin-xin p { margin: 0 0 10px; } .tbd-kin-xin__dau { padding: 10px 12px; border-radius: 10px; background: #f1e8fc; color: #3f1f73; } .tbd-kin-xin__buoc { margin: 0 0 12px; padding: 0; list-style: none; counter-reset: kin; } .tbd-kin-xin__buoc li { counter-increment: kin; position: relative; padding: 6px 0 6px 34px; } .tbd-kin-xin__buoc li::before { content: counter(kin); position: absolute; left: 0; top: 5px; width: 24px; height: 24px; border-radius: 50%; background: #6f42c1; color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; } .tbd-kin-xin__buoc li.xong { color: #1a7f37; } .tbd-kin-xin__buoc li.xong::before { content: "✓"; background: #1a7f37; } .tbd-kin-xin__nut { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; } .tbd-kin-xin__nut .tbd-nut { flex: 1 1 140px; } .tbd-nut--kin { background: #6f42c1; border-color: #6f42c1; color: #fff !important; } .tbd-nut--kin[disabled] { opacity: .7; } .tbd-kin-xin__ok { padding: 10px 12px; border-radius: 10px; background: #e6f4ea; color: #1a5c2c; } .tbd-kin-xin__lh { margin: 0; color: var(--tbd-mo); font-size: 14px; } .tbd-kin-xin__lh a { color: var(--c-link, #b81f25); font-weight: 600; } .tbd-tin__gia-kin { display: inline-block; margin: 2px 0 2px; padding: 1px 8px; border-radius: 10px; background: #efe6fb; color: #5a2d91; font-size: 13px; font-weight: 700; } /* Đang ở chế độ hàng kín: viền tím quanh bản đồ để không nhầm với tin công khai. */ .tbd.tbd--kin .tbd__ban-do { box-shadow: inset 0 0 0 4px rgba(111, 66, 193, .55); } /* ================= LỚP QUY HOẠCH 2030 — chỉ để tham khảo (04/10/2026, tim-ban-do-quy-hoach.js) ================= */ .tbd-chip--quy-hoach { color: #00695c; border-color: #80cbc4; background: #e0f2f1; } .tbd-chip--quy-hoach[aria-pressed="true"] { background: #00796b; border-color: #00796b; color: #fff; } /* trắng trên #00796b: 5,3:1 */ .tbd-chip--quy-hoach.dang-chay { opacity: .7; cursor: progress; } /* Điện thoại: thẻ nằm sát đáy bản đồ, trên ngăn danh sách, chừa cột nút bên phải (nút nổi rộng 44px + lề 10px). */ .tbd__qh { position: absolute; left: 10px; right: 68px; z-index: 660; bottom: calc(var(--tbd-thap) + 10px); max-height: 52%; overflow-y: auto; overscroll-behavior: contain; background: #fff; border-radius: 14px; box-shadow: var(--tbd-bong); padding: 10px 12px; } .tbd[data-ds="giua"] .tbd__qh, .tbd[data-ds="cao"] .tbd__qh, .tbd[data-the="1"] .tbd__qh { display: none; } .tbd__qh-dau { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 4px; font-size: 14px; line-height: 1.3; } .tbd__qh-nut-ds { display: flex; gap: 6px; } .tbd__qh-nut { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 11px; border-radius: 18px; border: 1px solid var(--tbd-vien); background: #fff; color: var(--tbd-chu); font: 600 13px/1.2 var(--font, system-ui, sans-serif); cursor: pointer; } .tbd__qh-nut svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .tbd__qh-nut--tat { color: #b3141a; border-color: #f0b4b7; } .tbd__qh-luu { margin: 0 0 4px; font-size: 12.5px; line-height: 1.35; color: var(--tbd-mo); } .tbd__qh-hang { display: flex; align-items: center; gap: 8px; } .tbd__qh-do { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tbd-chu); } .tbd__qh-do input { flex: 1; min-width: 0; height: 28px; accent-color: #00796b; } .tbd__qh-goi-y { margin: 2px 0 0; font-size: 12.5px; line-height: 1.35; color: #00695c; } .tbd__qh-goi-y[hidden] { display: none; } .tbd__qh-mo-cg { flex: none; min-height: 36px; padding: 0 12px; border-radius: 18px; white-space: nowrap; border: 1px solid var(--tbd-vien); background: #fff; color: var(--tbd-chu); font-size: 13px; font-weight: 600; } .tbd__qh-cg { margin: 8px 0 0; } .tbd__qh-chip-ds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .tbd__qh-chip { display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 3px 8px; border-radius: 18px; border: 1px solid var(--tbd-vien); background: #fff; color: var(--tbd-chu); font-size: 12.5px; font-weight: 600; line-height: 1.2; text-align: left; } .tbd__qh-chip i { flex: none; width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .2); } .tbd__qh-chip[aria-pressed="false"] { background: #f3f3f3; color: #8a8a8a; text-decoration: line-through; } .tbd__qh-chip[aria-pressed="false"] i { opacity: .35; } .tbd__qh-cg-ghi { margin: 8px 0 0; color: var(--tbd-mo); font-size: 12.5px; line-height: 1.4; } .tbd__qh-nguon { margin: 8px 0 0; font-size: 12px; line-height: 1.4; color: var(--tbd-mo); } /* Nhãn chữ trên bản đồ (từ zoom 16): dòng gạch chân = hiện trạng, dòng dưới = quy hoạch. Không bắt chạm. */ .tbd-qh-nhan { background: none; border: 0; pointer-events: none; } .tbd-qh-nhan > * { display: block; position: relative; width: max-content; transform: translate(-50%, -50%); font: 700 11px/1.15 var(--font, system-ui, sans-serif); text-align: center; white-space: nowrap; color: #1b1b1b; text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 3px #fff; } .tbd-qh-nhan__ht { font-weight: 500; text-decoration: underline; color: #444; } .tbd-qh-nhan__qh { color: #b3141a; } .tbd-qh-nhan__ht + .tbd-qh-nhan__qh { margin-top: 0; } /* Khung hiện khi bấm vào bản đồ */ .tbd-qh-popup .leaflet-popup-content { margin: 12px 14px; font-size: 14px; line-height: 1.4; } .tbd-qh-pp__nhom { display: flex; align-items: flex-start; gap: 8px; } .tbd-qh-pp__nhom i { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .2); } .tbd-qh-pp__nho { margin: 4px 0 0; font-size: 12.5px; color: #666; } .tbd-qh-pp__nhan { margin-top: 8px; padding-top: 8px; border-top: 1px solid #eee; font-size: 13px; } .tbd-qh-pp__nhan > span { color: #666; } .tbd-qh-pp__nhan ul { list-style: none; margin: 4px 0 0; padding: 0; } .tbd-qh-pp__nhan li { padding: 2px 0; } .tbd-qh-pp__nhan small { display: block; margin-top: 2px; font-size: 11.5px; color: #777; } .tbd-qh-pp__nhan li + li { margin-top: 6px; padding-top: 6px; border-top: 1px dashed #e3e3e3; } .tbd-qh-nh { margin: 2px 0; line-height: 1.35; } .tbd-qh-nh em { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 8px; background: #eceff1; color: #455a64; font-size: 11px; font-style: normal; font-weight: 700; line-height: 1.6; } .tbd-qh-nh--qh em { background: #fde7ea; color: #b3141a; } /* Rê chuột xem nhanh (máy tính) */ .tbd-qh-hover { position: absolute; left: 0; top: 0; z-index: 710; pointer-events: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; max-width: 260px; padding: 7px 11px; border-radius: 10px; background: rgba(34, 34, 34, .92); color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); font: 600 13px/1.25 var(--font, system-ui, sans-serif); } .tbd-qh-hover[hidden] { display: none; } .tbd-qh-hover i { flex: none; width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(255, 255, 255, .7); } .tbd-qh-hover small { flex-basis: 100%; font-size: 11.5px; font-weight: 400; color: #cfd8dc; } .tbd-qh-pp__luu { margin: 8px 0 0; font-size: 12px; color: #8a4b00; font-weight: 600; } /* Nhãn "Mới" trên nút tới lần bấm đầu tiên */ .tbd-chip__moi { display: inline-block; margin-left: 2px; padding: 1px 6px; border-radius: 9px; background: #e53935; color: #fff; font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: .2px; } .tbd-chip--quy-hoach[aria-pressed="true"] .tbd-chip__moi { display: none; } /* Khung bấm: nút hành động (gọi / Zalo / gửi link) */ .tbd-qh-pp__hanh { margin-top: 10px; padding-top: 10px; border-top: 1px solid #eee; } .tbd-qh-pp__hanh p { margin: 0 0 6px; font-size: 13px; color: #444; } .tbd-qh-pp__nut-ds { display: flex; gap: 8px; } .tbd-qh-pp__nut, .tbd-qh-pp__chia { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--tbd-vien); background: #fff; color: var(--tbd-chu) !important; font: 600 14px/1.2 var(--font, system-ui, sans-serif); text-decoration: none; cursor: pointer; } .tbd-qh-pp__nut svg, .tbd-qh-pp__chia svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .tbd-qh-pp__nut { background: var(--tbd-do); border-color: var(--tbd-do); color: #fff !important; } .tbd-qh-pp__nut--zalo { background: var(--c-zalo, #0068ff); border-color: var(--c-zalo, #0068ff); } .tbd-qh-pp__chia { font-family: inherit; width: 100%; margin-top: 8px; color: #00695c !important; border-color: #80cbc4; background: #e0f2f1; } /* Hướng dẫn "Cách dùng bản đồ": biểu tượng nút Quy hoạch */ .tbd__hd-mau--qh { padding: 6px 8px; border-radius: 16px; background: #00796b; color: #fff; font-size: 12px; } /* Thu nhỏ: bảng chỉ còn một nút nhỏ + nút "Tắt" — lớp quy hoạch vẫn bật, bản đồ thoáng (04/10/2026) */ .tbd__qh-ngan { display: none; } .tbd__qh.tbd__qh--an-tam { visibility: hidden; } /* khung thông tin đang mở mà không còn chỗ né: tạm ẩn nút nhỏ */ .tbd__qh--ngan { right: auto; padding: 0; background: none; box-shadow: none; border-radius: 0; max-height: none; overflow: visible; } .tbd__qh--ngan .tbd__qh-day { display: none; } .tbd__qh--ngan .tbd__qh-ngan { display: flex; align-items: center; gap: 8px; } .tbd__qh-mo, .tbd__qh-tat { min-height: 44px; padding: 0 14px; border: 0; border-radius: 22px; background: #fff; box-shadow: var(--tbd-bong); font: 700 14px/1.2 var(--font, system-ui, sans-serif); cursor: pointer; white-space: nowrap; } .tbd__qh-mo { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; color: #00695c; } .tbd__qh-mo svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .tbd__qh-tat { color: #b3141a; font-weight: 600; } .tbd__qh-chamm { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .18); background: conic-gradient(#ff7fff, #ff7f00, #ffdf7f, #7fff7f, #7fffff, #ff7f7f, #ff7fff); } /* Xem quy hoạch chỗ tôi đang đứng (GPS) */ .tbd__qh-gps { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 40px; margin: 2px 0 6px; padding: 0 12px; border-radius: 20px; border: 1px solid #80cbc4; background: #e0f2f1; color: #00695c; font: 600 13px/1.2 var(--font, system-ui, sans-serif); cursor: pointer; } .tbd__qh-gps svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .tbd__qh-gps.dang-chay svg { animation: tbd-xoay 1s linear infinite; } /* Gợi ý "Bấm thử vào đây" — chỉ lần đầu, mất khi khách bấm bản đồ hoặc sau 12 giây */ .tbd-qh-goi { background: none; border: 0; pointer-events: none; } .tbd-qh-goi__vong { position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%; background: rgba(0, 121, 107, .3); border: 3px solid #fff; box-shadow: 0 0 0 2px #00796b; animation: tbd-qh-nhip 1.6s ease-out infinite; } .tbd-qh-goi__chu { position: absolute; left: 0; top: 34px; transform: translateX(-50%); white-space: nowrap; padding: 6px 11px; border-radius: 14px; background: #00796b; color: #fff; font: 700 13px/1 var(--font, system-ui, sans-serif); box-shadow: 0 1px 4px rgba(0, 0, 0, .3); } @keyframes tbd-qh-nhip { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .tbd-qh-goi__vong { animation: none; } } .tbd-qh-the { padding: 10px 12px; border: 1px solid #80cbc4; border-radius: 12px; background: #e0f2f1; } .tbd-qh-the .tbd-qh-pp__nho { margin-top: 2px; color: #333; } .tbd-qh-the .tbd-qh-pp__luu { color: #00695c; } .tbd-qh-the__luu { color: #00695c; font-weight: 700; white-space: nowrap; } .tbd-qh-goi--tin .tbd-qh-goi__chu { background: #c2185b; } .tbd-qh-goi--tin .tbd-qh-goi__vong { background: rgba(194, 24, 91, .28); box-shadow: 0 0 0 2px #c2185b; } /* Nút "Xem quy hoạch khu này" trong thẻ tin đăng */ .tbd__the-qh { padding: 0 12px 12px; } .tbd__the-qh .tbd-nut { width: 100%; min-height: 44px; font-size: 14px; gap: 8px; color: #00695c !important; background: #e0f2f1; border-color: #80cbc4; } .tbd__the-qh svg { width: 18px; height: 18px; } @media (min-width: 900px) { /* Máy tính: góc trên trái bản đồ, bên phải nút zoom; nếu "tìm quanh đây" đang mở thì đẩy xuống dưới nó. Ở máy tính luôn hiện (không bị ngăn danh sách / thẻ tin che như trên điện thoại) nên phải thắng các luật ẩn ở trên. */ .tbd .tbd__qh { top: 12px; left: 56px; right: auto; bottom: auto; width: 330px; max-height: calc(100% - 28px); } .tbd[data-ds] .tbd__qh, .tbd[data-the] .tbd__qh { display: block; } .tbd .tbd__qh[hidden] { display: none; } .tbd .tbd__qh.tbd__qh--ngan { width: auto; max-height: none; } .tbd .tbd__quanh:not([hidden]) ~ .tbd__qh { top: 108px; max-height: calc(100% - 124px); } } /* * TIN ĐÃ BÁN / NGƯNG BÁN (09/10/2026) — màu XÁM, khác hẳn đỏ (đang rao) / vàng (nổi bật) / tím (hàng kín). * Ghim xám có nhãn ĐÃ BÁN + giá gạch ngang, nằm dưới ghim đang rao; cụm xám "✓ 5 đã bán"; dòng danh sách + thẻ tin mờ đi. */ .tbd-ghim--ban > span { background: #8a919c; color: #fff; border-color: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); opacity: .93; } .tbd-ghim--ban > span::after { border-top-color: #fff; } .tbd-ghim--ban .tbd-ghim__nhan { color: #4b5563; background: #fff; } .tbd-ghim--ban s { text-decoration: line-through; text-decoration-thickness: 1.5px; } .tbd .leaflet-marker-icon.tbd-cum--ban { z-index: 50 !important; } .tbd-cum--ban > div { width: 76px; height: 32px; border-radius: 16px; background: #8a919c; color: #fff; font-size: 12.5px; white-space: nowrap; box-shadow: 0 1px 5px rgba(0, 0, 0, .3); } .tbd-chip--da-ban { color: #4b5563; border-color: #c4c9d2; background: #f3f4f6; } .tbd-chip--da-ban[aria-pressed="true"] { background: #6b7280; border-color: #6b7280; color: #fff; } .tbd-nhan--ban { background: #6b7280; color: #fff; } .tbd-tin--ban > button { background: #f3f4f6; } .tbd-tin--ban > button:hover, .tbd-tin--ban.tbd-tin--chon > button { background: #e8eaee; } .tbd-tin--ban .tbd-tin__anh { filter: grayscale(1); opacity: .75; } .tbd-tin--ban .tbd-tin__gia, .tbd-tin--ban .tbd-tin__ten { color: #6b7280; } .tbd-tin--ban .tbd-tin__gia { text-decoration: line-through; } .tbd-tin--ban .tbd-tin__gia i { background: #8a919c !important; } .tbd__the--ban { border-top: 4px solid #8a919c; } .tbd__the--ban .tbd__the-than img { filter: grayscale(1); opacity: .8; } .tbd__the--ban .tbd-tin__gia, .tbd__the--ban .tbd-tin__ten { color: #6b7280; } .tbd__the--ban .tbd-tin__gia { text-decoration: line-through; } .tbd__the--ban .tbd-tin__gia i { background: #8a919c !important; } .tbd__the-ban { margin: 0 12px 10px; padding: 8px 10px; border-radius: 8px; background: #f3f4f6; color: #374151; font-size: 13.5px; line-height: 1.45; } /* ================= BẢN ĐỒ THÔNG MINH (09/10/2026) ================= * Ô tìm hiểu cả câu + micro, dải "Đã hiểu", nút ♥ Đã lưu, nhãn Mới đăng, khối mặt bằng giá/m² trong thẻ tin, gợi ý nới bộ lọc * khi 0 tin. Màu: đỏ hồng = đã lưu, xanh dương = mới đăng. */ .tbd__mic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border: 0; background: none; border-radius: 50%; color: var(--tbd-mo); } .tbd__mic:hover { background: #f2f2f2; } .tbd__mic[aria-pressed="true"] { background: var(--tbd-do); color: #fff; animation: tbd-nghe 1.2s ease-in-out infinite; } @keyframes tbd-nghe { 50% { box-shadow: 0 0 0 6px rgba(202, 37, 43, .22); } } .tbd__tim .tbd__xoa-q + .tbd__mic { margin-left: -6px; } .tbd-chip--luu { color: #b3261e; border-color: #f2b8b5; background: #fff0ef; } .tbd-chip--luu[aria-pressed="true"] { background: #b3261e; border-color: #b3261e; color: #fff; } /* Dải "Đã hiểu:" — một hàng cuộn ngang dưới hàng nút lọc (điện thoại), xuống dòng riêng trên máy tính. */ .tbd__hieu { display: flex; align-items: center; gap: 6px; margin: 0 -10px; padding: 0 10px 8px; overflow-x: auto; scrollbar-width: none; touch-action: pan-x; overscroll-behavior-x: contain; } .tbd__hieu::-webkit-scrollbar { display: none; } .tbd__hieu-dau { flex: none; display: inline-flex; align-items: center; height: 32px; padding: 0 10px; border-radius: 16px; background: #263238; color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); } .tbd__hieu-nhan, .tbd__hieu-chu { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 6px 0 12px; border-radius: 16px; border: 1px solid var(--tbd-do); background: var(--tbd-do-nhat); color: var(--c-primary-600, #a81d22); font-size: 13px; font-weight: 600; white-space: nowrap; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); } .tbd__hieu-nhan span { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(202, 37, 43, .14); font-size: 11px; } .tbd__hieu-chu { padding: 0 12px; border-style: dashed; border-color: #9e9e9e; background: #fff; color: var(--tbd-chu); font-weight: 500; } .tbd-nhan--moi { background: #e8f0fe; color: #1a56db; } .tbd-tin__dau { display: block; margin-top: 2px; font-size: 12.5px; color: var(--tbd-mo); } .tbd-tin__dau--luu { color: #b3261e; font-weight: 600; } .tbd-tin--da-xem .tbd-tin__ten { color: #5f6368; } /* Nút ♡ Lưu nằm trên góc ảnh của thẻ tin — không chiếm chỗ hàng nút gọi / Zalo. */ .tbd__the-luu { position: absolute; top: 16px; left: 16px; z-index: 2; width: 36px; height: 36px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 0; background: rgba(255, 255, 255, .94); color: #b3261e; font-size: 20px; line-height: 1; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); } .tbd__the-luu[aria-pressed="true"] { background: #b3261e; color: #fff; } .tbd__the-ss { margin: 0 12px 10px; padding: 8px 10px; border-radius: 8px; background: #f5f7f8; color: #37474f; font-size: 13px; line-height: 1.45; } /* 0 tin ⇒ gợi ý bỏ bớt một điều kiện */ .tbd-noi { text-align: left; } .tbd-noi p { color: var(--tbd-chu); } .tbd-noi__ds { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .tbd-noi__ds .tbd-nut { justify-content: space-between; text-align: left; white-space: normal; padding: 8px 14px; line-height: 1.35; } .tbd-noi__ds .tbd-nut b { color: var(--tbd-do); white-space: nowrap; } .tbd__hd-mau--tim { width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--tbd-chu); border: 1px solid var(--tbd-vien); box-shadow: 0 1px 3px rgba(0, 0, 0, .15); } .tbd__hd-mau--luu { width: 36px; height: 36px; border-radius: 50%; background: #b3261e; color: #fff; font-size: 18px; } @media (min-width: 900px) { .tbd__tren { flex-wrap: wrap; } .tbd__hieu { flex-basis: 100%; margin: 0; padding: 0; flex-wrap: wrap; overflow: visible; } .tbd__hieu-nhan, .tbd__hieu-chu, .tbd__hieu-dau { box-shadow: none; } } /* ================= DỄ DÙNG CHO NGƯỜI MỚI (10/10/2026) ================= * Nút "Tìm giúp tôi" (đầu hàng lọc, nổi màu), bảng 4 câu hỏi với nút TO (≥ 60px, chữ 17px), dải "Lần trước: ↻ Tìm lại", * mẫu "Nhờ chúng tôi tìm giúp" (ô nhập 52px, chữ 17px — điện thoại không tự phóng to, người lớn tuổi dễ bấm). */ .tbd-chip--giup { background: var(--tbd-do); border-color: var(--tbd-do); color: #fff; } .tbd-chip--giup:hover { background: var(--c-primary-600, #a81d22); } .tbd-chip--giup svg { width: 18px; height: 18px; } .tbd__hd-giup { width: 100%; margin: 0 0 14px; min-height: 52px; font-size: 15px; line-height: 1.35; white-space: normal; text-align: center; } .tbd__hieu-lai { flex: none; display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid #1a73e8; background: #eef4ff; color: #174ea6; font-size: 13px; font-weight: 600; white-space: nowrap; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); } .tbd__hieu-bo { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--tbd-vien); background: #fff; color: var(--tbd-mo); font-size: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); } .tbd-giup__tien { display: flex; gap: 6px; margin: 2px 0 12px; } .tbd-giup__tien i { flex: 1; height: 6px; border-radius: 3px; background: #e5e7eb; } .tbd-giup__tien i.xong { background: #f2a3a6; } .tbd-giup__tien i.dang { background: var(--tbd-do); } .tbd-giup__hoi { margin: 0 0 4px; font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--tbd-chu); } .tbd-giup__dem { margin: 0 0 12px; min-height: 1.4em; font-size: 14px; color: var(--tbd-mo); } .tbd-giup__dem b { color: var(--tbd-do); } .tbd-chon--to { grid-template-columns: 1fr; gap: 10px; } .tbd-chon--to button { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 60px; padding: 10px 16px; border-radius: 12px; text-align: left; font-size: 17px; line-height: 1.3; } .tbd-chon--to button b { font-weight: 700; } .tbd-chon--to button small { font-size: 14px; font-weight: 400; color: var(--tbd-mo); } .tbd-giup .tbd__bang-chan { flex-wrap: wrap; } .tbd-giup .tbd__bang-chan .tbd-nut { flex: 1 1 auto; min-height: 50px; font-size: 15px; } .tbd-giup__nho, .tbd-nho-dong { margin: 14px 0 0; font-size: 14px; color: var(--tbd-mo); text-align: center; } .tbd-giup__nho .tbd-link, .tbd-nho-dong .tbd-link { color: var(--c-link, #b81f25); font-weight: 600; background: none; border: 0; padding: 8px 4px; text-decoration: underline; min-height: 44px; font-size: 15px; } .tbd-nho { display: grid; gap: 12px; } .tbd-nho p { margin: 0; } .tbd-nho__dau { font-size: 16px; line-height: 1.5; color: var(--tbd-chu); } .tbd-nho__nc { padding: 8px 12px; border-radius: 10px; background: #f5f7f8; font-size: 15px; line-height: 1.45; } .tbd-nho__o { display: grid; gap: 4px; font-size: 15px; font-weight: 600; color: var(--tbd-chu); } .tbd-nho__o b { color: var(--tbd-do); } .tbd-nho__o input, .tbd-nho__o textarea { width: 100%; min-height: 52px; padding: 10px 14px; border: 1px solid #c9ccd1; border-radius: 10px; font: inherit; font-size: 17px; font-weight: 400; color: var(--tbd-chu); background: #fff; } .tbd-nho__o textarea { min-height: 64px; resize: vertical; } .tbd-nho__o input:focus, .tbd-nho__o textarea:focus { outline: 2px solid var(--tbd-do); outline-offset: 0; border-color: var(--tbd-do); } .tbd-nho__bay { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .tbd-nho__kq { min-height: 1.2em; font-size: 14px; color: #b3261e; } .tbd-nho__gui { min-height: 54px; font-size: 17px; } .tbd-nho__lh { font-size: 14px; color: var(--tbd-mo); text-align: center; } .tbd-nho__lh a { color: var(--c-link, #b81f25); font-weight: 600; } .tbd-nho__xong { padding: 14px; border-radius: 12px; background: #e6f4ea; color: #1a5f2e; font-size: 16px; line-height: 1.5; } @media (min-width: 900px) { .tbd__bang:has(.tbd-giup), .tbd__bang:has(.tbd-nho) { width: 420px; max-height: calc(100vh - var(--y, 120px) - 16px); } } /* ================= THẺ TIN KHÔNG BỊ ĐÈ + NÚT "TÌM GIÚP TÔI" NỔI (10/10/2026) ================= * Thẻ tin cao tối đa = khoảng trống giữa thanh trên (--tbd-tren-h, đo bằng JS, gồm dải "Đã hiểu") và ngăn danh sách thu gọn. * Phần thông tin cuộn bên trong (.tbd__the-cuon); hàng nút Chỉ đường / Gọi / Zalo / Chi tiết luôn ở đáy; ✕ luôn thấy. */ .tbd__the { display: flex; flex-direction: column; max-height: calc(100% - var(--tbd-tren-h) - var(--tbd-thap) - 34px); } .tbd__the-cuon { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .tbd__the > .tbd__the-nut { flex: none; padding-top: 8px; border-top: 1px solid #eef0f2; } .tbd__the-qh, .tbd__the-qt { padding-bottom: 8px; } .tbd__giup-noi { position: absolute; left: 10px; z-index: 650; bottom: calc(var(--tbd-thap) + 22px); display: flex; align-items: center; gap: 10px; min-height: 58px; max-width: calc(100% - 80px); padding: 8px 18px 8px 12px; border: 3px solid #fff; border-radius: 30px; background: var(--tbd-do); color: #fff; text-align: left; box-shadow: 0 4px 16px rgba(202, 37, 43, .45), 0 2px 6px rgba(0, 0, 0, .25); transition: bottom .25s ease; } .tbd__giup-noi svg { width: 26px; height: 26px; stroke-width: 2.2; } .tbd__giup-noi span { display: grid; line-height: 1.2; } .tbd__giup-noi b { font-size: 17px; font-weight: 800; } .tbd__giup-noi small { font-size: 12.5px; font-weight: 500; opacity: .95; } .tbd__giup-noi:active { transform: scale(.97); } /* Khách chưa dùng lần nào: vòng sáng lan ra nhắc (thôi khi đã bấm một lần, hoặc máy bật "giảm chuyển động"). */ .tbd__giup-noi.moi, .tbd-chip--giup.moi { animation: tbd-goi-giup 2.2s ease-out infinite; } @keyframes tbd-goi-giup { 0% { box-shadow: 0 0 0 0 rgba(202, 37, 43, .55), 0 4px 16px rgba(202, 37, 43, .45); } 70% { box-shadow: 0 0 0 16px rgba(202, 37, 43, 0), 0 4px 16px rgba(202, 37, 43, .45); } 100% { box-shadow: 0 0 0 0 rgba(202, 37, 43, 0), 0 4px 16px rgba(202, 37, 43, .45); } } @media (prefers-reduced-motion: reduce) { .tbd__giup-noi.moi, .tbd-chip--giup.moi { animation: none; } } /* Không che việc khách đang làm: ẩn khi mở thẻ tin, thẻ "Cách dùng", kéo danh sách lên, hoặc bảng quy hoạch đang mở. */ .tbd[data-the] .tbd__giup-noi, .tbd[data-hd] .tbd__giup-noi, .tbd[data-ds="giua"] .tbd__giup-noi, .tbd[data-ds="cao"] .tbd__giup-noi, .tbd__qh:not([hidden]) ~ .tbd__giup-noi { display: none; } @media (max-width: 899.98px) { .tbd-chip--giup { display: none; } /* điện thoại đã có nút nổi to — bớt một nút trên hàng lọc */ } @media (min-width: 900px) { .tbd__giup-noi { display: none; } .tbd__the { max-height: calc(100% - 48px); } .tbd-chip--giup { height: 44px; padding: 0 16px 0 12px; font-size: 15px; font-weight: 800; box-shadow: 0 2px 8px rgba(202, 37, 43, .4); } } /* `.tbd button { color: inherit }` mạnh hơn một lớp đơn ⇒ chữ trên nút đỏ thành màu tối (thấy trên ảnh điện thoại 10/10/2026). */ .tbd .tbd__giup-noi, .tbd .tbd-chip--giup { color: #fff; } /* ================= KHÁCH THỬ BẢN ĐỒ — SỬA CHỖ BỊ CHE / ĐÈ (16/10/2026) ================= * 1) Lời mời chat ("Chào anh/chị 👋…") nổi đè lên lựa chọn của "Tìm giúp tôi", nút lớp bản đồ và ghim ⇒ ẩn trên điện thoại ở trang bản đồ * (nút chat tròn vẫn còn). * 2) Thẻ hướng dẫn: nút ✕ ở đầu thẻ, nút "Đã hiểu" dính đáy thẻ — khách mới không phải cuộn trong thẻ mới thấy cách đóng. * 3) Thẻ tin gọn: phần phụ gập sau "Xem thêm" để còn thấy ghim đang chọn. */ @media (max-width: 899.98px) { body.tbd-trang .bds-chat__moi { display: none !important; } } .tbd__hd-dau { position: sticky; top: -16px; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -16px -16px 8px; padding: 12px 10px 8px 16px; background: #fff; border-radius: 16px 16px 0 0; } .tbd__hd-dau .tbd__hd-ten { margin: 0; } .tbd__hd-dong { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #f2f2f2; display: inline-flex; align-items: center; justify-content: center; } .tbd__hd-xong { position: sticky; bottom: -16px; margin-top: 12px; box-shadow: 0 -10px 12px -2px #fff; } .tbd__the-them { display: block; width: calc(100% - 24px); min-height: 44px; margin: 0 12px 6px; padding: 0 12px; border: 1px dashed #b9bec6; border-radius: 10px; background: #fff; color: var(--tbd-chu); font-size: 14px; font-weight: 600; text-align: center; } .tbd__the-phu[hidden] { display: none; } .tbd__the-ma { margin: 0 12px 8px; padding: 8px 10px; border-radius: 8px; background: #f5f7f8; font-size: 13.5px; line-height: 1.45; color: #37474f; } @media (max-width: 899.98px) { .tbd__the-than .tbd-tin__phu { font-size: 13.5px; line-height: 1.35; } } /* ================= KHÁCH THỬ BẢN ĐỒ — DỄ TÌM / DỄ HIỂU (16/10/2026) ================= * Nút bên phải có CHỮ; nhãn giá đất theo xã không đè nhau; pin dễ bấm hơn; điện thoại xoay ngang không còn chỉ thấy 130px bản đồ. */ .tbd__hieu-xoa { flex: none; display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--tbd-vien); background: #fff; color: var(--tbd-do); font-size: 13px; font-weight: 700; white-space: nowrap; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); } .tbd__noi--phai .tbd__nut-chu { width: 56px; height: 60px; border-radius: 16px; flex-direction: column; gap: 2px; padding: 0; } .tbd__nut-chu svg { width: 22px; height: 22px; } .tbd__nut-chu span { font-size: 11.5px; font-weight: 700; line-height: 1.1; text-align: center; } .tbd__noi--phai { gap: 8px; } /* Nhãn giá đất theo xã: JS đẩy lệch (--dx/--dy) khi hai nhãn chồng nhau. */ .tbd-xa > a { transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))); } /* Pin: chữ giá to hơn một chút trên điện thoại + vùng bấm rộng hơn hình nhìn thấy. */ @media (max-width: 899.98px) { .tbd-ghim > span { font-size: 13.5px; } } .tbd-ghim > span::before { content: ""; position: absolute; inset: -8px -6px -10px; } /* * ĐIỆN THOẠI XOAY NGANG (16/10/2026): màn 740×360 — thanh tìm + hàng lọc ~120px và ngăn danh sách thu gọn 112px chỉ chừa ~130px bản đồ (đo bằng Chrome). * Nay: ô tìm và hàng nút lọc nằm CÙNG MỘT HÀNG (~58px), ngăn danh sách thu gọn còn 58px (bỏ dòng "Kéo lên…"), thẻ tin nằm nửa trái, ba nút phải thành một hàng dưới thanh trên (không đè nút chat / nút ›), dải "Đang lọc" xuống hàng riêng. */ @media (orientation: landscape) and (max-height: 520px) and (max-width: 899.98px) { .tbd { --tbd-thap: 58px; } .tbd__tren { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 8px; } /* wrap: dải "Đang lọc" xuống hàng riêng, không đè hàng nút lọc */ .tbd__hang-tim { flex: 0 0 clamp(240px, 40%, 320px); } .tbd__chips { flex: 1; min-width: 0; margin: 0; padding: 0 0 6px; } .tbd__hieu { flex: 0 0 100%; margin: 0; padding: 0 0 6px; } /* Cột nút phải thành MỘT HÀNG nằm dưới thanh trên, sát lề phải: cột cũ neo đáy đè lên nút chat nổi (vừa tròn 48px vừa dạng viên thuốc 197px) và chạm nút ›. */ .tbd .tbd__noi--phai, .tbd[data-ds="giua"] .tbd__noi--phai { top: calc(var(--tbd-tren-h) + 6px); bottom: auto; right: 10px; flex-direction: row; gap: 6px; } .tbd[data-ds="giua"] .tbd__noi--phai { opacity: 0; pointer-events: none; } .tbd__noi--phai .tbd__nut-chu { height: 52px; } .tbd__ds-goi { display: none; } .tbd__ds-dau { padding-top: 6px; padding-bottom: 6px; } .tbd__tay-nam { margin-bottom: 2px; } .tbd__giup-noi { min-height: 46px; padding: 4px 14px 4px 10px; } .tbd__giup-noi small { display: none; } .tbd__the { right: auto; width: min(46%, 380px); } .tbd__hd { max-width: min(420px, calc(100% - 170px)); } /* chừa chỗ cho hàng nút phải khi màn hẹp */ } /* Màn rất thấp (iPhone cũ xoay ngang, ≤ 340px cao): ba nút phải chỉ còn biểu tượng 44px để hàng không chạm nút chat; chữ vẫn có cho trình đọc màn hình. */ @media (orientation: landscape) and (max-height: 340px) and (max-width: 899.98px) { .tbd .tbd__noi--phai, .tbd[data-ds="giua"] .tbd__noi--phai { top: calc(var(--tbd-tren-h) + 2px); } .tbd__noi--phai .tbd__nut-chu { width: 44px; height: 44px; border-radius: 22px; } .tbd__noi--phai .tbd__nut-chu span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } /* ================= XEM THEO NGƯỜI ĐĂNG (18/10/2026) ================= * Chip "Người đăng" (khách) + "Tin của tôi" (chủ tin) + "Mọi trạng thái" (quản trị / nhân viên), bảng chọn người, thẻ người đầu danh sách, * và dấu hiệu của tin CHƯA công khai (chờ duyệt / nháp / hết hạn — chỉ chủ tin & quản trị thấy): ghim viền nét đứt màu cam, không lẫn * với đỏ (đang rao) / vàng (nổi bật) / tím (hàng kín) / xám (đã bán). */ .tbd-chip--toi { color: var(--tbd-do); border-color: var(--tbd-do); background: #fff; font-weight: 700; } .tbd-chip--toi svg { width: 17px; height: 17px; margin-right: 2px; } .tbd-chip--toi::after { display: none; } .tbd-chip--toi[aria-pressed="true"] { background: var(--tbd-do); border-color: var(--tbd-do); color: #fff; } .tbd-chip--tat-ca { color: #263238; border-color: #263238; background: #fff; } .tbd-chip--tat-ca[aria-pressed="true"] { background: #263238; color: #fff; } /* Bảng chọn người */ .tbd-nguoi { padding: 2px 2px 8px; } .tbd-nguoi__mo { margin: 0 0 10px; font-size: 14.5px; line-height: 1.5; color: var(--tbd-mo); } .tbd-nguoi__tim { box-sizing: border-box; width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--tbd-vien); border-radius: 12px; font: inherit; font-size: 16px; } /* 16px: iPhone không tự phóng to khi gõ */ /* Có `.tbd` đứng trước: CSS chung của theme (ul { padding-left }) thắng bản không tiền tố — đo trên web thật 18/10, hàng bị thụt 21px. */ .tbd .tbd-nguoi__ds { margin: 10px 0 0; padding: 0; list-style: none; max-height: 52vh; overflow-y: auto; overscroll-behavior: contain; } .tbd .tbd-nguoi__ds > li { margin: 0 0 6px; padding: 0; } .tbd-nguoi__dong { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 12px; box-sizing: border-box; border: 1px solid var(--tbd-vien); border-radius: 12px; background: #fff; color: inherit; text-align: left; text-decoration: none; cursor: pointer; } .tbd-nguoi__dong:hover { background: #f8f8f8; } .tbd-nguoi__dong[aria-pressed="true"] { border-color: var(--tbd-do); background: var(--tbd-do-nhat); } .tbd-nguoi__dong--tat-ca { border-style: dashed; } .tbd-nguoi__anh { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #e5e7eb; } .tbd-nguoi__anh--chu { display: inline-flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 700; color: #fff; background: #78909c; } .tbd-nguoi__chu { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; font-size: 15px; line-height: 1.35; } .tbd-nguoi__chu b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tbd-nguoi__chu small { color: var(--tbd-mo); font-size: 13px; } .tbd-nguoi__nut { flex: none; padding: 6px 10px; border-radius: 16px; background: var(--tbd-do); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; } .tbd-nguoi__trong { padding: 14px 4px; font-size: 14.5px; color: var(--tbd-mo); list-style: none; } /* Thẻ người ở đầu danh sách: "Tin của Nguyễn Văn A" · Trang môi giới → */ .tbd-nguoi-dau { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #e8f0fe; border-bottom: 1px solid var(--tbd-vien); font-size: 14px; } .tbd-nguoi-dau .tbd-nguoi__chu { font-size: 14.5px; } .tbd-nguoi-dau .tbd-link, .tbd-nguoi-dau a.tbd-link { flex: none; color: #1a56db; font-weight: 700; font-size: 13.5px; background: none; border: 0; padding: 6px 2px; text-decoration: underline; cursor: pointer; } .tbd-nguoi-dau--loi { background: #fdecea; color: #7f1d1d; justify-content: space-between; } .tbd-rieng-ban { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; background: #fff4e0; color: #7c2d12; font-size: 13.5px; border-bottom: 1px solid #f4dcb0; } .tbd-rieng-ban--can { background: #fdecea; color: #7f1d1d; border-bottom-color: #f2b8b5; } .tbd-rieng-ban .tbd-link { flex: none; color: inherit; font-weight: 700; background: none; border: 0; padding: 6px 0; text-decoration: underline; font-size: inherit; cursor: pointer; min-height: 32px; } /* Tin CHƯA công khai (chờ duyệt / nháp / hết hạn) */ .tbd .tbd-ghim.tbd-ghim--rieng:not(.tbd-ghim--chon) > span { background: #fff; color: #92400e; border: 2px dashed #d97706; box-shadow: 0 1px 4px rgba(0, 0, 0, .28); } .tbd .tbd-ghim.tbd-ghim--rieng:not(.tbd-ghim--chon) > span::after { border-top-color: #d97706; } .tbd .tbd-ghim.tbd-ghim--rieng .tbd-ghim__nhan { background: #d97706; color: #fff; } .tbd .tbd-ghim.tbd-ghim--tt-draft:not(.tbd-ghim--chon) > span, .tbd .tbd-ghim.tbd-ghim--tt-bds_expired:not(.tbd-ghim--chon) > span { color: #4b5563; border-color: #8a919c; } .tbd .tbd-ghim.tbd-ghim--tt-draft:not(.tbd-ghim--chon) > span::after, .tbd .tbd-ghim.tbd-ghim--tt-bds_expired:not(.tbd-ghim--chon) > span::after { border-top-color: #8a919c; } .tbd .tbd-ghim.tbd-ghim--tt-draft .tbd-ghim__nhan, .tbd .tbd-ghim.tbd-ghim--tt-bds_expired .tbd-ghim__nhan { background: #6b7280; } .tbd-nhan--rieng { background: #fff4e0; color: #92400e; box-shadow: inset 0 0 0 1px #d97706; } .tbd-nhan--tt-draft, .tbd-nhan--tt-bds_expired { background: #f3f4f6; color: #4b5563; box-shadow: inset 0 0 0 1px #9ca3af; } .tbd-nhan--sap-het { background: #fdecea; color: #b3261e; } .tbd-nhan--chu { background: #e8f0fe; color: #1a56db; } .tbd-tin--rieng > button { background: #fffaf0; box-shadow: inset 4px 0 0 #d97706; } .tbd-tin--rieng > button:hover, .tbd-tin--rieng.tbd-tin--chon > button { background: #fff1d6; } .tbd__the--rieng { border-top: 4px dashed #d97706; } .tbd__the-rieng { margin: 0 12px 10px; padding: 8px 10px; border-radius: 8px; background: #fff4e0; color: #7c2d12; font-size: 13.5px; line-height: 1.45; } .tbd__the-chu { margin: 0 12px 10px; font-size: 13.5px; color: var(--tbd-mo); } /* ================= QUẢN LÝ TIN TRÊN THẺ + ĐẶT VỊ TRÍ NGAY TRÊN BẢN ĐỒ (18/10/2026, đợt 2) ================= */ .tbd__the-quan { margin: 0 12px 10px; padding: 8px 10px 10px; border-radius: 10px; background: #f6f8fb; border: 1px solid var(--tbd-vien); } .tbd__the-quan-dau { margin: 0 0 6px; font-size: 12.5px; font-weight: 700; color: var(--tbd-mo); text-transform: uppercase; letter-spacing: .02em; } .tbd__the-quan-nut { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .tbd__the-quan-nut .tbd-nut { min-height: 44px; white-space: normal; justify-content: center; text-align: center; font-size: 13.5px; } /* Ô tích "Tin này đã bán" (29/10/2026): to, dễ chạm; tích rồi thì nền xanh nhạt. */ .tbd__the-tick { display: flex; align-items: center; gap: 10px; box-sizing: border-box; min-height: 48px; margin: 0 0 8px; padding: 6px 12px; border: 1px solid var(--tbd-vien); border-radius: 10px; background: #fff; font-size: 15px; font-weight: 600; line-height: 1.3; cursor: pointer; } .tbd__the-tick input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: #1a7f37; cursor: pointer; } .tbd__the-tick--bat { background: #eaf6ee; border-color: #1a7f37; color: #14532d; } .tbd__the-quan--ban .tbd__the-tick { margin-bottom: 0; } .tbd__the-gia { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .tbd__the-gia label { font-size: 13px; font-weight: 600; } .tbd__the-gia input { box-sizing: border-box; width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--tbd-vien); border-radius: 10px; font: inherit; font-size: 16px; } /* 16px: iPhone không tự phóng to khi gõ */ .tbd__the-gia-nut { display: flex; gap: 6px; } .tbd__the-gia-nut .tbd-nut { flex: 1; min-height: 44px; justify-content: center; } .tbd__the-qtt { margin: 6px 0 0; font-size: 13.5px; line-height: 1.4; color: #1a7f37; } .tbd__the-qtt:empty { display: none; } .tbd__the-qtt--loi { color: #b3261e; } /* Chế độ đặt vị trí: mũi tên đỏ cố định giữa bản đồ (mũi nhọn đúng giữa khung); thanh điều khiển dính đáy. */ .tbd__dat-tam { position: absolute; left: 50%; top: 50%; width: 36px; height: 48px; margin: -48px 0 0 -18px; z-index: 640; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45)); } .tbd__dat-tam svg { width: 36px; height: 48px; fill: #ca252b; stroke: #fff; stroke-width: 2; stroke-linejoin: round; } .tbd__dat-tam circle { fill: #fff; stroke: none; } .tbd__dat-tam::after { content: ""; position: absolute; left: 50%; bottom: -2px; width: 12px; height: 5px; margin-left: -6px; border-radius: 50%; background: rgba(0, 0, 0, .35); } .tbd__dat { position: absolute; left: 0; right: 0; bottom: 0; z-index: 900; box-sizing: border-box; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); background: #fff; border-radius: 16px 16px 0 0; box-shadow: 0 -4px 18px rgba(0, 0, 0, .25); } .tbd__dat-ten { margin: 0 0 4px; font-size: 15px; font-weight: 700; line-height: 1.35; } .tbd__dat-mo { margin: 0 0 8px; font-size: 13.5px; line-height: 1.45; color: var(--tbd-mo); } .tbd__dat-dan { display: flex; gap: 6px; } .tbd__dat-dan input { flex: 1; min-width: 0; box-sizing: border-box; height: 44px; padding: 0 12px; border: 1px solid var(--tbd-vien); border-radius: 10px; font: inherit; font-size: 16px; } .tbd__dat-dan .tbd-nut { min-height: 44px; flex: none; } .tbd__dat-tt { margin: 6px 0 0; min-height: 1.4em; font-size: 13.5px; line-height: 1.4; color: #1a7f37; } .tbd__dat-tt:empty { min-height: 0; } .tbd__dat-tt--loi { color: #b3261e; } .tbd__dat-nut { display: flex; gap: 6px; margin-top: 8px; } .tbd__dat-nut .tbd-nut { min-height: 48px; justify-content: center; font-size: 14px; } .tbd__dat-nut #tbd-dat-gps { flex: 1 1 0; } .tbd__dat-nut #tbd-dat-luu { flex: 1.4 1 0; } /* Đang đặt vị trí: ẩn thanh tìm / danh sách / nút giúp (che bản đồ), chỉ giữ nút Vệ tinh. */ .tbd[data-dat] .tbd__tren, .tbd[data-dat] .tbd__ds, .tbd[data-dat] .tbd__giup-noi { visibility: hidden; pointer-events: none; } .tbd__giup-cum { position: absolute; left: 10px; bottom: calc(var(--tbd-thap) + 12px); z-index: 650; display: flex; align-items: center; gap: 2px; max-width: calc(100% - 84px); padding: 3px; border-radius: 28px; background: #fff; box-shadow: var(--tbd-bong); } .tbd .tbd__giup-cum .tbd__giup-noi { position: static; min-height: 44px; max-width: none; padding: 4px 10px; border: 0; gap: 6px; box-shadow: none; animation: none; } .tbd .tbd__giup-cum .tbd__giup-noi small { display: none; } .tbd .tbd__giup-cum .tbd__giup-noi b { font-size: 13px; } .tbd .tbd__giup-cum .tbd__giup-noi svg { width: 20px; height: 20px; } .tbd .tbd__giup-cum--thu .tbd__giup-noi span { display: none; } .tbd .tbd__giup-cum--thu .tbd__giup-noi { width: 44px; justify-content: center; } .tbd__giup-dieu-khien { width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: #fff; font-size: 20px !important; } .tbd[data-the] .tbd__giup-cum, .tbd[data-hd] .tbd__giup-cum, .tbd[data-dat] .tbd__giup-cum, .tbd[data-ds="giua"] .tbd__giup-cum, .tbd[data-ds="cao"] .tbd__giup-cum, .tbd__qh:not([hidden]) ~ .tbd__giup-cum { display: none; } @media (max-width: 899.98px) { .tbd { --tbd-thap: 154px; } body.tbd-trang .bds-chat { bottom: 168px; } .tbd[data-giup-an] .tbd-chip--giup { display: inline-flex; animation: none; } .tbd__quanh--thu ~ .tbd__tim-lai { top: calc(var(--tbd-tren-h) + 52px); } } @media (max-width: 899.98px) and (max-height: 500px) { .tbd { --tbd-thap: 86px; } body.tbd-trang .bds-chat { bottom: 100px; } .tbd__ds-hang .tbd__dem { display: none; } } @media (min-width: 900px) { .tbd__giup-cum { display: none; } } .tbd[data-dat] #tbd-vi-tri, .tbd[data-dat] #tbd-lop-gia { display: none; } @media (max-width: 899.98px) { .tbd[data-dat] .tbd__noi--phai { top: auto; bottom: calc(var(--tbd-dat-h, 220px) + 12px); opacity: 1; pointer-events: auto; } } @media (min-width: 900px) { /* Máy tính: thanh phủ kín CỘT TRÁI (chỗ của danh sách) từ dưới thanh trên xuống đáy — không bao giờ che bản đồ / mũi tên. Thanh tìm mờ đi, bấm không được. */ .tbd__dat { left: 0; right: auto; width: 400px; top: var(--tbd-tren-h, 0px); bottom: 0; border-radius: 0; overflow-y: auto; box-shadow: 4px 0 18px rgba(0, 0, 0, .2); padding-bottom: 12px; } .tbd[data-dat] .tbd__tren { visibility: visible; opacity: .5; } } /* Điện thoại xoay ngang: thanh dựng đứng bên trái (cao 232px sẽ nuốt gần hết màn 360px), mũi tên nằm giữa bản đồ ở bên phải. */ @media (orientation: landscape) and (max-height: 520px) and (max-width: 899.98px) { .tbd__dat { right: auto; left: 0; width: min(42%, 340px); top: 0; bottom: 0; overflow-y: auto; border-radius: 0 16px 16px 0; padding-top: 8px; } .tbd__dat-mo { display: none; } .tbd__dat-nut { flex-wrap: wrap; } .tbd__dat-nut #tbd-dat-gps { flex: 1 1 100%; } .tbd[data-dat] .tbd__noi--phai { top: 8px; bottom: auto; right: 10px; } } /* ================= SỬA NHANH THÔNG TIN + "TIN CỦA TÔI" TRÊN BẢN ĐỒ CHUNG (18/10/2026, đợt 3) ================= */ .tbd__the-sua { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; } .tbd__the-sua label { margin-top: 4px; font-size: 13px; font-weight: 600; } .tbd__the-sua input, .tbd__the-sua textarea { box-sizing: border-box; width: 100%; padding: 0 12px; border: 1px solid var(--tbd-vien); border-radius: 10px; font: inherit; font-size: 16px; } /* 16px: iPhone không tự phóng to khi gõ */ .tbd__the-sua input { height: 44px; } .tbd__the-sua textarea { padding: 10px 12px; line-height: 1.45; resize: vertical; min-height: 120px; } .tbd__the-sua-2 { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; } .tbd__the-sua-2 > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .tbd__the-sua .tbd__the-gia-nut { margin-top: 8px; } .tbd__the-quan-nut .tbd-nut:last-child:nth-child(odd) { grid-column: 1 / -1; } /* nút lẻ cuối hàng thì dàn hết chiều ngang */ /* Tin của chính mình trên bản đồ chung (thành viên / môi giới): viền xanh quanh ghim + vạch xanh bên trái dòng danh sách + nhãn "Tin của tôi". */ .tbd .tbd-ghim.tbd-ghim--cua-toi:not(.tbd-ghim--chon):not(.tbd-ghim--rieng) > span { box-shadow: 0 0 0 3px #1a73e8, 0 2px 6px rgba(0, 0, 0, .3); } .tbd-nhan--cua-toi { background: #1a73e8; color: #fff; } .tbd-tin--cua-toi > button { box-shadow: inset 4px 0 0 #1a73e8; } /* Thứ tự đi xem do khách chọn, tách khỏi nút mở chi tiết tin. */ .tbd-thu-tu{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 12px} /* Nút "Bỏ lưu" dưới tin đã lưu (01/11/2026) */ .tbd-bo-luu{padding:0 12px 10px 12px} .tbd-bo-luu button{min-height:44px;padding:6px 12px;border:1px solid #e3b4b0;border-radius:8px;background:#fff;color:#b3261e;font:inherit;font-weight:600;cursor:pointer} .tbd-bo-luu button:hover{background:#fdf0ef} .tbd-bo-luu button:focus-visible{outline:2px solid #1f6feb;outline-offset:2px} .tbd-thu-tu button{min-height:44px;padding:6px 10px;border:1px solid #ddd;border-radius:8px;background:#fff;color:#333;font:inherit;cursor:pointer} .tbd-thu-tu button:disabled{opacity:.45;cursor:default} .tbd-thu-tu button:focus-visible{outline:2px solid #1f6feb;outline-offset:2px} /* 03/11/2026: giữ mọi bộ lọc, chỉ mở các mục chi tiết khi khách cần. */ .tbd:not([data-loc-mo="1"]) .tbd__chips > .tbd-chip:not([data-mo="gia"]):not([data-mo="xa"]):not(#tbd-bo-loc):not(#tbd-giup) { display: none; } .tbd__chips > .tbd-chip { order: 3; } #tbd-bo-loc { order: 2; } .tbd__chips > [data-mo="gia"] { order: 0; } .tbd__chips > [data-mo="xa"] { order: 1; } .tbd__chips > #tbd-giup { order: -1; } .tbd[data-loc-mo="1"] .tbd__chips { flex-wrap: wrap; max-height: 40vh; overflow-y: auto; mask-image: none; } .tbd .tbd-tim-nut { border: 0; background: #ca252b; color: #fff; border-radius: 24px; min-width: 44px; min-height: 44px; padding: 0 10px; flex: none; font: inherit; font-weight: 700; } .tbd__tim input { min-width: 0; } .tbd-tom-tat summary, .tbd-hanh-trinh-cong-cu summary { cursor: pointer; padding: 12px 0; min-height: 44px; box-sizing: border-box; font-weight: 600; } .tbd-tom-tat .tbd-nut--chinh { display: flex; justify-content: center; white-space: normal; text-align: center; min-height: 48px; } .tbd__sap select { min-height: 44px; max-width: 100%; } .tbd__dem small { white-space: normal; overflow: visible; text-overflow: clip; } .tbd__quanh-km button { min-height: 44px; min-width: 44px; } @media (max-width: 899.98px) { .tbd:not([data-loc-mo="1"]) .tbd__chips { padding-right: 8px; mask-image: none; } .tbd:not([data-loc-mo="1"]) .tbd__chips > #tbd-giup { display: none; } .tbd[data-giup-an]:not([data-loc-mo="1"]) .tbd__chips > #tbd-giup { display: inline-flex; } .tbd__ds-hang { flex-wrap: wrap; } .tbd__ds-hang .tbd__dem { flex: 1 0 100%; } }