.home-new {
    background: #F3F3F3;
    padding-bottom: 45px;
}

    .home-new grid.wide {
    }

.home-new-container {
}

.home-new-top {
    display: flex;
    padding-top: 111px;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 40px;
}

.hw-top-left {
    text-align: center;
    width: 38%;
}

.hwt-left-top {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .hwt-left-top img {
        width: 312px;
        height: 100%;
    }

.hwt-left-bottom {
    color: #4e4e4e;
    font-family: 'monM';
    padding: 30px 28px 0px;
}

.hw-top-right {
    width: 690px;
    border-radius: 30px;
    height: 397px;
    overflow: hidden;
}

    .hw-top-right img {
    }

.home-new-mid {
}

.home-new-list {
    padding-bottom: 52px;
}

.hw-item {
}

.hw-item-sazlink {
}

.das-img {
    284.45 contain-intrinsic-block-size: auto 100px;
    width: 284.45px;
    height: 204px;
    border-radius: 10px;
    overflow: hidden;
}

    .das-img img {
    }

.xz-new-title {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    font-family: 'monB';
    font-size: 16px;
    padding-top: 16px;
    color: #4e4e4e;
}

.xz-new-descript {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    padding-top: 12px;
    color: #4e4e4e;
}
/* --- Bổ sung Transition cho mục tin tức --- */
/* Thêm transition vào lớp cha để hiệu ứng mượt mà */
.hw-item {
    /* Đảm bảo item có position: relative nếu muốn dùng z-index khi hover */
    position: relative;
    transition: all 0.3s ease-in-out; /* Thiết lập chuyển đổi cho tất cả thuộc tính */
    /* Đảm bảo có nền nếu không có trong mã gốc */
    border-radius: 10px; /* Thêm bo góc cho item */
    overflow: hidden; /* Giúp các thành phần con không tràn ra ngoài */
    /* Bóng đổ nhẹ mặc định */
}

    /* --- Hiệu ứng HOVER --- */
    .hw-item:hover {
        /* 1. Nâng item lên một chút */
        transform: translateY(-5px);
        /* 2. Thêm bóng đổ nổi bật hơn */
        /* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); */
        /* 3. Đảm bảo nó nằm trên các item khác khi di chuyển (tùy chọn) */
        z-index: 10;
    }

        /* --- Hiệu ứng cho tiêu đề khi HOVER --- */
        .hw-item:hover .xz-new-title {
            /* Thay đổi màu tiêu đề sang màu nổi bật hơn (ví dụ: màu xanh chính) */
            color: var(--default-color-1); /* Thay bằng màu bạn mong muốn */
            transition: color 0.3s ease-in-out; /* Chuyển đổi màu mượt mà */
        }

        /* --- Hiệu ứng cho hình ảnh khi HOVER (Tùy chọn) --- */
        .hw-item:hover .das-img img {
            /* Phóng to hình ảnh nhẹ nhàng */
            transform: scale(1.05);
            transition: transform 0.3s ease-in-out;
        }
/* Thiết lập transition cho hình ảnh trong lớp .das-img img */
.das-img img {
    transition: transform 0.3s ease-in-out;
}

.home-new-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #FFFF;
    border-radius: 15px;
}

.hw-bottom-left {
    font-size: 27px;
    color: #257b48;
    font-family: 'monB';
    padding: 0px 31px;
}

.hw-bottom-right {
    width: 80%;
    padding: 20px 0px;
    padding-right: 35px;
}

.partner-img-list {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 7px;
}

.simv-anew {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 0;
    overflow: hidden;
}

.vzxmn-cz {
    width: 187px;
    height: 111px;
    display: flex;
    align-items: center;
    border: 1px solid #00000014;
    overflow: hidden;
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
}

    .vzxmn-cz:hover {
        /* Nâng nhẹ container lên */
        transform: translateY(-3px);
        /* Đổi màu border (ví dụ: thành màu xanh nổi bật) */
        border-color: #257b48;
        /* Thêm bóng đổ nhẹ để nổi bật */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    }

.simv-anew img {
    width: 75%; /* overflow: hidden; */
    transition: transform 0.3s ease-in-out;
}

.vzxmn-cz:hover .simv-anew img {
    /* Phóng to hình ảnh bên trong nhẹ nhàng */
}
/* 1. Thiết lập Container bao ngoài (VIEWPORT) */
.marquee-container {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
}

/* 2. Thiết lập Container Nội dung (CONTENT) */
.marquee-content {
    display: flex;
    align-items: center;
    /* Áp dụng Animation (Lặp vô tận) */
    animation: marquee 50s linear infinite; /* Điều chỉnh 30s cho tốc độ */
    padding: 4px;
}

/* 3. Đảm bảo các item không bị co lại */
.vzxmn-cz {
    flex-shrink: 0;
    margin-right: 30px;
    /* ... các quy tắc CSS gốc khác ... */
}

