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

    .document-index-container { padding: 0 !important; }
    .document-index-page .section-title { margin-bottom: 16px; }
    .document-index-page .section-title h2 {
        color: #173b78;
        font-weight: 700;
        letter-spacing: -.2px;
    }

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

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

    .document-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;
    }

    .document-index-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 13px 28px rgba(34, 78, 145, .2);
    }

    .document-index-card .panel-header a { display: block; overflow: hidden; background: #edf3fb; }
    .document-index-card .panel-header img {
        display: block;
        width: 100%;
        height: 200px;
        object-fit: cover;
        transition: transform .25s ease;
    }

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

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

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

    .document-index-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 52px;
        padding: 10px 14px !important;
        border-top: 1px solid #e5edf8;
        background: #fbfdff;
    }

    .document-index-price { color: #e05252; font-size: 16px; font-weight: 700; }
    .document-index-footer a { color: #2457c5; font-weight: 600; }
    .document-index-page .btn { border-radius: 8px; box-shadow: 0 4px 10px rgba(34, 78, 145, .14); }

    @media (max-width: 991px) {
        .document-index-col { width: 50%; }
    }

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