/* Template4 — giao diện nội dung bài viết, thẻ tin, album (bổ sung cho style.css, không sửa style.css) */

/* ---------- Nội dung bài viết (HTML tự do từ trình soạn thảo) ---------- */
.article-content {
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--ink);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.article-content > *:first-child { margin-top: 0; }
.article-content > *:last-child { margin-bottom: 0; }
.article-content p { margin: 0 0 1.15em; }
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
  font-family: "Noto Serif", serif;
  font-weight: 700;
  color: var(--lam-900);
  line-height: 1.35;
  margin: 1.6em 0 0.7em;
}
.article-content h1 { font-size: 1.75rem; }
.article-content h2 { font-size: 1.5rem; padding-bottom: 0.4em; border-bottom: 1px solid rgba(184, 145, 47, 0.35); }
.article-content h3 { font-size: 1.25rem; }
.article-content h4 { font-size: 1.1rem; }
.article-content h5,
.article-content h6 { font-size: 1rem; }
.article-content a { color: var(--lam-700); text-decoration: underline; text-underline-offset: 3px; }
.article-content a:hover { color: var(--lam-900); }
.article-content strong,
.article-content b { font-weight: 700; color: var(--ink); }
.article-content img,
.article-content video {
  max-width: 100%;
  height: auto;
  border-radius: 2px;
}
.article-content img { display: inline-block; vertical-align: middle; }
.article-content figure { margin: 1.5em 0; text-align: center; }
.article-content figcaption { font-size: 0.875rem; color: var(--ink-soft); margin-top: 0.5em; font-style: italic; }
.article-content iframe,
.article-content embed,
.article-content object { max-width: 100%; border: 0; }
.article-content iframe[src*="youtube"],
.article-content iframe[src*="youtu.be"],
.article-content iframe[src*="vimeo"],
.article-content iframe[src*="facebook.com/plugins"] {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}
.article-content blockquote {
  margin: 1.5em 0;
  padding: 1em 1.25em;
  background: rgba(205, 166, 63, 0.1);
  border-left: 4px solid var(--gold-600);
  color: var(--ink-soft);
  font-style: italic;
}
.article-content blockquote > *:last-child { margin-bottom: 0; }
.article-content ul,
.article-content ol { margin: 0 0 1.15em; padding-left: 1.6em; }
.article-content ul { list-style: disc; }
.article-content ol { list-style: decimal; }
.article-content li { margin: 0.3em 0; }
.article-content li::marker { color: var(--gold-700); }
.article-content hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-600), transparent); margin: 2em 0; }
.article-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 0.95rem;
}
.article-content th,
.article-content td { border: 1px solid rgba(184, 145, 47, 0.45); padding: 0.55em 0.8em; vertical-align: top; }
.article-content th { background: rgba(205, 166, 63, 0.18); color: var(--lam-900); font-weight: 600; }
.article-content pre {
  max-width: 100%;
  overflow-x: auto;
  background: var(--lam-950);
  color: var(--ivory-soft);
  padding: 1em;
  border-radius: 4px;
  font-size: 0.875rem;
  margin: 1.5em 0;
}
.article-content code { font-size: 0.9em; background: rgba(205, 166, 63, 0.18); padding: 0.1em 0.35em; border-radius: 3px; }
.article-content pre code { background: transparent; padding: 0; }
@media (max-width: 640px) {
  .article-content { font-size: 1rem; line-height: 1.75; }
  .article-content h2 { font-size: 1.3rem; }
  .article-content h3 { font-size: 1.15rem; }
}

/* ---------- Nền hoa văn khi thiếu ảnh bìa ---------- */
.cover-fallback {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-400);
  background-color: var(--lam-900);
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(-135deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    radial-gradient(ellipse at center, rgba(205, 166, 63, 0.22), transparent 65%);
  background-size: 22px 22px, 22px 22px, 100% 100%;
}
.cover-fallback > i { font-size: 2rem; opacity: 0.75; }
.cover-fallback.is-large > i { font-size: 3.5rem; }

/* ---------- Chuỗi dòng cắt chữ (không phụ thuộc phiên bản Tailwind CDN) ---------- */
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Album: huy hiệu video / số mục ---------- */
.media-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 31, 48, 0.35);
  pointer-events: none;
}
.media-play > span {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 9999px;
  border: 2px solid var(--gold-400);
  background: rgba(10, 31, 48, 0.75);
  color: var(--gold-300);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 3px;
  transition: transform 0.3s ease, background 0.3s ease;
}
a:hover > .media-play > span { transform: scale(1.1); background: var(--lam-800); }

/* ---------- Bổ sung: cắt 4 dòng (đoạn trích bài nổi bật) ---------- */
.clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Thông báo nhỏ dưới ô tìm kiếm tin tức ---------- */
.search-notice { margin-top: 0.5rem; font-size: 0.8125rem; color: var(--lam-700); }

/* Ảnh trong bài bấm để phóng to (Fancybox) */
.article-content a.article-zoom,
.article-content a[data-fancybox] {
  cursor: zoom-in;
}
.article-content a.article-zoom {
  display: inline-block;
  max-width: 100%;
}