/* CSS riêng của app: chỉ bố cục. Màu, font, bóng lấy từ lớp .saly-* và biến var(--brand-*). */

/* Các khoá học: một cột trên điện thoại, cột trái laptop hẹp nên giữ một cột */
.gt-khoa { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) and (max-width: 1023.98px) { .gt-khoa { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gt-khoa__dau { display: flex; align-items: center; gap: var(--space-3); }
.gt-khoa__dau h3 { margin: 0; }
.gt-khoa__the p { margin: 0; }
.gt-khoa__the .saly-kv { margin: 0; }

/* Lợi ích: thẻ ngang, ô icon trái, chữ phải */
.gt-loi-ich { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.gt-loi-ich__muc { display: flex; align-items: flex-start; gap: var(--space-4); }
.gt-loi-ich__muc h3 { margin: 0 0 var(--space-1); }
.gt-loi-ich__muc p { margin: 0; }

/* Hỏi đáp: mỗi câu là một thẻ mở/đóng, dòng câu hỏi đủ cao để bấm */
.gt-hoi-dap__muc summary { display: flex; align-items: center; min-height: var(--tap); cursor: pointer; }
.gt-hoi-dap__muc p { margin: var(--space-2) 0 0; }

/* Cột đăng ký */
.gt-dang-ky { scroll-margin-top: var(--space-4); }
.gt-dang-ky:focus { outline: none; }
.gt-dang-ky__dau p { margin: 0 0 var(--space-2); }
.gt-o-cho { height: var(--tap); }
.gt-cam-on { justify-items: start; }
.gt-cam-on:focus { outline: none; }
.gt-cam-on h2, .gt-cam-on p { margin: 0; }
.gt-buoc-tiep { display: grid; gap: var(--space-2); margin: 0; padding-left: var(--space-5); }
.gt-cam-ket { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-sm); }

@media (min-width: 1024px) {
  .saly-main--split > .gt-dang-ky { top: var(--space-4); }
}