/* --- Cấu trúc chính --- */
.SliderFeature {
    border-radius: 0;
    margin: 0 0 10px;
    position: relative;
    background: #fff;
}

.SliderFeature .RightCol {
    background: #ffffff none repeat scroll 0 0;
    vertical-align: top;
    width: 30%;
    padding-left: 10px;
}

.SliderFeature .LeftCol {
    text-align: justify;
    vertical-align: top;
    width: 59%;
}

.SliderFeature .LeftPanel {
    overflow: hidden;
    position: relative;
    width: 100% !important;
    height: 517px !important;
    /* HOVER HIỆN ĐẠI: Đảm bảo ảnh phóng to không bị tràn ra ngoài khung */
    border-radius: 4px; 
}

/* --- Định dạng Cột Trái (Left Column) --- */
div.SliderFeature .LeftPanel > a {
    display: inline-block;
    width: 100%;
    color: #212529;
}

div.SliderFeature .LeftPanel > a .Title {
    font-size: 18px;
    padding: 10px 10px 0 10px;
    font-weight: 600;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    display: -webkit-box;
    margin-bottom: 10px;
}

div.SliderFeature .LeftPanel > a .Summary {
    font-size: 15px;
    padding: 10px;
    font-weight: normal;
    color: #495057;
}

.SliderFeature .LeftCol .LeftPanel img {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
    height: 517px;
    /* HOVER HIỆN ĐẠI: Thêm hiệu ứng chuyển động mượt mà khi phóng to ảnh */
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.SliderFeature .LeftCol .text {
    bottom: 20px;
    margin-bottom: 0;
    position: absolute;
    width: 100%;
    z-index: 1;
    font-size: 16px;
    font-weight: 600;
    padding: 0 25px;
    background: linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
    /* HOVER HIỆN ĐẠI: Chuyển động mượt mà cho khối chữ */
    transition: bottom 0.4s ease, background 0.4s ease;
}

.SliderFeature .LeftCol .text div {
    letter-spacing: 0em;
    font-family: 'Merriweather', serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 40px;
    text-align: left;
    color: #ffffff;
}

div.SliderFeature .LeftCol .text-summary {
    font-weight: normal;
    font-size: 15px;
    padding-top: 0;
}

/* --- HOVER HIỆN ĐẠI CHO CỘT TRÁI --- */
.SliderFeature .LeftPanel:hover img {
    transform: scale(1.06); /* Phóng to ảnh lên 6% */
}

.SliderFeature .LeftPanel:hover .text {
    bottom: 25px; /* Đẩy khối chữ nhích lên trên một chút */
    background: linear-gradient(to right, rgba(0,0,0,0.65), rgba(0,0,0,0.65)); /* Làm nền tối hơn một chút để chữ nổi bật hơn */
}
/* --------------------------------- */

.SliderFeature .LeftCol .text-title-aboveopt {
    font-family: "Merriweather", serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 40px;
    text-align: left;
    color: #031739;
    margin-bottom: 20px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

.SliderFeature .LeftCol .text-summary-aboveopt {
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
    margin-top: 20px;
    color: #3B4E68;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* --- Danh sách Bài viết (Article List) --- */
.SliderFeature .ArticleList {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    max-height: 535px;
    overflow: auto;
}

.SliderFeature .ArticleList li {
    display: inline-block;
    width: 100%;
    padding: 10px; /* Thêm padding đều đặn để khối hover đẹp hơn */
    margin-bottom: 1px;
    position: relative;
    /* HOVER HIỆN ĐẠI: Chuyển động cho màu nền và vị trí */
    transition: background-color 0.3s ease, transform 0.3s ease, border-radius 0.3s ease;
}

.SliderFeature .ArticleList li:first-child {
    padding-top: 11px;
}

.SliderFeature .ArticleList li + li {
    border-top: dashed 1px #ccc;
}

.SliderFeature .ArticleList li a {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 86px;
    text-overflow: ellipsis;
    letter-spacing: 0.02em;
    display: inline-block;
}

.SliderFeature .ArticleList .Summary {
    display: none;
}

.SliderFeature .ArticleList .ArticleItemSelected {
    background: #d2d2d2;
}

.SliderFeature .ArticleList .Title {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    font-family: 'Merriweather', serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    text-align: left;
    color: #182940;
    /* HOVER HIỆN ĐẠI: Chuyển động cho màu chữ */
    transition: color 0.3s ease;
}

.SliderFeature .ArticleList .ArticleItemSelected a {
    display: inline-block;
    font-size: 15px;
    line-height: 1.4;
}

.SliderFeature .ArticleList li .Image {
    float: left;
    height: 80px;
    margin-right: 10px;
    text-align: left;
    width: 120px;
    overflow: hidden;
    border-radius: 4px; /* Bo góc nhẹ cho ảnh con */
}

.SliderFeature .ArticleList li .Image img {
    /* Đảm bảo ảnh con cũng có thể thêm hiệu ứng nếu muốn */
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* --- HOVER HIỆN ĐẠI CHO DANH SÁCH BÊN PHẢI --- */
.SliderFeature .ArticleList li:hover {
    background-color: #f8f9fa; /* Nền chuyển sang xám rất nhạt */
    transform: translateX(4px); /* Dịch nguyên khối bài viết sang phải 4px */
    border-radius: 6px;
    border-top-color: transparent; /* Ẩn đường viền đứt đoạn khi hover để nhìn sạch sẽ hơn */
}

/* Xử lý ẩn border top của phần tử kế tiếp khi phần tử hiện tại được hover */
.SliderFeature .ArticleList li:hover + li {
    border-top-color: transparent;
}

.SliderFeature .ArticleList li:hover a {
    text-decoration: none; /* Bỏ gạch chân nếu có */
}

.SliderFeature .ArticleList li:hover .Title {
    color: #0056b3; /* Đổi tiêu đề sang màu xanh dương (bạn có thể thay mã màu này) */
}

.SliderFeature .ArticleList li:hover .Image img {
    transform: scale(1.1); /* Phóng to nhẹ ảnh thumbnail */
}
/* ------------------------------------------- */

/* --- Header & Hiệu ứng khác --- */
.SliderFeature .Header {
    width: 100%;
    margin-bottom: 5px;
    border-bottom: none;
    display: none;
}

.SliderFeature .Header .lblHeader {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
    background: var(--bg-blue-weight);
    padding: 8px 15px;
    color: #fff;
    display: none;
}

.SliderFeature span.new {
    color: red;
    font-size: 0px;
}

.SliderFeature span.new:after {
    background: url(images/icon-moi.gif);
    content: "";
    top: -7px;
    width: 50px;
    height: 20px;
    background-repeat: no-repeat;
    display: inline-block;
    background-size: 45px 20px;
}

/* --- Tương thích thiết bị (Responsive / Media Queries) --- */
@media only screen and (min-width: 769px) and (max-width: 1023px) {
    div.SliderFeature .LeftCol, 
    div.SliderFeature .RightCol {
        display: table-cell;
        min-width: 35vw;
    }
    div.SliderFeature .RightCol {
        padding-left: 10px !important;
    }
}

@media only screen and (max-width: 768px) {
    .SliderFeature .LeftPanel {
        display: none;
    }
    .SliderFeature .LeftCol .text {
        padding-top: 5px;
        background: #fff;
        padding: 0;
    }
    .SliderFeature .LeftCol .LeftPanel img {
        height: 55vw;
    }
    .SliderFeature .TableContent tr:first-child {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
    }
    .SliderFeature .RightCol {
        width: 100%;
    }
    .SliderFeature .LeftCol .text div {
        font-size: 16px;
        color: #000000;
    }
    
    /* Vô hiệu hóa hiệu ứng dịch chuyển (transform) trên mobile để tránh lỗi chạm/lướt */
    .SliderFeature .ArticleList li:hover {
        transform: none;
    }
}