.detail-title {
    color: #222;
    font-size: 38px;
    font-weight: 800;
    line-height: 50px;
}

.detail-notification {
    color: #606060;
    display: flex;
    flex-direction: row;
    column-gap: 32px;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 14px
}

.detail-notification-box {
    display: flex;
    flex-direction: row;
    gap: 16px;
    margin-bottom: 20px;
}

.detail-breadcrumb {
    margin-bottom: 20px
}

.box-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    gap: 8px;
    border-radius: 4px;
    background-color: #EEEEEE;
    color: #6B6B6B;
    font-size: 12px
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
    .detail-title {
        margin-top: 28px
    }
}


    @media screen and (max-width: 767px) {

        .content-detail {
            margin: 20px 12px;
        }

        .header-mobile-details {
            padding: 40px 12px 10px;
            background-color: #4942BD;
        }

        .detail-breadcrumb {
            display: none
        }

        .detail-title {
            font-size: 20px;
            line-height: 32px;
        }

        .detail-notification-box {
            flex-wrap: wrap;
        }

        .detail-notification {
            flex-wrap: wrap;
            row-gap: 16px;
        }

            .detail-notification > div:last-child {
                width: 100%;
            }
    }