/*
 * DHTD Child — security-hub.css (Task 79, mã tạm, 16/10/2026)
 * CSS riêng cho Page "Bảo mật & An ninh mạng" (/bao-mat-an-ninh-mang/) — chỉ enqueue trên đúng Page này
 * (is_page('bao-mat-an-ninh-mang'), xem inc/enqueue.php). microsoft-365.css được nạp làm dependency để
 * dùng lại breadcrumb, hero, dải giá trị, quy trình navy và khối CTA (đồng bộ với trang Microsoft 365).
 * File này chỉ thêm phần RIÊNG của hub: lưới card .dhtd-sec-*. Dùng token màu (brand-colors.css) và
 * token spacing Task 54; không định nghĩa lại utility của main.css, không sửa main.css/home.css/...
 * Gold chỉ cho CTA/accent. Không shadow nặng.
 */

/* ---------------------------------- Hero (điều chỉnh nhẹ so với Microsoft 365) ---------------------------------- */
.dhtd-sec-hero .dhtd-ms-hero__title { max-width: 13em; }
.dhtd-ms-values--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------------------------------- Section ---------------------------------- */
.dhtd-sec-section { padding: var(--dhtd-section-space) 0; background: var(--dhtd-white); }
.dhtd-sec-section--alt { background: var(--dhtd-light-bg); }
#dhtd-sec-groups { scroll-margin-top: 72px; }
.dhtd-sec-eyebrow--on-navy { color: var(--dhtd-gold); }

/* ---------------------------------- Lưới card ---------------------------------- */
.dhtd-sec-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.dhtd-sec-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  background: var(--dhtd-white);
  border: 1px solid var(--dhtd-border);
  border-radius: 12px;
  transition: border-color .15s ease;
}
.dhtd-sec-card:hover,
.dhtd-sec-card:focus-within { border-color: var(--dhtd-sky); }
.dhtd-sec-card__icon,
.dhtd-sec-card__icon .dhtd-icon-svg {
  display: inline-flex;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  color: var(--dhtd-sky);
}
.dhtd-sec-card__body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; align-self: stretch; }
.dhtd-sec-card__title { font-size: 1.0625rem; line-height: 1.3; color: var(--dhtd-navy); margin: 0 0 8px; }
.dhtd-sec-card__desc { margin: 0 0 14px; font-size: 0.9375rem; line-height: 1.6; color: var(--dhtd-muted); }
.dhtd-sec-card__link { margin-top: auto; }
.dhtd-sec-card__link:focus-visible {
  outline: 3px solid var(--dhtd-sky);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------------------------- Responsive ---------------------------------- */
@media (max-width: 1024px) {
  .dhtd-sec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .dhtd-sec-grid,
  .dhtd-ms-values--3 { grid-template-columns: 1fr; }
  .dhtd-sec-card { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .dhtd-sec-card { transition: none; }
}