/* ==========================================================================
   LIST CONTENT — CSS riêng
   ========================================================================== */
.list-page { padding: 25px 0 64px; }
.list-container { max-width: 1224px; }

/* Bài nổi bật + lưới 2x2 ----------------------------------------------------- */
.list-top { display: grid; grid-template-columns: 588px 1fr; gap: 24px; margin-bottom: 32px; }
.post-lg__img { aspect-ratio: 588 / 330; border-radius: 12px; }
.post-lg__title { margin-top: 12px; font: 600 22px/1.5 var(--ff-body); color: var(--c-text); }
.post-lg__desc { margin-top: 8px; font: 400 15px/1.53 var(--ff-body); color: var(--c-muted); }
.list-top__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 35px 24px; align-content: start; }
.post-sm .post-thumb { aspect-ratio: 282 / 158; }
.post-sm__title { margin-top: 14px; font: 600 17px/1.5 var(--ff-body); color: var(--c-text); transition: color var(--t); }
.post-sm a:hover .post-sm__title, .post-lg__title a:hover { color: var(--c-primary); }

/* Danh sách + sidebar --------------------------------------------------------- */
.list-main { display: grid; grid-template-columns: 896px 280px; gap: 24px; align-items: start; }
.post-row {
  display: grid; grid-template-columns: 300px 1fr; gap: 24px;
  padding: 22px 0 20px; border-bottom: 1px solid var(--c-border);
}
.post-row:first-child { padding-top: 0; }
.post-row__img { aspect-ratio: 300 / 168; }
.post-row__title { font: 600 20px/1.4 var(--ff-body); color: var(--c-text); }
.post-row__title a:hover { color: var(--c-primary); }
.post-row__desc { margin-top: 8px; font: 400 16px/1.5 var(--ff-body); color: var(--c-muted); }
.post-row:hover .post-row__title a { color: var(--c-primary); }
.list-feed .pager { margin-right: 24px; }

/* RESPONSIVE --------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .list-top { grid-template-columns: 1fr 1fr; }
  .list-main { grid-template-columns: 1fr 280px; }
  .post-row { grid-template-columns: 240px 1fr; }
}
@media (max-width: 991.98px) {
  .list-page { padding: 28px 0 36px; }
  .list-container { padding-left: 9px; padding-right: 9px; }
  .list-top { grid-template-columns: 1fr; gap: 20px; margin-bottom: 30px; }
  .post-lg__img { border-radius: 8px; aspect-ratio: 396 / 223; }
  .post-lg__title { font-size: 15px; margin-top: 18px; }
  .post-lg__desc { font-size: 10px; }
  .list-top__grid { gap: 14px 16px; }
  .post-sm__title { font-size: 11px; margin-top: 10px; }
  .list-main { grid-template-columns: 1fr; gap: 34px; }
  .post-row { grid-template-columns: 1fr; gap: 12px; }
  .post-row__title { font-size: 17px; }
  .post-row__desc { font-size: 14px; }
  .list-feed .pager { margin-right: 0; }

  /* sidebar mobile phóng to như thiết kế */
  .list-main .side-box { padding: 26px 18px; border-radius: 12px; }
  .list-main .side-title { font-size: 26px; font-weight: 500; }
  .list-main .faq-list a { font-size: 20px; line-height: 1.4; padding: 16px 0; }
  .list-main .faq-list a::before { width: 34px; height: 34px; }
  .list-main .mini-news__img { width: 153px; }
  .list-main .mini-news__title { font-size: 20px; font-weight: 500; line-height: 1.4; }
}
@media (max-width: 575.98px) {
  .post-lg__title { font-size: 17px; }
  .post-lg__desc { font-size: 13px; }
  .post-sm__title { font-size: 13px; }
  .list-main .faq-list a, .list-main .mini-news__title { font-size: 17px; }
}