.ArticleSlider:has(.SliderEachItem) {
        position: relative;
        width: 100%;
        margin: 0 auto;
        overflow: hidden;
        padding: 0;
        padding-right: 10px;
        border-radius: 0.75rem;
        box-shadow: var(--box-shadow);
        padding: var(--padding-box);
        border-radius: var(--rounded);
        border: var(--default-border);
        background: var(--color-white);
        margin-bottom: var(--margin-bottom);
}
.ArticleSlider > div.SliderEachItem {
        position: relative;
}
.ArticleSlider > div.SliderEachItem > div.Header {
        padding: 15px 0px;
        line-height: unset;
        margin-bottom: 10px;
        /* padding-top: 20px; */
        border-bottom: 1px solid;
        display: none;
}
.ArticleSlider > div.SliderEachItem > div.Header > span.Text {
        font-family: 'Merriweather';
        font-size: 18px;
        font-weight: 700;
        line-height: 40px;
        text-align: left;
        color: var(--color-primary);
        text-transform: uppercase;
        background-size: 20px;
        background-position-x: 5px;
        text-transform: uppercase;
        font-family: "UTM Time";
        font-size: 26px;
        font-style: normal;
        font-weight: 600;
        line-height: 18px;
        letter-spacing: 0em;
        text-align: left;
        color: #034494;
}
.ArticleSlider > div.SliderEachItem > div.Header > span.Text:hover {
}
.ArticleSlider > div.SliderEachItem > ul.ArticleContent {
        list-style: none;
        margin: 0;
        padding: 0;
        position: relative;
        height: 600px;
        max-height: unset !important;
}
.ArticleSlider > div.SliderEachItem > ul.ArticleContent > li.ArticleItem {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        display: none;
        opacity: 1;
        transition: opacity 0.5s ease;
        z-index: 10;
        height: 100%;
        color: var(--color-black);
}
.ArticleSlider > div.SliderEachItem > ul.ArticleContent > li.ArticleItem.active {
        display: block;
        opacity: 1;
        position: relative;
}
.ArticleSlider
> div.SliderEachItem
> ul.ArticleContent
> li.ArticleItem
> div.ItemContent {
        padding: 10px 0;
        background: transparent;
        position: unset;
        bottom: 0;
        width: 100%;
        z-index: 1;
        overflow: hidden;
        position: absolute;
        top: calc(65%);
}
.ArticleSlider
> div.SliderEachItem
> ul.ArticleContent
> li.ArticleItem
> div.ItemContent
> div.Title {
        top: 0;
        left: 0;
}
.ArticleSlider
> div.SliderEachItem
> ul.ArticleContent
> li.ArticleItem
> div.ItemContent
> div.Title
> a {
        text-decoration: none;
        font-size: 20px;
        color: var(--color-black);
        padding: 0;
        text-align: justify;
        font-weight: 700;
        font-family: Merriweather;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        /* number of lines to show */
        -webkit-box-orient: vertical;
        text-align: left;
}
.ArticleSlider
> div.SliderEachItem
> ul.ArticleContent
> li.ArticleItem
> div.ItemContent
> div.Title
> a:hover {
}
.ArticleSlider
> div.SliderEachItem
> ul.ArticleContent
> li.ArticleItem
> div.ItemContent
> div.Summary{
        bottom: 0;
        left: 0;
}
.ArticleSlider
> div.SliderEachItem
> ul.ArticleContent
> li.ArticleItem
> div.ItemContent
> div.Summary,
.ArticleSlider
> div.SliderEachItem
> ul.ArticleContent
> li.ArticleItem
> div.ItemContent
> div.Summary *{
        color: var(--color-black);
        font-size: 15px !important;
        text-align: justify;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        /* number of lines to show */
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        font-family: 'Merriweather';
}
.ArticleSlider
> div.SliderEachItem
> ul.ArticleContent
> li.ArticleItem
> div.ItemContent
> div.Summary{
        height: 84px;
        margin-top: 5px;
}
.ArticleSlider
> div.SliderEachItem
> ul.ArticleContent
> li.ArticleItem
> div.ImageContainer {
        /* margin-top: 12px; */
        /* text-align: center; */
        POSITION: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: calc(65%);
        overflow: hidden;
        border-radius: 0.5rem;
}
.ArticleSlider
> div.SliderEachItem
> ul.ArticleContent
> li.ArticleItem
> div.ImageContainer
> a
> img.Image {
        width: 100%;
        height: 100%;
        /* border-radius: 6px; */
        object-fit: fill;
        /* transition: transform 0.3s; */
        overflow: hidden;
        /* image-rendering: -webkit-optimize-contrast; */
        /* transform: translateZ(0); */
}
.ArticleSlider
> div.SliderEachItem
> ul.ArticleContent
> li.ArticleItem
> div.ImageContainer
> a
> img.Image:hover {
        transform: scale(1.03);
}
.ArticleSlider > div.SliderEachItem > div.ButtonList {
        text-align: center;
        width: 100% !important;
        /* margin-top: 12px; */
        position: absolute;
        top: calc(59% - 3px) !important;
        left: 0 !important;
        height: 40px;
        z-index: 10;
        background: #1f1a1a;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100%);
}
.ArticleSlider
> div.SliderEachItem
> div.ButtonList
> div.ButtonBar {
        display: inline-block;
}
.ArticleSlider
> div.SliderEachItem
> div.ButtonList
> div.ButtonBar
> span.Button,
.ArticleSlider
> div.SliderEachItem
> div.ButtonList
> div.ButtonBar
> span.ButtonActive {
        display: inline-block;
        width: 16px;
        height: 16px;
        margin: 0px 6px;
        border-radius: 50%;
        cursor: pointer;
        position: relative;
        border: 2px solid #fff;
        /* vòng ngoài đen */
        background-color: transparent;
        transition: all 0.3s ease;
        font-size: 0;
}
.ArticleSlider
> div.SliderEachItem
> div.ButtonList
> div.ButtonBar
> span.Button:hover {
        transform: scale(1.15);
        opacity: 0.8;
}
.ArticleSlider
> div.SliderEachItem
> div.ButtonList
> div.ButtonBar
> span.ButtonActive {
        border-color: #fff;
}
.ArticleSlider
> div.SliderEachItem
> div.ButtonList
> div.ButtonBar
> span.ButtonActive::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 8px;
        height: 8px;
        background-color: #fff;
        /* hình tròn xanh */
        border-radius: 50%;
        transform: translate(-50%, -50%) scale(1);
        transition: transform 0.3s ease;
}
.ArticleSlider > div.SliderEachItem > div.prev,
.ArticleSlider > div.SliderEachItem > div.next {
        position: absolute;
        top: 45%;
        transform: translateY(-50%);
        background-color: rgba(0, 0, 0, 0.5);
        color: #fff;
        padding: 8px 12px;
        cursor: pointer;
        border-radius: 50%;
        font-size: 14px;
        transition: background-color 0.3s;
        display: none;
}
.ArticleSlider > div.SliderEachItem > div.prev:hover,
.ArticleSlider > div.SliderEachItem > div.next:hover {
        background-color: rgba(0, 0, 0, 0.7);
}
.ArticleSlider > div.SliderEachItem > div.prev {
        left: -10px;
}
.ArticleSlider > div.SliderEachItem > div.next {
        right: -10px;
}
.ArticleSlider > div.SliderEachItem  .Date {
        font-size: 12px;
        font-weight: 400;
        line-height: 1.5;
        text-align: left;
        color: var(--bs-gray-600);
        margin-top: 5px;
        /* position: absolute; */
        /* top: 0; */
        display: block;
        font-family: 'Merriweather';
}
@media only screen and (max-width: 768px){
        .ArticleSlider > div.SliderEachItem{
                margin-bottom: 10px;
                /* padding: var(--padding-box) !important; */
        }
        .ArticleSlider > div.SliderEachItem > ul.ArticleContent{
                min-height: 420px;
                height: auto;
        }
        .ArticleSlider > div.SliderEachItem > ul.ArticleContent > li.ArticleItem > div.ImageContainer{
                /* position: relative; */
                height: 55vw;
                top: 0;
                left: 0;
                overflow: hidden;
                margin-top: 0;
        }
        .ArticleSlider > div.SliderEachItem > ul.ArticleContent > li.ArticleItem > div.ItemContent{
                /* position: relative; */
                background: transparent;
                /* height: calc(100% - (100vw / 16 * 10)); */
                padding: var(--padding-box-mb);
                top: calc(55vw + 10px);
                margin-top: 0;
                text-align: left;
        }
        div.ArticleSlider {
                /* margin: var(--padding-res) !important; */
                margin-bottom: 10px !important;
                /* max-width: calc(100% - var(--padding-double)); */
                padding: 0 !important;
                box-shadow: none;
                background: content-box;
                max-width: calc(100% - var(--padding-double));
                margin: auto;
        }
        .ArticleSlider > div.SliderEachItem > ul.ArticleContent > li.ArticleItem > div.ItemContent > div.Title > a{
                /* color: #333; */
                -webkit-line-clamp: 3;
                font-size: 21px;
        }
        .ArticleSlider > div.SliderEachItem > ul.ArticleContent > li.ArticleItem > div.ItemContent > div.Summary, .ArticleSlider > div.SliderEachItem > ul.ArticleContent > li.ArticleItem > div.ItemContent > div.Summary *{
                /* color: rgba(33, 37, 41, 0.75) !important; */
                -webkit-line-clamp: 3;
                text-align: left;
        }
        .ArticleSlider > div.SliderEachItem > div.ButtonList{
                width: 100% !important;
                /* margin-top: 20px; */
                top: calc(55vw - 40px) !important;
                /* background: transparent; */
        }
}