.web-4 {
    font-family: Roboto, sans-serif;
}

.web-4-header {
    background: linear-gradient(219.84deg, #474747 4.14%, #222222 44.22%);

}

.web-4 .web-menu a {
    color: white;
}

.post-page-home {
    color: white;
}

.post-page-home-left {
    width: 48% !important;
}

.post-page-home-right {
    width: 48% !important;
}

.post-page-home--title {
    font-family: Roboto, serif;
    font-size: 64px;
    font-weight: 500;
    line-height: 75px;
    text-align: left;
}

.post-page-home--des {
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 27px;
    text-align: left;
    color: #C4C4C4;
}

.web-4-btn {
    box-shadow: 0 10px 15px 0 #01739933;
    background: linear-gradient(97.65deg, #60BBEE 0.33%, #0A72AD 93.35%);
    color: white;
    padding: 1rem 1.5rem;
    font-family: Roboto, serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 18.75px;
    text-align: center;
}

.post-page-home-right .pt {
    padding-top: 120%;
}

.web-4-statistics {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;

}

.web-4-statistics--detail {
    font-family: "Poppins", sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 54px;
    text-align: left;

}

.web-4-statistics--detail span {
    font-family: "Poppins", sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 54px;

    color: #2387C0;

}

.web-4-statistics--name {
    font-family: Roboto, serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 21.09px;

    color: #C4C4C4;
}

.web-4-title {
    font-family: "Poppins", sans-serif;
    font-size: 46px;
    font-weight: 600;
    line-height: 69px;
    text-align: left;
    color: #242527;
}

.web-4-member_ass {
    background-color: rgba(246, 246, 246, 0.8);

}

.web-4 .header-mb #menuToggle span {
    background: white;
}

.web-4-text {
    font-family: Roboto, serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 45px;
    text-align: left;
    color: rgba(119, 119, 119, 1);
}
.web-4-head{
    width: 90px;
    height: 9px;
    top: 2613px;
    left: 92px;
    gap: 0px;
    background: linear-gradient(90deg, #60BBEE -2.22%, #2387C0 67.22%);
}
.web-4-theme .web-4-credo .title{
    font-size: 24px;
    font-weight: 600;
    font-family: "Poppins", sans-serif;
    text-transform: capitalize;
    margin-top: 20px;
}
.text-theme{
    font-size: 18px;
    font-weight: 500;
    font-family: "Roboto", sans-serif;
    text-transform: capitalize;
    margin-top: 10px;
    line-height: 35px;
    color: #C4C4C4;
}
.web-4-theme .about-us{
    margin-top: 50px;
}
.web-4-theme .box-left{
    padding-right: 50px
}
.web-4-theme .title-about-us{
    color: #242527;
    font-size: 46px;
    font-weight: 600;
    line-height: 69px;
    font-family: "Poppins", sans-serif;
    max-width: 70%;
}
.web-4-theme .button-theme{
    background-color: #0A72AD;
    padding: 20px 40px;
    box-shadow: 0px 10px 15px 0px #01739933;
    font-size: 16px;
    color: #FFFFFF;
    width: fit-content;
    margin-top: 20px;
}
.web-4-theme .data-article{
    width: 100%;
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:10px
}
.web-4-theme .title-articles{
    color: #242527;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    font-family: "Poppins", sans-serif;
    margin-top: 20px;
}
.web-4-theme .content-articles{
    font-size: 18px;
    font-weight: 400 !important;
    line-height: 35px;
    font-family: "Poppins", sans-serif;
    margin-top: 20px;
    color: #C4C4C4;
}
.text-1-line{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.text-2-line{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.text-3-line{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.text-4-line{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}
.web-4-theme .data-vote{
    background: linear-gradient(219.84deg, #474747 4.14%, #222222 44.22%);
    /*padding: 60px 40px;*/
    margin-top: 50px;
}
.web-4-theme h5{
    color: #FFFFFF;
    font-size: 48px;
    font-weight: 700;
    font-family: "Poppins", sans-serif;
}
.web-4-theme .text-vote{
    color: #FFFFFF;
    font-size: 22px;
    font-weight: 500;
    font-family: "Inter", sans-serif;
}
.web-4-theme .text-item-vote{
    color: #51AEFB;
    font-size: 18px;
    font-weight: 500;
    font-family: "Inter", sans-serif;
}
.web-4-theme .item-vote{
    margin-top: 30px;
}
.web-4-theme .item-colum{
    width: calc(50% - 10px);
}
.web-4-theme .item-video{
    width: 100%;
}
.web-4-theme {
    padding-bottom: 60px;
}
.web-4-item-credo{
    flex:0 0 25%;
}
.web-4-video {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.web-4-vote{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:30px;
}

@media only screen and (min-device-width: 280px) and (max-device-width: 768px) {
    .post-page-home{
        flex-direction: column;
    }
    .post-page-home-right {
        margin-top: 1rem;
        width: 100% !important;
    }
    .web-4-title {
        font-size: 35px;
        line-height: 40px;
        text-align: center;
    }
    .web-4-item-credo {
        flex: 0 0 60%;
    }
    .web-4-center {
        flex-direction: column;
    }
    .web-4-center .w-50{
        width: 100% !important;
    }
    .web-4-theme .title-about-us {
        color: #242527;
        font-size: 35px;
        line-height: 40px;
        max-width: 100%;

    }
    .nav-active{
        overflow-x: auto;
    }
    .web-4-theme .data-article{
        width: 100%;
        margin-top: 20px;
        display: grid;
        grid-template-columns:1fr;
        gap:10px
    }

    .web-4-video {
        overflow-x: auto;
        grid-template-columns: 70% 70% 70% 70%;

    }
    .web-4-theme .item-video{
        width:100% !important;
    }
    .post-page-home-left {
        width: 100% !important;
    }
    .post-page-home--title {
        font-size: 34px;
        line-height: 40px;
    }
    .web-4-statistics--detail {
        font-size: 28px;
        line-height: 32px;
    }
    .web-4-theme .data-vote {
        /*padding: 20px 15px;*/
        margin-top: 50px;
    }
    .web-4-theme .button-theme {
        padding: 10px 15px;
    }
    .web-4-vote{
        grid-template-columns: 1fr;
        gap:10px;
    }
    .web-4-theme .item-vote {
         margin-top: 0;
    }
}