.blog-hero { background: var(--brand-2); text-align: center; padding-block: var(--sp-120) var(--sp-80); }
.blog-hero .t-caption { color: var(--text-secondary); margin-block-start: var(--sp-20); }

.blog-list { padding-block: var(--sp-80); }

/* Figma (node 4029:42782): bai viet moi nhat lam khoi "featured", anh trai / noi dung
   phai, nut "Xem bai viet" day sat day de bang chieu cao voi anh. */
/* Bản present có gạch ngang 1px --brand-4 rộng đúng 1440 ngăn bài featured với lưới:
   cách đáy ảnh 40, rồi cách lưới 48. */
.blog-featured {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-40);
    padding-block-end: var(--sp-40);
    border-block-end: 1px solid var(--brand-4);
    margin-block-end: 48px;
}
.blog-featured__cover { aspect-ratio: 3 / 2; object-fit: cover; }
.blog-featured__body { display: flex; flex-direction: column; align-items: flex-start; }
.blog-featured__title { margin-block: var(--sp-8); }
.blog-featured__title a:hover { color: var(--brand-1); }
.blog-featured__excerpt { color: var(--text-secondary); }
.blog-featured__date { color: var(--text-secondary); }
/* Do tren anh Figma: nut rong ~204px, cao ~56px — khac .btn--lg mac dinh (140x60,
   padding 20px 41px), nen dat rieng padding cho nut nay, khong dong cham .btn--lg
   dung o noi khac. */
.blog-featured__cta { margin-block-start: auto; padding: 17px 56px; }

.blog-list__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-40); }
/* Do tren anh Figma: moi the co gach chan rieng (mau --brand-4, day 1px), cach
   ngay duoi khoang sp-20 — khong phai gach xam nhat nhu vien mac dinh. */
.post-card { padding-block-end: var(--sp-20); border-block-end: 1px solid var(--brand-4); }
.post-card__cover { aspect-ratio: 4 / 3; object-fit: cover; margin-block-end: var(--sp-16); }
/* Do diem anh tren ban present: nhan chuyen muc la #AA8656 (--brand-alt), khong phai
   do dam (--status-error) nhu ban dung cu, cung khong phai --brand-1 (#B5935E). */
.post-card__category { color: var(--brand-alt); }
.post-card__title { margin-block: var(--sp-8); }
.post-card__excerpt { color: var(--text-secondary); }
.post-card__date { color: var(--text-secondary); display: block; margin-block-start: var(--sp-8); }
.post-card a:hover .post-card__title { color: var(--brand-1); }
.blog-list__empty a { text-decoration: underline; }

/* Figma Frame 4029:42858: mũi tên · "1/2" · mũi tên, canh giữa, không viền ô số. */
.pager { display: flex; gap: var(--sp-20); justify-content: center; align-items: center; margin-block-start: var(--sp-40); }
.pager__arrow { display: flex; align-items: center; }
/* Chỉ có một file icon mũi tên phải; nút lùi lật ngang lại. */
.pager__arrow--prev img { transform: scaleX(-1); }
.pager__count { color: var(--text-primary); }

/* ---- Bài chi tiết ---- */
.post { background: var(--brand-2); padding-block: var(--sp-80); }
.post__breadcrumb { color: var(--text-secondary); margin-block-end: var(--sp-40); }
.post__breadcrumb a { color: inherit; }
.post__title { font-family: var(--font-display); }
.post__category { color: var(--status-error); margin-block-start: var(--sp-8); }
.post__body { columns: 2; column-gap: var(--sp-80); margin-block-start: var(--sp-40); }
.post__body p { margin-block-end: var(--sp-20); text-align: justify; break-inside: avoid; }
.post__quote {
    font-family: var(--font-display); font-style: italic;
    color: color-mix(in srgb, var(--text-secondary) 35%, transparent);
    text-align: end; margin-block: var(--sp-80);
}
.post__figures { display: grid; grid-template-columns: 200px 1fr; gap: var(--sp-40); align-items: start; }
.post__cover { inline-size: 100%; }