/* Desktop-first homepage skin for THPT Duc Linh */

:root {
    --dl-blue: #0030a4;
    --dl-blue-dark: #00308e;
    --dl-red: #ed1d2f;
    --dl-yellow: #ffdb24;
    --dl-text: #15233f;
    --dl-muted: #5c6c82;
    --dl-bg: #edf4fb;
    --dl-soft: #dff0ff;
    --dl-shadow: 0 12px 28px rgba(11, 52, 139, .15);
}

.dl-header {
    position: relative;
    z-index: 20;
    background: #fff url("/Design/img/THPTDucLinh/t-h.png") center top / cover no-repeat;
    color: var(--dl-blue);
    height: 132px;
}

    .dl-header .grid.wide,
    .dl-stat-strip .grid.wide,
    .duc-home-page .grid.wide {
        max-width: 1200px;
    }

.dl-topline {
    height: 36px;
}

.dl-topline-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.dl-topline-time {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #282828;
    font-family: 'Montserrat-Medium';
    font-size: 14px;
    font-style: italic;
    border-bottom: 1px solid #9f9f9f;
    padding-bottom: 7px;
}

.dl-brandbar {
    height: 68px;
}

.dl-brandbar-inner {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.dl-brand-logo {
    position: absolute;
    left: 0;
    top: -24px;
    z-index: 5;
    width: 122px;
    height: 122px;
    display: flex;
    align-items: center;
    justify-content: center;
}

a.dl-brand-logo:before {
    content: "";
    position: absolute;
    background: url("/Design/img/THPTDucLinh/shadow.png") no-repeat center;
    background-size: contain;
    left: 50%;
    bottom: -13px;
    width: 118px;
    height: 17px;
    transform: translateX(-50%);
    z-index: 0;
    mix-blend-mode: multiply;
    opacity: 0.6;
    pointer-events: none;
}

.dl-brand-logo img {
    display: block;
    width: 122px;
    height: 122px;
    object-fit: cover;
    position: relative;
    z-index: 1;
}

.dl-school-name {
    padding-left: 23px;
    text-transform: uppercase;
    position: relative;
    top: -15px;
}

    .dl-school-name span {
        display: block;
        color: #343434;
        font-family: 'Montserrat-Medium';
        font-size: 16px;
        letter-spacing: 0;
    }

    .dl-school-name strong {
        display: block;
        margin-top: 3px;
        color: #004ac1;
        font-family: UTM;
        font-size: 27px;
        line-height: 1.05;
    }

.dl-header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 24px;
}

.dl-header-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0030a4;
    font-family: 'Montserrat-Semibold';
    font-size: 16px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: transform .25s ease, color .25s ease;
}

.dl-header-action-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #004ac1;
    border-radius: 8px;
    color: var(--dl-red);
    background: #fff;
    box-shadow: 0 5px 15px rgba(0, 44, 132, .08);
}

.dl-header-action:first-child,
.dl-header-action-red {
    color: #0030a4;
    font-family: 'Montserrat-Medium';
    font-size: 18px;
    font-weight: bold;
}

.dl-header-action:hover {
    color: var(--dl-red);
    transform: translateY(-2px);
}

.dl-nav {
    position: relative;
    height: 56px;
    background: transparent;
    top: 0px;
}

    .dl-nav.fixed {
        position: fixed;
        top: 0 !important;
        left: 0;
        width: 100%;
        z-index: 100;
        background: var(--dl-blue) !important;
        box-shadow: var(--dl-shadow);
    }

.dl-nav-inner {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    border-radius: 28px;
    background: var(--dl-blue);
    box-shadow: var(--dl-shadow);
    justify-content: end;
    -webkit-justify-content: flex-end;
    padding-right: 10px;
}

    .dl-nav-inner::before {
        content: "";
        position: absolute;
        left: -1px;
        top: 0;
        width: 132px;
        height: 100%;
        border-radius: 28px 0 0 28px;
        background: var(--dl-blue);
    }

.dl-home-link {
    position: relative;
    z-index: 1;
    margin-left: 90px;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    transition: transform .25s ease, background .25s ease;
}

    .dl-home-link:hover {
        transform: translateY(-2px);
    }

.dl-main-menu {
    height: 100%;
    margin-right: 25px;
}

    .dl-main-menu > ul {
        display: flex !important;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

        .dl-main-menu > ul > li {
            position: relative;
            height: 100%;
            display: flex !important;
            align-items: center;
        }

            .dl-main-menu > ul > li + li::before {
                content: "";
                width: 1px;
                height: 17px;
                background: rgba(255, 255, 255, .62);
            }

.searchbox .btn svg path {
    fill: #0030a4;
}

.dl-nav-inner .logo {
    display: none;
}

.dl-nav.fixed .dl-nav-inner .logo {
    display: block;
    top: 0;
    transform: translateY(0px);
}

.dl-nav.fixed .dl-nav-inner.header-bottom-left {
    justify-content: space-between;
}

.dl-nav.fixed a.dl-brand-logo:before {
    bottom: -5px;
    width: 110px;
    height: 10px;
    opacity: 0;
}

.dl-home-link .dl-nav.fixed {
    margin-left: 0;
}

.dl-nav.fixed .dl-home-link {
}

.dl-main-menu > ul > li > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 33px;
    margin: 0;
    padding: 0 17px;
    border-radius: 7px;
    color: #ffffff;
    font-family: 'Montserrat-Medium';
    font-size: 16px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}

