/* Extracted from Home/Index.cshtml. */
/* Trang chủ: bố cục card responsive, ưu tiên trải nghiệm trên điện thoại */
    .home-section {
        padding: 0 12px 18px;
    }

    .home-section > div,
    .home-section #primary {
        width: 100%;
        overflow: hidden;
    }

    .archive_title {
        margin: 18px 0 14px;
    }

    .archive_title_h1 {
        margin: 0;
        color: #173b78;
        font-size: 26px;
        font-weight: 700;
        line-height: 1.25;
    }

    .archive_title_h1 span {
        display: inline-block;
        padding: 8px 16px;
        border-left: 4px solid #3578ed;
        border-radius: 0 12px 12px 0;
        background: linear-gradient(90deg, #eef5ff, rgba(238, 245, 255, 0));
    }

    .home-section .col-lg-3 {
        min-height: 1px;
        padding: 6px !important;
    }

    .home-section > div > #primary + div {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }

    .home-section > div > #primary + div > .col-lg-3 {
        display: flex;
        align-items: stretch;
    }

    .home-section .panel {
        display: flex;
        flex-direction: column;
        height: auto !important;
        min-height: 0 !important;
        margin-bottom: 14px;
        overflow: hidden;
        border: 0;
        border-radius: 14px;
        box-shadow: 0 4px 16px rgba(31, 70, 125, .12);
        transition: transform .2s ease, box-shadow .2s ease;
    }

    .home-section > div > #primary + div > .col-lg-3 > .panel {
        width: 100%;
        height: 100% !important;
    }

    .home-section .panel:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 22px rgba(31, 70, 125, .18);
    }

    .home-section .panel-header {
        overflow: hidden;
        background: #f3f7fc;
    }

    .home-section .panel-header img {
        display: block;
        width: 100% !important;
        height: 190px !important;
        object-fit: cover;
    }

    .home-section .panel-body {
        flex: 1;
        padding: 14px 16px !important;
    }

    .home-section .panel-body h4 {
        margin: 0 0 8px;
        font-size: 17px;
        line-height: 1.4;
    }

    .home-section .panel-body p {
        margin-bottom: 0;
        color: #667085;
        line-height: 1.5;
    }

    .home-section .panel-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        height: auto !important;
        min-height: 52px;
        padding: 10px 14px !important;
        background: #fff;
        border-top: 1px solid #edf1f7;
    }

    .home-section .panel-footer > div {
        float: none !important;
    }

    .home-section .panel-footer .btn {
        white-space: nowrap;
        border-radius: 8px;
        box-shadow: 0 3px 8px rgba(36, 89, 180, .22);
        transition: transform .18s ease, box-shadow .18s ease;
    }

    .home-section .panel-footer .btn:hover,
    .home-section .panel-footer .btn:focus {
        transform: translateY(-2px);
        box-shadow: 0 6px 14px rgba(36, 89, 180, .32);
    }

    .home-section .panel-footer .btn:active {
        transform: translateY(0);
        box-shadow: 0 2px 5px rgba(36, 89, 180, .2);
    }

    /* Card lịch thi: tiêu đề tối đa 2 dòng, footer thẳng hàng và nút nằm giữa */
    .exam-section > div {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }

    .exam-section #primary {
        flex: 0 0 100%;
    }

    .exam-section .col-lg-3 {
        display: flex;
        width: 100%;
        align-items: stretch;
    }

    .exam-section .exam-card {
        width: 100%;
        height: 100% !important;
    }

    .exam-section .exam-title {
        height: 2.6em;
        margin: 14px 12px 10px;
        overflow: hidden;
        color: #1e61eb;
        font-size: 24px;
        text-align: center;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .exam-section .panel-footer {
        justify-content: center;
        margin-top: auto;
    }

    .exam-section .panel-footer .btn {
        margin: 0 auto;
    }

    .exam-section .panel-footer .buttonNhapNhay {
        width: auto;
        min-width: 120px;
        padding: 8px 18px;
        border: 1px solid #b91c1c;
        border-radius: 8px;
        background: #dc2626;
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        line-height: 20px;
        animation: exam-live-pulse 1.8s ease-in-out infinite;
    }

    .exam-section .panel-footer .buttonNhapNhay:hover,
    .exam-section .panel-footer .buttonNhapNhay:focus {
        border-color: #991b1b;
        background: #b91c1c;
        color: #fff;
        text-decoration: none;
    }

    .exam-section .panel-footer .buttonNhapNhay .fa {
        margin-right: 5px;
    }

    @keyframes exam-live-pulse {
        0%, 100% {
            box-shadow: 0 0 0 0 rgba(220, 38, 38, .25);
            transform: scale(1);
        }
        50% {
            box-shadow: 0 0 0 7px rgba(220, 38, 38, 0);
            transform: scale(1.025);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .exam-section .panel-footer .buttonNhapNhay {
            animation: none;
        }
    }

    .resource-card .panel-body {
        min-height: 158px;
    }

    .resource-card .panel-header { 
        background: #f4f7fb;
        border-bottom: 1px solid #e7edf5;
    }

    .resource-card .panel-header a {
        display: block;
        overflow: hidden;
        border: 1px solid #dce5f0;
        border-radius: 10px;
        background: #fff;
    }

    .resource-card .panel-header img {
        height: 182px !important;
        object-fit: cover;
        transition: transform .25s ease;
    }

    .resource-card .panel-header a:hover img {
        transform: scale(1.03);
    }

    .resource-card .panel-body h4 {
        height: 48px !important;
        overflow: hidden !important;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .resource-card .panel-body p {
        height: 72px !important;
        overflow: hidden !important;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
    }

    /* Card khóa học: các item trong cùng một hàng luôn bằng chiều cao */
    .course-card {
        min-height: 390px !important;
    }

    .course-card .panel-header img {
        height: 190px !important;
    }

    .course-card .panel-body {
        min-height: 112px;
        max-height: 112px;
        overflow: hidden;
    }

    .course-card .course-title {
        height: 48px !important;
        margin-top: 0;
        margin-bottom: 7px;
        overflow: hidden;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .course-card .course-description {
        height: 42px !important;
        max-height: 42px !important;
        margin-bottom: 0;
        line-height: 1.4;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .course-card .panel-footer {
        margin-top: auto;
    }

    .course-card .panel-footer > div:first-child {
        margin-right: auto;
        white-space: nowrap;
    }

    .course-card .panel-footer > div:not(:first-child) {
        flex: 0 0 auto;
    }

    .course-card .panel-footer .btn {
        min-height: 32px;
        padding: 6px 10px;
        border-radius: 8px !important;
        font-size: 13px;
        line-height: 18px;
        font-weight: 600 !important;
        box-shadow: 0 3px 8px rgba(36, 89, 180, .22) !important;
    }

    #myCarousel {
        /* Mobile mặc định: mọi banner có cùng chiều cao từ 220px đến 360px. */
        width: 100%;
        height: 64vw;
        min-height: 220px;
        max-height: 360px;
        margin-bottom: 8px;
        overflow: hidden;
        background: #020432;
        border-radius: 0 0 16px 16px;
    }

    #myCarousel .carousel-inner,
    #myCarousel .carousel-inner > .item,
    #myCarousel .home-banner-link {
        width: 100% !important;
        height: 100% !important;
    }

    #myCarousel .carousel-inner > .item {
        position: relative;
        overflow: hidden;
    }

    #myCarousel .home-banner-link {
        display: block;
        overflow: hidden;
    }

    #myCarousel .home-banner-image,
    #myCarousel .carousel-inner > .item > a > img {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: block;
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        /* Phủ đúng 100% chiều rộng và chiều cao, không cắt mất nội dung ảnh. */
        object-fit: fill !important;
        object-position: center center;
        background: #020432;
    }

    /* Desktop: chiều cao responsive trong khoảng 360px đến 680px. */
    @media (min-width: 768px) {
        #myCarousel {
            height: 38vw;
            min-height: 360px;
            max-height: 680px;
        }
    }

    /* Màn hình rất lớn: tiếp tục tăng nhưng không vượt quá 760px. */
    @media (min-width: 1920px) {
        #myCarousel {
            height: 35vw;
            min-height: 680px;
            max-height: 760px;
        }
    }

    @media (min-width: 768px) {
        .home-section .col-lg-3 { width: 50%; }
    }

    @media (min-width: 1100px) {
        .home-section .col-lg-3 { width: 25%; }
    }

    @media (max-width: 575px) {
        .home-section { padding: 0 8px 12px; }
        .archive_title_h1 { font-size: 21px; }
        .home-section .col-lg-3 { padding: 5px 2px !important; }
        .home-section .panel-header img { height: 165px !important; }
        .home-section .panel-footer { align-items: flex-start; flex-wrap: wrap; }
        .home-section .panel-footer > div:first-child { width: 100%; font-size: 16px !important; }
        .carousel-control { width: 12%; }
    }
    .card-text{
        margin-left: 14px !important;
    }