@media (min-width: 1920px) {
    .area-chart {
        margin: 15px 128px 0px 128px;
    }

    .title-chart {
        font-size: 44px;
    }

    .content-chart {
        margin-top: 15px;
    }

    .area-top-chart {
        gap: 15px;
    }

    .tab-chart {
        height: 60px;
    }

    .text-tab {
        font-size: 30px;
    }

    thead tr {
        font-size: 32px;
    }

    tbody tr {
        font-size: 30px;
        height: 60px;
    }

    .btn-play-chart span {
        font-size: 28px;
    }

    .btn-see-more {
        font-size: 20px;
    }

    .area-streaming-news {
        margin: 0px 128px 0px 128px;
    }

    .area-content-SN {
        margin-bottom: 60px;
    }

    /* content kiri */
    .area-content-SN-kiri {
        width: 100%;
    }

    .title-SN-kiri {
        font-size: 34px;
    }

    .box-streaming {
        height: 280px;
    }

    .btn-play-streaming {
        height: 50px;
        width: 50px;
    }

    /* -------------- */

    /* content kanan */
    .area-content-SN-kanan {
        width: 100%;
    }

    .title-top-news {
        font-size: 34px;
    }

    .content-top-news {
        gap: 20px;
    }

    .content-news{
        gap: 20px;
    }

    .box-news {
        height: fit-content;
        /* padding: 15px; */
    }

    .tag-top-info {
        font-size: 22px;
    }

    .desk-top-info {
        font-size: 20px;
    }

    .date-top-info {
        font-size: 18px;
    }
    /*--------------- */
    /* ------------------ */
    /* ------------------ */
}

@media (max-width: 1440px) {
    /* Gaya untuk desktop besar */
}

@media (max-width: 1366px) {
    /* Gaya untuk laptop widescreen */
}

@media (max-width: 1280px) {
    /* Gaya untuk laptop standar */
}

@media (min-width: 1024px) and (max-width: 1280px) {
    .area-chart {
        margin: 15px 32px 0px 32px;
    }

    .title-chart {
        font-size: 36px;
    }

    .content-chart {
        margin-top: 15px;
    }

    .area-top-chart {
        gap: 15px;
    }

    .tab-chart {
        height: 40px;
    }

    .text-tab {
        font-size: 20px;
    }

    thead tr {
        font-size: 26px;
    }

    tbody tr {
        font-size: 24px;
        height: 60px;
    }

    .col-no{
        font-size: 14px;
    }

    .col-name{
        font-size: 14px;
    }

    .btn-play-chart span {
        font-size: 26px;
    }


    .btn-see-more , .btn-see-less {
        font-size: 14px;
        padding: 8px 16px;
    }

    .area-streaming-news {
        margin: 0px 32px 0px 32px;
    }

    .area-content-SN {
        margin-bottom: 30px;
    }

    /* content kiri */
    .area-content-SN-kiri {
        width: 100%;
    }

    .title-SN-kiri {
        font-size: 34px;
    }

    .box-streaming {
        height: 195px;
    }

    .text-streaming {
        font-size: 14px;
        margin: 5px 10px;
    }

    .btn-play-streaming {
        height: 45px;
        width: 45px;
    }

    /* -------------- */

    /* content kanan */
    .area-content-SN-kanan {
        width: 100%;
    }

    .title-news {
        font-size: 34px;
    }

    .content-news {
        gap: 14px;
    }

    .image-top-info{
        height: 58%;
    }

    .box-news {
        height: fit-content;
    }

    .tag-top-info {
        font-size: 14px;
    }

    .desk-top-info {
        font-size: 12px;
    }

    .date-top-info {
        font-size: 10px;
    }

    .more-news{
        font-size: 16px;
    }

    .more-news i {
        font-size: 20px;
    }
    /*--------------- */
    /* ------------------ */
    /* ------------------ */
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
    .area-chart {
        margin: 10px 20px 0px 20px;
    }

    .title-chart {
        font-size: 34px;
    }

    .content-chart {
        margin-top: 10px;
    }

    .area-top-chart {
        gap: 10px;
    }

    .tab-chart {
        height: 30px;
    }

    .text-tab {
        font-size: 18px;
    }

    thead tr {
        font-size: 22px;
    }

    tbody tr {
        font-size: 18px;
        height: 45px;
    }

    .col-no{
        font-size: 12px;
    }

    .col-name{
        font-size: 12px;
    }

    .btn-play-chart span{
        font-size: 22px;
    }

    .btn-see-more , .btn-see-less{
        font-size: 14px;
    }

    /* page chart 2 */
    .area-streaming-news {
        margin: 0px 20px 0px 20px;
    }

    .area-content-SN {
        margin-bottom: 30px;
    }

    /* content kiri */
    .area-content-SN-kiri {
        width: 100%;
    }

    .title-SN-kiri {
        font-size: 30px;
    }

    .box-streaming {
        height: 160px;
    }

    .text-streaming {
        font-size: 12px;
        margin: 5px 10px;
    }

    /* -------------- */

    /* content kanan */
    .area-content-SN-kanan {
        width: 100%;
    }

    .title-news {
        font-size: 30px;
    }

    .content-news {
        gap: 10px;
    }

    .box-news {
        height: fit-content;
        /* padding: 8px; */
    }

    .area-image{
        border-radius: 10px;
    }

    .tag-top-info {
        font-size: 14px;
    }

    .desk-top-info {
        font-size: 12px;
    }

    .date-top-info {
        font-size: 10px;
    }

    .more-news{
        font-size: 14px;
    }

    .more-news i{
        font-size: 18px;
    }

    /*--------------- */
    /* ------------------ */
    /* ------------------ */
}