.dl-main-menu > ul > li:hover > a {
    background: #fff;
    color: var(--dl-blue);
    transform: translateY(-1px);
}

.dl-main-menu .drop {
    position: absolute;
    left: 13px;
    top: 100%;
    min-width: 230px;
    padding: 0;
    border-radius: 0 0 8px 8px;
    background: #fff;
    box-shadow: var(--dl-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
    z-index: 30;
}

.dl-main-menu li:hover .drop {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dl-main-menu .drop a {
    display: block;
    padding: 10px 15px;
    color: var(--dl-blue-dark);
    font-family: 'Montserrat-SemiBold';
    font-size: 14px;
    transition: background .22s ease, padding-left .22s ease;
    border-top: 1px solid #eef5ff;
}

    .dl-main-menu .drop a:hover {
        background: #eef5ff;
        padding-left: 20px;
    }

.dl-search-wrap {
    display: flex;
    justify-content: center;
}

.dl-searchbox {
    position: relative;
    width: 42px;
    height: 42px;
}

    .dl-searchbox .txt {
        position: absolute;
        right: 0;
        top: 0;
        width: 42px;
        height: 42px;
        padding: 0 42px 0 0;
        border: 0;
        border-radius: 50px;
        opacity: 0;
        background: #fff;
        color: var(--dl-blue);
        box-shadow: 0 8px 18px rgba(0, 45, 140, .16);
        transition: width .25s ease, opacity .25s ease, padding .25s ease;
    }

        .dl-search-wrap:hover .dl-searchbox .txt,
        .dl-searchbox .txt:focus {
            width: 230px;
            padding-left: 16px;
            opacity: 1;
        }

    .dl-searchbox .btn {
        position: absolute;
        inset: 0 0 auto auto;
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #fff;
        color: var(--dl-blue);
        transition: transform .25s ease;
    }

        .dl-searchbox .btn:hover {
            transform: scale(1.05);
        }

.dl-menu-toggle,
.dl-mobile-menu-toggle {
    display: none;
}

.dl-hero {
    margin-top: -56px;
    overflow: hidden;
}

.dl-hero-swiper,
.dl-hero-slide {
}

    .dl-hero-slide img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

.dl-hero .swiper-button-next,
.dl-hero .swiper-button-prev {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .86);
    color: var(--dl-blue);
}

    .dl-hero .swiper-button-next::after,
    .dl-hero .swiper-button-prev::after {
        font-size: 15px;
        font-weight: 700;
    }

.dl-stat-strip {
    position: relative;
    z-index: 6;
    margin-top: -58px;
}

.dl-stat-panel {
    min-height: 110px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    padding: 17px 28px;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 13px 30px rgba(29, 70, 142, .18);
}

.dl-stat-item {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    column-gap: 12px;
    align-items: center;
    min-height: 59px;
    padding: 0 14px;
    transition: transform .25s ease;
}

    .dl-stat-item + .dl-stat-item {
        border-left: 1px solid #dbe4f1;
    }

    .dl-stat-item:hover {
        transform: translateY(-3px);
    }

.dl-stat-icon {
    grid-row: span 2;
    color: var(--dl-blue);
    font-size: 43px;
    line-height: 1;
}

.dl-stat-label {
    color: var(--dl-blue-dark);
    font-family: 'UTM';
    font-size: 13px;
    line-height: 1.1;
    text-transform: uppercase;
}

.dl-stat-item strong {
    color: var(--dl-blue);
    font-family: 'Montserrat-ExtraBold';
    font-size: 23px;
    line-height: 1.1;
    text-transform: uppercase;
}

.duc-home-page {
    margin-top: -52px;
    background: var(--dl-bg);
    color: var(--dl-text);
}

    .duc-home-page a {
        transition: color .25s ease, transform .25s ease, box-shadow .25s ease;
    }

.dl-about {
    position: relative;
    padding: 118px 0 67px;
    overflow: hidden;
    background: #f2f6fb;
}

.dl-about-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 387px minmax(0, 1fr);
    gap: 43px;
    align-items: center;
}

.dl-script-title {
    display: block;
    margin-bottom: 1px;
    color: #17233f;
    font-family: 'CormorantUnicase-Bold', 'UTM Silk Script', serif;
    font-size: 25px;
    font-style: italic;
    line-height: 1.12;
}

.dl-about h1 {
    margin: 0;
    color: #0030a4;
    font-family: 'Montserrat-Black';
    font-size: 70px;
    line-height: 1.2;
    text-transform: uppercase;
    text-align: justify;
}

    .dl-about h1 span {
        display: block;
        margin-bottom: 11px;
        font-size: 27px;
        line-height: 1.08;
        font-family: UTM;
        color: #0030a4;
    }

.dl-about-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 18px 0 28px;
    min-height: 33px;
    padding: 6px 16px;
    border: 1.5px solid var(--dl-blue);
    border-radius: 8px;
    color: #0030a4;
    font-family: 'Montserrat-Bold';
    font-size: 17px;
    line-height: 1;
    text-transform: uppercase;
}

