/* CSS riêng của app: chỉ bố cục. Màu, font lấy từ lớp .saly-* và biến var(--brand-*), var(--font-*). */
.saly-main > section {
  margin-bottom: var(--space-4);
}

.gioi-thieu {
  display: grid;
  gap: var(--space-2);
  text-align: center;
  justify-items: center;
}

.gioi-thieu > * {
  margin: 0;
}

.saly-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  text-decoration: none;
}

.nut-dang-ky {
  width: 100%;
  margin-top: var(--space-2);
}

.khoi-khoa-hoc h2 {
  margin: 0 0 var(--space-3);
}

.the-khoa-hoc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.the-khoa-hoc > * {
  margin: 0;
}

.the-khoa-hoc .saly-btn {
  width: 100%;
  margin-top: auto;
}

.danh-sach-noi-dung,
.danh-sach-loi-ich {
  margin: 0;
  padding-left: var(--space-4);
  display: grid;
  gap: var(--space-1);
}

.khoi-dang-ky {
  scroll-margin-top: var(--space-4);
}

.khoi-dang-ky h2 {
  margin-top: 0;
}

@media (min-width: 768px) {
  .nut-dang-ky {
    width: auto;
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }

  .khoi-dang-ky {
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
  }
}