@media (max-width: 600px) {
    /* Gaya untuk tablet kecil atau phablet */
}

/* Mobile Devices */
@media (max-width: 480px) {
    .area-chart {
        margin: 5px 8px 0px 8px;
    }

    .title-chart {
        font-size: 30px;
    }

    .content-chart {
        margin-top: 10px;
    }

    .area-top-chart {
        gap: 10px;
        flex-wrap: wrap;
        /* flex: 1 2 calc(50% - 10px); */
    }

    .tab-chart {
        width: calc(50% - 12px);
        height: 30px;
    }

    .text-tab {
        font-size: 16px;
    }

    thead tr {
        font-size: 22px;
    }

    tbody tr {
        font-size: 18px;
        height: 40px;
    }

    .row-chart{
        height: 45px;
    }

    .col-no{
        width: 10%;
        font-size: 10px;
    }

    .col-name{
        width: 80%;
        font-size: 10px;
    }

    .col-btn-play{
        width: 10%;
    }

    .btn-see-more , .btn-see-less {
        font-size: 10px;
        padding: 6px 12px;
    }

    /* page chart 2 */
    .area-streaming-news {
        margin: 0px 8px 0px 8px;
    }

    .area-content-SN {
        margin-bottom: 30px;
        flex-direction: column;
    }

    /* content kiri */
    .area-content-SN-kiri {
        width: 100%;
    }

    .title-SN-kiri {
        font-size: 28px;
    }

    .box-streaming {
        height: 100px;
    }

    .text-streaming {
        font-size: 10px;
        margin: 5px 10px;
    }

    .btn-play-streaming {
        height: 35px;
        width: 35px;
    }

    .btn-play-streaming span {
        font-size: 20px;
    }

    /* -------------- */

    /* content kanan */
    .area-content-SN-kanan {
        width: 100%;
    }

    .title-news {
        font-size: 28px;
    }

    .content-news {
        gap: 10px;
        flex-wrap: wrap;
    }

    .link-box-news{
        width: calc(50% - 5px);
    }

    .box-news {
        height: fit-content;
        width: 100%;
    }

    .image-top-info{
        height: 108px;
    }

    .tag-top-info {
        font-size: 14px;
    }

    .desk-top-info {
        font-size: 12px;
    }

    .date-top-info {
        font-size: 10px;
    }
    /*--------------- */

    /* ------------------ */
    /* ------------------ */
}

