/* Extracted from Home/ViewTaiLieu.cshtml. */
.btn {
        background-color: DodgerBlue;
        border: none;
        color: white;
        cursor: pointer;
        font-size: 20px;
        margin: 10px auto;
    }
        /* Darker background on mouse-over */
        .btn:hover {
            background-color: RoyalBlue;
        }

/* Additional extracted block. */
.document-page {
        margin-top: 12px !important;
        padding: 0 18px 34px !important;
        color: #24324a;
        font-family: Roboto, Arial, sans-serif;
        background: linear-gradient(135deg, #f5f9ff, #fff 55%, #eef5ff);
    }

    .document-page > .row:first-child {
        display: flex;
        align-items: stretch;
        width: 100%;
        margin: 16px 0 0 !important;
    }

    .document-page > .row,
    .document-page .document-list {
        box-sizing: border-box;
        padding-right: 0 !important;
        padding-left: 0 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .document-page > .row > [class*="col-"] {
        box-sizing: border-box;
    }

    .document-page > .row:first-child > .col-md-9,
    .document-page > .row:first-child > .col-md-3 {
        padding-right: 6px !important;
        padding-left: 6px !important;
    }

    .document-page iframe,
    .document-page .sidebar_widget,
    .document-page .campaign-details {
        border: 1px solid #dce7f5;
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(34, 78, 145, .12);
    }

    .document-page iframe {
        display: block;
        height: 800px;
        background: #fff;
    }

    .document-page .sidebar_widget {
        height: 800px !important;
        overflow-y: auto !important;
        padding: 10px;
        background: #fff;
    }

    .document-page #menu-sidebar-menu { padding: 0; }
    .document-page #menu-sidebar-menu .menu-item {
        margin-bottom: 8px;
        padding: 0;
        list-style: none;
        border-radius: 9px;
        background: #f3f7fd;
        box-shadow: 0 3px 9px rgba(34, 78, 145, .07);
    }

    .document-page #menu-sidebar-menu .menu-item a {
        display: block;
        padding: 10px 12px;
        color: #2457c5;
        font-size: 14px;
        line-height: 1.45;
    }

    .document-page #menu-sidebar-menu .menu-item a:hover {
        color: #e05252;
        background: #eaf2ff;
        border-radius: 9px;
    }

    .document-page .campaign-details {
        margin-bottom: 0;
        background: #fff;
    }

    .document-page .document-info-group {
        margin-top: 12px;
        padding: 0 6px;
    }

    .document-page .document-info-group .campaign-details:first-child {
        border-radius: 12px 12px 0 0;
        box-shadow: 0 8px 24px rgba(34, 78, 145, .12);
    }

    .document-page .document-info-group .campaign-details:nth-child(2) {
        border-top: 1px solid #e0eaf7;
        border-radius: 0 0 12px 12px;
        box-shadow: 0 8px 24px rgba(34, 78, 145, .12);
    }

    .document-page .campaign-details h4 {
        margin: 0;
        color: #173b78;
        font-family: Roboto, Arial, sans-serif;
        font-size: clamp(20px, 2.2vw, 28px);
        font-weight: 700;
        letter-spacing: -.2px;
        line-height: 1.4;
    }

    .document-page .campaign-details p {
        font-family: Roboto, Arial, sans-serif;
        font-size: 15px;
        font-weight: 400;
        color: #68758a;
        letter-spacing: .05px;
        line-height: 1.7;
    }

    .document-page .document-list {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin: 30px 0 0 !important;
        padding: 0 0 6px;
    }

    .document-page .document-col {
        display: flex;
        box-sizing: border-box;
        padding: 6px !important;
    }

    .document-page .document-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-page .document-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 13px 28px rgba(34, 78, 145, .2);
    }

    .document-page .document-card .panel-header a {
        display: block;
        overflow: hidden;
        background: #edf3fb;
    }

    .document-page .document-card .panel-header img {
        display: block;
        width: 100%;
        height: 200px;
        object-fit: cover;
        transition: transform .25s ease;
    }

    .document-page .document-card:hover .panel-header img { transform: scale(1.035); }

    .document-page .document-card .panel-body {
        flex: 1;
        padding: 8px !important;
    }

    .document-page .document-title,
    .document-page .document-description {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
    }

    .document-page .document-title {
        height: 44px;
        margin: 0 0 9px;
        padding: 8px;
        font-family: Roboto, Arial, sans-serif;
        color: #2457c5;
        font-size: 17px;
        font-weight: 700;
        letter-spacing: -.1px;
        line-height: 1.35;
        -webkit-line-clamp: 2;
    }

    .document-page .document-description {
        height: 44px;
        margin: 0;
        padding: 8px;
        font-family: Roboto, Arial, sans-serif;
        color: #68758a;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: .05px;
        line-height: 1.55;
        -webkit-line-clamp: 2;
    }

    .document-page .document-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-page .document-price {
        color: #e05252;
        font-size: 16px;
        font-weight: 700;
    }

    .document-page .document-footer a,
    .document-page .document-page-link {
        color: #2457c5;
        font-weight: 600;
    }

    @media (max-width: 991px) {
        .document-page > .row:first-child { display: block; }
        .document-page iframe { height: 600px; margin-bottom: 16px; }
        .document-page .sidebar_widget { height: 360px !important; }
        .document-page .document-col { width: 50%; }
    }

    @media (max-width: 575px) {
        .document-page { padding: 0 8px 24px !important; }
        .document-page iframe { height: 430px; }
        .document-page .document-col { width: 100%; padding: 5px 0 !important; }
        .document-page .document-card .panel-header img { height: 190px; }
        .document-page .document-list { margin-top: 20px; }
        .document-page .document-footer { min-height: 50px; }
    }