/* ==========================================================================
   Khối Blog và tin tức (Blog & News Section - Figma Node 1:2511)
   ========================================================================== */

.blog-section {
    padding: 80px 0;
    background-color: #ffffff;
    position: relative;
}

/* Tiêu đề phần blog tin tức kèm thanh đánh dấu bên trái */
.blog-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 48px;
}

.blog-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--primary-color); /* Chữ màu xanh ngọc sáng */
    margin: 0;
    line-height: 1;
}

/* Lưới chứa các thẻ bài viết */
.blog-grid {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
}

/* Thẻ tin tức đơn lẻ */
.blog-card {
    flex: 1 1 290px; /* Tự động co giãn theo chiều ngang, chiều rộng cơ sở 290px */
    max-width: 305px; /* Giới hạn chiều rộng tối đa theo Figma */
    height: 420px;
    background-color: #FAFAFA;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Khung chứa ảnh bìa tin tức */
.blog-card-img-wrapper {
    position: relative;
    width: 100%;
    height: 168px;
    overflow: hidden;
}

.blog-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Nhãn ngày tháng (Date Badge) đè lên ảnh */
.blog-card-date {
    position: absolute;
    top: 16px;
    left: 16px;
    background-color: var(--accent-color); /* Màu vàng cam của HVG */
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 15px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

/* Nội dung của thẻ tin tức */
.blog-card-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Tự động lấp đầy phần chiều cao còn lại của thẻ */
}

/* Tiêu đề tin tức */
.blog-card-title {
    font-size: 16px;
    font-weight: 700;
    color: #2a2a2a;
    line-height: 1.4;
    margin-bottom: 12px;
    /* Giới hạn hiển thị tối đa 2 dòng tiêu đề */
    display: -webkit-box;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Nội dung tóm tắt */
.blog-card-desc {
    font-size: 14px;
    color: rgba(38, 38, 38, 0.8);
    line-height: 1.5;
    margin-bottom: 20px;
    /* Giới hạn hiển thị tối đa 3 dòng nội dung tóm tắt */
    display: -webkit-box;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Phần chân của thẻ tin tức chứa liên kết Xem thêm */
.blog-card-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto; /* Đẩy chân thẻ xuống sát đáy */
}

.blog-card-link {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Nút tròn chứa mũi tên */
.blog-card-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background-color: var(--primary-color);
    border-radius: 50%;
    color: #ffffff;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.blog-card-arrow svg {
    display: block;
    width: 12px;
    height: 12px;
}
/* ==========================================================================
   Thiết kế tương thích (Responsive Media Queries)
   ========================================================================== */

/* Trình duyệt từ 1200px trở xuống */
@media (max-width: 1200px) {
    .blog-grid {
        justify-content: center; /* Căn giữa các thẻ khi không đủ chỗ dàn hàng ngang */
        gap: 24px;
    }
}

/* Trình duyệt từ 992px trở xuống (Tablet) */
@media (max-width: 992px) {
    .blog-section {
        /* Giảm padding trên màn hình tablet */
        padding: 40px 0;
    }

    .blog-header {
        margin-bottom: 36px;
    }

    .blog-title {
        /* Giảm cỡ chữ tiêu đề chính trên tablet */
        font-size: 28px;
    }

    .blog-card-title {
        /* Giảm cỡ chữ tiêu đề bài viết trên tablet */
        font-size: 15px;
    }

    .blog-card-link {
        /* Giảm cỡ chữ liên kết xem thêm trên tablet */
        font-size: 15px;
    }

    .blog-title-marker {
        height: 32px;
    }

    .blog-card {
        flex: 0 1 calc(50% - 12px); /* Hiển thị 2 cột trên Tablet */
        max-width: 340px; /* Tăng nhẹ chiều rộng tối đa để cân đối hơn */
    }
}

/* Trình duyệt từ 576px trở xuống (Mobile) */
@media (max-width: 576px) {
    .blog-section {
        /* Giảm padding trên màn hình di động */
        padding: 25px 0;
    }

    .blog-title {
        /* Giảm thêm cỡ chữ tiêu đề chính trên di động nhỏ */
        font-size: 24px !important;
    }

    .blog-card-title {
        /* Giảm thêm cỡ chữ tiêu đề bài viết trên di động nhỏ */
        font-size: 14px !important;
    }

    .blog-card-desc {
        /* Giảm thêm cỡ chữ mô tả bài viết trên di động nhỏ */
        font-size: 13px !important;
    }

    .blog-card-link {
        /* Giảm thêm cỡ chữ liên kết xem thêm trên di động nhỏ */
        font-size: 14px !important;
    }

    .blog-grid {
        flex-direction: column;
        align-items: center;
    }

    .blog-card {
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%; /* Giãn rộng tối đa trên màn hình di động */
        height: auto; /* Chiều cao tự động dựa theo nội dung */
        min-height: 400px;
    }

    .blog-card-img-wrapper {
        height: 180px; /* Tăng nhẹ chiều cao ảnh bìa trên mobile */
    }
}

/* ==========================================================================
   Cấu hình cuộn ngang cho phần Blog ở màn hình từ 1024px trở xuống
   Giúp người dùng có thể vuốt/cuộn ngang để xem danh sách blog một cách mượt mà.
   ========================================================================== */
@media (max-width: 1024px) {
    .blog-grid {
        flex-direction: row !important; /* Đảm bảo xếp hàng ngang kể cả trên mobile */
        flex-wrap: nowrap !important; /* Không cho phép xuống dòng */
        justify-content: flex-start !important; /* Căn lề trái cho các thẻ */
        align-items: stretch !important; /* Các thẻ cao bằng nhau tự nhiên */
        overflow-x: auto !important; /* Bật thanh cuộn ngang */
        overflow-y: hidden !important; /* Ẩn cuộn dọc */
        padding-bottom: 20px !important; /* Tạo khoảng trống tránh mất bóng đổ của thẻ và chừa chỗ cho thanh cuộn */
        -webkit-overflow-scrolling: touch; /* Cuộn mượt mà trên thiết bị di động iOS */
        scrollbar-width: thin; /* Cấu hình thanh cuộn mỏng cho Firefox */
        scrollbar-color: var(--primary-color) transparent; /* Màu sắc thanh cuộn trên Firefox */
    }

    /* Tùy chỉnh thanh cuộn ngang trên Chrome, Safari, Edge và các trình duyệt nhân Webkit */
    .blog-grid::-webkit-scrollbar {
        height: 6px; /* Chiều cao của thanh cuộn ngang */
    }

    .blog-grid::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.05); /* Nền thanh cuộn */
        border-radius: 10px;
    }

    .blog-grid::-webkit-scrollbar-thumb {
        background-color: var(--primary-color); /* Màu nút cuộn */
        border-radius: 10px;
    }

    .blog-card {
        flex: 0 0 290px !important; /* Cố định kích thước chiều rộng, không cho phép co lại */
        max-width: 290px !important;
        width: 290px !important;
        height: 420px !important; /* Cố định chiều cao của thẻ bài viết */
        margin-bottom: 0 !important; /* Loại bỏ khoảng cách dưới */
    }
}