/* Chuyên Gia Trung Quốc — web tĩnh. Bảng màu lấy từ logo v3, không tự pha màu mới. */
*{box-sizing:border-box}
/* ── ẢNH KHÔNG ĐƯỢC BÓP MÉO (sếp báo 27/09/2026: "đọc bài trên điện thoại ảnh bị bóp méo")
   GỐC LỖI: thẻ <img> nào có thuộc tính width/height (ví dụ width="800" height="1000") mà CSS
   chỉ đặt `width:100%` thì chiều cao LẤY THEO THUỘC TÍNH ⇒ ảnh bị KÉO CAO gấp đôi.
   Đo thật ở khổ 390–500px: ảnh nổi bật hiển thị 410×1000 trong khi gốc 800×1000 → lệch 48,8%.
   `height:auto` dưới đây thắng thuộc tính (CSS luôn thắng presentational hint) — luật này áp cho
   MỌI ảnh, còn các ảnh cố ý cố định cỡ (logo chân trang, thẻ tác giả) có luật riêng đè lên. */
img{max-width:100%;height:auto}
:root{--teal:#1FA8BC;--gold:#FFB000;--dam:#0B2B33;--kem:#F7F3E8;--nhat:#D6EDF1;--vien:#e3e6e8;--xanh:#1FA8BC;--font:"Times New Roman",Times,serif;}
/* ── TIÊU ĐỀ: ĐẬM + MÀU THƯƠNG HIỆU (sếp chốt 26/09/2026) ───────────────────────
   Tiêu đề chính, tiêu đề phụ, tiêu đề con đều in đậm và lấy màu trong bảng logo v3.
   Ba cấp dùng ba màu khác nhau để mắt phân biệt được cấp nào là cấp nào. Không tự pha
   màu mới ngoài bảng. */
h1,h2,h3,h4{font-weight:800}
h1{color:var(--dam);font-weight:900;letter-spacing:.2px}
h2{color:#0E6E7C}
h3{color:var(--dam)}
h4{color:var(--dam);font-size:15px}
.theodoi{display:inline-block;margin:0 0 14px;padding:7px 14px;border:1px solid var(--teal);
  border-radius:999px;background:#fff;color:var(--dam);font-size:13.5px;font-weight:600}
.theodoi b{color:#0E6E7C;font-size:15px}
.theodoi span{color:#5A6A70;font-weight:500;font-size:12px}
.thuvien{margin:30px 0 8px}
.thuvien h3{margin:0 0 14px}
.luoi-anh{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.luoi-anh img{width:100%;height:auto;border-radius:10px;border:1px solid var(--vien);display:block}
.luoi-anh img{aspect-ratio:3/2;object-fit:cover;width:100%;height:auto}
/* Trước đây ép `aspect-ratio:4/3;object-fit:cover`: ảnh dọc 4:5 bị CẮT CỤT (đo được: ảnh gốc
   tỉ lệ 0,667 hiển thị 1,333 — mất hơn nửa khung). Nay giữ nguyên tỉ lệ thật. */
@media(max-width:760px){.luoi-anh{grid-template-columns:repeat(2,1fr);gap:8px}}
@media(max-width:480px){.luoi-anh{grid-template-columns:1fr}}
.chu-anh{margin:10px 0 0;font-size:12.5px;color:#5A6A70}
.luotxem{display:inline-block;margin:6px 0 0;font-size:13px;font-weight:600;color:#5A6A70;
  background:#fff;border:1px solid var(--vien);border-radius:999px;padding:4px 12px}
.luoi-anh figure{margin:0}
/* CUỐI TRANG — logo 40×40 + bộ đếm lượt xem.
   Sếp chốt 27/09/2026 (nguyên văn): "chỉ chèn duy nhất logo nhỏ 40 px x 40 px ko được lớn hơn.
   chèn vào cuối trang web." ⇒ khoá cứng cả width/height/max-* để KHÔNG có gì kéo to lên được,
   kể cả thuộc tính thẻ hay tỉ lệ ảnh gốc (bài học: thẻ <img> có width/height còn CSS chỉ đặt
   bề ngang ⇒ trình duyệt kéo cao ⇒ méo). */
.cuoi-trang{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
  margin:16px 0 8px;padding-top:14px;border-top:1px solid var(--vien)}
.dem-luot{font-size:13px;font-weight:600;color:#0B2B33;letter-spacing:.2px}
.logo-nho{display:inline-flex;align-items:center;flex:0 0 auto;line-height:0}
.logo-nho img{width:40px!important;height:40px!important;max-width:40px!important;
  max-height:40px!important;display:block;border-radius:8px}
@media(max-width:640px){.cuoi-trang{justify-content:flex-start}}
.luoi-anh figcaption{font-size:11.5px;line-height:1.35;color:#5A6A70;padding:5px 2px 0}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--kem);color:#15242a;
  font:16px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
a{color:#0e6b7a;text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1080px;margin:0 auto;padding:0 18px}
header{background:var(--dam);color:#fff;padding:14px 0}
header .wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* Logo đầu trang dùng BIỂU TƯỢNG CHÍNH THỨC (anh Frankie gửi 29/09/2026):
   chữ 中 trắng trong vòng vàng trên nền teal. Trước đây vẽ tay bằng CSS nên
   không khớp logo thật. Giữ nguyên <div class="ava">中</div> trong 152 tệp HTML,
   chỉ ẩn chữ 中 đi bằng font-size:0.
   ⛔ KHÔNG sửa từng tệp HTML: 152 chỗ, sửa tay là chắc chắn sót. */
.ava{width:42px;height:42px;border-radius:50%;
  background:url(/chuyengiatrungquoc/assets/img/cg-logo-vuong.webp) center/cover no-repeat;
  border:0;display:flex;align-items:center;justify-content:center;
  font-size:0;color:transparent;flex:0 0 auto;overflow:hidden}
.ten{font-weight:800;letter-spacing:.3px;font-size:17px;line-height:1.2}
.kh{font-size:11px;letter-spacing:2.4px;color:var(--gold);font-weight:700}
nav{margin-left:auto;display:flex;gap:16px;flex-wrap:wrap;font-size:14px}
nav a{color:#cfe9ee}
nav a:hover{color:#fff}
/* ── LOGO ĐẦU TRANG BẤM ĐƯỢC (sếp chốt 26/09/2026) ──────────────────────────────
   Huy hiệu + tên trang bọc trong <a href="/"> để bấm về trang chủ. Giao diện GIỮ NGUYÊN:
   <a> là flex giống header .wrap cũ, và ép màu chữ về trắng vì luật `a{color:#0e6b7a}`
   ở trên sẽ nhuộm tên trang thành xanh đậm trên nền xanh đậm ⇒ mất hút tên trang. */
header a.logo{display:flex;align-items:center;gap:12px;color:#fff;flex:0 0 auto}
header a.logo:hover{text-decoration:none}
header a.logo:hover .ten{text-decoration:underline}
.hero{background:var(--dam);color:#fff;padding:0 0 26px}
.hero .hop{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:center}
@media(max-width:760px){.hero .hop{grid-template-columns:1fr}nav{margin-left:0;width:100%}}
.hero img{width:100%;height:auto;border-radius:10px;display:block}
.hero h1{font-size:34px;line-height:1.22;margin:.2em 0 .3em}
.hero .han{color:var(--gold);letter-spacing:6px;font-size:15px}
.hero p{color:#cfe9ee;max-width:44ch}
.nut{display:inline-block;background:var(--gold);color:#3a2600;font-weight:800;padding:11px 20px;
  border-radius:8px;margin-top:14px}
.nut:hover{text-decoration:none;filter:brightness(1.06)}
section{padding:34px 0}
h2.muc{font-size:13px;letter-spacing:3px;color:#0E6E7C;font-weight:800;margin:0 0 16px;
  text-transform:uppercase}
.luoi{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:860px){.luoi{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.luoi{grid-template-columns:1fr}}
.the{background:#fff;border:1px solid var(--vien);border-radius:10px;overflow:hidden;display:block;color:inherit}
.the:hover{text-decoration:none;box-shadow:0 6px 20px rgba(11,43,51,.10);transform:translateY(-2px);
  transition:.16s}
.the img{width:100%;height:auto;display:block}
.the .tv{padding:12px 14px 15px}
.the .cm{font-size:11px;letter-spacing:1.6px;color:#0E6E7C;font-weight:800;text-transform:uppercase}
.the h3{margin:6px 0 5px;font-size:18px;line-height:1.32}
.the p{margin:0;font-size:13.5px;color:#4b6068;line-height:1.5}
article{background:#fff;border:1px solid var(--vien);border-radius:12px;padding:26px;margin:26px 0}
article h1{font-size:31px;line-height:1.24;margin:.15em 0 .1em}
article .han{color:#0E6E7C;letter-spacing:7px;font-size:15px;margin-bottom:4px}
.ngay{display:inline-block;margin-left:10px;font-size:12px;color:#7b8b91}
article .tag{display:inline-block;background:var(--nhat);color:#0e5a66;font-size:11px;font-weight:800;
  letter-spacing:1.6px;padding:4px 9px;border-radius:5px;text-transform:uppercase}
article .kh{color:#8a6a00;font-size:12px;letter-spacing:2.6px;font-weight:800;margin:10px 0}
article figure{margin:18px 0}
article figure img{width:100%;height:auto;border-radius:10px;display:block}
article figcaption{font-size:12px;color:#77878d;margin-top:7px}
article .than p{margin:0 0 15px}
article blockquote{margin:20px 0;padding:14px 20px;background:var(--kem);border-left:4px solid var(--gold);
  font-style:italic;color:#2c4048;border-radius:0 8px 8px 0}
.cta{margin-top:26px;padding:18px 20px;background:var(--dam);color:#fff;border-radius:10px;
  display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.cta b{color:var(--gold)}
.cta .nut{margin-top:0}
.crumb{font-size:13px;color:#6a7c83;margin:18px 0 0}
footer{background:var(--dam);color:#b9d2d8;padding:28px 0;margin-top:20px;font-size:13.5px}
footer a{color:var(--nhat)}
footer .hop{display:grid;grid-template-columns:2fr 1fr 1fr;gap:22px}
@media(max-width:760px){footer .hop{grid-template-columns:1fr}}
footer h4{color:#fff;margin:0 0 8px;font-size:13px;letter-spacing:1.5px;text-transform:uppercase}
footer p{margin:0 0 6px}
/* ── Trang khác của tác giả: đối xứng với khối web Kiếm Tiền Từ Số 0 dành cho web này ── */
.khoi-tac-gia{padding:26px 0 6px}
.khoi-tac-gia .td{display:flex;align-items:baseline;gap:14px;
  border-bottom:2px solid var(--dam);padding-bottom:9px;margin-bottom:2px}
.khoi-tac-gia h2{margin:0;font-size:22px;color:var(--dam)}
.khoi-tac-gia .mo{margin-left:auto;font-weight:600;color:#0E6E7C;
  text-decoration:none;white-space:nowrap;font-size:13px}
/* ── KHỐI LINK: khổ lấy ĐÚNG theo khối đối ứng bên web Kiếm Tiền Từ Số 0 ────────────
   Sếp báo 27/09/2026: *"để như bạn đang làm, quá to và nhìn rất khó chịu"*.
   Trước: logo 96px · tiêu đề 26px · 3 ảnh 132×165 nằm DƯỚI nút (thẻ cao, nặng).
   Nay:   logo 64px · tiêu đề 21px · 3 ảnh 96×96 VUÔNG đặt thành CỘT PHẢI · ẩn ảnh khi <900px.
   Muốn sửa cỡ thì sửa Ở ĐÂY, và sửa cả bên kia cho khỏi lệch. */
.card-tac-gia{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;
  background:#fff;border:2px solid var(--dam);border-radius:4px;padding:22px 24px;
  box-shadow:7px 7px 0 0 var(--dam);text-decoration:none;color:inherit;margin-top:18px}
.card-tac-gia:hover{box-shadow:9px 9px 0 0 var(--dam);transform:translate(-1px,-1px)}
.card-tac-gia .mark{width:64px;height:64px;display:block;flex:0 0 auto}
.card-tac-gia .chu{display:flex;flex-direction:column;gap:3px}
.card-tac-gia h3{margin:0;font-size:21px;color:var(--dam);letter-spacing:-.4px}
.card-tac-gia .khau{color:#0E6E7C;font-weight:800;letter-spacing:.16em;font-size:11.5px;
  text-transform:uppercase;margin:0}
.card-tac-gia .mota{color:#33474f;font-size:15.5px;line-height:1.55;margin-top:5px;max-width:56ch;white-space:normal;display:block}
.card-tac-gia .nut{align-self:flex-start;background:var(--teal);color:#fff;font-weight:700;
  padding:10px 16px;border-radius:3px;font-size:14px;margin-top:11px}
.card-tac-gia .anh{display:flex;gap:8px}
.card-tac-gia .anh img{width:96px;height:96px;object-fit:cover;border:1.5px solid var(--dam);
  border-radius:3px;display:block}
@media(max-width:900px){.card-tac-gia{grid-template-columns:auto 1fr}.card-tac-gia .anh{display:none}}
@media(max-width:620px){.card-tac-gia{grid-template-columns:1fr;padding:18px}
  .card-tac-gia .mark{width:54px;height:54px}}
footer .banner-khac{display:inline-flex;align-items:center;gap:10px;margin:0 0 10px;padding:8px 12px;
  background:#ffffff14;border:1px solid #ffffff2e;border-radius:10px;text-decoration:none}
footer .banner-khac img{display:block;width:38px;height:38px;border-radius:6px}
footer .banner-khac b{color:#fff;font-size:13.5px;display:block;line-height:1.25}
footer .banner-khac small{color:#b9d2d8;font-size:11.5px;line-height:1.2;display:block}
.chu{font-size:11.5px;color:#7ea0a8;margin-top:16px;border-top:1px solid #1c3f49;padding-top:12px}
/* ── LOGO TRANG Ở TRANG GIỚI THIỆU (sếp chốt 26/09/2026) ─────────────────────────
   Canh giữa, rộng 360px. `max-width:100%` để máy hẹp không tràn ngang. */
.logo-trang{display:block;width:100%;max-width:1000px;height:auto;margin:0 auto 26px;border-bottom:1px solid var(--vien);padding-bottom:22px}
/* ── NÚT ĐIỀU HƯỚNG CUỐI BÀI (sếp chốt 26/09/2026) ──────────────────────────────
   Quay lại (lịch sử trình duyệt) + Bài trước / Bài sau theo đúng thứ tự đang sinh. */
.dieuhuong{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:24px 0 2px;
  padding-top:18px;border-top:1px solid var(--vien)}
.dieuhuong a{display:inline-block;max-width:100%;padding:9px 15px;border-radius:8px;
  border:1px solid var(--vien);background:#fff;color:var(--dam);font-size:14px;
  font-weight:700;line-height:1.35}
.dieuhuong a:hover{text-decoration:none;border-color:#0E6E7C;color:#0e6b7a}
.dieuhuong .quaylai{border-color:var(--gold);background:var(--kem)}
.dieuhuong .quaylai:hover{border-color:var(--gold);background:var(--gold);color:var(--dam)}
.dieuhuong .sau{margin-left:auto;background:var(--teal);border-color:#0E6E7C;color:#fff}
.dieuhuong .sau:hover{background:var(--teal);border-color:#0E6E7C;color:#fff;
  filter:brightness(1.06)}
/* ── KHỐI TIN KINH TẾ 24H (đầu trang Kinh tế) ───────────────────────────────────── */
.tin-box{background:#fff;border-top:3px solid var(--gold);padding:26px 0 30px}
.tin-moc{font-size:12.5px;color:#5A6A70;margin:0 0 16px}
.tin-hop{display:grid;grid-template-columns:.9fr 1.1fr;gap:24px;align-items:start}
@media(max-width:820px){.tin-hop{grid-template-columns:1fr}}
.tin-anh{width:100%;height:auto;border-radius:10px;display:block;border:1px solid var(--vien)}
.tin-chu-anh{font-size:11.5px;color:#7b8b91;margin:6px 0 0}
.tin-ds{list-style:none;margin:0;padding:0;counter-reset:t}
.tin-ds li{display:flex;gap:10px;align-items:baseline;padding:9px 0;border-bottom:1px solid #eef1f2}
.tin-ds li:last-child{border-bottom:0}
.tin-so{flex:0 0 26px;height:22px;border-radius:5px;background:var(--nhat);color:#0e5a66;
  font-size:12px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.tin-ds a{color:#15242a;font-weight:600;font-size:15px;line-height:1.45}
.tin-ds a:hover{color:#0e6b7a}
.tin-nguon{flex:0 0 auto;margin-left:auto;font-size:12px;color:#7b8b91;white-space:nowrap}
@media(max-width:560px){.tin-nguon{display:block;margin:4px 0 0}.tin-ds li{flex-wrap:wrap}}
.tin-chu{font-size:12px;color:#7b8b91;margin:16px 0 0}
/* ── NHÂN VẬT LỊCH SỬ: lưới 100 tên ────────────────────────────────────────────── */
.nv-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;
  list-style:none;margin:18px 0 0;padding:0}
.nv-luoi li{background:#fff;border:1px solid var(--vien);border-radius:9px;padding:11px 13px}
.nv-luoi b{display:block;color:var(--dam);font-size:15px}
.nv-luoi span{font-size:12.5px;color:#5A6A70}
.nv-luoi a{font-size:12.5px;font-weight:700;color:#0e6b7a}


/* ── BẢNG TRONG BÀI ────────────────────────────────────────────────────────
   Thêm 29/09/2026. VÌ SAO để ở đây chứ không chèn <style> vào từng bài:
   chèn riêng vào bài sẽ ĐÈ lên quy tắc chung `article figure img` (bộ chọn
   .than figure img có độ ưu tiên cao hơn) ⇒ ảnh trong bài MẤT khung bo góc,
   trông lệch hẳn các bài khác. Để ở tệp chung thì mọi bài giống nhau. */
article .than table{width:100%;border-collapse:collapse;margin:14px 0 20px;font-size:14.5px}
article .than th,article .than td{border:1px solid var(--vien);padding:8px 11px;text-align:left;vertical-align:top}
article .than th{background:var(--teal);color:#fff;font-weight:600}
article .than tbody tr:nth-child(even){background:var(--nhat)}
article .than td:first-child{font-weight:600}
@media(max-width:640px){
  article .than table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:13.5px}
  article .than th,article .than td{padding:6px 9px}
}

/* BỔ SUNG 30/09/2026 — trợ năng (Lighthouse chỉ 87):
   liên kết chân trang trước đây #D6EDF1 trên nền #0B2B33, chữ xung quanh #B9D2D8
   ⇒ chỉ 1,29:1 nên KHÔNG phân biệt được liên kết với chữ thường.
   Nay: vàng nhấn + gạch chân (vừa đủ tương phản, vừa rõ là liên kết). */
footer a{color:#FFD07A;text-decoration:underline;text-underline-offset:2px}
footer a:hover{color:#fff}

/* BỔ SUNG 30/09/2026 — tương phản chữ (Lighthouse trợ năng).
   Giữ #1FA8BC/#FFB000 cho viền & nền; CHỮ trên nền sáng dùng bản đậm để đạt ≥4,5:1. */
#tt-tuong-tac .tt-chip span,#tt-tuong-tac .tt-cap,#tt-tuong-tac .tt-so i,
.the > .tv > .cm,.the .chu-anh,.theodoi span{color:#4A5C63}
#tt-tuong-tac .tt-ky,#tt-tuong-tac .tt-so b,#tt-tuong-tac .tt-moi,
h2,h2.muc,.muc,.theodoi b,.the > .tv > a{color:#0E6E7C}
.the > .tv > a{font-weight:600}

/* Dòng nguồn — làm đậm để tách khỏi chữ trong bài (luật 01/10/2026) */
.nd .nguon{font-size:.88em;line-height:1.65;color:#4a5a60;border-top:1px solid #e2e8ea;
  padding-top:10px;margin-top:22px}
.nd .nguon strong{font-weight:700;color:#2c3e44}



/* Hashtag cuối bài + trang chủ đề (01/10/2026) */
.tags{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0 0}
.tags a{display:inline-block;background:#eef7f9;color:#12707f;border:1px solid #cfe7ec;
  border-radius:999px;padding:5px 12px;font:600 12.5px/1 var(--font);text-decoration:none}
.tags a:hover{background:#1FA8BC;color:#fff;border-color:#1FA8BC}
.tags a .sl{color:#7b8b91;font-weight:400;margin-left:4px}
.luoi-tag{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin:18px 0}
@media(max-width:900px){.luoi-tag{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.luoi-tag{grid-template-columns:1fr}}
.the-tag{display:block;background:#fff;border:1px solid var(--vien);border-radius:10px;
  padding:13px 15px;text-decoration:none}
.the-tag:hover{border-color:var(--xanh);box-shadow:0 3px 12px rgba(31,168,188,.12)}
.the-tag b{display:block;color:#12313a;font:700 14.5px/1.42 var(--font)}
.the-tag span{color:#7b8b91;font-size:12px}

/* Khối nghe tóm tắt (thử nghiệm 01/10/2026) */
.nghe{background:#f4fafb;border:1px solid #cfe7ec;border-left:4px solid #1FA8BC;border-radius:10px;
  padding:14px 16px;margin:18px 0 22px;display:flex;flex-direction:column;gap:8px}
.nghe b{font:700 14px/1.3 var(--font);color:#0d4b57}
.nghe audio{width:100%;max-width:430px;height:34px}
.nghe span{font-size:12px;color:#7b8b91}

/* Bản tin kinh tế — LƯỚI 4 Ô VUÔNG mỗi dòng (anh Frankie 01/10/2026) */
.tin-luoi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:8px 0 18px}
@media(max-width:1000px){.tin-luoi{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.tin-luoi{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.tin-luoi{grid-template-columns:1fr}}
.tin-the{position:relative;display:flex;flex-direction:column;gap:6px;
  aspect-ratio:3/2;overflow:visible;background:#fff;border:1px solid var(--vien);border-radius:10px;
  padding:24px 13px 11px;transition:border-color .15s,box-shadow .15s}
.tin-the:hover{border-color:var(--xanh);box-shadow:0 4px 14px rgba(31,168,188,.14)}
.tin-the .tin-so{position:absolute;top:-9px;left:12px;background:var(--gold);color:#1d1d1d;font:700 12px/1 var(--font);padding:5px 9px;border-radius:7px;letter-spacing:.02em;z-index:5;box-shadow:0 2px 6px rgba(0,0,0,.22);border:2px solid #fff}
.tin-the .tin-td{font:700 13px/1.34 var(--font);color:#12313a;text-decoration:none;margin-top:0;
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;
  overflow-wrap:break-word;word-break:break-word;hyphens:auto}
.tin-the .tin-td:hover{color:var(--xanh);text-decoration:underline}
.tin-the .tin-nguon{margin:6px 0 0;font-size:11px;line-height:1.4;color:#7b8b91;
  white-space:normal;overflow-wrap:break-word}
.tin-the .tin-td .tin-nho{display:block;font-weight:400;font-size:11px;color:#8fa2a8;margin-top:4px}

/* Masthead bản tin — «CHUYÊN GIA TRUNG QUỐC NEWS» */
.tin-dau{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  border-bottom:2px solid var(--xanh);padding-bottom:12px;margin:0 0 12px}
.tin-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.tin-logo .o{width:42px;height:42px;border-radius:50%;background:var(--xanh);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font:700 21px/1 "Times New Roman",serif;flex:0 0 auto}
.tin-logo .chu b{display:block;font:700 16px/1.1 var(--font);color:#0d4b57;letter-spacing:.01em}
.tin-logo .chu i{display:block;font-style:normal;font:700 10.5px/1.4 var(--font);
  color:var(--gold);letter-spacing:.18em;margin-top:2px}
.tin-logo .news{font:700 12px/1 var(--font);color:#fff;background:var(--xanh);
  padding:5px 10px;border-radius:5px;letter-spacing:.06em}
.tin-dau .tin-ngay{margin-left:auto;text-align:right;font-size:11.5px;color:#7b8b91;line-height:1.5}

/* Nghe bản tin kinh tế (việc 1 — anh Frankie 01/10/2026) */
.nghe-tin{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#f4fafb;border:1px solid #cfe7ec;border-left:4px solid #1FA8BC;border-radius:10px;padding:11px 15px;margin:0 0 16px}
.nghe-tin .nut-nghe{cursor:pointer;background:#1FA8BC;color:#fff;border-radius:7px;
  padding:8px 15px;font:700 13px/1 var(--font);user-select:none}
.nghe-tin .nut-nghe:hover{background:#188a9c}
.nghe-tin audio{max-width:360px;height:32px;flex:1 1 220px}
.nghe-tin .chu-thich{font-size:11.5px;color:#7b8b91}

/* Trang Giới thiệu + module góp ý công khai (01/10/2026) */
.gt-muc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0 8px}
@media(max-width:900px){.gt-muc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.gt-muc{grid-template-columns:1fr}}
.gt-muc a{display:block;background:#fff;border:1px solid var(--vien);border-radius:10px;
  padding:13px 15px;text-decoration:none}
.gt-muc a:hover{border-color:var(--xanh);box-shadow:0 3px 12px rgba(31,168,188,.12)}
.gt-muc a b{display:block;color:#0d4b57;font:700 14.5px/1.35 var(--font);margin-bottom:3px}
.gt-muc a span{color:#7b8b91;font-size:12px;line-height:1.5}
.gt-ds{margin:10px 0 6px;padding-left:20px}
.gt-ds li{margin:7px 0;line-height:1.7}
.gt-moi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0}
@media(max-width:760px){.gt-moi{grid-template-columns:1fr}}
.gt-moi a{display:block;border:1px solid var(--vien);border-radius:10px;padding:12px 14px;
  background:#fff;text-decoration:none}
.gt-moi a:hover{border-color:var(--xanh)}
.gt-moi a b{display:block;color:#12313a;font:700 14px/1.4 var(--font)}
.gt-moi a span{color:#7b8b91;font-size:11.5px}
.gy-form{display:flex;flex-direction:column;gap:9px;margin:14px 0 18px;
  background:#f4fafb;border:1px solid #cfe7ec;border-left:4px solid #1FA8BC;
  border-radius:10px;padding:15px 16px}
.gy-form input,.gy-form textarea{font:inherit;font-size:15px;padding:9px 11px;
  border:1px solid var(--vien);border-radius:8px;background:#fff;width:100%;box-sizing:border-box}
.gy-form textarea{min-height:96px;resize:vertical}
.gy-hang{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.gy-form .nut{cursor:pointer;border:0}
.gy-bao{font-size:13px;color:#5A6A70}
.gy-bao.gy-loi{color:#c0392b}
.gy-bao.gy-xong{color:#12707f;font-weight:700}
.gy-o{background:#fff;border:1px solid var(--vien);border-radius:10px;padding:12px 15px;margin:9px 0}
.gy-ten{font:700 13.5px/1.3 var(--font);color:#0d4b57;display:flex;gap:10px;align-items:baseline}
.gy-ngay{font-weight:400;font-size:11.5px;color:#9aa8ad;margin-left:auto}
.gy-nd{margin-top:5px;line-height:1.7;color:#22313a;white-space:pre-wrap;overflow-wrap:break-word}
.gy-trong{color:#7b8b91;font-size:13.5px;font-style:italic}

/* Khối 'Đọc tiếp' TĨNH — liên kết thật trong HTML cho Google (thêm 02/10/2026) */
.bai-lien-quan-tinh{margin:26px 0 18px;padding:18px 20px;background:#F6FBFC;border:1px solid #DCE7EA;border-radius:10px}
.bai-lien-quan-tinh h4{margin:0 0 10px;font-size:17px;font-weight:700;color:#0B2B33}
.bai-lien-quan-tinh ul{margin:0;padding-left:20px}
.bai-lien-quan-tinh li{margin:7px 0;line-height:1.45}
.bai-lien-quan-tinh a{color:#1FA8BC;text-decoration:none;font-weight:600}
.bai-lien-quan-tinh a:hover{text-decoration:underline}
/* ══════════════════════════════════════════════════════════════════════════════
   CHU SA (朱砂) v3 — LỚP GIAO DIỆN CHÍNH THỨC cho web Chuyên Gia Trung Quốc
   Thay hoàn toàn lớp "Đêm phương Đông" (Mẫu B, 02/10/2026).

   Ý TƯỞNG: giấy ấm · mực đen · đỏ son (chu sa) · nét vàng kim mảnh · chữ Hán
   điểm xuyết. Chữ đọc bài dùng Literata (serif, đủ dấu tiếng Việt), giao diện
   dùng Be Vietnam Pro. Không dùng ảnh nền tối, không dùng chữ viết tay.

   NGUYÊN TẮC KỸ THUẬT
   — Không đổi tên lớp nào: ~690 tệp HTML đang trỏ tới các lớp cũ.
   — Biến cũ (--kem, --dam, --nhat, --xanh, --teal, --gold) được ÁNH XẠ LẠI sang
     bảng màu mới, nhờ vậy các luật ở phần gốc tự đổi tông mà không phải viết lại.
   — Chỉ dùng !important ở khối #tt-tuong-tac và .tt-* vì tuong-tac.js chèn
     <style>/inline SAU tệp này.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. CHỮ TỰ HOST (subset latin + vietnamese, ~170 KB, không gọi Google Fonts) ── */
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/bvp-400-viet.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/bvp-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/bvp-700-viet.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/bvp-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Literata';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/literata-400-viet.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Literata';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/literata-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Literata';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/literata-400-viet.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Literata';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/literata-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ── 2. TOKEN MÀU & CHỮ ─────────────────────────────────────────────────────── */
:root{
  /* CHU SA */
  --giay:#FBF8F2; --giay2:#F4EFE6; --mat:#FFFFFF;
  --vien:#E7DFD2; --vien2:#D6C9B4;
  --muc:#17181A; --muc2:#2C2C2E; --muc3:#6E6A63;
  --son:#A81E22; --son-dam:#8A1619; --son-nhat:#F7E9E7;
  --kim:#B98B2E; --kim-nhat:#F3E7CE; --ngoc:#1F6F63;
  --bong:0 1px 2px rgba(23,24,26,.04),0 8px 24px rgba(23,24,26,.06);
  --bong-lon:0 2px 6px rgba(23,24,26,.06),0 18px 40px rgba(23,24,26,.10);
  /* chữ */
  --serif:'Literata',Georgia,'Times New Roman',Times,serif;
  --sans:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --han:'Noto Serif CJK SC','Noto Sans CJK SC','Source Han Serif SC','Microsoft YaHei','PingFang SC','Hiragino Sans GB','WenQuanYi Zen Hei',serif;
  /* ÁNH XẠ BIẾN CŨ → bảng màu mới (để phần gốc tự đổi tông) */
  --kem:var(--giay); --dam:var(--muc); --nhat:var(--giay2);
  --xanh:var(--son); --teal:var(--son); --gold:var(--kim);
  --font:var(--serif); --nen:var(--giay); --tx:var(--muc2); --mu:var(--muc3);
  --lien-ket:var(--son);
  --r:12px; --r-nho:8px;
}
html{background:var(--giay)}
body{
  background:var(--giay); color:var(--muc2);
  font:400 16.5px/1.75 var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{background:var(--son); color:#fff}
:focus-visible{outline:3px solid var(--son); outline-offset:2px; border-radius:4px}
a{color:var(--son); text-underline-offset:2px; text-decoration-thickness:1px}
a:hover{color:var(--son-dam)}

h1,h2,h3,h4{font-family:var(--serif); color:var(--muc); font-weight:700; letter-spacing:-.1px}
h1{color:var(--muc); font-weight:700}
h2{color:var(--muc)}
h3,h4{color:var(--muc)}
strong,b{color:var(--muc)}
hr{border:0; border-top:1px solid var(--vien); margin:28px 0}
img{background:var(--giay2)}
.wrap{max-width:1140px; padding:0 22px}
@media(max-width:760px){.wrap{padding:0 15px}}

/* ── 3. ĐẦU TRANG ────────────────────────────────────────────────────────────
   Nền giấy, viền dưới mảnh, một đường đỏ son 3px ở mép trên như dấu triện. */
header{
  background:rgba(251,248,242,.94); color:var(--muc);
  backdrop-filter:saturate(180%) blur(12px); -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--vien); border-top:3px solid var(--son);
  position:sticky; top:0; z-index:60; padding:11px 0;
}
header .wrap{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
header a.logo{display:flex; align-items:center; gap:12px; color:var(--muc); flex:0 0 auto}
header a.logo:hover{text-decoration:none}
header a.logo:hover .ten{color:var(--son)}
.ava{width:44px; height:44px; border-radius:50%;
  background:url(/chuyengiatrungquoc/assets/img/cg-logo-vuong.webp) center/cover no-repeat;
  border:2px solid var(--mat); box-shadow:0 0 0 1.5px var(--son-dam),0 2px 8px rgba(23,24,26,.16);
  display:flex; align-items:center; justify-content:center;
  font:400 0/0 var(--han); color:transparent; flex:0 0 auto; overflow:hidden}
.ten{font:700 17.5px/1.15 var(--serif); color:var(--muc); letter-spacing:.1px}
.kh{font:700 10px/1.4 var(--sans); letter-spacing:2.6px; color:var(--son); margin-top:3px}
header .kh::before{content:"中 "; font-family:var(--han); letter-spacing:0}
header nav{margin-left:auto; display:flex; gap:2px; flex-wrap:wrap; font-size:14px}
header nav a{color:var(--muc2); font-weight:600; padding:7px 9px; border-radius:7px; white-space:nowrap;
  position:relative; transition:color .15s,background .15s}
header nav a:hover{color:var(--son); background:var(--son-nhat); text-decoration:none}
header nav a.on,header nav a[aria-current]{color:var(--son); background:var(--son-nhat); box-shadow:inset 0 -2px 0 var(--son)}
@media(max-width:1080px){
  header nav{margin-left:0; width:100%; flex-wrap:nowrap; overflow-x:auto; gap:4px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px}
  header nav::-webkit-scrollbar{display:none}
  header nav a{flex:0 0 auto; padding:7px 11px; border:1px solid var(--vien); background:var(--mat)}
  header nav{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
      mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%)}
}

/* ── 4. HERO (bài nổi bật ở trang chủ) ───────────────────────────────────────── */
.hero{background:
    radial-gradient(1200px 380px at 12% -10%, var(--son-nhat), transparent 70%),
    linear-gradient(180deg,var(--giay) 0%,var(--giay2) 100%);
  color:var(--muc); padding:34px 0 30px; border-bottom:1px solid var(--vien)}
.hero .hop{display:grid; grid-template-columns:1.08fr .92fr; gap:38px; align-items:center}
.hero .hop>div:first-child{position:relative; padding-left:22px}
.hero .hop>div:first-child::before{content:""; position:absolute; left:0; top:6px; bottom:6px;
  width:4px; border-radius:2px; background:linear-gradient(180deg,var(--son),var(--son-dam))}
.hero h1{font-size:clamp(26px,3.2vw,38px); line-height:1.22; color:var(--muc); margin:.1em 0 .35em;
  font-weight:700; letter-spacing:-.3px}
.hero p{color:var(--muc3); max-width:46ch; font-size:16px; line-height:1.72; margin:0 0 4px}
.hero .han{font-family:var(--han); color:var(--son); letter-spacing:5px; font-size:14px;
  font-weight:600; margin-bottom:10px; display:inline-block;
  border:1px solid var(--son); border-radius:4px; padding:3px 9px; background:var(--son-nhat)}
.hero .han:empty{display:none}
.hero img{width:100%; height:auto; border-radius:6px; display:block}
/* Ảnh bìa hero: đóng khung như bìa tạp chí (nền trắng + viền kim + bóng) */
.hero .hop>div:last-child{position:relative}
.hero .hop>div:last-child>a{display:block; position:relative; max-width:400px; margin:0 auto; padding:11px;
  background:var(--mat); border:1px solid var(--kim); border-radius:4px; box-shadow:var(--bong-lon)}
.hero .hop>div:last-child>a::after{content:"中"; position:absolute; right:-14px; top:-14px;
  width:42px; height:42px; border-radius:4px; background:var(--son); color:#fff;
  font:400 22px/42px var(--han); text-align:center; box-shadow:0 6px 16px rgba(138,22,25,.32)}
.nut{display:inline-block; background:var(--son); color:#fff; font:700 15px/1 var(--sans);
  padding:13px 24px; border-radius:8px; margin-top:16px; text-decoration:none !important;
  box-shadow:0 6px 16px rgba(168,30,34,.22); transition:transform .15s,background .15s}
.nut:hover{background:var(--son-dam); color:#fff; transform:translateY(-1px)}
.hero .nut{background:var(--muc)}
.hero .nut:hover{background:var(--son)}
/* Dưới 900px: hero về MỘT CỘT (luật gốc bị đè vì tệp này nạp sau) */
@media(max-width:900px){
  .hero{padding:24px 0 22px}
  .hero .hop{grid-template-columns:1fr; gap:20px}
  .hero .hop>div:first-child{padding-left:16px}
  .hero h1{font-size:clamp(24px,6.4vw,30px)}
  .hero p{max-width:100%; font-size:15.5px}
  .hero .hop>div:last-child{order:-1}
  .hero .hop>div:last-child>a{max-width:300px}
  .hero .hop>div:last-child>a::after{width:36px; height:36px; font-size:19px; line-height:36px;
    right:-10px; top:-10px}
}

/* ── 5. Ô TÌM BÀI ──────────────────────────────────────────────────────────── */
#tim-bai{padding:26px 0 6px; background:var(--giay); border-bottom:1px solid var(--vien)}
.o-tim{display:flex; gap:10px; max-width:660px; margin:12px 0 10px}
.o-tim input[type=search]{
  flex:1 1 auto; min-width:0; font:400 16px/1 var(--sans); color:var(--muc);
  padding:14px 16px; border:1px solid var(--vien2); border-radius:10px; background:var(--mat);
  box-shadow:inset 0 1px 2px rgba(23,24,26,.03)}
.o-tim input[type=search]::placeholder{color:#9A948B}
.o-tim input[type=search]:focus{border-color:var(--son); outline:none;
  box-shadow:0 0 0 3px var(--son-nhat)}
.o-tim button{font:700 15px/1 var(--sans); color:#fff; background:var(--son); border:0;
  padding:0 26px; border-radius:10px; cursor:pointer; white-space:nowrap}
.o-tim button:hover{background:var(--son-dam)}
.tk-goi-y{font-size:13.5px; color:var(--muc3); margin:0 0 4px}
.tk-goi-y a{color:var(--son); font-weight:600}
@media(max-width:560px){
  .o-tim{flex-wrap:wrap}
  .o-tim input[type=search]{flex:1 1 100%}
  .o-tim button{flex:1 1 100%; padding:13px 18px}
}

/* ── 6. MỐC PHÁT HÀNH (4 chỉ số) ───────────────────────────────────────────── */
.khoi-moc{background:var(--mat); border-top:1px solid var(--vien); border-bottom:1px solid var(--vien)}
.moc-hop{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; margin:6px 0 0}
.moc-o{padding:20px 22px; border-left:1px solid var(--vien)}
.moc-o:first-child{border-left:0; padding-left:0}
.moc-o span{display:block; font:700 10.5px/1.4 var(--sans); letter-spacing:2.2px;
  text-transform:uppercase; color:var(--muc3)}
.moc-o b{display:block; font:700 27px/1.2 var(--serif); color:var(--son); margin:7px 0 5px;
  letter-spacing:-.4px}
.moc-o i{display:block; font-style:normal; font-size:12.5px; line-height:1.5; color:var(--muc3)}
.moc-chu{font-size:15px; line-height:1.8; color:var(--muc3); margin:16px 0 4px}
.moc-chu a{font-weight:600}
@media(max-width:900px){
  .moc-hop{grid-template-columns:repeat(2,minmax(0,1fr))}
  .moc-o{border-left:0; border-top:1px solid var(--vien); padding:16px 18px}
  .moc-o:nth-child(-n+2){border-top:0}
  .moc-o:nth-child(odd){padding-left:0}
  .moc-o b{font-size:23px}
}
@media(max-width:480px){
  .moc-hop{grid-template-columns:1fr}
  .moc-o{border-top:1px solid var(--vien); padding:14px 0}
  .moc-o:nth-child(2){border-top:1px solid var(--vien)}
  .moc-o b{font-size:22px}
}

/* ── 7. KHỐI MỤC / LƯỚI MỤC ────────────────────────────────────────────────── */
section{padding:40px 0}
@media(max-width:760px){section{padding:26px 0}}
h1.muc,h2.muc{font:700 12.5px/1.4 var(--sans); letter-spacing:3.4px; text-transform:uppercase;
  color:var(--son); margin:0 0 20px; display:flex; align-items:center; gap:12px}
h1.muc::after,h2.muc::after{content:""; flex:1 1 auto; height:1px; background:var(--vien2)}
h1.muc::before,h2.muc::before{content:""; width:9px; height:9px; background:var(--son); border-radius:2px;
  transform:rotate(45deg); flex:0 0 auto}
h1.muc .tong,h2.muc .tong{color:var(--muc3); font-weight:600; letter-spacing:.4px; text-transform:none; font-size:13px}
.luoi-muc{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
@media(max-width:900px){.luoi-muc{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}}
@media(max-width:480px){.luoi-muc{grid-template-columns:1fr; gap:10px}}
.o-muc{display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:18px 18px; border:1px solid var(--vien); border-radius:var(--r); background:var(--mat);
  text-decoration:none; transition:border-color .16s, transform .16s, box-shadow .16s;
  position:relative; overflow:hidden}
.o-muc::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--son); opacity:0; transition:opacity .16s}
.o-muc:hover{border-color:var(--son); transform:translateY(-2px); box-shadow:var(--bong);
  text-decoration:none}
.o-muc:hover::before{opacity:1}
.o-muc .ten-muc{color:var(--muc); font:700 16px/1.35 var(--serif)}
.o-muc .so-bai{color:var(--son); font:700 13px/1 var(--sans); white-space:nowrap;
  background:var(--son-nhat); border-radius:999px; padding:5px 11px}
.o-muc .tho{font-size:13.5px; line-height:1.7; color:var(--muc3); margin:6px 0 0}
@media(max-width:560px){
  .o-muc{flex-direction:column; align-items:flex-start; gap:6px; padding:15px 16px}
  .o-muc .ten-muc{font-size:15px}
  .o-muc .tho{font-size:13px}
}

/* Lưới chuyên mục ở trang chủ (#muc-chuyen-muc) */
.luoi-muc .o-muc{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:13px;
  padding:15px 17px}
.o-muc .han-muc{width:38px;height:38px;border-radius:8px;background:var(--son);color:#fff;
  font:400 20px/38px var(--han);text-align:center;flex:0 0 auto;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
.o-muc .ten-muc{grid-column:2}
.o-muc .so-bai{grid-column:3}
.o-muc .tho{grid-column:2/4}
@media(max-width:560px){
  .luoi-muc .o-muc{grid-template-columns:auto 1fr;gap:6px 12px}
  .o-muc .han-muc{grid-row:span 2}
  .o-muc .so-bai{grid-column:2;justify-self:start}
}

/* ── 8. THẺ BÀI + LƯỚI BÀI ───────────────────────────────────────────────────
   Ảnh trong thẻ bị CẮT về 3:2 (object-position:top) ⇒ chỉ thấy phần ảnh của
   poster, bỏ hẳn khối chữ nhỏ li ti không đọc được ở cỡ thẻ. */
.luoi{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}
.luoi-bai-chu{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; align-items:stretch}
@media(max-width:980px){.luoi,.luoi-bai-chu{grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}}
@media(max-width:600px){.luoi,.luoi-bai-chu{grid-template-columns:1fr; gap:16px}}
.luoi-bai-chu>img,.luoi-bai-chu>figure,.luoi>img,.luoi>figure{display:none}
.the{display:flex; flex-direction:column; height:100%; background:var(--mat);
  border:1px solid var(--vien); border-radius:var(--r); overflow:hidden; color:inherit;
  text-decoration:none; transition:border-color .18s, transform .18s, box-shadow .18s}
.the:hover{text-decoration:none; border-color:var(--son); transform:translateY(-3px);
  box-shadow:var(--bong-lon)}
.the .chu-anh{display:none}          /* chú thích lặp ở mọi thẻ — bỏ khỏi thẻ bài */
.the img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; object-position:center;
  display:block; border-bottom:1px solid var(--vien); background:var(--giay2)}
.the .tv{padding:16px 18px 18px; display:flex; flex-direction:column; flex:1 1 auto}
.the .cm{font:700 10.5px/1.4 var(--sans); letter-spacing:2.2px; text-transform:uppercase;
  color:var(--son); display:inline-flex; align-items:center; gap:7px; margin-bottom:8px}
.the .cm::before{content:"中"; font-family:var(--han); font-size:11px; line-height:1;
  color:#fff; background:var(--son); border-radius:3px; padding:3px 4px; letter-spacing:0}
.the h3{margin:0 0 9px; font:700 18.5px/1.35 var(--serif); color:var(--muc); letter-spacing:-.2px}
.the:hover h3{color:var(--son-dam)}
.the p{margin:0; font-size:14.5px; line-height:1.65; color:var(--muc3);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.the .tv::after{content:"Đọc bài →"; margin-top:14px; font:700 12.5px/1 var(--sans);
  letter-spacing:.6px; color:var(--son); opacity:.85}
/* Lối «xem thêm» dưới lưới bài ở trang chủ */
.xem-them{margin:28px 0 0;text-align:center}
.xem-them a{display:inline-block;font:700 14.5px/1 var(--sans);color:var(--son);
  border:1px solid var(--vien2);border-radius:999px;padding:14px 28px;background:var(--mat);text-decoration:none}
.xem-them a:hover{border-color:var(--son);background:var(--son-nhat);text-decoration:none}
@media(max-width:760px){
  .the h3{font-size:17px}
  .the p{font-size:14px; -webkit-line-clamp:2}
  .the .tv{padding:13px 14px 15px}
}

/* ── 9. TRANG MỤC, TRANG CHỦ ĐỀ, PHÂN TRANG ────────────────────────────────── */
.crumb{font-size:13px; color:var(--muc3); margin:18px 0 0; line-height:1.7}
.crumb a{color:var(--muc3)}
.crumb a:hover{color:var(--son)}
.phan-trang{display:flex; flex-wrap:wrap; gap:9px; justify-content:center; align-items:center;
  margin:42px 0 20px; padding:0 8px}
.phan-trang a,.phan-trang span{display:inline-flex; align-items:center; justify-content:center;
  min-width:46px; min-height:46px; padding:11px 15px; border:1px solid var(--vien2);
  border-radius:10px; background:var(--mat); color:var(--muc2);
  font:600 15px/1 var(--sans); text-decoration:none; transition:.15s}
.phan-trang a:hover{border-color:var(--son); color:var(--son); background:var(--son-nhat);
  text-decoration:none; transform:translateY(-1px)}
.phan-trang .dang{background:var(--son); border-color:var(--son); color:#fff; font-weight:700}
.phan-trang .cham{border:0; background:transparent; min-width:26px; padding:0; color:var(--muc3)}
.phan-trang a[href*="Truoc"],.phan-trang a[href*="Sau"]{padding:11px 19px; font-weight:700}
@media(max-width:560px){
  .phan-trang{gap:7px; margin:30px 0 16px}
  .phan-trang a,.phan-trang span{min-width:44px; min-height:44px; padding:10px 12px; font-size:14.5px}
}

/* ── 10. BÀI VIẾT — phần quan trọng nhất: đọc dễ ───────────────────────────────
   Khổ chữ 780px, chữ Literata 19px/1.85, dòng ~70 ký tự. */
article{background:var(--mat); border:1px solid var(--vien); border-radius:14px;
  padding:44px 52px 40px; margin:26px auto; max-width:800px; box-shadow:var(--bong)}
article h1{font:700 clamp(26px,3.4vw,36px)/1.24 var(--serif); color:var(--muc);
  margin:.35em 0 .5em; letter-spacing:-.5px}
article .han{display:none; font-family:var(--han); color:var(--son); font-size:15px; font-weight:600;
  letter-spacing:4px; margin:0 0 12px}
article[data-muc] .han{display:inline-block}
article .tag{display:inline-block; background:var(--son); color:#fff; font:700 10.5px/1 var(--sans);
  letter-spacing:2.2px; padding:7px 12px; border-radius:4px; text-transform:uppercase}
article .kh{color:var(--muc3); font:700 12px/1.5 var(--sans); letter-spacing:2.4px; margin:12px 0 4px}
.ngay{font-size:12.5px; color:var(--muc3)}
.luotxem{display:inline-block; margin:8px 0 0; font:600 12.5px/1 var(--sans); color:var(--muc3);
  background:var(--giay2); border:1px solid var(--vien); border-radius:999px; padding:5px 12px}
.luotxem:empty{display:none}
article figure{margin:26px 0}
/* Ảnh bìa (figure đầu tiên) đóng khung như bìa sách, không cho phình hết cột */
article figure:first-of-type{max-width:470px; margin:24px auto 30px; text-align:center}
article figure:first-of-type img{border:1px solid var(--vien2); border-radius:6px; padding:8px;
  background:var(--mat); box-shadow:var(--bong)}
article figure img{width:100%; height:auto; border-radius:8px; display:block}
article figcaption{font-size:12.5px; color:var(--muc3); margin-top:10px; line-height:1.6;
  text-align:left; font-style:italic}
article .than{font:400 19px/1.85 var(--serif); color:var(--muc2); letter-spacing:.05px}
article .than p{margin:0 0 22px}
/* Chữ cái đầu lớn màu son cho đoạn mở đầu */
article .than>p:first-of-type::first-letter{float:left; font:700 58px/.84 var(--serif);
  color:var(--son); padding:5px 11px 0 0; line-height:.84}
article .than h2{font:700 25px/1.35 var(--serif); color:var(--muc); margin:38px 0 16px;
  padding-left:16px; position:relative}
article .than h2::before{content:""; position:absolute; left:0; top:5px; bottom:5px; width:4px;
  border-radius:2px; background:var(--son)}
article .than h3{font:700 20px/1.45 var(--serif); color:var(--son-dam); margin:30px 0 12px}
article .than h4{font:700 17px/1.5 var(--sans); color:var(--muc); margin:24px 0 10px;
  letter-spacing:.2px}
article .than ul,article .than ol{margin:0 0 22px; padding-left:24px}
article .than li{margin:9px 0; line-height:1.78}
article .than li::marker{color:var(--son)}
article .than a{color:var(--son-dam); text-decoration:underline; text-decoration-color:var(--vien2);
  text-underline-offset:3px}
article .than a:hover{text-decoration-color:var(--son)}
article .than strong,article .than b{color:var(--muc); font-weight:700}
article blockquote{margin:26px 0; padding:18px 24px; background:var(--giay); border:0;
  border-left:4px solid var(--son); border-radius:0 10px 10px 0;
  font:italic 400 18px/1.75 var(--serif); color:var(--muc2)}
article blockquote p:last-child{margin-bottom:0}
/* Bảng trong bài */
article .than table{width:100%; border-collapse:collapse; margin:22px 0 26px; font:400 15px/1.65 var(--sans)}
article .than th,article .than td{border:1px solid var(--vien); padding:10px 13px; text-align:left;
  vertical-align:top}
article .than th{background:var(--muc); color:#fff; font-weight:600; letter-spacing:.2px}
article .than tbody tr:nth-child(even){background:var(--giay)}
article .than td:first-child{font-weight:600; color:var(--muc)}
@media(max-width:640px){
  article{padding:24px 18px 26px; margin:16px auto; border-radius:12px}
  article .than{font-size:17.5px; line-height:1.8}
  article .than p{margin-bottom:19px}
  article .than>p:first-of-type::first-letter{font-size:48px}
  article .than h2{font-size:21.5px; margin-top:30px}
  article .than h3{font-size:18.5px}
  article figure:first-of-type{max-width:100%}
  article .than table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; font-size:14px}
}
/* Dòng nguồn cuối bài */
.nguon,.nd .nguon{margin:30px 0 0; padding:16px 18px; background:var(--giay);
  border:1px solid var(--vien); border-left:4px solid var(--kim); border-radius:0 10px 10px 0;
  font:400 13.5px/1.75 var(--sans); color:var(--muc3)}
.nguon strong,.nd .nguon strong{color:var(--muc); font-weight:700}
/* Hashtag / thẻ chủ đề */
.tags{display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 0}
.tags a{display:inline-block; background:var(--giay2); color:var(--muc2); border:1px solid var(--vien);
  border-radius:999px; padding:6px 13px; font:600 12.5px/1.4 var(--sans); text-decoration:none}
.tags a:hover{background:var(--son); color:#fff; border-color:var(--son)}
.tags a .sl{color:var(--muc3); font-weight:400; margin-left:5px}
.luoi-tag{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; margin:18px 0}
@media(max-width:900px){.luoi-tag{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.luoi-tag{grid-template-columns:1fr}}
.the-tag{display:block; background:var(--mat); border:1px solid var(--vien); border-radius:var(--r);
  padding:14px 16px; text-decoration:none; transition:.16s}
.the-tag:hover{border-color:var(--son); box-shadow:var(--bong); text-decoration:none; transform:translateY(-2px)}
.the-tag b{display:block; color:var(--muc); font:700 15px/1.42 var(--serif); margin-bottom:4px}
.the-tag span{color:var(--muc3); font-size:12.5px}
/* Điều hướng cuối bài */
.dieuhuong{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:28px 0 2px;
  padding-top:20px; border-top:1px solid var(--vien)}
.dieuhuong a{display:inline-block; max-width:100%; padding:11px 17px; border-radius:9px;
  border:1px solid var(--vien2); background:var(--mat); color:var(--muc2); font:700 14px/1.35 var(--sans);
  text-decoration:none}
.dieuhuong a:hover{border-color:var(--son); color:var(--son); text-decoration:none; background:var(--son-nhat)}
.dieuhuong .quaylai{border-color:var(--vien2); background:var(--giay)}
.dieuhuong .quaylai:hover{background:var(--son-nhat); border-color:var(--son); color:var(--son)}
.dieuhuong .sau{margin-left:auto; background:var(--son); border-color:var(--son); color:#fff}
.dieuhuong .sau:hover{background:var(--son-dam); border-color:var(--son-dam); color:#fff}
/* Khối «Đọc tiếp» tĩnh */
.bai-lien-quan-tinh{margin:30px 0 18px; padding:20px 22px; background:var(--giay);
  border:1px solid var(--vien); border-radius:var(--r)}
.bai-lien-quan-tinh h4{margin:0 0 12px; font:700 14px/1.4 var(--sans); letter-spacing:2px;
  text-transform:uppercase; color:var(--son)}
.bai-lien-quan-tinh ul{margin:0; padding-left:0; list-style:none}
.bai-lien-quan-tinh li{margin:9px 0; padding-left:18px; position:relative; line-height:1.55}
.bai-lien-quan-tinh li::before{content:"›"; position:absolute; left:0; color:var(--son); font-weight:700}
.bai-lien-quan-tinh a{color:var(--muc); text-decoration:none; font:600 15px/1.5 var(--serif)}
.bai-lien-quan-tinh a:hover{color:var(--son); text-decoration:underline}

/* ── 11. KHỐI TƯƠNG TÁC do tuong-tac.js dựng (chèn SAU tệp này ⇒ cần !important) ── */
#tt-tuong-tac{font-family:var(--sans)}
#tt-tuong-tac.tt-gon{background:transparent!important; border:0!important; box-shadow:none!important}
#tt-tuong-tac .tt-h{background:transparent!important; border:0!important; display:flex!important;
  align-items:center!important; gap:12px!important; flex-wrap:wrap!important}
#tt-tuong-tac .tt-nhan{background:var(--son)!important; color:#fff!important; border-radius:4px!important;
  padding:6px 12px!important; font-weight:700!important; letter-spacing:.14em!important; font-size:11px!important}
#tt-tuong-tac .tt-tieude{color:var(--muc)!important; font:700 17px/1.4 var(--serif)!important}
#tt-tuong-tac .tt-ky{color:var(--muc3)!important}
#tt-tuong-tac .tt-cap{color:var(--muc3)!important; margin-left:auto!important; font-size:13px!important}
#tt-tuong-tac .tt-than{background:var(--mat)!important; border:1px solid var(--vien)!important;
  border-radius:var(--r)!important; padding:18px 20px!important}
#tt-tuong-tac .tt-so span{color:var(--muc3)!important}
#tt-tuong-tac .tt-so b{color:var(--muc)!important}
#tt-tuong-tac .tt-so i{color:var(--muc3)!important; font-style:normal!important}
#tt-tuong-tac .tt-chips{display:flex!important; flex-wrap:wrap!important; gap:8px!important}
#tt-tuong-tac .tt-chip{background:var(--giay2)!important; border:1px solid var(--vien)!important;
  border-radius:999px!important; padding:6px 13px!important}
#tt-tuong-tac .tt-chip a{color:var(--muc2)!important; text-decoration:none!important}
#tt-tuong-tac .tt-chip a:hover{color:var(--son)!important}
#tt-tuong-tac .tt-chip span{color:var(--son)!important; font-weight:700!important}
#tt-tuong-tac .tt-moi{color:var(--son)!important}
#tt-tuong-tac .tt-nut,#tt-tuong-tac .tt-nut-bai a,#tt-tuong-tac .tt-bang a{
  background:var(--mat)!important; border:1px solid var(--vien2)!important; color:var(--muc2)!important;
  border-radius:9px!important}
#tt-tuong-tac .tt-nut:hover,#tt-tuong-tac .tt-nut-bai a:hover{
  border-color:var(--son)!important; color:var(--son)!important; background:var(--son-nhat)!important}
#tt-tuong-tac .tt-hop,#tt-tuong-tac .tt-bang{background:var(--mat)!important;
  border:1px solid var(--vien)!important; color:var(--muc2)!important}
#tt-tuong-tac input,#tt-tuong-tac textarea,#tt-tuong-tac select{
  background:var(--mat)!important; border:1px solid var(--vien2)!important; color:var(--muc)!important;
  border-radius:9px!important}
#tt-tuong-tac label,#tt-tuong-tac .tt-cap,#tt-tuong-tac small{color:var(--muc3)!important}
/* 3 nút cuối bài: Thích · Lưu bài · Chia sẻ (+ Zalo) */
.tt-nut-bai{display:flex!important; gap:10px!important; flex-wrap:wrap!important; margin:22px 0 6px!important}
.tt-nut-bai .tt-nut{display:inline-flex!important; align-items:center!important; gap:9px!important;
  background:var(--mat)!important; border:1px solid var(--vien2)!important; color:var(--muc2)!important;
  border-radius:999px!important; padding:11px 19px!important;
  font:600 14.5px/1 var(--sans)!important; cursor:pointer!important; text-decoration:none!important;
  transition:.15s}
.tt-nut-bai .tt-nut:hover{border-color:var(--son)!important; color:var(--son)!important;
  background:var(--son-nhat)!important; text-decoration:none!important}
.tt-nut-bai .tt-nut .tt-ico{font-size:16px!important; line-height:1!important}
.tt-nut-bai .tt-nut.tt-thich.da-thich,.tt-nut-bai .tt-nut.dang-thich{
  background:var(--son)!important; border-color:var(--son)!important; color:#fff!important}
.tt-nut-bai .tt-nut b{color:inherit!important; font-weight:700!important}
/* Module do JS dựng: Đọc tiếp · Mục lục · Góp ý · Đánh giá */
.tt-mod,.tt-lienquan,.tt-bang,.tt-hop,.tt-form,.tt-mucluc,.tt-o,.tt-dinh,.tt-da{
  background:var(--mat)!important; border-color:var(--vien)!important; color:var(--muc2)!important;
  font-family:var(--sans)!important}
.tt-lienquan>*,.tt-mod>*{background:transparent!important}
.tt-lienquan b,.tt-mod b,.tt-mucluc b,.tt-trong b,.tt-lnd,.tt-o b{color:var(--muc)!important}
.tt-lienquan a,.tt-mod a,.tt-mucluc a,.tt-ds a,.tt-o a,.tt-lnd a{color:var(--son)!important}
.tt-lienquan .tt-nd,.tt-nd,.tt-da,.tt-goi,.tt-im,.tt-trong,.tt-cap,.tt-ky{color:var(--muc3)!important}
.tt-o{border:1px solid var(--vien)!important; border-radius:var(--r)!important; padding:15px 17px!important}
.tt-o:hover{border-color:var(--son)!important}
.tt-im{opacity:1!important; font-style:italic!important}
.tt-ds,.tt-mucluc,.tt-form{margin:14px 0!important}
.tt-mucluc{border-left:4px solid var(--son)!important; border-radius:0 var(--r) var(--r) 0!important}
.tt-form input,.tt-form textarea,.tt-form select{background:var(--mat)!important;
  border:1px solid var(--vien2)!important; color:var(--muc)!important; border-radius:9px!important}
.tt-nut-sao,.tt-cam,.tt-hien,.tt-lendau{color:var(--kim)!important}
.tt-loi{color:var(--son)!important}
.tt-loi-xong,.tt-xong{color:var(--ngoc)!important}
/* Khung theo dõi Facebook: chỉ nổi ở màn rộng, còn lại vào luồng trang (không che chữ) */
.tt-theodoi,.tt-fb-float{background:var(--mat)!important; border:1px solid var(--vien)!important;
  color:var(--muc2)!important; border-radius:var(--r)!important; box-shadow:var(--bong-lon)!important}
@media(max-width:1279px){
  .tt-fb-float{position:static!important; inset:auto!important; right:auto!important;
    bottom:auto!important; left:auto!important; top:auto!important; width:auto!important;
    max-width:100%!important; margin:22px 0!important; box-shadow:none!important; z-index:auto!important}
}

/* ── 12. KHỐI PHỤ (trang Giới thiệu, góp ý, đặt chỗ, tác giả) ──────────────── */
.ho-tro{background:var(--mat); border:1px solid var(--vien); border-radius:var(--r); padding:22px 24px}
.ho-tro .o{background:var(--giay); border:1px solid var(--vien); border-radius:10px; padding:16px 18px;
  margin:12px 0}
.ho-tro .o b{display:block; color:var(--muc); font:700 17px/1.4 var(--serif); margin-bottom:7px}
.ho-tro .o p{margin:0 0 8px; line-height:1.75; color:var(--muc2)}
.ho-tro .o a{font-weight:600}
.cach-gui{margin:16px 0 0; padding:16px 18px; background:var(--giay2); border:1px dashed var(--vien2);
  border-radius:10px; font-size:14.5px; line-height:1.8}
.cach-gui b{color:var(--muc)}
.moc-ngay{font-size:13px; color:var(--muc3)}
.khoi-aff,.khoi-aff-gon{background:var(--giay2); border:1px solid var(--vien); border-radius:var(--r);
  padding:20px 22px; margin:24px 0}
.khoi-aff h4{margin:0 0 10px; font:700 15px/1.4 var(--sans); letter-spacing:1.6px;
  text-transform:uppercase; color:var(--son)}
.khoi-aff p,.khoi-aff-gon p{margin:0 0 10px; line-height:1.75; color:var(--muc2); font-size:15px}
.khoi-aff ul{margin:0 0 12px; padding-left:20px}
.khoi-aff li{margin:7px 0; line-height:1.7; font-size:15px}
.khoi-aff a,.khoi-aff-gon a{font-weight:600}
.khoi-aff .aff-luu{font-size:13px; color:var(--muc3); font-style:italic}
.gt-muc{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; margin:16px 0 8px}
@media(max-width:900px){.gt-muc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.gt-muc{grid-template-columns:1fr}}
.gt-muc a{display:block; background:var(--mat); border:1px solid var(--vien); border-radius:var(--r);
  padding:15px 17px; text-decoration:none; transition:.16s}
.gt-muc a:hover{border-color:var(--son); box-shadow:var(--bong); text-decoration:none}
.gt-muc a b{display:block; color:var(--muc); font:700 15.5px/1.35 var(--serif); margin-bottom:4px}
.gt-muc a span{color:var(--muc3); font-size:12.5px; line-height:1.55}
.gt-ds{margin:10px 0 6px; padding-left:20px}
.gt-ds li{margin:8px 0; line-height:1.75}
.gt-moi{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; margin:16px 0}
@media(max-width:760px){.gt-moi{grid-template-columns:1fr}}
.gt-moi a{display:block; border:1px solid var(--vien); border-radius:var(--r); padding:14px 16px;
  background:var(--mat); text-decoration:none; transition:.16s}
.gt-moi a:hover{border-color:var(--son); text-decoration:none}
.gt-moi a b{display:block; color:var(--muc); font:700 15px/1.4 var(--serif)}
.gt-moi a span{color:var(--muc3); font-size:12.5px}
.gy-form{display:flex; flex-direction:column; gap:10px; margin:16px 0 20px;
  background:var(--giay); border:1px solid var(--vien); border-left:4px solid var(--son);
  border-radius:0 var(--r) var(--r) 0; padding:17px 18px}
.gy-form input,.gy-form textarea{font:400 15.5px/1.6 var(--sans); padding:11px 13px;
  border:1px solid var(--vien2); border-radius:9px; background:var(--mat); width:100%; color:var(--muc)}
.gy-form input:focus,.gy-form textarea:focus{border-color:var(--son); outline:none;
  box-shadow:0 0 0 3px var(--son-nhat)}
.gy-form textarea{min-height:100px; resize:vertical}
.gy-hang{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.gy-form .nut{cursor:pointer; border:0; margin-top:0}
.gy-bao{font-size:13.5px; color:var(--muc3)}
.gy-bao.gy-loi{color:var(--son)}
.gy-bao.gy-xong{color:var(--ngoc); font-weight:700}
.gy-o{background:var(--mat); border:1px solid var(--vien); border-radius:var(--r); padding:14px 17px;
  margin:10px 0}
.gy-ten{font:700 14.5px/1.35 var(--sans); color:var(--muc); display:flex; gap:10px; align-items:baseline}
.gy-ngay{font-weight:400; font-size:12px; color:var(--muc3); margin-left:auto}
.gy-nd{margin-top:6px; line-height:1.75; color:var(--muc2); white-space:pre-wrap; overflow-wrap:break-word}
.gy-trong{color:var(--muc3); font-size:14px; font-style:italic}
.logo-trang{display:block; width:100%; max-width:1000px; height:auto; margin:0 auto 26px;
  border-bottom:1px solid var(--vien); padding-bottom:22px}
.cta{margin:26px 0; padding:22px 24px; background:var(--muc); color:#fff; border-radius:var(--r);
  display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.cta b{color:#fff; font-family:var(--serif); font-size:18px}
.cta .nut{background:var(--son); margin-top:0}
.cta .nut:hover{background:#C22A2F}
.theodoi{display:inline-block; margin:0; padding:8px 15px; border:1px solid rgba(255,255,255,.28);
  border-radius:999px; background:rgba(255,255,255,.08); color:#fff; font:600 13px/1.4 var(--sans)}
.theodoi b{color:var(--kim); font-size:15px}
.theodoi span{color:rgba(255,255,255,.62); font-weight:400; font-size:12px}
/* Khối «tác giả / web khác» — bỏ kiểu viền đen + bóng lệch */
.khoi-tac-gia{padding:30px 0 6px}
.khoi-tac-gia .td{display:flex; align-items:baseline; gap:14px; border-bottom:1px solid var(--vien2);
  padding-bottom:10px; margin-bottom:6px}
.khoi-tac-gia h2{margin:0; font:700 24px/1.3 var(--serif); color:var(--muc)}
.khoi-tac-gia .mo{margin-left:auto; font:600 13px/1.4 var(--sans); color:var(--son); white-space:nowrap}
.card-tac-gia{display:grid; grid-template-columns:auto 1fr auto; gap:22px; align-items:center;
  background:var(--mat); border:1px solid var(--vien); border-left:4px solid var(--son);
  border-radius:var(--r); padding:22px 24px; box-shadow:var(--bong); text-decoration:none;
  color:inherit; margin-top:20px; transition:.16s}
.card-tac-gia:hover{box-shadow:var(--bong-lon); transform:translateY(-2px); text-decoration:none}
.card-tac-gia .mark{width:60px; height:60px; display:block; flex:0 0 auto}
.card-tac-gia .chu{display:flex; flex-direction:column; gap:3px}
.card-tac-gia h3{margin:0; font:700 21px/1.3 var(--serif); color:var(--muc)}
.card-tac-gia .khau{color:var(--son); font:700 11px/1.4 var(--sans); letter-spacing:.16em;
  text-transform:uppercase; margin:0}
.card-tac-gia .mota{color:var(--muc3); font-size:15px; line-height:1.6; margin-top:6px;
  max-width:56ch; display:block}
.card-tac-gia .nut{align-self:flex-start; background:var(--son); color:#fff; font-weight:700;
  padding:11px 17px; border-radius:8px; font-size:14px; margin-top:12px}
.card-tac-gia .anh{display:flex; gap:8px}
.card-tac-gia .anh img{width:92px; height:92px; object-fit:cover; border:1px solid var(--vien);
  border-radius:6px; display:block}
@media(max-width:900px){.card-tac-gia{grid-template-columns:auto 1fr}.card-tac-gia .anh{display:none}}
@media(max-width:620px){.card-tac-gia{grid-template-columns:1fr; padding:18px}
  .card-tac-gia .mark{width:52px; height:52px}}
/* Khối tin kinh tế / nhân vật / nghe */
.tin-box{background:var(--mat); border-top:3px solid var(--son); padding:26px 0 30px}
.tin-moc{font-size:12.5px; color:var(--muc3); margin:0 0 16px}
.tin-hop{display:grid; grid-template-columns:.9fr 1.1fr; gap:24px; align-items:start}
@media(max-width:820px){.tin-hop{grid-template-columns:1fr}}
.tin-anh{width:100%; height:auto; border-radius:10px; display:block; border:1px solid var(--vien)}
.tin-chu-anh{font-size:12px; color:var(--muc3); margin:8px 0 0}
.tin-ds{list-style:none; margin:0; padding:0}
.tin-ds li{display:flex; gap:11px; align-items:baseline; padding:11px 0; border-bottom:1px solid var(--vien)}
.tin-ds li:last-child{border-bottom:0}
.tin-so{flex:0 0 28px; height:24px; border-radius:5px; background:var(--son); color:#fff;
  font:700 12.5px/24px var(--sans); text-align:center; display:inline-block}
.tin-ds a{color:var(--muc); font:600 15.5px/1.5 var(--serif)}
.tin-ds a:hover{color:var(--son)}
.tin-nguon{flex:0 0 auto; margin-left:auto; font-size:12px; color:var(--muc3); white-space:nowrap}
@media(max-width:560px){.tin-nguon{display:block; margin:5px 0 0}.tin-ds li{flex-wrap:wrap}}
.tin-chu{font-size:12.5px; color:var(--muc3); margin:16px 0 0}
.tin-luoi{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; margin:10px 0 18px}
@media(max-width:1000px){.tin-luoi{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.tin-luoi{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.tin-luoi{grid-template-columns:1fr}}
.tin-the{position:relative; display:flex; flex-direction:column; gap:7px; background:var(--mat);
  border:1px solid var(--vien); border-radius:var(--r); padding:24px 15px 14px; transition:.16s}
.tin-the:hover{border-color:var(--son); box-shadow:var(--bong)}
.tin-the .tin-so{position:absolute; top:-9px; left:13px; background:var(--son); color:#fff;
  font:700 12px/1 var(--sans); padding:6px 10px; border-radius:6px; z-index:5;
  border:2px solid var(--mat); box-shadow:0 2px 6px rgba(23,24,26,.16)}
.tin-the .tin-td{font:700 14px/1.42 var(--serif); color:var(--muc); text-decoration:none;
  display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden}
.tin-the .tin-td:hover{color:var(--son)}
.tin-the .tin-nguon{margin:7px 0 0; font-size:11.5px; line-height:1.45; color:var(--muc3); white-space:normal}
.tin-the .tin-td .tin-nho{display:block; font-weight:400; font-size:11.5px; color:var(--muc3); margin-top:5px}
.tin-dau{display:flex; align-items:center; gap:14px; flex-wrap:wrap; border-bottom:1px solid var(--vien2);
  padding-bottom:12px; margin:0 0 14px}
.tin-logo{display:flex; align-items:center; gap:10px; text-decoration:none}
.tin-logo .o{width:42px; height:42px; border-radius:50%; background:var(--son); color:#fff;
  display:flex; align-items:center; justify-content:center; font:400 20px/1 var(--han); flex:0 0 auto}
.tin-logo .chu b{display:block; font:700 16px/1.15 var(--serif); color:var(--muc)}
.tin-logo .chu i{display:block; font-style:normal; font:700 10.5px/1.4 var(--sans); color:var(--kim);
  letter-spacing:.18em; margin-top:2px}
.tin-logo .news{font:700 12px/1 var(--sans); color:#fff; background:var(--muc); padding:6px 10px; border-radius:5px}
.tin-dau .tin-ngay{margin-left:auto; text-align:right; font-size:12px; color:var(--muc3); line-height:1.55}
.nghe,.nghe-tin{background:var(--giay); border:1px solid var(--vien); border-left:4px solid var(--kim);
  border-radius:0 var(--r) var(--r) 0; padding:15px 17px; margin:20px 0; display:flex;
  flex-direction:column; gap:9px}
.nghe b,.nghe-tin b{font:700 14.5px/1.35 var(--sans); color:var(--muc)}
.nghe audio{width:100%; max-width:440px; height:36px}
.nghe span,.nghe-tin .chu-thich{font-size:12.5px; color:var(--muc3)}
.nghe-tin{flex-direction:row; align-items:center; flex-wrap:wrap}
.nghe-tin .nut-nghe{cursor:pointer; background:var(--son); color:#fff; border-radius:8px;
  padding:10px 17px; font:700 13.5px/1 var(--sans); user-select:none}
.nghe-tin .nut-nghe:hover{background:var(--son-dam)}
.nghe-tin audio{max-width:380px; height:34px; flex:1 1 220px}
.nv-luoi{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:13px;
  list-style:none; margin:18px 0 0; padding:0}
.nv-luoi li{background:var(--mat); border:1px solid var(--vien); border-radius:10px; padding:12px 14px}
.nv-luoi b{display:block; color:var(--muc); font:700 15.5px/1.4 var(--serif)}
.nv-luoi span{font-size:12.5px; color:var(--muc3)}
.nv-luoi a{font-size:12.5px; font-weight:700; color:var(--son)}
.thuvien{margin:30px 0 8px}
.thuvien h3{margin:0 0 14px; font:700 20px/1.4 var(--serif); color:var(--muc)}
.luoi-anh{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.luoi-anh img{width:100%; height:auto; border-radius:8px; border:1px solid var(--vien); display:block}
.luoi-anh figure{margin:0}
.luoi-anh figcaption{font-size:12px; line-height:1.45; color:var(--muc3); padding:6px 2px 0}
@media(max-width:760px){.luoi-anh{grid-template-columns:repeat(2,1fr); gap:9px}}
@media(max-width:480px){.luoi-anh{grid-template-columns:1fr}}
.thong-ke,.so-lieu,.dai-so,.chi-so{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
@media(max-width:560px){.thong-ke,.so-lieu,.dai-so,.chi-so{grid-template-columns:1fr}}

/* ── 13. CHÂN TRANG ─────────────────────────────────────────────────────────── */
footer{background:var(--muc); color:rgba(255,255,255,.72); padding:36px 0 22px; margin-top:34px;
  font:400 14px/1.7 var(--sans); border-top:3px solid var(--son)}
footer .hop{display:grid; grid-template-columns:2fr 1fr 1fr; gap:26px}
@media(max-width:760px){footer .hop{grid-template-columns:1fr; gap:20px}}
footer h4{color:#fff; margin:0 0 10px; font:700 12px/1.4 var(--sans); letter-spacing:2.2px;
  text-transform:uppercase}
footer h4::after{content:""; display:block; width:26px; height:2px; background:var(--son); margin-top:8px}
footer p{margin:0 0 7px}
footer a{color:var(--kim); text-decoration:none}
footer a:hover{color:#fff; text-decoration:underline}
footer .banner-khac{display:inline-flex; align-items:center; gap:11px; margin:0 0 12px; padding:9px 13px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:10px;
  text-decoration:none}
footer .banner-khac img{display:block; width:38px; height:38px; border-radius:6px}
footer .banner-khac b{color:#fff; font-size:13.5px; display:block; line-height:1.3}
footer .banner-khac small{color:rgba(255,255,255,.6); font-size:11.5px; display:block}
.cuoi-trang{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
  margin:22px 0 8px; padding-top:18px; border-top:1px solid rgba(255,255,255,.14)}
.dem-luot{font:600 13px/1.5 var(--sans); color:rgba(255,255,255,.66)}
.dem-luot:empty{display:none}
.logo-nho{display:inline-flex; align-items:center; flex:0 0 auto; line-height:0}
.logo-nho img{width:40px!important; height:40px!important; max-width:40px!important;
  max-height:40px!important; display:block; border-radius:8px}
.chu{font-size:12px; color:rgba(255,255,255,.5); margin-top:20px; border-top:1px solid rgba(255,255,255,.12);
  padding-top:14px; line-height:1.7}
@media(max-width:640px){.cuoi-trang{justify-content:flex-start}}

/* ── 14. TEM CHUYÊN MỤC (chữ Hán điểm xuyết) ───────────────────────────────── */
.the[data-muc] .cm::before{content:"中"}
.the[data-muc="diem-den"] .cm::before{content:"遊"}
.the[data-muc="van-hoa"] .cm::before{content:"文"}
.the[data-muc="am-thuc"] .cm::before{content:"食"}
.the[data-muc="con-nguoi"] .cm::before{content:"人"}
.the[data-muc="kinh-te"] .cm::before{content:"財"}
.the[data-muc="nhan-vat-lich-su"] .cm::before{content:"傑"}
.the[data-muc="cau-chuyen-lich-su"] .cm::before{content:"史"}
.the[data-muc="kinh-nghiem"] .cm::before{content:"訣"}
.the[data-muc="gioi-thieu"] .cm::before{content:"中"}
/* Trang bài: con dấu chữ Hán đặt cạnh nhãn chuyên mục */
article[data-muc] .han::before{content:"中"; margin-right:6px}
article[data-muc="diem-den"] .han::before{content:"遊"}
article[data-muc="van-hoa"] .han::before{content:"文"}
article[data-muc="am-thuc"] .han::before{content:"食"}
article[data-muc="con-nguoi"] .han::before{content:"人"}
article[data-muc="kinh-te"] .han::before{content:"財"}
article[data-muc="nhan-vat-lich-su"] .han::before{content:"傑"}
article[data-muc="cau-chuyen-lich-su"] .han::before{content:"史"}
article[data-muc="kinh-nghiem"] .han::before{content:"訣"}

/* ── 18. MỤC LỤC TRONG BÀI (do tuong-tac.js dựng) + VÙNG CHẠM ─────────────── */
/* Mục lục là <nav> — PHẢI tách khỏi luật menu đầu trang (nếu không, chữ bị cắt cụt) */
.tt-mucluc{display:block!important; width:auto!important; margin-left:0!important; overflow:visible!important;
  flex:none!important; flex-wrap:wrap!important; gap:0!important}
.tt-mucluc .tt-ml-dau{width:100%!important}
.tt-mucluc ol{width:100%!important; flex:none!important; display:block!important; overflow:visible!important}
.tt-mucluc li{display:block!important; width:100%!important; float:none!important}
.tt-mucluc,.tt-mucluc *{white-space:normal!important; overflow-wrap:break-word!important; word-break:normal!important}
.tt-mucluc a{border:0!important; background:none!important; border-radius:0!important; flex:none!important;
  position:static!important; text-align:left!important}
.tt-mucluc{background:var(--giay)!important; border:1px solid var(--vien)!important;
  border-left:4px solid var(--son)!important; border-radius:0 var(--r) var(--r) 0!important;
  padding:16px 20px!important}
.tt-mucluc .tt-ml-dau{font:700 11.5px/1.4 var(--sans)!important; letter-spacing:2.4px!important;
  text-transform:uppercase!important; color:var(--son)!important; margin-bottom:10px!important}
.tt-mucluc ol{margin:0!important; padding-left:0!important; list-style:none!important;
  counter-reset:ml!important}
.tt-mucluc li{margin:0!important; border-bottom:1px solid var(--vien)!important; counter-increment:ml!important}
.tt-mucluc li:last-child{border-bottom:0!important}
.tt-mucluc li::before{content:counter(ml); float:left; width:26px;
  font:700 12.5px/2.4 var(--sans); color:var(--son)}
.tt-mucluc a{display:block!important; padding:9px 0 9px 26px!important; min-height:44px!important;
  font:600 15.5px/1.6 var(--serif)!important; color:var(--muc)!important; text-decoration:none!important}
.tt-mucluc a:hover{color:var(--son)!important; text-decoration:underline!important}
.tt-mucluc .tt-ml-thu{color:var(--son)!important; font:700 13px/1.4 var(--sans)!important;
  background:none!important; border:0!important; padding:10px 0!important; cursor:pointer!important}

/* Vùng chạm trên điện thoại: mọi thứ bấm được ≥ 44px */
@media(max-width:760px){
  nav a{padding:10px 12px}
  .dieuhuong a{padding:12px 16px}
  .tt-nut-bai .tt-nut{min-height:44px!important}
  .tags a{padding:8px 14px}
  .o-muc{padding:16px 17px}
  .nut{padding:14px 22px}
}

/* ── 19. TRANG TÌM KIẾM (.tk-*) ───────────────────────────────────────────── */
.logo-trang{max-width:560px}
.tk-hop{max-width:1000px;margin:26px auto 8px;padding:0 22px}
.tk-hop h1{font:700 clamp(24px,3.2vw,32px)/1.25 var(--serif);color:var(--muc);margin:6px 0 8px}
.tk-hop>p{color:var(--muc3);font-size:15.5px;line-height:1.7;margin:0 0 18px}
.tk-o{display:flex;gap:10px;flex-wrap:wrap}
.tk-o input[type=search]{flex:1 1 320px;min-width:0;font:400 16px/1 var(--sans);padding:14px 16px;
  border:1px solid var(--vien2);border-radius:10px;background:var(--mat);color:var(--muc)}
.tk-o input[type=search]:focus{outline:none;border-color:var(--son);box-shadow:0 0 0 3px var(--son-nhat)}
.tk-o select,.tk-o button{font:600 15px/1 var(--sans);padding:14px 16px;border-radius:10px;
  border:1px solid var(--vien2);background:var(--mat);color:var(--muc);cursor:pointer}
.tk-o button{background:var(--son);border-color:var(--son);color:#fff;font-weight:700}
.tk-o button:hover{background:var(--son-dam)}
.tk-dem{margin:16px 0 2px;color:var(--muc3);font-size:14.5px}
.tk-goi{color:var(--son);background:none;border:none;font:inherit;text-decoration:underline;cursor:pointer;padding:2px 6px}
.tk-phu{color:var(--muc3);font-size:14px}
.tk-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px;margin:18px 0 40px}
@media(max-width:600px){.tk-luoi{grid-template-columns:1fr;gap:16px}}
.tk-the{display:flex;flex-direction:column;text-decoration:none;color:inherit;border:1px solid var(--vien);
  border-radius:var(--r);overflow:hidden;background:var(--mat);transition:border-color .16s,transform .16s,box-shadow .16s}
.tk-the:hover{transform:translateY(-3px);box-shadow:var(--bong-lon);border-color:var(--son);text-decoration:none}
.tk-the img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center;
  border-bottom:1px solid var(--vien);background:var(--giay2)}
.tk-the .tv{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1 1 auto}
.tk-the .cm{font:700 10.5px/1.4 var(--sans);letter-spacing:2.2px;text-transform:uppercase;color:var(--son);
  margin-bottom:8px;display:inline-flex;align-items:center;gap:7px}
.tk-the .cm::before{content:"中";font-family:var(--han);font-size:11px;line-height:1;color:#fff;
  background:var(--son);border-radius:3px;padding:3px 4px;letter-spacing:0}
.tk-the h3{margin:0 0 8px;font:700 17.5px/1.35 var(--serif);color:var(--muc)}
.tk-the:hover h3{color:var(--son-dam)}
.tk-the p{margin:0;font:400 14.5px/1.6 var(--sans);color:var(--muc3)}
.tk-the .tv::after{content:"Đọc bài →";margin-top:12px;font:700 12.5px/1 var(--sans);letter-spacing:.6px;
  color:var(--son);opacity:.85}
.tk-trong{text-align:center;padding:34px 16px;color:var(--muc3)}
.tk-the[data-muc="diem-den"] .cm::before{content:"遊"}
.tk-the[data-muc="van-hoa"] .cm::before{content:"文"}
.tk-the[data-muc="am-thuc"] .cm::before{content:"食"}
.tk-the[data-muc="con-nguoi"] .cm::before{content:"人"}
.tk-the[data-muc="kinh-te"] .cm::before{content:"財"}
.tk-the[data-muc="nhan-vat-lich-su"] .cm::before{content:"傑"}
.tk-the[data-muc="cau-chuyen-lich-su"] .cm::before{content:"史"}
.tk-the[data-muc="kinh-nghiem"] .cm::before{content:"訣"}

/* Khung theo dõi Facebook nổi (#meggi-follow do tuong-tac.js dựng) — ép về hệ CHU SA.
   JS đặt style nội tuyến nên phải dùng !important; !important của stylesheet THẮNG style nội tuyến. */
#meggi-follow{background:var(--mat)!important;color:var(--muc2)!important;
  border:1px solid var(--vien)!important;border-radius:var(--r)!important;
  box-shadow:var(--bong-lon)!important;font-family:var(--sans)!important;max-width:300px!important}
#meggi-follow>div{color:var(--muc3)!important;font-family:var(--sans)!important;font-size:13px!important;
  line-height:1.6!important}
#meggi-follow>div:first-of-type{color:var(--muc)!important;font:700 15px/1.4 var(--serif)!important}
#meggi-follow a{display:block!important;background:var(--son)!important;color:#fff!important;
  text-align:center!important;padding:12px 16px!important;border-radius:8px!important;
  font:700 14px/1 var(--sans)!important;margin-top:2px!important;text-decoration:none!important}
#meggi-follow a:hover{background:var(--son-dam)!important;color:#fff!important;text-decoration:none!important}
#meggi-follow #meggi-follow-x{color:var(--muc3)!important;font-size:20px!important}
@media(max-width:1279px){
  #meggi-follow{position:static!important;inset:auto!important;right:auto!important;bottom:auto!important;
    left:auto!important;top:auto!important;width:auto!important;max-width:calc(100% - 30px)!important;
    margin:24px 15px!important;box-shadow:none!important;z-index:auto!important;opacity:1!important}
}

/* ── 20. TRANG CHỦ ĐỀ (chu-de/*.html) ─────────────────────────────────────── */
/* 72 trang này trước đây KHÔNG có đầu trang/chân trang; nay đã chèn.
   Tiêu đề là tiêu đề TRANG thật (h1.muc đang là nhãn mục nhỏ nên phải ghi đè). */
h1.tieu-de-trang{display:block; font:700 clamp(24px,3.4vw,34px)/1.24 var(--serif);
  color:var(--muc); text-transform:none; letter-spacing:-.5px; margin:16px 0 8px}
h1.tieu-de-trang::before,h1.tieu-de-trang::after{display:none}
h1.tieu-de-trang+.tin-moc{margin-top:0}

/* ── 16. CHỐNG TRÀN & KHỐI NỔI (đề phòng JS/HTML cũ chèn thêm) ─────────────── */
h1,h2,h3,h4,p,li,span,div,a,td,th{overflow-wrap:break-word}
.tk-goi-y{white-space:normal; overflow-wrap:anywhere; font-size:13.5px}
.tk-goi-y a{white-space:normal}
.khoi-theo-doi,.theo-doi-khoi,.khung-theo-doi,.aff,.aff-nen,.noi,.hop-noi,.cta-noi,.floating{
  background:var(--mat); border:1px solid var(--vien); border-radius:var(--r); color:var(--muc2);
  max-width:100%; box-shadow:none; position:static; inset:auto; margin:20px 0; padding:18px 20px}
@media(max-width:760px){
  .khoi-theo-doi,.khung-theo-doi,.aff,.noi,.hop-noi,.cta-noi,.floating{
    position:static!important; inset:auto!important; margin:18px 0!important; width:auto!important;
    max-width:100%!important; box-shadow:none!important; z-index:auto!important}
}
.gy-form input::placeholder,.gy-form textarea::placeholder{color:#9A948B}
input,textarea,select{font-family:var(--sans)}
.tt-form input::placeholder,.tt-form textarea::placeholder{color:#9A948B!important}

/* ── 17. TIỆN ÍCH ──────────────────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *{transition:none!important; animation:none!important; scroll-behavior:auto!important}
}
@media print{
  header,nav,footer,.tt-nut-bai,.tt-fb-float,.dieuhuong,.bai-lien-quan-tinh,.khoi-aff{display:none!important}
  body{background:#fff; font-size:11.5pt}
  article{border:0; box-shadow:none; max-width:100%; padding:0; margin:0}
  article .than{font-size:11.5pt; line-height:1.6}
  a{color:#000; text-decoration:none}
}