/* Template4 — trang chủ: nội dung HTML nhập từ admin (giới thiệu, liên hệ, bản đồ) và vài chỉnh riêng */

/* Văn bản giàu định dạng (giới thiệu) — Tailwind preflight đã xoá style mặc định nên khai lại */
.rich-html {
  color: var(--ink-soft);
  line-height: 1.85;
  overflow-wrap: anywhere;
}
.rich-html * { max-width: 100%; box-sizing: border-box; }
.rich-html p { margin: 0 0 1rem; }
.rich-html img { height: auto; display: inline-block; border-radius: 2px; }
.rich-html a { color: var(--lam-800); text-decoration: underline; }
.rich-html a:hover { color: var(--lam-600); }
.rich-html strong, .rich-html b { color: var(--lam-900); }
.rich-html ul { list-style: disc; padding-left: 1.5rem; margin: 0 0 1rem; }
.rich-html ol { list-style: decimal; padding-left: 1.5rem; margin: 0 0 1rem; }
.rich-html h1, .rich-html h2, .rich-html h3, .rich-html h4 {
  font-family: "Noto Serif", serif;
  font-weight: 700;
  color: var(--lam-900);
  margin: 1.25rem 0 .75rem;
  line-height: 1.4;
}
.rich-html table { display: block; overflow-x: auto; border-collapse: collapse; }
.rich-html td, .rich-html th { border: 1px solid rgba(184, 145, 47, .35); padding: .35rem .6rem; }
.rich-html iframe { width: 100%; }

/* Thu gọn phần giới thiệu quá dài (home.js bật class khi nội dung vượt chiều cao) */
.intro-clamp.is-clamped {
  max-height: 11.5rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 60%, transparent);
  mask-image: linear-gradient(#000 60%, transparent);
}

/* Khối liên hệ (nền xanh lam đậm) */
.contact-html { color: rgba(251, 247, 236, .85); line-height: 1.8; overflow-wrap: anywhere; }
.contact-html * { max-width: 100%; }
.contact-html p { margin: 0 0 .5rem; }
.contact-html a { color: var(--gold-300); text-decoration: underline; }
.contact-html a:hover { color: var(--gold-400); }

/* Bản đồ nhúng: iframe từ cấu hình admin luôn co theo chiều ngang */
.map-embed iframe {
  display: block;
  width: 100% !important;
  height: 20rem !important;
  border: 0;
}
@media (min-width: 768px) {
  .map-embed iframe { height: 26rem !important; }
}

/* Phả đồ rút gọn: nút người trong cây */
.tree .node a:hover { color: var(--lam-600); }

/* Đường nối từ gốc xuống hàng con đầu tiên (style.css chỉ nối từ cấp 2 trở xuống) */
.tree > li > ul::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 2px solid var(--gold-500);
  width: 0;
  height: 28px;
}

/* Cây rút gọn: nút nhỏ gọn hơn để vừa khung */
.tree-mini li { padding-left: 8px; padding-right: 8px; }
.tree-mini li .node { min-width: 112px; padding: 8px 10px; max-width: 170px; }

/* Nội dung nhập từ admin hay kèm style nội dòng (nền trắng, chữ xanh...): đồng bộ về tông template */
.rich-html [style] {
  background: transparent !important;
  color: inherit !important;
  font-family: inherit !important;
}

/* Cây rộng hơn khung: mờ dần hai mép để báo có thể vuốt ngang */
.is-scrollable {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}

/* ---------- Dải số liệu trang chủ ---------- */
.stats-band {
  display: grid;
  gap: 1.1rem 0.5rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* di động: 3 cột cho gọn */
}
.stats-band[data-count="1"] { grid-template-columns: minmax(0, 1fr); max-width: 20rem; }
.stats-band[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats-band[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) {
  .stats-band { gap: 2rem 1rem; padding-top: 3rem; padding-bottom: 3rem; }
  .stats-band[data-count="2"] { max-width: 42rem; }
  .stats-band[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* từ 5 ô: xếp hàng, căn giữa hàng cuối */
  .stats-band[data-count="5"],
  .stats-band[data-count="6"],
  .stats-band[data-count="7"],
  .stats-band[data-count="8"] { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 0; }
  .stats-band[data-count="5"] .stats-cell,
  .stats-band[data-count="6"] .stats-cell { flex: 0 0 33.333%; }
  .stats-band[data-count="7"] .stats-cell,
  .stats-band[data-count="8"] .stats-cell { flex: 0 0 25%; }
}

/* Giới thiệu dòng họ: canh đều hai bên (đoạn dòng họ tự căn bằng style riêng trong nội dung vẫn được giữ vì style inline có ưu tiên cao hơn) */
.intro-clamp,
.intro-clamp p,
.intro-clamp li,
.intro-clamp div {
  text-align: justify;
  text-justify: inter-word;
}

/* Ảnh trong phần giới thiệu bấm để phóng to (Fancybox) */
.intro-clamp a[data-fancybox] { cursor: zoom-in; }