.dl-about p {
    margin: 0 0 22px;
    color: #303030;
    font-family: 'Montserrat-Medium';
    font-size: 16px;
    line-height: 1.36;
    text-align: justify;
}

.dl-primary-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    min-width: 282px;
    min-height: 43px;
    justify-content: center;
    padding: 12px 25px;
    border-radius: 50px;
    background: var(--dl-blue);
    color: #fff;
    font-family: 'Montserrat-Medium';
    font-size: 15px;
    box-shadow: 0 8px 18px rgba(7, 63, 175, .12);
    transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}

    .dl-primary-link:hover {
        color: #fff;
        transform: translateY(-3px);
        box-shadow: 0 14px 24px rgba(7, 63, 175, .24);
    }

.dl-about-visual {
    position: relative;
    min-height: 493px;
    isolation: isolate;
}

    .dl-about-visual::before,
    .dl-about-visual::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
    }

    .dl-about-visual::before {
        content: "";
        position: absolute;
        left: 20px;
        top: -3px;
        width: 501px;
        height: 476px;
        background: url(/Design/img/THPTDucLinh/ff.png) no-repeat;
        background-size: cover;
        z-index: -1;
    }

section.dl-red-banners .grid-full {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 0 14px;
}

.dl-learning-cards article {
    transition: transform .3s ease, filter .3s ease;
}

.dl-about-circle {
    position: absolute;
    overflow: hidden;
    border-radius: 50%;
    border: 8px solid #fff;
    background: #d7e9f8;
    box-shadow: 0 12px 24px rgba(27, 82, 157, .17);
    transition: transform .32s ease, box-shadow .32s ease;
    z-index: 2;
}

    .dl-about-circle img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .35s ease;
    }

    .dl-about-circle:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 32px rgba(27, 82, 157, .22);
    }

        .dl-about-circle:hover img {
            transform: scale(1.045);
        }

.dl-about-circle-main {
    left: 65px;
    top: 28px;
    width: 382px;
    height: 382px;
    border-width: 10px;
    z-index: 2;
}

.dl-about-circle-a {
    left: 306px;
    top: -18px;
    width: 123px;
    height: 123px;
    z-index: 4;
}

.dl-about-circle-b {
    left: 48px;
    top: 273px;
    width: 133px;
    height: 133px;
    z-index: 4;
}

.dl-about-circle-c {
    left: 320px;
    top: 300px;
    width: 147px;
    height: 147px;
    z-index: 4;
}

.dl-value-card {
    position: absolute;
    min-width: 288px;
    min-height: 49px;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    column-gap: 8px;
    padding: 7px 19px 7px 8px;
    border-radius: 50px;
    background: #fff;
    box-shadow: 0 7px 17px rgba(36, 69, 132, .14);
    transition: transform .3s ease, box-shadow .3s ease;
    z-index: 5;
}

    .dl-value-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 15px 30px rgba(36, 69, 132, .2);
    }

    .dl-value-card span {
        grid-row: span 2;
        width: 46px;
        height: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #20a7eb;
        color: #fff;
        font-size: 23px;
        line-height: 1;
        transition: transform .3s ease;
    }

    .dl-value-card:hover span {
        transform: scale(1.06) rotate(-4deg);
    }

    .dl-value-card strong {
        color: var(--dl-blue);
        font-family: 'Montserrat-ExtraBold';
        font-size: 14px;
        line-height: normal;
        text-transform: uppercase;
    }

    .dl-value-card em {
        color: #2a2a2a;
        font-family: 'Montserrat-ExtraBold';
        font-size: 13px;
        font-style: normal;
        line-height: normal;
        position: relative;
        top: -3px;
    }

.dl-value-card-1 {
    right: 13px;
    top: 61px;
}

.dl-value-card-2 {
    right: -25px;
    top: 171px;
}

    .dl-value-card-2 span {
        background: #ffbc23;
    }

.dl-value-card-3 {
    right: -2px;
    top: 282px;
}

.dl-value-card-4 {
    left: 77px;
    bottom: -27px;
    min-width: 263px;
}

.dl-value-card-5 {
    right: 78px;
    bottom: -27px;
    min-width: 273px;
}

    .dl-value-card-5 span {
        background: #9845c7;
    }

.dl-news {
    position: relative;
    padding: 84px 0 12px;
    overflow: hidden;
    background: url(/Design/img/THPTDucLinh/t8.png) no-repeat;
    background-size: 100% 100%;
}

    .dl-news .grid.wide {
        position: relative;
        z-index: 1;
    }

.dl-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 35px;
    color: var(--dl-blue);
}

    .dl-section-title i {
        color: var(--dl-red);
        font-size: 27px;
        filter: drop-shadow(0 4px 8px rgba(237, 29, 47, .1));
    }

    .dl-section-title h2 {
        position: relative;
        margin: 0;
        color: #0030a4;
        font-family: 'Montserrat-ExtraBold';
        font-size: 27px;
        line-height: 1.1;
        text-transform: uppercase;
    }

        .dl-section-title h2::after {
            content: "";
            position: absolute;
            left: -36px;
            bottom: -14px;
            width: 118px;
            height: 1px;
            background: var(--dl-blue);
        }

