/* Bộ khối landing SaaS, blog.css
   Chỉ blog.html (khối blog-list) và post.html (post-header, post-article, post-tags, post-related) nạp tệp này.
   Thẻ bài viết (.blog-card, .blog-grid) dùng ở cả trang chủ nên nằm ở theme.css. Màu lấy từ token của theme.css. */

/* ---- blog-list ---- */
.blog-list { padding:48px 0 calc(var(--tt-section-gap) / 2); }
.blog-list-wrap { max-width:var(--wrap, 1440px); margin:0 auto; padding:0 40px; display:flex; flex-direction:column; gap:32px; }
.blog-list-head { display:flex; flex-direction:column; gap:12px; max-width:680px; }
.blog-list-label, .blog-featured-flag { font-size:12px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--action-text, #1D4ED8); }
.blog-list-title { margin:0; font-size:28px; font-weight:700; letter-spacing:-0.015em; line-height:1.18; }
.blog-list-lead { margin:0; font-size:16px; line-height:1.62; color:var(--text-2, #565E6D); }
.blog-filter { display:flex; flex-wrap:wrap; gap:8px; }
.blog-filter-chip { min-height:44px; display:inline-flex; align-items:center; padding:0 16px; border:1px solid var(--border-strong, #E3E7ED); border-radius:999px; background:var(--surface, #FFFFFF); color:var(--text, #172948); font-size:15px; font-weight:600; white-space:nowrap; }
.blog-filter-chip:hover { border-color:var(--text-2, #565E6D); }
.blog-filter-chip[aria-current] { background:var(--action-fill, #1D4ED8); border-color:var(--action-fill, #1D4ED8); color:var(--action-on, #FFFFFF); }
.blog-featured { display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); background:var(--surface, #FFFFFF); border:1px solid var(--border, #E3E7ED); border-radius:var(--tt-radius-card, 18px); overflow:hidden; color:var(--text, #172948); }
.blog-featured:hover .blog-featured-title { text-decoration:underline; }
.blog-featured-image { aspect-ratio:16 / 10; border:0; border-right:1px solid var(--border, #E3E7ED); border-radius:0; background:var(--surface-2, #F4F6F8); }
.blog-featured-body { padding:32px; display:flex; flex-direction:column; justify-content:center; gap:12px; }
.blog-featured-title { margin:0; font-size:26px; font-weight:700; letter-spacing:-0.015em; line-height:1.25; }
.blog-featured-text { margin:0; font-size:16px; line-height:1.65; color:var(--text-2, #565E6D); }
.blog-pager { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; }
.blog-pager-link { min-width:44px; height:44px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--border-strong, #E3E7ED); border-radius:var(--tt-radius-btn, 11px); background:var(--surface, #FFFFFF); color:var(--text, #172948); font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; }
.blog-pager-link[aria-current] { background:var(--action-fill, #1D4ED8); border-color:var(--action-fill, #1D4ED8); color:var(--action-on, #FFFFFF); }
.blog-pager-link[aria-disabled="true"] { pointer-events:none; color:var(--text-2, #565E6D); background:var(--surface-2, #F4F6F8); }
.blog-pager-icon { flex-shrink:0; }
.blog-empty { background:var(--surface, #FFFFFF); border:1px solid var(--border, #E3E7ED); border-radius:var(--tt-radius-card, 18px); padding:48px 32px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; }
.blog-empty-icon { width:52px; height:52px; border-radius:22px; background:var(--surface-2, #F4F6F8); color:var(--text-2, #565E6D); display:flex; align-items:center; justify-content:center; }
.blog-empty-title { font-size:22px; font-weight:700; line-height:1.3; }
.blog-empty-text { margin:0; font-size:15px; line-height:1.6; color:var(--text-2, #565E6D); max-width:420px; }
.blog-empty-button { margin-top:8px; height:48px; padding:0 20px; border-radius:var(--tt-radius-btn, 11px); background:var(--action-fill, #1D4ED8); color:var(--action-on, #FFFFFF); font-size:15px; font-weight:600; display:inline-flex; align-items:center; gap:10px; }
.blog-empty-button-icon { flex-shrink:0; }

/* ---- post ---- */
.post-header { padding:40px 0 24px; }
.post-header-wrap { max-width:var(--wrap, 1440px); margin:0 auto; padding:0 40px; display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.post-header-back { min-height:44px; display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:600; color:var(--text-2, #565E6D); }
.post-header-back:hover { color:var(--text, #172948); }
.post-header-back-icon { flex-shrink:0; }
.post-header-group { min-height:44px; display:inline-flex; align-items:center; font-size:12px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--action-text, #1D4ED8); margin:-8px 0; }
.post-header-title { margin:0; font-size:28px; font-weight:700; letter-spacing:-0.02em; line-height:1.25; }
.post-header-lead { margin:0; font-size:18px; line-height:1.6; color:var(--text-2, #565E6D); }
.post-header-meta { align-self:stretch; display:flex; flex-wrap:wrap; gap:8px 24px; padding:12px 0; border-top:1px solid var(--border, #E3E7ED); border-bottom:1px solid var(--border, #E3E7ED); font-size:14px; line-height:1.5; color:var(--text-2, #565E6D); }
.post-header-meta-item { display:inline-flex; align-items:center; gap:8px; font-variant-numeric:tabular-nums; }
.post-header-meta-icon { flex-shrink:0; }
.post-header-cover { align-self:stretch; aspect-ratio:16 / 9; margin-top:8px; }
.post-article { padding:16px 0 32px; }
.post-article-body { max-width:var(--wrap, 1440px); margin:0 auto; padding:0 40px; font-size:17px; line-height:1.75; }
.post-article-body > :first-child { margin-top:0; }
.post-article-body p { margin:0 0 20px; }
.post-article-body h2 { margin:40px 0 12px; font-size:22px; font-weight:700; letter-spacing:-0.01em; line-height:1.3; }
.post-article-body h3 { margin:32px 0 8px; font-size:18px; font-weight:700; line-height:1.4; }
.post-article-body ul, .post-article-body ol { margin:0 0 20px; padding-left:24px; }
.post-article-body li { margin:0 0 8px; }
.post-article-body a { text-decoration:underline; }
.post-article-body blockquote { margin:32px 0; padding:20px 24px; background:var(--surface, #FFFFFF); border:1px solid var(--border, #E3E7ED); border-radius:var(--radius-inner, 14px); font-size:18px; font-weight:600; line-height:1.55; }
.post-article-figure { margin:32px 0; }
.post-article-figure figcaption { margin-top:8px; font-size:14px; line-height:1.5; color:var(--text-2, #565E6D); }
.post-tags { padding:0 0 32px; }
.post-tags-wrap { max-width:var(--wrap, 1440px); margin:0 auto; padding:24px 40px 0; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.post-tags-wrap::before { content:''; flex:0 0 100%; height:1px; margin-bottom:16px; background:var(--border, #E3E7ED); }
.post-tags-label { display:inline-flex; align-items:center; gap:8px; margin-right:8px; font-size:14px; font-weight:600; color:var(--text-2, #565E6D); }
.post-tags-icon { flex-shrink:0; }
.post-tag { min-height:44px; display:inline-flex; align-items:center; padding:0 16px; border:1px solid var(--border-strong, #E3E7ED); border-radius:999px; background:var(--surface, #FFFFFF); color:var(--text, #172948); font-size:14px; font-weight:600; }
.post-tag:hover { border-color:var(--text-2, #565E6D); }
.post-related { padding:calc(var(--tt-section-gap) / 2) 0; }

@media (max-width: 1023px) {
  .blog-list-wrap { padding:0 32px; }
  .blog-list-title { font-size:26px; }
  .blog-list-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .blog-featured { grid-template-columns:minmax(0, 1fr); }
  .blog-featured-image { border-right:0; border-bottom:1px solid var(--border, #E3E7ED); }
  .blog-featured-body { padding:24px; }
  .blog-featured-title { font-size:22px; }
  .post-header-wrap, .post-article-body { padding-left:32px; padding-right:32px; }
  .post-tags-wrap { padding:24px 32px 0; }
  .post-header-title { font-size:26px; }
}
@media (max-width: 700px) {
  .post-related-grid { grid-template-columns:minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .blog-list { padding-top:32px; }
  .blog-list-wrap { padding:0 16px; gap:24px; }
  .blog-list-label, .blog-featured-flag { font-size:13px; }
  .blog-list-title { font-size:22px; }
  .blog-filter { flex-wrap:nowrap; overflow-x:auto; margin:0 -16px; padding:0 16px; scrollbar-width:none; }
  .blog-filter::-webkit-scrollbar { display:none; }
  .blog-list-grid { grid-template-columns:minmax(0, 1fr); }
  .blog-featured-body { padding:20px; }
  .blog-featured-title { font-size:22px; }
  .blog-empty { padding:32px 20px; }
  .post-header { padding-top:24px; }
  .post-header-wrap, .post-article-body { padding-left:16px; padding-right:16px; }
  .post-tags-wrap { padding:24px 16px 0; }
  .post-header-group { font-size:13px; }
  .post-header-title { font-size:22px; }
  .post-header-lead { font-size:16px; }
  .post-article-body { font-size:16px; }
  .post-article-body h2 { font-size:22px; }
  .post-article-body blockquote { padding:16px 20px; font-size:17px; }
}