/* ==========================================================================
   Tin tức (home.php / category.php / single.php) + khung bài viết dùng chung
   (.hc-article, .hc-related — dùng lại cho chi tiết dự án, trang thường).
   Port từ tin-tuc.dc.html / chi-tiet-tin-tuc.dc.html.
   ========================================================================== */

/* ---------- Danh sách tin ---------- */
.hc-news { padding: var(--space-12) 0 var(--space-20); }
.hc-news__in { display: flex; flex-direction: column; gap: var(--space-9); }
.hc-news .hc-pager { padding-top: 0; }

/* Tab lọc chuyên mục (newsCats: chữ + gạch chân primary khi chọn) */
.hc-news__tabs { display: flex; gap: var(--space-6); flex-wrap: wrap; border-bottom: 1px solid var(--border-subtle); }
.hc-news__tab { display: inline-flex; align-items: center; padding: var(--space-3) 0; margin-bottom: -1px; border-bottom: 2px solid transparent; font-family: var(--font-ui); font-size: 15px; font-weight: var(--weight-semibold); color: var(--text-muted); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); }
.hc-news__tab:hover { color: var(--primary); text-decoration: none; }
.hc-news__tab.is-current { color: var(--primary); border-bottom-color: var(--primary); }

/* Bài nổi bật */
.hc-nfeat { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; color: var(--text-primary); background: var(--white); text-decoration: none; }
.hc-nfeat:hover { color: var(--text-primary); text-decoration: none; }
.hc-nfeat__media { position: relative; min-height: 320px; background: var(--surface-subtle); }
.hc-nfeat__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hc-nfeat__body { display: flex; flex-direction: column; justify-content: center; gap: var(--space-4); padding: var(--space-9) var(--space-8); }
.hc-nfeat__title { font-family: var(--font-display); font-size: var(--size-h2); font-weight: var(--weight-bold); line-height: var(--leading-tight); text-wrap: balance; }
.hc-nfeat__ex { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-muted); text-wrap: pretty; }
.hc-nfeat__more { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-ui); font-size: 14px; font-weight: var(--weight-semibold); color: var(--primary); }
@media (max-width: 899px) {
	.hc-nfeat { grid-template-columns: minmax(0, 1fr); }
}

/* Thẻ tin (lưới) */
.hc-news__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--space-8) var(--space-5); }
.hc-ncard { display: flex; flex-direction: column; gap: var(--space-4); color: var(--text-primary); text-decoration: none; }
.hc-ncard:hover { color: var(--primary); text-decoration: none; }
.hc-ncard__media { aspect-ratio: 16 / 10; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-subtle); }
.hc-ncard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hc-ncard__meta { display: flex; align-items: center; gap: var(--space-3); font-size: var(--size-body); color: var(--text-muted); }
.hc-ncard__cat { font-family: var(--font-ui); font-size: var(--size-caption); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--primary); }
.hc-ncard__title { font-family: var(--font-display); font-size: var(--size-title); font-weight: var(--weight-bold); line-height: var(--leading-snug); text-wrap: pretty; }
.hc-ncard__ex { margin: 0; font-size: var(--size-body); line-height: 1.55; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* biến thể viền (bài viết liên quan) */
.hc-ncard--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-ncard--boxed:hover { border-color: var(--primary); }
.hc-ncard--boxed .hc-ncard__media { border-radius: 0; }
.hc-ncard__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5) var(--space-6) var(--space-6); }
.hc-ncard__media img.hc-zoom, .hc-nfeat__media img { transition: transform var(--dur-slow) var(--ease-standard); }

/* ---------- Bài viết 1 cột ---------- */
.hc-article-sec { padding: var(--space-12) 0 var(--space-20); }
.hc-article { max-width: 860px; margin: 0 auto; padding: 0 var(--gutter); display: flex; flex-direction: column; gap: var(--space-6); }
.hc-article__head { display: flex; flex-direction: column; gap: var(--space-5); }
.hc-article__head--case { gap: var(--space-4); }
.hc-article__cat { align-self: flex-start; font-family: var(--font-ui); font-size: var(--size-caption); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--primary); margin-bottom: calc(-1 * var(--space-2)); }
.hc-article__cat:hover { text-decoration: none; color: var(--primary-hover); }
.hc-article__title { margin: 0; font-family: var(--font-display); font-size: clamp(28px, 4vw, 44px); font-weight: var(--weight-bold); line-height: var(--leading-tight); text-wrap: balance; text-align: left; }
.hc-article__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); flex-wrap: wrap; padding: var(--space-4) 0; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.hc-article__meta { display: flex; gap: var(--space-6); flex-wrap: wrap; font-size: 14px; color: var(--text-muted); }
.hc-article__meta > span { display: inline-flex; align-items: center; gap: var(--space-2); }
.hc-article__meta strong { color: var(--text-primary); }
.hc-article__share { display: flex; align-items: center; gap: var(--space-2); }
.hc-article__share-l { font-size: 14px; color: var(--text-muted); margin-right: var(--space-1); }
.hc-article__share .is-copied { background: var(--primary); color: var(--on-primary); }
.hc-article__back { display: inline-flex; align-items: center; gap: var(--space-2); align-self: flex-start; font-family: var(--font-ui); font-size: 14px; font-weight: var(--weight-semibold); color: var(--primary); }
.hc-article__back:hover { color: var(--primary-hover); text-decoration: none; }
.hc-article__hero { width: 100%; height: auto; display: block; border-radius: var(--radius-md); background: var(--surface-subtle); }
.hc-article__lead { margin: 0; font-size: var(--size-lead); line-height: 1.45; color: var(--text-primary); text-wrap: pretty; }
.hc-article__pending { margin: 0; padding: var(--space-5) var(--space-6); border-radius: var(--radius-md); background: var(--surface-subtle); font-size: 15px; line-height: 1.6; color: var(--text-muted); }
.hc-article__pending a { color: var(--primary); font-weight: var(--weight-semibold); }

