/* ============================================================
   GIAO DIỆN TOÀ SOẠN — dùng chung cho trang chủ và trang Dự án.
   Tách khỏi index.html ngày 12/08/2026: có trang thứ hai rồi thì
   để CSS nằm trong một trang là cầm chắc hai trang lệch nhau.
   Sửa ở đây là cả cụm cùng đổi.
   ============================================================ */
/* ============================================================
   TRANG CHỦ DẠNG TOÀ SOẠN — bố cục khối theo mẫu trang tin BĐS
   (Tiêu điểm · Bài viết mới · Dành riêng cho bạn)
   Chỉ dùng biến màu của /assets/style.css, không đặt màu cứng.
   ============================================================ */

/* Nút sáng/tối: style.css chỉ nghe hệ điều hành. Hai khối dưới cho phép
   người đọc ép sáng hoặc ép tối, và lựa chọn đó phải THẮNG cả hai chiều. */
:root[data-theme="dark"]{
  --bg:#0e1216; --bg2:#141a20; --card:#171d24; --line:#262e38;
  --tx:#e9edf2; --tx2:#98a4b2;
  --acc:#4fb3ce; --acc-d:#7fcbe0; --acc-l:#0f2a33;
  --gold:#e0b45f; --gold-l:#2a2113; --gold-d:#f0d9a0;
  --sh:0 1px 3px rgba(0,0,0,.5); --sh-lg:0 12px 34px rgba(0,0,0,.55);
}
:root[data-theme="light"]{
  --bg:#f7f8fa; --bg2:#eef2f5; --card:#fff; --line:#e2e7ee;
  --tx:#111820; --tx2:#5b6673;
  --acc:#0d5c73; --acc-d:#08414f; --acc-l:#e6f1f4;
  --gold:#b8862f; --gold-d:#8a6420; --gold-l:#fbf3e2;
  --sh:0 1px 2px rgba(16,24,40,.05),0 4px 14px rgba(16,24,40,.07);
  --sh-lg:0 10px 30px rgba(16,24,40,.12);
}

/* BỘ CHỮ — ba họ, đúng cách reb.vn phân vai (đo bằng getComputedStyle 12/08/2026):
     --serif  Crimson Pro        tiêu đề bài + menu chính   (họ đo được w700 36px/40px)
     thân     Plus Jakarta Sans  đoạn văn, mô tả, meta
     --ui     Inter              nhãn, nút, chip, dòng phụ  (họ đo được w500 12px)
   Tự phục vụ trong /assets/font/ — không gọi fonts.googleapis.com khi khách mở trang.
   `lining-nums` là chốt bắt buộc, không phải trang trí: serif kiểu cũ hay mặc định
   chữ số oldstyle, số 0 tụt xuống dưới dòng và đọc thành chữ "o" — trên trang đầy
   con số (50 năm · 227 ha · 870 căn) đó là lỗi ĐỌC SAI NGHĨA. Đã bắt được đúng lỗi
   này khi thử Playfair Display: "50 năm" hiện ra thành "5o năm". */
.ts{--serif:'Crimson Pro',Georgia,serif;
    --ui:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif}
