.page-blog-detail {
    background: #f5f7fb !important;
    color: #152033;
}

.page-blog-detail .bread-crumbs {
    background: #eef3f9;
    padding: 0.9rem 0;
    border-top: 1px solid rgba(16, 34, 61, 0.05);
    border-bottom: 1px solid rgba(16, 34, 61, 0.06);
}

.page-blog-detail .bread-crumbs-list li,
.page-blog-detail .bread-crumbs-list li a,
.page-blog-detail .bread-crumbs-list .material-icons {
    color: #4e607d !important;
}

.page-blog-detail .bread-crumbs-list li:last-child {
    color: #12233d !important;
    font-weight: 600;
}

.blog-detail-shell {
    position: relative;
}

.blog-detail-section {
    padding: 2rem 0 4.5rem;
}

.blog-detail-panel {
    max-width: 920px;
    margin: 0 auto;
}

.blog-detail-head {
    margin-bottom: 1.5rem;
    padding: 1.7rem 1.7rem 1.45rem;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid rgba(119, 159, 230, 0.16);
    box-shadow: 0 12px 28px rgba(10, 24, 45, 0.06);
}

.blog-detail-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.42rem 0.78rem;
    border-radius: 999px;
    margin-bottom: 1rem;
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2f6fff;
    background: rgba(47, 111, 255, 0.08);
    border: 1px solid rgba(47, 111, 255, 0.16);
}

.blog-detail-title {
    margin: 0 0 0.85rem;
    color: #12233d;
    font-size: clamp(1.7rem, 2.8vw, 2.35rem);
    line-height: 1.16;
    font-weight: 800;
}

.blog-detail-meta {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    color: rgba(31, 63, 115, 0.76);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.blog-detail-media {
    margin-bottom: 1.5rem;
    padding: 0.7rem;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid rgba(119, 159, 230, 0.14);
    box-shadow: 0 10px 26px rgba(10, 24, 45, 0.05);
}

.blog-detail-media img {
    width: 100%;
    max-height: 460px;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}

.blog-detail-content {
    padding: 1.7rem;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid rgba(119, 159, 230, 0.14);
    box-shadow: 0 12px 28px rgba(10, 24, 45, 0.05);
    color: #21344f;
    font-size: 0.98rem;
    line-height: 1.78;
}

.blog-detail-content h1,
.blog-detail-content h2,
.blog-detail-content h3,
.blog-detail-content h4,
.blog-detail-content h5,
.blog-detail-content h6 {
    color: #12233d;
    line-height: 1.25;
    margin-top: 1.6rem;
    margin-bottom: 0.9rem;
}

.blog-detail-content p,
.blog-detail-content ul,
.blog-detail-content ol,
.blog-detail-content blockquote {
    margin-bottom: 1rem;
}

.blog-detail-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.blog-detail-back {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 1.25rem;
    color: #2f6fff !important;
    font-weight: 700;
    text-decoration: none !important;
}

@media (max-width: 767px) {
    .blog-detail-head,
    .blog-detail-content {
        padding: 1.2rem;
        border-radius: 12px;
    }

    .blog-detail-media {
        padding: 0.55rem;
        border-radius: 12px;
    }

    .blog-detail-media img {
        max-height: 260px;
    }
}