/* Trang chủ: nền trắng, màu đỏ chỉ dùng để nhấn các hành động và tiêu đề. */

.course-section { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.section-kicker { display: inline-flex; align-items: center; gap: .65rem; font-size: .76rem; letter-spacing: .14em; }
.section-kicker::before { display: none; }
.section-title {
    color: #202830;
    max-width: 800px;
    font-size: clamp(2rem, 3vw, 2.7rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.04em;
    text-wrap: balance;
}
.section-title span { color: #b71c1c; }
#course-title::after { display: none; }
.course-description { max-width: 800px; font-size: 1rem; line-height: 1.55; color: #596672 !important; }
.course-description-line { overflow-wrap: anywhere; }
.course-description-lead { margin-bottom: .7rem; padding: .8rem 1rem; border-radius: .65rem; background: #f6f7f8; color: #303b44; font-size: 1.03rem; font-weight: 650; }
.course-description-heading { margin: .75rem 0 .35rem; color: #303b44; font-size: 1.03rem; font-weight: 700; }
.course-description-topic { margin-top: .45rem; padding: .58rem .75rem; border-radius: .65rem; background: #f8f9fa; color: #303b44; font-weight: 700; }
.course-description-time { padding: .3rem .75rem .1rem; color: #687581; font-size: .94rem; }
.course-description-resource { margin-top: .45rem; padding: .62rem .75rem; border-radius: .65rem; background: #fff7f7; color: #404b54; }
.course-description-note { padding: .3rem 0; }
.course-description-spacer { height: .35rem; }
.course-description a { color: #a7191f; font-weight: 650; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.course-description a:hover { color: #7f1116; }
.course-summary {
    min-height: 124px;
    padding: 1.35rem 1.5rem;
    border: 0;
    border-radius: 1rem;
    background: #fff6f6;
    box-shadow: none;
    font-size: 1rem;
    line-height: 1.45;
}
.course-summary-number { font-size: 3rem; }

.attendance-section { padding-top: 5rem !important; padding-bottom: 5rem !important; background: #f7f8fa; }
.attendance-section .row { --bs-gutter-y: 1.25rem; }
.session-card {
    min-height: 320px;
    padding: 1.55rem;
    border: 1px solid #e7e9ec;
    border-top: 4px solid #dfe3e7;
    border-radius: 1.15rem;
    box-shadow: 0 10px 28px rgba(27, 34, 41, .045);
}
.session-card-open { border-color: #e7e9ec; border-top-color: #c62828; box-shadow: 0 15px 34px rgba(150, 30, 34, .09); }
.session-card .session-number { width: 3rem; height: 3rem; border-radius: 50%; background: #f2f3f5; color: #68727b; font-size: 1.05rem; }
.session-card-open .session-number { background: #c62828; color: #fff; }
.session-card .exam-number { background: #f2f3f5; color: #68727b; }
.session-card h3 { font-size: 1.35rem; letter-spacing: -.025em; }
.session-card p { font-size: .97rem; line-height: 1.65; }
.session-card .btn { min-height: 50px; border-radius: .7rem; font-size: 1rem; }
.status-badge { font-size: .75rem; }
.status-badge::before { content: ''; width: 6px; height: 6px; margin-right: .45rem; border-radius: 50%; background: currentColor; }
.help-strip { border: 1px solid #eceef0; background: #fff; box-shadow: 0 12px 30px rgba(27, 34, 41, .04); }

@media (max-width: 575px) {
    .home-banner { height: auto; min-height: 0; overflow: visible; }
    .home-banner-image { width: 100%; height: auto; aspect-ratio: 4 / 1; object-fit: contain; }
    .home-banner-has-mobile .home-banner-image { aspect-ratio: 3 / 2; object-fit: cover; }
    .course-section, .attendance-section { padding-top: 2.75rem !important; padding-bottom: 2.75rem !important; }
    .section-title { font-size: clamp(1.75rem, 8vw, 2rem); line-height: 1.12; }
    .section-kicker { font-size: .7rem; letter-spacing: .12em; }
    .course-description { font-size: .98rem; }
    .course-description-lead { padding: .6rem .75rem; }
    .course-description-topic, .course-description-resource { padding: .55rem .65rem; }
    .course-summary { min-height: 94px; padding: 1rem 1.15rem; border-radius: .8rem; }
    .course-summary-number { font-size: 2.5rem; }
    .session-card { min-height: 0; padding: 1.25rem; }
    .help-strip .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .session-card { transition: none; }
}