.livereport {
    padding: 16px 0;
    width: 53%;
    min-width: 764px;
    margin: 0 auto;
}

    .livereport .info .category {
        font-family: Roboto Condensed;
        font-weight: 700;
        font-size: 14px;
        line-height: 20px;
        color: #C77D00;
        margin-bottom: 8px;
    }

    .livereport .info .title {
        font-family: Source Serif;
        font-weight: 700;
        font-size: 28px !important;
        line-height: 35px;
        color: #0B1215;
        margin-bottom: 8px;
    }

    .livereport .info .is-live {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-bottom: 16px;
    }

        .livereport .info .is-live .dot {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #FFE5E5;
            position: relative;
        }

            .livereport .info .is-live .dot::after {
                position: absolute;
                content: '';
                width: 12px;
                height: 12px;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                background-color: #992E2E;
                border-radius: 50%;
            }

        .livereport .info .is-live .text {
            font-family: Source Serif;
            font-weight: 700;
            font-size: 18px;
            line-height: 23px;
            color: var(--color-primary);
        }

    .livereport .info .author-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
    }

    .livereport .info .author {
        display: flex;
        align-items: center;
    }

        .livereport .info .author > *:nth-last-child(n+2) {
            margin-right: 8px;
        }

    .livereport .info .author-wrap .img-box {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        overflow: hidden;
    }

        .livereport .info .author-wrap .img-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .livereport .info .author-wrap .name {
        font-family: Roboto Condensed;
        font-weight: 700;
        font-size: 16px;
        line-height: 24px;
        text-decoration: underline;
    }

    .livereport .info .description {
        margin-bottom: 16px;
    }

        .livereport .info .description .text {
            font-family: Roboto Condensed;
            font-weight: 500;
            font-size: 18px;
            line-height: 25px;
            color: #383F42;
        }

    .livereport .link-box {
        display: flex;
        justify-content: space-between;
    }

        .livereport .link-box > * {
            display: flex;
            align-items: center;
        }

            .livereport .link-box > * > * {
                margin-right: 8px;
            }

        .livereport .link-box .box {
            height: 32px;
            border: 1px solid #BFC6C9;
            display: flex;
            align-items: center;
            color: #383F42;
        }

            .livereport .link-box .box img {
                width: 16px;
                height: 16px;
                object-fit: cover;
            }

        .livereport .link-box .interact .box {
            border-radius: 21px;
            padding: 8px 12px;
        }

            .livereport .link-box .interact .box .num {
                font-family: Inter;
                font-weight: 700;
                font-size: 14px;
                line-height: 20px;
                vertical-align: middle;
                display: inline-block;
                margin-left: 8px;
            }

        .livereport .link-box .social-wrap .box {
            width: 32px;
            justify-content: center;
            border-radius: 50%;
        }

            .livereport .link-box .social-wrap .box.on-mobile {
                display: none;
            }

    .livereport .info .link-box {
        padding: 12px 0px;
        margin-bottom: 24px;
        border-top: 1px solid #EEF4F6;
        border-bottom: 1px solid #EEF4F6;
    }

    .livereport .report-wrap {
        margin-bottom: 48px;
    }

        .livereport .report-wrap > *:nth-last-child(n+2) {
            margin-bottom: 20px;
        }

        .livereport .report-wrap .title {
            font-family: Source Serif;
            font-weight: 700;
            font-size: 20px;
            line-height: 25px;
            margin-bottom: 20px;
        }

        .livereport .report-wrap .report {
            overflow: hidden;
            position: relative;
            padding: 48px 24px 16px;
            border-radius: 8px;
            border-top: 2px solid var(--color-primary);
            background-color: #EEF4F6;
        }

        .livereport .report-wrap .play-box {
            position: absolute;
            top: 0;
            left: 0;
            background-color: var(--color-primary);
            display: flex;
            align-items: center;
            border-radius: 8px 0 0 0;
            padding: 4px 8px;
        }

            .livereport .report-wrap .play-box .btn {
                width: 24px;
                height: 24px;
                background-color: transparent;
                border: none;
                cursor: pointer;
            }

            .livereport .report-wrap .play-box .time {
                font-family: Roboto Condensed;
                font-weight: 500;
                font-size: 16px;
                line-height: 24px;
                color: #fff;
                margin-left: 4px;
            }

        .livereport .report-wrap .content > *:nth-last-child(n+2) {
            margin-bottom: 8px;
        }

    .livereport .video-wrap {
        background-color: transparent;
        position: relative;
        overflow: hidden;
        height: 0px;
        padding: 0px 0px 56.25%;
        border-radius: 8px;
    }

        .livereport .video-wrap .video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

    .livereport .report-wrap .content .title {
        font-family: Source Serif;
        font-weight: 700;
        font-size: 20px;
        line-height: 25px;
    }

    .livereport .report-wrap .content .description {
        font-family: Roboto Condensed;
        font-weight: 500;
        font-size: 18px;
        line-height: 25px;
    }

    .livereport .pagination-container {
        display: flex;
        align-items: center;
        padding: 12px 0;
        border-top: 1px solid#E3E8EF;
        width: fit-content;
        margin: 0 auto;
    }

    .livereport .pagination-nav {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .livereport .nav-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border: none;
        background: white;
        cursor: pointer;
        border-radius: 4px;
        font-size: 14px;
        color: #0B1215;
    }

    .livereport .page-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border: 1px solid #EEF4F6;
        background: white;
        cursor: pointer;
        border-radius: 6px;
        transition: all 0.2s ease;
        font-family: Inter;
        font-size: 14px;
        line-height: 20px;
        color: #0B1215;
        text-decoration: none;
    }

        .livereport .page-btn:hover:not(.active) {
            background-color: #f0f0f0;
            border-color: #bbb;
        }

        .livereport .page-btn.active {
            background-color: var(--color-primary);
            border-color: var(--color-primary);
            color: white;
        }

    .livereport .ellipsis {
        padding: 0 8px;
        color: #666;
        font-size: 14px;
    }

    .livereport .render-box {
        margin-bottom: 24px;
    }

@media screen and (max-width: 996px) {
    .livereport {
        width: 100%;
        min-width: initial;
    }
}

@media screen and (max-width: 768px) {
    .livereport {
        padding: 16px 0;
    }

        .livereport .link-box .social-wrap .box {
            display: none;
        }

            .livereport .link-box .social-wrap .box.on-mobile {
                display: flex;
                align-items: center;
                justify-content: center;
            }

                .livereport .link-box .social-wrap .box.on-mobile > * {
                    width: 16px;
                    height: 16px;
                    border: none;
                    outline: none;
                    background-color: transparent;
                }

        .livereport .report-wrap .content .title {
            font-size: 18px;
        }

        .livereport .report-wrap {
            margin-bottom: 24px;
        }
}