.dl-news-layout {
    display: grid;
    grid-template-columns: 300px 440px minmax(0, 1fr);
    gap: 26px;
    align-items: start;
}

.dl-notice-box {
    height: 684px;
    padding: 29px 18px 26px 20px;
    border-radius: 12px;
    background: #0030a4;
    color: #fff;
    transition: transform .32s ease, box-shadow .32s ease;
}

    .dl-notice-box:hover {
        transform: translateY(-4px);
    }

    .dl-notice-box h3 {
        margin: 0 0 19px;
        color: #fff;
        font-family: 'Montserrat-ExtraBold';
        font-size: 25px;
        line-height: 1;
        text-transform: uppercase;
    }

.dl-news-feature article:hover h3 {
    color: #ed1d2f;
}

.dl-notice-scroll {
    height: 610px;
    margin-right: -6px;
    padding-right: 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    scrollbar-color: rgba(255, 255, 255, .42) transparent;
    scrollbar-width: thin;
}

    .dl-notice-scroll::-webkit-scrollbar {
        width: 4px;
    }

    .dl-notice-scroll::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(255, 255, 255, .42);
    }

    .dl-notice-scroll::-webkit-scrollbar-track {
        background: transparent;
    }

.dl-notice-box li {
    position: relative;
    min-height: 48px;
    padding: 0 8px 14px 25px;
    border-bottom: 1px dashed rgba(255, 255, 255, .22);
    transition: transform .28s ease, background .28s ease, border-color .28s ease;
}

    .dl-notice-box li + li {
        margin-top: 14px;
    }

    .dl-notice-box li::before {
        content: "\f058";
        position: absolute;
        left: 0;
        top: 3px;
        color: var(--dl-yellow);
        font-family: "Font Awesome 6 Free";
        font-size: 13px;
        font-weight: 900;
        transition: transform .28s ease, color .28s ease;
    }

    .dl-notice-box li a {
        color: #ffffff;
        font-family: 'Montserrat-Medium';
        font-size: 14px;
        text-align: justify;
        line-height: 1.5;
        transition: color .28s ease;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        display: -webkit-box;
    }

    .dl-notice-box li:hover {
        transform: translateX(5px);
        color: var(--dl-yellow);
        border-color: rgba(255, 255, 255, .34);
    }

        .dl-notice-box li:hover::before {
            color: #fff36c;
            transform: scale(1.12) rotate(-8deg);
        }

    .dl-notice-box li a:hover {
        color: var(--dl-yellow);
    }

.dl-news-feature article,
.dl-news-feature a {
    display: block;
    transition: transform .32s ease;
}

    .dl-news-feature article:hover,
    .dl-learning-item:hover,
    .dl-learning-cards article:hover,
    .dl-popular:hover,
    .dl-quick-image:hover,
    .dl-side-banners a:hover,
    .dl-album-grid a:hover,
    .dl-video-feature a:hover {
        transform: translateY(-4px);
    }

.dl-news-feature-img,
.dl-news-card-img,
.dl-learning-img,
.dl-learning-cards span,
.dl-popular-feature img,
.dl-album-grid a,
.dl-video-thumb,
.dl-video-list span {
    position: relative;
    display: block;
    overflow: hidden;
    background: #d7e9f8;
}

.dl-news-feature-img {
    height: 355px;
    border-radius: 8px;
    box-shadow: 0 10px 22px rgba(13, 74, 151, .1);
}

    .dl-news-feature-img::after,
    .dl-news-card-img::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(5, 48, 147, 0) 42%, rgba(5, 48, 147, .26) 100%);
        opacity: 0;
        pointer-events: none;
        transition: opacity .32s ease;
    }

    .dl-news-feature-img img,
    .dl-news-card-img img,
    .dl-learning-img img,
    .dl-learning-cards img,
    .dl-popular-feature img,
    .dl-album-grid img,
    .dl-video-thumb img,
    .dl-video-list img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        transition: transform .35s ease;
    }

.dl-news-feature a:hover img,
.dl-news-card a:hover img,
.dl-learning-item:hover img,
.dl-learning-cards article:hover img,
.dl-popular-feature a:hover img,
.dl-album-grid a:hover img,
.dl-video-feature a:hover img,
.dl-video-list a:hover img,
.dl-quick-image:hover img,
.dl-side-banners a:hover img {
    transform: scale(1.045);
}

.dl-news-feature a:hover .dl-news-feature-img::after,
.dl-news-card a:hover .dl-news-card-img::after {
    opacity: 1;
}

.dl-news-card a:hover .dl-news-date {
    color: #fff;
}

    .dl-news-card a:hover .dl-news-date i {
        color: #fff;
    }

article.dl-news-card {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #cfdeeb;
}

    article.dl-news-card .dl-news-date {
        margin-bottom: 0px;
    }

.dl-news-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1c1c1c;
    font-family: 'Montserrat-Medium';
    font-size: 13px;
    margin-bottom: 8px;
}

    .dl-news-date i {
        color: var(--dl-blue);
    }

