/* ============================================================
   MODULE: Tin tức — chỉ dùng biến từ tokens.css
   Bố cục rộng hơn (news-shell) để trang danh sách/chi tiết đọc
   thoải mái trên màn hình lớn, đồng thời chống tràn ngang tuyệt
   đối trên di động (mọi vùng có thể chứa nội dung dài/không dấu
   cách đều có overflow-wrap + word-break; mọi lưới dùng minmax(min(...))
   để không bao giờ rộng hơn màn hình).
   ============================================================ */

/* --- Container riêng cho module Tin tức: rộng hơn .container mặc định
   (1200px) vì đây là trang duyệt nội dung dạng lưới/bài viết dài, cần
   nhiều không gian hơn trang marketing thông thường. --- */
main.news-shell.container { max-width: 1320px; }

/* --- Đầu trang danh sách: eyebrow + tiêu đề + ô tìm kiếm --- */
.news-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-caption); font-weight: 700; letter-spacing: 0.04em;
  color: var(--color-primary); background: var(--color-primary-soft);
  padding: 4px var(--space-2); border-radius: var(--radius-full);
  margin-bottom: var(--space-2);
}
.news-page-title {
  font-family: var(--font-family-display);
  font-size: clamp(1.6rem, 4vw, 2.375rem);
  line-height: 1.15;
  margin: 0 0 var(--space-1);
  overflow-wrap: break-word;
}
.news-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4);
}
.news-head__desc { color: var(--color-text-muted); margin: 0; max-width: 56ch; }
.news-search {
  min-width: 240px; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-full);
  background: var(--color-surface); color: var(--color-text); font-size: var(--text-body-sm);
}
.news-search:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }

/* --- Thanh chuyên mục: cuộn ngang gọn gàng trên di động thay vì
   xuống nhiều dòng --- */
.news-filters-wrap { margin-bottom: var(--space-4); }
.news-filters { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* --- Khối nổi bật (bài viết chính + 3 bài phụ) --- */
.news-featured {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  align-items: stretch;
}
.news-featured__main {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column;
}
.news-featured__img { aspect-ratio: 16 / 9; }
.news-featured__body { padding: var(--space-4); }
.news-featured__body h2 {
  font-size: clamp(1.2rem, 2.4vw, 1.625rem);
  line-height: 1.3;
  overflow-wrap: break-word;
  word-break: break-word;
}
.news-featured__body p { overflow-wrap: break-word; word-break: break-word; }
.news-featured__side { display: flex; flex-direction: column; gap: var(--space-2); }
.news-featured__side .card { overflow-wrap: break-word; word-break: break-word; }

/* --- Tiêu đề khối lưới bài viết --- */
.news-grid-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3);
}
.news-section-title {
  font-family: var(--font-family-display);
  font-size: var(--text-h3);
  margin: 0;
}

/* --- Lưới bài viết: minmax(min(...),1fr) đảm bảo KHÔNG BAO GIỜ rộng
   hơn màn hình, kể cả điện thoại rất nhỏ (320px) --- */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--space-4);
}
/* --- Chế độ Danh sách: 1 cột, thẻ nằm ngang (ảnh trái, nội dung phải) --- */
.news-grid--list { grid-template-columns: 1fr; }
.news-grid--list .news-card { display: flex; flex-direction: row; }
.news-grid--list .news-card__img { width: 160px; aspect-ratio: auto; flex-shrink: 0; }
.news-grid--list .news-card__body { flex: 1; min-width: 0; }
@media (max-width: 640px) {
  .news-grid--list .news-card { flex-direction: column; }
  .news-grid--list .news-card__img { width: 100%; aspect-ratio: 16 / 10; }
}

.view-toggle { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; }
.view-btn {
  background: var(--color-surface); border: none; padding: 6px 12px;
  font-size: var(--font-size-sm); cursor: pointer; color: var(--color-text-muted);
}
.view-btn.is-active { background: var(--color-primary); color: var(--color-text-on-primary); }

