/* Trang phân hệ (vi/modules) — load sau main.css */

/* Chi tiết phân hệ — hero */
.page-hero h1 { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mod-hero-icon { width: 52px; height: 52px; border-radius: 14px; flex: 0 0 auto; }
.mod-hero-icon .icon { width: 28px; height: 28px; }
.mod-roles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 20px; }

/* Danh sách phân hệ (/phan-he.html — class mod-group) */
.section:has(.mod-group) .section-head { margin-bottom: 48px; }
.mod-group + .mod-group {
  margin-top: 48px;
  padding-top: 48px;
  border-top: 1px solid var(--line);
}
.mod-group__title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px 14px;
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 20px;
}
.mod-group__title .help {
  font-size: 14px;
  font-weight: 500;
  color: var(--slate);
}
.mod-group .grid { --gap: 24px; }
.mod-group .card.card--link { height: 100%; }

.module-detail .card .check-list { margin-top: 4px; }

@media (max-width: 960px) {
  .mod-group + .mod-group { margin-top: 36px; padding-top: 36px; }
  .mod-group .grid { --gap: 16px; }
}