/* The pages about beehoc itself: gioi-thieu.html, chinh-sach-rieng-tu.html
   and lien-he.html. Plain reading pages: a title, then sections of text. */
.wrap { max-width: var(--page-width); margin: 0 auto; padding: 0 var(--page-gutter) 80px; }
.info-head { padding-top: var(--space-5); margin-bottom: var(--space-5); }
.info-eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin: 0; }
.info-head h1 { font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1.15; margin: var(--space-2) 0;
  text-wrap: balance; }
.info-sub { color: var(--ink-soft); margin: 0; max-width: 40em; line-height: 1.6; }
.info-body { max-width: 44em; line-height: 1.7; }
.info-body section { margin-top: var(--space-6); }
.info-body h2 { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.3; margin: 0 0 var(--space-2); }
.info-body p, .info-body li { color: var(--ink); }
.info-body p { margin: 0 0 var(--space-3); }
.info-body ul { margin: 0 0 var(--space-3); padding-left: 1.25em; }
.info-body li + li { margin-top: var(--space-1); }
.info-body a { color: var(--accent); }
.info-body a:hover { color: var(--accent-hover); }
.info-note { color: var(--ink-faint); font-size: var(--text-sm); margin-top: var(--space-6); }
.info-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: var(--space-4); margin: 0 0 var(--space-3); }
.info-card h2 { margin-bottom: var(--space-1); }
.info-card p:last-child { margin-bottom: 0; }

@media (pointer: coarse), (max-width: 720px) {
  .info-links a { display: inline-flex; align-items: center; min-height: 44px; }
}