body {
    font-family: "Roboto", sans-serif;
    background: #fff;
}

.news-section {
    padding: 60px 0;
}

    .news-section h2 {
        text-align: center;
        font-weight: 700;
        margin-bottom: 30px;
    }

.carousel-wrapper {
    position: relative;
    overflow: hidden;
}

.carousel-track {
    display: flex;
    transition: transform 0.6s ease;
    will-change: transform;
}

.carousel-card {
    flex: 0 0 33.3333%;
    padding: 0 12px;
    box-sizing: border-box;
    display: flex; /* giúp card bằng chiều cao nhau */
}

.news-card {
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    height: 100%;
    display: flex;
    flex-direction: column; /* giúp ảnh + nội dung chia tách đều */
}

    .news-card img {
        width: 100%;
        height: 220px;
        object-fit: cover;
        display: block;
    }

.news-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
}

    .news-body h5 {
        margin: 0 0 8px;
        color: black;
        font-weight: 700;
        font-size: 1.05rem;
    }

    /* Giới hạn nội dung mô tả chỉ hiển thị tối đa 3 dòng và có "..." */
    .news-body p {
        margin: 0;
        color: #555;
        font-size: 0.95rem;
        display: -webkit-box;
        -webkit-line-clamp: 3; /* 👈 số dòng hiển thị tối đa */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.carousel-control-prev, .carousel-control-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    width: 48px;
    height: 48px;
    z-index: 10;
}

.carousel-control-prev {
    left: 6px;
}

.carousel-control-next {
    right: 6px;
}

.carousel-control-prev-icon, .carousel-control-next-icon {
    width: 44px;
    height: 44px;
    background-color: rgba(0,0,0,.55);
    border-radius: 50%;
    display: inline-block;
    background-size: 18px 18px;
    background-position: center;
    background-repeat: no-repeat;
}

.carousel-control-prev-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23fff" viewBox="0 0 16 16"><path d="M11.354 1.646a.5.5 0 0 1 0 .708L6.707 7l4.647 4.646a.5.5 0 0 1-.708.708l-5-5a.5.5 0 0 1 0-.708l5-5a.5.5 0 0 1 .708 0z"/></svg>');
}

.carousel-control-next-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23fff" viewBox="0 0 16 16"><path d="M4.646 14.354a.5.5 0 0 1 0-.708L9.293 9 4.646 4.354a.5.5 0 1 1 .708-.708l5 5a.5.5 0 0 1 0 .708l-5 5a.5.5 0 0 1-.708 0z"/></svg>');
}

@media (max-width: 992px) {
    .carousel-card {
        flex: 0 0 50%;
    }
    /* 2 cards on medium screens */
}

@media (max-width: 576px) {
    .carousel-card {
        flex: 0 0 100%;
    }
    /* 1 card on small screens */
    .news-card img {
        height: 180px;
    }
}

/* Hiệu ứng hover cho card tin tức */
.news-card {
    transition: all 0.4s ease; /* hiệu ứng mượt cho toàn card */
    border: 1px solid transparent;
}

    /* Khi hover: thêm viền đỏ và phóng to ảnh */
    .news-card:hover {
        border-color: #c0392b; /* viền đỏ */
        box-shadow: 0 6px 18px rgba(192, 57, 43, 0.15); /* bóng nhẹ màu đỏ */
    }

    /* Ảnh phóng to nhẹ khi hover */
    .news-card img {
        transition: transform 0.5s ease;
    }

    .news-card:hover img {
        transform: scale(1.05); /* phóng to 5% */
    }

    /* Tiêu đề đổi màu đỏ khi hover */
    .news-card:hover .news-body h5 {
        color: #c0392b;
    }

/* Đảm bảo chữ không bị nhảy khi đổi màu */
.news-body h5 {
    transition: color 0.3s ease;
}

/* Bỏ gạch chân và giữ màu mặc định khi bọc bằng <a> */
.news-link {
    text-decoration: none;
    color: inherit;
    display: block; /* giúp toàn bộ card có thể click */
}

    /* Đảm bảo hiệu ứng hover áp dụng cho thẻ <a> bao ngoài */
    .news-link:hover .news-card {
        border-color: #c0392b;
        box-shadow: 0 6px 18px rgba(192, 57, 43, 0.15);
    }

        .news-link:hover .news-card img {
            transform: scale(1.05);
        }

    .news-link:hover .news-body h5 {
        color: #c0392b;
    }