@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css');

.ArticleMedia  .ArticleMediaListControl {
        padding: 0;
        padding-bottom: 0;
        position: relative;
        margin-bottom: 0;
}
.ArticleMedia  .ArticleMediaListControl .navbar li {
        padding: 10px 20px;
}
.ArticleMedia  .ArticleMediaListControl .navbar li a {
        color: #1d2129 !important;
        font-size: 14px;
        padding: 0;
}
.ArticleMedia  .ArticleMediaListControl td.media-item img {
        width: 100%;
        height: 140px;
        object-fit: cover;
        border-radius: 5px;
}
.ArticleMedia  .ArticleMediaListControl td.media-item a{
        position: relative;
}
.ArticleMedia  .ArticleMediaListControl td.media-item a span{
        position: absolute;
        bottom: 0;
}
.ArticleMedia  .ArticleMediaListControl span.caption i {
        color: #ffc107;
        margin-right: 5px;
        font-size: 13px !important;
}
.ArticleMedia  .ArticleMediaListControl span.caption strong {
        font-size: 13px;
        color: #1d2129;
        font-weight: 600;
        text-align: left;
}
.ArticleMedia  .ArticleMediaListControl .media-grid > tbody {
        display: block;
        gap: 20px;
        flex-wrap: wrap;
}
.ArticleMedia  .ArticleMediaListControl .media-grid > tbody > tr {
        display: inline-block;
        width: 50%;
        vertical-align: top;
}
.ArticleMedia  .ArticleMediaListControl .media-grid {
        width: 100%;
        min-height: 300px;
}
.ArticleMedia  .ArticleMediaListControl tr.media-paging {
        display: block !important;
        width: unset !important;
        position: static;
        padding: 0;
        bottom: 0;
        right: 0;
        padding-bottom: 0;
        padding-right: 0;
}
.ArticleMedia .ArticleMediaListControl tr.media-paging table{
        margin: auto;
}
.ArticleMedia  .ArticleMediaListControl tr.media-paging tr > td > span,
.ArticleMedia  .ArticleMediaListControl tr.media-paging tr > td > a {
        width: 25px;
        height: 25px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        background: #dee2e6;
        border-radius: 5px;
        text-decoration: none;
}
.ArticleMedia  .ArticleMediaListControl tr.media-paging tr > td > span {
        background: #015f9e;
        color: #fff;
        font-weight: 600;
}
.ArticleMedia  .ArticleMediaListControl .media-grid > tbody > tr:nth-child(1) {
        position: static;
        right: 0;
        width: 100%;
        max-height: unset;
}
.ArticleMedia  .ArticleMediaListControl .media-list {
        position: relative;
        padding: 0;
}
.ArticleMedia  .ArticleMediaListControl .media-grid > tbody > tr > td {
        height: 100%;
        position: relative;
        width: 50%;
}
.ArticleMedia .ArticleMediaListControl .media-grid > tbody > tr:nth-child(1) span {
        display: inline-block;
        width: 100%;
        position: absolute;
        bottom: 0px;
}
.ArticleMedia  .ArticleMediaListControl .media-grid > tbody > tr:nth-child(1) .image img {
        height: 240px;
        border-radius: 5px;
}
.ArticleMedia  .ArticleMediaListControl span.media-tag {
        position: absolute;
        bottom: 1px;
        right: 1px;
        font-size: 10px;
        padding: 2px 5px;
        color: #fff;
        font-weight: 600;
        display: none !important;
}
.ArticleMedia .ArticleMediaListControl span.caption {
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        padding-bottom: 0;
        display: -webkit-box;
        color: #fff;
        text-align: left;
}
/*************/
.ArticleMedia .media-list h3 {
    font-size: 14px;
    color: #ffffff;
    font-weight: 500;
    text-align: left;
    line-height:1.5;
    padding: 0 10px;
}
.ArticleMedia .media-grid td.media-item img {
    height: 140px;
}
.ArticleMedia span.youtube h3 {
    /* height: 70px; */
}
.ArticleMedia {
    margin: 0 0 25px 0;
}
.ArticleMedia .ArticleMediaListControl .navbar {
    text-align: left;
    width: 100%;
    padding: 10px 0;
}
.ArticleMedia .ArticleMediaListControl .navbar a.navbar-brand {
         text-transform: uppercase;
         white-space: nowrap;
         font-size: 16px;
         font-family: 'Merriweather';
         color: #031739;
         font-weight: 700;
         text-decoration: none;
         display: inline-block;
         line-height: unset;
         background: url(images/dangicon.png) no-repeat top 1px left;
         padding: 0 0 0 50px;
         height: 25px;
}
/************CSS Ipad dọc*********/
@media only screen and (max-width: 820px){
	.ArticleMedia .ArticleMediaListControl .media-grid > tbody > tr {
            width: 100%;
    }
    .ArticleMedia .ArticleMediaListControl .media-grid > tbody > tr:nth-child(1) .image img {
        width: 100%;
        height: 50vw;
	}
    .ArticleMedia  .ArticleMediaListControl td.media-item img {
        width: 100%;
        height: 50vw;
	}
    .ArticleMedia  .ArticleMediaListControl .media-grid > tbody > tr > td {
        height: 50vw;
        position: relative;
        width: 100vw;
    }
}
/*****************************/
@media only screen and (max-width: 768px) {
        .ArticleMedia  .ArticleMediaListControl .media-list {
                padding: 0;
        }
        .ArticleMedia  .ArticleMediaListControl .navbar {
                max-width: 100%;
                overflow: auto;
                padding: 0;
        }
        .ArticleMedia  .navbar-collapse {
                display: inline-block!important;
                max-width: 100%;
                overflow: auto;
        }
        .ArticleMedia  .navbar-collapse ul {
                flex-direction: row !important;
        }
        .ArticleMedia  .ArticleMediaListControl {
                margin: 0 10px;
                background: none;
        }
        .ArticleMedia  .ArticleMediaListControl .media-grid {
                width: 100%;
        }
        .ArticleMedia  .ArticleMediaListControl .media-grid > tbody {
                flex-direction: column;
        }
        .ArticleMedia  .ArticleMediaListControl .media-grid > tbody > tr:nth-child(1) {
                position: static;
                width: 100%;
                height: auto !important;
                margin: 0;
                margin-top: 10px;
                margin-bottom: 10px;
                min-height: unset;
        }
        .ArticleMedia  .ArticleMediaListControl .media-grid > tbody > tr {
                width: 100% !important;
                margin: 0;
                margin-bottom: 10px;
        }
        .ArticleMedia  .ArticleMediaListControl td.media-item a {
                flex-direction: row;
        }
        .ArticleMedia  .ArticleMediaListControl span.caption {
                flex: 1;
                text-align: justify;
        }
        .ArticleMedia  .ArticleMediaListControl .image {
                width: 100%;
        }
       .ArticleMedia  .ArticleMediaListControl .thumbnail span {
            width: 65%;
        }
        .ArticleMedia  .ArticleMediaListControl .thumbnail div span {
            position: absolute;
            left: 0;
            background: none;
        }
        .ArticleMedia .ArticleMediaListControl td.media-item img{
                height: 50vw;
        }
        .ArticleMedia  .ArticleMediaListControl .media-grid > tbody > tr:nth-child(1) a {
                flex-direction: column;
        }
        .ArticleMedia  .ArticleMediaListControl .media-grid > tbody > tr:nth-child(1) .image {
                width: 100%;
        }
        .ArticleMedia  .ArticleMediaListControl tr.media-paging {
                position: static;
        }
        .ArticleMedia   .ArticleMediaListControl tr.media-paging tr {
                display: flex;
                justify-content: center;
                width: 100%;
        }
        .ArticleMedia  .ArticleMediaListControl tr.media-paging>td {
                display: flex !important;
                width: 100%;
                justify-content: center;
        }
        .ArticleMedia .ArticleMediaListControl .media-grid > tbody > tr:nth-child(1) .image img{
                height: 50vw;
                width: 100% !important;
        }
        .ArticleMedia .ArticleMediaListControl .media-grid > tbody > tr:nth-child(1) span.youtube {
            width: 100%;
        }
        span.youtube h3 {
            height: auto;
        }
}