/* =========================================================
   CREDENT - Trang Tin tức (PC)
   Dùng chung: .page-banner, .mix-title (gioi-thieu.css), .ld-post (chi-tiet-luat-su.css),
   .pager (linh-vuc.css)
   ========================================================= */
.news-page { padding: 94px 0 123px; }
.news-page__inner { width: 1201px; margin: 0 auto; display: flex; flex-direction: column; }

/* Danh mục */
.news-cats { display: grid; grid-template-columns: 282px 281px 282px 282px; gap: 24px; margin-top: 76px; }
.news-cat { position: relative; display: block; height: 200px; }
.news-cat__bg { position: absolute; inset: 0; overflow: hidden; border-radius: 0 0 8px 8px; background: #ececec; }
.news-cat__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.news-cat__img--wide { left: -3.13%; width: 106.25%; }
.news-cat:hover .news-cat__img { transform: scale(1.06); }
.news-cat__box {
  position: absolute;
  left: calc(50% - 102px);
  top: 90px;
  width: 204px;
  height: 109px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border-radius: 10px 10px 0 0;
  background: var(--navy-12);
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}
.news-cat--2 .news-cat__box { left: 38px; }
.news-cat--3 .news-cat__box,
.news-cat--4 .news-cat__box { top: 91px; }
.news-cat--3 .news-cat__box { left: 40px; }
.news-cat:hover .news-cat__box { background: var(--gold); }
.news-cat__icon { position: relative; flex: none; display: block; width: 25px; height: 25px; overflow: hidden; }
.news-cat__icon img { position: absolute; display: block; width: auto; height: auto; max-width: none; }
.news-cat__name { width: 160px; font-size: 16px; font-weight: 500; line-height: 21px; text-align: center; color: #fffffe; }

/* Danh sách bài viết */
.news-grid { display: grid; grid-template-columns: repeat(3, 384px); gap: 68px 24px; margin-top: 102px; }
.news-grid .ld-post { width: auto; min-height: 0; }
.news-grid .ld-post:nth-child(n+4) { display: flex; }
.news-page .pager { margin-top: 48px; }

/* =========================================================
   RESPONSIVE - Trang Tin tức
   ========================================================= */
@media (max-width: 1239px) {
  .news-page__inner { width: calc(100% - 64px); }
  .news-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .news-cat__box,
  .news-cat--2 .news-cat__box,
  .news-cat--3 .news-cat__box { left: 50%; width: min(204px, calc(100% - 30px)); transform: translateX(-50%); }
  .news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 24px; }
  .news-grid .ld-post__img { height: auto; aspect-ratio: 384 / 190; }
}

@media (max-width: 1023px) {
  .news-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .news-cat--3 { order: 4; }
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- MOBILE (Figma 402px) ---------- */
@media (max-width: 767px) {
  .news-page { padding: 58px 0 120px; }
  .news-page__inner { width: calc(100% - 32px); }
  .news-page .mix-title { text-align: center; }
  .news-cats { gap: 16px; margin-top: 40px; }
  .news-cat { height: 121px; }
  .news-cat__img { top: -82.09%; height: 260.06%; }
  .news-cat--4 .news-cat__img { top: 0; height: 100%; }
  .news-cat__box,
  .news-cat--2 .news-cat__box,
  .news-cat--3 .news-cat__box,
  .news-cat--4 .news-cat__box { top: 36px; width: calc(100% - 30px); max-width: 147px; height: 85px; padding-top: 15px !important; }
  .news-cat--1 .news-cat__box { padding-top: 17px !important; gap: 6px; }
  .news-cat__name { width: auto; font-size: 13px; line-height: 17px; }
  .news-grid { grid-template-columns: 1fr; gap: 24px; margin-top: 58px; }
  .news-grid .ld-post__img { aspect-ratio: auto; height: 190px; }
  .news-page .pager { margin-top: 32px; }
}