/* ============================================================
   THÀNH HƯNG — Trang bài viết (single post · "Tin tức"/Cẩm nang)
   Editorial layout 70/30: hero + article + sidebar sticky + related.
   Chỉ nạp trên single post thuộc category "Tin tức" (xem functions.php).
   Port từ design handoff "Bài viết mẫu" (Be Vietnam Pro).
   Scope dưới .th-blog để không đụng chrome Flatsome / trang khác.
   ============================================================ */

/* ---------- Tokens (tự chứa — home CSS không nạp ở single post) ---------- */
:root {
  --th-red: #BF0603;
  --th-red-hover: #A30503;
  --red-50: #FCF0F0;
  --navy-900: #011631;
  --copper-400: #E4BC6C;
  --blue-800: #004E89;
  --white: #FFFFFF;
  --neutral-50: #F0F3FA;
  --neutral-200: #C9CDD2;
  --neutral-400: #9EA4AA;
  --neutral-500: #72787F;
  --neutral-700: #4B4F54;
  --neutral-900: #1B1D1F;
  --surface-tint-red: var(--red-50);
  --border-subtle: var(--neutral-200);
  --border-strong: var(--neutral-400);
  --shadow-sm: 0 1px 3px rgba(1,22,49,.08);
  --shadow-lg: 0 12px 28px rgba(1,22,49,.16);
  --shadow-cta: 0 6px 16px rgba(191,6,3,.30);
  --ease-out: cubic-bezier(0.22,0.61,0.36,1);
  --th-radius-scale: 1;
}

/* ---------- Ép font thương hiệu Be Vietnam Pro (Flatsome inline = Lato, thắng kế thừa) ---------- */
.th-blog,
.th-blog h1, .th-blog h2, .th-blog h3, .th-blog h4, .th-blog h5, .th-blog h6,
.th-blog p, .th-blog a, .th-blog span, .th-blog li, .th-blog div,
.th-blog input, .th-blog button, .th-blog .th-pill,
.mob-callbar, .mob-callbar a, .qq-popup, .qq-popup input, .qq-popup button {
  font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
}

