/* Extracted from Home/KhoaHocIndex.cshtml. */
.course-index-page {
        margin-top: 12px;
        padding-bottom: 34px;
        color: #24324a;
        font-family: Roboto, Arial, sans-serif;
        background: linear-gradient(135deg, #f5f9ff, #fff 55%, #eef5ff);
    }

    .course-index-page #primary { margin: 0; }
    .course-index-page .archive_title { margin: 0 0 14px; padding: 0 6px; }
    .course-index-page .archive_title_h1 {
        margin: 0;
        color: #173b78;
        font-size: clamp(23px, 2.6vw, 32px);
        font-weight: 700;
    }

    .course-index-list {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
    }

    .course-index-col {
        display: flex;
        width: 25%;
        box-sizing: border-box;
        padding: 6px !important;
    }

    .course-index-card {
        display: flex;
        flex: 1;
        flex-direction: column;
        min-height: 100%;
        overflow: hidden;
        border: 1px solid #dce7f5;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 7px 20px rgba(34, 78, 145, .11);
        transition: transform .2s ease, box-shadow .2s ease;
    }

    .course-index-card:hover { transform: translateY(-4px); box-shadow: 0 13px 28px rgba(34, 78, 145, .2); }
    .course-index-card .panel-header { overflow: hidden; background: #edf3fb; }
    .course-index-card .panel-header img {
        display: block;
        width: 100%;
        height: 200px;
        object-fit: cover;
        transition: transform .25s ease;
    }

    .course-index-card:hover .panel-header img { transform: scale(1.035); }
    .course-index-card .panel-body { flex: 1; padding: 8px !important; }
    .course-index-title,
    .course-index-description {
        display: -webkit-box;
        overflow: hidden;
        padding: 8px;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
    }

    .course-index-title {
        height: 44px;
        margin: 0 0 9px;
        color: #2457c5;
        font-size: 17px;
        font-weight: 700;
        line-height: 1.35;
        -webkit-line-clamp: 2;
    }

    .course-index-title a { color: inherit; }
    .course-index-description {
        height: 44px;
        margin: 0;
        color: #68758a;
        font-size: 14px;
        line-height: 1.55;
        -webkit-line-clamp: 2;
    }

    .course-index-footer {
        display: flex;
        align-items: center;
        gap: 6px;
        min-height: 58px;
        padding: 9px 10px !important;
        border-top: 1px solid #e5edf8;
        background: #fbfdff;
    }

    .course-index-price { margin-right: auto; color: #e05252; font-size: 15px; font-weight: 700; white-space: nowrap; }
    .course-index-actions .btn {
        margin: 0;
        padding: 7px 8px;
        border: 1px solid #3978e8;
        border-radius: 8px;
        color: #2457c5;
        background: #fff;
        font-weight: 600;
        box-shadow: 0 3px 8px rgba(36, 87, 197, .12);
    }

    .course-index-actions .btn:hover { color: #fff; background: #2457c5; }
    .course-index-page > .container-fluid > .row:last-child { margin: 14px 0 0; padding: 12px 6px !important; }
    .course-index-page > .container-fluid > .row:last-child .btn { margin: 3px; border-radius: 8px; box-shadow: 0 4px 10px rgba(34, 78, 145, .14); }

    @media (max-width: 991px) { .course-index-col { width: 50%; } }
    @media (max-width: 575px) {
        .course-index-page { padding: 0 8px 24px; }
        .course-index-col { width: 100%; padding: 5px 0 !important; }
        .course-index-card .panel-header img { height: 190px; }
        .course-index-footer { flex-wrap: wrap; }
        .course-index-price { width: 100%; }
    }