.UIMultimedia_osdefault  div[id*='ListMultimedia'].SearchBox .search-title input {
        background: #C3D0E038;
        color: #60748B;
        float: left;
        height: 48px;
        display:block;
        width: 70%;
        margin: 0;
        padding: 0 10px;
        //styleName: Title/R-14;
        font-family: Merriweather;
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        text-align: left;
        border: 0;
        border-radius: 8px;
}
.UIMultimedia_osdefault  div[id*='ListMultimedia'] .SearchBox .search-title {
        width: 50%;
        height:48px;
        position: relative;
}
.UIMultimedia_osdefault  div[id*='ListMultimedia'] .SearchBox .search-title .ButtonSearch{
        position: absolute;
        z-index: 99;
        background: url(images/search.png) no-repeat center;
        background-size: contain;
        height: 15px; 
        width: 15px;
        right: calc(30% + 10px);
        top: 16px;
        content: '';
        display: inline-block;
}
.UIMultimedia_osdefault  div[id*='ListMultimedia'] .SearchBox .search-date {
        width: 50%;
        display: flex;
        justify-content: right;
}
.UIMultimedia_osdefault  div[id*='ListMultimedia'] .SearchBox .search-date>table>tbody>tr{
        display: flex;
        gap: 10px;
        align-items: center;
}
.UIMultimedia_osdefault  div[id*='ListMultimedia'] .SearchBox .search-date>table>tbody>tr>td.col1{
        display: none;
}
.UIMultimedia_osdefault  div[id*='ListMultimedia'] .SearchBox .search-date>table>tbody>tr>td{
        font-family: "Roboto";
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        text-align: left;
        color: #4E5762;
}
.UIMultimedia_osdefault  div[id*='ListMultimedia'] .SearchBox .search-date>table>tbody>tr>td.col2>input{
     width: 143px;
        height: 36px;
        padding: 9px 12px;
        border-radius: 8px ;
           border: 0;
        background: url(images/calendar.png) no-repeat right;
        background-position-x: 110px;
        background-color: #F2F5F8;
}
.UIMultimedia_osdefault  div[id*='ListMultimedia'] .SearchBox {
        display: flex;
        flex-direction: row;
        align-items: center;
}
.UIMultimedia_osdefault  div[id*='ListMultimedia'] .title{
        /* height: 36px; */
        box-sizing: content-box;
        padding-top: 10px;
        padding-bottom: 10px;
        text-align: left;
}
.UIMultimedia_osdefault  div[id*='ListMultimedia'] .title>a>span{
        //
        styleName: Mic Style weband Mobile_Hiep/Merriweather_24px;
        font-family: "Merriweather";
        font-size: 24px;
        font-weight: 700;
        line-height: 36px;
        text-align: left;
        position: relative;
        color: #000000;
}
.UIMultimedia_osdefault  div[id*='ListMultimedia'] .title>a>span:before{
        background-size: contain;
        width: 22px;
        height: 16px;
        content: '';
        display: inline-block;
        margin-right: 10px;
}
.UIMultimedia_osdefault  div[id*='ListMultimedia'] .title>a>span.video:before{
        background: url(images/video.png) no-repeat center;
}
.UIMultimedia_osdefault  div[id*='ListMultimedia'] .title>a>span.photo:before{
        background: url(images/photo.png) no-repeat center;
}
.UIMultimedia_osdefault  div[id*='ListMultimedia'] .title>a>span.infographic:before{
        background: url(images/infographics.png) no-repeat center;
}
.UIMultimedia_osdefault  div[id*='ListMultimedia'] .title>a>span.longform:before{
        background: url(images/longform.png) no-repeat center;
        height: 22px;
}
.UIMultimedia_osdefault  div[id*='ListMultimedia'] .title>a>span.media:before{
        background: url(images/media.png) no-repeat center;
}
.UIMultimedia_osdefault  div[id*='ListMultimedia']{
        border-bottom: 1px solid #E5E5E5;
        margin-bottom: 20px;
        padding-bottom: 20px;
}
.UIMultimedia_osdefault  div[id*='ListMultimedia'].MultimediaList{
        min-height: 220px;
}
.UIMultimedia_osdefault  div[id*='ListMultimedia']:has(span.infographic){
        padding-right: 15px;
        border-right: 1px solid #e5e5e5;
        margin-right: 15px;
        box-sizing: content-box;
        width: 420px;
}

