/* Trang /Training.

   Đầu trang mượn lại các lớp của hero trang chủ (.hero-eyebrow, .hero-lead, .stat-bar, .stat) để
   hai trang cùng một nhịp chữ; file này chỉ khai phần riêng: khung hai cột, hình minh họa và lưới
   thẻ khóa học. Hàng tab dùng lớp .filter-tabs chung trong downloads.css. */

.training-hero {
    position: relative;
    padding: 56px 0 40px;
    background:
        radial-gradient(900px 420px at 12% 0%, rgb(var(--accent-rgb) / .14), transparent 65%),
        radial-gradient(700px 380px at 88% 8%, rgba(35, 120, 190, .12), transparent 60%),
        var(--bg-base);
    overflow: hidden;
}

.training-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 3rem;
    align-items: center;
}

/* Breadcrumb nằm DƯỚI dòng nhỏ chứ không trên cùng: dòng nhỏ là nhãn của cả trang, còn breadcrumb
   là đường đi tới nó. Cỡ chữ giữ đúng với _PageHead để các trang nội dung nhìn cùng một bộ. */
.training-hero .breadcrumb {
    font-size: .8rem;
    margin-bottom: .35rem;
}

.training-hero h1 {
    font-size: 2.6rem;
    margin-bottom: 1rem;
}

.training-hero-art {
    /* Hình chỉ có nét nên đi theo màu chủ đề: nét chính mờ, riêng phần mũ tốt nghiệp lấy màu nhấn. */
    color: var(--border-strong);
    display: flex;
    justify-content: flex-end;
}

.training-hero-art svg {
    width: 100%;
    max-width: 360px;
    height: auto;
}

.training-hero-art .art-accent { color: var(--accent); }
.training-hero-art .art-dim { opacity: .5; }

/* Dải chỉ số nằm trong cột chữ nên chỉ rộng bằng cột đó, không phải cả trang.

   Trang chủ khai cứng 5 cột cho .stat-bar; ở đây số ô ít hơn mà chỗ cũng hẹp hơn nên để nó tự chia:
   đủ chỗ thì 4 ô một hàng, hẹp lại thì tự xuống hàng chứ không bóp mỗi ô đến mức mất chữ nhãn. */
.training-stat-bar {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    margin-top: 2rem;
}

.course-card {
    display: flex;
    flex-direction: column;
}

.course-card h3 {
    margin: 0 0 .35rem;
    font-size: 1rem;
}

/* Đẩy hàng thông tin và nút xuống đáy thẻ: mô tả dài ngắn khác nhau nhưng các nút vẫn thẳng hàng
   giữa những thẻ đứng cạnh nhau. */
.course-desc {
    font-size: .85rem;
    flex: 1 1 auto;
    margin: 0 0 .8rem;
}

.course-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .9rem;
    margin-bottom: .9rem;
    font-size: .78rem;
    color: var(--text-muted);
}

.course-meta span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.course-meta svg { color: var(--accent); flex: 0 0 auto; }

/* Nút chiếm trọn bề ngang thẻ: các thẻ rộng bằng nhau nên nút cũng bằng nhau, không so le. */
.course-cta {
    justify-content: center;
    width: 100%;
}

.course-all {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.course-empty {
    padding: 1.5rem;
    text-align: center;
}

@media (max-width: 980px) {
    .training-hero-grid { grid-template-columns: 1fr; }
    /* Về một cột thì hình không còn cột riêng — thu nhỏ và căn giữa thay vì kéo hết bề ngang. */
    .training-hero-art { justify-content: center; }
    .training-hero-art svg { max-width: 280px; }
}

@media (max-width: 760px) {
    .training-hero h1 { font-size: 2rem; }
    .training-stat-bar { grid-template-columns: repeat(2, 1fr); }
}