<?php get_header(); ?>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;700&display=swap" rel="stylesheet">

<style>
/* Hiệu ứng xuất hiện bắt mắt */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section-projects {
    padding: 60px 0;
    background-color: #FEEFD5; /* Màu nền kem theo profile của bạn */
    font-family: 'Be Vietnam Pro', sans-serif !important;
}

.project-column {
    animation: fadeInUp 0.8s ease backwards;
    /* Giữ nguyên các thuộc tính khác của cột */
}

/* Ẩn triệt để các phần tử ngày tháng nếu còn sót lại từ class chung */
.post-date, .entry-date, .date-meta {
    display: none !important;
}
</style>

<section class="section-projects">
    <div class="container">
        <div class="section-header" style="text-align: center; margin-bottom: 40px;">
            <h2 style="color: #0056a7; font-weight: 800; text-transform: uppercase;">
                Tin tức & Dự án <span style="color: #E6B800;">Mới nhất</span>
            </h2>
        </div>

        <div class="project-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px;">
            <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                <div class="project-column">
                    <a href="<?php the_permalink(); ?>" style="text-decoration: none;">
                        <div class="image-wrapper" style="overflow: hidden; border-radius: 12px;">
                            <?php if (has_post_thumbnail()) { the_post_thumbnail('large'); } ?>
                        </div>
                        
                        <div class="project-info" style="padding: 15px 0;">
                            <h3 style="color: #0056a7; font-size: 1.2rem; margin: 10px 0; font-weight: 700; text-transform: uppercase;">
                                <?php the_title(); ?>
                            </h3>
                            
                            <div class="excerpt" style="color: #555; font-size: 0.9rem;">
                                <?php echo wp_trim_words(get_the_excerpt(), 20); ?>
                            </div>
                        </div>
                    </a>
                </div>
            <?php endwhile; endif; ?>
        </div>
    </div>
</section>

<?php get_footer(); ?>