/* ---------- Reset Flatsome content wrapper cho trang này ---------- */
.th-blog { background: #fff; }
.th-blog, .th-blog .page-wrapper-inner, .th-blog .entry-content {
  max-width: none !important; padding: 0 !important; margin: 0 !important;
}
.th-blog * { box-sizing: border-box; }
.th-blog img { max-width: 100%; display: block; height: auto; }
.th-blog a { text-decoration: none; color: inherit; }

/* shared pill button (không phụ thuộc home CSS) */
.th-blog .th-pill {
  border-radius: 999px; height: 46px; padding: 0 26px; display: inline-flex;
  align-items: center; justify-content: center; gap: 8px; font-weight: 700;
  font-size: 15px; border: 2px solid transparent; cursor: pointer; text-decoration: none;
  transition: background .18s var(--ease-out), color .18s, transform .12s, box-shadow .18s;
  white-space: nowrap; font-family: inherit; line-height: 1;
}
.th-blog .th-pill.primary { background: var(--th-red); color: #fff; box-shadow: var(--shadow-cta); }
.th-blog .th-pill.primary:hover { background: var(--th-red-hover); transform: translateY(-1px); color:#fff; }
.th-blog .th-pill.white { background: #fff; color: var(--th-red); }
.th-blog .th-pill.white:hover { background: var(--neutral-50); transform: translateY(-1px); }

/* ---------- Reading progress bar ---------- */
.read-progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--th-red); z-index: 999; width: 0%; transition: width .1s linear; }

/* ---------- Shell — canh mép H1 khớp mép bài viết ---------- */
.th-blog .post-shell { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.th-blog .post-hero-grid { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 48px; align-items: end; }

/* ---------- Hero ---------- */
.th-blog .post-hero { padding: 36px 0 28px; border-bottom: 1px solid var(--border-subtle); }
.th-blog .post-crumb { font-size: 14px; color: var(--neutral-500); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.th-blog .post-crumb a { color: var(--neutral-500); }
.th-blog .post-crumb a:hover { color: var(--th-red); }
.th-blog .post-crumb .sep { color: var(--neutral-400); }
.th-blog .post-crumb .cur { color: var(--navy-900); font-weight: 600; }
.th-blog .post-title { font-size: 36px; font-weight: 800; color: var(--navy-900); line-height: 1.25; margin: 14px 0 18px; letter-spacing: -0.01em; text-wrap: balance; }
.th-blog .post-meta { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; }
.th-blog .post-avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; background: var(--navy-900); display: flex; align-items: center; justify-content: center; color: var(--copper-400); }
.th-blog .post-meta-text { font-size: 14px; color: var(--neutral-700); display: inline-flex; align-items: center; gap: 5px; }
.th-blog .post-meta-text b { color: var(--navy-900); }
.th-blog .post-meta-text svg { color: var(--neutral-500); }

/* ---------- Layout 70/30 ---------- */
/* Chỉ set padding dọc — KHÔNG dùng shorthand vì sẽ đè mất padding ngang 24px
   của .post-shell (element này mang cả 2 class) → nội dung dính sát lề mobile. */
.th-blog .post-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 48px; align-items: start; padding-top: 40px; padding-bottom: 60px; }
.th-blog .post-main { max-width: 720px; min-width: 0; }
.th-blog .post-side { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 16px; }

/* ---------- Article typography (nhắm nội dung WP editor tự sinh) ----------
   Dùng combinator con trực tiếp (>) để KHÔNG đè lên nội dung .thsp (bài dịch vụ
   nhúng section riêng có style riêng); chỉ style banner intro + thân bài blog. */
.th-blog .article { font-size: 18px; line-height: 1.75; color: var(--neutral-700); }
.th-blog .article > p { margin: 0 0 22px; }
/* Ép căn trái — content cũ có text-align:justify inline gây dính sát 2 lề, khó đọc trên mobile */
.th-blog .article > p, .th-blog .article > ul li, .th-blog .article > ol li { text-align: left; }
.th-blog .article > p[style*="justify"], .th-blog .article li[style*="justify"] { text-align: left !important; }
.th-blog .article > h2 { font-size: 24px; font-weight: 800; color: var(--navy-900); margin: 42px 0 18px; padding-left: 14px; border-left: 4px solid var(--th-red); line-height: 1.3; scroll-margin-top: 90px; }
.th-blog .article > h3 { font-size: 20px; font-weight: 800; color: var(--navy-900); margin: 28px 0 12px; scroll-margin-top: 90px; }
.th-blog .article > ul, .th-blog .article > ol { margin: 0 0 22px; padding-left: 22px; }
.th-blog .article > ul > li, .th-blog .article > ol > li { margin-bottom: 8px; }
.th-blog .article > p a, .th-blog .article > ul a, .th-blog .article > ol a { color: var(--blue-800); font-weight: 600; }
.th-blog .article > p a:hover, .th-blog .article > ul a:hover, .th-blog .article > ol a:hover { text-decoration: underline; }
.th-blog .article > p img, .th-blog .article > figure img { border-radius: 12px; margin: 8px auto 24px; }
.th-blog .article > figure { margin: 0 0 24px; }
.th-blog .article > figure figcaption { font-size: 13.5px; color: var(--neutral-500); text-align: center; margin-top: 8px; }
.th-blog .article > blockquote { margin: 0 0 24px; padding: 4px 0 4px 20px; border-left: 4px solid var(--copper-400); color: var(--neutral-700); font-style: italic; }
/* Nút CTA banner cũ (.button.primary) → pill đỏ đồng bộ */
.th-blog .article > p a.button { display: inline-flex; align-items: center; gap: 8px; background: var(--th-red); color: #fff; font-weight: 700; padding: 12px 26px; border-radius: 999px; box-shadow: var(--shadow-cta); }
.th-blog .article > p a.button:hover { background: var(--th-red-hover); text-decoration: none; }

/* ---------- Bảng (bảng giá / chi phí / khu vực) ----------
   Bảng trong bài là <table> trơn (hàng đầu = <th>, thân = <td>). JS bọc mỗi
   bảng trong .th-tablewrap để bo góc + đổ bóng + cuộn ngang trên mobile. */
.th-blog .th-tablewrap { margin: 8px 0 26px; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border-subtle); border-radius: 12px; box-shadow: var(--shadow-sm); background: #fff; }
.th-blog .th-tablewrap table { width: 100%; border-collapse: collapse; font-size: 15px; color: var(--neutral-700); }
/* Bảng nhiều cột (>=4): KHÓA layout để cột chữ (loại xe / kích thước) đủ rộng,
   cột số hẹp lại → không bị bóp méo, hàng không cao lêu nghêu. min-width để cuộn
   ngang mượt trên điện thoại nhỏ. */
/* Lặp class (.th-tablewrap.th-tablewrap--wide) để tăng specificity, đè được rule
   padding chung .th-tablewrap td ở dưới (cùng hạng specificity nhưng đứng sau). */
.th-blog .th-tablewrap.th-tablewrap--wide table { min-width: 560px; }
.th-blog .th-tablewrap.th-tablewrap--wide th { padding: 11px 10px; font-size: 11.5px; }
.th-blog .th-tablewrap.th-tablewrap--wide td { padding: 11px 10px; font-size: 14px; }
/* Cột SỐ (từ cột 3): giữ 1 dòng (không vỡ giữa con số) + padding ngang hẹp để 7 cột
   vừa khít khổ chữ, không tràn ngang. Cột chữ (loại xe/kích thước) đặt bề rộng tối
   thiểu vừa đủ cho hàng chỉ cao 1-2 dòng. */
.th-blog .th-tablewrap.th-tablewrap--wide th:nth-child(n+3),
.th-blog .th-tablewrap.th-tablewrap--wide td:nth-child(n+3) { white-space: nowrap; padding-left: 8px; padding-right: 8px; }
.th-blog .th-tablewrap.th-tablewrap--wide th:first-child,
.th-blog .th-tablewrap.th-tablewrap--wide td:first-child { min-width: 150px; }
.th-blog .th-tablewrap.th-tablewrap--wide th:nth-child(2),
.th-blog .th-tablewrap.th-tablewrap--wide td:nth-child(2) { min-width: 108px; }

/* Hàng tiêu đề (navy) */
.th-blog .th-tablewrap th { background: var(--navy-900); color: #fff; font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; text-align: left; padding: 13px 16px; line-height: 1.35; vertical-align: middle; border: none; }
.th-blog .th-tablewrap th strong { font-weight: 700; color: inherit; }

/* Ô dữ liệu */
.th-blog .th-tablewrap td { padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; line-height: 1.55; }
.th-blog .th-tablewrap tr:last-child td { border-bottom: none; }

/* Cột đầu (tên loại xe / hạng mục) in đậm navy để dễ quét */
.th-blog .th-tablewrap td:first-child { font-weight: 700; color: var(--navy-900); }
.th-blog .th-tablewrap td:first-child strong { font-weight: 700; color: inherit; }

/* Cột số liệu (từ cột 3 trở đi) canh giữa cho gọn hàng */
.th-blog .th-tablewrap th:nth-child(n+3), .th-blog .th-tablewrap td:nth-child(n+3) { text-align: center; }

/* Sọc ngựa vằn + hover */
.th-blog .th-tablewrap tr:nth-child(even) td { background: var(--neutral-50); }
.th-blog .th-tablewrap tr:hover td { background: var(--surface-tint-red); }

/* Gạch chân đồng nhấn thương hiệu dưới hàng tiêu đề (không áp cho bảng lưới) */
.th-blog .th-tablewrap:not(.th-tablewrap--grid) tr:first-child th {
  border-bottom: 3px solid var(--copper-400);
}

/* ---------- Bảng LƯỚI khu vực (danh sách phường/xã xếp lưới) ----------
   Không phải bảng dữ liệu: mỗi ô là 1 tên phường. Style đồng nhất dạng "thẻ":
   bỏ header navy, bỏ cột đầu in đậm, các cột đều nhau, canh giữa. Nhân đôi class
   để thắng các rule th/td:first-child bên trên (specificity cao hơn). */
.th-blog .th-tablewrap--grid table { table-layout: fixed; min-width: 0; }
.th-blog .th-tablewrap--grid.th-tablewrap--grid th,
.th-blog .th-tablewrap--grid.th-tablewrap--grid td {
  background: #fff; color: var(--navy-900); font-weight: 600;
  text-transform: none; letter-spacing: 0; font-size: 14.5px;
  text-align: center; padding: 13px 14px; line-height: 1.45; vertical-align: middle;
  border: none;
  border-right: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.th-blog .th-tablewrap--grid.th-tablewrap--grid tr > *:last-child { border-right: none; }
.th-blog .th-tablewrap--grid.th-tablewrap--grid tr:last-child > * { border-bottom: none; }
.th-blog .th-tablewrap--grid.th-tablewrap--grid tr:nth-child(even) td { background: var(--neutral-50); }
.th-blog .th-tablewrap--grid.th-tablewrap--grid tr:hover > * { background: var(--surface-tint-red); }

/* ---------- TOC box (JS tự sinh từ H2) ---------- */
/* Ẩn mục lục do plugin Easy TOC tự chèn — đã có .toc-box custom khớp thiết kế */
.th-blog #ez-toc-container, .th-blog .ez-toc-v2_0_83, .th-blog div.ez-toc-container { display: none !important; }
.th-blog .toc-box { background: var(--neutral-50); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 18px 20px; margin: 8px 0 32px; }
.th-blog .toc-head { display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.th-blog .toc-head span.t { font-weight: 800; color: var(--navy-900); font-size: 15px; display: flex; align-items: center; gap: 8px; }
.th-blog .toc-head span.t svg { color: var(--th-red); }
.th-blog .toc-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; counter-reset: toc; }
.th-blog .toc-list a { color: var(--blue-800); font-size: 14.5px; font-weight: 500; }
.th-blog .toc-list a:hover { text-decoration: underline; }
.th-blog .toc-box[data-open="0"] .toc-list { display: none; }
.th-blog .toc-box[data-open="0"] .toc-chevron { transform: rotate(-90deg); }
.th-blog .toc-chevron { transition: transform .18s; color: var(--neutral-500); }

/* ---------- In-content CTA ---------- */
.th-blog .incta-box { background: var(--surface-tint-red); border-radius: 14px; padding: 28px 30px; margin: 40px 0 8px; text-align: center; }
.th-blog .incta-box h4 { font-size: 20px; font-weight: 800; color: var(--th-red); margin: 0 0 8px; }
.th-blog .incta-box p { font-size: 15px; color: var(--neutral-700); margin: 0 0 18px; line-height: 1.6; }

/* ---------- Author + risk reversal (panel cuối bài) ---------- */
.th-blog .end-panel { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 28px; margin-top: 44px; background: var(--neutral-50); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 28px 30px; }
.th-blog .end-col { display: flex; gap: 16px; align-items: flex-start; }
.th-blog .end-divider { background: var(--border-subtle); }
.th-blog .end-ic { flex: none; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }
.th-blog .end-ic.navy { border-radius: 50%; background: var(--navy-900); color: var(--copper-400); }
.th-blog .end-ic.tint { border-radius: 14px; background: var(--surface-tint-red); color: var(--th-red); }
.th-blog .end-eyebrow { font-size: 11.5px; font-weight: 700; color: var(--th-red); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.th-blog .end-col h4 { font-size: 16px; font-weight: 800; color: var(--navy-900); margin: 0 0 5px; }
.th-blog .end-col p { font-size: 13.5px; color: var(--neutral-500); margin: 0; line-height: 1.55; }

/* ---------- Sidebar cards ---------- */
.th-blog .side-card { background: #fff; border: 1px solid var(--border-subtle); border-radius: 12px; padding: 20px; box-shadow: var(--shadow-sm); }
.th-blog .side-cta { background: var(--navy-900); color: #fff; text-align: center; background-image: radial-gradient(rgba(228,188,108,.14) 1px, transparent 1.4px); background-size: 18px 18px; }
.th-blog .side-cta .ic { color: var(--copper-400); display: inline-flex; }
.th-blog .side-cta h4 { font-size: 16px; font-weight: 800; color: #fff; margin: 10px 0 6px; }
.th-blog .side-cta p { font-size: 13px; color: #C2C8D6; margin: 0 0 14px; line-height: 1.55; }
.th-blog .side-title { font-size: 13px; font-weight: 800; color: var(--navy-900); margin-bottom: 12px; text-transform: uppercase; letter-spacing: .04em; }
.th-blog .side-share { display: flex; gap: 10px; }
.th-blog .side-share a { width: 40px; height: 40px; border-radius: 10px; background: var(--neutral-50); display: flex; align-items: center; justify-content: center; color: var(--navy-900); transition: background .15s, color .15s; }
.th-blog .side-share a:hover { background: var(--th-red); color: #fff; }
.th-blog .side-links a { display: flex; align-items: center; gap: 9px; padding: 10px 0; font-size: 14px; color: var(--neutral-700); border-top: 1px solid var(--border-subtle); }
.th-blog .side-links a:first-child { border-top: none; }
.th-blog .side-links a:hover { color: var(--th-red); }
.th-blog .side-links svg { color: var(--th-red); flex: none; }

/* ---------- Related posts ---------- */
.th-blog .related-wrap { background: var(--neutral-50); padding: 56px 0; }
.th-blog .related-head { text-align: center; margin-bottom: 30px; }
.th-blog .related-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .01em; color: var(--th-red); display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.th-blog .related-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--th-red); }
.th-blog .related-title { font-size: 30px; font-weight: 800; color: var(--navy-900); margin: 0; letter-spacing: -.02em; }
.th-blog .related-title .kw { color: var(--th-red); }
.th-blog .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.th-blog .related-card { display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--border-subtle); transition: transform .15s, box-shadow .15s; background: #fff; }
.th-blog .related-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.th-blog .related-thumb { aspect-ratio: 16/9; background: var(--surface-tint-red); overflow: hidden; }
.th-blog .related-thumb img { width: 100%; height: 100%; object-fit: cover; }
.th-blog .related-card h3 { font-size: 16px; font-weight: 700; color: var(--navy-900); margin: 0 0 8px; line-height: 1.4; }
.th-blog .related-card p { font-size: 13.5px; color: var(--neutral-500); margin: 0; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.th-blog .related-body { padding: 18px; }

/* ---------- Sticky mobile call bar ---------- */
.mob-callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: none; box-shadow: 0 -4px 16px rgba(1,22,49,.16); }
.mob-callbar a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 4px; color: #fff; font-size: 13.5px; font-weight: 700; }
.mob-callbar .u-call { background: var(--th-red); }
.mob-callbar .u-zalo { background: var(--blue-800); }

/* ---------- Quick-quote selection popup ---------- */
.qq-popup { position: absolute; z-index: 90; background: var(--navy-900); color: #fff; padding: 8px 8px 8px 14px; border-radius: 10px; display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow-lg); font-size: 13.5px; max-width: 320px; }
.qq-popup button { background: var(--th-red); color: #fff; border: none; border-radius: 7px; padding: 8px 12px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; }
.qq-popup input { width: 140px; border: none; border-radius: 6px; padding: 8px 10px; font-size: 13px; font-family: inherit; }
.qq-popup .ok { display: flex; align-items: center; gap: 6px; color: #7CE0AE; }
.qq-popup::after { content: ""; position: absolute; bottom: -6px; left: 20px; width: 12px; height: 12px; background: var(--navy-900); transform: rotate(45deg); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .th-blog .post-layout { grid-template-columns: 1fr; }
  .th-blog .post-side { position: static; }
  .th-blog .post-hero-grid { grid-template-columns: 1fr; }
  .th-blog .post-hero-grid > .spacer { display: none; }
  .th-blog .related-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .th-blog .article { font-size: 16px; }
  .th-blog .article h2 { font-size: 21px; }
  .th-blog .end-panel { grid-template-columns: 1fr; gap: 24px; }
  .th-blog .end-divider { display: none; }
  .th-blog .related-grid { grid-template-columns: 1fr; }
  .th-blog .related-title { font-size: 24px; }
}
@media (max-width: 860px) {
  .th-blog .post-title { font-size: 26px; }
  body.single-post { padding-bottom: 58px; }
  .mob-callbar { display: flex; }
}
@media (prefers-reduced-motion: reduce) { .th-blog *, .read-progress { animation: none !important; scroll-behavior: auto !important; transition: none !important; } }