/* ============================================================
   BLOG CATEGORY — Thành Hưng Taxi Tải
   Trang chuyên mục (category archive) editorial: hero navy chấm đồng,
   filter chips + tìm kiếm live, featured post, lưới bài, sidebar sticky.
   Self-contained tokens (mỗi CSS page tự khai báo :root theo convention theme).
   Chỉ nạp trên trang category "khu-vuc" / "tin-tuc".
   ============================================================ */
:root {
  --navy-900: #011631;
  --navy-800: #131540;
  --th-red: #BF0603;
  --th-red-hover: #A30503;
  --red-50: #FCF0F0;
  --red-200: #F0A8A6;
  --copper-400: #E4BC6C;
  --blue-800: #004E89;
  --white: #FFFFFF;
  --neutral-50: #F0F3FA;
  --neutral-100: #E5E7EB;
  --neutral-200: #C9CDD2;
  --neutral-400: #9EA4AA;
  --neutral-500: #72787F;
  --neutral-700: #4B4F54;
  --neutral-900: #1B1D1F;
  --border-subtle: #C9CDD2;
  --border-strong: #9EA4AA;
  --surface-tint-red: #FCF0F0;
  --shadow-xs: 0 1px 2px rgba(1, 22, 49, .06);
  --shadow-sm: 0 1px 3px rgba(1, 22, 49, .08), 0 1px 2px rgba(1, 22, 49, .04);
  --shadow-md: 0 4px 12px rgba(1, 22, 49, .10);
  --shadow-lg: 0 12px 28px rgba(1, 22, 49, .14);
  --shadow-cta: 0 6px 16px rgba(191, 6, 3, .28);
  --ease-out: cubic-bezier(.22, .61, .36, 1);
}

.th-cat {
  font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  background: #fff;
  color: var(--neutral-700);
}
/* Ép font đồng bộ — Flatsome gán font riêng lên h1..h6 nên phải override tường minh
   (kế thừa từ .th-cat sẽ thua rule cấp element của theme cha). */
.th-cat h1, .th-cat h2, .th-cat h3, .th-cat h4, .th-cat h5, .th-cat h6,
.th-cat p, .th-cat a, .th-cat span, .th-cat li, .th-cat div,
.th-cat input, .th-cat button,
.mob-callbar, .mob-callbar a {
  font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
}
.th-cat *,
.th-cat *::before,
.th-cat *::after { box-sizing: border-box; }
.th-cat img { max-width: 100%; display: block; }
.th-cat .kw { color: var(--copper-400); }

