/* ================================================================ GIANGHIALAND — FOUNDATION (SSOT) Lớp nền hợp nhất: 1 bộ token · 1 font · nền phẳng near-white. Nạp SAU gland-design-system.css ở . Mục tiêu: kéo mọi trang con về cùng một ngôn ngữ thị giác "sang & tối giản" của trang chủ, KHÔNG đập lại cấu trúc — chỉ chuẩn hoá biến + base. Nguyên tắc: bắc cầu hệ token CŨ (--xanh/--vang/--nen...) sang palette premium duy nhất. Trang con tiêu thụ các biến này nên tự đồng bộ ngay mà không phải sửa từng file. ================================================================ */ /* ── 1. PALETTE PREMIUM — nguồn sự thật duy nhất ── Xanh rừng sâu trầm + vàng đồng (không vàng chói), nền near-white. Cam được hạ xuống mức accent đất nung tối giản, hết "chói". */ :root { /* Brand — khớp gland-design-system (--g-*) để 3 hệ về 1 */ --g-green: #18563a; --g-green-mid: #0f3d27; --g-green-deep: #082316; --g-gold: #b8862f; --g-gold-light: #d8a94e; --g-gold-pale: #f7efe0; --g-bg: #fafbf9; --g-surface: #ffffff; --g-surface-2: #f4f6f3; --g-border: #e6eae3; --g-border-dark: #cfd6cb; --g-text: #0f2117; --g-text-2: #41564a; --g-text-3: #76897c; --g-text-inv: #ffffff; } /* ── 2. BẮC CẦU hệ token CŨ (gianghialand.css :root nằm ở ) ── File này nạp sau nên các định nghĩa dưới THẮNG bản cũ. Mọi class cũ dùng var(--xanh)/var(--vang)... lập tức đổi màu. */ :root { --xanh: var(--g-green); --xanh2: #246b48; --xanh3: #e8f1ea; --vang: var(--g-gold); --vang2: var(--g-gold-pale); --nen: var(--g-bg); --chu: var(--g-text); --mo: var(--g-text-2); --vien: var(--g-border); /* Hạ nhiệt cam: đất nung trầm thay cam bão hoà */ --dat: #9a4a28; --cam: #b8862f; /* cam → vàng đồng, hết chói */ --bong: 0 18px 50px rgba(15,45,30,.10); } .the-bds-anh{position:relative} .the-bds-da-ban{ position:absolute; left:12px; top:12px; z-index:4; display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px; background:linear-gradient(135deg,var(--g-gold),var(--g-gold-light)); color:var(--g-green-deep); font-size:12px; font-weight:900; letter-spacing:.02em; text-transform:uppercase; box-shadow:0 10px 26px rgba(184,134,47,.34); } .bds-detail-da-ban{left:18px;top:18px} /* Con dấu TRÒN trạng thái tin (Đã bán / Ngừng bán) — đè lên ảnh nền, dạng tem tròn nghiêng như con dấu mộc. Dùng chung card + trang chi tiết (partials.con-dau-tin). */ .con-dau-tin{ position:absolute; right:12px; top:12px; z-index:5; display:flex; align-items:center; justify-content:center; width:76px; height:76px; border-radius:50%; border:3px solid currentColor; background:rgba(255,255,255,.14); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); transform:rotate(-14deg); box-shadow:0 8px 22px rgba(0,0,0,.28); text-align:center; pointer-events:none; } .con-dau-tin::before{ content:""; position:absolute; inset:5px; border-radius:50%; border:1.5px solid currentColor; opacity:.55; } .con-dau-tin-chu{ font-size:13px; font-weight:900; line-height:1.05; letter-spacing:.02em; text-transform:uppercase; padding:0 4px; } .con-dau-da-ban{color:#b5341f;background:rgba(181,52,31,.12)} .con-dau-ngung-ban{color:#5b6b60;background:rgba(91,107,96,.14)} .con-dau-lon{width:104px;height:104px;right:18px;top:18px} .con-dau-lon .con-dau-tin-chu{font-size:16px} /* ── 2b. CHẶN RỈ MÀU TỪ "CẢNH" (theme-opt-N) ── gland-fullpage-theme.css định nghĩa --xanh/--xanh2/--xanh3/--nen LẠI cho mỗi cảnh trang chủ bằng selector html.theme-opt-N (specificity 0,1,1) → thắng :root của file này. Hậu quả: accent cảnh (cam/teal/tím...) rỉ xuống MỌI trang con. Đây là gốc của "mỗi trang một web khác". Sửa: cùng specificity html.theme-opt-N + nạp sau → ta thắng. Chỉ ép lại 4 token ACCENT DÙNG CHUNG về xanh rừng premium. KHÔNG đụng các token cảnh (--nen-trang-chu, --overlay-*, --nav-*) để scene picker trang chủ vẫn chạy. */ html.theme-opt-1, html.theme-opt-2, html.theme-opt-3, html.theme-opt-4, html.theme-opt-5 { --xanh: var(--g-green); --xanh2: #246b48; --xanh3: #e8f1ea; --nen: var(--g-bg); } .leaflet-control-layers{border:1px solid rgba(255,255,255,.82);border-radius:18px;background:rgba(255,255,255,.94);box-shadow:0 18px 44px rgba(7,27,20,.22);backdrop-filter:blur(16px);overflow:hidden;color:var(--g-text)} .leaflet-control-layers-toggle{width:46px;height:46px;background-size:22px;background-position:center} .leaflet-control-layers-expanded{padding:12px;min-width:210px;max-width:min(300px,calc(100vw - 42px))} .leaflet-control-layers-list,.leaflet-control-layers-base,.leaflet-control-layers-overlays{display:grid;gap:6px} .leaflet-control-layers-list{font:800 12px/1.2 var(--g-font,'Be Vietnam Pro',system-ui,sans-serif);letter-spacing:.01em;text-transform:uppercase;color:var(--g-green-mid)} .leaflet-control-layers-separator{height:1px;margin:8px 0;border:0;background:linear-gradient(90deg,transparent,var(--g-border-dark),transparent)} .leaflet-control-layers label{display:grid;grid-template-columns:24px 1fr;align-items:center;gap:9px;min-height:34px;margin:0;padding:7px 10px;border:1px solid var(--g-border);border-radius:12px;background:linear-gradient(180deg,#fff,var(--g-surface-2));cursor:pointer;transition:.16s ease} .leaflet-control-layers label>span{display:contents}.leaflet-control-layers label>span>span{overflow:hidden;text-overflow:ellipsis} .leaflet-control-layers label:hover{border-color:var(--g-gold-light);box-shadow:0 8px 20px rgba(184,134,47,.16);transform:translateY(-1px)} .leaflet-control-layers input{width:22px;height:22px;margin:0;accent-color:var(--g-green)} .leaflet-control-layers label:has(input:checked){border-color:rgba(184,134,47,.72);background:linear-gradient(135deg,var(--g-gold-pale),#fff);box-shadow:inset 0 0 0 1px rgba(184,134,47,.18)} @media (max-width:720px){.leaflet-control-layers-expanded{min-width:190px;max-height:58vh;overflow:auto}.leaflet-control-layers-list{font-size:11px}.leaflet-control-layers label{min-height:32px;padding:6px 8px}} /* ── 3. NỀN PHẲNG — bỏ radial-gradient kem/vàng gây "rẻ tiền" ── Rule body cũ không có !important; rule này nằm sau → thắng. */ body { background: var(--g-bg); font-family: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--g-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Trang con: ép nền phẳng tuyệt đối (một số nơi set nền section kem) */ body.pages-v7:not(.trang-chu-v7) { background: var(--g-bg); } /* ── 4. FONT HỢP NHẤT — Be Vietnam Pro toàn bộ, kể cả phần tử kế thừa Arial từ gianghialand.css. Không đụng .trang-chu-v7 (đã đúng font). */ body:not(.trang-chu-v7), body:not(.trang-chu-v7) button, body:not(.trang-chu-v7) input, body:not(.trang-chu-v7) select, body:not(.trang-chu-v7) textarea { font-family: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif; } /* ── 5. PHÂN CẤP CHỮ — tiêu đề trội hơn, thân chữ dịu, letter-spacing âm nhẹ cho cảm giác cao cấp. Chỉ áp trang con để không phá trang chủ. */ body.pages-v7:not(.trang-chu-v7) h1, body.pages-v7:not(.trang-chu-v7) h2, body.pages-v7:not(.trang-chu-v7) h3 { letter-spacing: -0.015em; color: var(--g-text); } /* Hero trang con nằm trên ảnh tối → chữ PHẢI trắng. Specificity (0,3,2) thắng rule màu tối ở mục 5 (0,2,2). Không để tiêu đề chìm vào ảnh. */ body.pages-v7:not(.trang-chu-v7) .subpage-hero h1, body.pages-v7:not(.trang-chu-v7) .subpage-hero h2, body.pages-v7:not(.trang-chu-v7) .subpage-hero h3, body.pages-v7:not(.trang-chu-v7) .subpage-hero-content h1 { color: var(--g-text-inv); } /* ── 6. HẠ NHIỆT ACCENT CAM — các pill/badge cam chói về vàng đồng tinh tế. Giữ ngữ nghĩa (vẫn nổi), bỏ độ bão hoà gắt. */ body.pages-v7:not(.trang-chu-v7) .nhan-nho { color: var(--g-gold); background: var(--g-gold-pale); border-color: transparent; } /* ── 7. HEADER TRANG CON — chặn rỉ token nav của "cảnh" (--nav-bg navy lạnh). .thanh-tren dùng background: var(--nav-bg) !important; trên trang chủ token này đổi tông theo cảnh (hoà với hero) → ĐÚNG, giữ nguyên. Nhưng header dùng chung layout nên trang con nuốt luôn navy lạnh, lệch xanh rừng. Sửa SẠCH bằng custom property: set lại --nav-bg/--nav-border ở scope body trang con. Vì .thanh-tren là con của body, biến set trên body thắng biến set trên html theo "nearest ancestor" — KHÔNG cần đấu !important với rule background. Trạng thái .cuon đã hardcode xanh rừng nên khớp sẵn. */ body.pages-v7:not(.trang-chu-v7) { --nav-bg: rgba(8, 30, 20, 0.82); --nav-border: rgba(184, 134, 47, 0.22); } /* ── 8. NÚT SO SÁNH NHANH trên card BĐS — style đầy đủ ở pages-v7.css nhưng trang /tim-kiem KHÔNG nạp pages-v7.css (chỉ tim-kiem-v7.css), nên nút rơi về style mặc định browser = hộp xám viền outset đen, vỡ thẩm mỹ. Card BĐS là partial dùng chung nhiều trang → đặt style ở foundation (nạp toàn site) để vá mọi nơi. Khớp đúng nút tim cạnh nó: tròn 32px, viền mảnh. */ .the-bds-yeu-thich-wrap .the-bds-so-sanh-quick { display: inline-grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; min-width: 44px; border-radius: 999px; border: 1px solid rgba(15, 23, 42, 0.12); background: #fff; color: #94a3b8; cursor: pointer; padding: 0; text-decoration: none; transition: all 0.18s ease; } .the-bds-yeu-thich-wrap .the-bds-so-sanh-quick svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .the-bds-yeu-thich-wrap .the-bds-so-sanh-quick:hover { color: var(--g-green); border-color: rgba(31, 117, 83, 0.4); background: #e9f6ee; transform: scale(1.06); } .the-bds-yeu-thich-wrap .the-bds-so-sanh-quick.on { color: var(--g-green-mid); border-color: rgba(31, 117, 83, 0.55); background: linear-gradient(180deg, #e9f6ee, #cfe9da); } .the-bds-yeu-thich-wrap .the-bds-so-sanh-quick.on svg { fill: var(--g-green); stroke: var(--g-green-mid); } .the-bds-yeu-thich-wrap { gap: 6px; align-items: center; } .so-sanh-drawer { position: fixed; left: 50%; bottom: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 12px; width: calc(100% - 32px); max-width: 580px; padding: 16px; border: 1px solid rgba(31, 117, 83, 0.15); border-radius: 20px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 16px 40px rgba(6, 40, 29, 0.16); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transform: translateX(-50%) translateY(200px); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .so-sanh-drawer.hien { transform: translateX(-50%) translateY(0); } .so-sanh-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); } .so-sanh-drawer-title { display: flex; align-items: center; gap: 6px; color: var(--g-green-mid); font-size: 13.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .so-sanh-drawer-clear { padding: 2px 6px; border: 0; border-radius: 6px; background: none; color: var(--g-text-3); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background 120ms ease, color 120ms ease; } .so-sanh-drawer-clear:hover { background: var(--g-surface-2); color: #dc2626; } .so-sanh-drawer-body { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .so-sanh-drawer-items { display: flex; flex: 1; gap: 10px; overflow-x: auto; scrollbar-width: none; } .so-sanh-drawer-items::-webkit-scrollbar { display: none; } .so-sanh-drawer-item { position: relative; display: flex; align-items: center; flex-shrink: 0; gap: 8px; min-width: 130px; max-width: 160px; padding: 6px 8px; border: 1px solid var(--g-border); border-radius: 12px; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02); } .so-sanh-drawer-item-img { flex-shrink: 0; width: 32px; height: 32px; border-radius: 6px; background-color: var(--g-surface-2); background-position: center; background-size: cover; } .so-sanh-drawer-item-noi { display: flex; flex-direction: column; overflow: hidden; } .so-sanh-drawer-item-title { overflow: hidden; color: var(--g-text); font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .so-sanh-drawer-item-price { margin-top: 1px; color: #7a3f22; font-family: var(--v7-font-so, ui-monospace, monospace); font-size: 10.5px; font-weight: 700; } .so-sanh-drawer-item-remove { position: absolute; top: -6px; right: -6px; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; border: 1px solid #fff; border-radius: 50%; background: #dc2626; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12); color: #fff; font-size: 11px; line-height: 1; cursor: pointer; } .so-sanh-drawer-btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 10px 16px; border: 0; border-radius: 12px; background: var(--g-green); box-shadow: 0 4px 12px rgba(31, 117, 83, 0.25); color: #fff; font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background 160ms ease, transform 160ms ease; } .so-sanh-drawer-btn:hover { background: var(--g-green-mid); transform: translateY(-1px); } @media (max-width: 760px) { .so-sanh-drawer { bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 1100; } body.so-sanh-drawer-open .user-action-bar, body.so-sanh-drawer-open .sticky-lead-cta, body.so-sanh-drawer-open .pwa-install-banner { opacity: 0; transform: translateY(120%); pointer-events: none; } } /* ── 9. BẢN ĐỒ (/ban-do) — vá 2 lỗi thị giác ── (a) NHÃN MARKER TRÀN/CẮT CHỮ: Leaflet đặt cứng .map-listing-dot width:74px (iconSize) qua inline style. .map-pin-head là grid item trong track 74px với place-items:center → bị ghì ~68px, KHÔNG nở theo nội dung, nên "Đất nông nghiệp" (~118px) tràn ra ngoài bong bóng. Nới max-width vô ích vì head vẫn kẹt trong track. Giải: cho head THOÁT track bằng position:absolute + width:max-content, neo tâm 50% (trùng đuôi ), để bong bóng nở đối xứng quanh điểm geo. Giữ ellipsis cho nhãn dài bất thường. foundation nạp SAU gianghialand, cùng specificity → thắng. (b) NÚT ZOOM +/- vẫn style mặc định Leaflet (font Lucida Console, chữ đen, bo 2px) lệch hẳn tông rừng + Be Vietnam Pro. leaflet.css nạp SAU foundation nên buộc !important (đúng pattern .leaflet-control-layers). */ .map-listing-dot { overflow: visible; } .map-listing-dot .map-pin-head { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: max-content; max-width: 220px; } .map-listing-dot:hover .map-pin-head { transform: translateX(-50%) translateY(-3px) scale(1.06); } .map-listing-dot b { max-width: 188px; } .leaflet-control-zoom { border: 0 !important; border-radius: 14px !important; box-shadow: 0 10px 26px rgba(15, 45, 30, 0.16) !important; overflow: hidden; } .leaflet-control-zoom a { width: 38px !important; height: 38px !important; line-height: 38px !important; font-family: "Be Vietnam Pro", system-ui, -apple-system, sans-serif !important; font-size: 22px !important; font-weight: 800 !important; color: var(--g-green) !important; background: rgba(255, 255, 255, 0.96) !important; border: 0 !important; border-bottom: 1px solid var(--g-border) !important; border-radius: 0 !important; } .leaflet-control-zoom a:last-child { border-bottom: 0 !important; } .leaflet-control-zoom a:hover { background: var(--g-green) !important; color: #fff !important; } .leaflet-control-zoom a.leaflet-disabled { color: var(--g-text-3) !important; background: var(--g-surface-2) !important; } /* (c) CỤM "N tin" BỊ NHÃN ĐÈ: Leaflet gán z-index inline theo vĩ độ nên marker phía nam (z~1331) đè lên cụm (z~157) ở vùng chồng. Cụm là điểm tương tác tách nhóm → phải luôn nổi trên nhãn. z-index inline trên chính .leaflet-marker-icon nên buộc !important + giá trị vượt mọi nhãn. */ .leaflet-marker-icon.map-cluster-wrap { z-index: 10000 !important; } /* ── 10. BẢN ĐỒ (/ban-do) PC — 3 lỗi gốc đo từ DOM thật ── (a) LAYOUT BỊ BÓP: body.pages-v7 .luoi.hai-cot (đặc thù 0,3,1) trong pages-v7.css thắng .ban-do-layout (0,1,0) → cả map + aside bị ép 577px/577px. Map bị bóp kéo theo popup tràn và card lệch. Cần selector đủ đặc thù (0,4,1) để khôi phục đúng ý đồ map rộng + cột tin 360px. */ body.pages-v7 .luoi.hai-cot.ban-do-layout { grid-template-columns: minmax(0, 1fr) 360px; } @media (max-width: 980px) { body.pages-v7 .luoi.hai-cot.ban-do-layout { grid-template-columns: 1fr; } } /* (b) BADGE GÓI ĐÈ TIÊU ĐỀ: bọc card aside là display:inline nhưng ôm (inline-flex) +

/

(block) → inline ôm block làm badge chồng lên tiêu đề. Đưa về block + badge tách hàng riêng. */ .ban-do-layout > aside.luoi > .the > a { display: block; } .ban-do-layout > aside.luoi > .the > a > .badge { display: inline-block; margin-bottom: 6px; } .ban-do-layout > aside.luoi > .the > a > h3 { margin: 4px 0; font-size: 16px; line-height: 1.25; } /* (c) POPUP (.map-active-card) TRÀN: là hệ quả của (a) — map bị bóp nên card absolute bottom:18px spill. Sau khi (a) khôi phục map rộng, siết thêm trần cao để card không bao giờ vượt khung map dù nội dung dài. */ .map-module .map-active-card { max-height: min(42vh, calc(100% - 36px)); } /* (d) CARD ASIDE BỊ CẮT CHỈ 42px: aside có class .luoi → display:grid với grid-auto-rows mặc định auto NHƯNG vì grid container không có grid-template-rows tường minh, browser chia đều theo số con (15 cards) trong height aside (~780px) → mỗi row pin cứng ~42px, .the có overflow:hidden → h3 + giá bị cắt. Cột tin /ban-do bản chất là LIST dọc cuộn được, không phải LƯỚI ô đều — phải override về flex column, mỗi card cao theo nội dung, aside cuộn dọc. */ @media (min-width: 761px) { body.pages-v7 .ban-do-layout > aside.luoi { display: flex; flex-direction: column; gap: 10px; max-height: 80vh; overflow-y: auto; align-content: start; } body.pages-v7 .ban-do-layout > aside.luoi > .the { height: auto; min-height: 0; overflow: visible; flex: 0 0 auto; } } /* ── 11. /tim-kiem — CARD BĐS BỊ ẨN KHI LOAD ĐẦU ── gianghialand.css dòng 40800 set .the-bds{opacity:0; transform:translateY(18px)} chờ class .hien-card được IntersectionObserver thêm vào khi card lọt viewport. Hậu quả: 13/15 card opacity:0 ở load đầu, SEO crawler/preview thấy trang trống, screenshot full-page mất nội dung, cảm giác "trang trắng" trước cuộn. Theo MEMORY "UI ít diễn giải" — bỏ animation reveal-on-scroll, card hiện ngay. Foundation nạp SAU gianghialand → thắng specificity bằng nhau. */ .the-bds { opacity: 1 !important; transform: none !important; transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease !important; } /* ============================================================ Popup bản đồ (.map-active-card): GỌN TRONG 1 KHUNG, KHÔNG CUỘN - Chi tiết (việc quan trọng nhất) lên cùng hàng với khu vực -> thấy ngay. - Quan tâm + Chỉ đường cùng hàng với nhãn vị trí. - Nhãn vị trí phân biệt rõ: tương đối (hổ phách) vs chính xác (xanh). - Thu nhỏ ảnh + siết khoảng cách để toàn bộ card vừa 1 khung, khỏi lăn. ============================================================ */ .map-active-card{max-height:none !important;overflow:visible !important} .map-module .map-active-card{max-height:none !important} .map-active-thumb{height:104px !important;margin:8px 0 !important} .map-active-card h3{font-size:18px !important;margin:7px 0 !important} .map-active-facts{padding:9px 11px !important} .map-active-facts strong{font-size:18px !important} /* Hàng gộp: nội dung co giãn + nút giữ kích thước, cùng 1 dòng */ .map-active-row{display:flex;align-items:center;gap:8px;margin-top:8px} .map-active-row .nut{flex:0 0 auto;padding:10px 14px;border-radius:14px;white-space:nowrap} /* Hàng 1 — khu vực (co giãn) + Chi tiết */ .map-active-place p{flex:1 1 auto;margin:0 !important;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .map-active-detail{background:var(--xanh,#0b3b2d) !important;color:#fff !important} /* Hàng 2 — nhãn vị trí (co giãn 1 dòng) + Quan tâm + Chỉ đường, cùng hàng */ .map-active-loc-row{flex-wrap:wrap} .map-active-loc-row small{flex:1 1 auto;min-width:0;margin:0;font-size:12px;font-weight:950;border-radius:999px;padding:8px 11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center} .map-active-loc-row small.loc-tuong-doi{color:#9a4a04;background:#fff7ed;border:1px solid #fed7aa} .map-active-loc-row small.loc-tuong-doi::before{content:"◉ "} .map-active-loc-row small.loc-chinh-xac{color:#0b3b2d;background:#eaf7ef;border:1px solid #bfe3cb} .map-active-loc-row small.loc-chinh-xac::before{content:"✓ "} .map-active-loc-row .nut{flex:0 0 auto} .map-active-more{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:8px} .map-active-more[hidden]{display:none} .map-active-more .nut{padding:10px 12px;border-radius:14px;font-size:13px} .map-more-toggle.dang-mo{background:var(--vang2,#fff4cf);color:#805600;border-color:rgba(214,168,79,.5)} @media(max-width:980px){ .map-active-card{padding-bottom:14px !important} .map-active-more{grid-template-columns:1fr 1fr} } /* Mobile: card tin active = bottom-sheet trải ngang map, thay vì cột nổi bên phải chỉ ~165px khiến tiêu đề wrap nhiều dòng chật. */ @media(max-width:760px){ /* fixed overlay neo đáy viewport, z-index VƯỢT .map-listings-sheet (z:1002) để nút Chi tiết/Quan tâm/Chỉ đường không bị sheet "TIN TRÊN BẢN ĐỒ" nuốt click. Bản absolute trong .map-module (z:7) bị sheet fixed đè 157px đáy. */ .map-active-card{ position:fixed !important; left:10px !important;right:10px !important;top:auto !important; bottom:calc(10px + env(safe-area-inset-bottom,0px)) !important; width:auto !important;max-width:none !important; max-height:72vh !important;overflow:auto !important; z-index:1003 !important; border-radius:20px !important;padding-bottom:14px !important } .map-active-thumb{height:128px !important} .map-active-card h3{white-space:normal !important} } /* ============================================================ Khung bai viet 1 CHUAN: tieu de, mo ta, anh dai dien, chu than bai va anh than bai dung CHUNG mot khung rong = content-box cua article. Go cot doc hep 760px (do monolith gianghialand-public.css ep) de tren-duoi dong nhat, het canh chu hep lech trai + anh tran hai ben. Thang cascade bang do sau selector (body.bai-viet-chi-tiet-v7 ...), khong them cai nao vuot tran. ============================================================ */ body.bai-viet-chi-tiet-v7 .bai-viet-noi-dung{max-width:none;width:100%} body.bai-viet-chi-tiet-v7 .bai-viet-noi-dung p:has(> img:only-child), body.bai-viet-chi-tiet-v7 .bai-viet-noi-dung > figure{ width:100%; max-width:100%; margin:22px 0; } body.bai-viet-chi-tiet-v7 .bai-viet-noi-dung img{ display:block; width:100%; max-width:100%; height:auto; margin:0; object-fit:cover; } /* ============================================================ Chống CLS ảnh thân bài viết (.bai-viet-figure) DB media không lưu width/height; ảnh tỉ lệ đa dạng nên KHÔNG ép aspect-ratio cứng (sẽ crop). Thay vào đó reserve một khoảng tối thiểu + nền placeholder: trước khi ảnh tải xong, container đã chiếm sẵn chiều cao -> ảnh hiện ra chỉ dịch phần dư thay vì nhảy từ 0. Ảnh vẫn height:auto nên không méo/cắt. ============================================================ */ .bai-viet-figure img{ min-height:200px; background:linear-gradient(110deg,#eef3ee 0,#f6f7f1 50%,#eef3ee 100%); } /* Ảnh canh trái/phải hẹp hơn -> reserve thấp hơn cho cân đối. */ .bai-viet-figure.align-left img, .bai-viet-figure.align-right img{min-height:140px} @media(max-width:600px){ .bai-viet-figure.align-left img, .bai-viet-figure.align-right img{min-height:200px} } /* Khi ảnh đã tải xong: bỏ nền placeholder + min-height để ảnh thấp (vd ảnh ngang rất rộng) không bị ép cao thừa. JS gắn class .da-tai. */ .bai-viet-figure img.da-tai{min-height:0;background:none} html{scroll-padding-top:calc(var(--nav-h,62px) + env(safe-area-inset-top))} body{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)} button,a,input,select,textarea{touch-action:manipulation} button,.nut,.nut-chinh,.btn,.the-bds-so-sanh-quick,[role="button"]{min-height:44px} input,select,textarea{font-size:16px} .truong input,.truong select,.truong textarea{min-height:48px;border-radius:14px} .user-action-bar{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:980;display:none;grid-template-columns:repeat(4,1fr);gap:6px;padding:7px;border:1px solid rgba(230,234,227,.9);border-radius:22px;background:rgba(255,255,255,.94);box-shadow:0 18px 46px rgba(8,35,22,.18);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)} .user-action-bar a{min-height:48px;display:flex;align-items:center;justify-content:center;gap:5px;border-radius:16px;color:var(--g-green-mid);font-size:12px;font-weight:900;text-decoration:none;white-space:nowrap;background:linear-gradient(180deg,#fff,var(--g-surface-2));border:1px solid rgba(230,234,227,.82)} .user-action-bar a:nth-child(2){color:#7a4a08;background:linear-gradient(180deg,#fff7e8,#f7efe0)} .pwa-install-banner[hidden],.pwa-update-toast[hidden]{display:none} .pwa-install-banner,.pwa-update-toast{position:fixed;left:12px;right:12px;bottom:calc(78px + env(safe-area-inset-bottom));z-index:979;display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:12px;border:1px solid rgba(184,134,47,.26);border-radius:22px;background:linear-gradient(135deg,rgba(255,255,255,.97),rgba(247,239,224,.96));box-shadow:0 20px 54px rgba(8,35,22,.18);transform:translateY(18px);opacity:0;transition:.18s ease;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)} .pwa-install-banner.hien,.pwa-update-toast.hien{transform:translateY(0);opacity:1} .pwa-install-copy{display:grid;gap:2px;min-width:0}.pwa-install-copy strong{font-size:13px;line-height:1.2;color:var(--g-green-deep)}.pwa-install-copy span{font-size:12px;line-height:1.35;color:var(--g-text-2)} .pwa-install-actions{display:flex;gap:6px}.pwa-install-actions button,.pwa-update-toast button{min-height:42px;padding:0 12px;border-radius:14px;border:1px solid var(--g-border);font:900 12px/1 var(--g-font,'Be Vietnam Pro',system-ui,sans-serif);cursor:pointer}.pwa-install-main{background:var(--g-green);color:#fff;border-color:var(--g-green)}.pwa-install-later{background:#fff;color:var(--g-text-2)} /* Nút "lên đầu trang" (.scroll-top-btn, z-1120) chỉ bắt click khi đang hiện. Base rule design-system đặt pointer-events:auto LUÔN BẬT → lúc vô hình (opacity:0, chưa .hien) nó vẫn nuốt click nút "Tải lại" của toast PWA bên dưới. Đó là lý do "Tải lại" bấm không ăn ở đầu trang. */ .scroll-top-btn{pointer-events:none !important} .scroll-top-btn.hien{pointer-events:auto !important} /* Khi toast/banner PWA full-width đang hiện ở đáy mobile, ẩn nút lên đầu trang để không chồng nút bot hỗ trợ và CTA tải lại. Desktop vẫn đẩy lên như cũ. */ @media(max-width:760px){ .pwa-install-banner,.pwa-update-toast{bottom:calc(92px + env(safe-area-inset-bottom))} body:has(.pwa-update-toast.hien) .scroll-top-btn, body:has(.pwa-install-banner.hien) .scroll-top-btn{display:none} } @media(min-width:761px){ body:has(.pwa-update-toast.hien) .scroll-top-btn, body:has(.pwa-install-banner.hien) .scroll-top-btn{bottom:calc(168px + env(safe-area-inset-bottom)) !important} } /* Trang chi tiết tin: sticky CTA (Gọi/Xem/Lưu/Bản đồ) luôn hiện ở đáy. Nút lên đầu trang ở bottom:112px đè đúng nút "Bản đồ" (phải nhất) → nuốt click. Đẩy nút lên trên sticky CTA. Khi sticky CTA bị display:none thì scroll-top-btn cũng bị ẩn cùng nên rule này vô hại ở các trạng thái đó. */ body:has(.sticky-lead-cta) .scroll-top-btn{bottom:calc(168px + env(safe-area-inset-bottom)) !important} /* Thanh so sánh nổi (.so-sanh-noi, z-45) cũng neo đáy. Trên trang chi tiết tin khi sticky CTA (z-980) cùng hiện, CTA đè lên thanh so sánh → nuốt click "Mở bảng". Nâng thanh so sánh lên trên sticky CTA (cùng mức nút lên đầu trang). */ body:has(.sticky-lead-cta) .so-sanh-noi{bottom:calc(168px + env(safe-area-inset-bottom)) !important} .pwa-guide[hidden]{display:none}.pwa-guide{position:fixed;inset:0;z-index:1200;display:grid;place-items:end center;padding:18px 12px calc(18px + env(safe-area-inset-bottom))}.pwa-guide-backdrop{position:absolute;inset:0;background:rgba(6,18,12,.54);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.pwa-guide-panel{position:relative;width:min(520px,100%);max-height:min(82vh,680px);overflow:auto;padding:18px;border-radius:26px;background:#fff;box-shadow:0 30px 90px rgba(0,0,0,.28)}.pwa-guide-close{position:absolute;right:12px;top:12px;width:42px;height:42px;border:1px solid var(--g-border);border-radius:999px;background:#fff;color:var(--g-text);font-size:24px;line-height:1}.pwa-guide-head{display:grid;grid-template-columns:54px 1fr;gap:12px;padding-right:38px}.pwa-guide-icon{display:grid;place-items:center;width:54px;height:54px;border-radius:18px;background:linear-gradient(135deg,var(--g-green),var(--g-green-mid));color:#fff;font-size:24px}.pwa-guide h2{margin:0 0 5px;font-size:22px;line-height:1.15;color:var(--g-green-deep)}.pwa-guide p{margin:0;color:var(--g-text-2);font-size:14px;line-height:1.5}.pwa-guide-steps{display:grid;gap:10px;margin-top:16px}.pwa-guide-steps article{padding:14px;border:1px solid var(--g-border);border-radius:18px;background:linear-gradient(180deg,#fff,var(--g-surface-2))}.pwa-guide-steps h3{margin:0 0 8px;font-size:15px;color:var(--g-green-mid)}.pwa-guide-steps ol{margin:0;padding-left:20px;color:var(--g-text);font-size:14px;line-height:1.65}.pwa-guide-steps li::marker{font-weight:900;color:var(--g-gold)} @media(max-width:760px){ :root{--nav-h:58px} body{font-size:15px;padding-bottom:calc(76px + env(safe-area-inset-bottom))} .thanh-tren{height:calc(var(--nav-h) + env(safe-area-inset-top));padding:env(safe-area-inset-top) 12px 0 !important} .thanh-tren .logo img{height:34px !important;max-width:174px;object-fit:contain} .thanh-tren .menu-mobile summary{min-height:42px;display:flex;align-items:center;padding:0 12px;font-size:12px;border-radius:14px} .thanh-tren .menu-mobile-list{top:calc(var(--nav-h) + env(safe-area-inset-top));max-height:calc(100vh - var(--nav-h) - env(safe-area-inset-top));overflow:auto;padding:10px 12px 14px} .thanh-tren .menu-mobile-list a{min-height:46px;display:flex;align-items:center;font-size:14px;padding:0 14px} .user-action-bar, .trang-chu-v7 .user-action-bar{display:grid !important} .footer-mountain{padding-bottom:calc(110px + env(safe-area-inset-bottom))} .subpage-hero{min-height:250px}.subpage-hero-content{padding-inline:18px}.subpage-hero h1{font-size:clamp(28px,9vw,40px);line-height:1.05}.subpage-hero-sub{font-size:15px;line-height:1.48} .the,.the-bds,.card{border-radius:22px;box-shadow:0 12px 34px rgba(8,35,22,.10)} .nut,.nut-chinh,.btn,button[type="submit"],input[type="submit"]{min-height:50px;border-radius:16px;font-weight:900} form .nut,form button[type="submit"]{width:100%} } @media(max-width:420px){.pwa-install-banner{grid-template-columns:1fr}.pwa-install-actions{display:grid;grid-template-columns:1fr 1fr}.pwa-install-actions button{width:100%}.user-action-bar a{font-size:11px;gap:3px}.pwa-guide-panel{border-radius:24px}.pwa-guide-head{grid-template-columns:1fr;padding-right:34px}.pwa-guide-icon{width:48px;height:48px}} @media(max-width:760px){ body.pages-v7.ban-do-v7 .subpage-hero{min-height:190px;padding:86px 0 24px;margin-top:-58px} body.pages-v7.ban-do-v7 .subpage-hero-content{padding-block:18px 14px} body.pages-v7.ban-do-v7 main.khung .admin-hero{margin:8px 0 12px;padding:14px 16px;border-radius:20px;gap:8px;grid-template-columns:1fr} body.pages-v7.ban-do-v7 main.khung .admin-hero h2{font-size:21px;margin:5px 0 8px} body.pages-v7.ban-do-v7 main.khung .admin-hero .dong-thong-tin{margin:0;gap:6px} body.pages-v7.ban-do-v7 main.khung .admin-hero .chip{padding:4px 9px;font-size:11px} body.pages-v7.ban-do-v7 main.khung .admin-hero .dong-thong-tin:last-child{display:none} body.so-sanh-drawer-open.pages-v7 .user-action-bar, body.so-sanh-drawer-open.pages-v7 .sticky-lead-cta, body.so-sanh-drawer-open.pages-v7 .pwa-install-banner{ visibility:hidden; opacity:0; transform:translateY(120%); pointer-events:none; } } /* ============================================================ 12. TRAU CHUỐT CARD BĐS — hiệu ứng hover đồng bộ toàn site Đề xuất đã được duyệt: (1) nâng card + bóng sâu, (2) ảnh zoom trong khung, (3) badge "Có bằng chứng" quét sáng, (4) nút Chi tiết nổi bóng khi hover. AN TOÀN (theo triết lý mục 11 + gland-reveal): - Chỉ chạy trên thiết bị có chuột thật (@media hover:hover) → mobile/tablet không kích hoạt, không ảnh hưởng chạm. - Tự vô hiệu khi prefers-reduced-motion. - KHÔNG ẩn nội dung, KHÔNG đổi layout/markup. Card vẫn hiện đầy đủ ở load đầu (opacity:1 mục 11 giữ nguyên). - Base .the-bds đã có transition (mục 11); ở đây chỉ thêm trạng thái :hover + zoom ảnh + shimmer badge. Foundation nạp SAU gianghialand-public → thắng specificity. ============================================================ */ /* Khung ảnh cắt gọn để ảnh zoom không tràn ra ngoài card */ .the-bds-anh{overflow:hidden} @media (hover:hover) and (pointer:fine){ /* (1) Nâng card + bóng sâu dần. Đồng bộ cho MỌI trang (kể cả ngoài /tim-kiem vốn đã có sẵn hover riêng ở tim-kiem-v7). */ .the-bds:hover{ transform:translateY(-5px) !important; box-shadow:0 12px 28px rgba(11,59,45,.16),0 5px 12px rgba(11,59,45,.09) !important; border-color:var(--rung-3,#bfe3cb) !important; } /* (2) Ảnh nền zoom nhẹ trong khung (background-size:cover → 112%) */ .the-bds-anh{transition:background-size .55s cubic-bezier(.22,.61,.36,1)} .the-bds:hover .the-bds-anh{background-size:112%} /* (3) Badge "Có bằng chứng" (.badge.ok) quét sáng 1 lần khi hover */ .the-bds .badge.ok{position:relative;overflow:hidden} .the-bds .badge.ok::after{ content:"";position:absolute;inset:0;transform:translateX(-120%); background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.7) 50%,transparent 70%); pointer-events:none; } .the-bds:hover .badge.ok::after{transform:translateX(120%);transition:transform .9s ease} /* (4) Nút "Chi tiết" (.the-bds-cta .nut đầu) nổi bóng khi hover card */ .the-bds-cta .nut{transition:box-shadow .2s ease,transform .16s cubic-bezier(.22,.61,.36,1)} .the-bds:hover .the-bds-cta .nut{box-shadow:0 6px 16px rgba(11,59,45,.26)} } @media (prefers-reduced-motion:reduce){ .the-bds:hover, .the-bds:hover .the-bds-anh, .the-bds .badge.ok::after, .the-bds:hover .the-bds-cta .nut{ transform:none !important; transition:none !important; background-size:cover !important; } } /* ============================================================ 13. TRAU CHUỐT NÚT (.nut) — hover nổi bóng + phản hồi khi bấm Base .nut:hover chỉ có translateY(-1px); bổ sung transition mượt, đổ bóng khi hover, và lún nhẹ khi :active để cảm giác bấm thật. Chỉ kích hoạt hover trên thiết bị có chuột; tôn trọng reduced-motion. ============================================================ */ .nut{transition:transform .16s cubic-bezier(.22,.61,.36,1),box-shadow .2s ease,background-color .2s ease} @media (hover:hover) and (pointer:fine){ .nut:hover{box-shadow:0 8px 20px rgba(11,59,45,.22)} .nut.vang:hover{box-shadow:0 8px 20px rgba(214,168,79,.36)} } .nut:active{transform:translateY(0) scale(.98)} @media (prefers-reduced-motion:reduce){ .nut{transition:none !important} .nut:hover,.nut:active{transform:none !important;box-shadow:none !important} } /* ============================================================ 14. TRAU CHUỐT NAV LINK + CHIP + BADGE — mượt & nổi bật hơn Giữ nguyên nội dung/màu; chỉ thêm transition + phản hồi hover tinh tế. Nav link hiện đổi màu giật (không transition); chip/badge phẳng. Chỉ hover trên thiết bị có chuột; tôn trọng reduced-motion. ============================================================ */ .thanh-tren .menu a{transition:background-color .2s ease,color .2s ease,transform .16s cubic-bezier(.22,.61,.36,1)} @media (hover:hover) and (pointer:fine){ .thanh-tren .menu a:hover{transform:translateY(-1px)} /* Chip lọc/thông tin: nhấc nhẹ + viền rõ hơn khi rê chuột */ .chip{transition:transform .16s cubic-bezier(.22,.61,.36,1),box-shadow .2s ease} .chip:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(11,59,45,.1)} /* Badge: hơi phóng để "bằng chứng/pháp lý" bắt mắt hơn 1 nhịp */ .badge{transition:transform .16s cubic-bezier(.22,.61,.36,1)} .the-bds:hover .badge,.the:hover .badge{transform:scale(1.04)} } @media (prefers-reduced-motion:reduce){ .thanh-tren .menu a,.chip,.badge{transition:none !important;transform:none !important;box-shadow:none !important} } /* ============================================================ 15. TRẠNG THÁI "ĐANG GỬI" cho nút submit form (ux-form.js) Khi form hợp lệ được gửi: nút khoá lại + spinner + "Đang gửi..." để chống double-submit và phản hồi rõ. Spinner tôn trọng reduced-motion (đứng yên, vẫn hiện để báo trạng thái). ============================================================ */ .nut.dang-gui{opacity:.85;cursor:progress;pointer-events:none} .gui-spinner{ display:inline-block;width:15px;height:15px;margin-right:8px;vertical-align:-2px; border:2px solid currentColor;border-right-color:transparent;border-radius:50%; animation:gui-spin .6s linear infinite; } @keyframes gui-spin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){ .gui-spinner{animation:none} }