@media (max-width: 390px) {
    .area-chart {
        margin: 5px 8px 0px 8px;
    }

    .title-chart {
        font-size: 30px;
    }

    .content-chart {
        margin-top: 10px;
    }

    .area-top-chart {
        gap: 10px;
        flex-wrap: wrap;
        flex: 0;
    }

    .tab-chart {
        width: calc(50% - 12px);
        height: 30px;
    }

    .text-tab {
        font-size: 15px;
    }

    thead tr {
        font-size: 22px;
    }

    tbody tr {
        font-size: 18px;
        height: 40px;
    }

    .row-chart{
        height: 45px;
    }

    .col-no{
        width: 10%;
        font-size: 10px;
    }

    .col-name{
        width: 80%;
        font-size: 10px;
    }

    .col-btn-play{
        width: 10%;
    }

    .btn-see-more , .btn-see-less {
        font-size: 10px;
        padding: 6px 12px;
    }

    /* page chart 2 */
    .area-streaming-news {
        margin: 0px 8px 0px 8px;
    }

    .area-content-SN {
        margin-bottom: 30px;
        flex-direction: column;
    }

    /* content kiri */
    .area-content-SN-kiri {
        width: 100%;
    }

    .title-SN-kiri {
        font-size: 28px;
    }

    .box-streaming {
        height: 100px;
    }

    .text-streaming {
        font-size: 10px;
        margin: 5px 10px;
    }

    .btn-play-streaming {
        height: 35px;
        width: 35px;
    }

    .btn-play-streaming span {
        font-size: 20px;
    }

    /* -------------- */

    /* content kanan */
    .area-content-SN-kanan {
        width: 100%;
    }

    .title-news {
        font-size: 28px;
    }

    .content-news {
        gap: 10px;
        flex-wrap: wrap;
    }

    .link-box-news{
        width: calc(50% - 5px);
    }

    .box-news {
        height: fit-content;
        width: 100%;
    }

    .image-top-info{
        height: 98px;
    }

    .tag-top-info {
        font-size: 14px;
    }

    .desk-top-info {
        font-size: 12px;
    }

    .date-top-info {
        font-size: 10px;
    }
    /*--------------- */

    /* ------------------ */
    /* ------------------ */
}

@media (max-width: 375px) {
    .area-chart {
        margin: 5px 8px 0px 8px;
    }

    .title-chart {
        font-size: 30px;
    }

    .content-chart {
        margin-top: 10px;
    }

    .area-top-chart {
        gap: 10px;
        flex-wrap: wrap;
        /* flex: 1 2 calc(50% - 10px); */
    }

    .tab-chart {
        width: calc(50% - 12px);
        height: 30px;
        /* border: 2px #ffdb00 solid; */
    }

    .text-tab {
        font-size: 14px;
    }

    thead tr {
        font-size: 22px;
    }

    tbody tr {
        font-size: 18px;
        height: 40px;
    }

    .btn-see-more , .btn-see-less {
        font-size: 10px;
        padding: 6px 12px;
    }

    /* page chart 2 */
    .area-streaming-news {
        margin: 0px 8px 0px 8px;
    }

    .area-content-SN {
        margin-bottom: 30px;
        flex-direction: column;
    }

    /* content kiri */
    .area-content-SN-kiri {
        width: 100%;
    }

    .title-SN-kiri {
        font-size: 28px;
    }

    .box-streaming {
        height: 100px;
    }

    .text-streaming {
        font-size: 10px;
        margin: 5px 10px;
    }

    .btn-play-streaming {
        height: 35px;
        width: 35px;
    }

    .btn-play-streaming span {
        font-size: 20px;
    }

    /* -------------- */

    /* content kanan */
    .area-content-SN-kanan {
        width: 100%;
    }

    .title-news {
        font-size: 28px;
    }

    .content-news {
        gap: 10px;
    }

    .box-news {
        /* height: 60px; */
        gap: 6px;
    }

    .image-top-info{
        height: 98px;
    }


    .tag-top-info {
        font-size: 14px;
    }

    .desk-top-info {
        font-size: 12px;
    }

    .date-top-info {
        font-size: 10px;
    }
    /*--------------- */
    /* ------------------ */
    /* ------------------ */
}

