/* Blog (/blog): dùng chung guide.css cho chữ, breadcrumb, khung bài; file này chỉ thêm phần riêng của Blog */

.blog-breadcrumb { max-width: 760px; margin-left: auto; margin-right: auto; }
.blog-article { max-width: 760px; margin: 0 auto; }

/* Ảnh bìa của bài */
.blog-cover { margin: 28px 0 8px; }
/* Ảnh chụp màn hình điện thoại rất cao: cắt khung 16:9 từ phía trên, để bài bắt đầu ngay dưới ảnh */
.blog-cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top center;
  background: var(--guide-soft);
  border: 1px solid var(--guide-line);
  border-radius: 18px;
}

.blog-cta { margin-top: 48px; }

/* Danh sách bài: thẻ có ảnh, một cột trên điện thoại, hai cột từ 640px */
.blog-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 28px; }
@media (min-width: 640px) { .blog-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.blog-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--guide-line);
  border-radius: 18px;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.blog-card:hover { border-color: rgba(204, 44, 44, 0.35); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); }
.blog-card-cover { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--guide-soft); }
.blog-card-cover img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.blog-card-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
.blog-card-meta { font-size: 13px; color: #8e8e93; }
.blog-card-title { font-size: 19px; line-height: 1.3; font-weight: 600; color: var(--color-heading); }
.blog-card-desc { font-size: 15px; line-height: 1.55; color: var(--color-body); }

/* Bài viết khác, cuối mỗi bài */
.blog-more { margin-top: 56px; }
.blog-more-title { font-size: 22px; line-height: 1.3; font-weight: 700; color: var(--color-heading); }