.blog-hero { background: linear-gradient(135deg, #0c1c30, #1B3A5C); padding: 60px 20px; text-align: center; color: #fff; }
    .blog-hero h1 { font-size: 2.2rem; font-weight: 900; margin-bottom: 10px; }
    .blog-hero p { color: rgba(255,255,255,0.6); max-width: 500px; margin: 0 auto; }
    .blog-filters { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding: 20px; max-width: 1100px; margin: 0 auto; }
    .filter-btn { padding: 8px 18px; border-radius: 50px; border: 1px solid #e2e8f0; background: #fff; color: #495057; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.2s; }
    .filter-btn.active { background: #0c1c30; color: #fff; border-color: #0c1c30; }
    .filter-btn:hover { border-color: #3793D1; }
    .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 100%; margin: 0 auto; padding: 0 40px 60px; }
    .blog-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; overflow: hidden; transition: all 0.3s; cursor: pointer; }
    .blog-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.1); }
    .blog-card.featured { border: 2px solid #3793D1; grid-column: span 2; }
    .blog-card .bc-img { width: 100%; height: 240px; object-fit: cover; background: linear-gradient(135deg, #f1f5f9, #e2e8f0); display: flex; align-items: center; justify-content: center; font-size: 3rem; color: #cbd5e1; }
    .blog-card .bc-body { padding: 24px; }
    .blog-card .bc-category { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; margin-bottom: 10px; }
    .bc-cat-Guide { background: #dbeafe; color: #1d4ed8; }
    .bc-cat-Career { background: #fef3c7; color: #d97706; }
    .bc-cat-Experience { background: #dcfce7; color: #16a34a; }
    .bc-cat-Tips { background: #f3e8ff; color: #9333ea; }
    .bc-cat-Analysis { background: #fff1f2; color: #e11d48; }
    .bc-cat-Ranking { background: #fef9c3; color: #a16207; }
    .blog-card .bc-title { font-size: 1.15rem; font-weight: 800; color: #0c1c30; margin-bottom: 10px; line-height: 1.4; }
    .blog-card .bc-excerpt { font-size: 0.9rem; color: #64748b; line-height: 1.6; margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .blog-card .bc-footer { display: flex; align-items: center; justify-content: space-between; }
    .blog-card .bc-author { display: flex; align-items: center; gap: 8px; }
    .blog-card .bc-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #e2e8f0; }
    .blog-card .bc-avatar-initials { width: 32px; height: 32px; border-radius: 50%; background: #3793D1; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; }
    .blog-card .bc-name { font-size: 0.8rem; font-weight: 600; color: #334155; }
    .blog-card .bc-stats { display: flex; gap: 12px; font-size: 0.75rem; color: #94a3b8; }
    .blog-card .bc-stats span { display: flex; align-items: center; gap: 4px; }
    .blog-card .bc-featured-badge { position: absolute; top: 12px; right: 12px; background: #f59e0b; color: #fff; padding: 4px 12px; border-radius: 20px; font-size: 0.7rem; font-weight: 700; }
    .blog-card { position: relative; }
    .write-blog-btn { position: fixed; bottom: 24px; right: 24px; z-index: 100; background: linear-gradient(135deg, #3793D1, #1B6FA8); color: #fff; border: none; padding: 14px 24px; border-radius: 50px; font-weight: 700; font-size: 0.9rem; cursor: pointer; box-shadow: 0 4px 20px rgba(55,147,209,0.3); display: flex; align-items: center; gap: 8px; transition: all 0.2s; }
    .write-blog-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(55,147,209,0.4); }
    .coming-soon { display:none; text-align:center; padding:80px 20px; max-width:500px; margin:0 auto; }
    .coming-soon .cs-icon { width:80px; height:80px; border-radius:50%; background:linear-gradient(135deg, #dbeafe, #bfdbfe); display:flex; align-items:center; justify-content:center; margin:0 auto 24px; }
    .coming-soon .cs-icon i { font-size:2rem; color:#3793D1; }
    .coming-soon h2 { font-size:1.8rem; font-weight:900; color:#0c1c30; margin-bottom:12px; }
    .coming-soon p { font-size:1rem; color:#64748b; line-height:1.7; margin-bottom:24px; }
    .coming-soon .cs-btn { display:inline-flex; align-items:center; gap:8px; padding:12px 28px; background:#0c1c30; color:#fff; border-radius:50px; font-weight:700; font-size:0.9rem; text-decoration:none; transition:all 0.2s; }
    .coming-soon .cs-btn:hover { background:#1B3A5C; transform:translateY(-2px); }
    @media (max-width: 1100px) { .blog-grid { grid-template-columns: repeat(2, 1fr); padding: 0 20px 60px; } }
    @media (max-width: 768px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } .blog-hero h1 { font-size: 1.6rem; } }
    @media (max-width: 500px) { .blog-grid { grid-template-columns: 1fr; } }