/* Tổng quan khung Grid bài liên quan */
.crp_related.crp-thumbs-grid {
    clear: both;
    margin: 20px auto;
}

.crp_related.crp-thumbs-grid h3, 
.crp_related.crp-thumbs-grid figure {
    margin: 0 !important;
}

/* Cấu trúc Grid */
.crp_related.crp-thumbs-grid ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Ép 3 cột */
    grid-gap: 15px;
    margin: 0;
    justify-items: center;
    list-style: none;
    padding: 0;
}

/* Từng ô bài viết - Viền xanh đậm Eduzone */
.crp_related.crp-thumbs-grid ul li {
    text-align: center;
    border: 2px solid #1c449c !important; /* Viền xanh đậm */
    display: flex;
    flex-direction: column;
    word-break: break-word;
    vertical-align: bottom;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    list-style-type: none;
}

/* Khi đưa chuột vào - Viền chuyển sang xanh nhạt */
.crp_related.crp-thumbs-grid li:hover {
    background: #ffffff;
    border-color: #179bd7 !important; /* Xanh nhạt Eduzone */
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Link và hình ảnh */
.crp_related.crp-thumbs-grid ul li a.crp_link {
    flex-grow: 1;
    display: grid;
    overflow: hidden;
    padding: 0; /* Để ảnh và chữ khít viền */
}

.crp_related.crp-thumbs-grid a {
    box-shadow: none !important;
    text-decoration: none !important;
}

/* Phần chữ: Nền xanh đậm mờ, chữ trắng */
.crp_related.crp-thumbs-grid .crp_title {
    color: #ffffff !important; /* Chữ trắng */
    padding: 10px 5px;
    font-size: 0.95em;
    font-weight: 400;
    background-color: rgba(28, 68, 156, 1) !important; /* Xanh đậm mờ */
    width: 100%;
    line-height: 1.4;
    display: flex;
    justify-content: center;
    align-items: center;
    grid-row-start: 2;
    transition: background 0.3s ease;
}


/* Khi hover vào ô, nền chữ có thể đậm hơn một chút cho rõ */
.crp_related.crp-thumbs-grid li:hover .crp_title {
    background-color: rgba(28, 68, 156, 0.85) !important; /* Xanh đậm đặc */
}

.crp_title:visited {
    color: #ffffff !important;
}

/* Ảnh đại diện */
.crp_related.crp-thumbs-grid ul li img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: cover;
}

.crp_clear { clear: both; }

.crp_related img {
    aspect-ratio: 16/9; /* Ép ảnh luôn giữ tỷ lệ này để chừa chỗ trước */
    width: 100% !important;
    height: auto !important;
    background: #f0f0f0; /* Tạo một lớp nền xám trong lúc chờ ảnh load */
}

/* Mobile: Xuống 1 cột */
@media (max-width: 600px) {
    .crp_related.crp-thumbs-grid ul {
        grid-template-columns: 1fr;
    }
}