.tin-tuc .swiper-slide{
    padding: 8px;
    border: 1px solid #ccc;
   

}
 

.du-an .tp-post-item {
    padding: 8px;
    border: 1px solid #ccc;
    margin-bottom: 22px !important;


}

.du-an .tp-post-item .tp-body {
  display: -webkit-box;
  -webkit-line-clamp: 3;   /* số dòng */
  -webkit-box-orient: vertical;
  overflow: hidden;
}




/* 1. Đảm bảo tất cả các slide có chiều cao bằng nhau trong một hàng */
.swiper-slide {
    height: auto !important;
    display: flex;
}

/* 2. Cấu trúc lại row bên trong slide để kéo dài hết chiều cao */
.swiper-slide .row {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0; /* Loại bỏ margin thừa của bootstrap row */
    background: #fff; /* Tùy chọn: màu nền khung */
    border: 1px solid #eee; /* Tùy chọn: viền khung */
    border-radius: 8px; /* Tùy chọn: bo góc */
    overflow: hidden;
}

/* 3. Cố định tỉ lệ ảnh để không bị méo hoặc lệch */
.tp-post__thumbnail {
    width: 100%;
    aspect-ratio: 16 / 9; /* Ép ảnh về tỉ lệ 16:9 hoặc 4:3 tùy bạn */
    overflow: hidden;
}

.tp-post__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Giữ ảnh luôn lấp đầy khung mà không bị biến dạng */
}

/* 4. Căn chỉnh phần nội dung */
.tp-post__content {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Đẩy phần nội dung chiếm hết khoảng trống còn lại */
}

/* 5. Khống chế tiêu đề (Quan trọng nhất) */
.tp-title {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 1.1rem;
    line-height: 1.4;
    /* Giới hạn tiêu đề trong 2 dòng để các khung luôn bằng nhau */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 2.8em; /* = line-height * 2 */
}

/* 6. Khống chế đoạn mô tả (tp-body) */
.tp-body {
    font-size: 0.9rem;
    color: #666;
    /* Giới hạn mô tả trong 3 dòng */
/*    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 15px;*/
}