.dl-news-feature h3 {
    margin: 16px 0 4px;
    color: var(--dl-blue);
    font-family: 'Montserrat-Bold';
    font-size: 22px;
    line-height: 1.4;
    transition: color .28s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    text-align: justify;
    letter-spacing: -1px;
}

.dl-news-feature p,
.dl-learning-item p,
.dl-learning-cards p {
    margin: 0;
    color: #1c1c1c;
    font-family: 'Montserrat-Medium';
    font-size: 16px;
    line-height: 1.42;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    text-align: justify;
}

.dl-news-feature a:hover h3 {
    color: #002f94;
}

section.dl-quick .grid-full {
    padding: 0 10px;
}

.dl-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 9px 18px;
    border-radius: 50px;
    background: #fff;
    color: var(--dl-blue);
    font-family: 'Montserrat-Medium';
    font-size: 14px;
    text-transform: uppercase;
    transition: transform .28s ease, box-shadow .28s ease, background .28s ease, color .28s ease;
    border: 1px solid #dcdcdc;
}

    .dl-more:hover {
        background: var(--dl-blue);
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 13px 24px rgba(7, 63, 175, .2);
    }

.dl-news-list {
    padding-top: 64px;
    display: grid;
    gap: 0;
}

.dl-news-card a {
    display: grid;
    grid-template-columns: 124px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    transition: transform .3s ease, background .3s ease, box-shadow .3s ease, padding .3s ease, border-color .3s ease;
    border-radius: 8px;
    padding-right: 13px;
}

    .dl-news-card a:hover {
        transform: translateY(-3px);
        border-color: transparent;
        box-shadow: 0 12px 24px rgba(10, 70, 150, .1);
        border-radius: 8px;
        background: var(--dl-blue);
    }

.dl-news-card-img {
    width: 124px;
    height: 105px;
    border-radius: 7px;
}

.dl-news-card-copy strong {
    display: block;
    margin-top: 5px;
    color: #1c1c1c;
    font-family: 'Montserrat-Bold';
    font-size: 15px;
    line-height: 1.26;
    transition: color .28s ease;
    text-align: justify;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
}

.dl-news-card a:hover .dl-news-card-copy strong {
    color: #fff;
}

.dl-news-card:nth-child(2) a:hover .dl-news-card-copy strong {
    color: #fff;
}

.dl-quick {
    padding: 44px 0 66px;
    background: #edf4fb;
}

.dl-quick-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.dl-quick-image {
    display: block;
    overflow: hidden;
    border-radius: 13px;
    box-shadow: 0 9px 20px rgba(7, 63, 175, .08);
}

    .dl-quick-image img {
        width: 100%;
        display: block;
        object-fit: cover;
        transition: transform .35s ease;
        height: 100%;
        border-radius: 13px;
    }

.dl-learning {
    position: relative;
    padding: 0 0 30px;
    overflow: hidden;
    background: #edf4fb;
}

    .dl-learning::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 18% 13%, rgba(255, 255, 255, .38) 0 180px, transparent 181px), radial-gradient(circle at 82% 28%, rgba(255, 255, 255, .28) 0 230px, transparent 231px);
        pointer-events: none;
    }

.dl-learning-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 852px) 316px;
    gap: 30px;
    align-items: start;
}

.dl-learning-main .dl-section-title {
    margin-bottom: 32px;
}

    .dl-learning-main .dl-section-title h2 {
        font-size: 26px;
    }

.dl-learning-item {
    position: relative;
    display: grid;
    grid-template-columns: 370px minmax(0, 1fr);
    gap: 18px;
    padding: 0 0 28px;
    border-bottom: 1px solid #c9d7e7;
    transition: transform .3s ease, filter .3s ease;
}

    .dl-learning-item + .dl-learning-item {
        padding-top: 28px;
    }

    .dl-learning-item::after,
    .dl-learning-cards article a::after,
    .dl-popular::after {
        content: "";
        position: absolute;
        inset: -10px;
        z-index: -1;
        border-radius: 12px;
        background: rgba(255, 255, 255, .46);
        box-shadow: 0 14px 30px rgba(7, 63, 175, .1);
        opacity: 0;
        transform: scale(.985);
        transition: opacity .3s ease, transform .3s ease;
    }

    .dl-learning-item:hover::after,
    .dl-learning-cards article a:hover::after {
        opacity: 1;
        transform: scale(1);
    }

.dl-learning-img {
    height: 251px;
    border-radius: 6px;
    box-shadow: 0 9px 20px rgba(7, 63, 175, .08);
}

    .dl-learning-img::after,
    .dl-learning-cards span::after,
    .dl-side-banners a::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(7, 63, 175, 0) 45%, rgba(7, 63, 175, .24) 100%);
        opacity: 0;
        pointer-events: none;
        transition: opacity .32s ease;
    }

.dl-learning-item:hover .dl-learning-img::after,
.dl-learning-cards article a:hover span::after,
.dl-popular-feature a:hover::after,
.dl-side-banners a:hover::after {
    opacity: 1;
}

