.xem-tat-ca {
        text-align: right;
}
.xem-tat-ca a {
        color: #2773d1;
        font-size: 15px;
        margin: 10px 5px 0 0;
        text-decoration: underline;
        display: inline-block;
}
.HSliderScroll {
        margin: 0;
        padding: 0;
        height: auto;
        display: inline-block;
        width: 100%;
        padding-top: 0;
        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);
        margin-top: -20px;
        --slider-gap: 25px;
        --slider-columns: 3;
        padding: 5px 16px 5px 16px;
        border: 1px
        solid #b5b2b2;
        margin-top: 12px;
}
.HSliderScroll .Header {
        width: 100%;
        position: relative;
        /* padding-right: 10px; */
        text-align: left;
        margin-bottom: 5px;
        /* border-bottom: 1px solid #EEEEEE; */
        padding-bottom: 5px;
}
.HSliderScroll .Header:before {
        content: '';
        height: 2px;
        background: #343a40;
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
}
.HSliderScroll .Header span.Text {
        /* background-size: 20px; */
        /* background-position-x: 5px; */
        text-transform: uppercase;
        /* font-family: "Arial", "Tahoma", "Verdana", "Helvetica", sans-serif; */
        font-size: 15px;
        /* font-style: normal; */
        font-weight: bold;
        /* letter-spacing: 0em; */
        text-align: left;
        color: var(--color-red);
        /* letter-spacing: -1px; */
        display: flex;
        gap: 10px;
        align-items: center;
        color: rgb(0, 91, 160);
        font-family: Merriweather;
        /* font-weight: 700; */
        line-height: 22px;
}

/*
.HSliderScroll .Header span.Text:before {
        content: "\f0f3";
        font-family: 'Font Awesome 5 Pro';
        font-weight: 900;
        color: var(--color-red);
        font-size: 15px;
        left: 10px;
        top: 0;
        z-index: 6;
        animation: flicker 1.5s infinite;
}
*/

.HSliderScroll .Header span.Text {
    position: relative;
    padding-left: 27px; /* chừa chỗ cho icon */
}

.HSliderScroll .Header span.Text:before {
    content: "";
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: url("https://static.mediacdn.vn/baochinhphu/images/avt.svg") center/cover no-repeat;
    z-index: 6;
    animation: flicker 1.5s infinite;
}

.HSliderScroll .Header:before {
        content: '';
        width: 80px;
        height: 1px;
        background: var(--color-red);
        display: none;
}
.HSliderScroll .Header span.Pages {
        color: #757575;
        font: bold 14px/30px arial;
        margin-right: 10px;
        padding: 0 0 0 15px;
        text-transform: uppercase;
        white-space: nowrap;
        text-align: center;
}
.HSliderScroll .SliderContent {
        margin: 10px 0;
}
.HSliderScroll .text:hover a {
        color: var(--color-primary);
}


.HSliderScroll .ItemPanel {
        overflow: hidden;
        position: relative;
        width: 100%;
        height: 280px;
        container-type: inline-size;
        container-name: slider-panel;
}

.HSliderScroll .text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-align: justify;
        margin-top: 5px;
}
.HSliderScroll .text a {
        color: rgb(51, 51, 51);
        padding: 0;
        font-size: 16px;
        font-weight: normal;
        font-family: 'Merriweather';
        font-style: normal;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        display: -webkit-box;
        text-overflow: ellipsis;
        text-align: left;
}
.HSliderScroll .ItemContainer .Item:hover img {
        opacity: 1;
        border-radius: 5px 5px 0 0;
}


.HSliderScroll .ItemContainer {
        left: 0;
        list-style: outside none none;
        margin: 0;
        overflow: visible;
        padding: 0;
        position: absolute;
        top: 0;
        display: flex;
        flex-wrap: nowrap;
        gap: var(--slider-gap);
        height: auto;
}


.HSliderScroll .ItemContainer .Item {
        background: #fff;
        vertical-align: top;
        border-radius: 5px;
        height: auto;
        flex: 0 0 calc((100cqw - var(--slider-gap) * 2) / var(--slider-columns));
        width: calc((100cqw - var(--slider-gap) * 2) / var(--slider-columns));
        max-width: calc((100cqw - var(--slider-gap) * 2) / var(--slider-columns));
        min-width: 0;
}
.HSliderScroll .ItemContainer .Item .Summary {
        display: none;
}


