/* =====================================================================
   catba-blog-v1.css — Trang danh mục bài viết + bài chi tiết (Cát Bà v1.0)
   Chỉ nạp ở category và bài viết (post). Class bắt đầu bằng pq-.
   Dùng lại biến màu cb- của trang chủ nếu có, không có thì dùng giá trị dự phòng.
   ===================================================================== */
.pq-blog-view #content,
.pq-blog-page {
  --pq-primary: var(--cb-primary, #0078d4);
  --pq-accent:  var(--cb-accent, #f7941d);
  --pq-accent-h: var(--cb-accent-hover, #e8850f);
  --pq-deep:    var(--cb-deep, #0a2e4a);
  --pq-ink:     var(--cb-ink, #10243a);
  --pq-text:    var(--cb-text, #3d4a5a);
  --pq-muted:   var(--cb-muted, #6b7a8c);
  --pq-line:    var(--cb-line, #e3ecf4);
  --pq-sand:    var(--cb-sand, #f4f8fb);
  --pq-radius:  var(--cb-radius, 18px);
  --pq-shadow:  var(--cb-shadow, 0 14px 34px rgba(10, 46, 74, .14));
  color: var(--pq-text);
}
.pq-blog-page a { text-decoration: none; }
.pq-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.pq-wrap--read { max-width: 820px; }

/* ---------- Hero ---------- */
.pq-bhero {
  position: relative; padding: 72px 0 84px; color: #fff;
  background:
    linear-gradient(180deg, rgba(6, 28, 48, .55) 0%, rgba(6, 28, 48, .88) 100%),
    var(--pq-hero, none) center 42% / cover no-repeat,
    var(--pq-deep);
}
.pq-bhero--post { padding: 56px 0 120px; }
.pq-eyebrow { display: block; margin-bottom: 10px; color: #ffd08a; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.pq-bhero-title {
  margin: 0 0 14px; color: #fff; font-weight: 800; line-height: 1.12;
  font-size: clamp(1.9rem, 4.2vw, 3.1rem); text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.pq-bhero--post .pq-bhero-title { font-size: clamp(1.7rem, 3.6vw, 2.6rem); max-width: 780px; }
.pq-bhero-desc, .pq-bhero-desc p { margin: 0; max-width: 640px; color: rgba(255, 255, 255, .92); font-size: 1.08rem; line-height: 1.7; }

.pq-crumb { margin-bottom: 18px; font-size: .86rem; }
.pq-crumb ol { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; list-style: none; }
.pq-crumb li { margin: 0; color: rgba(255, 255, 255, .7); }
.pq-crumb li + li::before { content: "›"; margin-right: 8px; color: rgba(255, 255, 255, .5); }
.pq-crumb a { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .35); }
.pq-crumb a:hover { border-bottom-color: #fff; }

.pq-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pq-bhero .pq-post-cat { background: rgba(255, 255, 255, .16); color: #fff; border: 1px solid rgba(255, 255, 255, .35); }
.pq-bhero .pq-post-cat:hover { background: rgba(255, 255, 255, .3); color: #fff; }

/* ---------- Khối nội dung ---------- */
.pq-bsec { padding: 56px 0 72px; background: #fff; }
.pq-sec-title { margin: 0 0 26px; color: var(--pq-deep); font-size: 1.5rem; font-weight: 800; line-height: 1.2; }

/* Chip chuyên mục */
.pq-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 30px; }
.pq-chip {
  display: inline-block; padding: 8px 18px; border-radius: 99px; border: 1px solid var(--pq-line);
  background: #fff; color: var(--pq-deep); font-size: .9rem; font-weight: 700; transition: background .2s, color .2s, border-color .2s;
}
.pq-chip:hover { border-color: var(--pq-primary); color: var(--pq-primary); }
.pq-chip.is-on { background: var(--pq-primary); border-color: var(--pq-primary); color: #fff; }

/* ---------- Lưới bài ---------- */
.pq-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.pq-post-card {
  display: flex; flex-direction: column; overflow: hidden; margin: 0;
  background: #fff; border: 1px solid var(--pq-line); border-radius: var(--pq-radius);
  box-shadow: 0 6px 20px rgba(10, 46, 74, .06); transition: transform .25s ease, box-shadow .25s ease;
}
.pq-post-card:hover { transform: translateY(-4px); box-shadow: var(--pq-shadow); }
.pq-post-media { display: block; position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--pq-sand); }
.pq-post-img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.pq-post-card:hover .pq-post-img { transform: scale(1.04); }
.pq-post-ph { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #cfe6f7 0%, #eaf4fb 55%, #fde9cf 100%); }
.pq-post-body { display: flex; flex: 1; flex-direction: column; padding: 22px 24px 26px; }
.pq-post-cat {
  align-self: flex-start; display: inline-block; margin-bottom: 10px; padding: 4px 12px; border-radius: 99px;
  background: #e8f3fc; color: var(--pq-primary); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.pq-post-cat:hover { background: var(--pq-primary); color: #fff; }
.pq-post-title { margin: 0 0 8px; font-size: 1.2rem; line-height: 1.35; font-weight: 800; }
.pq-post-title a { color: var(--pq-deep); }
.pq-post-title a:hover { color: var(--pq-primary); }
.pq-post-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 12px; color: var(--pq-muted); font-size: .84rem; }
.pq-post-excerpt { margin: 0 0 18px; color: var(--pq-text); font-size: .96rem; line-height: 1.7; }
.pq-post-more { margin-top: auto; color: var(--pq-primary); font-size: .92rem; font-weight: 800; }
.pq-post-more:hover { color: var(--pq-deep); }

/* Bài đầu trang 1: thẻ ngang, chiếm cả hàng */
.pq-post-card--lead { grid-column: 1 / -1; flex-direction: row; }
.pq-post-card--lead .pq-post-media { flex: 0 0 58%; aspect-ratio: auto; min-height: 380px; }
.pq-post-card--lead .pq-post-img, .pq-post-card--lead .pq-post-ph { position: absolute; inset: 0; width: 100%; height: 100%; }
.pq-post-card--lead .pq-post-body { justify-content: center; padding: 34px 38px; }
.pq-post-card--lead .pq-post-title { font-size: 1.8rem; line-height: 1.25; }
.pq-post-card--lead .pq-post-excerpt { font-size: 1.04rem; }
.pq-post-card--lead .pq-post-more { margin-top: 6px; }

/* Phân trang */
.pq-pager { margin-top: 44px; text-align: center; }
.pq-pager ul, .pq-pager ul.page-numbers { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pq-pager li { margin: 0; }
.pq-pager a.page-numbers, .pq-pager span.page-numbers {
  display: inline-block; min-width: 42px; padding: 10px 16px; border: 1px solid var(--pq-line); border-radius: 99px;
  background: #fff; color: var(--pq-deep); font-weight: 700; line-height: 1.2;
}
.pq-pager a.page-numbers:hover { border-color: var(--pq-primary); color: var(--pq-primary); }
.pq-pager span.page-numbers.current { background: var(--pq-primary); border-color: var(--pq-primary); color: #fff; }
.pq-pager--inline { margin: 20px 0 0; text-align: left; }
.pq-empty { padding: 60px 0; text-align: center; }
.pq-empty p { margin-bottom: 18px; font-size: 1.1rem; }

/* ---------- Nút ---------- */
.pq-btn {
  display: inline-block; padding: 13px 28px; border-radius: 99px; border: 2px solid var(--pq-accent);
  background: var(--pq-accent); color: var(--pq-ink) !important; font-size: .95rem; font-weight: 800; line-height: 1.2;
  box-shadow: 0 8px 20px rgba(247, 148, 29, .32); transition: background .2s, transform .2s;
}
.pq-btn:hover { background: var(--pq-accent-h); border-color: var(--pq-accent-h); transform: translateY(-1px); }
.pq-btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .6); color: #fff !important; box-shadow: none; }
.pq-btn--ghost:hover { background: rgba(255, 255, 255, .16); border-color: #fff; }

/* ---------- Khung kêu gọi đặt vé (cuối trang danh mục) ---------- */
.pq-cta { padding: 48px 0; background: var(--pq-deep); color: #fff; }
.pq-cta-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.pq-cta h2 { margin: 0 0 6px; color: #fff; font-size: 1.6rem; font-weight: 800; }
.pq-cta p { margin: 0; color: rgba(255, 255, 255, .85); }
.pq-cta-act { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Bài chi tiết ---------- */
.pq-post-meta--hero { margin: 0; color: rgba(255, 255, 255, .85); font-size: .92rem; }
.pq-by { font-weight: 700; color: #fff; }
.pq-body { position: relative; padding-bottom: 64px; }
.pq-cover { margin: -76px 0 36px; border-radius: var(--pq-radius); overflow: hidden; box-shadow: var(--pq-shadow); background: var(--pq-sand); }
.pq-cover-img { display: block; width: 100%; height: auto; }
.pq-body > :first-child:not(.pq-cover) { margin-top: 44px; }

.pq-content { color: var(--pq-text); font-size: 1.08rem; line-height: 1.85; overflow-wrap: break-word; }
.pq-content > *:first-child { margin-top: 0; }
.pq-content p { margin: 0 0 1.25em; }
.pq-content h2, .pq-content h3, .pq-content h4 { color: var(--pq-deep); font-weight: 800; line-height: 1.3; }
.pq-content h2 { margin: 2em 0 .7em; padding-left: 14px; border-left: 5px solid var(--pq-primary); font-size: 1.6rem; }
.pq-content h3 { margin: 1.7em 0 .6em; font-size: 1.3rem; }
.pq-content h4 { margin: 1.5em 0 .5em; font-size: 1.12rem; }
.pq-content strong { color: var(--pq-ink); }
.pq-content a { color: var(--pq-primary); border-bottom: 1px solid rgba(0, 120, 212, .35); }
.pq-content a:hover { color: var(--pq-deep); border-bottom-color: var(--pq-deep); }
.pq-content ul, .pq-content ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.pq-content li { margin-bottom: .5em; }
.pq-content img { max-width: 100%; height: auto; border-radius: 14px; }
.pq-content figure, .pq-content .wp-caption { margin: 1.8em 0; max-width: 100%; }
.pq-content figcaption, .pq-content .wp-caption-text { margin-top: 8px; color: var(--pq-muted); font-size: .88rem; text-align: center; }
.pq-content blockquote {
  margin: 1.8em 0; padding: 18px 24px; border-left: 5px solid var(--pq-accent); border-radius: 0 14px 14px 0;
  background: var(--pq-sand); color: var(--pq-ink); font-size: 1.12rem; font-style: italic;
}
.pq-content blockquote p:last-child { margin-bottom: 0; }
.pq-content table { display: block; width: 100%; max-width: 100%; margin: 1.6em 0; overflow-x: auto; border-collapse: collapse; font-size: .96rem; }
.pq-content th, .pq-content td { padding: 12px 14px; border: 1px solid var(--pq-line); text-align: left; }
.pq-content th { background: var(--pq-sand); color: var(--pq-deep); }
.pq-content iframe, .pq-content video { max-width: 100%; border-radius: 14px; }

/* Chia sẻ + tag */
.pq-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 40px 0 0; padding: 22px 0 0; border-top: 1px solid var(--pq-line); }
.pq-share-label { margin-right: 4px; color: var(--pq-deep); font-weight: 800; }
.pq-share a {
  padding: 7px 16px; border: 1px solid var(--pq-line); border-radius: 99px; color: var(--pq-deep); font-size: .88rem; font-weight: 700;
  transition: background .2s, color .2s, border-color .2s;
}
.pq-share a:hover { background: var(--pq-primary); border-color: var(--pq-primary); color: #fff; }
.pq-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pq-tags a { padding: 4px 12px; border-radius: 99px; background: var(--pq-sand); color: var(--pq-muted); font-size: .84rem; }
.pq-tags a:hover { color: var(--pq-primary); }

/* Khung đặt vé trong bài */
.pq-book {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 40px; padding: 30px 34px;
  border-radius: var(--pq-radius); background: linear-gradient(135deg, var(--pq-deep) 0%, #0f4a78 100%); color: #fff; box-shadow: var(--pq-shadow);
}
.pq-book h2 { margin: 0 0 6px; color: #fff; font-size: 1.4rem; font-weight: 800; }
.pq-book p { margin: 0; color: rgba(255, 255, 255, .86); font-size: .96rem; line-height: 1.65; }

/* Bài trước / sau */
.pq-prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.pq-pn { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; border: 1px solid var(--pq-line); border-radius: 14px; color: var(--pq-deep); transition: border-color .2s, box-shadow .2s; }
.pq-pn:hover { border-color: var(--pq-primary); box-shadow: 0 6px 18px rgba(10, 46, 74, .08); }
.pq-pn span { color: var(--pq-muted); font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.pq-pn strong { font-size: 1rem; line-height: 1.4; }
.pq-pn--next { grid-column: 2; text-align: right; }
.pq-pn--prev:only-child { grid-column: 1; }

.pq-related { background: var(--pq-sand); padding-top: 56px; }
.pq-related .pq-post-card { box-shadow: 0 6px 20px rgba(10, 46, 74, .06); }
.pq-comments { padding: 8px 0 72px; background: #fff; }

/* ---------- Tablet / Mobile ---------- */
@media (max-width: 849px) {
  .pq-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .pq-post-card--lead { flex-direction: column; }
  .pq-post-card--lead .pq-post-media { flex: none; min-height: 0; aspect-ratio: 16 / 10; }
  .pq-post-card--lead .pq-post-img, .pq-post-card--lead .pq-post-ph { position: static; }
  .pq-post-card--lead .pq-post-body { padding: 24px; }
  .pq-post-card--lead .pq-post-title { font-size: 1.4rem; }
  .pq-bhero { padding: 52px 0 62px; }
  .pq-bhero--post { padding: 40px 0 96px; }
  .pq-cover { margin-top: -60px; }
  .pq-cta-in, .pq-book { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 549px) {
  .pq-grid { grid-template-columns: 1fr; }
  .pq-bsec { padding: 40px 0 52px; }
  .pq-content { font-size: 1.02rem; line-height: 1.8; }
  .pq-content h2 { font-size: 1.35rem; }
  .pq-book { padding: 24px 22px; }
  .pq-prevnext { grid-template-columns: 1fr; }
  .pq-pn--next { grid-column: 1; text-align: left; }
  .pq-cta-act, .pq-cta-act .pq-btn { width: 100%; text-align: center; box-sizing: border-box; }
}