.UIHotNewsZone{
    margin: 20px 0 0 0;
}
.UIHotNewsZone .item-main h2.news-title {
   //styleName: Mic Style weband Mobile_Hiep/Merriweather_20px;
font-family: Merriweather;
font-size: 20px;
font-weight: 700;
line-height: 28px;
text-align: left;
color: #0A2458;


}
.UIHotNewsZone .second-news img {
    height: 160px;
    border: 1px solid  #eeeeee;
    object-fit: cover;
}
.UIHotNewsZone  .Title {
    display: none;
}
.UIHotNewsZone  p.news-sapo {
font-family: Roboto;
font-size: 15px;
font-weight: 400;
line-height: 21px;
text-align: left;
color: #0A2458;

overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 4; /* number of lines to show */
           line-clamp: 4; 
   -webkit-box-orient: vertical;
}
.UIHotNewsZone  .item-main {
    display: flex;
    background: #EEF2F8;
}
.UIHotNewsZone .item-main .img-news {
    width: 480px;
}
.UIHotNewsZone .item-main .img-news a img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: fill;
    background: #ffffff;
}
.UIHotNewsZone .item-main .news-info {
    width: calc(100% - 480px);
    /* grid-area: second; */
    /* padding: 20px 20px 20px 0; */
    padding: 20px 30px;
}
.UIHotNewsZone img {
    width: 100%;
    /* border: 1px solid #eeeeee; */
}
.UIHotNewsZone  span.time {
    font-size: 14px;
    /* min-width: 175px; */
    font-family: Inter;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    color: #454545;
    display: none;
}
.UIHotNewsZone .second-news h2.news-title {
   //styleName: Mic Style weband Mobile_Hiep/Merriweather_14px;
font-family: "Merriweather";
font-size: 15px;
font-weight: 700;
line-height: 23px;
text-align: left;
margin-top: 10px;
    color: #0A2458;
overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 3; /* number of lines to show */
           line-clamp: 3; 
   -webkit-box-orient: vertical;
}
.UIHotNewsZone .second-news span.time, .UIHotNewsZone .second-news p.news-sapo {
        display: none;
}
.UIHotNewsZone .second-news {
    display: grid;
    grid-column-gap: 20px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 20px;
    min-height: 245px;
}
@media only screen and (max-width: 1024px){
       .UIHotNewsZone p.news-sapo {
            font-family: Roboto;
            font-size: 15px;
            font-weight: 400;
            line-height: 22px;
            text-align: left;
            margin-bottom: 0;
            margin-top: 0;
        }
     .UIHotNewsZone  .second-news .news-item {
            margin: 16px;
            display: flex;
            flex-direction: column-reverse;
        }
       .UIHotNewsZone .item-main {
            grid-template-columns: 1fr; 
            display: block !important;
        }
       .UIHotNewsZone .second-news .img-news {
            display: flex;
            gap: 10px;
        }
        .UIHotNewsZone .second-news h2.news-title {
            color: #031739;
            margin-top: 6px;
            font-family: Merriweather;
            font-size: 20px;
            font-weight: 700;
            line-height: 28px;
            text-align: left;
        }
        .UIHotNewsZone .second-news .img-news a {
            width: 40%;
            display: block;
        }
        .UIHotNewsZone .item-main .news-info {
            padding: 16px;
        }
        .UIHotNewsZone .item-main h2.news-title {
            font-family: Merriweather;
            font-size: 22px;
            font-weight: 700;
            line-height: 30px;
            text-align: left;
        }
       .UIHotNewsZone .second-news p.news-sapo.hidden {
            display: inline;
            width: calc(60% - 10px);
            margin-top: 0;
            font-family: Roboto;
            font-size: 15px;
            font-weight: 400;
            line-height: 22px;
            text-align: left;
            color: #62748D;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .UIHotNewsZone span.time{
                display: none;
        }
       .UIHotNewsZone .second-news {
            display: block !important;
            background: #F9F9F9;
            margin-top: 0;
            padding-bottom: 6px;
        }
        .UIHotNewsZone .second-news .news-item:first-child {
            margin-top: 0;
            padding-top: 16px;
        }
}

@media only screen and (max-width: 768px){
    .UIHotNewsZone{
        margin: 0;
        padding: 0 16px;
        width: 100vw;
    }
    .UIHotNewsZone .item-main{
        background: #ffffff;
        border-bottom: 1px solid #EEEEEE;
    }
    .UIHotNewsZone .second-news{
        background: #ffffff;
        padding: 0;
        margin: 0;
    }
    .UIHotNewsZone .item-main  .img-news{
        width: 100vw;
        margin-left: -16px;
    }
    .UIHotNewsZone .item-main  .img-news  a img{
        aspect-ratio: 16 / 10;
        height: calc(100vw / 16 * 10);
    }
    .UIHotNewsZone .item-main .news-info{
        width: 100%;
        padding: 16px 0;
    }
    .UIHotNewsZone .item-main h2.news-title{
        color: #031739;
        font-family: Merriweather;
        font-size: 22px;
        font-weight: 700;
        line-height: 30px;
        text-align: left;
    }
    .UIHotNewsZone p.news-sapo{
        -webkit-line-clamp: 3;
        line-clamp: 3;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 400;
        line-height: 22px;
        text-align: left;
        color: #3B4E68;

    }
    .UIHotNewsZone .second-news .news-item:first-child{
        padding: 16px 0;
    }
    .UIHotNewsZone .second-news .news-item{
        margin: 0;
        padding: 16px 0;
        border-bottom:  1px solid #EEEEEE;
        display: flex;
        flex-direction: column;
    }
      .UIHotNewsZone .second-news p.news-sapo.hidden{
          display: none;
      }
    .UIHotNewsZone .second-news .img-news a{
        width: 100%;
        /* flex: 1; */
    }
     .UIHotNewsZone .second-news .img-news a img{
         aspect-ratio: 16/ 10;
         max-height: unset;
         height: calc((100vw - 32px) / 16 * 10);
     }
    .UIHotNewsZone .second-news .news-item .news-info .news-sapo{
        display: block;
    }
    .UIHotNewsZone .second-news h2.news-title{
        //
        styleName: text/04;
        font-family: Merriweather;
        font-size: 20px;
        font-weight: 700;
        line-height: 28px;
        text-align: left;
        color: #212529;
    }
}
