/* Reset padding và margin */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.card p {
    font-size: 25px;
}

/* Chỉnh container chứa các item */
.list-hdt {
    display: flex;
    flex-wrap: wrap; /* Cho phép các item tự động xuống dòng nếu không đủ chỗ */
    justify-content: space-between; /* Căn đều khoảng cách giữa các item */
    gap: 20px; /* Khoảng cách giữa các item */
}

.cthdt {
    display: flex;
    flex-wrap: wrap; /* Cho phép các item tự động xuống dòng nếu không đủ chỗ */
    justify-content: space-between; /* Căn đều khoảng cách giữa các item */
    gap: 20px; /* Khoảng cách giữa các item */
    justify-content: center;
    margin-bottom: 20px
}
/* Chỉnh thẻ item */
.item-hdt {
    width: 30%; /* Mỗi thẻ chiếm 1/3 chiều rộng */
/*    justify-content: center;*/
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}

    /* Hiệu ứng hover cho thẻ */
    .item-hdt:hover {
        transform: translateY(-10px);
    }

    /* Cả ảnh và thông tin đều có kích thước bằng nhau */
    .item-hdt .img-hdt, .item-hdt .info-hdt {
        display: block;
        width: 100%;
    }

    /* Phần ảnh */
    .item-hdt .img-hdt {
        position: relative;
        width: 100%;
        aspect-ratio: 3 / 4; /* Giữ tỷ lệ 3:4 cho phần ảnh */
        overflow: hidden;
    }

        .item-hdt .img-hdt img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover; /* Đảm bảo ảnh không bị méo */
        }
    
    /* Phần thông tin */
    .item-hdt .info-hdt {
        padding: 15px;
        text-decoration: none;
        color: black;
    }

        /* Tiêu đề */
        .item-hdt .info-hdt h3 {
            font-size: 20px;
            font-weight: bold;
            color: black;
            margin-bottom: 10px;
        }

        /* Chức vụ */
        .item-hdt .info-hdt p {
            font-size: 20px;
            color: black;
        }

        /* Hiệu ứng hover cho phần thông tin */
        .item-hdt .info-hdt:hover {
            background-color: #f8f8f8;
            border-radius: 8px;
        }

/* Media query cho màn hình có chiều rộng nhỏ hơn 1024px */
@media (max-width: 1024px) {
    .item-hdt {
        width: 48%; /* Hai thẻ trên một hàng */
    }
}

/* Media query cho màn hình có chiều rộng nhỏ hơn 600px */
@media (max-width: 600px) {
    .item-hdt {
        width: 100%; /* Một thẻ chiếm toàn bộ chiều rộng */
    }
}
.list-cb {
    display: flex;
    flex-wrap: wrap; /* Cho phép các item tự động xuống dòng nếu không đủ chỗ */
    justify-content: space-between; /* Căn đều khoảng cách giữa các item */
    gap: 20px; /* Khoảng cách giữa các item */
}