.detail-comment-block {
    height: 100%;
}
.comment-list {
    min-height: 500px;
    max-height: 500px;
    overflow-y: auto;
    padding: 10px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #ccc;
}
@media (max-width: 767.98px) {
    .detail-main-block {
        height: auto;
    }
    .detail-comment-block {
        height: 35vh;
        overflow-y: auto;
    }
    .comment-list {
        min-height: 20vh;
        max-height: 20vh;
    }
}
.comment {
    display: flex;
    margin-bottom: 1px;
}
.avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 12px;
}
.comment-content {
    flex: 1;
}
.comment-meta {
    font-size: 0.8em;
    color: #555;
    margin-bottom: 0px;
}
.comment-username {
    font-weight: bold;
    margin-right: 8px;
}
.comment-time {
    font-size: 0.75em;
    color: #888;
}
.comment-text {
    white-space: pre-wrap;
    font-size: 0.8em;
    color: #222;
    text-indent: 0.9em;
}