.UIMultimedia_osdefault  div[id*='ListMultimedia'] .MultimediaContent {
       display: grid;
       list-style: outside none none;
       margin: auto;
       padding: 0;
       text-align: center;
       width: 100%;
       grid-template-columns: calc(50% + 16px) calc(25% - 40px) calc(25% - 40px);
       grid-gap: 20px 32px;
}
.UIMultimedia_osdefault .MultimediaContent .GridItem {
        width: 100%;
        box-sizing: border-box;
}
.UIMultimedia_osdefault .MultimediaContent .GridItem:first-child{
        width: 100%;
        border-radius: 20px;
        grid-row-start: 1;
        grid-row-end: 3;
        height: 100%;
        max-height: 680px;
}
.UIMultimedia_osdefault .MultimediaContent .GridItem:first-child .news-info {
        width: 100%;
        /* padding:10px; */
        display: flex;
        flex-direction: column;
        gap: 5px;
}
.UIMultimedia_osdefault .MultimediaContent .GridItem:first-child .news-info .news-title{
       font-family: Merriweather;
        font-size: 20px;
        font-weight: 700;
        line-height: 30px;
        text-align: left;
        color: #292929;

}
.UIMultimedia_osdefault .MultimediaContent .GridItem:first-child .news-info .news-title:after{
         content: "";
         background-image: unset;
         background-size: cover;
         background-repeat: no-repeat;
         width: 22px;
         height: 20px;
         display: inline-block;
         vertical-align: middle;
         background-position: 4px 3px;
         background-size: 18px 14px;
}
.UIMultimedia_osdefault .MultimediaContent .GridItem:first-child .news-info .news-sapo{
        //styleName: Sapo;
font-family: Roboto;
font-size: 14px;
font-weight: 400;
line-height: 22px;
text-align: left;
color: #62748D;
display: block;
          overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
           line-clamp: 2; 
   -webkit-box-orient: vertical;
        max-height: 44px;
}
.UIMultimedia_osdefault .MultimediaContent .GridItem:not(.GridItem:first-child) .news-info .news-title{
       //styleName: Website/Title 07;
font-family: Merriweather;
font-size: 14px;
font-weight: 700;
line-height: 20px;
text-align: left;
 color: #292929;

}
.UIMultimedia_osdefault .MultimediaContent .GridItem:not(.GridItem:first-child) .news-info .news-sapo{
        display: none;
}
.UIMultimedia_osdefault .MultimediaContent .GridItem:first-child .img-news{
        width: 100%;
        position: relative;
}
.UIMultimedia_osdefault .MultimediaContent .GridItem:first-child .img-news a{
}
.UIMultimedia_osdefault .MultimediaContent .GridItem:first-child .img-news img{
             width: 100%;
             height: 377px;
             gap: 0px;
             opacity: 0px;
             max-height: unset;
             object-fit: cover;
}
.UIMultimedia_osdefault .UIListMultimedia .GridItem .img-news {
    /* margin-bottom: 10px; */
    position: relative;
}
.UIMultimedia_osdefault .MultimediaContent .GridItem .img-news img {
        width: 100%;
        aspect-ratio: 16 / 10;
        /* border: 1px solid #eeeeee; */
        object-fit: contain;
        max-height: 180px;
}
.UIMultimedia_osdefault .MultimediaContent .GridItem .img-news .no-img{
        display: block;
        background: rgba(128, 128, 128, 1);
        width: 100%;
        aspect-ratio: 16 / 10;
        /* border: 1px solid #eeeeee; */
        object-fit: contain;
        max-height: 180px;
}
.UIMultimedia_osdefault .MultimediaContent .GridItem .img-news .no-img img{
        display: none;
}
.UIMultimedia_osdefault .MultimediaContent .GridItem .news-info {
        text-align: left;
        margin: 10px 0;
}


.UIMultimedia_osdefault  div[id*='ListMultimedia'].GridItem .img-news .Infographics::before {
        position: absolute;
        content: url('https://storage-vnportal.vnpt.vn/gov-hni/1/Logo/inforgraphic.png');
        display: block;
        bottom: 0;
        left: 10px;
}
.UIMultimedia_osdefault  div[id*='ListMultimedia'] .GridItem .img-news .Video::before {
        position: absolute;
        content: url('https://storage-vnportal.vnpt.vn/gov-hni/1/Logo/video-308843.png');
        display: block;
        bottom: 5px;
        left: 10px;
}
.UIMultimedia_osdefault  div[id*='ListMultimedia'] .GridItem .img-news .Longform::before {
        position: absolute;
        content: url('https://storage-vnportal.vnpt.vn/gov-hni/1/Logo/longform.png');
        display: block;
        left: 10px;
        bottom: 0;
}
.UIMultimedia_osdefault  div[id*='ListMultimedia'] .GridItem .img-news .Photo::before {
    position: absolute;
    content: url('https://storage-vnportal.vnpt.vn/gov-hni/1/Logo/photo.png');
    display: block;
    left: 10px;
    bottom: 0;
}
.UIMultimedia_osdefault  div[id*='ListMultimedia']  .view-more{
        width: 100%;
        margin: 20px 0 10px 0;
}
.UIMultimedia_osdefault  div[id*='ListMultimedia']  .view-more .view-more-btn{
        width: 100%;
        padding: 8px;
        text-align: center;
        border: 1px solid #EEEEEE;
        background: #F9F9F9;
        cursor: pointer;
        font-family: Roboto;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        color: #7D92AE;
        display: block;

}


