/*!
 * v3.css — Bộ giao diện dùng chung cho toàn bộ timthuesmartcity.com
 * Dựng theo bản thiết kế tham chiếu _design:/index-v3-demo.html
 *
 * VÌ SAO GỘP MỘT FILE: trước đây mỗi trang mang một khối <style> riêng
 * (trang chủ 1314 dòng, 25 trang danh mục dùng chung 90 dòng, mỗi bài viết
 * một bản khác nữa). Sửa màu một chỗ phải sửa 39 file. Gộp lại một file
 * giúp khách chỉ tải CSS đúng một lần rồi dùng cache cho mọi trang sau.
 *
 * NGUYÊN TẮC KHI SỬA FILE NÀY:
 *   - Giữ nguyên tên class cũ của từng trang. CSS đổi, HTML gần như không.
 *     Đổi tên class là đường ngắn nhất để làm gãy JavaScript đang chạy.
 *   - Ảnh lấy từ Google Drive nên tỉ lệ không đều: mọi khung ảnh BẮT BUỘC
 *     có aspect-ratio + object-fit:cover, không được bỏ.
 *   - Không dùng font serif/monospace, không nạp thư viện ngoài.
 * ==================================================================== */

/* ==================================================================
   1. BỘ TOKEN
   ================================================================== */
:root{
  --navy:#5C1216;
  --navy-2:#8F1B22;
  --blue:#D42A32;
  --zalo:#0068FF;
  --zalo-dam:#0057D8;
  --green:#0E8A45;
  --green-lt:#E7F5ED;
  --amber:#B4761A;
  --ink:#16202B;
  --gray:#5B6875;
  --gray-lt:#8A96A3;
  --bg:#F4F6F9;
  --line:#E3E8EE;
  --surface:#fff;
  --r:12px;
  --r-sm:8px;
  --maxw:1200px;
  --sh:0 1px 2px rgba(22,32,43,.05), 0 8px 24px -14px rgba(22,32,43,.22);

  /* Tên cũ còn sót trong style nội tuyến của vài trang — trỏ về token mới
     để không có chỗ nào rơi về màu mặc định của trình duyệt. */
  --muted:var(--gray);
  --brand:var(--navy-2);
  --brand-dark:var(--navy);
  --ok:var(--green);

  --font-tieu-de:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-chu:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* Icon dạng mask: tô bằng currentColor nên tự đổi màu theo chữ xung quanh,
     và không phải nhét SVG vào hàng nghìn thẻ căn trong HTML tĩnh. */
  --ic-pin:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'><path d='M12 21s-7-5.6-7-11a7 7 0 1114 0c0 5.4-7 11-7 11z'/><circle cx='12' cy='10' r='2.5'/></svg>");
  --ic-anh:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><path d='m3 16 5-5 4 4 3-3 6 6'/><circle cx='9' cy='10' r='1.4'/></svg>");
  --ic-zalo:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 3C6.9 3 2.8 6.4 2.8 10.6c0 2.4 1.3 4.5 3.4 5.9-.1.6-.5 2-.6 2.3-.1.4.2.4.4.3.2-.1 2.4-1.6 3.4-2.2.8.1 1.7.2 2.6.2 5.1 0 9.2-3.4 9.2-7.5S17.1 3 12 3z'/></svg>");
  --ic-tim:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.5-3.5'/></svg>");
  --ic-nha-trang:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.7' stroke-linejoin='round'><path d='M3.5 10.3 10 4.7 14 8.3v6.6a1 1 0 0 1-1 1H9.4v-4H6.6v4.6a1 1 0 0 1-1 .9H4.3a.9.9 0 0 1-.8-.9Z'/><circle cx='16.8' cy='16.8' r='3.1'/><path d='M19 19 20.8 20.8' stroke-linecap='round'/></svg>");
  --ic-nha:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'><path d='M3.5 10.3 10 4.7 14 8.3v6.6a1 1 0 0 1-1 1H9.4v-4H6.6v4.6a1 1 0 0 1-1 .9H4.3a.9.9 0 0 1-.8-.9Z'/><circle cx='16.8' cy='16.8' r='3.1'/><path d='M19 19 20.8 20.8' stroke-linecap='round'/></svg>");
  --ic-giuong:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'><path d='M3 18v-7a2 2 0 012-2h14a2 2 0 012 2v7M3 14h18M6 9V7a1 1 0 011-1h3a1 1 0 011 1v2M13 9V7a1 1 0 011-1h3a1 1 0 011 1v2'/></svg>");
}

/* ==================================================================
   2. NỀN CHUNG
   ================================================================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-chu);
  font-size:15.5px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%}
a{color:inherit;text-decoration:none}
button,select,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}

h1,h2,h3,h4{font-family:var(--font-tieu-de);letter-spacing:-.02em;line-height:1.22;margin:0}
h1{font-size:clamp(1.7rem,3.4vw,2.35rem);font-weight:800}
h2{font-size:1.55rem;font-weight:800}
h3{font-size:1.05rem;font-weight:700}
p{margin:0 0 12px}
p:last-child{margin-bottom:0}

/* Ổ khoá bàn phím: mọi thứ bấm được phải nhìn thấy được khi tab tới. */
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:3px}
:focus:not(:focus-visible){outline:none}

/* Khung nội dung — ba trang đặt ba tên khác nhau, gom về cùng một bề ngang. */
.shell,.khung,.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px;width:100%}

