/* ==========================================================================
   Dự án (archive-du_an.php / single-du_an.php / card-project) ← du-an.dc.html, chi-tiet-du-an.dc.html
   Khung bài viết + "Dự án liên quan" dùng .hc-article / .hc-related trong news.css.
   ========================================================================== */

.hc-prj { padding: var(--space-12) 0 var(--space-20); }
.hc-prj__in { display: flex; flex-direction: column; gap: var(--space-9); }
.hc-prj__lead { margin: 0; max-width: 760px; font-size: var(--size-lead); line-height: 1.45; color: var(--text-primary); text-wrap: pretty; }
.hc-prj__more { display: flex; justify-content: center; }

/* prjCols: ≥980 → 3 cột, ≥640 → 2 cột, nhỏ hơn → 1 cột */
.hc-prj__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8) var(--space-5); }
@media (max-width: 979px) { .hc-prj__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .hc-prj__grid { grid-template-columns: minmax(0, 1fr); } }

/* Thẻ dự án: ảnh 4:3 + tên */
.hc-pjcard { display: flex; flex-direction: column; gap: var(--space-4); color: var(--text-primary); text-decoration: none; scroll-margin-top: 120px; }
.hc-pjcard:hover { color: var(--primary); text-decoration: none; }
.hc-pjcard__media { aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-subtle); }
.hc-pjcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-standard); }
.hc-pjcard__body { display: flex; flex-direction: column; gap: var(--space-2); }
.hc-pjcard__title { font-family: var(--font-display); font-size: var(--size-title); font-weight: var(--weight-bold); line-height: var(--leading-snug); text-wrap: pretty; }
/* biến thể viền (dự án liên quan) */
.hc-pjcard--boxed { gap: 0; border-radius: var(--radius-md); overflow: hidden; background: var(--white); border: 1px solid var(--border-subtle); transition: border-color var(--dur-fast) var(--ease-standard); }
.hc-pjcard--boxed:hover { border-color: var(--primary); }
.hc-pjcard--boxed .hc-pjcard__media { border-radius: 0; }
.hc-pjcard--boxed .hc-pjcard__body { padding: var(--space-5) var(--space-6) var(--space-6); }