/* ---------- Shell ---------- */
.cat-shell { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---------- Hero ---------- */
.cat-hero {
  background: var(--navy-900);
  background-image: radial-gradient(rgba(228, 188, 108, .14) 1px, transparent 1.4px);
  background-size: 22px 22px;
  padding: 40px 0 44px;
}
.cat-crumb { font-size: 13.5px; color: #9aa3b5; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cat-crumb a { color: #9aa3b5; text-decoration: none; transition: color .15s; }
.cat-crumb a:hover { color: #fff; }
.cat-crumb .sep { display: inline-flex; opacity: .6; }
.cat-crumb .cur { color: #fff; font-weight: 600; }
.cat-h1 {
  font-size: 34px; font-weight: 800; color: #fff; line-height: 1.2;
  margin: 14px 0 12px; letter-spacing: -.02em; text-wrap: balance; max-width: 760px;
}
.cat-lead { font-size: 16px; color: #C2C8D6; line-height: 1.6; margin: 0 0 24px; max-width: 640px; }
/* Trang Khu vực đã bỏ ô tìm kiếm + hàng số liệu, nên đoạn mô tả trở thành phần tử
   cuối của hero. Nếu vẫn giữ margin dưới 24px thì cộng với padding 44px của hero
   sẽ thành 68px trống hẫng phía dưới. Bỏ margin khi nó đứng cuối. */
.cat-lead:last-child { margin-bottom: 0; }

.cat-search { display: flex; gap: 10px; max-width: 520px; }
.cat-search input {
  flex: 1; height: 50px; border-radius: 999px; border: none; padding: 0 20px;
  font-size: 15px; font-family: inherit; color: var(--navy-900); min-width: 0;
}
.cat-search input:focus { outline: 2px solid var(--copper-400); }
.cat-search button {
  height: 50px; padding: 0 22px; border-radius: 999px; border: none; cursor: pointer;
  background: var(--th-red); color: #fff; font-weight: 700; font-size: 15px; font-family: inherit;
  display: inline-flex; align-items: center; gap: 8px; transition: background .18s, transform .12s;
}
.cat-search button:hover { background: var(--th-red-hover); transform: translateY(-1px); }

.cat-hero-stats { display: flex; gap: 26px; margin-top: 22px; flex-wrap: wrap; }
.cat-hero-stats .stat { color: #fff; }
.cat-hero-stats .stat b { font-size: 22px; font-weight: 800; display: block; line-height: 1; }
.cat-hero-stats .stat span { font-size: 12.5px; color: #9aa3b5; }

/* ---------- Filter chips ---------- */
.cat-filterbar { border-bottom: 1px solid var(--border-subtle); background: #fff; }
.cat-filter { display: flex; gap: 9px; flex-wrap: wrap; padding: 20px 0; align-items: center; }
.cat-filter .flabel { font-size: 12.5px; font-weight: 800; color: var(--neutral-400); text-transform: uppercase; letter-spacing: .04em; margin-right: 4px; }
.cat-chip {
  padding: 9px 17px; border-radius: 999px; border: 1.5px solid var(--border-subtle); background: #fff;
  color: var(--neutral-700); font-family: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer;
  transition: all .14s; display: inline-flex; align-items: center; gap: 7px;
}
.cat-chip .cnt { font-size: 12px; opacity: .7; font-weight: 700; }
.cat-chip:hover { border-color: var(--th-red); color: var(--th-red); }
.cat-chip.on { background: var(--th-red); color: #fff; border-color: var(--th-red); }
.cat-chip.on .cnt { opacity: .85; }

/* ---------- Layout ---------- */
.cat-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 44px; align-items: start; padding: 34px 0 60px; }

/* ---------- Featured post ---------- */
.feat-post {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; border: 1px solid var(--border-subtle);
  border-radius: 16px; overflow: hidden; margin-bottom: 26px; background: #fff; box-shadow: var(--shadow-sm);
  text-decoration: none; color: inherit; transition: box-shadow .18s, transform .15s;
}
.feat-post:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.feat-thumb { position: relative; min-height: 280px; background: var(--neutral-50); overflow: hidden; }
.feat-thumb img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.feat-thumb .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--neutral-400); }
.feat-flag { position: absolute; top: 14px; left: 14px; background: var(--copper-400); color: var(--navy-900); font-size: 11.5px; font-weight: 800; padding: 5px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; z-index: 2; }
.feat-body { padding: 30px 32px; display: flex; flex-direction: column; justify-content: center; }
.feat-tag { font-size: 12px; font-weight: 800; color: var(--th-red); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.feat-body h2 { font-size: 24px; font-weight: 800; color: var(--navy-900); line-height: 1.25; margin: 0 0 12px; letter-spacing: -.01em; }
.feat-body p { font-size: 15px; line-height: 1.65; color: var(--neutral-500); margin: 0 0 18px; }
.feat-meta { display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--neutral-400); }
.feat-meta span { display: inline-flex; align-items: center; gap: 5px; }

/* ---------- Post grid ---------- */
.cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.pcard {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  border: 1px solid var(--border-subtle); border-radius: 14px; overflow: hidden; background: #fff;
  transition: transform .15s, box-shadow .15s;
}
.pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.pcard-thumb { aspect-ratio: 16 / 9; position: relative; background: var(--neutral-50); overflow: hidden; }
.pcard-thumb img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.pcard-thumb .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--neutral-400); }
.pcard-tag { position: absolute; top: 12px; left: 12px; background: var(--th-red); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; z-index: 2; }
.pcard-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.pcard-body h3 { font-size: 16px; font-weight: 700; color: var(--navy-900); line-height: 1.35; margin: 0 0 8px; letter-spacing: -.01em; }
.pcard-body p { font-size: 13.5px; line-height: 1.55; color: var(--neutral-500); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard-meta { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--neutral-400); margin-top: auto; padding-top: 12px; }
.pcard-meta span { display: inline-flex; align-items: center; gap: 5px; }
.pcard-cta { margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--th-red); transition: gap .15s; }
.pcard:hover .pcard-cta { gap: 10px; }

/* filter/search hidden state */
.pcard.hide, .feat-post.hide { display: none; }
.cat-noresult { display: none; text-align: center; padding: 50px 20px; color: var(--neutral-500); font-size: 15px; }
.cat-noresult.show { display: block; }
.cat-count-note { font-size: 13.5px; color: var(--neutral-400); margin: 0 0 18px; }

/* ---------- Sidebar ---------- */
.cat-side { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 16px; }
.cside-card { background: #fff; border: 1px solid var(--border-subtle); border-radius: 12px; padding: 20px; box-shadow: var(--shadow-sm); }
.cside-title { font-size: 13px; font-weight: 800; color: var(--navy-900); margin: 0 0 14px; text-transform: uppercase; letter-spacing: .04em; }
.cside-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;
}
.cside-cta .ic { width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.cside-cta h4 { color: #fff; font-size: 17px; font-weight: 800; margin: 0 0 6px; }
.cside-cta p { color: #C2C8D6; font-size: 13px; line-height: 1.5; margin: 0 0 16px; }
.cta-call {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px;
  border-radius: 999px; background: var(--th-red); color: #fff; font-weight: 800; font-size: 15px;
  text-decoration: none; box-shadow: var(--shadow-cta); transition: background .18s, transform .12s;
}
.cta-call:hover { background: var(--th-red-hover); transform: translateY(-1px); color: #fff; }

.cside-links { display: flex; flex-direction: column; gap: 2px; }
.cside-links a { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: 9px; font-size: 14px; font-weight: 500; color: var(--neutral-700); text-decoration: none; transition: background .14s, color .14s; }
.cside-links a:hover { background: var(--surface-tint-red); color: var(--th-red); }
.cside-links a .cico { color: var(--th-red); flex: none; display: inline-flex; }

.cside-recent { display: flex; flex-direction: column; gap: 12px; }
.cside-recent a { display: flex; gap: 11px; text-decoration: none; color: inherit; align-items: flex-start; }
.cside-recent a:hover .rt { color: var(--th-red); }
.cside-recent .rthumb { width: 62px; height: 46px; border-radius: 8px; overflow: hidden; flex: none; background: var(--neutral-50); position: relative; }
.cside-recent .rthumb img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.cside-recent .rt { font-size: 13px; font-weight: 600; color: var(--navy-900); line-height: 1.4; transition: color .14s; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- 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);
  font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
}
.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; text-decoration: none; }
.mob-callbar .u-call { background: var(--th-red); }
.mob-callbar .u-zalo { background: var(--blue-800); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .cat-layout { grid-template-columns: 1fr; gap: 30px; }
  .cat-side { position: static; }
  .feat-post { grid-template-columns: 1fr; }
  .feat-thumb { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 620px) {
  .cat-grid { grid-template-columns: 1fr; }
  .cat-h1 { font-size: 26px; }
  .cat-search { max-width: none; }
  .feat-body { padding: 22px 20px; }

  /* Filter chips → dải cuộn ngang gọn gàng (bleed sát 2 mép cho tự nhiên). */
  .cat-filterbar .cat-shell { padding: 0; }
  .cat-filter {
    flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding: 14px 16px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  }
  .cat-filter::-webkit-scrollbar { display: none; }
  .cat-filter .flabel { display: none; }
  .cat-chip { flex: 0 0 auto; padding: 8px 15px; font-size: 13px; scroll-snap-align: start; }
}
@media (max-width: 768px) {
  .mob-callbar { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .th-cat * { transition: none !important; }
}