body { font-family: 'Segoe UI', Arial, sans-serif; line-height: 1.6; color: #333; background: #f8f9fa; margin: 0; }
header { background: #1a1a1a; color: #fff; padding: 30px 0; text-align: center; border-bottom: 4px solid #d32f2f; }
.container { width: 90%; max-width: 1100px; margin: auto; display: flex; flex-wrap: wrap; gap: 25px; padding: 30px 0; }
.main-content { flex: 2; background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.sidebar { flex: 1; min-width: 300px; }
.article-card { border-bottom: 1px solid #eee; padding: 20px 0; transition: 0.3s; }
.article-card:hover { transform: translateX(5px); }
.article-card a { color: #d32f2f; text-decoration: none; font-size: 1.3rem; font-weight: bold; display: block; margin-bottom: 5px; }
.article-card p { font-size: 0.95rem; color: #666; margin: 0; }
.cta-box { background: #222; color: #fff; padding: 25px; border-radius: 12px; text-align: center; position: sticky; top: 20px; }
.btn-main { display: inline-block; background: #ff4500; color: #fff; padding: 15px 30px; text-decoration: none; border-radius: 50px; font-weight: bold; margin-top: 15px; box-shadow: 0 4px 10px rgba(255,69,0,0.3); transition: 0.3s; }
.btn-main:hover { background: #e03e00; transform: scale(1.05); }
.meta { font-size: 0.85rem; color: #999; margin-bottom: 20px; }
.back-link { color: #fff; text-decoration: none; font-weight: bold; border: 1px solid #fff; padding: 5px 15px; border-radius: 20px; }
article h1 { color: #1a1a1a; font-size: 2.2rem; line-height: 1.2; }
.mid-ad { background: #fff8f8; border-left: 4px solid #d32f2f; padding: 15px; margin: 20px 0; }
footer { text-align: center; padding: 20px; background: #1a1a1a; color: #888; font-size: 0.8rem; width: 100%; }
@media (max-width: 768px) { .container { flex-direction: column; } .sidebar { order: -1; } }