.ts body,body.ts{font-family:'Plus Jakarta Sans',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.ts h1,.ts h2,.ts h3,.ts h4{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
.ts .khung{max-width:1280px;margin:0 auto;padding:0 20px}

/* ---------- THANH TRÊN ---------- */
.ts-top{position:sticky;top:0;z-index:60;background:var(--card);border-bottom:1px solid var(--line)}
.ts-top .hang1{display:flex;align-items:center;gap:18px;min-height:64px}
.ts-logo{display:flex;align-items:center;gap:10px;color:var(--tx);text-decoration:none;flex:0 0 auto}
.ts-logo .m{width:38px;height:38px;border-radius:9px;background:var(--acc);color:#fff;display:grid;
  place-items:center;font-weight:800;letter-spacing:.5px;font-size:14px}
.ts-logo b{font:700 21px/1.05 var(--serif);letter-spacing:-.01em;display:block}
.ts-logo small{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx2)}
/* `overflow-x:auto` chứ KHÔNG `overflow:hidden` — đổi 17/08/2026 sau khi trả giá: bản
   cũ cắt cụt thanh mục trong im lặng ở dải 1025–1235px, mất hẳn mục cuối mà không có
   gì báo. Thêm một chuyên mục thứ sáu sau này thì nó cuộn được, chứ không biến mất. */
.ts-muc{display:flex;align-items:center;gap:0;flex:1 1 auto;min-width:0;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ts-muc::-webkit-scrollbar{display:none}
.ts-muc a{font:700 17.5px/1 var(--serif);color:var(--tx);padding:0 14px;white-space:nowrap;
  border-left:1px solid var(--line)}
.ts-muc a:first-child{border-left:0}
.ts-muc a:hover{color:var(--acc);text-decoration:none}
.ts-cong{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.ts-nut{width:38px;height:38px;border-radius:9px;border:1px solid var(--line);background:transparent;
  color:var(--tx);display:grid;place-items:center;cursor:pointer;padding:0}
.ts-nut:hover{background:var(--bg2)}
.ts-nut svg{width:19px;height:19px}

/* dải chuyên đề chạy ngang */
.ts-chip{border-bottom:1px solid var(--line);background:var(--card)}
.ts-chip .d{display:flex;align-items:center;gap:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ts-chip .d::-webkit-scrollbar{display:none}
.ts-chip a{font-size:13.5px;color:var(--tx2);white-space:nowrap;padding:11px 15px;border-left:1px solid var(--line)}
.ts-chip a:first-child{border-left:0;padding-left:0}
.ts-chip a:hover{color:var(--acc);text-decoration:none}
.ts-chip a.nong{color:var(--tx);font-weight:700}

/* menu đầy đủ (nút ⋮) */
.ts-day{display:none;border-bottom:1px solid var(--line);background:var(--bg2)}
.ts-day.mo{display:block}
.ts-day .d{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:6px 22px;padding:16px 0 20px}
.ts-day h5{margin:0 0 6px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx2)}
.ts-day a{display:block;font-size:14.5px;padding:4px 0;color:var(--tx)}

/* ô tìm trong trang */
.ts-tim{display:none;border-bottom:1px solid var(--line);background:var(--bg2)}
.ts-tim.mo{display:block}
.ts-tim .d{padding:14px 0}
.ts-tim input{width:100%;height:46px;border:1px solid var(--line);border-radius:10px;background:var(--card);
  color:var(--tx);padding:0 14px;font-size:16px}
.ts-tim p{margin:8px 0 0;font-size:13px;color:var(--tx2)}

/* ---------- KHUNG KHỐI ---------- */
.ts-khoi{padding:30px 0 6px}
.ts-nhan{display:inline-block;background:var(--tx);color:var(--bg);font:700 17px/1 var(--serif);
  letter-spacing:.02em;padding:11px 34px 11px 16px;
  clip-path:polygon(0 0,100% 0,calc(100% - 18px) 100%,0 100%)}
.ts-nhan.vang{color:var(--gold-d)}
:root[data-theme="dark"] .ts-nhan.vang,
.ts-nhan.vang{color:#e0b45f}
.ts-gach{border-bottom:2px solid var(--tx);margin:0 0 22px}
.ts-tieu2{display:flex;align-items:center;gap:11px;margin:0 0 18px}
.ts-tieu2 span{width:5px;height:26px;background:var(--tx);border-radius:2px}
.ts-tieu2 h2{margin:0;font:700 27px/1.1 var(--serif)}

/* ---------- KHỐI 1: TIÊU ĐIỂM ---------- */
.ts-hero{display:grid;grid-template-columns:1.5fr 1fr .74fr;gap:34px;align-items:stretch}

/* BA CỘT ĐÁY THẲNG HÀNG. Trước đây `align-items:start` để mỗi cột cao theo nội dung
   của nó ⇒ đo được cột phải hụt 151px so với cột giữa, hở một mảng trắng ngay màn
   đầu. Nay cho cột kéo giãn: ảnh bài lớn ăn phần dư bên trái, hộp liên hệ ăn phần dư
   bên phải. CHỈ áp từ 1181px trở lên — dưới mốc đó lưới đã xếp lại, mà `height:100%`
   trong một khối cao tự-động sẽ co về 0. */
@media (min-width:1181px){
  .ts-lon{display:flex;flex-direction:column}
  .ts-lon .anh{flex:1 1 auto;min-height:300px}
  .ts-lon .anh a{display:block;width:100%;height:100%}
  .ts-lon .anh img{height:100%;aspect-ratio:auto;min-height:300px}
  .ts-cot{display:flex;flex-direction:column}
  .ts-cot .ts-mxh{flex:1 1 auto}
}
.ts-lon .anh{position:relative;border-radius:4px;overflow:hidden;background:var(--bg2)}
.ts-lon .anh img{width:100%;aspect-ratio:16/10;object-fit:cover}
/* Nhan phan loai neo vao goc duoi khung anh. `position:relative` cho MOI khoi .anh
   la bat buoc, khong phai trang tri: thieu no thi nhan absolute di tim to tien gan
   nhat co position — khong co ai thi bam thang vao body va ROI XUONG DAY TRANG.
   Da tra gia dung loi nay: hai chip "PHAP LY / PEARL BAY" cua the trong khoi ba cot
   nam chong cho o cuoi trang, xa hang nghin pixel so voi anh cua no. */
.ts .anh{position:relative}
.ts-the-nhan{position:absolute;left:0;bottom:0;display:flex;z-index:2}
.ts-the-nhan a{background:var(--gold);color:#fff;font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;padding:5px 10px}
.ts-the-nhan a:hover{text-decoration:none;filter:brightness(1.08)}
.ts-meta{display:flex;align-items:center;gap:10px;margin:14px 0 8px;font-size:13px;color:var(--tx2)}
.ts-meta b{color:var(--tx);font-weight:700}
.ts-meta .v{flex:0 0 40px;height:1px;background:var(--line)}
.ts-meta .luu{margin-left:auto}
.ts-lon h2{font:700 36px/1.11 var(--serif);letter-spacing:-.01em;margin:0 0 12px}
.ts-lon h2 a{color:var(--tx)}
.ts-lon h2 a:hover{color:var(--acc);text-decoration:none}
.ts-lon p{margin:0;color:var(--tx2);font-size:16px;line-height:1.6}

.ts-td{list-style:none;margin:0;padding:0}
.ts-td li{padding:0 0 16px;margin:0 0 16px;border-bottom:1px solid var(--line)}
.ts-td li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.ts-td h3{font:700 21px/1.3 var(--serif);margin:0 0 8px;display:flex;gap:9px}
.ts-td h3 i{color:var(--gold);font-style:normal;flex:0 0 auto}
.ts-td h3 a{color:var(--tx)}
.ts-td h3 a:hover{color:var(--acc);text-decoration:none}
.ts-td .b{display:flex;align-items:center;font-size:12.5px;color:var(--tx2)}
.ts-td .b b{color:var(--tx);font-weight:700;margin-left:5px}
.ts-td .luu{margin-left:auto}

.luu{background:none;border:0;padding:2px;cursor:pointer;color:var(--tx2);line-height:0}
.luu svg{width:16px;height:19px}
.luu[aria-pressed="true"]{color:var(--gold)}
.luu[aria-pressed="true"] svg path{fill:currentColor}

/* cột phải */
.ts-cot{display:grid;gap:14px}
.ts-hop{background:var(--bg2);border:1px solid var(--line);border-radius:6px;padding:18px}
/* O thoi tiet — dung theo dung nhip thi giac cua ban mau: hinh may LON nam canh
   con so, nhan thu la chip bo tron, va MOI NGAY co hinh rieng (ban truoc chi co
   chu voi so nen dai 5 ngay trong nhu mot bang tinh). Hinh ve bang SVG chu khong
   dung emoji: emoji moi he dieu hanh mot kieu va khong an theo mau nen toi. */
.ts-troi{text-align:center;padding:22px 18px 18px}
.ts-troi .now{display:flex;align-items:center;justify-content:center;gap:14px}
.ts-troi .now .tr{flex:0 0 auto}
.ts-troi .do{font:700 52px/1 var(--serif);font-variant-numeric:lining-nums;letter-spacing:-.02em}
.ts-troi .do sup{font-size:16px;vertical-align:super;font-weight:600;font-family:var(--ui);
  margin-left:2px;color:var(--tx2)}
.ts-troi .tp{font:700 20px/1.3 var(--serif);margin:12px 0 2px}
.ts-troi .mo{font-size:14.5px;color:var(--tx2)}
.ts-troi .hai{display:flex;justify-content:center;gap:26px;margin:14px 0 0;
  font-size:14.5px;color:var(--tx2)}
.ts-troi .hai span{display:inline-flex;align-items:center;gap:7px}
.ts-troi .hai b{font-weight:400}
.ts-troi .i{width:17px;height:17px;flex:0 0 auto}
.ts-troi .i.giot{fill:#4aa3e8}
.ts-troi .i.gio{color:var(--tx2)}
.ts-troi .tr{fill:none;stroke:var(--tx2);stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;
  opacity:.55}
.ts-troi .now .tr{opacity:.42;stroke-width:1.15}
.ts-troi .tuan{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:16px 0 0;padding-top:14px}
.ts-troi .tuan div{display:flex;flex-direction:column;align-items:center;gap:5px}
.ts-troi .tuan .th{font-family:var(--ui);font-size:11.5px;font-weight:600;color:var(--tx2);
  background:var(--card);border-radius:5px;padding:4px 9px;white-space:nowrap}
.ts-troi .tuan b{font:700 16px/1 var(--serif);color:var(--tx);font-variant-numeric:lining-nums}
.ts-troi .tuan b sup{font-size:9px;vertical-align:super;font-weight:600;font-family:var(--ui);color:var(--tx2)}
.ts-mxh{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.ts-mxh a{background:var(--card);display:grid;place-items:center;gap:6px;padding:16px 8px;color:var(--tx);font-size:12.5px}
.ts-mxh a:hover{background:var(--bg2);text-decoration:none}
.ts-mxh svg{width:22px;height:22px}
.ts-phieu h4{margin:0 0 4px;font:700 19px/1.3 var(--serif)}
.ts-phieu p{margin:0 0 12px;font-size:13.5px;color:var(--tx2);line-height:1.55}
.ts-phieu input,.ts-phieu select{width:100%;height:46px;border:1px solid var(--line);border-radius:8px;
  background:var(--card);color:var(--tx);padding:0 12px;font-size:15px;margin:0 0 8px}
.ts-phieu button{width:100%;height:46px;border:0;border-radius:8px;background:var(--gold);color:#fff;
  font-family:var(--ui);font-size:15px;font-weight:600;cursor:pointer}
.ts-phieu button:hover{filter:brightness(1.06)}
.ts-phieu .gt{margin:8px 0 0;font-size:11.5px;color:var(--tx2)}

/* ---------- KHỐI 2: BÀI VIẾT MỚI ---------- */
.ts-moi{display:grid;grid-template-columns:300px 1fr;gap:34px;align-items:start}
.ts-doc{border:1px solid var(--line);border-radius:6px;padding:14px;background:var(--card);position:sticky;top:86px}
.ts-doc>h5{margin:0 0 10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx2)}
.ts-dan{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:stretch;
  padding:0 0 24px;border-bottom:1px solid var(--line);margin:0 0 24px}
.ts-dan h3{font:700 29px/1.16 var(--serif);margin:0 0 12px}
.ts-dan h3 a{color:var(--tx)}
.ts-dan h3 a:hover{color:var(--acc);text-decoration:none}
.ts-dan p{margin:0 0 14px;color:var(--tx2);font-size:15.5px;line-height:1.6}
.ts-dan-muc{margin:18px 0 0;padding:14px 0 0;border-top:1px solid var(--line)}
.ts-dan-muc h5{margin:0 0 8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx2)}
.ts-dan-muc ol{margin:0;padding:0 0 0 20px;color:var(--tx2)}
.ts-dan-muc li{margin:0 0 6px;font-size:14.5px;line-height:1.45}
.ts-dan-muc li a{color:var(--tx)}
.ts-dan-muc li a:hover{color:var(--acc)}
.ts-dan .anh{position:relative;border-radius:4px;overflow:hidden;background:var(--bg2)}
.ts-dan .anh img{width:100%;height:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.ts-bo3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.ts-the .the{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 9px}
.ts-the .the a{background:var(--gold);color:#fff;font-family:var(--ui);font-size:10.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 8px}
.ts-the .the a:hover{text-decoration:none;filter:brightness(1.08)}
.ts-the h3{font:700 21px/1.28 var(--serif);margin:0 0 8px}
.ts-the h3 a{color:var(--tx)}
.ts-the h3 a:hover{color:var(--acc);text-decoration:none}
.ts-the p{margin:0 0 10px;color:var(--tx2);font-size:14.5px;line-height:1.55}
.ts-the .b{display:flex;align-items:center;font-size:12.5px;color:var(--tx2)}
.ts-the .b b{color:var(--tx);margin-left:5px}
.ts-the .b .luu{margin-left:auto}

/* ---------- KHỐI 3: DÀNH RIÊNG CHO BẠN ---------- */
.ts-rieng{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.ts-rieng .anh{position:relative;border-radius:4px;overflow:hidden;background:var(--bg2);margin:0 0 11px}
.ts-rieng .anh img{width:100%;aspect-ratio:16/10;object-fit:cover}

/* ---------- KHỐI 4: CHUYÊN MỤC ---------- */
.ts-cm{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:0 0 10px}
.ts-cm article{border:1px solid var(--line);border-radius:6px;background:var(--card);padding:18px}
.ts-cm h3{margin:0 0 6px;font:700 20px/1.28 var(--serif)}
.ts-cm h3 a{color:var(--tx)}
.ts-cm p{margin:0 0 12px;font-size:14px;color:var(--tx2);line-height:1.55}
.ts-cm .soan{display:inline-block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tx2);border:1px dashed var(--line);border-radius:999px;padding:3px 9px}
.ts-cm .di{font-size:13.5px;font-weight:600}

/* ---------- DẢI CHỐT ---------- */
.ts-chot{background:var(--acc);color:#fff;border-radius:8px;padding:26px 28px;margin:34px 0 0;
  display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.ts-chot h2{margin:0 0 6px;font:700 26px/1.18 var(--serif);color:#fff}
.ts-chot p{margin:0;font-size:15px;opacity:.9;max-width:620px}
.ts-chot .n{display:flex;gap:10px;flex-wrap:wrap}
.ts-chot .n a{background:#fff;color:var(--acc);border-radius:8px;padding:12px 18px;font-family:var(--ui);font-weight:600;font-size:15px}
.ts-chot .n a.vien{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55)}
.ts-chot .n a:hover{text-decoration:none;opacity:.92}

.ts-an{display:none !important}

/* ---------- CO GIÃN ---------- */
@media (max-width:1180px){
  .ts-hero{grid-template-columns:1.45fr 1fr}
  .ts-cot{display:grid;grid-column:1/-1;grid-template-columns:repeat(3,1fr);align-items:start}
  .ts-lon h2{font-size:32px}
  .ts-rieng{grid-template-columns:repeat(2,1fr)}
  .ts-cm{grid-template-columns:repeat(2,1fr)}
}
/* ══ NĂM CHUYÊN MỤC PHẢI HIỆN NGAY, KHÔNG NÚP SAU NÚT ⋮ (Tuyên chốt 17/08/2026) ══
   Trước đây `.ts-muc{display:none}` dưới 1024px: cả năm mục (Dự án · Quy hoạch – Hạ
   tầng · Tiến độ dự án · Pháp lý – Chính sách · Thị trường) nằm sau nút ⋮, tức xương
   sống của trang tin bị giấu đúng ở nơi phần lớn người đọc đang đứng. Nay nó xuống
   hàng riêng, chiếm trọn bề ngang ngay dưới logo.

   ⚠️ MỐC 1239px CHỨ KHÔNG PHẢI 1024px, và đây là chỗ vá một lỗi CÓ SẴN: thanh mục nằm
   ngang cần 766px, nhưng ở khổ 1025–1235 nó chỉ được chia 562–757px, mà `.ts-muc` để
   `overflow:hidden` ⇒ **cắt cụt trong im lặng** — chụp ở 1025 thấy đúng "Pháp lý – Chí"
   rồi mất hẳn mục "Thị trường". Không cổng nào bắt được (không tràn ngang, không đè
   nút, không sai sự thật). Nên cả dải laptop nhỏ cũng dùng khuôn xuống hàng này.

   ⚠️ CHO DẢI TIỆN ÍCH TRƯỢT ĐI, GIỮ LẠI DẢI ĐIỀU HƯỚNG — phần bắt buộc đi kèm, không
   phải tuỳ chọn: thêm một dải vào trong `.ts-top` mà giữ `top:0` là thanh dính phồng
   lên 171px trên màn 360, hơn một phần năm màn hình bị chiếm vĩnh viễn.
   Cách gỡ: kéo điểm neo LÊN đúng bằng chiều cao `hang0`. Header vẫn dính, nhưng nó
   dính ở vị trí mà `hang0` (hồ sơ đọc + cửa tài khoản — dải TIỆN ÍCH, xem một lần lúc
   vào) đã trượt hẳn khỏi màn, còn `hang1` (logo + nút + năm chuyên mục — dải ĐIỀU
   HƯỚNG) ghim đúng mép trên. Đo được: thanh dính còn 99px ở khổ 360, tức NHẸ HƠN 136px
   của bản cũ dù vừa thêm hẳn một dải điều hướng.
   ⚠️ `--h0` do `ho-so-doc.js` đo rồi gán, KHÔNG cắm số cứng: `hang0` cao 71px ở khổ 360
   (xuống hai dòng), 42px ở 390, 38px ở 768 — số đó phụ thuộc bề ngang chữ, đổi nhãn một
   cái là sai. Chưa có JS thì `--h0` rơi về 0 và header dính nguyên khối như cũ: xấu
   hơn, nhưng không vỡ.
   ⚠️ ĐỪNG đổi thành `position:sticky` đặt trên chính `hang1` — đã thử và HỎNG: phần tử
   dính chỉ dính được trong lòng CHA nó, mà cha ở đây là `<header>` cao 171px, nên cuộn
   quá đó là nó đi mất. Lỗi này không cổng nào bắt, phải cuộn thật rồi hỏi lại toạ độ. */
@media (max-width:1239px){
  .ts-top{top:calc(0px - var(--h0,0px))}
  .ts-top .hang1{flex-wrap:wrap;row-gap:0;min-height:0;padding-top:9px}
  /* Thứ tự phải khai bằng `order`: `.ts-muc` đứng GIỮA logo và cụm nút trong HTML, mà
     nó chiếm trọn một hàng ⇒ để nguyên thứ tự tài liệu thì cụm nút bị đẩy xuống hàng
     thứ BA, mỗi nút một mình một dòng. */
  .ts-top .hang1 .ts-logo{order:1}
  .ts-top .hang1 .ts-cong{order:2;margin-left:auto}
  /* XUỐNG DÒNG, KHÔNG CUỘN NGANG. Năm nhãn tiếng Việt dài 631px, màn 360 chỉ còn
     332px ⇒ dải cuộn ngang giấu mất ba mục, tức mắc lại đúng bệnh của nút ⋮ chỉ nhẹ
     hơn — mà yêu cầu là "hiện ra ngay". Hai dòng tốn thêm 25px thanh dính nhưng cả
     năm mục nằm trong tầm mắt ngay lượt tải đầu, không phải vuốt. */
  .ts-muc{display:flex;order:3;flex:1 0 100%;min-width:0;
    flex-wrap:wrap;align-items:baseline;gap:2px 17px;margin:9px 0 2px}
  /* Cỡ chữ 17,5 → 15,5px. Vẫn giữ chữ serif đậm màu var(--tx) để KHÁC HẲN dải chip
     dự án ngay bên dưới (13,5px, màu nhạt) — hai dải trông giống nhau thì người đọc
     không nhận ra mình đang nhìn hai lớp khác nhau. */
  .ts-muc a{font-size:15.5px;padding:5px 0;border-left:0}
  /* Màn hẹp nhất (360–380px: iPhone mini/SE, Galaxy A) — bóp thêm nửa cỡ chữ và
     khe hở để năm mục nằm gọn HAI dòng thay vì ba. Đo bằng số: ở 15,5px/khe 17 thì
     tổng bề ngang 615px trên 332px lọt được ⇒ ba dòng, thanh dính phồng lên 131px,
     tức mất luôn cái lợi vừa giành được ở chỗ đổi neo thanh dính. */
  @media (max-width:400px){
    .ts-muc{gap:0 13px}
    .ts-muc a{font-size:14.5px}
  }
  /* (dấu gạch chéo ngăn mục được gỡ ở cuối tệp, cạnh chính luật đẻ ra nó) */
}
@media (max-width:1024px){
  .ts-moi{grid-template-columns:1fr}
  .ts-doc{position:static;order:2}
}
@media (max-width:860px){
  .ts-hero{grid-template-columns:1fr;gap:26px}
  .ts-cot{display:grid;grid-template-columns:1fr}
  .ts-lon h2{font-size:29px}
  .ts-dan{grid-template-columns:1fr;gap:16px}
  .ts-dan .anh{order:-1}
  .ts-bo3{grid-template-columns:1fr;gap:22px}
  .ts-bo3 .ts-the{padding:0 0 20px;border-bottom:1px solid var(--line)}
  .ts-bo3 .ts-the:last-child{border-bottom:0;padding-bottom:0}
  .ts-rieng{grid-template-columns:1fr}
  .ts-cm{grid-template-columns:1fr}
  .ts-khoi{padding:24px 0 4px}
}
@media (max-width:520px){
  .ts .khung{padding:0 14px}
  .ts-lon h2{font-size:26px}
  .ts-dan h3{font-size:25px}
  .ts-logo small{display:none}
  .ts-chot{padding:22px 18px}
}


/* ---------- TRANG DỰ ÁN (/du-an-nha-trang) ---------- */
.ts-dau-trang{max-width:760px;margin:0 0 26px}
.ts-dau-trang h1{font:700 40px/1.12 var(--serif);letter-spacing:-.01em;margin:16px 0 12px}
.ts-dau-trang p{margin:0;color:var(--tx2);font-size:16.5px;line-height:1.62}
.ts-duan{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 26px}
.ts-duan .anh{position:relative;border-radius:4px;overflow:hidden;background:var(--bg2);margin:0 0 12px}
.ts-duan .anh img{width:100%;aspect-ratio:16/10;object-fit:cover}
.ts-duan h3{font:700 23px/1.24 var(--serif);margin:0 0 8px}
.ts-duan h3 a{color:var(--tx)}
.ts-duan h3 a:hover{color:var(--acc);text-decoration:none}
.ts-duan p{margin:0 0 11px;color:var(--tx2);font-size:14.8px;line-height:1.58}
.the-nho{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.the-nho span{font-family:var(--ui);font-size:11.5px;color:var(--tx2);background:var(--bg2);
  border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.di-tiep{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.di-tiep a{font-family:var(--ui);font-size:13.5px;font-weight:600}
.di-tiep a:first-child{color:var(--acc)}
.di-tiep a+a{color:var(--tx2)}
.ts-ngoai{border:1px solid var(--line);border-radius:8px;background:var(--bg2);padding:24px 26px;margin:34px 0 0}
.ts-ngoai h2{margin:0 0 8px;font:700 24px/1.2 var(--serif)}
.ts-ngoai p{margin:0 0 14px;color:var(--tx2);font-size:15.5px;line-height:1.6;max-width:820px}
.btn-gio{display:inline-block;font-family:var(--ui);font-weight:600;font-size:15px;
  background:var(--gold);color:#fff;border-radius:8px;padding:12px 20px}
.btn-gio:hover{text-decoration:none;filter:brightness(1.06)}
.ts-muc a.on{color:var(--acc)}
@media (max-width:1180px){ .ts-duan{grid-template-columns:repeat(2,1fr)} }
@media (max-width:860px){
  .ts-duan{grid-template-columns:1fr;gap:26px}
  .ts-dau-trang h1{font-size:30px}
  .ts-ngoai{padding:20px 18px}
}


/* ============================================================
   KHOI 4-8 — ba cot · dang quan tam · du an · nguoi mua nha · tu khoa
   ============================================================ */

/* --- ba cot: Nguoi viet | Chon dong | Phap ly --- */
.ts-3cot{display:grid;grid-template-columns:.9fr 1.05fr 1.05fr;gap:34px;align-items:start}
.ts-tacgia{display:flex;gap:14px;padding:16px;border:1px solid var(--line);border-radius:8px;
  background:var(--card);margin:0 0 12px}
.ts-tacgia .ava{flex:0 0 auto;width:56px;height:56px;border-radius:50%;background:var(--acc);color:#fff;
  display:grid;place-items:center;font:700 18px/1 var(--serif);letter-spacing:.5px}
.ts-tacgia .ava.kh{background:var(--gold)}
.ts-tacgia h3{margin:0 0 3px;font:700 18px/1.25 var(--serif)}
.ts-tacgia h3 span{font-family:var(--ui);font-size:12px;font-weight:400;color:var(--tx2)}
.ts-tacgia .ch{margin:0 0 7px;font-family:var(--ui);font-size:12px;color:var(--gold-d)}
.ts-tacgia p{margin:0 0 9px;font-size:14px;color:var(--tx2);line-height:1.55}
.ts-tacgia a{font-family:var(--ui);font-size:13.5px;font-weight:600}

.ts-ds{list-style:none;margin:14px 0 0;padding:0}
.ts-ds li{padding:0 0 13px;margin:0 0 13px;border-bottom:1px solid var(--line)}
.ts-ds li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.ts-ds a{font:700 17px/1.35 var(--serif);color:var(--tx);display:block}
.ts-ds a:hover{color:var(--acc);text-decoration:none}
.ts-ds p{margin:5px 0 4px;font-size:13.8px;color:var(--tx2);line-height:1.5}
.ts-ds span{display:block;margin-top:5px;font-size:12.5px;color:var(--tx2)}
.ts-ds.dai a{font-size:18px}

/* --- khoi Du an: bai lon CHU DE LEN ANH + danh sach hai cot ---
   Ban dau dat chu DUOI anh va xep danh sach mot cot doc: anh ben trai cao 450px
   trong khi bon muc ben phai chi cao 340px, ho tron mot mang lon ngay giua khoi.
   Ban mau giai bai nay bang cach cho chu DE len anh (nen toi thu dan) va chia
   danh sach thanh 2 cot x 2 hang de no phu het chieu cao anh. */
.ts-duan-khoi{display:grid;grid-template-columns:1.25fr 1fr;gap:30px;align-items:stretch}
.ts-duan-khoi .lon{position:relative;border-radius:4px;overflow:hidden;background:#0d1218}
.ts-duan-khoi .lon .anh{margin:0;height:100%}
.ts-duan-khoi .lon .anh a{display:block;height:100%}
.ts-duan-khoi .lon .anh img{width:100%;height:100%;min-height:360px;aspect-ratio:16/10.5;object-fit:cover}
.ts-duan-khoi .lon .chu{position:absolute;left:0;right:0;bottom:0;padding:80px 28px 24px;
  background:linear-gradient(to top,rgba(6,10,14,.94) 0%,rgba(6,10,14,.78) 42%,rgba(6,10,14,0) 100%)}
.ts-duan-khoi .lon h3{font:700 27px/1.2 var(--serif);margin:0 0 9px}
.ts-duan-khoi .lon h3 a{color:#fff}
.ts-duan-khoi .lon h3 a:hover{color:#e0b45f;text-decoration:none}
.ts-duan-khoi .lon p{margin:0 0 10px;color:#c6cfd9;font-size:15px;line-height:1.6}
.ts-duan-khoi .lon .b{font-size:12.5px;color:#95a1ae}
.ts-duan-khoi .lon .b b{color:#e2e8ef}
.ts-the-nhan.tinh{position:static;display:flex;margin:0 0 10px}
.ts-duan-khoi .ts-ds{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0 26px;align-content:start}
.ts-duan-khoi .ts-ds li{border-bottom:1px solid var(--line);padding:0 0 15px;margin:0 0 15px}
.ts-duan-khoi .ts-ds li:nth-last-child(-n+2){border-bottom:0;margin-bottom:0;padding-bottom:0}

/* --- khoi Nguoi mua nha: bai nen toi + bon the ngang --- */
.ts-toi{display:grid;grid-template-columns:1fr 1.05fr;background:#12181f;border-radius:6px;
  overflow:hidden;margin:0 0 26px}
.ts-toi .anh{margin:0}
.ts-toi .anh img{width:100%;height:100%;min-height:260px;object-fit:cover;display:block}
.ts-toi .n{padding:30px 32px;display:flex;flex-direction:column;justify-content:center}
.ts-toi h3{font:700 28px/1.2 var(--serif);margin:0 0 11px}
.ts-toi h3 a{color:#fff}
.ts-toi h3 a:hover{color:#e0b45f;text-decoration:none}
.ts-toi p{margin:0 0 12px;color:#b6c0cc;font-size:15px;line-height:1.62}
.ts-toi .b{font-size:12.5px;color:#8e99a6}
.ts-toi .b b{color:#dbe2ea}
.ts-doi{display:grid;grid-template-columns:1fr 1fr;gap:24px 30px}
.ts-the.ngang{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:start}
.ts-the.ngang .anh{margin:0;border-radius:4px;overflow:hidden;background:var(--bg2)}
.ts-the.ngang .anh img{width:100%;aspect-ratio:16/10;object-fit:cover}
.ts-the.ngang h3{font:700 18px/1.32 var(--serif);margin:0 0 6px}
.ts-the.ngang p{margin:0 0 7px;font-size:14px;color:var(--tx2);line-height:1.5}

/* --- dai tu khoa --- */
.ts-tukhoa{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;
  border-top:1px solid var(--line);padding:20px 0 4px}
.ts-tukhoa b{font:700 16px/1 var(--serif);margin-right:4px}
.ts-tukhoa a{font-family:var(--ui);font-size:13.5px;color:var(--tx2);background:var(--bg2);
  border:1px solid var(--line);border-radius:999px;padding:6px 13px}
.ts-tukhoa a:hover{color:var(--acc);text-decoration:none;border-color:var(--acc)}

@media (max-width:1180px){
  .ts-3cot{grid-template-columns:1fr 1fr}
  .ts-duan-khoi{grid-template-columns:1fr}
  .ts-duan-khoi .ts-ds{grid-template-columns:1fr}
  .ts-duan-khoi .ts-ds li:nth-last-child(2){border-bottom:1px solid var(--line);margin-bottom:15px;padding-bottom:15px}
  .ts-toi{grid-template-columns:1fr}
  .ts-toi .n{padding:24px}
}
@media (max-width:860px){
  /* Chu de len anh chi hop khi anh du cao. Tren dien thoai anh thap lai, chu
     nhieu, de len la khong doc noi -> tra chu ve duoi anh, nen thuong. */
  .ts-duan-khoi .lon .chu{position:static;padding:12px 0 0;background:none}
  .ts-duan-khoi .lon{background:none}
  .ts-duan-khoi .lon h3 a{color:var(--tx)}
  .ts-duan-khoi .lon p{color:var(--tx2)}
  .ts-duan-khoi .lon .b{color:var(--tx2)}
  .ts-duan-khoi .lon .b b{color:var(--tx)}
  .ts-duan-khoi .lon .anh img{min-height:0;aspect-ratio:16/10}
  .ts-3cot{grid-template-columns:1fr;gap:30px}
  .ts-doi{grid-template-columns:1fr;gap:20px}
  .ts-the.ngang{grid-template-columns:120px 1fr;gap:13px}
  .ts-toi h3{font-size:23px}
  .ts-duan-khoi .lon h3{font-size:23px}
}


/* Danh sach trang con cua tung du an — muc "Du an" phai mo duoc TOAN BO nhung gi
   cum noi bo /Du-An mo ra, khong chi trang chinh. */
.trang-con{list-style:none;margin:11px 0 0;padding:11px 0 0;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:6px}
.trang-con a{display:inline-block;font-family:var(--ui);font-size:12.5px;color:var(--tx2);
  background:var(--bg2);border:1px solid var(--line);border-radius:6px;padding:5px 10px}
.trang-con a:hover{color:var(--acc);border-color:var(--acc);text-decoration:none}

/* ═══════════════════════════════════════════════════ CỤM BÀI CỦA XƯỞNG TOÀ SOẠN
   Thêm 13/08/2026. Trước đó xưởng nhúng CSS riêng trong khuon.mjs → site có HAI bộ
   giao diện song song. Nay mọi kiểu của trang bài nằm ở đây, dùng chung biến với
   trang chủ; xưởng không được nhúng CSS nữa. */
.ts .ts-bai{max-width:760px;margin:0 auto}
.ts .ts-bai h1{font:700 clamp(30px,5vw,44px)/1.12 var(--serif);letter-spacing:-.01em;margin:0 0 14px}
.ts .ts-sapo{font:400 18.5px/1.6inherit;color:var(--tx2);margin:0 0 16px;max-width:760px}
.ts .ts-bai p{font:400 17.5px/1.72inherit;color:var(--tx);margin:0 0 1.05em}
.ts .ts-bai h2{font:700 27px/1.25 var(--serif);margin:1.75em 0 .5em;scroll-margin-top:86px}
.ts .ts-bai h3{font:700 20px/1.3 var(--serif);margin:1.35em 0 .4em}
.ts .ts-bai ul,.ts .ts-bai ol{margin:0 0 1.05em;padding-left:22px;font:400 17.5px/1.65inherit;color:var(--tx)}
.ts .ts-bai li{margin:0 0 .45em}
.ts .ts-bai a{color:var(--acc)}
.ts .ts-bai-anh{margin:0 0 1.4em}
.ts .ts-bai-anh img{width:100%;height:auto;border-radius:4px;display:block}
.ts .ts-bai-anh figcaption{font:400 13.5px/1.5inherit;color:var(--tx2);margin-top:8px}
/* Khối nhấn (::: trong markdown) */
.ts .ts-bai .buoc{background:var(--card);border-left:3px solid var(--gold);padding:15px 18px;margin:0 0 1.2em}
.ts .ts-bai .buoc p:last-child{margin-bottom:0}
/* Bảng — cuộn ngang ở điện thoại, không bao giờ để trang tràn */
.ts .ts-bang{overflow-x:auto;margin:0 0 1.3em}
.ts .ts-bang table{width:100%;border-collapse:collapse;font:400 15px/1.5inherit;min-width:460px}
.ts .ts-bang th,.ts .ts-bang td{border:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top}
.ts .ts-bang th{background:var(--card);font-weight:700}
.ts .ts-bai table{width:100%;border-collapse:collapse;font:400 15px/1.5inherit;margin:0 0 1.3em}
.ts .ts-bai th,.ts .ts-bai td{border:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top}
.ts .ts-bai th{background:var(--card);font-weight:700}
/* KHỐI ⑤ — ai nên / ai không nên */
.ts .ts-ain{display:grid;gap:14px;margin:0 0 1.5em}
.ts .ts-ain-cot{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--line);
  border-radius:4px;padding:16px 18px}
.ts .ts-ain-cot.co{border-top-color:var(--acc)}
.ts .ts-ain-cot.khong{border-top-color:#b4532e}
.ts .ts-ain-cot h3{margin:0 0 10px;font:700 18px/1.3 var(--serif)}
.ts .ts-ain-cot ul{margin:0;padding-left:20px}
.ts .ts-ain-cot li:last-child{margin-bottom:0}
@media (min-width:720px){.ts .ts-ain{grid-template-columns:1fr 1fr}}
/* Câu hỏi thường gặp + bảng truy nguồn */
.ts .ts-hoi{border-left:2px solid var(--line);padding:2px 0 2px 15px;margin:0 0 1.1em}
.ts .ts-hoi p:last-child{margin-bottom:0;color:var(--tx2)}
.ts .ts-nguon{margin:2em 0 0;font:400 13.5px/1.55inherit;color:var(--tx2)}
.ts .ts-nguon summary{cursor:pointer;font-size:14px;color:var(--tx);margin-bottom:10px}
/* Trang danh sách */
.ts .ts-gach h1{font:700 clamp(26px,4vw,34px)/1.15 var(--serif);margin:0 0 12px}
.ts .ts-trong{background:var(--card);border:1px dashed var(--line);border-radius:4px;
  padding:26px;text-align:center;color:var(--tx2);font-family:var(--ui)}
.ts .ts-tukhoa a[aria-current]{color:var(--acc);border-color:var(--acc)}
/* ---------- BỐ CỤC TRANG BÀI: rail chia sẻ | cột chữ | cột phải ----------
   Điện thoại: một cột, rail nằm ngang dưới tiêu đề, cột phải xuống cuối.
   Máy tính: ba cột, rail và cột phải đều dính theo cuộn. */
.ts .ts-bai-khung{display:grid;gap:26px;grid-template-columns:1fr}
.ts .ts-bai-khung .ts-bai{max-width:760px;margin:0}
.ts .ts-chiase{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding:0 0 14px;border-bottom:1px solid var(--line);order:-1}
.ts .ts-chiase .nh{font-family:inherit;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tx2)}
.ts .ts-chiase a,.ts .ts-chiase .ts-chep{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:var(--card);
  color:var(--tx2);cursor:pointer;padding:0}
.ts .ts-chiase a:hover,.ts .ts-chiase .ts-chep:hover{color:var(--acc);border-color:var(--acc);text-decoration:none}
.ts .ts-chiase svg{width:17px;height:17px}
/* Hộp "Mục chính" */
.ts .ts-mucchinh{position:static;margin:0 0 1.6em;padding:16px 18px}
.ts .ts-mucchinh h5{margin:0 0 10px}
.ts .ts-mucchinh ol{margin:0;padding:0;list-style:none;counter-reset:mc;display:grid;gap:9px}
.ts .ts-mucchinh li{counter-increment:mc;display:flex;gap:10px;align-items:baseline;
  font-size:15.5px;line-height:1.45;padding-bottom:9px;border-bottom:1px solid var(--line)}
.ts .ts-mucchinh li:last-child{border-bottom:0;padding-bottom:0}
.ts .ts-mucchinh li::before{content:counter(mc);flex:0 0 auto;width:19px;height:19px;
  display:inline-flex;align-items:center;justify-content:center;background:var(--tx);color:var(--bg);
  font-size:11px;font-weight:700;border-radius:2px}
.ts .ts-mucchinh a{color:var(--tx);font-weight:600}
.ts .ts-mucchinh a:hover{color:var(--acc)}
/* Cột phải của trang bài */
.ts .ts-cot-bai .ts-baimoi{margin-top:6px;display:block}
.ts .ts-cot-bai .ts-gach h4{font:700 21px/1.2 var(--serif);margin:0 0 12px}
.ts .ts-cot-bai .ts-the.ngang{margin:0 0 16px}
@media (min-width:720px){
  .ts .ts-mucchinh ol{grid-template-columns:1fr 1fr;gap:9px 26px}
}
@media (min-width:1080px){
  .ts .ts-bai-khung{grid-template-columns:64px minmax(0,1fr) 320px;gap:32px;align-items:start}
  .ts .ts-chiase{flex-direction:column;gap:12px;border-bottom:0;padding:0;
    position:sticky;top:96px;order:0}
  .ts .ts-chiase .nh{writing-mode:horizontal-tb;text-align:center;font-size:11px}
  .ts .ts-cot-bai{position:sticky;top:96px}
}
/* Tiêu đề bài canh ĐÚNG cột chữ, không canh giữa — nếu không thì đầu bài và thân bài
   lệch nhau một quãng ở màn rộng. */
.ts .ts-bai-dau{min-width:0;max-width:760px}
.ts .ts-dau{padding-bottom:0}
/* ⚠ Khối gợi ý mặc định dàn 2 cột từ 760px trở lên — thả vào cột phải 320px là nó
   tự bung ra 574px và làm TRÀN NGANG cả trang. Trong cột phải ép về một cột. */
.ts .ts-cot-bai{min-width:0}
.ts .ts-cot-bai .goiy{max-width:100%;margin-top:0}
.ts .ts-cot-bai .goiy .ds{grid-template-columns:1fr}
.ts .ts-cot-bai .goiy a.m{grid-template-columns:88px minmax(0,1fr)}
.ts .ts-cot-bai .goiy a.m img{width:88px;height:66px}
/* Ô lưới mặc định min-width:auto → nó KHÔNG co xuống dưới kích thước nội dung, và
   max-width:100% không cứu được. Thiếu dòng này là khối gợi ý bung 574px trong cột
   320px và làm tràn ngang cả trang ở khổ ≥1080. */
.ts .ts-cot-bai>*{min-width:0}
.ts .ts-cot-bai .goiy{min-width:0;width:100%;box-sizing:border-box}
/* Thẻ ngang trong cột phải: ảnh 150px + chữ. Trong cột 320px thì cột chữ phải được
   phép co — thiếu min-width:0 là nó đẩy thẻ rộng ra ngoài cột (cùng lỗi min-width:auto). */
.ts .ts-cot-bai .ts-the.ngang{grid-template-columns:104px minmax(0,1fr);gap:12px}
.ts .ts-cot-bai .ts-the.ngang>*{min-width:0}
.ts .ts-cot-bai .ts-the.ngang h3{font-size:16px;line-height:1.35}
/* ⚠ .ts-moi ĐÃ CÓ SẴN trong site (lưới 2 cột). Dùng lại tên đó cho danh sách bài ở
   cột phải là thẻ bị xếp 2 cột trong ô 320px rồi tràn ra ngoài. Tên riêng: .ts-baimoi. */
.ts .ts-cot-bai .ts-baimoi{display:block}
/* ── ĐẦU BÀI: bám khuôn toà soạn, sửa 13/08/2026 sau khi đối chiếu trực tiếp ──
   ⚠ Luật font h1 trước nằm ở .ts-bai; khi tách khối tiêu đề ra .ts-bai-dau thì luật
   KHÔNG đi theo, nên tiêu đề rơi về font sans của body. Đây là lỗi đã thấy bằng mắt. */
.ts .ts-bai-dau h1{font:700 clamp(30px,4.6vw,46px)/1.1 var(--serif);letter-spacing:-.015em;margin:0 0 18px}
/* Nhãn: mỗi nhãn một chip RỜI, chữ hoa nhỏ — không gộp thành một khối dài */
.ts .ts-the-nhan.tinh{gap:6px;margin:0 0 16px}
.ts .ts-the-nhan.tinh a{padding:5px 11px;font-size:11px;letter-spacing:.1em}
/* Byline: ảnh tròn · tên · nút lưu · dòng chức danh + mốc cập nhật · gạch chân khối */
.ts .ts-tacgia-dong{display:flex;align-items:center;gap:13px;padding:0 0 20px;
  border-bottom:1px solid var(--line);margin:0 0 26px}
.ts .ts-tacgia-dong .ava{flex:0 0 auto;width:46px;height:46px;border-radius:50%;
  background:var(--acc);color:#fff;display:inline-flex;align-items:center;justify-content:center;
  font:700 19px/1 var(--serif)}
.ts .ts-tacgia-dong .n{display:grid;gap:3px;min-width:0}
.ts .ts-tacgia-dong .d1{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:15px}
.ts .ts-tacgia-dong .d1 b{font-weight:700}
.ts .ts-tacgia-dong .g{width:26px;height:1px;background:var(--line)}
.ts .ts-tacgia-dong .d2{font-size:13px;color:var(--tx2);line-height:1.45}
.ts .ts-tacgia-dong .luu{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--tx2)}
.ts .ts-tacgia-dong .luu svg{width:13px;height:17px}
/* Thanh điều hướng: dấu gạch chéo giữa các mục, đúng nhịp một trang tin */
.ts .ts-muc a+a::before{content:"/";color:var(--line);margin-right:16px;font-weight:400}
.ts .ts-muc a+a{margin-left:0}
/* ⚠️ Ngoại lệ phải nằm NGAY ĐÂY, không nằm trong khối @media ở trên: hai luật cùng độ
   ưu tiên thì luật đứng SAU thắng, mà luật gạch chéo này ở cuối tệp — bản đầu em đặt
   ngoại lệ trong khối @media (max-width:1024px) và nó bị nuốt im lặng, chỉ ảnh chụp
   mới lộ ra dòng thứ hai của thanh mục mở đầu bằng một dấu "/" lạc.
   Vì sao gỡ: dấu này là dấu NGĂN GIỮA hai mục trên CÙNG một dòng; dưới 1024px thanh
   mục xuống hai dòng nên nó rơi xuống đầu dòng dưới và đọc thành một ký tự thừa. */
@media (max-width:1239px){ .ts .ts-muc a+a::before{content:none} }
/* ── THANH TRÊN CÙNG: ba cửa vào hồ sơ đọc ─────────────────────────────────
   Hồ sơ chạy trên máy khách, không đăng nhập. Con số trong ngoặc do ho-so-doc.js
   điền — chưa có gì thì để trống hẳn, không hiện "(0)" (một số 0 chỉ nhắc người ta
   rằng họ chưa dùng, không mời được ai). */
.ts-top .hang0{display:flex;align-items:center;gap:16px;min-height:38px;
  border-bottom:1px solid var(--line);font-size:13px}
.ts-top .hang0 .ngay{color:var(--tx2);font-style:italic}
.ts-top .ts-hoso{display:flex;gap:18px;margin-left:auto;flex-wrap:wrap}
.ts-top .ts-hoso a{color:var(--tx2)}
.ts-top .ts-hoso a:hover{color:var(--acc);text-decoration:none}
.ts-top .ts-goi{font-weight:700;color:var(--tx);white-space:nowrap}
/* Cửa tài khoản — thế chỗ số hotline ở cuối thanh trên cùng (17/08/2026).
   "Đăng ký" mang viền vàng vì đó là cửa mình muốn người lạ bấm; "Đăng nhập" để chữ
   trần cho người đã có tài khoản nhận ra mà không tranh mắt với cửa kia. Dùng biến
   --gold nên tự đúng ở cả nền sáng lẫn nền tối, không cắm màu cứng. */
.ts-top .ts-tk{display:flex;align-items:center;gap:10px;flex:0 0 auto;white-space:nowrap}
.ts-top .ts-tk a{color:var(--tx2);font-weight:600}
.ts-top .ts-tk a:hover{color:var(--acc);text-decoration:none}
.ts-top .ts-tk .ts-dk{border:1px solid var(--gold);color:var(--gold-d);
  border-radius:999px;padding:2px 12px;line-height:1.7}
.ts-top .ts-tk .ts-dk:hover{background:var(--gold-l);color:var(--gold-d)}
@media (max-width:719px){
  .ts-top .hang0 .ngay{display:none}
  .ts-top .ts-hoso{margin-left:0;gap:14px;font-size:12.5px}
  /* Khổ hẹp: ba cửa hồ sơ + hai cửa tài khoản không nằm nổi một hàng. Cho hàng
     xuống dòng thay vì bóp chữ — bóp thì chữ rớt dọc, đúng lỗi VERTICAL_TEXT mà
     cổng bố cục vẫn bắt. Cụm tài khoản đẩy về mép phải của hàng thứ hai. */
  .ts-top .hang0{flex-wrap:wrap;gap:8px 14px;padding-top:7px;padding-bottom:7px}
  .ts-top .ts-tk{margin-left:auto;gap:9px;font-size:12.5px}
}
/* Nút "+ Theo dõi" cạnh tên chuyên mục */
.ts .ts-gach-mo{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ts .ts-gach-mo h1{margin-bottom:8px}
.ts .ts-theo{margin:0 0 8px;padding:7px 15px;border:1px solid var(--line);border-radius:999px;
  background:var(--card);color:var(--tx);font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.ts .ts-theo:hover{border-color:var(--acc);color:var(--acc)}
.ts .ts-theo[aria-pressed="true"]{background:var(--acc);color:#fff;border-color:transparent}
/* ── ĐỐI CHIẾU TRỰC TIẾP 13/08/2026: ba chỗ còn lệch so với khuôn một trang tin ── */
/* ① Dải chip: gạch ĐẬM dưới đáy (ranh giới giữa vùng điều hướng và vùng nội dung),
      mục đang xem có biểu tượng lửa. Vạch ngăn mảnh hơn, chữ thoáng hơn. */
.ts-chip{border-bottom:2px solid var(--tx)}
.ts-chip a{padding:10px 16px}
.ts-chip a.nong{display:inline-flex;align-items:center;gap:7px}
.ts-chip .lua{font-size:14px;line-height:1}
/* ② Nhãn chuyên mục: nền VÀNG SÁNG chữ đen — nhãn phải đọc được từ xa và bật hẳn
      khỏi nền trắng. Nâu-vàng thương hiệu quá chìm ở cỡ chữ 11px. */
.ts .ts-the-nhan a{background:#f5c518;color:#141414;font-weight:700}
.ts .ts-the-nhan a:hover{filter:brightness(1.06)}
:root[data-theme="dark"] .ts .ts-the-nhan a,
.ts.toi .ts-the-nhan a{background:#f0c040;color:#141414}
/* ③ Byline: tên tác giả gạch chân (dấu hiệu bấm được), mốc cập nhật đứng dòng riêng
      cho dễ quét mắt — chức danh lùi xuống sau, không tranh chỗ với mốc thời gian. */
.ts .ts-tacgia-dong .d1 b{text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--line)}
.ts .ts-tacgia-dong .d2{font-size:12.5px}
/* Tiêu đề DÀN HẾT chiều ngang, không bó trong cột chữ 760px.
   Lý do: cỡ chữ tiêu đề lớn (40–56px) mà đo dòng hẹp thì gãy dòng sớm, một câu ngắn
   cũng thành ba dòng và mất hết uy lực. Cột chữ hẹp là để đọc ĐOẠN VĂN, không phải
   để đọc TIÊU ĐỀ. Thân bài vẫn giữ 760px như cũ. */
.ts .ts-bai-dau{max-width:none}
.ts .ts-bai-dau h1{font:700 clamp(32px,4.4vw,56px)/1.06 var(--serif);letter-spacing:-.02em;
  max-width:20ch;margin:0 0 20px}
@media (min-width:1080px){.ts .ts-bai-dau h1{max-width:24ch}}
.ts .ts-bai-dau .ts-tacgia-dong{max-width:none}
/* Tiêu đề: BỎ hẳn giới hạn bề ngang. Kẹp 24ch làm chữ gãy dòng khi còn thừa gần
   400px trống bên phải — nhìn ra ngay khi đặt cạnh một trang tin thật.
   Tiêu đề được phép chạy hết bề ngang khối nội dung; chỉ ĐOẠN VĂN mới cần đo dòng hẹp. */
.ts .ts-bai-dau h1{max-width:none}
@media (min-width:1080px){.ts .ts-bai-dau h1{max-width:none;font-size:clamp(40px,3.9vw,58px)}}
/* Nhãn nhỏ và sát nhau hơn, đúng tỉ lệ với tiêu đề lớn */
.ts .ts-the-nhan.tinh a{padding:4px 9px;font-size:10.5px;letter-spacing:.08em}

/* ── KHỐI ĐƯỢC TÀI TRỢ (tầng ②, assets/goi-y.js) — thêm 13/08/2026 ────────────
   Thẻ MƯỢN đúng lớp .ts-the.ngang của giao diện để nằm trong mạch đọc thay vì
   trông như miếng dán ngoài. Phần RIÊNG duy nhất là nhãn "Được tài trợ": mượn
   hình thức thì được, giấu danh tính thì không.
   Khối chỉ tồn tại khi đã có mục thật để bày — goi-y.js lo, CSS không cần
   trạng thái rỗng, và cũng KHÔNG được đặt min-height ở đây (đặt là tạo ra đúng
   cái khung xám mà thủ pháp ② sinh ra để tránh). */
.goiy-tt{display:block;margin:34px 0}
.goiy-tt .ts-gach{margin:0 0 16px}
.goiy-tt .ts-gach h4{margin:0 0 8px;font:700 12.5px/1.2 var(--ui);
  text-transform:uppercase;letter-spacing:.11em;color:var(--tx2)}
.goiy-tt .ts-the.ngang{margin:0 0 18px}
.goiy-tt .ts-the.ngang:last-child{margin-bottom:0}
.ts-the.ngang.qc .b{margin-top:2px}
.ts-the.ngang.qc .qc-nhan{display:inline-block;padding:2px 7px;border:1px solid var(--line);
  border-radius:3px;background:var(--bg2);color:var(--tx2);
  font:600 10.5px/1.5 var(--ui);text-transform:uppercase;letter-spacing:.09em}
/* Cột phải hẹp: giữ nhãn nhỏ, không để nhịp dòng của cột bị thẻ quảng cáo phá. */
.ts .ts-cot-bai .goiy-tt{margin:0 0 22px}
.ts .ts-cot-bai .goiy-tt .ts-gach h4{font:700 12.5px/1.2 var(--ui);
  text-transform:uppercase;letter-spacing:.11em;color:var(--tx2)}
.ts .ts-cot-bai .goiy-tt .ts-the.ngang{margin:0 0 16px}

/* ⭐ CỘT PHẢI XẾP DỌC — ẢNH TRÊN, CHỮ DƯỚI (Tuyên chốt 17/08/2026)
   Cột phải chỉ rộng 320px. Chia đôi thành 104px ảnh + ~190px chữ thì HỤT CẢ HAI VẾ:
   ảnh phối cảnh thu về 104px chỉ còn là một vệt màu — không đọc ra đang xem cảnh gì,
   tức mất chính thứ làm người ta bấm; còn cột chữ 190px thì tiêu đề gãy 3–4 dòng.
   Xếp dọc: ảnh rộng gấp ba (320×200) và chữ có trọn bề ngang cột.

   ⚠ ÁP CHO CẢ thẻ được tài trợ LẪN "Bài viết mới" — hai loại phải cùng một hình dạng.
   Cho riêng thẻ quảng cáo to hơn là làm đúng cái điều luật khối ② cấm: mượn hình thức
   của giao diện thì được, nổi hơn nội dung thật thì không.

   Chỉ đổi ở khổ ≥1080px — đó là khổ có cột 320px. Dưới ngưỡng đó cột phải nằm dưới
   bài và trải hết bề ngang, thẻ 104px + chữ đang đọc tốt, không phải đụng. */
@media (min-width:1080px){
  .ts .ts-cot-bai .ts-the.ngang{grid-template-columns:minmax(0,1fr);gap:10px;margin:0 0 24px}
  .ts .ts-cot-bai .ts-the.ngang h3{font-size:18px;line-height:1.3}
  /* ⚠ BỎ DÍNH THEO CUỘN, và phải bỏ CÙNG LÚC với việc xếp dọc. Cột dính mà cao hơn
     khung nhìn thì phần dưới của nó KHÔNG BAO GIỜ tới được: nó đứng im ở top:96px
     trong khi người ta cuộn qua. Thẻ xếp dọc làm cột cao lên ~2,5 lần ⇒ để dính là
     chôn mất mấy thẻ cuối, mà trang vẫn chạy nên không cổng nào báo.
     Rail chia sẻ (.ts-chiase) vẫn dính — nó thấp, dính vẫn đúng. */
  .ts .ts-cot-bai{position:static}
}

/* ── BẢNG TRONG BÀI: hộp cuộn ngang — vá 13/08/2026 ──────────────────────────
   md.mjs của xưởng toà soạn vẫn bọc mỗi bảng bằng <div class="bang-cuon">, nhưng
   TOÀN REPO KHÔNG CÓ DÒNG CSS NÀO cho lớp đó: hộp có tên "cuộn" mà để mặc định
   overflow-x:visible, nên bảng 4 cột đẩy toác cột chữ ra 520px trong khung 362px
   ⇒ mỗi bài trên điện thoại đều cuộn ngang được 144px, chữ đứt bên mép phải.
   Đo trên BẢN LIVE khổ 360 và 390 ngày 13/08/2026, không phải trên máy.
   Cổng quét bố cục không bắt vì bảng nằm trong hộp mà nó tưởng là hộp cuộn. */
.bang-cuon{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
/* Chốt chặn thứ hai: track 1fr mặc định là minmax(AUTO,1fr) nên bất kỳ đứa con nào
   có min-content lớn cũng kéo giãn được cả cột bài. minmax(0,…) cắt đường đó, để
   lần sau có thêm một khối "quên cuộn" thì nó tự vỡ trong hộp của nó, không lôi
   cả trang đi theo. */
.ts .ts-bai-khung{grid-template-columns:minmax(0,1fr)}
/* ⚠ NGƯỠNG BA CỘT PHẢI LÀ 1080px, KHÔNG PHẢI 720px — và chỉ được khai ở ĐÚNG MỘT CHỖ.
   Có lúc file này mang hai luật cho cùng một lưới ở hai ngưỡng khác nhau; luật đứng
   sau thắng, nên máy tính bảng 768px chạy ba cột và cột chữ còn 277px — khối "ai nên /
   ai không nên" bị bóp xuống 132px, chữ rớt dọc từng từ một. Cổng bố cục bắt được
   (VERTICAL_TEXT), mắt thường lướt qua thì không. Thêm ngưỡng mới thì SỬA Ở ĐÂY. */
@media (min-width:1080px){
  .ts .ts-bai-khung{grid-template-columns:64px minmax(0,1fr) 320px}
}

/* ---- Thẻ tài trợ LỚN trong bài (ô "giua") — 13/09/2026, học khối native của REB:
   ảnh 16:9 tràn cột · kicker đọc như tên chuyên mục · tiêu đề đúng font tiêu đề bài.
   Cùng nhịp thị giác với ảnh minh hoạ của bài nên không cắt mạch đọc. */
.ts-the.qc.lon{display:block;margin:28px 0;padding:0 0 18px;border-bottom:1px solid var(--line)}
.ts-the.qc.lon .anh{display:block;margin:0 0 12px;border-radius:6px;overflow:hidden;background:var(--bg2)}
.ts-the.qc.lon .anh img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.ts-the.qc.lon .kicker{font:600 12px/1.3 var(--ui);text-transform:uppercase;letter-spacing:.09em;color:var(--tx2);margin:0 0 6px}
.ts-the.qc.lon h3{font:700 23px/1.28 var(--serif);margin:0 0 8px}
.ts-the.qc.lon p{margin:0 0 10px;font-size:16px;line-height:1.55;color:var(--tx2)}
.ts-the.qc.lon .b{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ts-the.qc.lon .qc-nhan{display:inline-block;padding:2px 7px;border:1px solid var(--line);border-radius:3px;
  background:var(--bg2);color:var(--tx2);font:600 10.5px/1.5 var(--ui);text-transform:uppercase;letter-spacing:.09em}
.ts-the.qc.lon .c{font:700 15px/1.3 var(--ui);color:var(--tx)}
@media (max-width:640px){.ts-the.qc.lon h3{font-size:20px}}

/* ---- "Đọc tiếp" — bài kế cùng dự án nối vào đuôi bài (doc-tiep.js), KHÔNG đổi URL. */
.ts .ts-doctiep{margin:8px 0 0}
@media (min-width:1024px){.ts .ts-doctiep{grid-column:2}}
.ts .ts-doctiep .ts-gach{margin:0 0 14px}
.ts .ts-doctiep .ts-bai{max-width:760px}
.ts .ts-doctiep .ts-noi-tiep{margin:26px 0 0;padding-top:22px;border-top:3px solid var(--tx)}
.ts .ts-doctiep .ts-noi-tiep h2.ts-tieu-de-ke{font:800 28px/1.22 var(--serif);margin:0 0 14px}
@media (max-width:640px){.ts .ts-doctiep .ts-noi-tiep h2.ts-tieu-de-ke{font-size:23px}}

/* ══ CHẤM TRANG CHỦ QUA CHATGPT 18/09/2026 (6,7/10 — hỏng ở thứ tự thông tin trên điện
   thoại, không ở visual). Ba việc "1 giờ": (1) thời tiết + 4 công cụ trên mobile từ hai khối
   cao ~700px thành hai DÒNG; (2) chữ thân 14,5/13/10,5 → 15,5/13,5/12 cho người 40–65;
   (3) H1 + câu định vị, gộp bốn khối gợi ý trùng nhau còn hai. Số cũ ghi cạnh số mới. */
.ts .ts-dinhvi{margin:24px auto 0;padding:0 20px 14px;border-bottom:1px solid var(--line)}
.ts-dinhvi h1{font:700 22px/1.25 var(--serif);margin:0 0 3px;letter-spacing:-.01em}
.ts-dinhvi p{margin:0;font-size:14.5px;line-height:1.5;color:var(--tx2)}
.ts-3cot.hai{grid-template-columns:.9fr 1.4fr}
/* cột pháp lý nay rộng gấp rưỡi: thẻ có ảnh xếp NGANG kẻo một tấm ảnh chiếm cả 600px cao */
.ts-3cot.hai .c3 .ts-the{display:grid;grid-template-columns:260px minmax(0,1fr);gap:18px;align-items:start;margin-top:14px}
.ts-3cot.hai .c3 .ts-the .anh{grid-row:span 3;position:relative;border-radius:4px;overflow:hidden;background:var(--bg2)}
.ts-3cot.hai .c3 .ts-the .anh img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
@media (max-width:860px){
  .ts-3cot.hai{grid-template-columns:1fr}
  .ts-3cot.hai .c3 .ts-the{grid-template-columns:1fr}
  .ts-3cot.hai .c3 .ts-the .anh{grid-row:auto}
  .ts-dinhvi h1{font-size:20px}
  .ts .ts-dinhvi{margin-top:16px;padding:0 14px 12px}
  /* thời tiết → một dòng: icon · 25°C · Nha Trang · Ít mây. Giấu ẩm/gió/5 ngày — desktop vẫn đủ. */
  .ts-troi{display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 14px;text-align:left}
  .ts-troi .now{gap:8px}
  .ts-troi .now .tr,.ts-troi #troiIcon svg{width:28px;height:28px}
  .ts-troi .do{font-size:24px}
  .ts-troi .do sup{font-size:11px}
  .ts-troi .tp{font-size:15px;margin:0}
  .ts-troi .mo{font-size:13px}
  .ts-troi .hai,.ts-troi .tuan{display:none}
  /* 4 công cụ → một hàng cuộn ngang, nút nằm ngang icon+chữ */
  .ts-mxh{display:flex;overflow-x:auto;scrollbar-width:none;gap:0}
  .ts-mxh::-webkit-scrollbar{display:none}
  .ts-mxh a{flex:0 0 auto;display:flex;flex-direction:row;align-items:center;gap:7px;padding:10px 13px;white-space:nowrap;font-size:13.5px;border-right:1px solid var(--line)}
  .ts-mxh a:last-child{border-right:0}
  .ts-mxh svg{width:18px;height:18px}
}
/* cỡ chữ thân + meta (cũ → mới) */
.ts-the p{font-size:15.5px;line-height:1.6}          /* 14.5 */
.ts-the .b,.ts-td .b,.ts-ds span,.ts-toi .b,.ts-duan-khoi .lon .b{font-size:13.5px} /* 12.5 */
.ts-ds p{font-size:15px;line-height:1.55}            /* 13.8 */
.ts-cm p,.ts-tacgia p{font-size:15px;line-height:1.6}  /* 14 */
.ts-the.ngang p{font-size:15px}                      /* 14 */
.ts-meta{font-size:13.5px}                           /* 13 */
.ts-tacgia .ch,.ts-tacgia h3 span{font-size:13px}    /* 12 */
.ts-logo small{font-size:11.5px}                     /* 10.5 */
.ts-mxh a{font-size:13.5px}                          /* 12.5 */
.ts-tukhoa a{font-size:14px}                         /* 13.5 */