/* Tiện ích icon mask dùng lại nhiều chỗ */
.ic-mask{display:inline-block;flex:none;background:currentColor;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

/* ==================================================================
   3. HEADER — nền trắng, dính trên cùng, viền dưới 1px
   .topbar : trang chủ + bài viết   |   .top : trang danh mục, ký gửi
   ================================================================== */
.topbar,.top{
  position:sticky;top:0;z-index:60;
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
.topbar .shell,.top .khung,.nav{
  display:flex;align-items:center;gap:24px;min-height:70px;
}
.top .khung{justify-content:space-between;flex-wrap:wrap;gap:14px}

/* Logo: ô vuông bo góc gradient navy→blue.
   flex:0 1 auto (KHÔNG phải flex:none) để trên điện thoại tên thương hiệu co
   lại được — để flex:none thì thẻ <a> giãn theo chữ và đẩy tràn ngang trang. */
.brand,.hieu{display:flex;align-items:center;gap:10px;flex:0 1 auto;min-width:0}
.brand>span,.hieu{line-height:1.2;min-width:0}
.brand>span:not(.brand-mark),.ten-day,.ten-ngan,.hieu{
  font-family:var(--font-tieu-de);font-weight:800;font-size:1.02rem;color:var(--ink);
}
.brand small,.hieu small{
  display:block;font-family:var(--font-chu);font-weight:400;
  font-size:.72rem;color:var(--gray-lt);letter-spacing:0;
}
.brand-mark,.hieu::before{
  width:36px;height:36px;border-radius:9px;flex:none;
  background:linear-gradient(140deg,var(--navy-2),var(--blue));
  display:grid;place-items:center;color:#fff;
}
/* Trang danh mục không có thẻ riêng cho ô logo nên dựng bằng ::before.
   Icon nhà + kính lúp vẽ thẳng vào nền ô vuông — KHÔNG đặt chữ tắt vào đây,
   thêm chữ mới lên trang là việc không được phép trong lần đổi giao diện này. */
.hieu::before{
  content:"";
  background:var(--ic-nha-trang) center/21px no-repeat,
             linear-gradient(140deg,var(--navy-2),var(--blue));
}

/* Menu chữ xám, gạch chân navy khi hover */
.topbar nav,.top nav{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.topbar nav a,.top nav a{
  font-size:.92rem;color:var(--gray);padding:6px 0;
  border-bottom:2px solid transparent;transition:color .2s,border-color .2s;
}
.topbar nav a:hover,.top nav a:hover,
.topbar nav a[aria-current],.top nav a[aria-current]{
  color:var(--navy-2);border-bottom-color:var(--navy-2);
}

/* Ô tìm ở đầu trang chủ */
.search{
  position:relative;flex:1;min-width:0;display:flex;align-items:center;gap:9px;
  background:var(--bg);border:1px solid var(--line);border-radius:99px;
  padding:0 16px;height:44px;transition:border-color .2s,background .2s;
}
.search:focus-within{border-color:var(--navy-2);background:var(--surface)}
.search svg{width:17px;height:17px;flex:none;color:var(--gray-lt)}
.search input{
  flex:1;min-width:0;border:0;background:none;outline:none;
  font-size:.9rem;height:100%;
}
.search input::placeholder{color:var(--gray-lt)}
.search-suggest{
  position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:5;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);padding:12px 14px;
}
.search-suggest[hidden]{display:none}
.ss-label{display:block;font-size:.72rem;color:var(--gray-lt);margin-bottom:8px}
.ss-row{display:flex;gap:7px;flex-wrap:wrap}
.ss-chip{
  background:var(--bg);border:1px solid var(--line);border-radius:99px;
  padding:6px 13px;font-size:.83rem;color:var(--gray);
}
.ss-chip:hover{border-color:var(--navy-2);color:var(--navy-2)}

/* Nút ở góc phải header */
.actions{display:flex;align-items:center;gap:10px;flex:none;margin-left:auto}
.pill-btn{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line);background:var(--surface);color:var(--gray);
  padding:10px 17px;border-radius:99px;font-size:.88rem;font-weight:600;
  white-space:nowrap;transition:.2s;
}
.pill-btn:hover{border-color:var(--navy-2);color:var(--navy-2)}
.pill-btn svg{width:16px;height:16px;flex:none}
.pill-btn.primary{
  background:var(--zalo);border-color:var(--zalo);color:#fff;
  box-shadow:0 6px 16px -8px var(--zalo);
}
.pill-btn.primary:hover{background:var(--zalo-dam);border-color:var(--zalo-dam);color:#fff}

/* Băng "hôm nay thêm N căn" ngay dưới header */
.new-today-bar{
  display:none;width:100%;border:0;text-align:left;
  background:linear-gradient(100deg,var(--navy),var(--navy-2));
  color:#fff;padding:11px 20px;font-size:.88rem;font-weight:500;
}
.new-today-bar.show{display:flex;align-items:center;justify-content:center;gap:12px}
.new-today-bar strong{font-family:var(--font-tieu-de);font-weight:800}
.new-today-bar .arrow{transition:transform .2s}
.new-today-bar:hover .arrow{transform:translateX(3px)}

/* ==================================================================
   4. HERO — ảnh nền phủ kín, lớp phủ tối chuyển từ trái sang
   ================================================================== */
.hero{
  position:relative;overflow:hidden;
  background:var(--navy);
  color:#fff;padding:64px 0 110px;
}
/* Ảnh nền ở đây chỉ còn của trang ký gửi (.hero-gui); trang 404 dùng chung tên
   class .hero nhưng là thẻ trắng, không có ảnh.
   Hero trang chủ đã chuyển sang thẻ <img> thật (khối 20, 02/08/2026) nên luật
   .hero-anh cũ đã gỡ khỏi đây cùng hai file hero-1600.webp / hero-800.webp. */
.hero-gui{background-image:url("hero-smartcity.jpg");background-size:cover;background-position:center 38%}
.hero-gui::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(95deg,rgba(10,26,48,.95) 0%,rgba(10,26,48,.78) 42%,rgba(10,26,48,.25) 100%);
}
.hero>*{position:relative;z-index:2}
.hero h1{font-size:clamp(2rem,4.4vw,3.2rem);font-weight:800;line-height:1.12;max-width:23ch;color:#fff}
.hero p{margin-top:14px;font-size:clamp(1rem,1.6vw,1.15rem);color:rgba(255,255,255,.82);font-weight:300;max-width:62ch}
/* Chỉ gạch chân link chữ trong hero; nút bấm thì không. */
.hero a{color:#fff}
.hero p a{text-decoration:underline;text-underline-offset:3px}

/* Hàng chỉ số — ngăn bởi vạch dọc mờ. Số liệu do JS tính từ data.json. */
.stats{display:flex;flex-wrap:wrap;gap:0;margin-top:34px}
.stat{padding-right:38px;margin-right:38px;border-right:1px solid rgba(255,255,255,.22)}
.stat:last-child{border-right:0;margin-right:0;padding-right:0}
.stat strong{
  display:block;font-family:var(--font-tieu-de);font-weight:800;
  font-size:2.2rem;line-height:1;color:#fff;
}
.stat span{display:block;font-size:.82rem;color:rgba(255,255,255,.7);margin-top:5px}

/* Trang 404: cùng tên class .hero nhưng là thẻ trắng giữa trang, không phải
   dải ảnh nền — nên tắt hết phần tối màu ở trên. */
.hero-thong-bao{
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
  padding:44px 32px;margin:40px auto;text-align:center;max-width:760px;
}
.hero-thong-bao h1{color:var(--ink);max-width:none;margin:0 auto 14px}
.hero-thong-bao p{color:var(--gray);max-width:640px;margin:0 auto 24px}
.hero-thong-bao a{color:var(--navy-2);text-decoration:none}
.hero-thong-bao .cta-home{display:inline-flex;margin:0}

/* Hero rút gọn của các bài viết / trang tổng hợp */
.hub-hero{
  position:relative;background:linear-gradient(115deg,var(--navy) 0%,var(--navy-2) 100%);
  color:#fff;padding:52px 0 56px;
}
.hub-hero h1{color:#fff}
.hub-hero p{color:rgba(255,255,255,.82);margin-top:12px;max-width:70ch}
.hub-hero a{color:#fff}
.hub-hero-inner{display:flex;flex-direction:column;gap:4px}
.eyebrow{
  font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.65);font-weight:600;margin-bottom:6px;
}

/* ==================================================================
   5. THANH LỌC — thẻ trắng đè lên đáy hero bằng margin-top âm
   ================================================================== */
.filters{
  position:relative;z-index:20;margin:-56px 0 26px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);padding:14px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:4px 0;align-items:start;
}
.filter-group{
  position:relative;padding:2px 16px;
  border-right:1px solid var(--line);min-width:0;
}
.filter-group:nth-child(4){border-right:0;padding-right:2px}
.filter-group:nth-child(1){padding-left:2px}
.filter-label{
  display:block;font-size:.7rem;color:var(--gray-lt);margin-bottom:7px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Chip xuống dòng thay vì cuộn ngang: cột lọc chỉ rộng ~260px nên nếu cuộn
   thì các lựa chọn phía sau bị cắt ngang chữ, khách tưởng trang lỗi. */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  flex:none;
  border:1px solid var(--line);background:var(--surface);border-radius:99px;
  padding:5px 12px;font-size:.82rem;font-weight:500;color:var(--gray);
  white-space:nowrap;transition:.18s;
}
.chip:hover{border-color:var(--navy-2);color:var(--navy-2)}
.chip.active{background:var(--navy-2);border-color:var(--navy-2);color:#fff;font-weight:600}
.chip-full{display:inline}
.chip-short{display:none}

.filters-foot-bar{
  grid-column:1/-1;display:flex;align-items:center;justify-content:flex-end;gap:10px;
  border-top:1px solid var(--line);margin-top:6px;padding:12px 2px 0;
}
.filters-foot-bar.trong{justify-content:flex-end}
.filters-sheet-foot{
  background:var(--navy-2);color:#fff;border:0;border-radius:var(--r-sm);
  padding:13px 24px;font-weight:600;font-size:.92rem;white-space:nowrap;
  display:inline-flex;align-items:center;gap:8px;transition:background .2s;
}
.filters-sheet-foot::before{
  content:"";width:16px;height:16px;background:currentColor;
  -webkit-mask:var(--ic-tim) center/contain no-repeat;mask:var(--ic-tim) center/contain no-repeat;
}
.filters-sheet-foot:hover{background:var(--navy)}
.btn-xoa-loc{
  background:none;border:0;color:var(--gray);font-size:.86rem;
  padding:0 10px;white-space:nowrap;
}
.btn-xoa-loc:hover{color:var(--navy-2)}
.btn-xoa-loc[hidden]{display:none}

/* Đầu bảng lọc + nút mở bảng lọc: chỉ dùng ở màn hình hẹp */
.filters-sheet-head{display:none;align-items:center;justify-content:space-between;
  padding:2px 6px 12px;border-bottom:1px solid var(--line);margin-bottom:10px}
.filters-sheet-head strong{font-family:var(--font-tieu-de);font-size:1rem;font-weight:800}
.filters-sheet-head .close{
  background:none;border:0;font-size:1.5rem;line-height:1;color:var(--gray);
  width:34px;height:34px;border-radius:50%;
}
.filters-sheet-head .close:hover{background:var(--bg);color:var(--ink)}
.mobile-filter-toggle{display:none}
.filters-backdrop{display:none}

/* ==================================================================
   6. THẺ CĂN HỘ
   .card / .grid  : trang chủ      |   .the / .luoi : trang danh mục
   ================================================================== */
.grid,.luoi{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:0 0 28px;
}
.card,.the{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .25s,box-shadow .25s;
}
.card:hover,.the:hover{transform:translateY(-3px);box-shadow:var(--sh)}

/* Khung ảnh 4:3 — ảnh Drive kích thước không đều nên object-fit:cover là bắt buộc */
.media,.the-anh{
  position:relative;display:block;width:100%;aspect-ratio:4/3;
  background:#F8F1F1;overflow:hidden;border:0;padding:0;margin:0;
}
.media img,.the-anh img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s ease;
}
.card:hover .media img,.the:hover .the-anh img{transform:scale(1.04)}
/* Chưa có ảnh: nền xám nhạt + dòng chữ sẵn có, không dùng ảnh giả. */
.media.empty{display:grid;place-items:center;gap:8px;color:var(--gray-lt);
  background:linear-gradient(150deg,#F8F1F1,#EEDFE0);font-size:.8rem}
.media.empty svg{width:38px;height:38px;opacity:.55}
.the.khong-anh .the-anh::after{
  content:"Đang cập nhật ảnh";position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;color:var(--gray-lt);font-size:.8rem;
  background:linear-gradient(150deg,#F8F1F1,#EEDFE0);
}

/* Badge góc trên trái — trạng thái căn (xanh lá) */
.badge,.tinh-trang{
  position:absolute;left:10px;top:10px;z-index:2;
  background:var(--green);color:#fff;
  font-size:.68rem;font-weight:600;border-radius:6px;padding:4px 9px;
  white-space:nowrap;
}
/* Badge nội thất (xanh dương) xếp ngay dưới badge trạng thái */
.badge-nt{
  position:absolute;left:10px;top:38px;z-index:2;
  background:var(--blue);color:#fff;
  font-size:.68rem;font-weight:600;border-radius:6px;padding:4px 9px;
  white-space:nowrap;
}
/* Nội thất không phải "full" thì dùng màu trung tính — không tô xanh dương
   cho căn nguyên bản, tránh hứa nhầm với khách. */
.badge-nt.thuong{background:rgba(22,32,43,.72)}

/* Số lượng ảnh góc trên phải, nền đen mờ */
.pcount,.dbc-huy-hieu{
  position:absolute;right:10px;top:10px;z-index:2;
  background:rgba(22,32,43,.62);color:#fff;
  font-size:.7rem;font-weight:500;border-radius:6px;padding:4px 9px;
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
}
.pcount::before,.dbc-huy-hieu::before{
  content:"";width:12px;height:12px;background:currentColor;
  -webkit-mask:var(--ic-anh) center/contain no-repeat;mask:var(--ic-anh) center/contain no-repeat;
}

/* Thân thẻ */
.card .body,.the .than{
  padding:14px 15px 15px;display:flex;flex-direction:column;gap:6px;flex:1;
}
.card .body h3,.the .ten{
  margin:0;font-family:var(--font-chu);font-size:.94rem;font-weight:600;
  color:var(--ink);letter-spacing:0;line-height:1.35;
}

/* GIÁ — thành phần nổi nhất thẻ */
.price,.gia{
  display:block;font-family:var(--font-tieu-de);font-weight:800;
  font-size:1.35rem;line-height:1.2;color:var(--navy-2);white-space:nowrap;
}
.price small,.gia small{
  font-family:var(--font-chu);font-size:.78rem;font-weight:400;color:var(--gray);
  letter-spacing:0;
}

/* Dòng phân khu + mã căn kèm icon ghim */
.tower,.vi-tri{
  display:flex;align-items:center;gap:6px;margin:0;
  font-size:.84rem;font-weight:400;color:var(--gray);
}
.vi-tri::before{
  content:"";width:13px;height:13px;flex:none;background:currentColor;color:var(--gray-lt);
  -webkit-mask:var(--ic-pin) center/contain no-repeat;mask:var(--ic-pin) center/contain no-repeat;
}
.tower svg{width:13px;height:13px;flex:none;color:var(--gray-lt)}

.card .meta{display:flex;flex-wrap:wrap;gap:6px}
.card .tag{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--bg);border:1px solid var(--line);border-radius:6px;
  padding:4px 9px;font-size:.76rem;color:var(--gray);
}
.card .tag svg{width:12px;height:12px;flex:none;color:var(--gray-lt)}
.nhan-nt{
  align-self:flex-start;margin:0;
  background:var(--green-lt);color:var(--green);
  font-size:.76rem;font-weight:600;border-radius:6px;padding:4px 9px;
}

/* Chân thẻ: nút Zalo chiếm trọn bề ngang */
.card-foot{
  display:flex;flex-direction:column;align-items:stretch;gap:9px;
  margin-top:auto;padding-top:10px;
}
/* Thẻ trang danh mục bọc giá + nút Zalo chung trong .chan-the, nhưng bản
   thiết kế xếp giá NGAY DƯỚI tiêu đề rồi mới tới dòng phân khu. Dùng
   display:contents để hai phần tử đó thành con trực tiếp của .than rồi xếp
   lại bằng order — không phải sửa markup của 794 thẻ căn tĩnh. */
.the .chan-the{display:contents}
.the .ten{order:1}
.the .gia{order:2}
.the .vi-tri{order:3}
.the .zalo{order:4;margin-top:auto}
.the .ma-can{order:5}
.ask,.zalo{
  width:100%;background:var(--zalo);color:#fff;border:0;border-radius:var(--r-sm);
  padding:11px;font-weight:600;font-size:.88rem;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  transition:background .2s;min-height:44px;
}
.ask:hover,.zalo:hover{background:var(--zalo-dam);color:#fff;text-decoration:none}
.ask svg{width:15px;height:15px;flex:none}
.zalo::before{
  content:"";width:15px;height:15px;flex:none;background:currentColor;
  -webkit-mask:var(--ic-zalo) center/contain no-repeat;mask:var(--ic-zalo) center/contain no-repeat;
}
.ma-can{margin:2px 0 0;font-size:.74rem;color:var(--gray-lt)}
.ma-can b{font-family:var(--font-tieu-de);font-weight:700;letter-spacing:.01em;color:var(--gray)}

/* Thẻ bấm mở album */
.dbc-xem-duoc{cursor:pointer}
.dbc-xem-duoc:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* Trạng thái rỗng / đang tải */
.empty-state,.loading-state,.error-state{
  grid-column:1/-1;background:var(--surface);border:1px dashed var(--line);
  border-radius:var(--r);padding:48px 20px;text-align:center;color:var(--gray);
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.loading-hourglass{font-size:1.8rem;animation:v3-nhip 1.6s ease-in-out infinite}
@keyframes v3-nhip{0%,100%{opacity:1}50%{opacity:.35}}

/* ==================================================================
   7. HÀNG ĐẦU DANH SÁCH · SẮP XẾP · PHÂN TRANG
   ================================================================== */
.list-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin:0 0 18px;
}
.result-count{font-size:.9rem;color:var(--gray)}
.result-count strong{font-family:var(--font-tieu-de);font-weight:700;color:var(--ink)}
#sortSelect{
  background:var(--surface);border:1px solid var(--line);border-radius:99px;
  padding:9px 34px 9px 16px;font-size:.86rem;font-weight:500;color:var(--gray);
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A96A3' stroke-width='2.2' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 13px center;background-size:13px;
}
#sortSelect:hover{border-color:var(--navy-2);color:var(--navy-2)}

.pagination{display:flex;justify-content:center;align-items:center;gap:7px;flex-wrap:wrap;margin:6px 0 30px}
.page-btn{
  min-width:40px;height:40px;padding:0 12px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:.88rem;font-weight:600;color:var(--gray);transition:.18s;
}
.page-btn:hover{border-color:var(--navy-2);color:var(--navy-2)}
.page-btn.active{background:var(--navy-2);border-color:var(--navy-2);color:#fff}
.page-ellipsis{color:var(--gray-lt);padding:0 4px}

/* Dải "chưa thấy căn ưng ý" */
.lead-prompt{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  background:linear-gradient(170deg,#FFF7F7,var(--surface));
  border:1px solid #F2D9DA;border-radius:var(--r);padding:20px 22px;margin:0 0 28px;
}
.lead-prompt-text{display:flex;flex-direction:column;gap:3px}
.lead-prompt-text strong{font-family:var(--font-tieu-de);font-size:1.05rem;font-weight:800;color:var(--navy)}
.lead-prompt-text span{font-size:.88rem;color:var(--gray)}
.lead-prompt-btn{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  background:var(--navy-2);color:#fff;border:0;border-radius:var(--r-sm);
  padding:12px 22px;font-weight:600;font-size:.9rem;min-height:44px;transition:background .2s;
}
.lead-prompt-btn:hover{background:var(--navy)}
.lead-prompt-btn svg{width:15px;height:15px;flex:none}

/* ==================================================================
   8. CÁC KHỐI NỘI DUNG
   ================================================================== */
section{margin:0 0 34px}
.muc-luc,.faq-block,.seo-block,.kham-pha,.bai,.sec,.pillar,
.note-box,.cta-box,.toc,.thieu-du-lieu,.disclaimer,.note{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 26px;margin:0 0 24px;
}
.muc-luc h2,.faq-block h2,.seo-block h2,.kham-pha h2,.bai h2,.sec h2,.pillar h2{
  font-size:1.3rem;font-weight:800;margin:0 0 10px;
}
.bai h3,.sec h3,.pillar h3{font-size:1.02rem;margin:20px 0 7px}
.muc-luc-dan,.kham-pha-dan,.pillar-lead,.tt,.articles-sub{
  color:var(--gray);margin:0 0 18px;max-width:74ch;
}

.muc-luc-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:22px}
.muc-luc-nhom h3{
  font-family:var(--font-tieu-de);font-size:.82rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--gray-lt);margin:0 0 10px;
}
.muc-luc-nhom ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.muc-luc-nhom a{font-size:.9rem;color:var(--gray)}
.muc-luc-nhom a:hover{color:var(--navy-2)}

/* Ô điều hướng theo loại căn — dáng "hub" của bản thiết kế */
.kham-pha-luoi,.post-grid,.lien-ket-nhom{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;
}
.kham-pha-luoi a,.post-card{
  display:flex;flex-direction:column;gap:4px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:18px;transition:.22s;
}
.kham-pha-luoi a:hover,.post-card:hover{border-color:var(--navy-2);transform:translateY(-2px)}
.kham-pha-luoi strong,.post-card h3{
  font-family:var(--font-tieu-de);font-weight:700;font-size:1rem;color:var(--ink);
}
.kham-pha-luoi span,.post-card p{font-size:.85rem;color:var(--gray);margin:0}
.kham-pha-luoi a::before{
  content:"";width:44px;height:44px;margin-bottom:8px;border-radius:11px;
  background:#FBEFEF;color:var(--navy-2);
  background-image:var(--ic-giuong);background-size:20px;
  background-position:center;background-repeat:no-repeat;
}

/* Câu hỏi thường gặp */
details{border-bottom:1px solid var(--line)}
details:last-of-type{border-bottom:0}
summary{
  list-style:none;cursor:pointer;position:relative;
  padding:13px 30px 13px 0;font-size:.92rem;font-weight:500;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"+";position:absolute;right:4px;top:10px;
  font-size:1.2rem;font-weight:400;color:var(--gray-lt);
}
details[open]>summary::after{content:"–"}
details p{font-size:.88rem;color:var(--gray);padding:0 0 14px;margin:0}

/* Bảng số liệu */
.price-table,.bang,.bang-gia{
  width:100%;border-collapse:collapse;font-size:.9rem;margin:8px 0 4px;
}
.price-table th,.price-table td,.bang th,.bang td,.bang-gia th,.bang-gia td{
  border-bottom:1px solid var(--line);padding:11px 10px;text-align:left;
}
.price-table th,.bang th,.bang-gia th{
  font-family:var(--font-tieu-de);font-size:.76rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:var(--gray-lt);
}
.price-table td strong,.bang td strong,.bang-gia td strong{
  font-family:var(--font-tieu-de);font-weight:800;color:var(--navy-2);
}
.bang-cuon{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 16px}
/* Bảng giá đủ rộng để đọc được rồi mới cuộn, thay vì bóp cột đến mức dính chữ */
.bang-cuon .bang-gia{min-width:620px;margin:0}
/* Ô bảng giá gồm hai phần: khoảng giá và dòng chú thích. Phải tách dòng, nếu
   không "6 – 7,5 tr" dính liền "Trung vị: 6,5 · n=70". */
.bang-gia .phu,.bang-gia .thieu-du-lieu,.bang-gia th .phu{
  display:block;font-size:.75rem;color:var(--gray-lt);font-weight:400;margin-top:2px;
}
.bang-gia .thieu-du-lieu{background:none;border:0;padding:0;font-style:italic}
.bang-gia th{vertical-align:top}
/* Số căn của phân khu nằm trong <small> ngay sau tên — phải xuống dòng, nếu
   không hai phần dính liền thành "SAPPHIRE70 CĂN". */
.bang-gia th small{
  display:block;text-transform:none;letter-spacing:0;
  font-size:.72rem;font-weight:400;color:var(--gray-lt);margin-top:2px;
}

/* Hàng chip liên kết cuối trang */
.lq,.chips-lq,.cta-buttons,.cta-hang{display:flex;gap:9px;flex-wrap:wrap;margin:12px 0 24px}
.lq a{
  background:var(--surface);border:1px solid var(--line);border-radius:99px;
  padding:8px 16px;font-size:.86rem;color:var(--gray);transition:.18s;
}
.lq a:hover{border-color:var(--navy-2);color:var(--navy-2)}

/* Ô chỉ số đầu trang danh mục.
   PHẢI bám theo .sl: trang /gui-thue/ cũng dùng class .o nhưng ở đó .o là ô
   nhập liệu của biểu mẫu, không phải ô thống kê. */
.sl{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 22px}
.sl .o{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 18px;min-width:124px;
}
.sl .o b{
  display:block;font-family:var(--font-tieu-de);font-weight:800;
  font-size:1.35rem;color:var(--navy-2);line-height:1.2;
}
.sl .o span{font-size:.78rem;color:var(--gray-lt)}

/* Vụn đường dẫn */
.bc,.breadcrumb{font-size:.82rem;color:var(--gray-lt);padding:16px 0 0;margin:0}
.bc a,.breadcrumb a{color:var(--gray-lt)}
.bc a:hover,.breadcrumb a:hover{color:var(--navy-2)}

/* Nút kêu gọi lớn */
.cta-loc,.cta-home,.cta-chinh,.moi-chu-nha-nut,.back-link,.detail-link,.read-more{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--r-sm);font-weight:600;transition:.2s;
}
.cta-loc,.cta-home{
  display:block;text-align:center;padding:15px 18px;font-weight:700;border-radius:var(--r);
}
.cta-loc small,.cta-home small{
  display:block;font-weight:400;font-size:.82rem;margin-top:4px;opacity:.88;
}
.cta-loc,.cta-home.duoi{background:var(--navy-2);color:#fff;border:0;margin:24px 0 8px}
.cta-loc:hover,.cta-home.duoi:hover{background:var(--navy);color:#fff;text-decoration:none}
.cta-home.tren{
  background:var(--surface);color:var(--navy-2);border:1.5px solid var(--navy-2);
  margin:0 0 22px;
}
.cta-home.tren:hover{background:#FBEFEF;text-decoration:none}
.moi-chu-nha-nut,.cta-chinh,.nho-tim-nut{
  background:var(--navy-2);color:#fff;padding:13px 24px;min-height:44px;flex:none;
}
.moi-chu-nha-nut:hover,.cta-chinh:hover,.nho-tim-nut:hover{background:var(--navy);color:#fff}
.back-link,.detail-link,.read-more{color:var(--navy-2);font-size:.88rem}
.back-link:hover,.detail-link:hover,.read-more:hover{text-decoration:underline}
.ghost,.white{
  background:var(--surface);border:1px solid var(--line);color:var(--navy-2);
  padding:12px 22px;border-radius:var(--r-sm);font-weight:600;
}
.ghost:hover,.white:hover{border-color:var(--navy-2)}

/* Lời mời chủ nhà ký gửi */
.moi-chu-nha{background:none;border:0;padding:0;margin:0 0 30px}
.moi-chu-nha-trong{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:linear-gradient(170deg,#FFF7F7,var(--surface));
  border:1px solid #F2D9DA;border-radius:var(--r);padding:24px 26px;
}
.moi-chu-nha h2{font-size:1.2rem;color:var(--navy);margin:0 0 5px}
.moi-chu-nha p{font-size:.9rem;color:var(--gray);margin:0;max-width:60ch}

.note-box,.note,.thieu-du-lieu{background:#FFF7F7;border-color:#F2D9DA;font-size:.9rem}
.disclaimer,.mien-tru,.dis{
  font-size:.8rem;color:var(--gray-lt);background:none;border:0;padding:0;
  border-top:1px solid var(--line);padding-top:16px;margin-top:24px;
}
.article-tag,.cap-nhat,.meta,.soon,.tieu-de{font-size:.8rem;color:var(--gray-lt)}
.toc ul,.bullets{margin:0;padding-left:20px}
.toc li,.bullets li{margin-bottom:7px;font-size:.9rem;color:var(--gray)}
/* height:auto là BẮT BUỘC ở mọi khung dùng aspect-ratio.
   Ảnh trong bài có sẵn thuộc tính height="600" trên thẻ <img>; đó là một khai
   báo CSS thật (presentational hint), nên nếu tác giả không ghi đè height thì
   aspect-ratio bị vô hiệu và ảnh kéo cao 600px. */
.img-slot,.gallery img,.lead-img{border-radius:var(--r);overflow:hidden;display:block}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:0 0 22px}
.gallery img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.lead-img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;margin:0 0 20px}
.img-slot{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}

/* ==================================================================
   9. FOOTER — nền trắng, viền trên
   ================================================================== */
footer,.site-footer,.chan,.foot-wrap{
  background:var(--surface);border-top:1px solid var(--line);
  padding:34px 0 96px;margin-top:8px;
  color:var(--gray);font-size:.86rem;
}
footer a,.site-footer a,.chan a{color:var(--gray);font-weight:500}
footer a:hover,.site-footer a:hover,.chan a:hover{color:var(--navy-2)}
footer h3,.site-footer h3{
  font-family:var(--font-tieu-de);font-size:.82rem;font-weight:700;
  color:var(--ink);margin:0 0 12px;
}

/* ==================================================================
   10. BONG BÓNG ZALO + THANH CỐ ĐỊNH ĐÁY MÀN HÌNH
   ================================================================== */
.floating-zalo,.zalo-noi{
  position:fixed;right:20px;bottom:22px;z-index:70;
  width:56px;height:56px;border-radius:50%;
  background:var(--zalo);color:#fff;display:grid;place-items:center;
  box-shadow:0 10px 26px -10px rgba(0,104,255,.8);
  transition:background .2s,transform .2s;
}
.floating-zalo:hover,.zalo-noi:hover{background:var(--zalo-dam);transform:translateY(-2px);text-decoration:none}
.floating-zalo svg{width:26px;height:26px}
/* Trang danh mục dùng nút chữ — nén về đúng bong bóng tròn 56px, giữ nguyên
   chữ bên trong cho trình đọc màn hình. */
.zalo-noi{font-size:0;padding:0;overflow:hidden}
.zalo-noi::before{
  content:"";width:26px;height:26px;background:currentColor;
  -webkit-mask:var(--ic-zalo) center/contain no-repeat;mask:var(--ic-zalo) center/contain no-repeat;
}

.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  grid-template-columns:.8fr 1.2fr;background:var(--surface);
  border-top:1px solid var(--line);
}
.sticky-cta-btn{
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding:14px;font-weight:700;font-size:.92rem;min-height:52px;
}
.sticky-cta-btn svg{width:16px;height:16px;flex:none}
.sticky-cta-btn.call{color:var(--navy-2)}
.sticky-cta-btn.zalo{
  background:var(--zalo);color:#fff;margin:7px;border-radius:var(--r-sm);
  width:auto;min-height:auto;padding:12px;
}
.sticky-cta-btn.zalo::before{display:none}

/* ==================================================================
   11. HỘP THOẠI (album ảnh, form nhờ tìm giúp)
   ================================================================== */
.modal{
  position:fixed;inset:0;z-index:90;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(16,24,38,.62);
}
.modal.open{display:flex}
.modal-panel{
  background:var(--surface);border-radius:var(--r);
  width:min(900px,100%);max-height:88vh;overflow:auto;box-shadow:var(--sh);
}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 20px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:var(--surface);z-index:2;
}
.modal-head h2,.modal-head strong{font-family:var(--font-tieu-de);font-size:1.05rem;font-weight:800}
.modal-head .close{
  background:none;border:0;font-size:1.6rem;line-height:1;color:var(--gray);
  width:38px;height:38px;border-radius:50%;flex:none;
}
.modal-head .close:hover{background:var(--bg);color:var(--ink)}
.gallery,.modal .gallery{padding:16px 20px}
.modal img,.modal video{width:100%;border-radius:var(--r-sm);margin-bottom:12px;display:block}

.lead-form{padding:18px 20px 22px}
.lead-intro{font-size:.88rem;color:var(--gray);margin:0 0 16px}
.lead-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lead-field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.lead-field label{font-size:.8rem;color:var(--gray)}
.lead-field input,.lead-field select,.lead-field textarea{
  border:1px solid var(--line);border-radius:var(--r-sm);
  padding:11px 13px;font-size:.9rem;background:var(--surface);width:100%;
}
.lead-field input:focus,.lead-field select:focus,.lead-field textarea:focus{
  border-color:var(--navy-2);outline:none;
}
.lead-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lead-submit{
  width:100%;margin-top:6px;background:var(--navy-2);color:#fff;border:0;
  border-radius:var(--r-sm);padding:14px;font-weight:700;min-height:48px;
}
.lead-submit:hover{background:var(--navy)}
.lead-submit:disabled{background:var(--gray-lt);cursor:default}
.lead-error{color:#C2410C;font-size:.85rem;margin-top:10px}
.lead-success{
  background:var(--green-lt);color:var(--green);border-radius:var(--r-sm);
  padding:16px;font-size:.9rem;text-align:center;
}

/* ==================================================================
   12. TRANG KÝ GỬI /gui-thue/  — chỉ áp lớp trình bày, nội dung giữ nguyên
   ================================================================== */
.hero-gui{padding:56px 0}
.hero-gui .nhan-tin{
  display:inline-flex;align-items:center;gap:8px;font-size:.84rem;font-weight:600;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.28);
  border-radius:99px;padding:6px 14px;margin-bottom:16px;
}
.hero-gui .nhan-tin i{width:8px;height:8px;border-radius:50%;background:#4ADE80}
.hero-gui .phu{color:rgba(255,255,255,.82);margin:0 0 24px;max-width:62ch}
.hero-gui .cta-hang{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:0}
.hero-gui .cta-phu{color:#fff;font-weight:600;font-size:.9rem;
  text-decoration:underline;text-underline-offset:3px}
.hero-gui .duoi-cta{display:block;font-size:.82rem;color:rgba(255,255,255,.7);margin-top:15px}

/* Khối nội dung và biểu mẫu của trang ký gửi */
/* Bọc trong .trang-ky-gui để các quy tắc form ở đây không tràn sang hộp
   "Nhờ tìm giúp" của trang chủ — hai biểu mẫu khác nhau hoàn toàn. */
.trang-ky-gui .loi-ich,.trang-ky-gui form{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 24px;margin:0 0 20px;
}
/* Hộp báo lỗi: ẩn cho tới khi JavaScript gắn class .hien */
.trang-ky-gui .bao{display:none;border-radius:var(--r);padding:14px 18px;margin:0 0 18px;
  background:#FEF2F2;border:1px solid #FCA5A5}
.trang-ky-gui .bao.hien{display:block}
.trang-ky-gui fieldset{border:0;padding:0;margin:0 0 20px}
.trang-ky-gui legend{
  font-family:var(--font-tieu-de);font-weight:800;font-size:1.05rem;
  color:var(--ink);padding:0;margin-bottom:12px;
}
.trang-ky-gui form .o{margin-bottom:14px}
.trang-ky-gui form label{display:block;font-size:.82rem;color:var(--gray);margin-bottom:5px;font-weight:500}
.sao{color:#C2410C}
.trang-ky-gui form input,.trang-ky-gui form select,.trang-ky-gui form textarea{
  border:1px solid var(--line);border-radius:var(--r-sm);
  padding:11px 13px;font-size:.9rem;background:var(--surface);width:100%;min-height:44px;
}
.trang-ky-gui form textarea{min-height:96px;resize:vertical}
.trang-ky-gui form input:focus,.trang-ky-gui form select:focus,.trang-ky-gui form textarea:focus{
  border-color:var(--navy-2);outline:none}
.trang-ky-gui form input[type=file]{display:none}
.tieu-de-gui{margin:26px 0 6px}
.doi{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.don-vi{display:flex;align-items:center;gap:9px}
.don-vi .nhan{flex:none;font-size:.85rem;color:var(--gray-lt);margin:0}
.chon-nhanh{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.chon-nhanh button{
  border:1px solid var(--line);background:var(--surface);border-radius:99px;
  padding:6px 13px;font-size:.82rem;font-weight:500;color:var(--gray);min-height:auto;width:auto;
}
.chon-nhanh button:hover{border-color:var(--navy-2);color:var(--navy-2)}

/* Chọn ảnh */
.nut-anh{
  display:flex;align-items:center;gap:13px;cursor:pointer;
  border:1.5px dashed #E8CACB;border-radius:var(--r-sm);
  padding:18px;color:var(--gray);font-size:.88rem;background:#FFF7F7;
}
.nut-anh:hover{border-color:var(--navy-2)}
.nut-anh b{display:block;font-family:var(--font-tieu-de);font-weight:700;color:var(--ink)}
.nut-anh small{display:block;font-size:.78rem;color:var(--gray-lt);margin-top:2px}
.bieu-tuong{
  width:42px;height:42px;flex:none;border-radius:11px;
  background:#FBEFEF;color:var(--navy-2);display:grid;place-items:center;
}
.luoi-anh{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:9px;margin-top:12px}
.o-anh{position:relative;border-radius:var(--r-sm);overflow:hidden;background:var(--bg)}
.o-anh img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block}
/* Nhãn định dạng ảnh nằm đè đáy ô xem trước — KHÔNG phải dải hero. */
.o-anh .bia{
  position:absolute;left:0;right:0;bottom:0;
  background:rgba(27,75,143,.92);color:#fff;font-size:.62rem;text-align:center;padding:2px;
}
.xoa{
  position:absolute;right:4px;top:4px;width:24px;height:24px;border:0;border-radius:50%;
  background:rgba(22,32,43,.72);color:#fff;font-size:.8rem;line-height:1;padding:0;min-height:auto;
}

/* Nút gửi + tiến trình + màn hình xong */
.gui,.cta{
  width:100%;background:var(--navy-2);color:#fff;border:0;border-radius:var(--r-sm);
  padding:15px;font-weight:700;font-size:1rem;min-height:52px;
}
.gui:hover,.cta:hover{background:var(--navy);color:#fff;text-decoration:none}
.gui:disabled{background:var(--gray-lt);cursor:not-allowed}
.hero-gui .cta{width:auto;padding:14px 28px;background:var(--zalo)}
.hero-gui .cta:hover{background:var(--zalo-dam)}
.tien-trinh{display:none;margin-top:14px}
.tien-trinh.hien{display:block}
.tien-trinh .thanh{height:6px;background:var(--line);border-radius:99px;overflow:hidden}
.tien-trinh .thanh i{display:block;height:100%;background:var(--green);width:0;transition:width .3s}
.tien-trinh p{font-size:.82rem;color:var(--gray-lt);margin:8px 0 0}
.xong{display:none;text-align:center;padding:34px 24px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.xong.hien{display:block}
.xong .dau{
  width:56px;height:56px;margin:0 auto 16px;border-radius:50%;
  background:var(--green-lt);color:var(--green);display:grid;place-items:center;
}
.xong .ma{
  font-family:var(--font-tieu-de);font-weight:800;font-size:1.3rem;
  color:var(--navy-2);margin:0 0 12px;
}
.loi{color:#C2410C;font-size:.85rem;margin-top:6px}
.dem-anh,.goi-y,.rieng-tu,.dan{font-size:.82rem;color:var(--gray-lt)}
.rieng-tu{background:var(--green-lt);color:var(--green);border-radius:var(--r-sm);padding:9px 12px;margin-top:8px}
.loi-ich{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}

/* ==================================================================
   12b. CÁC LỚP LẺ CỦA TỪNG BÀI VIẾT
   ================================================================== */
/* Tên thương hiệu ở đầu trang: bản dài cho màn rộng, bản ngắn cho điện thoại */
.ten-day{display:block}
.ten-ngan{display:none}
@media (max-width:640px){
  .ten-day{display:none}
  .ten-ngan{display:block;font-family:var(--font-tieu-de);font-weight:800;font-size:1rem}
}

/* Bảng giá tính từ data.json */
.bang-trang-thai{font-size:.84rem;color:var(--gray-lt);margin:0 0 12px}
.bang-gia .pk{width:26%}
.khoang{
  font-family:var(--font-tieu-de);font-weight:700;color:var(--navy-2);white-space:nowrap;
}
.dan-phi{font-size:.86rem;color:var(--gray);
  background:#FFF7F7;border:1px solid #F2D9DA;border-radius:var(--r-sm);padding:13px 16px}
details.faq{border-bottom:1px solid var(--line)}
.nho-tim{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  background:linear-gradient(170deg,#FFF7F7,var(--surface));
  border:1px solid #F2D9DA;border-radius:var(--r);padding:22px 24px;margin:0 0 24px;
}
.nho-tim-chu strong{font-family:var(--font-tieu-de);font-size:1.05rem;font-weight:800;color:var(--navy)}
.nho-tim-chu{font-size:.88rem;color:var(--gray)}

/* Trang chuyển hướng bảng giá cũ */
.di-tiep{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--navy-2);color:#fff;border-radius:var(--r-sm);
  padding:13px 24px;font-weight:700;min-height:48px;margin-right:12px;
}
.di-tiep:hover{background:var(--navy);color:#fff}
.ve-chu{color:var(--gray);font-size:.88rem}
.ve-chu:hover{color:var(--navy-2)}

/* Bài cẩm nang / so sánh phân khu */
.articles-title{margin:34px 0 4px}
figure.single{margin:0 0 20px}
figure.single img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r);display:block}
figure figcaption{font-size:.8rem;color:var(--gray-lt);margin-top:7px;text-align:center}
.highlight{
  background:var(--green-lt);border-left:3px solid var(--green);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:14px 18px;margin:0 0 18px;font-size:.9rem;
}
.cc{font-size:.8rem;color:var(--gray-lt)}
.hero-inner{display:flex;flex-direction:column;gap:4px}
.tieu-de-luoi{margin:0 0 14px}
.xem-truoc{font-size:.82rem;color:var(--navy-2);font-weight:600;margin-top:6px}
.chip.current,.page-btn.current{background:var(--navy-2);border-color:var(--navy-2);color:#fff}
.faq-item{border-bottom:1px solid var(--line)}
.icon{flex:none}

/* Trang 404 */
/* Mã lỗi đứng như dòng nhãn nhỏ phía trên tiêu đề, đúng như trang cũ.
   Cần bám .hero vì .hero p (0,1,1) có độ ưu tiên cao hơn .ma-loi (0,1,0). */
.hero .ma-loi{
  font-family:var(--font-tieu-de);font-weight:700;
  font-size:.8rem;letter-spacing:.12em;color:var(--navy-2);
  margin:0 0 12px;line-height:1.4;
}
.hotline{font-weight:600;color:var(--navy-2)}

/* ==================================================================
   13. RESPONSIVE — 4 cột → 2 cột → 1 cột
   ================================================================== */
@media (max-width:1080px){
  .grid,.luoi{grid-template-columns:repeat(2,1fr)}
  .filters{grid-template-columns:repeat(2,1fr)}
  .filter-group{border-right:0;padding:6px 2px}
  .filter-group:nth-child(2){border-right:0}
  .search{order:3;flex-basis:100%;flex-grow:1}
  .topbar .shell{flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
  .chip-full{display:none}
  .chip-short{display:inline}
}

@media (max-width:860px){
  .topbar nav,.top nav{display:none}
  .hero{padding:44px 0 96px}
  .stat{padding-right:24px;margin-right:24px}
  .stat strong{font-size:1.7rem}
  .moi-chu-nha-trong,.lead-prompt{flex-direction:column;align-items:flex-start}
  .moi-chu-nha-nut,.lead-prompt-btn{width:100%}
  .lead-row{grid-template-columns:1fr}
  .bai,.muc-luc,.faq-block,.seo-block,.kham-pha,.sec,.pillar{padding:18px 16px}
}

@media (max-width:640px){
  body{font-size:15px}
  .topbar .shell,.top .khung{flex-wrap:wrap;padding-top:10px;padding-bottom:10px;gap:10px}
  .brand small,.hieu small{display:none}
  /* Bảng nhiều cột chưa có khung cuộn riêng: cho cuộn ngang trong lòng nó
     thay vì đẩy tràn cả trang. KHÔNG áp cho .bang-gia — bảng đó đã nằm sẵn
     trong .bang-cuon, thêm lần nữa sẽ làm hỏng bố cục ô. */
  .price-table,.bang{display:block;overflow-x:auto;white-space:nowrap}
  .shell,.khung,.wrap{padding:0 14px}
  .grid,.luoi{grid-template-columns:1fr}
  .hero{padding:36px 0 32px}
  .stats{gap:0}
  .actions .pill-btn span{display:none}
  .actions .pill-btn{padding:10px 13px}

  /* Bộ lọc thu về bảng trượt từ đáy màn hình */
  .filters{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:80;
    margin:0;border-radius:var(--r) var(--r) 0 0;
    display:none;grid-template-columns:1fr;
    max-height:82vh;overflow-y:auto;padding:16px 16px calc(16px + env(safe-area-inset-bottom));
  }
  .filters.open{display:block}
  .filters-sheet-head{display:flex}
  .filter-group{border-right:0;padding:10px 0}
  .chips{flex-wrap:wrap;overflow:visible}
  .filters-foot-bar{padding:12px 0 0;position:sticky;bottom:0;background:var(--surface)}
  .filters-sheet-foot{flex:1;justify-content:center}
  .filters-backdrop{
    display:none;position:fixed;inset:0;z-index:75;background:rgba(16,24,38,.5);
  }
  .filters-backdrop.open{display:block}
  .mobile-filter-toggle{
    display:flex;align-items:center;gap:12px;width:100%;text-align:left;
    background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
    box-shadow:var(--sh);padding:14px 16px;margin:-20px 0 20px;position:relative;z-index:20;
  }
  .mft-icon{
    width:38px;height:38px;flex:none;border-radius:10px;
    background:#FBEFEF;color:var(--navy-2);display:grid;place-items:center;
  }
  .mft-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
  .mft-text b{font-family:var(--font-tieu-de);font-size:.92rem;font-weight:700}
  .mft-text small{font-size:.76rem;color:var(--gray-lt);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mft-arrow{flex:none;color:var(--gray-lt)}

  /* Bong bóng tròn nhường chỗ cho thanh Gọi / Nhắn Zalo cố định đáy */
  .floating-zalo,.zalo-noi{display:none}
  .sticky-cta{display:grid}
  footer,.site-footer,.chan,.foot-wrap{padding-bottom:90px}
  .muc-luc-luoi{gap:18px}
  .modal{padding:0}
  .modal-panel{max-height:100vh;border-radius:0;width:100%}
}

@media (max-width:380px){
  .price,.gia{font-size:1.2rem}
  .stat strong{font-size:1.45rem}
}

/* ==================================================================
   14. TÔN TRỌNG prefers-reduced-motion
   ================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  html{scroll-behavior:auto}
  .card:hover,.the:hover,.kham-pha-luoi a:hover,.post-card:hover{transform:none}
  .card:hover .media img,.the:hover .the-anh img{transform:none}
}

/* ==================================================================
   15. IN GIẤY — bỏ phần nổi, giữ nội dung
   ================================================================== */
@media print{
  .topbar,.top,.floating-zalo,.zalo-noi,.sticky-cta,.filters,
  .mobile-filter-toggle,.new-today-bar,.pagination{display:none!important}
  body{background:#fff}
  .card,.the{break-inside:avoid}
}

/* ==================================================================
   16. GIAO DIỆN APP TRÊN ĐIỆN THOẠI  (bổ sung 01/08/2026)
   ------------------------------------------------------------------
   Toàn bộ khối này CHỈ chạy ở màn hình ≤640px và chỉ GHI ĐÈ, không xoá
   luật cũ — gỡ nguyên khối này là site quay lại y như trước.

   Bốn thay đổi:
     16.1  Dải chip lọc nhanh dính đầu màn hình (trước bị giấu sau 1 nút)
     16.2  Ba ô truy cập nhanh: Phân khu / Khoảng giá / Nội thất
     16.3  Thẻ căn nằm NGANG — ảnh trái, thông tin phải (~2 căn/màn hình)
     16.4  Thanh tab dưới đáy — thay cho thanh Gọi/Zalo cũ

   Nội dung thẻ căn GIỮ NGUYÊN 100% như bản cũ: huy hiệu tình trạng,
   huy hiệu nội thất, số ảnh, loại · m², giá, phân khu · tòa, nút Zalo,
   mã căn. Không thêm dữ liệu nào chưa có trong Sheet.
   ================================================================== */

/* Mặc định (máy tính): các thành phần mới đều TẮT — bố cục cũ giữ nguyên */
.quick-bar,.quick-tiles,.tabbar,.tabbar-sheet,.tabbar-backdrop,.card-chips{display:none}

@media (max-width:640px){

  /* ---- 16.0 Khung chung ------------------------------------------ */
  /* Chừa chỗ cho thanh tab, cộng thêm vùng an toàn dưới của iPhone */
  body{padding-bottom:calc(60px + env(safe-area-inset-bottom))}

  /* Hero đang chiếm hơn nửa màn hình đầu tiên, đẩy thẻ căn xuống tận màn
     hình thứ hai. Thu chữ lại và cắt đoạn mô tả còn 2 dòng — cắt bằng CSS
     nên Google vẫn đọc đủ nội dung, chỉ người dùng thấy gọn hơn. */
  .hero{padding:22px 0 20px}
  .hero h1{font-size:1.32rem;line-height:1.22}
  .hero p{
    font-size:.85rem;margin-top:8px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .stats{margin-top:16px}
  .stat strong{font-size:1.5rem}
  footer,.site-footer,.chan,.foot-wrap{padding-bottom:24px}

  /* Đầu trang thôi dính: nhường trọn chiều cao màn hình cho danh sách căn.
     Dải chip bên dưới mới là thứ dính lại — vì đó mới là thứ khách dùng liên tục. */
  .topbar,.top{position:static}

  /* ---- 16.1 Dải chip lọc nhanh ------------------------------------ */
  .quick-bar{
    display:block;position:sticky;top:0;z-index:65;
    background:var(--surface);border-bottom:1px solid var(--line);
    box-shadow:0 2px 10px -8px rgba(22,32,43,.5);
  }
  .quick-bar-in{
    display:flex;align-items:center;gap:8px;
    padding-top:9px;padding-bottom:9px;
  }
  .chips-quick{
    flex:1;min-width:0;flex-wrap:nowrap;overflow-x:auto;gap:7px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
  }
  .chips-quick::-webkit-scrollbar{display:none}
  .chips-quick .chip{scroll-snap-align:start;padding:7px 14px;font-size:.84rem}
  /* Dùng nhãn RÚT GỌN ("2 PN+" thay vì "2 phòng ngủ +"): nhãn dài chỉ nhét
     được 2 chip trên một màn hình, nhãn ngắn hiện được 5 chip. */
  .chips-quick .chip-full{display:none}
  .chips-quick .chip-short{display:inline}
  .chips-quick .chip small{opacity:.6;margin-left:3px;font-size:.72rem}
  .chips-quick .chip[disabled]{opacity:.42}

  .qb-btn{
    flex:none;width:38px;height:38px;border-radius:10px;
    border:1px solid var(--line);background:var(--surface);color:var(--gray);
    display:grid;place-items:center;
  }
  .qb-btn svg{width:18px;height:18px}
  .qb-filter{background:var(--navy-2);border-color:var(--navy-2);color:#fff;position:relative}
  /* Chấm cam báo "đang có bộ lọc bật" — khách không bị quên mình đang lọc gì */
  .qb-filter.dang-loc::after{
    content:"";position:absolute;top:-3px;right:-3px;
    width:10px;height:10px;border-radius:50%;
    background:#F97316;border:2px solid var(--surface);
  }

  /* ---- 16.2 Ba ô truy cập nhanh ----------------------------------- */
  /* Thay cho nút băng "Ấn vào đây để tìm căn hộ" — cùng chức năng nhưng
     chia thành 3 lối vào cụ thể, khách biết trước mình sắp chọn gì. */
  .mobile-filter-toggle{display:none!important}
  .quick-tiles{
    display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:14px 0 16px;
  }
  .qt{
    display:flex;flex-direction:column;align-items:flex-start;gap:6px;
    background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
    padding:12px 11px;text-align:left;box-shadow:var(--sh);
  }
  .qt-ic{
    width:30px;height:30px;border-radius:9px;flex:none;
    background:#FBEFEF;color:var(--navy-2);display:grid;place-items:center;
  }
  .qt-ic svg{width:16px;height:16px}
  .qt b{font-family:var(--font-tieu-de);font-size:.83rem;font-weight:700;color:var(--ink);line-height:1.25}
  .qt span{font-size:.7rem;color:var(--gray-lt);line-height:1.3}

  /* ---- 16.3 Thẻ căn nằm ngang ------------------------------------- */
  /* Thứ tự đọc: VỊ TRÍ trước (thứ khách quét mắt đầu tiên), rồi loại căn +
     diện tích, rồi chip nội thất kèm mã căn, rồi GIÁ, cuối cùng là nút Zalo.
     Ảnh chỉ giữ ĐÚNG HAI huy hiệu — tình trạng và số ảnh; nhãn nội thất
     hạ xuống thành chip trong phần chữ, vì khung ảnh chỉ rộng 40% mà chồng
     ba huy hiệu lên thì che gần hết ảnh. */
  .grid,.luoi{gap:12px}
  .card,.the{flex-direction:row;align-items:stretch}

  /* CHIỀU CAO THẺ LÀ CỐ ĐỊNH — ảnh phải giãn theo thẻ, không được để ảnh
     quyết định chiều cao thẻ. Ảnh lấy từ Drive tỉ lệ không đều (cái dọc,
     cái ngang), thả tự do là mỗi thẻ một chiều cao và sinh ra mảng trắng
     bên phần chữ. Đây đúng là điều dòng ghi chú đầu file đã cảnh báo. */
  .card,.the{height:190px}
  .media,.the-anh{
    width:46%;flex:none;aspect-ratio:auto;align-self:stretch;
    height:100%;min-height:0;border-radius:0;
  }
  /* Có chiều cao cha xác định rồi thì height:100% mới phân giải được;
     thiếu dòng này ảnh vẫn rơi về kích thước gốc. */
  .media img,.the-anh img{height:100%;width:100%;object-fit:cover}
  .card .body,.the .than{padding:10px 12px;gap:7px;min-width:0;justify-content:center}

  /* Bản danh mục có sẵn luật order riêng (.the .ten, .the .gia…) nên các luật
     dưới đây phải viết kèm .card/.the mới đủ sức ghi đè, không được viết trần. */
  .card .tower,.the .vi-tri{order:1;font-size:.7rem;color:var(--gray-lt)}
  .card .body h3,.the .ten{order:2;font-size:.82rem;line-height:1.3}
  .card .card-chips,.the .card-chips{
    order:3;display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0;
  }
  .card .price,.the .gia{order:4;font-size:1.06rem}
  .price small,.gia small{font-size:.72rem}
  .card .card-foot,.the .zalo{order:5;margin-top:0}
  /* Mã căn đã nằm trong hàng chip nên dòng riêng bên dưới là thừa */
  .card .ma-can,.the .ma-can{display:none}

  .cc-nt{
    background:var(--green-lt);color:var(--green);
    font-size:.66rem;font-weight:600;border-radius:5px;padding:2px 7px;
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  /* Căn nguyên bản / đồ cơ bản dùng màu trung tính — không tô xanh cho thứ
     không phải full nội thất, tránh hứa quá thực tế. */
  .cc-nt.thuong{background:var(--bg);color:var(--gray)}
  .cc-ma{font-size:.66rem;color:var(--gray-lt);white-space:nowrap}

  .ask,.zalo{padding:0 8px;min-height:30px;height:30px;font-size:.75rem;border-radius:8px}
  .card-foot{padding-top:0;gap:6px}

  /* Ảnh chỉ còn hai huy hiệu, thu nhỏ cho vừa khung hẹp */
  .badge,.tinh-trang{left:7px;top:7px;font-size:.63rem;padding:3px 7px}
  .badge-nt{display:none}
  .pcount,.dbc-huy-hieu{right:7px;top:7px;font-size:.63rem;padding:3px 7px;gap:4px}
  .pcount::before,.dbc-huy-hieu::before{width:10px;height:10px}
  .media.empty{font-size:.7rem;padding:0 8px;text-align:center}
  .media.empty svg{width:26px;height:26px}
  /* Ảnh không phóng to khi chạm — trên điện thoại hiệu ứng này chỉ gây giật */
  .card:hover,.the:hover{transform:none}
  .card:hover .media img,.the:hover .the-anh img{transform:none}

  /* ---- 16.4 Thanh tab dưới đáy ------------------------------------ */
  /* Thay hẳn thanh Gọi/Nhắn Zalo cũ. Nút Zalo vẫn còn trên TỪNG thẻ căn
     và trong tab Menu, nên không mất đường liên hệ nào. */
  .sticky-cta{display:none!important}
  .floating-zalo,.zalo-noi{display:none}

  .tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:var(--surface);border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -2px 14px -10px rgba(22,32,43,.6);
  }
  .tabbar a,.tabbar button{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;padding:8px 2px 7px;min-height:56px;
    background:none;border:0;color:var(--gray-lt);font-size:.68rem;font-weight:500;
    text-decoration:none;
  }
  .tabbar svg{width:21px;height:21px}
  .tabbar .dang-o-day{color:var(--navy-2);font-weight:700}

  /* Bảng Menu trượt lên từ đáy */
  .tabbar-backdrop{display:none;position:fixed;inset:0;z-index:85;background:rgba(16,24,38,.5)}
  .tabbar-backdrop.open{display:block}
  .tabbar-sheet{
    display:none;position:fixed;left:0;right:0;bottom:0;z-index:88;
    background:var(--surface);border-radius:var(--r) var(--r) 0 0;
    max-height:80vh;overflow-y:auto;
    padding:6px 16px calc(18px + env(safe-area-inset-bottom));
  }
  .tabbar-sheet.open{display:block}
  .tbs-head{
    display:flex;align-items:center;justify-content:space-between;
    position:sticky;top:0;background:var(--surface);
    padding:14px 0 12px;border-bottom:1px solid var(--line);margin-bottom:8px;
  }
  .tbs-head strong{font-family:var(--font-tieu-de);font-size:1rem;font-weight:800}
  .tbs-head button{background:none;border:0;font-size:1.5rem;line-height:1;color:var(--gray-lt);padding:0 4px}
  .tbs-nhom{font-size:.72rem;color:var(--gray-lt);margin:14px 0 6px;font-weight:600;letter-spacing:.03em}
  .tabbar-sheet a{
    display:flex;align-items:center;gap:10px;
    padding:12px 2px;border-bottom:1px solid var(--line);
    color:var(--ink);font-size:.9rem;text-decoration:none;
  }
  .tabbar-sheet a:last-child{border-bottom:0}
  .tbs-zalo{color:var(--zalo)!important;font-weight:600}
}

/* Màn hình rất hẹp: ảnh nhường thêm chỗ cho chữ, chữ không bị gãy dòng xấu */
@media (max-width:360px){
  .card,.the{height:182px}
  .media,.the-anh{width:45%}
  .cc-ma{display:none}
  .qt b{font-size:.78rem}
  .qt span{display:none}
}

/* In giấy: bỏ nốt các thành phần mới */
@media print{
  .quick-bar,.quick-tiles,.tabbar,.tabbar-sheet,.tabbar-backdrop{display:none!important}
}

/* ==================================================================
   17. GIAO DIỆN MÁY TÍNH V3  (bổ sung 02/08/2026)
   ------------------------------------------------------------------
   Khối này CHỈ ghi đè, không xoá luật cũ. Gỡ nguyên khối là bố cục máy
   tính quay lại y như trước ngày 02/08.

   Ba thay đổi:
     17.1  Đầu trang: menu chữ + nút Nhắn Zalo (thay 2 nút viên cũ)
     17.2  Hero gọn lại + dòng "đồng bộ 30 phút"
     17.3  Thanh lọc ngang dạng ô chọn, thay bảng chip 4 cột

   ĐIỆN THOẠI KHÔNG BỊ ĐỘNG: bảng chip cũ vẫn nguyên trong HTML, chỉ bị
   ẩn từ 1024px trở lên. Dưới 1024px mọi thứ chạy như cũ.
   ================================================================== */

/* ---- 17.1 Đầu trang ---------------------------------------------- */
.topbar nav.topnav{gap:22px;flex:none;flex-wrap:nowrap}
.topbar nav.topnav a{font-weight:500;white-space:nowrap}
/* Trên điện thoại thanh tab dưới đáy đã có đủ Trang chủ / Cẩm nang / Ký gửi /
   Nhắn Zalo — để thêm nút Zalo ở đầu trang chỉ làm chật chỗ tên thương hiệu. */
@media (max-width:640px){
  .topbar .actions{display:none}
}

/* ---- 17.2 Hero gọn ----------------------------------------------- */
.hero p.hero-dong-bo{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:16px;max-width:none;
  background:rgba(14,138,69,.20);border:1px solid rgba(255,255,255,.20);
  color:#fff;border-radius:99px;padding:7px 16px;
  font-size:.86rem;font-weight:500;
}
.hero p.hero-dong-bo .cham{
  width:8px;height:8px;border-radius:50%;flex:none;
  background:#3DDC84;box-shadow:0 0 0 4px rgba(61,220,132,.22);
}
/* Màn hình hẹp: hero đã rút gọn ở khối 16, thêm dòng này là thừa một hàng. */
@media (max-width:640px){
  .hero p.hero-dong-bo{display:none}
}

/* ---- 17.3 Thanh lọc ngang cho máy tính ---------------------------- */
/* Mặc định TẮT — dưới 1024px vẫn dùng bảng chip / bảng trượt như cũ. */
.loc-pc{display:none}

@media (min-width:1024px){
  /* Hero thu lại: bớt 18px trên và 32px dưới so với bản cũ, chữ tiêu đề
     nhỏ đi một bậc để thẻ căn đầu tiên lọt vào màn hình thứ nhất. */
  .hero{padding:46px 0 76px}
  .hero h1{font-size:clamp(2rem,3.3vw,2.65rem);max-width:21ch}
  .hero p{margin-top:12px;font-size:1rem;max-width:58ch}
  .stats{margin-top:26px}
  .stat strong{font-size:2rem}

  /* Bảng chip cũ ẩn đi nhưng VẪN nằm trong trang: thanh lọc mới đọc nhãn và
     số đếm từ chính các chip này, xoá chip đi là thanh lọc rỗng. */
  .filters{display:none}

  .loc-pc{
    position:relative;z-index:20;margin:-36px 0 26px;
    background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
    box-shadow:var(--sh);padding:9px;
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto auto;
    align-items:center;
  }
  .loc-pc-o{
    display:flex;flex-direction:column;gap:2px;justify-content:center;
    padding:7px 16px;border-right:1px solid var(--line);min-width:0;cursor:pointer;
  }
  .loc-pc-o:nth-of-type(4){border-right:0}
  .loc-pc-o>span{font-size:.72rem;color:var(--gray-lt);line-height:1.3}
  .loc-pc-o select{
    -webkit-appearance:none;appearance:none;
    border:0;background:transparent;outline:none;width:100%;cursor:pointer;
    font-family:var(--font-chu);font-size:.95rem;font-weight:600;color:var(--ink);
    padding:1px 22px 1px 0;
    text-overflow:ellipsis;white-space:nowrap;overflow:hidden;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A96A3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat:no-repeat;background-position:right 1px center;background-size:14px;
  }
  /* Ô đang lọc đổi sang màu navy để khách nhìn một cái là biết đang lọc gì */
  .loc-pc-o select.dang-loc{color:var(--navy-2)}
  .loc-pc-o:focus-within{border-radius:var(--r-sm);box-shadow:inset 0 0 0 2px rgba(27,75,143,.35)}
  .loc-pc-o select option[disabled]{color:var(--gray-lt)}

  .loc-pc-tim{
    margin-left:8px;background:var(--navy-2);color:#fff;border:0;
    border-radius:var(--r-sm);padding:13px 26px;
    font-family:var(--font-chu);font-weight:600;font-size:.92rem;white-space:nowrap;
    display:inline-flex;align-items:center;gap:8px;transition:background .2s;
  }
  .loc-pc-tim::before{
    content:"";width:16px;height:16px;background:currentColor;
    -webkit-mask:var(--ic-tim) center/contain no-repeat;mask:var(--ic-tim) center/contain no-repeat;
  }
  .loc-pc-tim:hover{background:var(--navy)}
  .loc-pc-xoa{
    background:none;border:0;color:var(--gray);font-size:.86rem;
    padding:0 14px;white-space:nowrap;cursor:pointer;
  }
  .loc-pc-xoa:hover{color:var(--navy-2)}

  /* Nút mở bảng lọc và 3 ô truy cập nhanh là đồ của điện thoại — chặn hẳn
     ở màn hình rộng để không có chuyện hiện nhầm khi cửa sổ thu nhỏ rồi phóng to. */
  .mobile-filter-toggle,.filters-backdrop{display:none}
}


/* ==================================================================
   18. LOGO MẠNG XÃ HỘI CUỐI TRANG  (bổ sung 02/08/2026)
   ------------------------------------------------------------------
   Bốn nút tròn, rê chuột hiện tên kênh. Danh sách link ở đây BẮT BUỘC
   trùng với "sameAs" trong schema RealEstateAgent (đầu index.html) —
   Google đối chiếu hai nơi để xác nhận website và các kênh cùng một chủ.

   Chữ trong tooltip là chữ THẬT nằm trong trang (chỉ mờ đi bằng opacity,
   không dùng display:none) nên Google và trình đọc màn hình vẫn đọc được
   "Theo dõi trên Facebook" — ẩn hẳn chữ là mất luôn nhãn của liên kết.

   Icon vẽ bằng mask nên HTML mỗi trang chỉ tốn 4 dòng, không phải nhét
   4 khối SVG vào 38 file.
   ================================================================== */
.mxh-hang{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:14px;
  border-top:1px solid var(--line);margin-top:18px;padding-top:16px;
}
.mxh-nhan{font-size:13.5px;color:var(--gray-lt)}
.mxh-nut{display:flex;flex-wrap:wrap;gap:10px}

.mxh{
  position:relative;width:40px;height:40px;flex:none;
  display:inline-grid;place-items:center;
  border:1px solid var(--line);border-radius:50%;
  background:var(--surface);color:var(--gray);
  transition:background .18s,border-color .18s,color .18s,transform .18s;
}
.mxh::before{
  content:"";width:18px;height:18px;background:currentColor;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.mxh:hover{transform:translateY(-2px);color:#fff}
.mxh-facebook:hover{background:#1877F2;border-color:#1877F2}
.mxh-tiktok:hover{background:#111;border-color:#111}
.mxh-youtube:hover{background:#FF0000;border-color:#FF0000}
.mxh-instagram:hover{
  background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF);border-color:transparent;
}

/* Bong bóng tên kênh nổi lên khi rê chuột hoặc khi chuyển tab bằng bàn phím */
.mxh-chu{
  position:absolute;bottom:calc(100% + 11px);left:50%;
  transform:translateX(-50%) translateY(5px);
  background:var(--ink);color:#fff;
  font-size:12.5px;font-weight:500;white-space:nowrap;line-height:1;
  padding:9px 13px;border-radius:9px;
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;
}
.mxh-chu::after{
  content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:var(--ink);
}
.mxh:hover .mxh-chu,.mxh:focus-visible .mxh-chu{
  opacity:1;transform:translateX(-50%) translateY(0);
}

.mxh-tiktok::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M16.6 2h-3.1v14.1a2.6 2.6 0 1 1-2.2-2.6v-3.1a5.7 5.7 0 1 0 5.3 5.7V8.7a7.3 7.3 0 0 0 4.3 1.4V7a4.4 4.4 0 0 1-4.3-5z'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M16.6 2h-3.1v14.1a2.6 2.6 0 1 1-2.2-2.6v-3.1a5.7 5.7 0 1 0 5.3 5.7V8.7a7.3 7.3 0 0 0 4.3 1.4V7a4.4 4.4 0 0 1-4.3-5z'/></svg>");
}
.mxh-instagram::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><rect x='3' y='3' width='18' height='18' rx='5'/><circle cx='12' cy='12' r='4'/><circle cx='17.2' cy='6.8' r='1.3' fill='black' stroke='none'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><rect x='3' y='3' width='18' height='18' rx='5'/><circle cx='12' cy='12' r='4'/><circle cx='17.2' cy='6.8' r='1.3' fill='black' stroke='none'/></svg>");
}
.mxh-facebook::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M13.5 21.9V13h3l.45-3.5H13.5V7.3c0-1 .28-1.7 1.72-1.7H17V2.5c-.32-.04-1.4-.14-2.66-.14-2.63 0-4.43 1.6-4.43 4.56V9.5H7v3.5h2.9v8.9z'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M13.5 21.9V13h3l.45-3.5H13.5V7.3c0-1 .28-1.7 1.72-1.7H17V2.5c-.32-.04-1.4-.14-2.66-.14-2.63 0-4.43 1.6-4.43 4.56V9.5H7v3.5h2.9v8.9z'/></svg>");
}
.mxh-youtube::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' fill-rule='evenodd'><path d='M22.6 7.2a2.8 2.8 0 0 0-1.95-1.98C18.9 4.75 12 4.75 12 4.75s-6.9 0-8.65.47A2.8 2.8 0 0 0 1.4 7.2C.94 8.95.94 12 .94 12s0 3.05.46 4.8a2.8 2.8 0 0 0 1.95 1.98c1.75.47 8.65.47 8.65.47s6.9 0 8.65-.47a2.8 2.8 0 0 0 1.95-1.98c.46-1.75.46-4.8.46-4.8s0-3.05-.46-4.8zM9.75 15.5v-7l6 3.5z'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' fill-rule='evenodd'><path d='M22.6 7.2a2.8 2.8 0 0 0-1.95-1.98C18.9 4.75 12 4.75 12 4.75s-6.9 0-8.65.47A2.8 2.8 0 0 0 1.4 7.2C.94 8.95.94 12 .94 12s0 3.05.46 4.8a2.8 2.8 0 0 0 1.95 1.98c1.75.47 8.65.47 8.65.47s6.9 0 8.65-.47a2.8 2.8 0 0 0 1.95-1.98c.46-1.75.46-4.8.46-4.8s0-3.05-.46-4.8zM9.75 15.5v-7l6 3.5z'/></svg>");
}

/* Điện thoại không có chuột nên tooltip vô dụng — dồn hàng nút vào giữa,
   nút to hơn một chút cho dễ bấm bằng ngón tay. */
@media (max-width:640px){
  .mxh-hang{justify-content:center;text-align:center}
  .mxh-nut{justify-content:center;width:100%}
  .mxh{width:44px;height:44px}
  .mxh-chu{display:none}
}

/* ==================================================================
   20. HERO V4 — ảnh sáng, lớp phủ chỉ tối bên trái, card lọc đè đáy hero
   (dựng lại 02/08/2026)
   ------------------------------------------------------------------
   Ba việc khối này làm, gỡ nguyên khối là quay về bố cục trước 02/08:

     20.1  Hero cao cố định + ảnh <img> phủ kín thay cho background-image.
           Dùng <img> vì chỉ thẻ ảnh thật mới nhận fetchpriority và
           width/height, nhờ vậy LCP được ưu tiên và không nhảy layout.
     20.2  Lớp phủ đổi từ tối đều sang gradient ngang: đậm bên trái đỡ
           chữ, gần như trong suốt bên phải để nhìn rõ hồ, bãi cát,
           hàng dừa. Dưới 640px đổi sang gradient dọc vì màn hẹp thì chữ
           chạy hết bề ngang, tối một bên không đủ.
     20.3  Bộ lọc bọc trong .filter-card, kéo âm lên đè đáy hero.

   Bề ngang khung vẫn dùng .shell (--maxw:1200px) chứ không đổi sang
   1240px như bản vẽ: .shell là khung dùng chung của mọi trang, sửa nó
   là lệch cả 37 trang còn lại. Hero, card lọc, hàng tin cậy và lưới căn
   nhờ vậy thẳng hàng nhau tuyệt đối.
   ================================================================== */

/* ---- 20.1 Khung hero + ảnh ---------------------------------------- */
.hero.hero-v4{
  padding:0;
  display:flex;align-items:center;
  height:clamp(520px,58vh,620px);
  /* Bỏ khoảng cách dưới của thẻ section: card lọc phải đè lên đáy hero đúng
     56px, còn 34px trống ở đây thì nó chỉ đè được 22px. */
  margin-bottom:0;
}
.hero-v4__anh{position:absolute;inset:0;z-index:0;display:block}
.hero-v4__anh img{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:center 55%;
}

/* ---- 20.2 Lớp phủ ------------------------------------------------- */
.hero-v4__phu{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  /* Bản vẽ ghi .72 ở mốc 30% và .38 ở mốc 55%. Đo thật trên ảnh này thì điểm
     nền sáng nhất nằm ngay dưới nét chữ H1 chỉ đạt 3,65:1 — dưới ngưỡng 4,5:1
     của mục nghiệm thu. Nâng hai mốc giữa lên .78 và .50 là đủ. Hai mốc bên
     phải giữ nguyên (≤ .08) nên phần ảnh sáng vẫn không bị tối đi. */
  background:linear-gradient(90deg,
    rgba(11,31,59,.88) 0%,
    rgba(11,31,59,.78) 30%,
    rgba(11,31,59,.50) 55%,
    rgba(11,31,59,.08) 78%,
    rgba(11,31,59,0)  100%);
}

/* ---- Khối chữ ----------------------------------------------------- */
/* Đáy hero bị card lọc đè mất 56px, nên đẩy khối chữ lên chừng ấy để nhìn vẫn
   cân giữa phần còn nhìn thấy, và hàng số liệu không dính sát mép card. */
.hero-v4__trong{position:relative;z-index:2;padding-bottom:48px}
.hero-v4__chu{max-width:620px}
.hero-v4 h1{
  font-size:clamp(30px,3.4vw,46px);line-height:1.14;font-weight:800;
  letter-spacing:-.5px;color:#fff;max-width:none;
  text-shadow:0 2px 20px rgba(0,0,0,.35);
}
.hero-v4 p{
  margin-top:14px;font-size:16px;line-height:1.65;font-weight:300;
  color:rgba(255,255,255,.86);max-width:520px;
}
.hero-v4 p.hero-dong-bo{
  margin-top:18px;padding:9px 18px;font-size:14px;font-weight:500;color:#fff;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  border-radius:999px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.hero-v4 p.hero-dong-bo .cham{
  background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.22);
  animation:cham-tho 2.4s ease-in-out infinite;
}
@keyframes cham-tho{
  0%,100%{box-shadow:0 0 0 3px rgba(34,197,94,.28)}
  50%    {box-shadow:0 0 0 7px rgba(34,197,94,.06)}
}
/* Máy nào bật "giảm chuyển động" thì chấm đứng yên (khối 14 chỉ tắt được
   những animation khai báo trước nó). */
@media (prefers-reduced-motion:reduce){
  .hero-v4 p.hero-dong-bo .cham{animation:none}
}

.hero-v4 .stats{margin-top:26px}
.hero-v4 .stat{
  padding:0 26px;margin:0;border-right:0;border-left:1px solid rgba(255,255,255,.2);
}
.hero-v4 .stat:first-child{padding-left:0;border-left:0}
.hero-v4 .stat strong{font-size:34px;text-shadow:0 2px 14px rgba(0,0,0,.3)}
.hero-v4 .stat span{font-size:13px;color:rgba(255,255,255,.72)}

/* ---- 20.3 Card bộ lọc đè đáy hero --------------------------------- */
.filter-card{
  position:relative;z-index:5;margin-top:-56px;
  background:#fff;border:1px solid rgba(15,32,60,.06);border-radius:18px;
  box-shadow:0 18px 44px rgba(15,32,60,.14);
  padding:22px 24px;
}
/* Bên trong card, thanh lọc bỏ hết viền/bóng/kéo âm của bản cũ — card đã lo
   phần vỏ. Khai báo ĐẦY ĐỦ ở đây chứ không dựa vào khối 17: luật của khối 17
   nằm trong @media (min-width:1024px), mà card này chạy ở mọi bề ngang. */
.filter-card .loc-pc{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto auto;
  gap:14px;align-items:end;
  margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;
}
.filter-card .loc-pc-o{
  display:flex;flex-direction:column;gap:5px;justify-content:flex-end;
  min-width:0;border-right:0;padding:0;cursor:pointer;
}
.filter-card .loc-pc-o>span{font-size:12.5px;line-height:1.3;color:var(--gray)}
.filter-card .loc-pc-o select{
  -webkit-appearance:none;appearance:none;outline:none;
  width:100%;height:48px;padding:0 34px 0 14px;cursor:pointer;
  border:1px solid var(--line);border-radius:12px;background-color:#FDF8F8;
  font-family:var(--font-chu);font-size:15px;font-weight:600;color:var(--ink);
  text-overflow:ellipsis;white-space:nowrap;overflow:hidden;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A96A3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;background-size:15px;
}
.filter-card .loc-pc-o select.dang-loc{color:var(--navy-2)}
.filter-card .loc-pc-o select option[disabled]{color:var(--gray-lt)}
.filter-card .loc-pc-o select:hover{border-color:#C6D2E2}
.filter-card .loc-pc-o:focus-within{box-shadow:none}
.filter-card .loc-pc-o select:focus-visible{
  border-color:#B02128;box-shadow:0 0 0 3px rgba(29,78,216,.18);
}
.filter-card .loc-pc-tim{
  margin:0;height:48px;padding:0 26px;border:0;border-radius:12px;
  background:#B02128;color:#fff;cursor:pointer;
  font-family:var(--font-chu);font-size:15px;font-weight:600;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:background .2s;
}
.filter-card .loc-pc-tim::before{
  content:"";width:16px;height:16px;background:currentColor;
  -webkit-mask:var(--ic-tim) center/contain no-repeat;mask:var(--ic-tim) center/contain no-repeat;
}
.filter-card .loc-pc-tim:hover{background:#7A171D}
.filter-card .loc-pc-xoa{
  height:48px;padding:0 14px;border:0;background:none;cursor:pointer;
  font-family:var(--font-chu);font-size:14px;color:var(--gray);white-space:nowrap;
}
.filter-card .loc-pc-xoa:hover{color:#B02128}

/* ---- Điện thoại (≤640px) ------------------------------------------ */
@media (max-width:640px){
  .hero.hero-v4{height:auto;min-height:480px;padding:40px 0 90px}
  .hero-v4__anh img{object-position:center 45%}
  /* Màn hẹp: chữ chạy hết bề ngang nên tối một bên không đủ, đổi sang đổ dọc. */
  .hero-v4__phu{
    background:linear-gradient(180deg,
      rgba(11,31,59,.70) 0%,
      rgba(11,31,59,.55) 45%,
      rgba(11,31,59,.80) 100%);
  }
  .hero-v4 h1{font-size:clamp(26px,7vw,32px)}
  .hero-v4 p{font-size:15px;margin-top:12px}
  /* Dòng "đồng bộ 30 phút" bị khối 17 ẩn ở màn hẹp; hero mới đã cao thoáng
     hơn nên cho hiện lại — đây chính là tín hiệu dữ liệu sống. */
  .hero-v4 p.hero-dong-bo{display:inline-flex;margin-top:16px;font-size:13px;padding:8px 15px}
  .hero-v4 .stats{margin-top:22px}
  .hero-v4 .stat{padding:0 16px}
  .hero-v4 .stat strong{font-size:26px}

  .filter-card{margin-top:-32px;padding:18px 16px;border-radius:16px}
  .filter-card .loc-pc{grid-template-columns:1fr;gap:12px}
  .filter-card .loc-pc-o select{height:50px}
  .filter-card .loc-pc-tim{width:100%;height:50px}
  .filter-card .loc-pc-xoa{width:100%;height:44px}

}

/* ---- Bật thanh lọc ở mọi bề ngang --------------------------------- */
/* Khối 17 đặt .loc-pc{display:none} rồi chỉ bật lại từ 1024px trở lên. Nay thanh
   lọc nằm trong card và phải chạy ở cả điện thoại nên bật thẳng ở đây, đồng thời
   xoá lề âm cũ vì việc kéo lên đè hero đã do .filter-card lo.

   Bảng chip cũ KHÔNG bị đụng tới: từ 1024px trở lên nó vẫn ẩn như khối 17 quy
   định, dưới 1024px vẫn là bảng trượt mở bằng 3 ô truy cập nhanh. Quan trọng là
   nó VẪN nằm trong trang, vì thanh lọc này đọc nhãn và số đếm ngược từ chính
   các chip đó — xoá chip đi là 4 ô chọn rỗng. */
.loc-pc{display:grid}
@media (min-width:1024px){
  .loc-pc{margin:0}
}

/* ==================================================================
   21. BĂNG CHỮ CHẠY + ẨN CARD LỌC TRÊN ĐIỆN THOẠI  (02/08/2026)
   ------------------------------------------------------------------
   21.1  Băng "hôm nay thêm N căn": đổi từ dải xanh đứng yên sang băng
         cam chữ chạy. Chọn nền #FFF4E6 + chữ #EA580C — cam nhạt nên
         nổi hẳn khỏi dải xanh navy của header ngay phía trên mà không
         chói, và chữ cam đậm trên nền cam nhạt đạt 4,9:1.
   21.2  Card lọc 4 ô chọn trong hero: ẩn từ 640px trở xuống. Chỉ ẩn
         bằng display:none, KHÔNG xoá markup — script đồng bộ ô chọn
         với bảng chip vẫn chạy bình thường, và chỉ cần bỏ luật này là
         card hiện lại y như cũ. Điện thoại đã có sẵn dải chip dính đầu
         màn hình, 3 ô truy cập nhanh và bảng lọc trượt nên không mất
         đường lọc nào.
   ================================================================== */

/* ---- 21.1 Băng chữ chạy ------------------------------------------- */
.new-today-bar{
  background:#FFF4E6;color:#EA580C;
  padding:10px 0;                  /* bỏ đệm ngang: chữ phải chạy sát mép */
  overflow:hidden;                 /* cắt phần chữ ra ngoài khung */
  font-weight:600;
}
.new-today-bar.show{display:block}
/* Dải chữ: các đoạn xếp ngang, không xuống dòng, chạy từ 0 tới -50% bề
   ngang của chính nó. Số đoạn do script ở cuối index.html tính theo bề
   ngang màn hình và luôn là số chẵn, nên mốc -50% rơi đúng đầu một đoạn
   -> vòng lặp khép kín, không giật, không hở khoảng trống. */
.ntb-chay{
  display:inline-flex;flex-wrap:nowrap;white-space:nowrap;
  will-change:transform;
  animation:ntb-chay 18s linear infinite;
}
/* inline-block chứ KHÔNG phải inline-flex: để flex thì mỗi cụm chữ giữa hai
   thẻ con thành một ô riêng và bị gap đẩy ra, số căn nhìn như bị tách rời. */
.ntb-doan{
  display:inline-block;flex:none;
  padding-right:72px;              /* khoảng thở giữa hai lần lặp */
}
.ntb-doan .arrow{margin-left:9px;display:inline-block}
@keyframes ntb-chay{
  from{transform:translateX(0)}
  to  {transform:translateX(-50%)}
}
.new-today-bar strong{font-family:var(--font-tieu-de);font-weight:800;color:#C2410C}
/* Khối 3 cho mũi tên nhích sang phải khi rê chuột; băng giờ tự chạy rồi nên
   bỏ hiệu ứng đó đi, rê chuột là để đọc chứ không phải để nhấn nhá thêm. */
.new-today-bar:hover .arrow{transform:none}
/* Rê chuột thì dừng để khách đọc kịp và bấm được. */
.new-today-bar:hover .ntb-chay,
.new-today-bar:focus-visible .ntb-chay{animation-play-state:paused}
/* Máy bật "giảm chuyển động": đứng yên hẳn, chỉ đọc đoạn chữ thật.
   Phải nằm sau khối 14 mới ghi đè được animation khai báo ở trên. */
@media (prefers-reduced-motion:reduce){
  .ntb-chay{animation:none}
}

/* ---- 21.2 Ẩn card lọc trên điện thoại ------------------------------ */
@media (max-width:640px){
  .filter-card{display:none}
  /* Card bị ẩn thì 3 ô truy cập nhanh trở thành khối đầu của <main>, mà lề
     âm kéo lên đè hero cũng mất theo — trả lại khoảng thở dưới hero. */
  .quick-tiles{margin-top:18px}
}