/* ================================================
   PAGE HEADER (single source of truth)
   Fix icon/title vertical alignment for Open Iconic
   ================================================ */

.page-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-4, 1rem);
  margin-bottom: var(--spacing-8, 2rem);
  padding-bottom: var(--spacing-6, 1.5rem);
  border-bottom: 2px solid var(--border-color, #e5e7eb);
}

.page-header__icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary-500, #014aad), var(--primary-400, #049ee0));
  box-shadow: var(--shadow-primary, 0 4px 14px rgba(1, 74, 173, 0.25));
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

/* Open Iconic baseline (avoid font-metric drift) */
.page-header__icon .oi {
  line-height: 1;
  font-size: 1.25rem;
  color: #fff;
  display: inline-block;
  /* Open Iconic thường bị "nhô" lên nhẹ do font metrics */
  transform: translateY(1px);
}

.page-header__title {
  margin: 0;
  font-size: var(--font-size-3xl, 1.875rem);
  font-weight: var(--font-weight-bold, 700);
  color: var(--text-primary, #123763);
  line-height: 1.15;
}

.page-header__meta {
  margin-left: auto;
  color: var(--text-tertiary, #9aa5b5);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-header__meta {
    margin-left: 0;
  }
}