/* ==========================================================================
Hanoi Real Estate — theme hre
Dung lai CSS tu mockup da duyet. Bang mau A da chot.
========================================================================== */
/* ---------- 1. Bang mau A — Navy & Amber (da chot) ---------- */
:root{
--brand:#0A2342;
--brand-soft:#16376A;
--brand-deep:#061630;
/* --brand-ink: màu navy dùng làm CHỮ. Chế độ tối --brand thành nền tối nên chữ phải sáng lại
(Web2026.3: nút "Xem thêm" chìm hẳn khi điện thoại bật chế độ tối). */
--brand-ink:#0A2342;
/* --accent: chỉ dùng làm NỀN (nút, tag, gạch chân) — chữ trên nó là --on-accent, 7.8:1
--accent-strong: dùng làm CHỮ trên nền sáng — 4.5:1, đạt WCAG 2.1 AA */
--accent:#FF8C00;
--accent-strong:#A35107;
--on-accent:#1E1304;
--price:#A35107;
--bg:#F5F7FA;
--surface:#FFFFFF;
--surface-2:#EAEFF6;
--text:#151A22;
--muted:#5A6577;
--line:#DCE3EC;
--shadow:14 35 66;
}
/* ---------- 2. THEME toi (theo he thong) ---------- */
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
--bg:#0B1018; --surface:#141C28; --surface-2:#1B2533;
--text:#E9EDF4; --muted:#95A2B5; --line:#26313F;
--brand:#101A2C; --brand-soft:#1E3152; --brand-deep:#080E18; --brand-ink:#E9EDF4;
--accent:#FFA333; --accent-strong:#FFB85C; --price:#FFB85C;
--shadow:0 0 0;
}
}
/* ---------- 3. THEME toi (nguoi dung chon) ---------- */
:root[data-theme="dark"]{
--bg:#0B1018; --surface:#141C28; --surface-2:#1B2533;
--text:#E9EDF4; --muted:#95A2B5; --line:#26313F;
--brand:#101A2C; --brand-soft:#1E3152; --brand-deep:#080E18; --brand-ink:#E9EDF4;
--accent:#FFA333; --accent-strong:#FFB85C; --price:#FFB85C;
--shadow:0 0 0;
}
/* ---------- 4. Nen tang ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
margin:0; background:var(--bg); color:var(--text);
font-family:"Be Vietnam Pro",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
font-size:16px; line-height:1.65;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
input,select,textarea{font:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}
.wrap{width:min(1200px,100%); margin-inline:auto; padding-inline:20px}
/* 24/09: pretty chứ KHÔNG balance — balance chia đều các dòng nên tiêu đề thẻ tin, H1… xuống
dòng sớm, bên phải trống cả khúc (anh Đức báo). pretty chỉ tránh một chữ trơ trọi dòng cuối. */
h1,h2,h3{text-wrap:pretty; margin:0; font-weight:600}
.eyebrow{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
font-weight:700; color:var(--accent-strong)}
/* 24/09: bỏ giới hạn 62ch — đoạn mở đầu chạy hết bề ngang khung như khách yêu cầu (Web2026.2). */
.lede{color:var(--muted)}
.serif{font-family:Lora,Georgia,"Times New Roman",serif}
/* ---------- 5. Header ---------- */
.topbar{background:var(--brand-deep); color:#fff; font-size:.82rem}
.topbar .wrap{display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; padding-block:7px}
.topbar a{opacity:.86}
.topbar a:hover{opacity:1}
.topbar .sep{flex:1}
.topbar .lang{display:flex; gap:6px; align-items:center}
.topbar .lang b{font-size:.7rem; padding:2px 7px; border-radius:4px; font-weight:700}
.topbar .lang b[aria-current]{background:rgb(255 255 255/.18)}
.site-header{position:sticky; top:0; z-index:40; background:var(--brand); color:#fff}
.site-header .wrap{display:flex; align-items:center; gap:18px; padding-block:12px}
.logo{display:flex; align-items:center; gap:11px}
.logo-mark{width:40px; height:40px; flex:none; border-radius:8px;
object-fit:contain; background:#fff; padding:3px;
/* Logo lấy từ bộ favicon "HR" của website hiện tại. Nền trắng để
ký tự đỏ nổi trên thanh menu màu navy. */}
.logo b{display:block; font-size:1.05rem; line-height:1.15; font-weight:700}
.logo small{display:block; font-size:.62rem; letter-spacing:.22em; opacity:.72; text-transform:uppercase}
.mainnav{margin-left:auto; display:flex; gap:2px; align-items:center}
.mainnav > *{position:relative}
.mainnav a{font-weight:700; font-size:.86rem; padding:9px 11px; border-radius:7px;
display:inline-block; white-space:nowrap}
.mainnav > * > a:hover{background:rgb(255 255 255/.1)}
.mainnav a.is-active{background:rgb(255 255 255/.13)}
.mainnav a.is-active::after{content:""; position:absolute; left:11px; right:11px; bottom:3px;
height:2px; background:var(--accent); border-radius:2px}
.subnav{position:absolute; top:calc(100% + 6px); left:0; min-width:238px; padding:7px;
background:var(--surface); color:var(--text); border:1px solid var(--line); border-radius:12px;
box-shadow:0 18px 40px rgb(var(--shadow)/.2); display:none; z-index:5}
/* Khe hở 6px giữa menu cha và menu con là vùng chết: chuột đi qua đó thì
:hover mất, menu con tắt ngay trước khi chuột chạm tới.
Dải trong suốt này lấp đúng khe đó. Nó nằm trong .subnav nên chỉ tồn tại
khi menu đang mở, không cản trở gì lúc menu đóng. */
.subnav::before{content:""; position:absolute; left:0; right:0; top:-7px; height:7px}
.has-sub:hover .subnav,.has-sub:focus-within .subnav,.has-sub.open .subnav{display:block}
/* Mục gom "About Us": là nút chứ không phải liên kết, nhưng trông y hệt các mục khác. */
.navgroup{font:inherit; font-weight:700; font-size:.86rem; padding:9px 11px; border-radius:7px;
color:inherit; background:none; border:0; cursor:pointer; white-space:nowrap}
.navgroup:hover,.navgroup.is-active{background:rgb(255 255 255/.1)}
/* Mục cuối nằm sát mép phải: menu con mở sang trái để khỏi tràn khỏi màn hình. */
.mainnav > :last-child .subnav{left:auto; right:0}
.subnav a[aria-current]{background:var(--surface-2)}
.subnav a{display:block; font-weight:500; font-size:.87rem; padding:7px 10px; border-radius:7px; width:100%}
.subnav a:hover{background:var(--surface-2)}
.navtoggle{display:none; margin-left:auto; padding:9px 12px; border-radius:8px;
background:rgb(255 255 255/.14); font-weight:700; font-size:.85rem}
/* ---------- 6. Hero ---------- */
.hero{position:relative; color:#fff; isolation:isolate; overflow:hidden}
.hero-media{position:absolute; inset:0; z-index:-2}
.hero-media img{width:100%; height:100%; object-fit:cover}
.hero::before{content:""; position:absolute; inset:0; z-index:-1;
background:linear-gradient(100deg,rgb(3 8 18/.86) 0%,rgb(3 8 18/.66) 46%,rgb(3 8 18/.32) 100%),
linear-gradient(to top,var(--brand-deep),transparent 58%)}
.hero-inner{padding-block:72px 116px; max-width:none}
/* max-width 18ch cũ làm tiêu đề gãy đôi: cả hai bản tiêu đề đều dài 30 ký tự
("Find your perfect home in Hanoi" / "Tìm căn nhà phù hợp tại Hà Nội").
Nới lên 34ch để nằm gọn MỘT dòng trên màn hình rộng. Màn hình hẹp vẫn tự
xuống dòng bình thường vì lúc đó bề ngang màn hình mới là thứ giới hạn. */
.hero h2{font-size:clamp(2rem,1.2rem+3.3vw,3.3rem); line-height:1.12; max-width:34ch;
font-family:Lora,Georgia,serif; font-weight:600}
/* Web2026.1: banner một câu slogan, căn giữa. */
.hero-inner.is-center{text-align:center}
.hero-inner.is-center h2{margin-inline:auto}
.hero .kicker{font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700;
color:var(--accent); margin-bottom:14px}
.hero p{margin:14px 0 0; color:rgb(255 255 255/.85)}
.hero .badges{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}
.hero .badges span{font-size:.78rem; font-weight:600; padding:6px 13px; border-radius:999px;
background:rgb(255 255 255/.12); border:1px solid rgb(255 255 255/.24)}
/* ---------- 7. Khoi tim kiem ---------- */
.searchcard{background:var(--surface); border:1px solid var(--line); border-radius:16px;
box-shadow:0 22px 52px rgb(var(--shadow)/.18); padding:18px; margin-top:-70px;
position:relative; z-index:2}
.tabs{display:flex; gap:4px; margin-bottom:16px; background:var(--surface-2);
padding:4px; border-radius:10px; width:fit-content; max-width:100%; overflow-x:auto}
.tabs button{padding:8px 16px; border-radius:7px; font-size:.86rem; font-weight:700;
color:var(--muted); white-space:nowrap}
.tabs button[aria-selected="true"]{background:var(--brand); color:#fff}
.searchrow{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
/* Thuộc tính hidden của trình duyệt đặt display:none, nhưng quy tắc class
ở trên có độ ưu tiên cao hơn nên đè mất. Phải khai lại, không thì chọn
tab "Bán" hay "Theo toà nhà" mà biểu mẫu thuê vẫn nằm nguyên bên dưới. */
.searchrow[hidden]{display:none}
.field{display:flex; flex-direction:column; gap:5px; min-width:0}
.field label{font-size:.69rem; letter-spacing:.1em; text-transform:uppercase;
font-weight:700; color:var(--muted)}
.field select,.field input{width:100%; padding:11px 12px; border-radius:9px;
border:1px solid var(--line); background:var(--surface); color:var(--text); font-size:.92rem}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
padding:12px 20px; border-radius:9px; font-weight:700; font-size:.9rem; white-space:nowrap;
transition:background .15s ease,color .15s ease,border-color .15s ease}
.btn-accent{background:var(--accent); color:var(--on-accent)}
.btn-accent:hover{background:var(--accent-strong); color:#fff}
.btn-brand{background:var(--brand); color:#fff}
.btn-brand:hover{background:var(--brand-soft)}
.btn-ghost{border:1px solid var(--line); color:var(--text); background:var(--surface)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-search{align-self:end}
/* Icon trong nút phải có cỡ cố định: SVG không khai width/height sẽ giãn theo
khung, trên điện thoại kính lúp trong nút Search to gần bằng cả nút. */
.btn svg{width:18px; height:18px; flex:none}
.adv-toggle{margin-top:14px; display:inline-flex; align-items:center; gap:8px; font-size:.86rem;
font-weight:700; color:var(--accent-strong)}
.adv-toggle .chev{transition:transform .2s ease; display:inline-block}
.adv-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
.adv-panel{margin-top:14px; padding-top:16px; border-top:1px dashed var(--line);
display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.adv-panel[hidden]{display:none}
.chips{display:flex; flex-wrap:wrap; gap:7px; grid-column:1/-1}
.chips > .chips-label{width:100%; font-size:.69rem; letter-spacing:.1em; text-transform:uppercase;
font-weight:700; color:var(--muted)}
.chip{font-size:.8rem; padding:6px 13px; border-radius:999px; border:1px solid var(--line);
background:var(--surface); color:var(--muted); font-weight:600}
.chip:hover{border-color:var(--accent); color:var(--text)}
.chip[aria-pressed="true"]{background:var(--brand); border-color:var(--brand); color:#fff}
/* Nhãn "đang lọc gì" ở trang kết quả: chỉ để đọc, không bấm được. */
.chip-static{cursor:default; background:var(--surface-2); color:var(--text)}
/* Nút xóa bộ lọc thì ngược lại — là một hành động, cho nổi lên. */
.chip-clear{background:var(--brand); border-color:var(--brand); color:#fff; font-weight:700}
.chip-clear:hover{background:var(--brand-soft); border-color:var(--brand-soft); color:#fff}
/* Lời nhắn thay cho biểu mẫu ở tab "Bán" — chưa có tin bán nào trong dữ liệu. */
.tab-soon{padding:22px 4px 6px}
.tab-soon[hidden]{display:none}
.tab-soon b{display:block; font-size:1.05rem; margin-bottom:6px}
.tab-soon p{margin:0 0 16px; color:var(--muted); font-size:.92rem; line-height:1.6}
/* Tab "Theo toà nhà": ô tìm tên toà, gửi thẳng vào trang danh mục toà nhà. */
.tab-bld{display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; padding-top:4px}
.tab-bld[hidden]{display:none}
.tab-bld .field{flex:1 1 280px; min-width:0}
.tab-bld .link-more{margin-left:auto; font-size:.86rem; padding-bottom:12px}
/* ---------- 8. Section chung ---------- */
.section{padding-block:clamp(42px,5vw,70px)}
.section.tight{padding-block:clamp(28px,3.4vw,44px)}
/* Trang chủ: H1 + giới thiệu sát khối "Latest apartments" (Web2026.1) — trước đây
lề dưới 44px cộng lề trên 70px của khối sau thành khoảng trống ~115px. */
.section.home-intro{padding-bottom:0}
/* 30/09/2026: khách thấy giới thiệu -> danh sách vẫn thưa, thu tiếp (trang chủ 40->20px,
trang danh mục / kết quả tìm kiếm 44->18px). */
.home-intro + .section{padding-top:clamp(14px,1.6vw,20px)}
.section.list-top{padding-top:clamp(12px,1.4vw,18px)}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
flex-wrap:wrap; margin-bottom:26px}
.section-head h2{font-size:clamp(1.45rem,1.1rem+1.5vw,2.05rem); line-height:1.22;
font-family:Lora,Georgia,serif}
/* Điện thoại: tiêu đề mục 24px quá to so với bề ngang ~370px — "Popular apartment /
buildings in Hanoi" gãy làm hai dòng hụt, bên phải trống nửa dòng (khách báo 22/09).
Nhỏ lại + text-wrap:pretty (tránh để một chữ trơ trọi ở dòng cuối). */
.section-head h2,.section h2{text-wrap:pretty}
@media (max-width:480px){ .section-head h2{font-size:1.3rem} }
/* H1 trên điện thoại: 32px làm "Apartments," đứng một mình một dòng ở trang chủ.
!important vì H1 trang chủ có font-size viết thẳng trong thẻ (style=). pretty chứ
KHÔNG balance: balance ép các dòng ngắn đều nhau -> bên phải lại trống. */
main h1{text-wrap:pretty}
@media (max-width:480px){ main h1{font-size:1.6rem !important; line-height:1.25} }
.section-head .lede{margin:9px 0 0}
.link-more{font-weight:700; font-size:.88rem; color:var(--accent-strong)}
.link-more:hover{text-decoration:underline}
.band{background:var(--surface-2)}
/* ---------- 9. Quy trinh 5 buoc ---------- */
.steps{display:grid; grid-template-columns:repeat(5,1fr); gap:12px; counter-reset:step}
.step{text-align:center}
.step-top{font-size:.71rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
color:var(--muted)}
.step-dot{width:76px; height:76px; margin:14px auto 12px; border-radius:50%; display:grid;
place-items:center; background:var(--brand); color:#fff; position:relative}
.step-dot svg{width:32px; height:32px}
.step-dot::after{counter-increment:step; content:counter(step); position:absolute;
right:-3px; bottom:-3px; width:25px; height:25px; border-radius:50%;
background:var(--accent); color:var(--on-accent); font-size:.72rem; font-weight:800;
display:grid; place-items:center}
.step p{margin:0; font-size:.87rem; color:var(--muted)}
/* ---------- 10. The san pham ---------- */
.pgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.pcard{
--card-bg:var(--surface); --card-text:var(--text); --card-muted:var(--muted);
--card-line:var(--line); --card-price:var(--price); --card-chip:var(--surface-2);
background:var(--card-bg); color:var(--card-text);
border:1px solid var(--card-line); border-radius:13px; overflow:hidden;
display:flex; flex-direction:column;
transition:background .22s ease,color .22s ease,border-color .22s ease,
transform .22s ease,box-shadow .22s ease;
}
.pcard:hover,.pcard:focus-within{
--card-bg:var(--brand); --card-text:#fff; --card-muted:rgb(255 255 255/.76);
--card-line:var(--brand); --card-price:var(--accent); --card-chip:rgb(255 255 255/.13);
transform:translateY(-4px); box-shadow:0 18px 36px rgb(var(--shadow)/.24);
}
.pcard-media{position:relative; aspect-ratio:760/494; overflow:hidden; background:var(--surface-2)}
.pcard-media img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.pcard:hover .pcard-media img{transform:scale(1.05)}
.tag{position:absolute; top:12px; left:12px; font-size:.71rem; font-weight:700; letter-spacing:.04em;
padding:5px 10px; border-radius:6px; background:var(--accent); color:var(--on-accent)}
.tag.leased{background:rgb(0 0 0/.74); color:#fff}
.tag.hot{background:#C8102E; color:#fff}
.fav{position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:50%;
background:rgb(255 255 255/.93); color:#C8102E; display:grid; place-items:center; font-size:1rem}
.fav[aria-pressed="true"]{background:#C8102E; color:#fff}
.pcard-body{padding:10px 16px 14px; display:flex; flex-direction:column; gap:7px; flex:1}
.price-row{display:flex; align-items:baseline; justify-content:space-between; gap:12px;
padding-bottom:7px; border-bottom:1px dashed var(--card-line)}
/* Bỏ lề mặc định 1em của — trước đây nó tạo khoảng trống ~21px giữa ảnh và giá. */
.price-row .price,.price-row .pid{margin:0}
.price{font-size:1.32rem; font-weight:800; color:var(--card-price);
font-variant-numeric:tabular-nums; letter-spacing:-.015em; line-height:1.1}
.price span{font-size:.8rem; font-weight:600}
.pid{font-size:.88rem; font-weight:800; color:var(--card-price); font-variant-numeric:tabular-nums}
.pid em{font-style:normal; font-weight:600; color:var(--card-muted)}
/* Tiêu đề và mô tả tối đa 2 dòng (Web2026.1) — thẻ trong một hàng cao bằng nhau. */
.pcard h3{font-size:1rem; font-weight:600; line-height:1.4;
display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden}
.pcard h3 a:hover{text-decoration:underline}
.excerpt{margin:0; font-size:.87rem; color:var(--card-muted); line-height:1.55;
display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden}
.specs{display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:2px}
.spec{display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:600;
padding:5px 10px; border-radius:7px; background:var(--card-chip); color:var(--card-text)}
.spec svg{width:16px; height:16px; flex:none; opacity:.85}
.pcard-foot{display:flex; align-items:center; gap:10px; padding:10px 16px;
border-top:1px solid var(--card-line)}
.agent-mini{display:flex; align-items:center; gap:8px; font-size:.8rem;
color:var(--card-muted); margin-right:auto; min-width:0}
.agent-mini b{color:var(--card-text); font-weight:600}
.avatar{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; flex:none;
background:var(--brand-soft); color:#fff; font-size:.7rem; font-weight:700}
.pcard:hover .avatar{background:rgb(255 255 255/.2)}
/* Add to cart nằm chỗ khối Agent cũ, đẩy nút So sánh sang phải. */
.btn-cart{margin-right:auto; font-size:.8rem; font-weight:700; padding:6px 12px; border-radius:6px;
background:var(--brand); color:#fff; border:1px solid var(--brand); white-space:nowrap}
.pcard:hover .btn-cart{background:#fff; color:var(--brand); border-color:#fff}
.btn-cart[aria-pressed="true"],.pcard:hover .btn-cart[aria-pressed="true"]{background:var(--accent);
border-color:var(--accent); color:var(--on-accent)}
.btn-compare{font-size:.74rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
padding:6px 12px; border-radius:6px; border:1px solid var(--card-line); color:var(--card-text)}
.btn-compare:hover,.btn-compare[aria-pressed="true"]{background:var(--accent);
border-color:var(--accent); color:var(--on-accent)}
/* ---------- 11. Toolbar loc / sap xep ---------- */
.toolbar{display:flex; flex-wrap:wrap; align-items:center; gap:10px; background:var(--surface);
border:1px solid var(--line); border-radius:11px; padding:10px 12px}
.toolbar .tb{display:flex; align-items:center; gap:7px; font-size:.85rem; color:var(--muted)}
.toolbar select{padding:8px 10px; border-radius:8px; border:1px solid var(--line);
background:var(--surface); color:var(--text); font-size:.85rem; font-weight:600}
.toolbar .count{margin-left:auto; font-size:.85rem; color:var(--muted); font-variant-numeric:tabular-nums}
.toolbar .count b{color:var(--text)}
.viewtoggle{display:flex; gap:4px; background:var(--surface-2); border-radius:8px; padding:3px}
.viewtoggle button{padding:6px 12px; border-radius:6px; font-size:.79rem; font-weight:700; color:var(--muted)}
.viewtoggle button[aria-pressed="true"]{background:var(--surface); color:var(--text);
box-shadow:0 1px 3px rgb(var(--shadow)/.22)}
.pgrid.list{grid-template-columns:1fr; gap:14px}
.pgrid.list .pcard{flex-direction:row}
.pgrid.list .pcard-media{width:300px; flex:none; aspect-ratio:auto}
.pgrid.list .pcard-body{padding:16px 18px}
.pgrid.list .pcard-foot{border-top:0; border-left:1px solid var(--card-line);
flex-direction:column; align-items:stretch; justify-content:center; width:190px; flex:none}
.pgrid.list .btn-cart{margin:0 0 10px}
/* ---------- 12. The toa nha (diem khac biet cua site) ---------- */
.bgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.bcard{position:relative; border-radius:13px; overflow:hidden; aspect-ratio:3/4;
display:flex; align-items:flex-end; color:#fff; isolation:isolate}
.bcard img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
transition:transform .5s ease}
.bcard::before{content:""; position:absolute; inset:0; z-index:-1;
background:linear-gradient(to top,rgb(4 9 18/.92) 8%,rgb(4 9 18/.35) 52%,rgb(4 9 18/.1) 100%)}
.bcard:hover img{transform:scale(1.06)}
.bcard .bbody{padding:16px 17px; width:100%}
.bcard h3{font-size:1.02rem; line-height:1.35; font-family:Lora,Georgia,serif}
.bcard .bmeta{font-size:.79rem; color:rgb(255 255 255/.74); margin-top:5px;
display:flex; gap:10px; flex-wrap:wrap}
.bcard .bcount{position:absolute; top:12px; right:12px; font-size:.73rem; font-weight:700;
padding:5px 10px; border-radius:999px; background:var(--accent); color:var(--on-accent); z-index:1}
/* ---------- 13. Agents ---------- */
.agrid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.acard{background:var(--surface); border:1px solid var(--line); border-radius:13px;
overflow:hidden; text-align:center; padding-bottom:18px}
.acard .photo{aspect-ratio:1; background:var(--surface-2); display:grid; place-items:center; overflow:hidden}
.acard .photo img{width:100%; height:100%; object-fit:cover}
.acard .initials{font-size:2.3rem; font-weight:600; color:var(--brand-soft); font-family:Lora,serif}
.acard h3{margin-top:15px; font-size:1.02rem; font-weight:700}
.acard .role{font-size:.76rem; color:var(--muted); letter-spacing:.09em;
text-transform:uppercase; font-weight:700; margin-top:2px}
.acard .contact{margin-top:12px; display:flex; justify-content:center; gap:8px}
.icon-btn{width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
background:var(--surface-2); color:var(--text); font-size:.72rem; font-weight:800}
.icon-btn:hover{background:var(--brand); color:#fff}
.acard.empty{display:grid; place-items:center; gap:8px; border-style:dashed; color:var(--muted);
padding:30px 18px; font-size:.87rem; text-align:center}
/* ---------- 14. Testimonials ---------- */
.qgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.quote{background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:22px}
.quote .stars{color:var(--accent); letter-spacing:.16em; font-size:.95rem}
.quote p{font-size:.93rem; line-height:1.7; margin:10px 0 0}
.quote footer{display:flex; align-items:center; gap:11px; margin-top:16px; padding-top:14px;
border-top:1px solid var(--line)}
.quote footer b{display:block; font-size:.92rem}
.quote footer span{font-size:.79rem; color:var(--muted)}
.sample-flag{display:inline-flex; align-items:center; font-size:.67rem; font-weight:700;
letter-spacing:.09em; text-transform:uppercase; padding:3px 9px; border-radius:5px;
background:var(--surface-2); color:var(--muted); border:1px dashed var(--line)}
/* ---------- 15. Khoi gioi thieu ---------- */
/* Đã bỏ .intro / .intro-art của khối "About us" cũ trên trang chủ: khối đó
không còn, mà nội dung bài viết nhập từ site cũ có
— dính
quy tắc lưới 2 cột này nên chữ in đậm bị tách sang cột phải. */
.statrow{display:flex; flex-wrap:wrap; gap:26px; margin-top:22px}
.statrow div b{display:block; font-size:1.7rem; font-weight:800; color:var(--accent-strong);
font-family:Lora,serif; line-height:1.1}
.statrow div span{font-size:.79rem; letter-spacing:.08em; text-transform:uppercase;
color:var(--muted); font-weight:600}
/* ---------- 16. Footer ---------- */
.site-footer{background:var(--brand-deep); color:rgb(255 255 255/.8)}
.footer-grid{display:grid; grid-template-columns:1.35fr .8fr 1fr; gap:36px; padding-block:46px}
.site-footer h3{font-size:.76rem; letter-spacing:.15em; text-transform:uppercase; color:#fff;
font-weight:700; margin-bottom:16px}
.artlist{display:flex; flex-direction:column; gap:14px}
.artlist a{display:flex; gap:12px; align-items:flex-start}
.artlist img{width:74px; height:52px; object-fit:cover; border-radius:6px; flex:none}
.artlist b{display:block; font-size:.87rem; font-weight:600; color:#fff; line-height:1.42}
.artlist time{font-size:.74rem; opacity:.6}
.artlist a:hover b{color:var(--accent)}
.fmenu{display:flex; flex-direction:column; gap:9px; font-size:.89rem}
.fmenu a:hover{color:var(--accent)}
.fcontact{font-size:.89rem; display:flex; flex-direction:column; gap:11px}
.fcontact .row{display:flex; gap:10px; align-items:flex-start}
.fcontact .row i{width:16px; flex:none; opacity:.55; font-style:normal}
.fsocial{display:flex; gap:8px; margin-top:4px}
.fsocial a{width:34px; height:34px; border-radius:8px; display:grid; place-items:center;
background:rgb(255 255 255/.1); font-size:.7rem; font-weight:800}
.fsocial a:hover{background:var(--accent); color:var(--on-accent)}
.fbottom{border-top:1px solid rgb(255 255 255/.12); padding-block:16px; font-size:.81rem;
display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; opacity:.68}
/* ---------- 17. Breadcrumb / phan trang ---------- */
.crumb{font-size:.82rem; color:var(--muted); display:flex; gap:8px; flex-wrap:wrap; padding-block:16px}
.crumb a:hover{color:var(--accent-strong)}
.pager{display:flex; gap:6px; justify-content:center; flex-wrap:wrap;
/* Nới khoảng cách trên dưới để khối phân trang không dính vào lưới
bên trên và phần nội dung bên dưới. */
margin-block:32px 40px}
.pager a{min-width:38px; height:38px; display:grid; place-items:center; border-radius:8px;
border:1px solid var(--line); font-size:.87rem; font-weight:600; padding-inline:11px;
background:var(--surface)}
.pager a[aria-current]{background:var(--brand); color:#fff; border-color:var(--brand)}
.pager a:hover:not([aria-current]){border-color:var(--accent)}
.sibling-links{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; padding-block:4px}
.sibling-links a{font-size:.87rem; font-weight:600; padding:9px 17px; border-radius:999px;
border:1px solid var(--line); background:var(--surface)}
.sibling-links a:hover{border-color:var(--accent); color:var(--accent-strong)}
.seo-text{background:var(--surface); border:1px solid var(--line); border-radius:13px;
padding:26px 28px; color:var(--muted); font-size:.92rem}
.seo-text h2{font-size:1.24rem; color:var(--text); margin-bottom:10px; font-family:Lora,Georgia,serif}
.seo-text h3{font-size:1rem; color:var(--text); margin:18px 0 6px}
.seo-text p{margin:0 0 10px}
/* Khối thu gọn + Read more. Lớp .is-clamped do app.js gắn khi chữ dài hơn khung. */
.clamp.is-clamped .clamp-body{max-height:9.5em; overflow:hidden;
-webkit-mask-image:linear-gradient(#000 60%,transparent); mask-image:linear-gradient(#000 60%,transparent)}
.clamp.is-open .clamp-body{max-height:none; -webkit-mask-image:none; mask-image:none}
.clamp-btn{display:block; margin:8px auto 0; padding:6px 14px; border:0; background:none;
font:inherit; font-weight:700; color:var(--brand-ink); cursor:pointer}
.clamp-btn::after{content:" ↓"}
.clamp.is-open .clamp-btn::after{content:" ↑"}
.bgrid.cols3{grid-template-columns:repeat(3,1fr)}
/* 3 cột thì ô rộng hơn: giữ tỉ lệ 3/4 là thẻ cao gần gấp rưỡi bề ngang. */
.bgrid.cols3 .bcard{aspect-ratio:4/3}
/* ---------- 18. Trang chi tiet ---------- */
.detail-top{display:flex; flex-wrap:wrap; align-items:flex-start; gap:20px; justify-content:space-between}
/* Bỏ max-width 26ch: tiêu đề bị bó ở 26 ký tự thì gãy làm ba bốn dòng
trong khi bên cạnh còn trống cả mảng.
flex:1 1 0 + min-width:0 — KHÔNG phải flex-basis:auto. Với basis auto,
tiêu đề dài chiếm hết một hàng và đẩy khối giá xuống dòng dưới.
basis 0 thì nó chỉ ăn phần CÒN LẠI sau khối giá — dài hết mức có thể
mà giá vẫn nằm bên cạnh. */
.detail-top h1{font-size:clamp(1.5rem,1.15rem+1.5vw,2.05rem); line-height:1.25;
flex:1 1 0; min-width:0;
font-family:Lora,Georgia,serif}
/* Web2026.1: dòng "Located in Building: " — thay khối có biểu tượng. */
.building-line{margin:10px 0 0; font-size:.95rem; color:var(--muted)}
.building-line a{font-weight:700; color:var(--accent-strong)}
.building-line a:hover{text-decoration:underline}
.building-link{display:inline-flex; align-items:center; gap:9px; margin-top:12px; font-size:.91rem;
font-weight:700; color:var(--accent-strong); padding:8px 14px; border-radius:9px;
background:var(--surface); border:1px solid var(--line)}
.building-link:hover{border-color:var(--accent)}
.building-link small{font-weight:600; color:var(--muted)}
.detail-price{text-align:right; flex:none}
/* ID đứng ngay trước giá, cùng một dòng. */
.detail-price{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
/* Property ID trước giá — nổi bật để lọt vào ảnh chụp màn hình khách gửi. */
.pid-top{display:inline-block; margin:0; padding:4px 11px; border-radius:7px; font-size:.95rem;
font-weight:700; color:var(--brand-ink); background:var(--surface-2); border:1px solid var(--line);
font-variant-numeric:tabular-nums; letter-spacing:.02em}
.pid-top b{font-weight:800; color:var(--price)}
.detail-price .price{font-size:1.95rem}
.actionbar{display:flex; flex-wrap:wrap; gap:9px; margin-top:12px; justify-content:flex-end}
.actionbar .btn{padding:10px 15px; font-size:.85rem}
/* Web2026.3: icon nét mảnh (bộ Feather) tô bằng màu chữ của nút, thay emoji 🛒 ➤ ✉ ⤴. */
.actionbar [class*="ab-"]::before{content:""; width:17px; height:17px; flex:none; background:currentColor;
-webkit-mask:var(--ab-i) center/contain no-repeat; mask:var(--ab-i) center/contain no-repeat}
.ab-cart{--ab-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E")}
.ab-send{--ab-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13'/%3E%3Cpath d='M22 2 15 22l-4-9-9-4 20-7z'/%3E%3C/svg%3E")}
.ab-mail{--ab-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z'/%3E%3Cpath d='m22 6-10 7L2 6'/%3E%3C/svg%3E")}
.ab-share{--ab-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='m8.6 13.5 6.8 4M15.4 6.5l-6.8 4'/%3E%3C/svg%3E")}
.ab-cart[aria-pressed="true"]::before{display:none}
/* Điện thoại: lưới 2 cột đều — hàng trên 2 nút chính nổi bật, hàng dưới 2 nút phụ nền nhạt. */
@media (max-width:720px){
.actionbar{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.actionbar .btn{min-width:0; padding:14px 10px; border-radius:12px; font-size:.93rem; white-space:normal; text-align:center; line-height:1.2}
.actionbar .btn-brand{background:linear-gradient(135deg,var(--brand-soft),var(--brand)); box-shadow:0 8px 18px rgb(10 35 66/.28)}
.actionbar .btn-accent{background:linear-gradient(135deg,#FFA63D,var(--accent)); box-shadow:0 8px 18px rgb(255 140 0/.32)}
.actionbar .btn-ghost{padding:11px 10px; font-size:.86rem; font-weight:600; background:var(--surface-2); border-color:transparent}
.actionbar .btn:active{transform:scale(.97)}
}
.gallery{display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:repeat(2,1fr);
gap:10px; margin-top:20px}
.gallery .main{grid-row:span 2; grid-column:span 1}
.gallery figure{margin:0; border-radius:12px; overflow:hidden; position:relative;
aspect-ratio:16/10; background:var(--surface-2)}
.gallery .main{aspect-ratio:auto; min-height:260px}
.gallery img{width:100%; height:100%; object-fit:cover}
.gallery .more{position:absolute; inset:0; background:rgb(4 9 18/.6); color:#fff;
display:grid; place-items:center; font-weight:700; font-size:.92rem; text-align:center}
.detail-grid{display:grid; grid-template-columns:minmax(0,1fr) 352px; gap:32px;
align-items:start; padding-block:30px}
.block{background:var(--surface); border:1px solid var(--line); border-radius:13px;
padding:22px 24px; margin-bottom:20px}
.block > h2{font-size:1.16rem; font-weight:700; padding-bottom:11px; margin-bottom:16px;
border-bottom:2px solid var(--accent); display:inline-block}
.idline{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:-4px 0 18px;
background:var(--surface-2); border-left:3px solid var(--accent);
border-radius:0 8px 8px 0; padding:10px 14px}
.idline b{font-family:Lora,Georgia,serif; font-size:1.06rem; font-variant-numeric:tabular-nums}
.idline i{font-size:.83rem; color:var(--muted)}
.factgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
border:1px solid var(--line); border-radius:10px; overflow:hidden; margin-bottom:18px}
.fact{background:var(--surface); padding:13px 16px}
.fact span{display:block; font-size:.7rem; letter-spacing:.09em; text-transform:uppercase;
color:var(--muted); font-weight:700}
.fact b{font-size:1.04rem; font-weight:700; font-variant-numeric:tabular-nums}
.featgroup{margin-bottom:16px}
.featgroup > h3{font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
color:var(--muted); font-weight:700; margin-bottom:9px}
.featlist{display:grid; grid-template-columns:repeat(3,1fr); gap:7px 20px; margin:0;
padding:0; list-style:none}
.featlist li{display:flex; gap:9px; font-size:.9rem; align-items:flex-start}
.featlist li::before{content:"✓"; color:var(--accent-strong); font-weight:800; flex:none}
.mapbox{aspect-ratio:16/7; border-radius:11px; overflow:hidden; border:1px solid var(--line);
background:repeating-linear-gradient(0deg,transparent 0 38px,rgb(125 140 160/.2) 38px 39px),
repeating-linear-gradient(90deg,transparent 0 38px,rgb(125 140 160/.2) 38px 39px),
var(--surface-2);
display:grid; place-items:center}
/* Bản đồ thật (Google nhúng) — thay hình ghim trang trí. */
.mapbox.has-map{display:block; background:var(--surface-2)}
.mapbox.has-map iframe{display:block; width:100%; height:100%; border:0}
.mapline{display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 16px; margin:10px 0 0; font-size:.88rem; color:var(--muted)}
.mapline a{font-weight:700; color:var(--accent-strong)}
@media (max-width:720px){ .mapbox.has-map{aspect-ratio:4/3} }
.mappin{display:flex; flex-direction:column; align-items:center; gap:8px; font-size:.85rem; font-weight:700}
.mappin i{width:38px; height:38px; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
background:var(--accent); display:grid; place-items:center; font-style:normal}
.mappin i b{transform:rotate(45deg); color:var(--on-accent); font-size:1rem}
.side{position:sticky; top:84px; display:flex; flex-direction:column; gap:18px}
.agentbox{background:var(--surface); border:1px solid var(--line); border-radius:13px; overflow:hidden}
.agentbox .hd{background:var(--surface-2); padding:12px 18px; font-weight:700; font-size:.95rem;
border-bottom:1px solid var(--line)}
.agentbox .bd{padding:18px; display:flex; gap:14px}
.agentbox .bd .ph{width:86px; height:106px; border-radius:9px; flex:none; background:var(--surface-2);
display:grid; place-items:center; font-family:Lora,serif; font-size:1.5rem; color:var(--brand-soft)}
.agentbox .bd img.ph{object-fit:cover; object-position:top}
.agentbox h3{font-size:1.04rem; font-weight:700}
.tel{display:inline-flex; align-items:center; gap:7px; margin-top:6px; font-weight:700;
font-size:1rem; color:var(--accent-strong); font-variant-numeric:tabular-nums}
.tel:hover{text-decoration:underline}
.apps{display:flex; gap:8px; margin-top:13px}
.app{width:40px; height:36px; border-radius:9px; display:grid; place-items:center; color:#fff;
font-size:.64rem; font-weight:800; letter-spacing:.02em}
.app.wa{background:#25D366; color:#043D1F}
.app.zalo{background:#0068FF}
.app.ms{background:linear-gradient(135deg,#00B2FF,#006AFF)}
.app:hover{filter:brightness(1.1)}
.agentbox .mail{display:flex; gap:9px; align-items:center; padding:12px 18px; font-size:.86rem;
border-top:1px solid var(--line); color:var(--muted); word-break:break-word}
.inquiry{background:var(--brand); color:#fff; border-radius:13px; overflow:hidden}
.inquiry .hd{padding:14px 18px; font-weight:700; background:rgb(255 255 255/.08)}
.inquiry form{padding:16px 18px 20px; display:flex; flex-direction:column; gap:10px}
.inquiry input,.inquiry textarea{width:100%; padding:11px 13px; border-radius:8px;
border:1px solid rgb(255 255 255/.22); background:rgb(255 255 255/.08); color:#fff; font-size:.9rem}
.inquiry input::placeholder,.inquiry textarea::placeholder{color:rgb(255 255 255/.62)}
.inquiry textarea{resize:vertical; min-height:76px}
.slider{position:relative}
.track{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(272px,1fr); gap:18px;
overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding-bottom:8px}
.track > *{scroll-snap-align:start}
.snav{position:absolute; top:34%; width:42px; height:42px; border-radius:50%;
background:var(--surface); border:1px solid var(--line); display:grid; place-items:center;
z-index:3; box-shadow:0 6px 18px rgb(var(--shadow)/.22); font-size:1.1rem}
.snav.prev{left:-15px} .snav.next{right:-15px}
.snav:hover{background:var(--brand); color:#fff; border-color:var(--brand)}
/* ---------- 19. Back to top ---------- */
.totop{position:fixed; right:20px; bottom:20px; width:46px; height:46px; border-radius:50%;
background:var(--brand); color:#fff; display:grid; place-items:center; z-index:45;
box-shadow:0 10px 26px rgb(var(--shadow)/.32); opacity:0; pointer-events:none;
transition:opacity .25s ease}
.totop.show{opacity:1; pointer-events:auto}
/* ---------- 23. Responsive ---------- */
@media (max-width:1060px){
.mainnav{display:none}
.navtoggle{display:block}
/* Menu mobile xếp dọc: menu con mở ngay bên dưới, không nổi đè lên mục khác. */
.has-sub.open .subnav{position:static; margin-top:4px; box-shadow:none}
.mainnav > :last-child .subnav{right:auto}
.searchrow{grid-template-columns:repeat(2,1fr)}
.btn-search{grid-column:1/-1}
.adv-panel{grid-template-columns:repeat(2,1fr)}
.pgrid,.qgrid{grid-template-columns:repeat(2,1fr)}
.agrid,.bgrid,.bgrid.cols3{grid-template-columns:repeat(2,1fr)}
/* minmax(0,…) chứ không phải 1fr: 1fr không co nhỏ hơn nội dung, dải Similar properties
(nhiều thẻ nằm ngang) kéo cả trang rộng ~2350px trên điện thoại, nút nổi văng ra ngoài. */
.detail-grid{grid-template-columns:minmax(0,1fr)}
.side{position:static}
/* Một cột: Contact Agent lên ngay dưới Map view, trên Similar properties (Web2026.1).
Hai cột con "tan" ra (display:contents) để xếp lại thứ tự từng khối bằng order;
min-width:0 để dải Similar properties không kéo rộng trang. */
.detail-grid{display:flex; flex-direction:column; align-items:stretch; gap:0}
.detail-grid > div,.detail-grid > .side{display:contents}
.detail-grid > div > *,.detail-grid > .side > *{order:1; min-width:0}
/* Form gửi yêu cầu ngay dưới Contact Agent (góp ý chị Xuyên 22/09) — cùng order,
giữ thứ tự trong HTML: agentbox rồi inquiry. */
.detail-grid .side > .agentbox,.detail-grid .side > .inquiry{order:2; margin-bottom:20px}
.detail-grid .after-contact{order:3}
.footer-grid{grid-template-columns:1fr 1fr}
.steps{grid-template-columns:repeat(3,1fr); gap:22px}
.factgrid{grid-template-columns:repeat(2,1fr)}
.featlist{grid-template-columns:repeat(2,1fr)}
.gallery{grid-template-columns:1fr 1fr}
.gallery .main{grid-column:span 2; grid-row:auto}
}
@media (max-width:720px){
.searchrow{grid-template-columns:1fr}
.adv-panel{grid-template-columns:1fr}
.pgrid,.qgrid,.agrid,.bgrid,.bgrid.cols3{grid-template-columns:1fr}
.pgrid.list .pcard{flex-direction:column}
.pgrid.list .pcard-media{width:100%; aspect-ratio:760/494}
.pgrid.list .pcard-foot{width:auto; border-left:0; border-top:1px solid var(--card-line);
flex-direction:row; align-items:center}
.pgrid.list .btn-cart{margin:0 auto 0 0}
.steps{grid-template-columns:repeat(2,1fr)}
.gallery{grid-template-columns:1fr}
.gallery .main{grid-column:auto}
.footer-grid{grid-template-columns:1fr; gap:28px}
.detail-price{text-align:left}
.actionbar{justify-content:flex-start}
.featlist,.factgrid{grid-template-columns:1fr}
.snav{display:none}
.hero-inner{padding-block:50px 94px}
.bcard{aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*{animation-duration:.01ms !important; transition-duration:.01ms !important}
.track{scroll-behavior:auto}
}
/* ---------- 20. Bo sung cho theme (khong co trong mockup) ---------- */
/* Anh chua co that -> khoi mau thay the, khong de vo layout */
.ph-img{width:100%; height:100%; display:grid; place-items:center;
background:linear-gradient(135deg,var(--surface-2),var(--bg));
color:var(--muted); font-size:.78rem; font-weight:600; letter-spacing:.06em;
text-transform:uppercase; text-align:center; padding:10px}
/* Khong co ket qua */
.empty-state{background:var(--surface); border:1px dashed var(--line); border-radius:13px;
padding:40px 24px; text-align:center; color:var(--muted)}
.empty-state b{display:block; color:var(--text); font-size:1.05rem; margin-bottom:6px}
/* Chuyen ngon ngu tren topbar */
.langsw{display:flex; gap:4px; align-items:center}
.langsw a{font-size:.72rem; font-weight:700; padding:2px 8px; border-radius:4px; opacity:.75}
.langsw a[aria-current="true"]{background:rgb(255 255 255/.18); opacity:1}
/* Thong bao cua form */
.formmsg{font-size:.85rem; margin:0; padding:9px 12px; border-radius:8px}
.formmsg.ok{background:rgb(255 255 255/.14)}
/* Thông báo lỗi nằm trên nền tối của khối liên hệ, nên dùng đỏ nhạt
đủ tương phản thay vì đỏ đậm khó đọc. */
.formmsg.err{background:rgb(255 96 96/.2); color:#ffd9d9}
/* Breadcrumb cua landing/building dung chung .crumb da co */
/* Khoi loc: nhan gon hon khi nhieu o */
.toolbar .tb label{white-space:nowrap}
/* Nhom tien ich tren trang chi tiet */
.featgroup:last-child{margin-bottom:0}
/* Anh trong slider giu ti le */
.track .pcard-media{aspect-ratio:760/494}
/* Trang 404 */
.err404{padding-block:70px; text-align:center}
.err404 h1{font-size:clamp(2rem,1.4rem+2.6vw,3rem); font-family:Lora,Georgia,serif}
.err404 p{color:var(--muted); margin:12px auto 24px}
/* ---------- Star vote (yêu cầu số 3 trong file docx) ---------- */
.hre-rate{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:-4px 0 16px}
.hre-rate-stars{display:inline-flex; gap:2px}
.hre-star{font-size:1.25rem; line-height:1; padding:2px 1px; min-width:24px; min-height:24px; color:var(--line);
background:none; border:0; cursor:pointer; transition:color .12s ease,transform .12s ease}
.hre-star.on{color:var(--accent)}
.hre-rate:not(.is-done) .hre-rate-stars:hover .hre-star{color:var(--accent)}
.hre-rate:not(.is-done) .hre-rate-stars:hover .hre-star:hover ~ .hre-star{color:var(--line)}
.hre-rate:not(.is-done) .hre-star:hover{transform:scale(1.15)}
.hre-rate.is-done .hre-star{cursor:default}
.hre-rate-text{font-size:.85rem; color:var(--muted); font-variant-numeric:tabular-nums}
.hre-rate-text b{color:var(--text); font-size:1rem}
.hre-rate-msg{font-size:.82rem; color:var(--accent-strong); font-weight:600}
.pager-gap{display:grid; place-items:center; min-width:24px; height:38px; color:var(--muted)}
/* ---------- Ảnh mặc định khi tin chưa có ảnh ---------- */
.ph-img-file{width:100%; height:100%; object-fit:cover; display:block;
background:var(--surface-2)}
/* ---------- Combo box: mũi tên thụt vào, danh sách mềm hơn ---------- */
/*
Bỏ mũi tên mặc định của trình duyệt rồi vẽ lại bằng SVG nền, nhờ vậy canh
được khoảng cách mép phải và đổi màu theo bảng màu. Chừa padding-right đủ
rộng để chữ dài không chạy đè lên mũi tên.
*/
select,
.field select,
.toolbar select{
appearance:none; -webkit-appearance:none; -moz-appearance:none;
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' fill='none' stroke='%235A6577' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 14px center; /* mũi tên thụt vào 14px */
background-size:12px 8px;
padding-right:38px;
border-radius:10px;
cursor:pointer;
transition:border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
select:hover,
.field select:hover,
.toolbar select:hover{border-color:var(--muted)}
select:focus,
.field select:focus,
.toolbar select:focus{
outline:none;
border-color:var(--accent);
box-shadow:0 0 0 3px rgb(255 140 0 / .16);
}
/* Danh sách xổ xuống: mềm hơn, chữ thoáng hơn.
Trình duyệt chỉ cho tuỳ biến hạn chế phần này — nhiều nhất là màu nền,
màu chữ và khoảng đệm; hình dáng viền vẫn do hệ điều hành quyết định. */
select option{
padding:10px 12px;
background:var(--surface);
color:var(--text);
line-height:1.9;
}
select option:checked,
select option:hover{background:var(--surface-2)}
/* Tiêu đề nhóm trong danh sách xổ xuống ("Khu vực chính" / "Khu vực khác").
Phần này trình duyệt cho đổi màu và kiểu chữ, khác với từng option. */
select optgroup{
font-style:normal;
font-weight:700;
font-size:.78rem;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--muted);
background:var(--surface-2);
}
select optgroup option{
font-weight:500;
font-size:.92rem;
letter-spacing:normal;
text-transform:none;
color:var(--text);
background:var(--surface);
}
/* Mũi tên đổi màu theo chủ đề tối */
:root[data-theme="dark"] select,
:root[data-theme="dark"] .field select,
:root[data-theme="dark"] .toolbar select{
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' fill='none' stroke='%2395A2B5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) select,
:root:not([data-theme="light"]) .field select,
:root:not([data-theme="light"]) .toolbar select{
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' fill='none' stroke='%2395A2B5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
}
/* ---------- Khung phóng to ảnh ---------- */
.gallery [data-zoom]{cursor:zoom-in}
/* Ảnh trên điện thoại (cả màn hình ngang): thành dải trượt, vuốt bằng tay.
Trước đây 5 ảnh xếp dọc — phải cuộn qua hết mới tới nội dung; xoay ngang
thì lưới 2 cột để hở khoảng trống lớn. Mỗi ảnh rộng 88% để lộ mép ảnh sau,
khách nhìn là biết vuốt được. Dùng scroll-snap của trình duyệt, không JS. */
@media (max-width:720px), (hover:none) and (max-width:1060px){
.gallery{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:8px;
overscroll-behavior-x:contain; scrollbar-width:none}
.gallery::-webkit-scrollbar{display:none}
.gallery figure,.gallery .main{flex:0 0 88%; aspect-ratio:auto; min-height:0;
height:min(66vw,72vh); scroll-snap-align:start}
}
.zoom{position:fixed; inset:0; z-index:100; display:flex; align-items:center;
justify-content:center; gap:10px; padding:20px;
background:rgb(4 8 16/.93); backdrop-filter:blur(2px)}
.zoom[hidden]{display:none}
.zoom-fig{margin:0; max-width:min(1200px,100%); max-height:100%;
display:flex; flex-direction:column; gap:10px; align-items:center}
.zoom-fig img{max-width:100%; max-height:calc(100vh - 110px); width:auto;
object-fit:contain; border-radius:10px; background:rgb(255 255 255/.04)}
/* Mã tin trong chú thích ảnh phóng to (Web2026.1). */
.zoom-pid{display:inline-block; margin-right:8px; padding:2px 8px; border-radius:6px;
background:var(--accent); color:var(--on-accent); font-weight:800}
/* Dòng "Nhập giá" đầu danh sách giá. */
.pcustom{display:flex; gap:6px; padding:8px; border-bottom:1px solid var(--line)}
.pcustom input{flex:1; min-width:0; padding:8px 10px; border-radius:8px; border:1px solid var(--line);
background:var(--surface); color:var(--text); font:inherit; font-size:.9rem}
.pcustom button{padding:8px 12px; border-radius:8px; border:0; background:var(--brand); color:#fff;
font-weight:700; cursor:pointer}
.zoom-fig figcaption{color:rgb(255 255 255/.72); font-size:.84rem; text-align:center}
.zoom-x{position:absolute; top:14px; right:16px; width:42px; height:42px; border-radius:50%;
font-size:1.6rem; line-height:1; color:#fff; background:rgb(255 255 255/.12)}
.zoom-x:hover{background:rgb(255 255 255/.24)}
.zoom-nav{flex:none; width:46px; height:46px; border-radius:50%; font-size:1.9rem; line-height:1;
color:#fff; background:rgb(255 255 255/.12)}
.zoom-nav:hover{background:rgb(255 255 255/.24)}
.zoom-nav[hidden]{display:none}
@media (max-width:640px){
.zoom{padding:12px; gap:4px}
.zoom-nav{position:absolute; bottom:18px; width:52px; height:52px}
.zoom-prev{left:18px}
.zoom-next{right:18px}
.zoom-fig img{max-height:calc(100vh - 160px)}
}
/* ---------- Giỏ quan tâm: panel nổi ---------- */
.cartbox{position:fixed; z-index:60; top:96px; right:18px; width:min(340px,calc(100% - 28px));
background:var(--surface); border:1px solid var(--line); border-radius:14px;
box-shadow:0 22px 52px rgb(var(--shadow)/.26); display:flex; flex-direction:column;
max-height:min(70vh,560px)}
.cartbox[hidden]{display:none}
.cartbox-hd{display:flex; align-items:center; justify-content:space-between; gap:10px;
padding:12px 14px; border-bottom:1px solid var(--line); font-size:.92rem}
.cartbox-x{width:28px; height:28px; border-radius:50%; font-size:1.2rem; line-height:1;
color:var(--muted)}
.cartbox-x:hover{background:var(--surface-2); color:var(--text)}
.cartbox-hd b{flex:1; display:flex; align-items:center; gap:6px}
.cartbox-min{margin-right:-6px}
.cartbox.is-min .cartbox-list,.cartbox.is-min .cartbox-ft{display:none}
.cartbox.is-min .cartbox-hd{border-bottom:0}
.cartbox.is-min .cartbox-hd b{cursor:pointer}
.cartbox-list{overflow-y:auto; padding:6px; scrollbar-width:thin;
scrollbar-color:var(--line) transparent}
.cartbox-list::-webkit-scrollbar{width:8px}
.cartbox-list::-webkit-scrollbar-thumb{background:var(--line); border-radius:999px}
.cartbox-ft{display:flex; align-items:center; gap:10px; padding:11px 14px;
border-top:1px solid var(--line)}
.cartbox-ft .btn{flex:1; padding:10px 14px; font-size:.82rem}
.cartbox-clear{font-size:.8rem; color:var(--muted); white-space:nowrap}
.cartbox-clear:hover{color:#b32d2e}
/* Một dòng trong giỏ — dùng chung cho panel nổi và trang giỏ. */
.cartrow{display:flex; gap:11px; padding:8px; border-radius:10px}
.cartrow + .cartrow{border-top:1px solid var(--line)}
.cartrow:hover{background:var(--surface-2)}
.cartrow-media{flex:none; width:74px}
.cartrow-media img{width:74px; height:52px; object-fit:cover; border-radius:7px}
.cartrow-body{min-width:0; display:flex; flex-direction:column; gap:2px}
.cartrow-title{font-size:.84rem; font-weight:600; line-height:1.3;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.cartrow-title:hover{color:var(--accent-strong)}
.cartrow-price{font-size:.82rem; font-weight:700; color:var(--price)}
.cartrow-meta{font-size:.78rem; color:var(--muted)}
.cartrow-drop{align-self:flex-start; font-size:.76rem; color:var(--muted)}
.cartrow-drop:hover{color:#b32d2e}
/* Trang giỏ: danh sách bên trái, biểu mẫu gửi bên phải. */
.cartpage{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:24px; align-items:start}
.cartpage-list{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:8px}
.cartpage-list .cartrow-media{width:112px}
.cartpage-list .cartrow-media img{width:112px; height:78px}
.cartpage-list .cartrow-title{font-size:.95rem; -webkit-line-clamp:2}
@media (max-width:900px){
.cartpage{grid-template-columns:1fr}
.cartbox{top:auto; bottom:14px; right:14px; left:14px; width:auto}
}
/* ---------- Khay so sánh nổi ở chân trang ---------- */
.cmp-tray{position:fixed; z-index:45; left:50%; transform:translateX(-50%); bottom:18px;
display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center;
padding:11px 16px; border-radius:999px; background:var(--surface);
border:1px solid var(--line); box-shadow:0 16px 40px rgb(var(--shadow)/.26);
max-width:calc(100% - 32px)}
.cmp-tray[hidden]{display:none}
.cmp-tray .btn{padding:9px 16px; font-size:.85rem}
.cmp-count{font-size:.88rem; color:var(--muted); white-space:nowrap}
.cmp-count b{color:var(--text); font-size:1rem}
.cmp-note{width:100%; text-align:center; font-size:.8rem; color:var(--accent-strong)}
.cmp-note[hidden]{display:none}
/* ---------- Bảng so sánh ----------
Cuộn NGANG trên màn hình hẹp. So sánh mà mỗi tin một hàng thì mất hết ý nghĩa,
nên thà để cuộn ngang còn hơn ép xuống dòng. */
.cmp-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:14px;
background:var(--surface)}
.cmp{border-collapse:collapse; width:100%; min-width:640px}
.cmp th,.cmp td{padding:12px 14px; text-align:left; vertical-align:top;
border-bottom:1px solid var(--line); font-size:.9rem}
.cmp tbody th{width:150px; white-space:nowrap; font-weight:700; font-size:.72rem;
letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
background:var(--surface-2)}
.cmp thead th{border-bottom:2px solid var(--line); vertical-align:bottom}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp td.is-price{color:var(--price); font-weight:700; font-size:1.05rem}
.cmp-media{display:block; margin-bottom:9px}
.cmp-media img{border-radius:9px; aspect-ratio:8/5; object-fit:cover; width:100%}
.cmp-title{display:block; font-weight:600; line-height:1.35; margin-bottom:7px}
.cmp-title:hover{color:var(--accent-strong)}
.cmp-drop{font-size:.76rem; font-weight:700; color:var(--muted)}
.cmp-drop:hover{color:#b32d2e}
/* ---------- Combo box tuỳ biến trong ô tìm kiếm ----------
Thay cho danh sách xổ xuống mặc định, vốn do hệ điều hành vẽ nên không tạo
kiểu được.