/*
Theme Name: Flatsome Child
Description: This is my theme
Author: Custom
Template: flatsome
Version: 1.0
*/
/* CSS cho Custom Image Box */
.custom-image-box-style-1 {
    border-bottom: 1px solid #eee; /* Đường kẻ mỏng ở dưới */
    padding-bottom: 15px;
    margin-bottom: 15px;
}

/* Toàn bộ box là một liên kết */
.custom-image-box-style-1 .custom-box-link {
    text-decoration: none;
    display: block;
    color: inherit; /* Lấy màu chữ của trang */
}

/* Hiệu ứng khi di chuột */
.custom-image-box-style-1 .custom-box-link:hover .custom-box-title {
    color: #111; /* Đổi màu tiêu đề khi hover */
    opacity: 0.8;
}

/* Tiêu đề lớn */
.custom-image-box-style-1 .custom-box-title {
    font-size: 1.5em; /* Kích thước tiêu đề lớn (giống hình 1) */
    font-weight: 600; /* Hoặc 700 nếu bạn muốn đậm hơn */
    line-height: 1.3;
    margin-bottom: 10px;
    color: #333;
    transition: color 0.3s;
}

/* Wrapper chứa ảnh và text */
.custom-image-box-style-1 .custom-box-content-wrapper {
    display: flex; /* Dùng flexbox để đặt ảnh và text cạnh nhau */
    gap: 15px; /* Khoảng cách giữa ảnh và text */
    align-items: flex-start; /* Căn các mục lên trên cùng */
}

/* Phần hình ảnh */
.custom-image-box-style-1 .custom-box-image {
    flex-shrink: 0; /* Ngăn ảnh bị co lại */
    width: 120px; /* Chiều rộng ảnh (giống hình 1) */
    height: 90px; /* Chiều cao ảnh */
}

.custom-image-box-style-1 .custom-box-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Đảm bảo ảnh luôn vừa vặn, không bị méo */
    border-radius: 4px; /* Bo góc nhẹ */
}

/* Phần text bên phải */
.custom-image-box-style-1 .custom-box-text {
    flex-grow: 1; /* Cho phép phần text chiếm không gian còn lại */
}

/* Meta (Category + Time) */
.custom-image-box-style-1 .custom-box-meta {
    font-size: 0.85em;
    color: #777;
    display: block;
    margin-bottom: 5px;
    line-height: 1.4;
}

.custom-image-box-style-1 .custom-box-category {
    color: #d90000; /* Màu đỏ cho danh mục (giống hình) */
    font-weight: bold;
    text-transform: uppercase; /* Viết hoa danh mục */
}

/* Tóm tắt */
.custom-image-box-style-1 .custom-box-excerpt {
    font-size: 0.9em;
    line-height: 1.5;
    color: #555;
    margin: 0; /* Bỏ margin mặc định của thẻ <p> */
}

/* Responsive cho điện thoại */
@media (max-width: 549px) {
    .custom-image-box-style-1 .custom-box-title {
        font-size: 1.2em; /* Giảm cỡ chữ tiêu đề trên di động */
    }
}