/* ===== HEMS — CSS dùng chung cho các trang phía người dùng =====
   Gom phần lặp ở index/article/page/thanh-tich về một nơi: sửa một chỗ là cả site
   đổi theo, không còn cảnh mỗi trang một kiểu chữ.
   Nạp trước các <style> riêng của từng trang, nên trang nào cần khác vẫn ghi đè được. */

/* --- Nền tảng --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: Inter, sans-serif; color: #0F172A; background: #fff; }
::selection { background: #33CCFF33; color: #015A9E; }

/* --- Chip nhãn --- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; padding: 5px 11px;
  border-radius: 9999px; letter-spacing: .05em;
  background: rgba(0,119,204,.08); color: #0077CC;
  border: 1px solid rgba(0,119,204,.22);
}

/* --- Chữ chuyển sắc --- */
.grad-text {
  background: linear-gradient(120deg, #0077CC, #33CCFF 50%, #33CCFF);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ===== Nội dung bài viết / trang tĩnh =====
   Dùng chung cho .article-body (trang tin) và .pg-body (trang nội dung) — trước đây
   hai nơi chép gần y hệt nhau, lệch nhau vài pixel. */
.article-body, .pg-body { color: #334155; font-size: 16.5px; line-height: 1.8; }
.article-body p, .article-body li,
.pg-body p, .pg-body li { text-align: justify; }
.article-body p, .pg-body p { margin: 0 0 16px; }
.article-body img, .pg-body img {
  max-width: 100%; height: auto; border-radius: 14px;
  margin: 18px auto; display: block;
  box-shadow: 0 12px 34px -16px rgba(0,119,204,.32);
}
.article-body h2, .article-body h3, .article-body h4,
.pg-body h2, .pg-body h3, .pg-body h4 {
  font-family: 'Fraunces', serif; color: #0077CC; margin: 26px 0 12px; line-height: 1.3;
}
.article-body h2, .pg-body h2 { font-size: 25px; }
.article-body h3, .pg-body h3 { font-size: 21px; }
.article-body h4, .pg-body h4 { font-size: 18px; }
.article-body ul, .article-body ol,
.pg-body ul, .pg-body ol { margin: 0 0 16px; padding-left: 24px; }
.article-body ul, .pg-body ul { list-style: disc; }
.article-body ol, .pg-body ol { list-style: decimal; }
.article-body li, .pg-body li { margin: 6px 0; }
.article-body a, .pg-body a { color: #0077CC; font-weight: 600; text-decoration: underline; }
.article-body strong, .article-body b,
.pg-body strong, .pg-body b { color: #0F172A; }
.article-body figure, .pg-body figure { margin: 18px 0; }
.article-body figcaption, .pg-body figcaption {
  font-size: 13.5px; color: #64748B; text-align: center; margin-top: 6px; font-style: italic;
}
.article-body blockquote, .pg-body blockquote {
  border-left: 3px solid #33CCFF; padding: 4px 0 4px 16px;
  color: #475569; margin: 18px 0; font-style: italic;
}
.article-body table, .pg-body table {
  width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px;
}
.article-body td, .article-body th,
.pg-body td, .pg-body th { border: 1px solid #E2E8F0; padding: 9px 11px; text-align: left; }
.article-body hr, .pg-body hr { border: 0; border-top: 1px solid #E2E8F0; margin: 24px 0; }

/* --- Tôn trọng thiết lập giảm chuyển động của người dùng --- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}