.blog-post-detail-page {
    background: linear-gradient(180deg, #f6f9fd 0%, #eff4fb 100%);
    padding: 24px 0 40px;
}

.blog-post-detail-page .container--narrow {
    max-width: 1220px;
}

.blog-post-detail-layout {
    row-gap: 18px;
}

.blog-post-detail-article {
    border-radius: 14px;
    border: 1px solid rgba(17, 41, 74, 0.12);
    box-shadow: 0 12px 24px rgba(17, 41, 74, 0.08);
    overflow: hidden;
}

.blog-post-detail-article .box__head {
    background: #ffffff;
}

.blog-post-detail-article .blog__media img {
    width: 100%;
    max-height: 460px;
    object-fit: cover;
}

.blog-post-detail-article .box__body {
    padding: clamp(14px, 2vw, 24px);
    background: #ffffff;
}

.blog-post-detail-article h1 {
    margin: 12px 0;
    color: #102b4d;
    font-size: clamp(1.35rem, 2.6vw, 2rem);
    line-height: 1.3;
}

.blog-post-detail-article .cms-container {
    color: #253a57;
    font-size: 1rem;
    line-height: 1.8;
}

.blog-post-detail-article .cms-container h2,
.blog-post-detail-article .cms-container h3,
.blog-post-detail-article .cms-container h4 {
    color: #102b4d;
    margin: 1.2em 0 0.6em;
}

.blog-post-detail-article .cms-container p {
    margin-bottom: 0.9em;
}

.blog-post-detail-article .cms-container ul,
.blog-post-detail-article .cms-container ol {
    margin-bottom: 1em;
    padding-left: 1.2em;
}

.blog-post-detail-article .cms-container li {
    margin-bottom: 0.45em;
}

.blog-post-detail-article a {
    color: #1f4f90;
}

.blog-original-toggle {
    cursor: pointer;
}

.blog-original-content {
    direction: ltr;
}

.blog-slot {
    border: 1px solid rgba(17, 41, 74, 0.12);
    border-radius: 12px;
    padding: 12px;
    background: #f8fbff;
}

.blog-slot:empty {
    display: none;
}

.blog-related-teachers,
.blog-related-posts {
    row-gap: 14px;
}

.blog-related-teachers__item,
.blog-related-posts__item {
    position: relative;
}

.blog-related-teachers__card,
.blog-related-posts__card {
    width: 100%;
    border-radius: 12px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.blog-related-teachers__card:hover,
.blog-related-posts__card:hover {
    box-shadow: 0 12px 22px rgba(17, 41, 74, 0.12);
    transform: translateY(-2px);
}

.blog-related-teachers__media,
.blog-related-posts__media,
.blog-sidebar-featured__media {
    text-align: center;
}

.blog-related-teachers .flag img,
.blog-sidebar-featured .flag img {
    border: 1px solid #1f3554;
}

.blog-related-posts__category {
    font-size: 0.82rem;
}

.blog-contribute-mobile {
    border-radius: 12px;
    background: #ffffff;
}

.blog-sidebar-col .blog-sidebar {
    position: sticky;
    top: 96px;
}

.blog-sidebar-col .blog-slot {
    background: #ffffff;
}

.blog-sidebar-featured {
    border-radius: 12px;
}

@media (max-width: 1199px) {
    .blog-sidebar-col .blog-sidebar {
        position: static;
    }
}

@media (max-width: 991px) {
    .blog-post-detail-page {
        padding: 16px 0 28px;
    }

    .blog-post-detail-article .blog__media img {
        max-height: 320px;
    }
}

@media (max-width: 767px) {
    .blog-post-detail-page {
        padding: 12px 0 24px;
    }

    .blog-post-detail-article .box__body {
        padding: 12px;
    }

    .blog-post-detail-article h1 {
        margin: 10px 0;
    }

    .blog-slot {
        padding: 10px;
        border-radius: 10px;
    }
}