@media (max-width: 344px) {
    .area-chart {
        margin: 5px 8px 0px 8px;
    }

    .title-chart {
        font-size: 30px;
    }

    .content-chart {
        margin-top: 6px;
    }

    .area-top-chart {
        gap: 10px;
        flex-wrap: wrap;
        /* flex: 1 2 calc(50% - 10px); */
    }

    .tab-chart {
        width: 100%;
        height: 30px;
        /* border: 2px #ffdb00 solid; */
    }

    .text-tab {
        font-size: 18px;
    }

    .chart{
        gap: 4px;
    }

    .row-chart{
        height: 35px;
    }

    .col-no{
        font-size: 8px;
    }

    .col-name{
        font-size: 8px;
    }

    .btn-play-chart span{
        font-size: 16px;
    }

    .btn-see-more , .btn-see-less {
        font-size: 10px;
        margin: 0px auto;
        padding: 6px 12px;
    }
    /* page chart 2 */
    .area-streaming-news {
        margin: 0px 8px 0px 8px;
    }

    .area-content-SN {
        margin-bottom: 30px;
        flex-direction: column;
    }

    .content-SN-kiri {
        margin-top: 5px;
    }

    /* content kiri */
    .area-content-SN-kiri {
        width: 100%;
    }

    .title-SN-kiri {
        font-size: 28px;
    }

    .box-streaming {
        height: 100px;
    }

    .text-streaming {
        font-size: 10px;
        margin: 5px 10px;
    }

    .btn-play-streaming {
        height: 35px;
        width: 35px;
    }

    .btn-play-streaming span {
        font-size: 20px;
    }

    /* -------------- */

    /* content kanan */
    .area-content-SN-kanan {
        width: 100%;
    }

    .title-news {
        font-size: 26px;
    }

    .content-news {
        gap: 10px;
        margin-top: 6px;
    }

    /* .link-box-news{
        width: calc();
    } */

    .box-news {
        height: fit-content;
    }

    .image-top-info{
        height: 98px;
    }

    /* .area-image {
        width: 40%;
    } */

    .tag-top-info {
        font-size: 14px;
    }

    .desk-top-info {
        font-size: 12px;
    }

    .date-top-info {
        font-size: 10px;
    }
    /*--------------- */
    /* ------------------ */
    /* ------------------ */
}
@media (max-width: 320px) {
    .area-chart {
        margin: 5px 8px 0px 8px;
    }

    .title-chart {
        font-size: 30px;
    }

    .content-chart {
        margin-top: 6px;
    }

    .area-top-chart {
        gap: 10px;
        flex-wrap: wrap;
        /* flex: 1 2 calc(50% - 10px); */
    }

    .tab-chart {
        width: 100%;
        height: 30px;
        /* border: 2px #ffdb00 solid; */
    }

    .text-tab {
        font-size: 16px;
    }

    .chart{
        gap: 4px;
    }

    .row-chart{
        height: 35px;
    }

    .col-no{
        font-size: 8px;
    }

    .col-name{
        font-size: 8px;
    }

    .btn-play-chart span{
        font-size: 16px;
    }

    .btn-see-more , .btn-see-less {
        font-size: 10px;
        margin: 0px auto;
        padding: 6px 12px;
    }
    /* page chart 2 */
    .area-streaming-news {
        margin: 0px 8px 0px 8px;
    }

    .area-content-SN {
        margin-bottom: 30px;
        flex-direction: column;
    }

    .content-SN-kiri {
        margin-top: 5px;
    }

    /* content kiri */
    .area-content-SN-kiri {
        width: 100%;
    }

    .title-SN-kiri {
        font-size: 28px;
    }

    .box-streaming {
        height: 100px;
    }

    .text-streaming {
        font-size: 10px;
        margin: 5px 10px;
    }

    .btn-play-streaming {
        height: 35px;
        width: 35px;
    }

    .btn-play-streaming span {
        font-size: 20px;
    }

    /* -------------- */

    /* content kanan */
    .area-content-SN-kanan {
        width: 100%;
    }

    .title-news {
        font-size: 26px;
    }

    .content-news {
        gap: 10px;
        margin-top: 6px;
    }

    /* .link-box-news{
        width: calc();
    } */

    .box-news {
        height: fit-content;
    }

    /* .area-image {
        width: 40%;
    } */

    .image-top-info{
        height: 98px;
    }

    .tag-top-info {
        font-size: 14px;
    }

    .desk-top-info {
        font-size: 12px;
    }

    .date-top-info {
        font-size: 10px;
    }
    /*--------------- */
    /* ------------------ */
    /* ------------------ */
}