.dl-learning-item h3 {
    margin: 5px 0 0;
    color: var(--dl-blue);
    font-family: 'Montserrat-Bold';
    font-size: 22px;
    line-height: 1.4;
    transition: color .28s ease;
}

    .dl-learning-item h3 a {
        color: var(--dl-blue);
        transition: color .28s ease;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        text-align: justify;
        letter-spacing: -1px;
    }

.dl-learning-item:hover h3 a {
    color: #002f94;
}

.dl-learning-item .dl-news-date {
    margin-top: 8px;
}

.dl-learning-item p {
    margin-top: 3px;
    font-size: 16px;
    line-height: 1.38;
}

.dl-text-more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 15px;
    color: var(--dl-blue);
    font-family: 'Inter_24pt-Medium', Arial, sans-serif;
    font-size: 12.5px;
    text-transform: uppercase;
    transition: color .28s ease, transform .28s ease;
}

    .dl-text-more i {
        transition: transform .28s ease;
    }

    .dl-text-more:hover {
        color: var(--dl-red);
        transform: translateX(3px);
    }

        .dl-text-more:hover i {
            transform: translateX(3px);
        }

.dl-learning-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 26px;
}

    .dl-learning-cards article a {
        position: relative;
        display: block;
        transition: transform .3s ease, filter .3s ease;
    }

    .dl-learning-cards span {
        height: 167px;
        border-radius: 6px;
        box-shadow: 0 8px 18px rgba(7, 63, 175, .08);
    }

    .dl-learning-cards em {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        margin-top: 12px;
        color: #53677f;
        font-family: 'Inter_24pt-Medium', Arial, sans-serif;
        font-size: 12.5px;
        font-style: normal;
    }

        .dl-learning-cards em i {
            color: var(--dl-blue);
        }

    .dl-learning-cards strong {
        display: block;
        margin-top: 8px;
        color: #1c1c1c;
        font-family: 'Montserrat-Bold';
        font-size: 15px;
        line-height: 1.5;
        transition: color .28s ease;
        text-align: justify;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        display: -webkit-box;
    }

    .dl-learning-cards article a:hover strong {
        color: var(--dl-blue);
    }

    .dl-learning-cards p {
        margin-top: 12px;
        font-size: 14px;
        line-height: 1.5;
    }

.dl-side {
    min-width: 0;
}

.dl-popular {
    position: relative;
    padding: 24px 17px 23px;
    border: 1px solid rgba(8, 63, 166, .06);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 10px 27px rgba(8, 63, 166, .14);
    transition: transform .3s ease, box-shadow .3s ease;
}

    .dl-popular:hover {
        box-shadow: 0 18px 35px rgba(8, 63, 166, .18);
    }

    .dl-popular h2 {
        margin: 0 0 19px;
        color: var(--dl-blue);
        font-size: 22px;
        line-height: 1;
        text-transform: uppercase;
        font-family: 'Montserrat-ExtraBold';
    }

.dl-popular-feature a {
    position: relative;
    display: block;
    overflow: hidden;
}

.dl-popular-feature img {
    width: 100%;
    height: 164px;
    display: block;
    border-radius: 6px;
    object-fit: cover;
    transition: transform .35s ease;
}

.dl-popular-feature .dl-news-date {
    margin-top: 13px;
    margin-bottom: 0;
}

.dl-popular-feature strong {
    margin-top: 8px;
    color: var(--dl-blue);
    font-size: 15.2px;
    font-family: 'Montserrat-Bold';
    line-height: 150%;
    transition: color .28s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    text-align: justify;
}

.dl-popular-feature a:hover strong {
    color: #ed1d2f;
}

.dl-popular ul {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e1e8f2;
}

.dl-popular li {
    position: relative;
    padding-left: 18px;
    transition: transform .28s ease;
}

    .dl-popular li + li {
        margin-top: 12px;
    }

    .dl-popular li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 9px;
        width: 7px;
        height: 2px;
        background: var(--dl-blue);
        transition: width .28s ease, background .28s ease;
    }

    .dl-popular li::after {
        content: "";
        position: absolute;
        left: 0;
        top: 12px;
        width: 11px;
        height: 2px;
        background: var(--dl-blue);
        transition: width .28s ease, background .28s ease;
    }

    .dl-popular li a {
        color: #283246;
        font-family: 'Montserrat-SemiBold';
        font-size: 13px;
        line-height: 1.5;
        transition: color .28s ease;
        text-align: justify;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        display: -webkit-box;
    }

    .dl-popular li:hover {
        transform: translateX(4px);
    }

        .dl-popular li:hover::before {
            width: 12px;
            background: var(--dl-red);
        }

    .dl-popular li a:hover {
        color: var(--dl-blue);
    }

.dl-side-banners {
    display: grid;
    gap: 13px;
    margin-top: 17px;
}

    .dl-side-banners a {
        position: relative;
        display: block;
        overflow: hidden;
        border-radius: 6px;
        box-shadow: 0 8px 18px rgba(7, 63, 175, .12);
        transition: transform .3s ease, box-shadow .3s ease;
    }

        .dl-side-banners a:hover {
            box-shadow: 0 14px 28px rgba(7, 63, 175, .18);
        }

    .dl-side-banners img {
        width: 100%;
        height: 88px;
        display: block;
        object-fit: cover;
        transition: transform .35s ease;
    }

    .dl-side-banners a:nth-child(3) img {
        height: 57px;
    }

    .dl-side-banners a:nth-child(4) img {
        height: 92px;
    }

    .dl-side-banners a:nth-child(5) img {
        height: 48px;
    }

.dl-red-banners {
    padding: 16px 0 40px;
    background: var(--dl-bg);
}

    .dl-red-banners .grid.wide {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }

    .dl-red-banners a {
        display: block;
        overflow: hidden;
    }

    .dl-red-banners img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        border-radius: unset;
    }

.dl-media {
    padding: 0 0 68px;
    background: var(--dl-bg);
}

section.dl-red-banners .dl-quick-image {
    border-radius: unset;
}

.dl-media-grid {
    display: grid;
    grid-template-columns: minmax(0, 727px) 427px;
    gap: 47px;
    align-items: start;
}

.dl-album-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px;
}

    .dl-album-grid a {
        grid-column: span 2;
        height: 159px;
        border-radius: 6px;
        transition: transform .25s ease, box-shadow .25s ease;
    }

        .dl-album-grid a:nth-child(1),
        .dl-album-grid a:nth-child(2) {
            grid-column: span 3;
            height: 288px;
        }

.dl-video-feature a {
    display: block;
    transition: transform .25s ease;
}

.dl-video-thumb {
    height: 288px;
    border-radius: 8px;
}

    .dl-video-thumb::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(7, 63, 175, .13);
    }

    .dl-video-thumb i {
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 2;
        width: 64px;
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(255, 255, 255, .82);
        color: var(--dl-blue);
        transform: translate(-50%, -50%);
        transition: background .25s ease, color .25s ease, transform .25s ease;
    }

.dl-video-feature a:hover .dl-video-thumb i {
    background: var(--dl-blue);
    color: #fff;
    transform: translate(-50%, -50%) scale(1.06);
}

.dl-video-feature strong {
    display: block;
    margin-top: 15px;
    color: var(--dl-blue);
    font-size: 18px;
    font-family: 'Montserrat-Bold';
    line-height: 1.4;
}

.dl-video-list {
    display: grid;
    gap: 17px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #c2ceea;
}

    .dl-video-list a {
        display: grid;
        grid-template-columns: 88px minmax(0, 1fr);
        column-gap: 15px;
        align-items: center;
        transition: transform .25s ease;
    }

        .dl-video-list a:hover {
            transform: translateX(4px);
        }

    .dl-video-list span {
        grid-row: span 2;
        height: 78px;
        border-radius: 5px;
    }

    .dl-video-list em i {
        color: #0030a4;
        margin-right: 4px;
    }

    .dl-video-list strong {
        color: #1c1c1c;
        font-family: 'Montserrat-Bold';
        font-size: 15px;
        line-height: 1.5;
        transition: color .28s ease;
        text-align: justify;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -webkit-box;
    }

    .dl-video-list em {
        color: #6c7788;
        font-size: 13px;
        font-style: normal;
        font-family: 'Montserrat-Medium';
    }

@media (max-width: 1239px) {
    .dl-header .grid.wide,
    .dl-stat-strip .grid.wide,
    .duc-home-page .grid.wide {
        width: calc(100% - 32px);
    }

    .dl-school-name strong {
        font-size: 21px;
    }

    .dl-header-actions {
        gap: 10px;
    }

    .dl-main-menu > ul > li > a {
        margin: 0 7px;
        font-size: 12px;
    }

    .dl-news-layout,
    .dl-learning-grid,
    .dl-media-grid {
        grid-template-columns: 1fr;
    }

    .dl-side {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 285px;
        gap: 24px;
        align-items: start;
    }

    .dl-news-list {
        padding-top: 0;
    }

    .dl-learning-grid,
    .dl-media-grid {
        gap: 42px;
    }
}

@media (max-width: 1023px) {
    .dl-brand-logo {
        top: -16px;
        width: 92px;
        height: 92px;
    }

        .dl-brand-logo img {
            width: 86px;
            height: 86px;
        }

    .dl-school-name {
        padding-left: 108px;
    }

    header.dl-header.fixed-fixed {
        position: fixed;
        top: 0 !important;
        left: 0;
        width: 100%;
        z-index: 100;
        box-shadow: var(--dl-shadow);
    }

    .dl-school-name span {
        font-size: 13px;
    }

    .dl-school-name strong {
        font-size: 17px;
    }

    .dl-header-actions,
    .dl-home-link,
    .dl-main-menu {
        display: none !important;
    }

    .dl-nav-inner::before {
        display: none;
    }

    .dl-nav {
        height: 48px;
        display: none;
    }

    .dl-nav-inner {
        border-radius: 0;
        justify-content: flex-end;
    }

    .dl-search-wrap {
        flex: 0 0 52px;
    }

    .dl-menu-toggle {
        width: 40px;
        height: 40px;
        margin-right: 8px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 6px;
        background: #fff;
        color: var(--dl-blue);
    }

    .dl-hero {
        margin-top: 0;
    }

    .dl-hero-swiper,
    .dl-hero-slide {
    }

    .dl-stat-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .dl-stat-item,
    .dl-stat-item + .dl-stat-item {
        border: 0;
        border-radius: 10px;
        background: #f7fbff;
    }

    .dl-about {
        padding: 92px 0 78px;
    }

    .dl-about-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .dl-about-visual {
        width: 748px;
        max-width: 100%;
        min-height: 493px;
        margin: 0 auto;
        transform: scale(.9);
        transform-origin: top center;
    }

    .dl-news-layout {
        gap: 24px;
    }

    .dl-quick-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dl-learning-item {
        grid-template-columns: 1fr;
        padding-bottom: 14px;
    }

        .dl-learning-item + .dl-learning-item {
            padding-bottom: 14px;
            padding-top: 15px;
        }

    .dl-side {
        display: block;
    }

    .dl-learning-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
        margin-top: 18px;
    }

        .dl-learning-cards article:nth-child(3) {
            display: none;
        }

    .dl-red-banners .grid.wide {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 739px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .dl-stat-icon {
        font-size: 30px;
        grid-row: span 2;
        width: max-content;
    }

    .dl-header {
        height: 85px;
    }

    .dl-learning-item h3 {
        font-size: 18px;
    }

    .dl-header .grid.wide,
    .dl-stat-strip .grid.wide,
    .duc-home-page .grid.wide {
        width: calc(100% - 12px);
    }

    .dl-learning-main .dl-section-title h2 {
        font-size: 21px;
    }

    .dl-topline-time {
        max-width: calc(100vw - 24px);
        overflow: hidden;
        font-size: 11px;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-bottom: 9px;
        gap: 4px;
    }

    .dl-brandbar {
        height: 45px;
    }

    .dl-brandbar-inner {
        justify-content: space-between;
    }

    .dl-brand-logo {
        top: -10px;
        width: 74px;
        height: 74px;
    }

        .dl-brand-logo img {
            width: 68px;
            height: 68px;
        }

    .dl-school-name {
        padding-left: 0;
        top: 0;
        padding-right: 8px;
    }

        .dl-school-name strong {
            font-size: 13px;
            line-height: 1.18;
        }

    .dl-nav {
        display: none;
    }

    .dl-mobile-menu-toggle {
        position: fixed;
        right: 12px;
        top: 92px;
        z-index: 120;
        width: 40px;
        height: 40px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 6px;
        background: #fff;
        color: var(--dl-blue);
        box-shadow: var(--dl-shadow);
    }

    .dl-hero-swiper,
    .dl-hero-slide {
    }

    .dl-stat-strip {
        margin-top: -28px;
    }

    .dl-stat-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 14px;
    }

    .dl-stat-item strong {
        font-size: 16px;
    }

    .dl-stat-item, .dl-stat-item + .dl-stat-item {
        padding: 0;
        gap: 4px;
        grid-template-columns: 40px minmax(0, 1fr);
        min-height: 45px;
    }

    .dl-about {
        padding: 66px 0 0px;
    }

        .dl-about h1 {
            font-size: 35px;
        }

    .dl-about-badge {
        font-size: 15px;
        margin: 12px 0;
    }

    .dl-about h1 span {
        font-size: 17px;
    }

    .dl-about-visual {
        width: 100%;
        max-width: none;
        min-height: 493px;
        margin: 0;
        left: 0;
        transform: translateX(-14%) scale(0.8);
        transform-origin: top center;
    }

    .dl-about-circle-main {
    }

    .dl-value-card {
        min-width: 279px;
    }

    .dl-value-card-1 {
        right: 52px;
        top: 0;
    }

    .dl-value-card-2 {
        right: 28px;
        top: 68px;
    }

    .dl-value-card-3 {
        right: 46px;
        top: 135px;
    }

    .dl-value-card-4 {
        left: 188px;
        bottom: -50px;
    }

    .dl-value-card-5 {
        right: 47px;
        bottom: 17px;
    }

    .dl-news {
        padding: 48px 0;
        padding-bottom: 0;
    }

    .dl-notice-box h3 {
        font-size: 20px;
    }

    .dl-section-title h2 {
        font-size: 20px;
    }

    .dl-news-feature h3 {
        font-size: 18px;
        line-height: 1.5;
    }

    .dl-quick {
        padding: 28px 0;
    }

    .dl-news-feature p, .dl-learning-item p, .dl-learning-cards p {
        font-size: 15px;
    }

    .dl-news-feature-img,
    .dl-learning-img {
        height: 250px;
    }

    .dl-learning-cards span {
        height: 150px;
    }

    .dl-side-banners img,
    .dl-side-banners a:nth-child(3) img,
    .dl-side-banners a:nth-child(4) img,
    .dl-side-banners a:nth-child(5) img {
        height: auto;
    }

    .dl-news-card a {
        grid-template-columns: 112px minmax(0, 1fr);
        padding-right: 0;
    }

    .dl-news-card-img {
        height: 85px;
        width: 112px;
    }

    .dl-quick-list,
    .dl-album-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
    }

        .dl-album-grid a,
        .dl-album-grid a:nth-child(1),
        .dl-album-grid a:nth-child(2) {
            grid-column: span 1;
            height: 165px;
        }

    .dl-media {
        padding-bottom: 45px;
    }

    .dl-video-thumb {
        height: 220px;
    }
}