/* Nội dung Gutenberg — khoảng cách đều 24px như bản HTML (flex để margin không gộp) */
.hc-article__prose { display: flex; flex-direction: column; gap: var(--space-6); }
.hc-article__prose > * { margin: 0; }
.hc-article__prose p { font-size: 17px; line-height: 1.75; color: var(--text-primary); text-wrap: pretty; }
.hc-article__prose h2, .hc-article__prose h3, .hc-article__prose h4 { margin: var(--space-4) 0 0; font-family: var(--font-display); font-size: var(--size-h3); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
.hc-article__prose ul, .hc-article__prose ol { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-6); }
.hc-article__prose li { margin: 0; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-3); font-size: 17px; line-height: 1.7; text-wrap: pretty; }
.hc-article__prose li::before { content: ""; width: 16px; height: 16px; margin-top: 8px; background-color: var(--primary); -webkit-mask: url("../../icons/check.svg") center / contain no-repeat; mask: url("../../icons/check.svg") center / contain no-repeat; }
.hc-article__prose li > * { grid-column: 2; }
.hc-article__prose blockquote { margin: var(--space-2) 0; padding: var(--space-6) var(--space-8); border: 0; border-radius: var(--radius-md); background: var(--surface-subtle); font-family: var(--font-display); font-size: var(--size-h3); font-weight: var(--weight-bold); line-height: 1.35; color: var(--primary); text-wrap: balance; }
.hc-article__prose blockquote p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; font-weight: inherit; }
.hc-article__prose blockquote cite { display: block; margin-top: var(--space-2); font-size: 14px; font-style: normal; color: var(--text-muted); }
.hc-article__prose figure { margin: 0; }
.hc-article__prose img { width: 100%; height: auto; display: block; border-radius: var(--radius-md); background: var(--surface-subtle); }
.hc-article__prose figcaption, .hc-article__prose .hc-cap, .hc-article__prose p.hc-cap { margin: calc(-1 * var(--space-3)) 0 0; font-size: 14px; line-height: 1.5; color: var(--text-muted); text-align: center; }
.hc-article__prose figure figcaption { margin-top: var(--space-2); }
.hc-article__prose .wp-block-embed, .hc-article__prose .hc-video { aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden; background: var(--black); }
.hc-article__prose .wp-block-embed__wrapper { height: 100%; }
.hc-article__prose .wp-block-embed iframe, .hc-article__prose iframe { width: 100%; height: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 0; display: block; }
.hc-article__prose a { color: var(--primary); }
/* Chi tiết dự án: chú thích căn trái (span cỡ body) */
.hc-article--case .hc-article__prose .hc-cap, .hc-article--case .hc-article__prose p.hc-cap { font-size: var(--size-body); text-align: left; }

/* ---------- Bài viết / dự án liên quan ---------- */
.hc-related { padding: var(--space-20) 0; background: var(--surface-subtle); }
.hc-related__in { display: flex; flex-direction: column; gap: var(--space-8); }
.hc-related__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-5); flex-wrap: wrap; }
.hc-related__title { margin: 0; font-family: var(--font-display); font-size: var(--size-h1); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
.hc-related__all { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-ui); font-size: 15px; font-weight: var(--weight-semibold); color: var(--primary); }
.hc-related__all:hover { color: var(--primary-hover); text-decoration: none; }
.hc-related__all .hc-icon { transition: transform var(--dur-fast) var(--ease-standard); }
.hc-related__all:hover .hc-icon { transform: translateX(3px); }
.hc-related__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--space-5); }

/* ---------- Tìm kiếm & 404 ---------- */
.hc-search-res { padding: var(--space-12) 0 var(--space-20); }
.hc-search-res__in { display: flex; flex-direction: column; gap: var(--space-8); }
.hc-search-res__form { max-width: 720px; }
.hc-search-res__count { margin: 0; font-size: 14px; color: var(--text-muted); }
.hc-search-res__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--space-8) var(--space-5); }
.hc-search-res__item { display: flex; flex-direction: column; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; background: var(--white); color: var(--text-primary); text-decoration: none; }
.hc-search-res__item:hover { color: var(--text-primary); text-decoration: none; }
.hc-search-res__media { aspect-ratio: 4 / 3; background: var(--surface-subtle); }
.hc-search-res__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hc-search-res__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5) var(--space-6) var(--space-6); }
.hc-search-res__title { font-family: var(--font-display); font-size: var(--size-title); font-weight: var(--weight-bold); line-height: var(--leading-snug); }
.hc-search-res__ex { margin: 0; font-size: var(--size-body); line-height: 1.55; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hc-search-res__more { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-ui); font-size: 14px; font-weight: var(--weight-semibold); color: var(--primary); }
.hc-search-res .hc-pager { padding-top: 0; }

.hc-404 { padding: var(--space-20) 0; }
.hc-404__in { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); text-align: center; }
.hc-404__code { font-family: var(--font-display); font-size: clamp(72px, 12vw, 140px); font-weight: var(--weight-bold); line-height: 1; letter-spacing: var(--tracking-display); color: var(--primary); }
.hc-404__p { margin: 0; max-width: 560px; font-size: var(--size-ui); line-height: 1.65; color: var(--text-muted); }
.hc-404__search { width: min(560px, 100%); }
.hc-404__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }