:root{
  --MASK_H: 30px; /* chỉnh theo chiều cao vùng header */
}

/* container */
.HotnewsControl .HotnewsScroll{
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
}

/* mask che list (chỉ che phần item chạy lên), đặt THẤP hơn header */
.HotnewsControl .HotnewsScroll::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: var(--MASK_H);
  background:#fff;       /* chỉ che text item */
  z-index: 5;
  pointer-events:none;
}

/* header phải nổi trên mask để không mất ribbon */
.HotnewsControl .Header{
  position: relative;    /* hoặc absolute nếu chị đặt nó nằm trong top */
  z-index: 10 !important;
}

/* nếu ribbon nằm ở span bên trong */
.HotnewsControl .Header .hclthong-bao{
  position: relative;
  z-index: 11 !important;
}

/* list chạy dưới mask */
.HotnewsControl .HotnewsList{
  position: absolute;    /* giữ để JS scroll không hỏng */
  left:0; right:0;
  z-index: 1;
}

/* 1) khung ngoài giống card trong ảnh mẫu */
.HotnewsControl .HotnewsScroll{
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  overflow: hidden;              /* giữ bo góc gọn */
}

/* 2) chừa khoảng trên để ribbon/tiêu đề nằm đè (nếu ribbon nằm phía trên list) */
.HotnewsControl .HotnewsList{
  padding: 44px 18px 14px;       /* chỉnh 44px nếu ribbon cao/thấp */
  box-sizing: border-box;
}

/* 3) style item giống danh sách trong ảnh (ngăn cách bằng line mảnh) */
.HotnewsControl .HotnewsItem{
  padding: 12px 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.HotnewsControl .HotnewsItem:last-child{
  border-bottom: 0;
}

/* 4) ảnh trong list đang làm lệch layout -> ẩn để giống mẫu */
.HotnewsControl .HotnewsItemImage{
  display: none !important;
}

/* 5) canh chữ + tạo “bullet vuông” như mẫu */
.HotnewsControl .HotnewsItem a{
  position: relative;
  display: block;
  padding-left: 16px;
  text-decoration: none;
}

.HotnewsControl .HotnewsItem a::before{
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 6px;
  height: 6px;
  background: #d10000;
  border-radius: 1px;
}

.HotnewsControl .HotnewsItem .ArticleTitle{
  display: block;
  line-height: 1.45;
}

.HotnewsControl {
        margin-bottom: 10px;
        /* margin: 8px 0; */
}
.HotnewsControl .Header span {
     color: #ce1226;
    display: inline-block;
    padding: 0 0 0 10px;
    white-space: nowrap;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600;
}

div.HotnewsControl .HotnewsScroll {
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        background: #fff none repeat scroll 0 0;
          border-color: #f9f7f7 #ddd #ddd;
    
        border-image: none;
        border-style: solid;
        border-width: 1px;
        margin: 0;
        overflow: auto;
        padding: 0;
        min-height: 382px;
        max-height: 382px;
}
.HotnewsControl .Header {
        margin-bottom:-18px;
            text-align: center;
         position: relative;  
  
  z-index: 1000 !important;
    font-size: 27px;
  background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url(https://dost-hanoi.sotatek.works/assets/ribbon-rounded.svg);
}

div.HotnewsControl .HotnewsList {
        display: inline-block;
        margin: 0;
        padding: 0 10px;
        height: auto !important;
}
div.HotnewsControl .HotnewsList .HotnewsItem {
        clear: both;
        float: left;
        padding: 5px 0 5px 15px;
        padding-right: 0 !important;
        padding-left: 0 !important;
        text-align: justify;
        min-height: 50px;
        width: 100%;
}
div.HotnewsControl .HotnewsList .HotnewsItem+div{
        border-top: 0px solid #ddd;
}
.HotnewsControl .HotnewsList .HotnewsItem img {
        display: none;
        float: left;
        height: 50px;
        margin-right: 6px;
        vertical-align: top;
        width: 65px;
}
.HotnewsControl .HotnewsList .HotnewsItem a {
        color: #212529;
        text-decoration: none;
        text-align: justify;
}
.HotnewsControl .HotnewsList .HotnewsItem .ArticleTitle {
        color: color-mix(in oklab, var(--ring) 50%, transparent);
        padding-top: 0;
        font-size: 14px;
       
        margin-bottom: 5px;
        display: inline-block;
}
.HotnewsControl .HotnewsList .HotnewsItem .ArticleTitle:hover {
        color: #960c01;
}
.HotnewsControl .HotnewsList .active {
        background-color: #cccccc;
}
.HotnewsControl .ArticlePostDate {
        font-size: 12px;
        color: #6c757d;
        text-align: right;
}
@media only screen and (max-width: 1023px){
        div.HotnewsControl {
                padding: 0 10px;
                margin-bottom: 10px;
        }
}