body {
    font-family: 'Segoe UI', Arial, sans-serif;
    margin: 0;
    background: #f5f5f5;
    color: #333;
    line-height: 1.6;
}

a { text-decoration: none; color: inherit; }

.container { width: 90%; max-width: 1200px; margin: 0 auto; }

.site-header {
    background: #222;
    color: #fff;
    padding: 1rem 0;
}
.header-container { display: flex; justify-content: space-between; align-items: center; }
.main-nav ul { list-style: none; display: flex; gap: 1rem; }
.main-nav a { color: #fff; font-weight: 500; }
.search-bar input { padding: 0.3rem; }
.search-bar button { padding: 0.3rem 0.5rem; }

.site-footer { background: #222; color: #fff; padding: 2rem 0; margin-top: 2rem; }
.footer-container { display: flex; gap: 3rem; flex-wrap: wrap; }
.footer-col ul { list-style: none; padding: 0; }
.footer-col a { color: #fff; }

.hero-news {
    position: relative;
    margin: 2rem 0;
}
.hero-news img { width: 100%; max-height: 400px; object-fit: cover; border-radius: 8px; }
.hero-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: rgba(0,0,0,0.5);
    color: #fff; padding: 1rem;
    border-radius: 0 0 8px 8px;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.news-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}
.news-card:hover { transform: translateY(-5px); }
.news-card img { width: 100%; height: 180px; object-fit: cover; }
.news-card h3 { margin: 0.5rem; font-size: 1.1rem; }
.news-card p { margin: 0.5rem; font-size: 0.9rem; color: #555; }
.news-card .category { display:block; margin:0.5rem; font-size:0.8rem; color:#888; }

.article-container { display: flex; flex-wrap: wrap; gap: 2rem; margin: 2rem 0; }
.article-detail { flex: 3; background: #fff; padding: 2rem; border-radius: 8px; box-shadow:0 2px 10px rgba(0,0,0,0.1);}
.article-detail img.article-image { width: 100%; height:auto; object-fit:cover; margin:1rem 0; border-radius:8px; }
.article-detail .meta { font-size:0.9rem; color:#666; margin-bottom:1rem; }
.related-news { flex:1; background:#fff; padding:1rem; border-radius:8px; box-shadow:0 2px 10px rgba(0,0,0,0.05);}
.related-news ul { list-style:none; padding:0; }
.related-news li { margin:0.5rem 0; }
.related-news a { color:#007acc; }