.news-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: box-shadow var(--duration-base) var(--ease-standard);
}
.news-card:hover { box-shadow: var(--shadow-3); }
.news-card__img { aspect-ratio: 16 / 10; }
.news-card__body { padding: var(--space-3); display: flex; flex-direction: column; flex: 1; min-width: 0; }
.news-card__cat {
  display: inline-block;
  font-size: var(--text-caption);
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  padding: 2px var(--space-2);
  border-radius: 999px;
  margin-bottom: var(--space-2);
  align-self: flex-start;
}
.news-card__title {
  font-size: var(--font-size-base);
  font-weight: 600;
  margin: 0 0 var(--space-1);
  color: var(--color-text);
  overflow-wrap: break-word;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card__excerpt {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card__meta {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: auto;
  padding-top: var(--space-2);
  overflow-wrap: break-word;
}

.news-related {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.news-related h3 { overflow-wrap: break-word; }

/* --- Icon thay ảnh (chưa có CMS upload ảnh thật) --- */
.news-featured__img, .news-card__img, .article-cover {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
}
.news-featured__img { font-size: 2.4rem; }
.news-card__img { font-size: 2rem; }
.article-cover { aspect-ratio: 21 / 9; font-size: 3rem; background: linear-gradient(135deg, var(--color-secondary), var(--color-primary)); }

/* --- Breadcrumb nhẹ riêng cho trang công khai --- */
.app-breadcrumb { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-body-sm); color: var(--color-text-muted); flex-wrap: wrap; }
.app-breadcrumb a { color: var(--color-text-muted); flex-shrink: 0; }
/* .app-breadcrumb__current chứa tiêu đề bài viết (có thể rất dài) — bắt
   buộc phải bọc chữ + min-width:0 để không đẩy tràn ngang trên di động. */
.app-breadcrumb .app-breadcrumb__current { color: var(--color-text); font-weight: 600; overflow-wrap: break-word; word-break: break-word; min-width: 0; }

/* --- Layout trang chi tiết --- */
.article-shell { display: grid; grid-template-columns: 1fr 300px; gap: var(--space-5); align-items: start; }
@media (max-width: 860px) { .article-shell { grid-template-columns: 1fr; } }
.article-shell > article { min-width: 0; }
.article-sidebar-card { margin-bottom: var(--space-3); }
.article-sidebar-card a { overflow-wrap: break-word; word-break: break-word; }
#artTitle { overflow-wrap: break-word; word-break: break-word; }

/* --- Mục lục tự sinh từ H2 --- */
.article-toc {
  background: var(--color-surface-alt); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-3); margin-bottom: var(--space-4);
  display: flex; flex-direction: column; gap: 4px;
}
.article-toc .toc__title { font-weight: 700; font-size: var(--text-body-sm); margin-bottom: 2px; font-family: var(--font-family-display); }
.article-toc a { color: var(--color-text-muted); font-size: var(--text-body-sm); overflow-wrap: break-word; word-break: break-word; }

/* --- Nội dung bài viết: giới hạn độ rộng dòng đọc lý tưởng (~75 ký tự)
   dù trang tổng thể rộng hơn — vừa "full trang" (dùng hết không gian
   cho lề/sidebar/TOC thoáng hơn) vừa dễ đọc (không kéo chữ tràn hết
   màn hình rộng). --- */
.article-body { line-height: 1.8; color: var(--color-text); max-width: 760px; overflow-wrap: break-word; word-break: break-word; }
.article-body h2 { font-size: var(--text-h3); margin: var(--space-4) 0 var(--space-2); }
.article-body h3 { font-size: var(--text-h4); margin: var(--space-3) 0 var(--space-1); }
.article-body p { margin: 0 0 var(--space-3); }
.article-body ul { margin: 0 0 var(--space-3); padding-left: 1.2em; }
.article-body li { margin-bottom: var(--space-1); }
/* --- Chặn nội dung dán vào (HTML tự do từ Admin) làm vỡ layout trên di
   động: ảnh/video/khung nhúng quá khổ, bảng quá rộng, chuỗi ký tự dài
   không xuống dòng. dùng !important vì nội dung dán vào có thể có inline
   style width cố định cần ép lại. --- */
.article-body img,
.article-body video,
.article-body iframe {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin: var(--space-3) 0;
  border-radius: var(--radius-md);
}
.article-body table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  margin: var(--space-3) 0;
  -webkit-overflow-scrolling: touch;
}
.article-body pre {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--color-surface-alt);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
}
.article-body * {
  max-width: 100% !important;
}
.article-body a {
  overflow-wrap: break-word;
}
.article-quote {
  border-left: 3px solid var(--color-primary); background: var(--color-primary-soft);
  margin: var(--space-3) 0; padding: var(--space-3); border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic; color: var(--color-text);
  overflow-wrap: break-word; word-break: break-word;
}
.article-tags { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-3) 0; }
.article-tag { font-size: var(--text-caption); color: var(--color-secondary); background: var(--color-secondary-soft); padding: 2px var(--space-2); border-radius: var(--radius-full); }

/* ============================================================
   RESPONSIVE — điện thoại
   ============================================================ */
@media (max-width: 640px) {
  .news-head { flex-direction: column; align-items: stretch; }
  .news-search { width: 100%; min-width: 0; }

  .news-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    margin: 0 calc(var(--space-4) * -1);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .news-filters::-webkit-scrollbar { display: none; }
  .news-filters .filter-pill { flex-shrink: 0; }
}

@media (max-width: 900px) {
  .news-featured { grid-template-columns: 1fr; gap: var(--space-3); margin-bottom: var(--space-5); }
  .news-featured__side { flex-direction: column; }
}