.HSliderScroll .ItemContainer .Item .image {
        position: relative;
        width: 100%;
        padding-top: 56.25%;
        overflow: hidden;
        border-radius: 0.5rem;
}

div.HSliderScroll .ItemContainer .Item img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        border-radius: 0.5rem;
        opacity: 1;
}

div.HSliderScroll .ItemContainer .Date {
        font-size: 12px;
        font-weight: 400;
        line-height: 1.5;
        text-align: left;
        color: var(--bs-gray-600);
        margin-top: 5px;
        display: block;
}


.HSliderScroll .PreButton,
.HSliderScroll .NextButton {
        position: absolute;
        top: 45%;
        transform: translateY(-50%);
        width: 30px;
        height: 30px;
        opacity: 0.8;
        z-index: 2;
}
.HSliderScroll .PreButton {
        left: 0;
}
.HSliderScroll .NextButton {
        right: 0;
}
.HSliderScroll .PreButton::before,
.HSliderScroll .NextButton::before {
        font-family: "Font Awesome 5 Pro";
        font-weight: 900;
        font-size: 36px;
        color: #b5b2b2;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        line-height: 1;
        display: none;
}
.HSliderScroll .PreButton::before {
        content: "\f053";
}
.HSliderScroll .NextButton::before {
        content: "\f054";
}
.HSliderScroll .NextButton:hover {
        opacity: 1;
}
.HSliderScroll .PreButton:hover {
        opacity: 1;
}
.ArticleSlider {
}


@supports not (width: 1cqw) {
        .HSliderScroll .ItemContainer .Item {
                flex: 0 0 230px;
                width: 230px;
                max-width: 230px;
        }
}


@media only screen and (max-width: 768px) {
        .HSliderScroll {
                /*padding: var(--padding-box-mb);*/
                padding: 12px;
                margin-top: 10px;
        }
        
        .UIArticleSlider_default2 {
			max-width: 100vw;
                        margin-top: 10px;
        }

        /* Ẩn nút prev/next trên mobile — dùng swipe */
        .HSliderScroll .PreButton,
        .HSliderScroll .NextButton {
                display: none;
        }

        .HSliderScroll .ItemPanel {
                overflow: visible !important;
                position: static !important;
                width: 100% !important;
                height: auto !important;
                min-height: unset !important;
                container-type: normal !important;
        }

        .HSliderScroll .ItemContainer {
                position: static !important;
                left: auto !important;
                top: auto !important;
                display: flex !important;
                flex-wrap: nowrap !important;
                gap: 15px !important;
                width: 100% !important;
                height: auto !important;
                overflow-x: auto !important;
                overflow-y: hidden !important;
                padding: 0 !important;
                margin: 0 !important;
                /* Scroll mượt trên iOS */
                -webkit-overflow-scrolling: touch;
                /* Ẩn scrollbar nhưng vẫn scroll được */
                scrollbar-width: none;
                -ms-overflow-style: none;
        }
        .HSliderScroll .ItemContainer::-webkit-scrollbar {
                display: none;
        }

        
        .HSliderScroll .ItemContainer .Item {
                flex: 0 0 85vw !important;
                width: 85vw !important;
                max-width: 85vw !important;
                min-width: 0 !important;
                margin: 0 !important;
                height: auto !important;
        }

        .HSliderScroll .Header span.Text {
                white-space: normal;
        }
        .HSliderScroll .Header {
                padding-top: 10px;
        }
        .HSliderScroll .text a {
                text-align: left;
                -webkit-line-clamp: 2;
                font-size: 14px;
        }

        /* Ảnh mobile: 16:9, cover */
        .HSliderScroll .ItemContainer .Item .image {
                position: relative !important;
                width: 100% !important;
                padding-top: 56.25% !important;
                overflow: hidden !important;
                border-radius: 0.5rem;
        }
        .HSliderScroll .ItemContainer .Item img {
                position: absolute !important;
                top: 0 !important;
                left: 0 !important;
                width: 100% !important;
                height: 100% !important;
                object-fit: cover !important;
                object-position: center !important;
                border-radius: 0.5rem;
        }

        div.HSliderScroll .ItemContainer .Date {
                font-size: 11px;
                margin-top: 3px;
        }
}


.UIArticleSlider_default2 .Header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.IconWrap {
  display: flex;
  gap: 12px !important;
}



.PreButton, .NextButton {
    display: none;
}