@media only screen and (max-width: 768px){
        .UIMultimedia_osdefault div[id*='ListMultimedia'] .MultimediaContent{
                width: 100%;
                /* padding: var(--padding-res); */
                display: flex;
                flex-direction: column;
        }
        .UIMultimedia_osdefault .MultimediaContent .GridItem:not(.GridItem:first-child) {
                width: 100%;
                border-bottom: 1px solid #EEEEEE;
                padding-bottom: 20px;
                display: flex;
                flex-direction: row-reverse;
                /* position: relative; */
        }
        .UIMultimedia_osdefault .MultimediaContent .GridItem:not(.GridItem:first-child) .img-news{
                position: relative;
                
        }
         .UIMultimedia_osdefault .MultimediaContent .GridItem:not(.GridItem:first-child) .news-info{
                 flex: 1;
         }
        .UIMultimedia_osdefault .MultimediaContent .GridItem .news-info span{
                font-family: Merriweather;
                font-size: 20px;
                font-weight: 700;
                line-height: 28px;
                text-align: left;
                color: #212529;

        }
        .UIMultimedia_osdefault .MultimediaContent .GridItem:not(.GridItem:first-child) .news-info .news-title{
                font-family: Merriweather;
                font-size: 14px;
                font-weight: 700;
                line-height: 22px;
                text-align: left;
                color: #182940;

        }
        .UIMultimedia_osdefault .MultimediaContent .GridItem:not(.GridItem:first-child) .img-news img {
                max-height: unset;
                height: 90px;
                width: 144px;
                object-fit: cover;
        }
      
        .UIMultimedia_osdefault  div[id*='ListMultimedia']{
                padding: var(--padding-res);
                border: 0;
                width: 100vw !important;
                margin: 0;
                box-sizing: border-box !important;
        }
        .UIMultimedia_osdefault  div[id*='ListMultimedia'] .title{
                border-bottom:1px solid #DDDDDD;

        }
        .UIMultimedia_osdefault  div[id*='ListMultimedia'] .title>a>span{
                font-family: Merriweather;
                font-family: Merriweather;
                font-size: 18px;
                font-weight: 700;
                line-height: 26px;
                text-align: left;
                color: #2A58A0;
        }
       
         .UIMultimedia_osdefault  div[id*='ListMultimedia'] .SearchBox{
                 flex-wrap: wrap;
                 gap: 10px;
                 
         }
         .UIMultimedia_osdefault  div[id*='ListMultimedia'] .SearchBox .search-title,.UIMultimedia_osdefault .UIListMultimedia .SearchBox .search-date{
                 width: 100%;
                 justify-content: space-between;
         }
        .UIMultimedia_osdefault  div[id*='ListMultimedia'] .SearchBox .search-title input{
                width: 100%;
        }
        .UIMultimedia_osdefault  div[id*='ListMultimedia'] .SearchBox .search-title .ButtonSearch{
                right: 15px;
        }
         .UIMultimedia_osdefault  div[id*='ListMultimedia'] .SearchBox .search-date>table>tbody>tr{
                 max-width: 100%;
         }
        .UIMultimedia_osdefault  div[id*='ListMultimedia'] .SearchBox .search-date>table>tbody>tr>td{
                font-size: 12px;
                white-space: nowrap;
        }
        .UIMultimedia_osdefault  div[id*='ListMultimedia'] .SearchBox .search-date>table>tbody>tr>td.col2{
                flex: 1;
        }
        .UIMultimedia_osdefault  div[id*='ListMultimedia'] .SearchBox .search-date>table>tbody>tr>td.col2>input{
                width: 100%; 
                background-position-x: 95%;
        }
        .UIMultimedia_osdefault .MultimediaContent .GridItem:first-child .img-news img{
                height: calc((100vw - 32px) / 16 * 10);
                object-fit: cover;
        }
        .UIMultimedia_osdefault .MultimediaContent .GridItem:first-child .news-info .news-title{
                //
                styleName: title mobile 2;
                font-family: Merriweather;
                font-size: 20px;
                font-weight: 700;
                line-height: 28px;
                text-align: left;
                color: #031739;
                display: block;
                width: 100%;
        }
        .UIMultimedia_osdefault .MultimediaContent .GridItem:first-child .news-info{
                flex-direction: column;
                gap: 10px;
        }
        .UIMultimedia_osdefault .MultimediaContent .GridItem:first-child .news-info .news-sapo{
                font-family: Roboto;
                font-size: 15px;
                font-weight: 400;
                line-height: 22px;
                text-align: left;
                color: #62748D;

        }
}