/* 4. Định nghĩa Keyframes */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    /* Kết thúc: Dịch chuyển hết chiều rộng của danh sách GỐC */
    100% {
        transform: translateX(-50%);
    }
}
/* KHI HOVER VÀO NỘI DUNG CUỘN (marquee-content), DỪNG ANIMATION */
.marquee-content:hover {
    /* Quan trọng: Dừng Animation khi di chuột */
    animation-play-state: paused;
}

@media (max-width: 739px) {
    /* --- KHỐI CHUNG: home-new-top --- */
    .home-new-top {
        flex-direction: column; /* Xếp chồng các khối trên mobile */
        padding-top: 75px;
        padding-bottom: 30px;
    }

    .xz-new-title {
        font-size: 14px;
    }

    .xz-new-descript {
        padding-top: 5px;
        font-size: 12px;
    }
    /* --- KHỐI TRÁI: hw-top-left --- */
    .hw-top-left {
        width: 100%; /* Chiếm toàn bộ chiều rộng */
        order: 1; /* Đẩy xuống dưới (tùy chọn) */
        padding-bottom: 16px;
    }

    .hwt-left-top img {
        width: 46%; /* Giảm kích thước logo/hình ảnh tiêu đề */
    }

    .hwt-left-bottom {
        padding-top: 15px;
        margin: 0 20px;
        font-size: 14px;
    }

    /* --- KHỐI PHẢI: hw-top-right --- */
    .hw-top-right {
        width: 100%; /* Chiếm phần lớn màn hình */
        height: auto; /* Chiều cao tự động */
        order: 1; /* Đẩy lên trên (tùy chọn) */
        border-radius: 15px;
        margin-bottom: 20px;
    }

    /* --- PHẦN TIN TỨC: .home-new-list (Nếu dùng Swiper/Grid) --- */
    /* Nếu bạn dùng Swiper, cần cấu hình breakpoints trong JS. 
       Nếu là Grid/Flex thường, cần điều chỉnh số lượng cột/item. */
    .home-new-list {
        padding-bottom: 30px;
        /* Nếu không dùng Swiper, cần thêm CSS cho .hw-item tại đây */
    }

    /* --- KHỐI ĐỐI TÁC: home-new-bottom --- */
    .home-new-bottom {
        flex-direction: column; /* Xếp chồng nội dung và logo */
        border-radius: 10px;
    }

    .das-img {
        height: 150px;
        width: 100%;
    }

    .hw-bottom-left br {
        display: none; /* Ẩn thẻ <br> */
    }

    .hw-bottom-left {
        padding: 22px 0;
        font-size: 22px;
        text-align: center;
        width: 100%;
        padding-bottom: 8px;
    }

    .hw-bottom-right {
        width: 100%;
        padding: 10px 9px;
    }

    /* --- MARQUEE Logo trên Mobile --- */
    .marquee-content {
        /* Tăng tốc độ cuộn vì màn hình nhỏ hơn */
        animation: marquee 30s linear infinite;
    }

    .vzxmn-cz {
        width: 120px; /* Thu nhỏ kích thước logo */
        height: 70px;
        margin-right: 15px;
    }

    /* Điều chỉnh Keyframes cho Mobile nếu cần */
    /* @keyframes marquee sẽ giữ nguyên 50% nếu bạn giữ cấu trúc 2 bản sao logo */
}

@media (min-width: 740px) and (max-width: 1023px) {
    /* --- KHỐI CHUNG: home-new-top --- */
    .home-new-top {
        padding-top: 80px;
        padding-bottom: 30px;
    }

    /* --- KHỐI TRÁI: hw-top-left --- */
    .hw-top-left {
        width: 45%; /* Tăng nhẹ chiều rộng */
    }

    .hwt-left-top img {
        width: 90%;
    }

    .hwt-left-bottom {
        padding-top: 20px;
        font-size: 16px;
    }

    /* --- KHỐI PHẢI: hw-top-right --- */
    .hw-top-right {
        /* Thay vì width cố định 690px, dùng flex-grow hoặc width % */
        width: 50%;
        height: 300px; /* Giảm chiều cao */
        border-radius: 20px;
    }

    /* --- PHẦN TIN TỨC: .home-new-list --- */
    .home-new-list {
        padding-bottom: 40px;
    }

    /* --- KHỐI ĐỐI TÁC: home-new-bottom --- */
    .home-new-bottom {
        /* Giữ flex ngang */
    }

    .hw-bottom-left {
        font-size: 24px;
        padding: 0px 20px; /* Giảm padding ngang */
    }

    .hw-bottom-right {
        width: 75%; /* Chiếm ít hơn 80% */
        padding-right: 20px;
    }

    /* --- MARQUEE Logo trên Tablet --- */
    .marquee-content {
        animation: marquee 40s linear infinite; /* Điều chỉnh tốc độ */
    }

    .vzxmn-cz {
        width: 160px; /* Giảm nhẹ kích thước logo */
        height: 90px;
        margin-right: 20px;
    }
}