/* HZ Group v2 — trang bài viết (Figma 204-39789 / 204-41406) + thẻ bài viết dùng chung với trang Tin tức */

/* ---------- thẻ bài viết ---------- */
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.news-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.news-card:hover { box-shadow: 0 14px 36px rgba(18, 50, 74, .08); transform: translateY(-2px); }
.news-card[hidden] { display: none; }
.news-card__photo { display: block; overflow: hidden; aspect-ratio: 407 / 255; background: #dfe9f1; }
.news-grid--related .news-card__photo { aspect-ratio: 2 / 1; }
.news-card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.news-card:hover .news-card__photo img { transform: scale(1.04); }
.news-card__body { display: flex; flex: 1; flex-direction: column; padding: 24px; }
.news-card__meta { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 16px; font: 400 12px/19.2px var(--font); color: var(--slate); }
.news-card__meta span { font-weight: 600; color: var(--blue); }
.news-card__title { font: 500 24px/33.6px var(--font-head); letter-spacing: -.02em; color: var(--navy); }
.news-card__title a { transition: color .2s; }
.news-card__title a:hover { color: var(--blue); }
.news-card__excerpt { margin: 14px 0 24px; font: 400 16px/26.4px var(--font); color: var(--slate); }
.news-card__link { gap: 16px; margin-top: auto; padding: 8px 4px 9px 0; align-self: flex-start; }
@media (max-width: 1179px) {
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .news-card__body { padding: 22px; }
  .news-card__meta { padding-bottom: 14px; }
  .news-grid--related .news-card__meta { padding-bottom: 16px; }
}
@media (max-width: 639px) {
  .news-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .news-card__meta { padding-bottom: 16px; }
}

/* ---------- đầu bài ---------- */
.art-breadcrumb { padding-top: 34px; color: var(--slate); }
.art-head { padding: 34px 0 38px; }
.art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font: 400 12px/19.2px var(--font); color: var(--slate); }
.art-meta__cat { font-weight: 600; color: var(--blue); }
.art-meta__cat:hover { text-decoration: underline; }
.art-meta__badge { padding: 4px 9px; border-radius: 4px; background: #eaf2f7; }
.art-title { max-width: 1000px; margin: 18px 0 24px; text-wrap: balance; font: 500 48px/53.76px var(--font-head); letter-spacing: -.035em; color: var(--navy); }
.art-cover img { width: 100%; height: auto; aspect-ratio: 1280 / 470; object-fit: cover; border-radius: var(--radius-lg); background: #dfe9f1; }
.art-cover figcaption, .art-figure figcaption { font: 400 12px/19.2px var(--font); color: var(--slate); }
.art-cover figcaption { padding-top: 10px; }

/* ---------- nội dung + mục lục ---------- */
.art-layout { display: grid; grid-template-columns: minmax(0, 800px) 300px; justify-content: space-between; column-gap: 40px; align-items: start; padding: 52px 0 64px; }
.art-lead { font: 500 20px/33px var(--font); color: var(--navy); }
.art-body h2 { margin-top: 38px; text-wrap: balance; font: 500 36px/43.2px var(--font-head); letter-spacing: -.02em; color: var(--navy); scroll-margin-top: calc(var(--header-h) + 24px); }
.art-body h2 + p { margin-top: 16px; }
.art-body p:not(.art-lead) { font: 400 16px/26.4px var(--font); color: var(--slate); }
.art-body p + p { margin-top: 26px; }
.art-figure { margin-top: 34px; }
.art-figure img { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; border-radius: var(--radius-lg); background: #dfe9f1; }
.art-figure + h2 { margin-top: 40px; }
.art-quote { margin: 36px 0; padding: 18px 24px; background: #f3f7fa; border-left: 3px solid var(--green); font: 400 16px/26.4px var(--font); color: var(--slate); }

.art-aside { position: sticky; top: calc(var(--header-h) + 24px); }
.art-toc { padding: 26px; border-radius: var(--radius-lg); background: #eaf2f7; }
.art-toc h2 { font: 500 20px/24px var(--font-head); letter-spacing: -.03em; color: var(--navy); }
.art-toc nav { display: flex; flex-direction: column; padding-top: 18px; }
.art-toc a { padding: 14px 0; border-bottom: 1px solid #c9dce9; font: 400 15px/22.5px var(--font); color: var(--blue); transition: color .2s, padding-left .2s; }
.art-toc a:last-child { border-bottom: 0; }
.art-toc a:hover { color: var(--blue-hover); text-decoration: underline; }
.art-toc a.is-current { color: var(--navy); }

/* ---------- bài viết liên quan ---------- */
.art-related { padding: 64px 0; background: #eaf2f7; }
.art-related__head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.art-related__head h2 { font: 500 36px/43.2px var(--font-head); letter-spacing: -.025em; color: var(--navy); }
.art-related__head .link-all { gap: 16px; padding: 8px 4px 9px 0; }

/* section liên hệ trên trang bài viết: Figma pad-top 72 / 72 / 55 */
.page--article .contact-cta { padding-top: 72px; }

@media (max-width: 1179px) {
  .art-title { font-size: 36px; line-height: 40.32px; }
  .art-cover img { aspect-ratio: 754 / 284; }
  .art-layout { grid-template-columns: minmax(0, 1fr) 250px; column-gap: 40px; }
}
@media (max-width: 639px) {
  .art-breadcrumb { padding-top: 24px; font-size: 12px; line-height: 19.8px; }
  .art-head { padding-top: 26px; }
  .art-cover img { aspect-ratio: 350 / 260; }
  .art-layout { grid-template-columns: minmax(0, 1fr); row-gap: 34px; padding: 30px 0 48px; }
  .art-body h2 { font-size: 24px; line-height: 28.8px; letter-spacing: -.02em; }
  .art-aside { position: static; }
  .art-related { padding: 48px 0; }
  .art-related__head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .art-related__head h2 { font-size: 24px; line-height: 28.8px; }
  .page--article .contact-cta { padding-top: 55px; }
}