, và quy tắc giữ màu vàng của nó là .bh-band .bh-eyebrow — chỉ hai lớp. Quy tắc dưới đây ba lớp nên sẽ thắng và nhuộm luôn nhãn đó thành màu kem nếu không loại trừ. Sửa một lỗi hiển thị mà đẻ ra lỗi thứ hai thì không phải là sửa. */ .bh .bh-band .bh-head p:not(.bh-eyebrow), .bh-band .bh-head p:not(.bh-eyebrow){ color:var(--bh-cream,#E9E3D6); opacity:.85; } /* ============================================================ ĐƯỜNG DẪN PHÂN CẤP ============================================================ */ .bh .bh-crumb{ display:flex;flex-wrap:wrap;align-items:center;gap:8px; font-size:.78rem;letter-spacing:.03em;color:var(--bh-ink-2); margin-bottom:18px; } .bh .bh-crumb a{color:var(--bh-ink-2);border-bottom:1px solid transparent} .bh .bh-crumb a:hover{color:var(--bh-gold-dim);border-bottom-color:var(--bh-gold)} .bh .bh-crumb span{color:var(--bh-rule);line-height:1} .bh .bh-crumb b{font-weight:600;color:var(--bh-ink)} .bh-sec--dark .bh-crumb,.bh-sec--dark .bh-crumb a{color:rgba(246,243,236,.72)} @media (max-width:600px){ .bh .bh-crumb{font-size:.72rem;gap:6px} } /* Liên kết trong đoạn văn trên nền tối: CSS gốc để màu mực nên nằm trên nền navy là không đọc được. */ .bh .bh-sec--dark p a, .bh .bh-band p a{ color:var(--bh-gold,#D4AF63); border-bottom:1px solid rgba(212,175,99,.45); } .bh .bh-sec--dark p a:hover, .bh .bh-band p a:hover{color:#fff;border-bottom-color:#fff} /* ============================================================ CHÂN TRANG Nền chân trang của giao diện đang là màu trắng, trong khi khối liên hệ được viết cho nền tối nên chữ màu kem gần như vô hình. Đổi nền chân trang sang navy để đúng hệ màu và đọc được. ============================================================ */ .footer-widgets.footer{ background:var(--bh-navy-900,#0B1A31); color:var(--bh-cream,#F6F3EC); border-top:3px solid var(--bh-gold,#D4AF63); padding-top:46px; padding-bottom:34px; } .footer-widgets.footer .col{padding-bottom:0} /* Thanh dưới cùng của giao diện đang rỗng: dòng bản quyền bị nhập nhầm vào ô "CSS class" của Bottom Bar trong Theme Options nên không in ra chữ, chỉ còn một dải xám. Ẩn đi, dòng bản quyền đã nằm trong khối chân trang. */ .absolute-footer{display:none !important} .bh-foot{color:var(--bh-cream,#F6F3EC)} .bh-foot-cols{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) 1.35fr; gap:30px; padding-bottom:30px; border-bottom:1px solid rgba(212,175,99,.22); } .bh-foot-col{min-width:0} .bh-foot-h{ display:block; font-size:.66rem; letter-spacing:.15em; text-transform:uppercase; color:var(--bh-gold,#D4AF63); margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid rgba(212,175,99,.22); } .bh-foot ul{margin:0;padding:0;list-style:none} .bh-foot li{margin:0;padding:0;border:0} .bh-foot li a{ display:block; padding:5px 0; font-size:.87rem; line-height:1.4; color:rgba(246,243,236,.82); border-bottom:1px solid transparent; text-transform:none; letter-spacing:0; } .bh-foot li a:hover{color:var(--bh-gold,#D4AF63)} .bh .bh-foot-lh p, .bh-foot .bh-foot-lh p{margin:0 0 12px;font-size:.87rem;line-height:1.5;color:rgba(246,243,236,.82)} .bh-foot-lh b{ display:block; font-size:.64rem;letter-spacing:.14em;text-transform:uppercase; color:var(--bh-gold,#D4AF63);font-weight:500;margin-bottom:3px; } .bh .bh-foot-lh a, .bh-foot .bh-foot-lh p a{color:var(--bh-cream,#F6F3EC);border-bottom:1px solid rgba(212,175,99,.4);word-break:break-all;overflow-wrap:anywhere;display:inline-block;max-width:100%} .bh .bh-foot-lh a:hover{color:var(--bh-gold,#D4AF63);border-bottom-color:var(--bh-gold,#D4AF63)} .bh-foot-zalo{ display:inline-block; margin-top:4px; padding:9px 17px; font-size:.82rem; letter-spacing:.04em; background:var(--bh-gold,#D4AF63); color:var(--bh-navy-900,#0B1A31); border:1px solid var(--bh-gold,#D4AF63); } .bh .bh-foot a.bh-foot-zalo, .bh .bh-foot-lh a.bh-foot-zalo{ color:var(--bh-navy-900,#0B1A31); border-bottom:1px solid var(--bh-gold,#D4AF63); font-weight:600; } .bh .bh-foot a.bh-foot-zalo:hover, .bh .bh-foot-lh a.bh-foot-zalo:hover{background:transparent;color:var(--bh-gold,#D4AF63)} /* dòng bản quyền */ .bh .bh-foot-cr{ margin-top:14px; padding-top:12px; border-top:1px solid rgba(212,175,99,.16); font-size:.78rem; color:rgba(246,243,236,.45); } /* dải nhận tin qua Zalo */ .bh-foot-tin{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 26px; padding:20px 0 0; } .bh .bh-foot-tin p, .bh-foot .bh-foot-tin p{margin:0;flex:1 1 320px;font-size:.87rem;line-height:1.55;color:rgba(246,243,236,.72)} .bh-foot-tin strong{color:var(--bh-cream,#F6F3EC);font-weight:600} /* khối pháp lý */ .bh-foot-pl{ padding-top:18px; border-top:1px solid rgba(212,175,99,.22); font-size:.8rem; line-height:1.6; color:rgba(246,243,236,.6); } .bh .bh-foot-pl p, .bh-foot .bh-foot-pl p{color:rgba(246,243,236,.6);font-size:.8rem;line-height:1.6;margin:0} .bh .bh-foot-pl a, .bh-foot .bh-foot-pl a{color:rgba(246,243,236,.8);border-bottom:1px solid transparent} .bh .bh-foot-pl a:hover{color:var(--bh-gold,#D4AF63);border-bottom-color:var(--bh-gold,#D4AF63)} .bh .bh-foot-pl-links{margin:0 0 10px} .bh-foot-pl-links span{color:rgba(212,175,99,.45);margin:0 9px} @media (max-width:1024px){ .bh-foot-cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} } @media (max-width:768px){ .bh-foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px} } @media (max-width:520px){ .bh-foot-cols{grid-template-columns:1fr;gap:18px} .footer-widgets.footer{padding-top:34px} } /* ============================================================ KHỐI LIÊN HỆ Ở CHÂN TRANG (khối cũ, giữ để không vỡ trang khác) ============================================================ */ .bh .bh-lien-he-chan{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; padding-bottom:18px; border-bottom:1px solid rgba(212,175,99,.28); margin-bottom:4px; } .bh .bh-lien-he-chan > div{min-width:0} .bh .bh-lien-he-chan span{ display:block; font-size:.66rem;letter-spacing:.14em;text-transform:uppercase; color:var(--bh-gold);margin-bottom:5px; } .bh .bh-lien-he-chan a{ font-size:.95rem; color:var(--bh-cream,#F6F3EC); border-bottom:1px solid transparent; word-break:break-word; } .bh .bh-lien-he-chan a:hover{border-bottom-color:var(--bh-gold);color:#fff} @media (max-width:768px){ .bh .bh-lien-he-chan{grid-template-columns:1fr;gap:13px} } /* ============================================================ VIDEO TẢI THEO YÊU CẦU ============================================================ */ .bh figure.bh-video{margin:0} .bh .bh-video-khung{ position:relative; display:block; overflow:hidden; cursor:pointer; background:var(--bh-navy-700,#12294A); border:1px solid var(--bh-rule); } .bh .bh-video-khung img{ position:absolute;inset:0; width:100%;height:100%; object-fit:cover; transition:transform .4s ease,filter .3s ease; } .bh .bh-video-khung::before{ content:""; position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(11,26,49,.05) 40%,rgba(11,26,49,.72) 100%); transition:background .3s ease; } .bh .bh-video-khung:hover img{transform:scale(1.03)} .bh .bh-video-khung:focus-visible{outline:2px solid var(--bh-gold);outline-offset:2px} .bh .bh-video-nut{ position:absolute;z-index:2; left:50%;top:50%;transform:translate(-50%,-50%); width:66px;height:66px;border-radius:50%; background:rgba(212,175,99,.94); display:grid;place-items:center; transition:transform .25s ease,background .25s ease; } .bh .bh-video-nut::after{ content:""; width:0;height:0; margin-left:5px; border-left:20px solid var(--bh-navy-900,#0B1A31); border-top:12px solid transparent; border-bottom:12px solid transparent; } .bh .bh-video-khung:hover .bh-video-nut{transform:translate(-50%,-50%) scale(1.09);background:var(--bh-gold)} .bh .bh-video-nhan{ position:absolute;z-index:2; left:0;right:0;bottom:0; padding:14px 16px; color:#fff;font-size:.9rem;line-height:1.4; } .bh .bh-video-khung--dang-chay{cursor:default;background:#000} .bh .bh-video-khung--dang-chay::before, .bh .bh-video-khung--dang-chay .bh-video-nut, .bh .bh-video-khung--dang-chay .bh-video-nhan{display:none} .bh .bh-video-khung iframe{position:absolute;inset:0;width:100%;height:100%;border:0} @media (max-width:600px){ .bh .bh-video-nut{width:52px;height:52px} .bh .bh-video-nut::after{border-left-width:16px;border-top-width:10px;border-bottom-width:10px} .bh .bh-video-nhan{font-size:.82rem;padding:11px 13px} } /* bản vẽ mặt bằng — hiện trọn vẹn, không cắt theo tỉ lệ. contain:none và content-visibility:visible là để gỡ đúng hai thuộc tính mà bộ nạp chậm của LiteSpeed đặt lên ảnh (contain:size kèm contain-intrinsic-size:3000px 1500px) — chính hai thuộc tính đó kéo bản vẽ cao gấp ba so với tỉ lệ thật. */ .bh img.bh-mat-bang{ display:block; width:100%;height:auto; max-width:900px; margin:0 auto; background:#fff; border:1px solid var(--bh-rule); aspect-ratio:auto; object-fit:contain; contain:none; content-visibility:visible; contain-intrinsic-size:none; } /* Bản vẽ khổ lớn trong nội dung trang (Mặt bằng, Trang chủ). Quy tắc .bh-fig img trong CSS gốc cắt ảnh theo tỉ lệ 4/3 — đúng với ảnh chụp nhưng sai với bản vẽ, vì bản vẽ mất phần chú giải và khung tên. Lớp này trả ảnh về đúng tỉ lệ gốc và gỡ contain của bộ nạp chậm. */ .bh img.bh-ban-ve{ display:block; width:100%;height:auto; max-width:none; aspect-ratio:auto; object-fit:contain; background:#fff; contain:none; content-visibility:visible; contain-intrinsic-size:none; } /* ảnh mặt bằng có chú thích */ .bh figure.bh-fig{margin:0 0 20px} .bh figure.bh-fig img{display:block;background:#fff} .bh figure.bh-fig figcaption{margin-top:9px} /* chú thích bản vẽ — dòng chữ thường nằm dưới ảnh, canh theo bề ngang ảnh */ .bh figcaption.bh-cap-mb{ position:static; display:block; max-width:900px; margin:10px auto 0; padding:0; background:none; font-size:.84rem; line-height:1.55; color:var(--bh-ink-2); text-align:left; } .bh figcaption.bh-cap-mb strong{display:inline;font-weight:600;color:var(--bh-ink)} /* ============================================================ CHÚ THÍCH DƯỚI ẢNH .bh-credit trong CSS gốc là nhãn ghi nguồn đặt CHỒNG lên ảnh (position:absolute, chữ màu kem). Dùng nó cho một dòng chú thích bình thường thì dòng chữ bay ra khỏi khối và dồn về góc trang. .bh-cap là chú thích thật: nằm dưới ảnh, màu mực đọc được. ============================================================ */ .bh .bh-cap{ position:static; display:block; margin-top:9px; font-size:.84rem; line-height:1.55; letter-spacing:0; color:var(--bh-ink-2); } .bh .bh-cap a{color:var(--bh-gold-dim);text-decoration:underline;text-underline-offset:2px} .bh .bh-cap strong{font-weight:600;color:var(--bh-ink)} /* Lưới an toàn: nếu còn sót .bh-credit ở nơi không có ảnh nền tối, kéo nó về dòng chữ bình thường thay vì để bay ra góc trang. */ .bh .bh-wrap > .bh-credit, .bh .bh-g .bh-credit, .bh figure.bh-video > .bh-credit, .bh figure.bh-fig > .bh-credit{ position:static; display:block; margin-top:9px; font-size:.84rem; line-height:1.55; color:var(--bh-ink-2); } /* ============================================================ CÂU HỎI THƯỜNG GẶP Đè lại bản CSS cũ đang chạy trên site: dấu + bên trái đổi thành mũi tên bên phải, thêm khoảng thở và vùng bấm rộng hơn. ============================================================ */ .bh .bh-faq details{border-bottom:1px solid var(--bh-rule);padding:0;margin:0} .bh .bh-faq details:first-child{border-top:1px solid var(--bh-rule)} .bh .bh-faq summary{ position:relative; list-style:none; cursor:pointer; padding:15px 34px 15px 0; font-weight:500; font-size:.97rem; line-height:1.45; color:var(--bh-ink); transition:color .18s ease; } .bh .bh-faq summary::-webkit-details-marker{display:none} .bh .bh-faq summary::marker{content:""} .bh .bh-faq summary:hover{color:var(--bh-gold-dim)} .bh .bh-faq summary::before, .bh .bh-faq details[open] summary::before{content:none;margin:0} .bh .bh-faq summary::after{ content:""; position:absolute; right:6px;top:50%; width:9px;height:9px; margin-top:-7px; border-right:2px solid var(--bh-gold); border-bottom:2px solid var(--bh-gold); transform:rotate(45deg); transition:transform .2s ease; } .bh .bh-faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px} .bh .bh-faq details[open] summary{color:var(--bh-gold-dim)} .bh .bh-faq details > p{ margin:0; padding:0 34px 17px 0; font-size:.92rem; line-height:1.65; color:var(--bh-ink-2); max-width:66ch; } .bh .bh-faq details > p a{color:var(--bh-gold-dim);text-decoration:underline;text-underline-offset:2px} /* cột trái của khối hỏi đáp */ .bh .bh-faq-intro{position:sticky;top:96px} .bh .bh-faq-intro p{margin-bottom:14px} @media (max-width:849px){ .bh .bh-faq-intro{position:static} } /* ============================================================ MEGA MENU — Bán · Cho thuê Nội dung nằm trong UX Block gắn vào mục menu cấp 1 của Flatsome. ============================================================ */ .nav-dropdown .bh-mega, .bh-mega{padding:0;text-align:left} .bh-mega-cols{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; } .bh-mega-col{ padding:20px 20px 18px; border-right:1px solid var(--bh-rule); min-width:0; } .bh-mega-col:last-child{border-right:0} .bh-mega-col--alt{background:var(--bh-paper,#F6F3EC)} .bh-mega h4{ margin:0 0 11px; font-family:var(--bh-serif,Georgia,serif); font-size:1rem;font-weight:600;line-height:1.3; color:var(--bh-navy-900,#0B1A31); border-bottom:1px solid var(--bh-rule); padding-bottom:8px; } .bh-mega h4 a{color:inherit} .bh-mega h4 a:hover{color:var(--bh-gold-dim)} .bh-mega ul{margin:0;padding:0;list-style:none} .bh-mega li{margin:0;padding:0;border:0} .bh-mega li a{ display:flex;align-items:baseline;gap:8px; padding:6px 0; font-size:.86rem;line-height:1.4; color:var(--bh-ink-2); text-transform:none;letter-spacing:0; } .bh-mega li a:hover{color:var(--bh-gold-dim)} .bh-mega-so{ margin-left:auto;flex:none; font-style:normal;font-size:.72rem;font-weight:600; min-width:20px;text-align:center; padding:1px 6px;border-radius:2px; background:rgba(212,175,99,.22);color:var(--bh-gold-dim); } .bh-mega-so--0{background:transparent;color:#B9B5AC;font-weight:400} .bh-mega-sep{ margin-top:11px;padding-top:9px; border-top:1px solid var(--bh-rule); font-size:.66rem;letter-spacing:.13em;text-transform:uppercase; color:var(--bh-gold-dim); } .bh-mega-all{ margin-top:9px;padding-top:8px; border-top:1px solid var(--bh-rule); } .bh-mega-all a{color:var(--bh-ink);font-weight:600} .bh-mega-chan{ margin:0;padding:9px 20px; border-top:1px solid var(--bh-rule); background:var(--bh-white,#fff); font-size:.72rem;color:var(--bh-ink-2); } /* Trong menu trượt trên điện thoại: xếp dọc, bỏ viền cột */ .mobile-sidebar .bh-mega-cols, .off-canvas .bh-mega-cols{grid-template-columns:1fr} .mobile-sidebar .bh-mega-col, .off-canvas .bh-mega-col{ border-right:0;border-bottom:1px solid var(--bh-rule); padding:14px 0 12px;background:transparent; } .mobile-sidebar .bh-mega-chan, .off-canvas .bh-mega-chan{padding:9px 0;background:transparent} @media (max-width:849px){ .bh-mega-cols{grid-template-columns:1fr 1fr} .bh-mega-col{border-bottom:1px solid var(--bh-rule)} } @media (max-width:600px){ .bh-mega-cols{grid-template-columns:1fr} .bh-mega-col{border-right:0} } /* Khối Chi phí hằng tháng trên trang căn hộ. Số phí là thứ khách đọc kỹ nhất sau giá — cho nó thở rộng hơn bảng thông số. */ .bh-trang-can-ho .bh-tbl--phi th{width:34%} .bh-trang-can-ho .bh-tbl--phi td b{font-size:1.05em} .bh-trang-can-ho .bh-tbl--phi + .bh-stamp{margin-top:12px} /* ========================================================================== Bộ lọc quỹ căn — tám ô, hai hàng. Khối tìm kiếm gốc (.bh-search, .bh-seg, .bh-fields) do người thiết kế dựng trong Flatsome Custom CSS và vẫn giữ nguyên. Phần dưới đây CHỈ thêm biến thể tám ô, không sửa gì của bản bốn ô — trang nào còn dùng bản cũ vẫn nguyên vẹn. MỌI CHỌN TỬ Ở ĐÂY ĐỀU PHẢI CÓ TIỀN TỐ .bh-search--form. Flatsome Custom CSS in thẳng vào
, tức là nạp SAU tệp của plugin. Quy tắc `@media (min-width:700px) .bh-fields{grid-template-columns:repeat(4,1fr) auto}` của họ có cùng độ ưu tiên với `.bh-fields--8`, mà cùng độ ưu tiên thì cái nạp sau thắng — nên bản tám ô bị kéo về năm cột. Thêm một lớp cha là đủ để thắng dứt điểm, không cần dùng !important. Chọn grid cố định 4 cột thay vì auto-fit: tám ô chia đúng 4 + 4 nên hai hàng thẳng cột nhau. Với auto-fit, chiều rộng nhãn khác nhau sẽ đẩy các ô lệch hàng và hàng lọc trông như bị vỡ. ========================================================================== */ .bh-search--form{margin:0} .bh-search--form .bh-fields--8{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px 16px; align-items:end; } .bh-search--form .bh-fields--8 .bh-field{min-width:0} .bh-search--form .bh-fields--8 .bh-field select{width:100%;max-width:100%} .bh-search--form .bh-seg{margin-bottom:18px} .bh-search--form .bh-seg__nut{ display:inline-block;padding:9px 22px; border:1px solid var(--bh-rule-2,#e5e7eb); font-size:13px;letter-spacing:.06em;text-transform:uppercase; text-decoration:none;background:var(--bh-white,#fff); /* Màu chữ phải đặt cứng, không dùng inherit. Khối tìm kiếm nằm trong section nền tối nên inherit sẽ lấy màu chữ sáng của nền tối — chữ trắng trên nền trắng, nút "Thuê" gần như tàng hình. */ color:var(--bh-ink,#12203c); } .bh-search--form .bh-seg__nut + .bh-seg__nut{border-left:0} .bh-search--form .bh-seg__nut.is-on{ background:var(--bh-ink,#12203c);color:#fff;border-color:var(--bh-ink,#12203c); } /* Nút nằm ở thanh riêng dưới lưới ô lọc, không chen vào lưới. Nếu nhét nút thành ô thứ chín thì lưới 4 cột thành ba hàng, hàng cuối lẻ một ô — vừa xấu vừa sai với "tám ô, hai hàng". Tách ra thì phần lọc luôn đúng hai hàng đều nhau, và nút có chỗ đứng cạnh liên kết Xóa bộ lọc. */ .bh-search--form .bh-search__hd{ display:flex;align-items:center;justify-content:flex-end; gap:16px;margin-top:18px; } .bh-search--form .bh-search__xoa{font-size:13px;text-decoration:underline;margin-right:auto} .bh-search--form .bh-search__hd .bh-btn{min-width:190px} /* Các mốc chia cột của lưới ô lọc nằm ở khối "MÀN HÌNH HẸP" cuối tệp, cùng chỗ với phần gập bộ lọc — hai thứ đó phải khớp nhau nên để chung một chỗ. */ @media (max-width:520px){ .bh-search--form .bh-search__hd{flex-direction:column-reverse;align-items:stretch} .bh-search--form .bh-search__hd .bh-btn{width:100%} .bh-search--form .bh-search__xoa{text-align:center;margin-right:0} } /* ========================================================================== Khối Tiện ích trên trang chủ — sáu ô ảnh. Tỷ lệ khung 4:3 khóa cứng bằng aspect-ratio chứ không để ảnh tự định chiều cao: bộ ảnh có ảnh 1386x1040 và ảnh 1600x1200, lệch nhau vài phần trăm, đủ để hàng ô so le nhau một cách khó chịu. Khóa khung rồi cho ảnh object-fit cover thì hàng nào cũng thẳng. ========================================================================== */ .bh-ti{ display:grid;grid-template-columns:repeat(3,1fr); gap:26px 22px;margin-top:8px; } .bh-ti__o{margin:0} .bh-ti__anh{ aspect-ratio:4/3;overflow:hidden;background:var(--bh-rule,#eee); } .bh-ti__anh img{width:100%;height:100%;object-fit:cover;display:block} .bh-ti figcaption{padding-top:12px;display:block} .bh-ti figcaption b{display:block;font-size:1.02rem;line-height:1.35} .bh-ti__mo{ display:block;margin-top:4px;font-size:.88rem;line-height:1.5; color:var(--bh-muted,#6b7280); } /* Dòng phí là thứ đáng đọc nhất trong ô — cho nó một gạch đứng để mắt bắt được, và đổi màu khi khoản đó KHÔNG nằm trong phí quản lý, để hai loại không bị đọc lướt thành một. */ .bh-ti__phi{ display:block;margin-top:9px;padding-left:9px; border-left:2px solid var(--bh-gold,#d4af63); font-size:.82rem;line-height:1.45; } .bh-ti__phi.is-rieng{border-left-color:var(--bh-muted,#9ca3af)} @media (max-width:900px){ .bh-ti{grid-template-columns:repeat(2,1fr);gap:22px 18px} } @media (max-width:560px){ .bh-ti{grid-template-columns:1fr} } /* ========================================================================== Điểm cần chú ý — rút gọn 15 từ, mở rộng bằng nút. Thứ tự các quy tắc dưới đây là có chủ ý: 1. Mặc định (KHÔNG có .bh-js) hiện bản ĐỦ CHỮ và giấu nút. Ai tắt JavaScript, và mọi trình thu thập dữ liệu, đều đọc được trọn đoạn. 2. Có .bh-js thì đảo lại: hiện bản rút gọn, giấu bản đủ, hiện nút. 3. Bấm nút thêm .is-mo thì đảo lần nữa. Viết ngược thứ tự này — mặc định giấu chữ — là mất chữ với người không có JavaScript, mà đây đúng là ô giữ vai trò minh bạch của cả site. ========================================================================== */ .bh-caveat__gon{display:none} .bh-caveat__nut{display:none} .bh-js .bh-caveat__gon{display:inline} .bh-js .bh-caveat__du{display:none} .bh-js .bh-caveat__nut{display:inline-block} .bh-js .bh-caveat.is-mo .bh-caveat__gon{display:none} .bh-js .bh-caveat.is-mo .bh-caveat__du{display:inline} .bh-caveat__nut{ margin-top:6px;padding:0;border:0;background:none; font:inherit;font-size:.75rem;line-height:1.3; color:var(--bh-ink-2,#374151);text-decoration:underline; text-underline-offset:2px;cursor:pointer; } .bh-caveat__nut:hover{color:var(--bh-ink,#12203c)} .bh-caveat__nut:focus-visible{outline:2px solid var(--bh-gold,#d4af63);outline-offset:2px} /* CHUẨN HÓA CHIỀU CAO KHỐI — hai lớp khóa, cần cả hai. Khóa theo TỪ (15 từ, làm ở PHP) cho độ dài chữ bằng nhau, nhưng chữ Việt có từ dài ngắn khác nhau nên 15 từ vẫn xuống 3 hay 4 dòng tùy thẻ — đo thực tế trên site ra 126 px và 146 px, lệch đủ để nhìn thấy. Nên khóa thêm theo DÒNG: đúng ba dòng, phần thừa cắt. Kết hợp lại thì mọi khối cao bằng nhau tuyệt đối, cột nào cũng thẳng. Chỉ áp khi có JavaScript. Không có thì khối hiện đủ chữ, cắt dòng là mất chữ. */ .bh-js .bh-card .bh-caveat .bh-caveat__txt{ display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3; overflow:hidden; } .bh-js .bh-card .bh-caveat.is-mo .bh-caveat__txt{ display:inline;overflow:visible; } .bh-js .bh-card .bh-caveat{min-height:5.9em} /* Biến thể "điểm nổi bật" của khối rút gọn trên thẻ. Dùng chung bộ khung với .bh-caveat để giữ nguyên cơ chế rút gọn 15 từ, nút Xem thêm và chiều cao đã chuẩn hóa — chỉ đổi màu. Nền vàng nhạt của .bh-caveat là màu CẢNH BÁO, đặt dưới nhãn "Điểm nổi bật" thì đọc ra ngược nghĩa, nên đổi sang nền trung tính, giữ lại gạch vàng thương hiệu. PHẢI CÓ TIỀN TỐ .bh-card. Quy tắc .bh-caveat của Flatsome in thẳng vào nên nạp sau tệp này; cùng độ ưu tiên thì cái nạp sau thắng, và nền cảnh báo quay lại. Thêm một lớp cha là đủ, không cần !important. Cũng không dùng var(--bh-bg-2): biến đó KHÔNG tồn tại trong hệ màu của site, đặt vào chỉ tổ trông như có mà không có. Ghi thẳng mã màu. */ .bh-card .bh-caveat--hl{ background:#f6f6f4; border-left-color:var(--bh-gold,#d4af63); } /* ========================================================================== Thanh công cụ trên lưới quỹ căn — đếm căn, sắp xếp, đổi kiểu hiển thị. BA THỨ PHẢI KHÓA, đo trên site thật mới ra: 1. Chiều cao. Ô chọn cao 39 px, nút Lưới/Danh sách cao 38 px và nằm thấp hơn 8 px. Nguyên nhân: nút là inline-block nên ngồi trên đường chân chữ, chừa lại phần bụng chữ ở dưới. Cho khối cha thành flex là hết, và khóa luôn chiều cao 40 px cho cả ô chọn lẫn nút để hai bên bằng nhau tuyệt đối. 2. Khe hở giữa hai nút. Hai thẻ inline-block cách nhau đúng một dấu cách trong HTML, ra 4 px trống giữa hai nút lẽ ra phải dính liền. Flex bỏ hẳn khoảng trắng đó. 3. Đường chân chữ. Ô "7 căn" trộn hai cỡ chữ nên hộp dòng cao hơn, đẩy chữ xuống 7 px so với ô chọn. Khóa line-height rồi căn bằng flex. ========================================================================== */ .bh-tcc{ display:flex;align-items:center;gap:18px;flex-wrap:wrap; margin:26px 0 20px;padding-bottom:16px; border-bottom:1px solid var(--bh-rule,#e5e7eb); } /* Chiều cao chuẩn của mọi ô điều khiển trên thanh. */ .bh-tcc{--bh-tcc-cao:40px} .bh-tcc__dem{ display:flex;align-items:baseline;gap:5px; margin-right:auto;line-height:1; font-size:.86rem;color:var(--bh-muted,#6b7280); } .bh-tcc__dem b{color:var(--bh-ink,#12203c);font-size:1.05rem;font-weight:600} .bh-tcc__sx{display:flex;align-items:center;gap:10px;margin:0} .bh-tcc__sx label{ line-height:1;white-space:nowrap; font-size:11px;letter-spacing:.08em;text-transform:uppercase; color:var(--bh-muted,#6b7280); } .bh-tcc .bh-tcc__sx select{ width:auto;min-width:210px;height:var(--bh-tcc-cao); padding-top:0;padding-bottom:0;margin:0; } /* Nút Áp dụng chỉ dành cho người tắt JavaScript. Có JavaScript thì ô sắp xếp tự gửi khi đổi lựa chọn, nên nút thành thừa — giấu đi cho gọn. */ .bh-js .bh-tcc__ap{display:none} .bh-tcc__ap{ height:var(--bh-tcc-cao);padding:0 14px; border:1px solid var(--bh-rule-2,#d1d5db); background:#fff;font:inherit;font-size:.82rem;cursor:pointer; } /* Flex, không inline-block: vừa bỏ khe 4 px giữa hai nút, vừa cho phép căn giữa theo chiều dọc mà không phụ thuộc đường chân chữ. */ .bh-tcc__kieu{display:flex} .bh-tcc__nut{ display:flex;align-items:center; height:var(--bh-tcc-cao);padding:0 18px; border:1px solid var(--bh-rule-2,#d1d5db); font-size:12px;letter-spacing:.05em;text-transform:uppercase;line-height:1; text-decoration:none;color:var(--bh-ink,#12203c);background:#fff; } .bh-tcc__nut + .bh-tcc__nut{border-left:0} .bh-tcc__nut.is-on{background:var(--bh-ink,#12203c);color:#fff;border-color:var(--bh-ink,#12203c)} .bh-tcc__nut:focus-visible{outline:2px solid var(--bh-gold,#d4af63);outline-offset:2px} @media (max-width:760px){ .bh-tcc{gap:12px} .bh-tcc__dem{width:100%;margin-right:0} .bh-tcc__sx{flex:1 1 auto;min-width:0} .bh-tcc__sx label{display:none} .bh-tcc .bh-tcc__sx select{min-width:0;width:100%} } /* ========================================================================== Kiểu DANH SÁCH — một cột, ảnh bên trái, nội dung bên phải. Dùng lại đúng thẻ của kiểu lưới, chỉ đổi cách xếp. Dựng một mẫu HTML riêng cho danh sách là mở đường cho hai kiểu lệch nội dung của nhau về sau. ========================================================================== */ .bh-g--ds{grid-template-columns:1fr !important;gap:16px} .bh-g--ds .bh-card{flex-direction:row} .bh-g--ds .bh-card > .bh-ph{ flex:0 0 300px;aspect-ratio:4/3;align-self:stretch; } .bh-g--ds .bh-card > .bh-ph img{width:100%;height:100%;object-fit:cover} .bh-g--ds .bh-card-b{flex:1 1 auto;padding:16px 20px} /* Ở kiểu danh sách có bề ngang thoải mái, nên thông số nằm ngang cho đỡ cao. */ .bh-g--ds .bh-spec{display:flex;flex-wrap:wrap;gap:0 26px} .bh-g--ds .bh-spec li{border:0;padding:2px 0} /* Khối Điểm nổi bật ở kiểu danh sách không cần khóa sàn chiều cao: mỗi hàng chỉ có một thẻ nên không có gì để so hàng với nó. */ .bh-js .bh-g--ds .bh-card .bh-caveat{min-height:0} @media (max-width:700px){ .bh-g--ds .bh-card{flex-direction:column} .bh-g--ds .bh-card > .bh-ph{flex:0 0 auto} } /* ========================================================================== DẢI SỐ — dùng cho khối Thông tin nhanh và Ba cam kết. Ý đồ: con số đứng trước, chữ đứng sau. Một bảng chín dòng bắt người ta đọc hết mới biết dự án to cỡ nào; một dải sáu con số thì liếc một giây là nắm. KHÔNG dữ kiện nào bị bỏ — phần chữ của mỗi dòng cũ trở thành nhãn dưới số. Số dùng chữ có chân (font tiêu đề) để tách hẳn khỏi phần chữ nhãn, và dùng font-variant-numeric: tabular-nums cho các chữ số rộng bằng nhau — không có nó thì "1.571" và "49,8" so le nhau, nhìn như xếp lỗi. ========================================================================== */ .bh-so{ display:grid;grid-template-columns:repeat(6,1fr); gap:0;border:1px solid var(--bh-rule,#e5e7eb); } .bh-so__o{padding:20px 18px;border-right:1px solid var(--bh-rule,#e5e7eb)} .bh-so__o:last-child{border-right:0} /* Cỡ chữ co theo bề ngang. Đo trên site: "49,8–146,2" ở 1,9rem tràn ô và xuống hai dòng, làm ô đó cao 182 px trong khi các ô khác 156 px — cả dải xô lệch. Dùng clamp để số dài tự thu lại, không phải đặt riêng một lớp cho từng ô. */ .bh-so__n{ display:block;font-family:var(--bh-serif,Georgia,serif); font-size:clamp(1.3rem,1.55vw,1.9rem);line-height:1.15; color:var(--bh-ink,#12203c); font-variant-numeric:tabular-nums;white-space:nowrap; } .bh-so__n small{font-size:.55em;letter-spacing:.02em;margin-left:2px} .bh-so__l{ display:block;margin-top:7px; font-size:11px;letter-spacing:.08em;text-transform:uppercase; color:var(--bh-muted,#6b7280); } .bh-so__p{ display:block;margin-top:5px;font-size:.8rem;line-height:1.45; color:var(--bh-ink-2,#374151); } /* Danh sách gọn thay cho các dòng bảng không mang số. */ .bh-dl{display:grid;grid-template-columns:180px 1fr;gap:0;margin-top:26px} .bh-dl dt,.bh-dl dd{ margin:0;padding:11px 0;border-top:1px solid var(--bh-rule,#e5e7eb); } .bh-dl dt{ font-size:11px;letter-spacing:.08em;text-transform:uppercase; color:var(--bh-muted,#6b7280); } /* text-transform:none phải ghi rõ. Giao diện đang viết hoa mọi thẻ dd, nên địa chỉ và tên chủ đầu tư bị hô biến thành "29 LIỄU GIAI..." — vừa khó đọc vừa sai chính tả tên riêng. */ .bh-dl dd{ font-size:.92rem;color:var(--bh-ink,#12203c); text-transform:none;letter-spacing:0; } @media (max-width:1000px){ .bh-so{grid-template-columns:repeat(3,1fr)} .bh-so__o{border-bottom:1px solid var(--bh-rule,#e5e7eb)} .bh-so__o:nth-child(3n){border-right:0} .bh-so__o:nth-last-child(-n+3){border-bottom:0} } @media (max-width:560px){ .bh-so{grid-template-columns:repeat(2,1fr)} .bh-so__o:nth-child(3n){border-right:1px solid var(--bh-rule,#e5e7eb)} .bh-so__o:nth-child(2n){border-right:0} .bh-so__o:nth-last-child(-n+3){border-bottom:1px solid var(--bh-rule,#e5e7eb)} .bh-so__o:nth-last-child(-n+2){border-bottom:0} .bh-dl{grid-template-columns:1fr} .bh-dl dt{padding-bottom:0;border-top:1px solid var(--bh-rule,#e5e7eb)} .bh-dl dd{padding-top:4px;border-top:0} } /* Dải số đặt trên nền tối — khối Ba cam kết. */ .bh-sec--dark .bh-so, .bh-sec--dark .bh-so__o{border-color:rgba(255,255,255,.16)} .bh-sec--dark .bh-so__n{color:var(--bh-gold,#d4af63)} .bh-sec--dark .bh-so__l{color:rgba(255,255,255,.62)} .bh-sec--dark .bh-so__p{color:rgba(255,255,255,.86)} .bh-sec--dark .bh-so__o h3{ margin:0 0 6px;font-size:1.02rem;line-height:1.35;color:#fff; } /* Ba cam kết chỉ có ba ô, không phải sáu. */ .bh-so--3{grid-template-columns:repeat(3,1fr)} @media (max-width:800px){ .bh-so--3{grid-template-columns:1fr} .bh-so--3 .bh-so__o{border-right:0;border-bottom:1px solid rgba(255,255,255,.16)} .bh-so--3 .bh-so__o:last-child{border-bottom:0} } /* Số căn thật trên ô Chọn theo nhu cầu. Đây là số ĐANG CÓ, đọc thẳng từ quỹ căn, nên nó vừa là thông tin vừa là bằng chứng trang này còn sống. */ .bh-tile__so{ display:block;margin-bottom:9px; font-family:var(--bh-serif,Georgia,serif);font-size:1.55rem;line-height:1; color:var(--bh-gold-dim,#c9a24b);font-variant-numeric:tabular-nums; } .bh-tile__so em{ font-style:normal;font-family:inherit;font-size:.48em; letter-spacing:.08em;text-transform:uppercase;color:var(--bh-muted,#6b7280); margin-left:6px; } /* ========================================================================== SỬA CHỮ NHỎ VÀ MÀU KHÓ ĐỌC Đo trên site: nhãn dưới số 11 px với màu rgba(255,255,255,.62) trên nền xanh đậm — độ tương phản chỉ khoảng 5:1, dưới ngưỡng dễ đọc cho chữ nhỏ. Nhãn ở ô Chọn theo nhu cầu còn tệ hơn: 6,4 px, nhỏ đến mức gần như trang trí. ========================================================================== */ .bh-so__l{ font-size:12.5px;letter-spacing:.06em; color:var(--bh-ink-2,#374151); } .bh-so__p{font-size:.86rem;line-height:1.55} .bh-sec--dark .bh-so__l{color:rgba(255,255,255,.80)} .bh-sec--dark .bh-so__p{color:rgba(255,255,255,.93)} .bh-sec--dark .bh-so__o h3{font-size:1.08rem} /* Cỡ tuyệt đối, không dùng em: em nhân dồn theo cỡ chữ cha nên ra 6,4 px. */ .bh-tile__so em{font-size:12px;letter-spacing:.06em;color:var(--bh-ink-2,#374151)} .bh-dl dt{font-size:12px;letter-spacing:.06em;color:var(--bh-ink-2,#374151)} .bh-dl dd{font-size:.95rem} /* ========================================================================== KHOẢNG THỞ CHO KHỐI NỀN TỐI Khối này có padding 0 ở trên nên chữ dính sát mép trên của dải màu — đo được 6 px giữa khối trước và mép dải. Trả lại đệm trên bằng đệm dưới. ========================================================================== */ /* Phải viết .bh .bh-sec.bh-sec--dark, ba lớp. Giao diện có quy tắc `.bh .bh-sec:first-child{padding-top:0}` — vốn định dành cho khối đầu trang, nhưng MỖI khối lại nằm trong một hộp .bh riêng nên khối nào cũng là con đầu, và tất cả đều bị xóa đệm trên. Khối nền sáng không lộ vì chúng ngăn nhau bằng một đường kẻ; khối nền tối thì mảng màu ập thẳng vào chữ. Đếm lại cho đúng: `.bh .bh-sec:first-child` nặng BA lớp, vì :first-child cũng tính như một lớp. Ba chọi ba thì cái nạp sau thắng — lần sửa trước tôi đếm nhầm thành hai nên vẫn thua. Phải bốn lớp. Viết cả hai dòng: dòng dưới thắng đúng quy tắc kia, dòng trên đảm bảo khối nền tối nào KHÔNG phải con đầu cũng vẫn có đệm. */ .bh .bh-sec.bh-sec--dark, .bh .bh-sec.bh-sec--dark:first-child{padding-top:56px} /* ========================================================================== HIỆU ỨNG DI CHUỘT ========================================================================== */ .bh-so__o{transition:background-color .25s ease,color .25s ease} .bh-so__o:hover{background:var(--bh-ink,#12203c)} .bh-so__o:hover .bh-so__n{color:var(--bh-gold,#d4af63)} .bh-so__o:hover .bh-so__l{color:rgba(255,255,255,.80)} .bh-so__o:hover .bh-so__p{color:rgba(255,255,255,.93)} /* Trên nền tối thì đảo lại: ô sáng lên thay vì tối đi. */ .bh-sec--dark .bh-so__o:hover{background:rgba(255,255,255,.07)} .bh-sec--dark .bh-so__o:hover .bh-so__n{color:var(--bh-gold,#d4af63)} .bh-sec--dark .bh-so__o:hover .bh-so__l{color:rgba(255,255,255,.92)} .bh-sec--dark .bh-so__o:hover .bh-so__p{color:#fff} .bh-tile{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease} .bh-tile:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(18,32,60,.10)} .bh .bh-card{transition:transform .25s ease,box-shadow .25s ease} .bh .bh-card:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(18,32,60,.12)} .bh .bh-card .bh-ph{overflow:hidden} .bh .bh-card .bh-ph img{transition:transform .5s ease} .bh .bh-card:hover .bh-ph img{transform:scale(1.045)} .bh-ti__anh{overflow:hidden} .bh-ti__anh img{transition:transform .5s ease} .bh-ti__o:hover .bh-ti__anh img{transform:scale(1.05)} /* ========================================================================== CHUYỂN ĐỘNG KHI CUỘN TRANG NGUYÊN TẮC AN TOÀN, theo đúng thứ tự: 1. Không có JavaScript → KHÔNG ẩn gì. Lớp .bh-dong do một dòng script ở gắn vào, nên chỉ máy có JavaScript mới bước vào trạng thái ẩn. 2. JavaScript có nhưng tệp chuyển động hỏng hoặc tải chậm → cũng dòng script ở đó hẹn giờ 2,5 giây rồi bật hiện toàn bộ. Không có đường nào để nội dung ở lại vô hình. 3. Máy khai báo hạn chế chuyển động → không gắn .bh-dong ngay từ đầu. Chỉ dịch 14 px và mờ dần. Biên độ lớn hơn trông như trang đang lỗi, và mỗi pixel dịch chuyển đều tính vào điểm CLS nếu làm sai. ========================================================================== */ .bh-dong .bh-head, .bh-dong .bh-so__o, .bh-dong .bh-tile, .bh-dong .bh-g .bh-card, .bh-dong .bh-ti__o, .bh-dong .bh-dl, .bh-dong .bh-tbl{ opacity:0;transform:translateY(14px); transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1); will-change:opacity,transform; } .bh-dong .is-hien, .bh-hien-het .bh-head, .bh-hien-het .bh-so__o, .bh-hien-het .bh-tile, .bh-hien-het .bh-g .bh-card, .bh-hien-het .bh-ti__o, .bh-hien-het .bh-dl, .bh-hien-het .bh-tbl{ opacity:1;transform:none; } /* Khối đầu trang KHÔNG chuyển động: nó là thứ đo điểm tải trang, và làm nó mờ dần là tự đẩy điểm đó xuống. */ .bh-hero .bh-head{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .bh-dong .bh-head, .bh-dong .bh-so__o, .bh-dong .bh-tile, .bh-dong .bh-g .bh-card, .bh-dong .bh-ti__o, .bh-dong .bh-dl, .bh-dong .bh-tbl{opacity:1;transform:none;transition:none} .bh-tile:hover,.bh .bh-card:hover{transform:none} .bh .bh-card:hover .bh-ph img,.bh-ti__o:hover .bh-ti__anh img{transform:none} } /* ========================================================================== MÀN HÌNH HẸP — bộ lọc và kết quả Số đo trên máy thật, trang /ban/, trước khi sửa: khổ 390 px khối tìm kiếm cao 790 px · thanh công cụ 138 px (ba hàng) từ mép bộ lọc xuống thẻ căn đầu tiên: 988 px khổ 820 px tám ô xếp 3 cột nên hàng cuối lẻ hai ô khổ 1024 px lưới thẻ căn 4 cột, mỗi thẻ chỉ còn 215 px Ba con số đó là ba việc phải sửa ở khối này. Mọi quy tắc đều có tiền tố .bh-search--form hoặc thêm một lớp cha, vì Flatsome in CSS thẳng vào nên nạp SAU tệp này — cùng độ ưu tiên thì họ thắng. ========================================================================== */ /* --- Mỏ neo khối kết quả ------------------------------------------------- Chừa chỗ cho đầu trang dính. Không có dòng này thì nhảy tới #bh-kq sẽ dán dòng đếm vào ngay dưới thanh điều hướng và bị che. */ .bh-neo{scroll-margin-top:96px} /* --- Gập bộ lọc ---------------------------------------------------------- Ô đánh dấu ẩn khỏi mắt nhưng KHÔNG dùng display:none — display:none thì bàn phím không tới được nó, mà nhãn thì lại phụ thuộc vào nó để bật tắt. */ .bh-search--form .bh-search__cb{ position:absolute;width:1px;height:1px; margin:-1px;padding:0;border:0;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap; } .bh-search--form .bh-search__mo{display:none} /* --- Lưới ô lọc ---------------------------------------------------------- 901 px trở lên giữ 4 cột: bốn ô mở sẵn (Tòa · Phòng ngủ · Nội thất · Giá) vừa khít MỘT hàng. 641–900 px xuống 2 cột nên bốn ô đó thành hai hàng đều nhau — chia 3 cột thì hàng cuối lẻ một ô, nhìn như lưới bị vỡ. Phần gập áp dụng từ 641 px TRỞ LÊN, kể cả máy tính (sửa 13/08/2026). Trước đó máy tính hiện thẳng cả tám ô và nút Mở rộng bị ẩn — khách mở trang gặp ngay một tờ khai tám ô, trong khi bốn ô sau chỉ có nghĩa với người đã biết mình muốn hướng nào, tầng nào. */ @media (max-width:900px){ .bh-search--form .bh-fields--8{grid-template-columns:repeat(2,1fr);gap:12px} } @media (min-width:641px){ .bh-search--form .bh-search__mo{ display:inline-flex;align-items:center;gap:8px; margin-top:14px;padding:9px 16px;cursor:pointer; border:1px solid var(--bh-rule-2,#d1d5db);background:#fff; font-size:12px;letter-spacing:.05em;text-transform:uppercase;line-height:1; color:var(--bh-ink,#12203c); } .bh-search--form .bh-search__mo::after{content:"▾";font-size:11px;line-height:1} /* PHẢI đi qua .bh-search__than. Nhãn Mở rộng nằm BÊN TRONG khối thân, không phải anh em ruột của ô đánh dấu, nên "cb ~ .bh-search__mo" không khớp gì cả. Lỗi này có sẵn từ trước nhưng chỉ lộ ra khi bật phần gập cho máy tính ngày 13/08/2026: nút hiện cùng lúc cả "Mở rộng" lẫn "Thu gọn". */ .bh-search--form .bh-search__cb:checked ~ .bh-search__than .bh-search__mo::after{content:"▴"} .bh-search--form .bh-search__cb:focus-visible ~ .bh-search__than .bh-search__mo{ outline:2px solid var(--bh-gold,#d4af63);outline-offset:2px; } .bh-search--form .bh-search__cb:not(:checked) ~ .bh-search__than .bh-search__mo .bh-search__mo-thu{display:none} .bh-search--form .bh-search__cb:checked ~ .bh-search__than .bh-search__mo .bh-search__mo-them{display:none} /* Gập từ ô thứ NĂM trở đi — trùng với hằng BHS_Tim_Kiem::SO_O_MO = 4. :not(.is-chon) là chốt an toàn: ô đang có lựa chọn thì luôn hiện, để không bao giờ có điều kiện lọc nào tác động lên kết quả mà lại vô hình. */ .bh-search--form .bh-search__cb:not(:checked) ~ .bh-search__than .bh-fields--8 > .bh-field:nth-child(n+5):not(.is-chon){ display:none; } } /* ========================================================================== NGĂN KÉO BỘ LỌC — chỉ ở khổ điện thoại (≤640 px) Ở khổ này, ba ô mở sẵn của bản gập vẫn ngốn khoảng 240 px. Rút cả khối lọc thành MỘT nút thì phần đầu khối chỉ còn hai dòng, và thẻ căn đầu tiên lên nằm trong màn hình đầu tiên. Dùng lại đúng ô đánh dấu của bản gập, không thêm trạng thái thứ hai: xoay máy từ dọc sang ngang là đổi thẳng từ ngăn kéo sang gập tại chỗ, không có cảnh ngăn kéo còn mở mà nút mở thì đã biến mất. Phần JavaScript trong behome-the.js chỉ lo ba việc mà CSS không với tới: phím Esc, nút Quay lại của điện thoại, và trả tiêu điểm về chỗ cũ. Tắt JavaScript thì ngăn kéo vẫn mở, đóng và gửi được bình thường. ========================================================================== */ .bh-search--form .bh-search__nut-loc, .bh-search--form .bh-search__dau, .bh-search--form .bh-search__nen{display:none} @media (max-width:640px){ .bh-search--form .bh-fields--8{grid-template-columns:1fr} .bh-search--form .bh-search__mo{display:none} /* Nút mở — hàng duy nhất còn lại của khối lọc khi ngăn kéo đóng. */ .bh-search--form .bh-search__nut-loc{ display:flex;align-items:center;justify-content:center;gap:8px; width:100%;padding:13px 16px;cursor:pointer; border:1px solid var(--bh-ink,#12203c);background:#fff; font-size:13px;letter-spacing:.06em;text-transform:uppercase;line-height:1; color:var(--bh-ink,#12203c); } .bh-search--form .bh-search__nut-loc b{ display:inline-flex;align-items:center;justify-content:center; min-width:20px;height:20px;padding:0 6px;border-radius:999px; background:var(--bh-gold,#d4af63);color:var(--bh-ink,#12203c); font-size:11px;font-weight:700; } .bh-search--form .bh-search__cb:focus-visible ~ .bh-search__nut-loc{ outline:2px solid var(--bh-gold,#d4af63);outline-offset:2px; } .bh-search--form .bh-search__cb:not(:checked) ~ .bh-search__than{display:none} .bh-search--form .bh-search__cb:checked ~ .bh-search__nen{ display:block;position:fixed;inset:0;z-index:99998; background:rgba(18,32,60,.45); } .bh-search--form .bh-search__cb:checked ~ .bh-search__than{ position:fixed;inset:0;z-index:99999; display:flex;flex-direction:column; background:#fff; /* Chừa lề an toàn của máy có khấc màn hình. */ padding-bottom:env(safe-area-inset-bottom,0); } .bh-search--form .bh-search__cb:checked ~ .bh-search__than .bh-search__dau{ display:flex;align-items:center;justify-content:space-between; flex:0 0 auto;padding:14px 18px; border-bottom:1px solid var(--bh-rule,#e5e7eb); font-size:13px;letter-spacing:.06em;text-transform:uppercase; color:var(--bh-ink,#12203c); } .bh-search--form .bh-search__dong{ display:flex;align-items:center;justify-content:center; width:36px;height:36px;margin:-8px -10px -8px 0; font-size:26px;line-height:1;cursor:pointer;color:var(--bh-ink,#12203c); } /* Phần ô lọc là chỗ DUY NHẤT được cuộn: thanh Xem kết quả phải luôn nằm trong tầm ngón cái, không được trôi mất theo nội dung. */ .bh-search--form .bh-search__cb:checked ~ .bh-search__than .bh-fields--8{ flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch; padding:18px;margin:0;gap:16px;align-content:start; } .bh-search--form .bh-search__cb:checked ~ .bh-search__than .bh-search__hd{ flex:0 0 auto;flex-direction:row;align-items:center; margin:0;padding:12px 18px;gap:14px; border-top:1px solid var(--bh-rule,#e5e7eb);background:#fff; } .bh-search--form .bh-search__cb:checked ~ .bh-search__than .bh-search__hd .bh-btn{ flex:1 1 auto;width:auto;min-width:0; } .bh-search--form .bh-search__cb:checked ~ .bh-search__than .bh-search__xoa{ flex:0 0 auto;margin:0;text-align:left;white-space:nowrap; } } /* Khóa nền khi ngăn kéo mở. :has() không có ở trình duyệt cũ — thiếu nó thì nền cuộn được sau lớp phủ, khó chịu chứ không hỏng. */ @media (max-width:640px){ html:has(.bh-search__cb:checked), html:has(.bh-search__cb:checked) body{overflow:hidden} } @media (max-width:520px){ .bh-search--form .bh-search__mo{justify-content:center;width:100%} } /* --- Dải chip "đang lọc" ------------------------------------------------- Cuộn qua khỏi bộ lọc là mất dấu vết của điều kiện đang bật. Dải chip đi liền trên lưới nên luôn nằm trong tầm mắt cùng với kết quả. */ .bh-loc-chip{ display:flex;flex-wrap:wrap;align-items:center;gap:8px; margin:22px 0 0; } .bh-loc-chip__nhan{ font-size:11px;letter-spacing:.08em;text-transform:uppercase; color:var(--bh-muted,#6b7280);margin-right:2px; } .bh-loc-chip .bh-loc-chip__c{ display:inline-flex;align-items:center;gap:8px; padding:6px 10px 6px 12px; border:1px solid var(--bh-rule-2,#d1d5db);border-radius:999px; background:#fff;text-decoration:none;line-height:1.2; font-size:.82rem;color:var(--bh-ink,#12203c); } .bh-loc-chip .bh-loc-chip__c b{font-weight:600} .bh-loc-chip .bh-loc-chip__c i{ font-style:normal;font-size:15px;line-height:1; color:var(--bh-muted,#6b7280); } .bh-loc-chip .bh-loc-chip__c:hover{border-color:var(--bh-ink,#12203c)} .bh-loc-chip .bh-loc-chip__c:hover i{color:var(--bh-ink,#12203c)} .bh-loc-chip .bh-loc-chip__xoa{ font-size:.8rem;text-decoration:underline;color:var(--bh-muted,#6b7280); } /* Có dải chip rồi thì thanh công cụ không cần khoảng thở đầy đủ nữa — để nguyên sẽ thành 48 px trống giữa hai thứ vốn thuộc về nhau. */ .bh-loc-chip + .bh-tcc{margin-top:16px} /* --- Thanh công cụ ------------------------------------------------------ Ở 390 px thanh này vỡ thành ba hàng chồng nhau, cao 138 px. Hàng thứ ba là cặp Lưới / Danh sách — mà dưới 640 px lưới thẻ căn đã là một cột, nên hai kiểu cho ra gần như cùng một hình. Giấu đi: bỏ một hàng đầy đủ 40 px và bỏ luôn một lựa chọn không tạo ra khác biệt nào. */ .bh-tcc .bh-tcc__loc{display:none} @media (max-width:700px){ .bh-tcc .bh-tcc__kieu{display:none} /* Chỗ của cặp Lưới / Danh sách vừa trống ra, dùng luôn cho lối quay về bộ lọc — thứ trên điện thoại cần hơn hẳn. */ .bh-tcc .bh-tcc__loc{ display:flex;align-items:center; height:var(--bh-tcc-cao);padding:0 16px; border:1px solid var(--bh-rule-2,#d1d5db);background:#fff; font-size:12px;letter-spacing:.05em;text-transform:uppercase;line-height:1; text-decoration:none;color:var(--bh-ink,#12203c);white-space:nowrap; } } /* --- Lưới thẻ căn ------------------------------------------------------- Flatsome đặt .bh-g4 thành 4 cột từ 960 px. Ở máy tính bảng nằm ngang (1024 px) mỗi thẻ chỉ còn 215 px cho ảnh, giá, ba dòng thông số và khối Điểm nổi bật. Ba cột trong khoảng 960–1199 px cho mỗi thẻ ~300 px. .bh-g.bh-g4 có hai lớp nên thắng .bh-g4 một lớp bất kể thứ tự nạp. */ @media (min-width:960px) and (max-width:1199px){ .bh-g.bh-g4{grid-template-columns:repeat(3,1fr)} } /* Khóa sàn chiều cao của khối Điểm nổi bật chỉ có nghĩa khi các thẻ đứng cạnh nhau và phải thẳng hàng. Một cột thì không có gì để so hàng, mà 126 px trống mỗi thẻ nhân với mười thẻ là hơn một nghìn pixel cuộn thừa. */ @media (max-width:639px){ .bh-js .bh-g .bh-card .bh-caveat{min-height:0} } /* ========================================================================== TRANG CHI TIẾT — thư viện ảnh, breadcrumb, thanh dính trên điện thoại Bổ sung bản 3.27.0, ngày 12/08/2026. ========================================================================== */ /* Đường dẫn chặng */ .bh .bh-breadcrumb{margin:0 0 10px} .bh .bh-breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px; font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--bh-muted,#5b6472)} .bh .bh-breadcrumb li+li::before{content:"›";margin-right:6px;opacity:.6} .bh .bh-breadcrumb a{color:inherit;text-decoration:none;border-bottom:1px solid transparent} .bh .bh-breadcrumb a:hover{border-bottom-color:currentColor} /* Đơn giá mỗi m² đứng ngay dưới giá bán */ .bh .bh-don-gia{margin:2px 0 10px} /* Ảnh nhỏ đang chọn */ .bh .bh-ct-thumbs img{transition:opacity .15s ease,outline-color .15s ease;outline:2px solid transparent;outline-offset:2px} .bh .bh-ct-thumbs img:hover{opacity:.85} .bh .bh-ct-thumbs img.bh-thumb--chon{outline-color:var(--bh-gold,#C9A227);opacity:1} /* Lớp phủ xem ảnh cỡ đầy đủ */ html.bh-khoa-cuon{overflow:hidden} .bh-phu{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center; background:rgba(8,14,26,.94);padding:24px} .bh-phu.bh-phu--mo{display:flex} .bh-phu__anh{max-width:min(1600px,94vw);max-height:88vh;width:auto;height:auto;object-fit:contain; background:#0b1220;border:1px solid rgba(255,255,255,.14)} .bh-phu button{position:absolute;background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.22); width:48px;height:48px;font-size:26px;line-height:1;cursor:pointer;border-radius:999px} .bh-phu button:hover{background:rgba(255,255,255,.2)} .bh-phu button:focus-visible{outline:2px solid #fff;outline-offset:2px} .bh-phu__dong{top:18px;right:18px} .bh-phu__truoc{left:18px;top:50%;transform:translateY(-50%)} .bh-phu__sau{right:18px;top:50%;transform:translateY(-50%)} .bh-phu__dem{position:absolute;bottom:16px;left:0;right:0;text-align:center;color:rgba(255,255,255,.72); font-size:13px;margin:0} /* -------------------------------------------------------------------------- KHỔ HẸP. Đo ngày 12/08/2026: giá nằm ở y=2846 px, tức 3,6 màn hình cuộn, vì cột phải rơi xuống dưới và 6–9 ảnh xếp chồng dọc. Người đi thuê mở tin trên điện thoại phải vuốt qua chín tấm ảnh mới biết bao nhiêu tiền một tháng. Hai cách chữa: ảnh thành băng cuốn ngang một tấm mỗi khung, và một thanh dính đáy luôn hiện giá kèm nút gọi. -------------------------------------------------------------------------- */ @media (max-width:849px){ .bh .bh-ct-thumbs{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:6px} .bh .bh-ct-thumbs > *{flex:0 0 42%;scroll-snap-align:start} .bh .bh-ct-thumbs img{width:100%;height:auto;display:block} .bh-thanh-dinh{position:fixed;left:0;right:0;bottom:0;z-index:9990; display:flex;align-items:center;gap:10px;padding:10px 14px; background:var(--bh-navy-900,#0B1220);color:#fff; box-shadow:0 -8px 24px rgba(0,0,0,.28)} .bh-thanh-dinh__gia{font-size:17px;font-weight:600;flex:1 1 auto;line-height:1.15} .bh-thanh-dinh__gia small{display:block;font-size:11px;font-weight:400;opacity:.72;letter-spacing:.04em} .bh-thanh-dinh a{flex:0 0 auto;padding:10px 14px;border-radius:6px;text-decoration:none;font-size:14px} .bh-thanh-dinh .bh-td__goi{background:var(--bh-gold,#C9A227);color:#0B1220;font-weight:600} .bh-thanh-dinh .bh-td__zalo{border:1px solid rgba(255,255,255,.4);color:#fff} /* Chừa chỗ cho thanh dính, không để nó che dòng cuối chân trang. */ body.bh-co-thanh-dinh{padding-bottom:68px} } @media (min-width:850px){ .bh-thanh-dinh{display:none} } /* ========================================================================== LƯỚI BẢN VẼ MẶT BẰNG — trang tổ hợp (giao dịch × tòa × số phòng ngủ) Một tổ hợp gộp nhiều loại căn, mỗi loại một bản vẽ riêng. Xếp lưới hai cột để so được cạnh nhau; nhãn dưới mỗi hình nói rõ đó là loại căn nào, bao nhiêu m² — không có nhãn thì bốn bản vẽ giống nhau về hình khối là bốn dấu hỏi. ========================================================================== */ .bh .bh-mb-luoi{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 18px} .bh .bh-mb-o{margin:0} .bh .bh-mb-o img{ display:block;width:100%;height:auto; border:1px solid var(--bh-rule-2,#e5e7eb);background:#fff; } .bh .bh-mb-o figcaption{ margin-top:8px;font-size:13px;letter-spacing:.02em; color:var(--bh-ink-2,#5b6579); } @media (max-width:700px){ .bh .bh-mb-luoi{grid-template-columns:1fr;gap:18px} } /* ========================================================================== TRANG ĐẠI LÝ VÀ TRANG MÔI GIỚI — 3.35.0 Dùng lại .bh-sec/.bh-wrap/.bh-head/.bh-btn của trang chi tiết, chỉ thêm những gì hai trang này có mà nơi khác không có: khối chân dung và lưới người. ========================================================================== */ .bh .bh-nguoi-dau{display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap} .bh .bh-nguoi-dau-chu{flex:1 1 340px;min-width:0} .bh .bh-nguoi-anh{display:block;width:96px;height:96px;border-radius:50%;overflow:hidden; background:#f2efe9;flex:0 0 auto;position:relative} .bh .bh-nguoi-anh img{width:100%;height:100%;object-fit:cover;display:block} .bh .bh-nguoi-anh--to{width:168px;height:168px} .bh .bh-nguoi-chu{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-family:"Playfair Display",Georgia,serif;font-size:2.4rem;color:#9a8f7d} .bh .bh-nguoi-anh--to .bh-nguoi-chu{font-size:4rem} .bh .bh-nguoi-vai{margin:.2rem 0 .6rem;color:#6b6355;font-size:.95rem} .bh .bh-nguoi-gt{margin:.2rem 0 .5rem;color:#4a4438;font-size:.92rem} .bh .bh-nguoi-so{margin:.2rem 0 0;color:#8a8172;font-size:.86rem} .bh .bh-nguoi-cc{margin:.8rem 0;font-size:.92rem;color:#4a4438} .bh .bh-nguoi-canh{color:#b32d2e;font-weight:500} .bh .bh-nguoi-nut{display:flex;gap:12px;flex-wrap:wrap;margin:1rem 0 0} .bh .bh-nguoi-ds{list-style:none;margin:1.2rem 0 0;padding:0;display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px 22px} .bh .bh-nguoi-ds li{display:flex;flex-direction:column;gap:2px;border-top:1px solid #e6e1d8;padding-top:8px} .bh .bh-nguoi-ds span{font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:#8a8172} .bh .bh-nguoi-ds b{font-weight:500;color:#2e2a22} .bh .bh-nguoi-luoi{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 20px;margin-top:1.2rem} .bh .bh-nguoi-the{display:flex;gap:14px;align-items:flex-start; border:1px solid #e6e1d8;border-radius:10px;padding:16px;background:#fff} .bh .bh-nguoi-the--dl{display:block} .bh .bh-nguoi-the h3{margin:0;font-size:1.02rem;line-height:1.3} .bh .bh-nguoi-the h3 a{color:inherit;text-decoration:none} .bh .bh-nguoi-the h3 a:hover{text-decoration:underline} .bh .bh-nguoi-than{min-width:0} @media (max-width:900px){ .bh .bh-nguoi-luoi{grid-template-columns:repeat(2,1fr)} } @media (max-width:640px){ .bh .bh-nguoi-luoi{grid-template-columns:1fr} .bh .bh-nguoi-anh--to{width:112px;height:112px} .bh .bh-nguoi-anh--to .bh-nguoi-chu{font-size:2.6rem} } /* ========================================================================== BẢNG KÝ HIỆU CĂN THEO TÒA — [behome_bang_can] Tám cột không vừa màn hình điện thoại. Cho cuộn ngang trong khung riêng thay vì thu nhỏ chữ: bảng số liệu mà chữ 10px thì đọc được cũng như không. ========================================================================== */ .bh .bh-bang-cuon{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.2rem 0} .bh table.bh-bang-can{width:100%;border-collapse:collapse;font-size:.92rem;min-width:720px} .bh table.bh-bang-can caption{text-align:left;padding-bottom:.6rem} .bh table.bh-bang-can th, .bh table.bh-bang-can td{padding:9px 12px;border-bottom:1px solid #e6e1d8;text-align:right;white-space:nowrap} .bh table.bh-bang-can thead th{ text-align:right;font-size:.74rem;letter-spacing:.05em;text-transform:uppercase; color:#8a8172;font-weight:500;border-bottom:1px solid #cfc7b8} .bh table.bh-bang-can thead th:first-child, .bh table.bh-bang-can tbody th, .bh table.bh-bang-can td:nth-child(2), .bh table.bh-bang-can td:nth-child(6), .bh table.bh-bang-can td:nth-child(7), .bh table.bh-bang-can td:nth-child(8){text-align:left} .bh table.bh-bang-can tbody th{font-weight:600;color:#2e2a22} .bh table.bh-bang-can tbody tr:hover{background:#faf8f4} .bh .bh-goc{font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;color:#8a6d1f; background:#f6efd9;border-radius:3px;padding:1px 5px;margin-left:4px;font-weight:500} .bh .bh-suy{font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;color:#8a5a00; background:#f7f0e2;border-radius:3px;padding:1px 5px;margin-left:4px;cursor:help} .bh table.bh-bang-can .bh-ghi{display:block;font-size:.76rem;font-weight:400;color:#8a5a00; white-space:normal;max-width:26ch;margin-top:2px;line-height:1.35} /* Bảng giá — [behome_bang_gia]. Dùng chung khung cuộn với bảng ký hiệu căn. */ .bh table.bh-bang-gia{width:100%;border-collapse:collapse;font-size:.92rem;min-width:760px} .bh table.bh-bang-gia caption{text-align:left;padding-bottom:.6rem} .bh table.bh-bang-gia th, .bh table.bh-bang-gia td{padding:9px 12px;border-bottom:1px solid #e6e1d8;text-align:right;white-space:nowrap} .bh table.bh-bang-gia thead th{text-align:right;font-size:.74rem;letter-spacing:.05em;text-transform:uppercase; color:#8a8172;font-weight:500;border-bottom:1px solid #cfc7b8;white-space:normal} .bh table.bh-bang-gia thead th:first-child, .bh table.bh-bang-gia tbody th{text-align:left} .bh table.bh-bang-gia tbody th{font-weight:600;color:#2e2a22} .bh table.bh-bang-gia tbody tr:hover{background:#faf8f4} .bh table.bh-bang-gia .bh-trong{text-align:center;color:#8a8172;font-style:italic;white-space:normal} /* ── Dải phân trang lưới quỹ căn — bổ sung 14/08/2026 ───────────────────── Vùng chạm tối thiểu 44 px mỗi chiều: đây là dải nút chính trên điện thoại, nút nhỏ hơn ngón tay thì khách bấm trượt sang số bên cạnh. */ .bh-trang{margin:28px 0 8px;text-align:center} .bh-trang__tom{display:block;font-size:13px;color:#6b6355;margin-bottom:10px} .bh-trang__ds{display:flex;flex-wrap:wrap;gap:6px;justify-content:center; list-style:none;margin:0;padding:0} .bh-trang__ds li{margin:0} .bh-trang__nut{display:inline-flex;align-items:center;justify-content:center; min-width:44px;height:44px;padding:0 12px;border:1px solid #ddd8cd; border-radius:4px;background:#fff;color:#4a4438;font-size:14px; text-decoration:none;transition:border-color .15s,background .15s} .bh-trang__nut:hover{border-color:#b9a06a;background:#faf8f4} .bh-trang__nut--nay{background:#4a4438;border-color:#4a4438;color:#fff; font-weight:600;cursor:default} .bh-trang__luoc{display:inline-flex;align-items:center;height:44px;padding:0 4px; color:#a9a294} @media(max-width:560px){ .bh-trang__nut{min-width:44px;padding:0 8px;font-size:13px} } /* Dòng xác nhận trên trang Liên hệ — khách bấm "Đặt lịch xem căn" từ một tin thì phải thấy ngay mình đang hỏi căn nào, không phải tự nhớ. */ .bh-dang-hoi { margin: 0 0 18px; padding: 12px 16px; border-left: 3px solid #b48a3f; background: #faf6ee; border-radius: 0 6px 6px 0; font-size: 15px; line-height: 1.6; } .bh-dang-hoi b { font-weight: 600; letter-spacing: .02em; } .bh-dang-hoi a { text-decoration: underline; } /* Kênh chính thức ở chân trang và trang Liên hệ. Bổ sung 17/08/2026 — trước đó bốn kênh của sàn không được nhắc ở bất kỳ đâu trên website. */ .bh-foot-mxh, .bh-foot-wa { margin: 10px 0 0; font-size: 14px; line-height: 1.7; } .bh-foot-mxh b, .bh-foot-wa b { display: block; font-weight: 600; opacity: .72; font-size: 13px; letter-spacing: .02em; } .bh-foot-mxh a, .bh-foot-wa a { text-decoration: none; } .bh-foot-mxh a:hover, .bh-foot-wa a:hover { text-decoration: underline; } /* Thanh điều hướng cho nhánh ngôn ngữ khác tiếng Việt. Polylang loại mọi mục menu trỏ sang trang /en/, nên khách tiếng Anh cần một đường đi luôn có mặt ngay đầu trang. Xem BHS_Render::thanh_dieu_huong_ngu(). */ .bh-nav-ngu{margin:0 0 22px} .bh-nav-ngu .bh-chips{margin:0} /* ========================================================================== NÚT ĐỔI NGÔN NGỮ VÀ NÚT LIÊN HỆ NHANH — thêm 27/08/2026 Nút đổi ngữ: behome-ngu.js chuyển nó vào ô trống bên phải đầu trang của Flatsome. Không có ô đó thì rơi về .bh-doi-ngu--noi, dính góc trên bên phải. Nút liên hệ: dính góc dưới bên phải, mọi trang. Ở khổ hẹp co lại còn biểu tượng, và nhường chỗ cho thanh dính giá của trang chi tiết căn (thanh đó cao 68 px, xem mục KHỔ HẸP ở trên). ========================================================================== */ /* Một nút thả xuống, không phải một hàng chip — xem chú thích dài trong BHS_Thanh_Noi::in_doi_ngu(). Tóm tắt: năm chip rộng 195px làm menu chín mục ở đầu trang vỡ xuống hai dòng. Nút này rộng chừng 70px và không rộng thêm khi có ngôn ngữ thứ sáu. */ .bh-doi-ngu{position:relative;display:inline-block;line-height:1} .bh-doi-ngu__hien{display:inline-flex;align-items:center;gap:6px;cursor:pointer; padding:6px 9px;border:1px solid rgba(11,18,32,.20);border-radius:999px; font-size:12px;font-weight:700;letter-spacing:.06em;color:inherit; background:transparent;transition:border-color .15s,background .15s; list-style:none;-webkit-tap-highlight-color:transparent} /* Bỏ hình tam giác mặc định của