.blog-page{min-height:100vh;background-color:#f5f7fa;padding:40px 20px}.blog-page .blog-container{max-width:1200px;margin:0 auto}.blog-page .blog-title{text-align:center;font-size:32px;font-weight:700;color:#4a5bb7;margin-bottom:40px}.blog-page .blog-content{display:flex;flex-direction:column;gap:50px}.blog-page .featured-section{display:flex;gap:30px;background:#fff;border-radius:8px;padding:30px;box-shadow:0 4px 20px rgba(80,90,179,.08);border:1px solid rgba(80,90,179,.1);align-items:center}.blog-page .featured-main{flex:1 1}.blog-page .sidebar-articles{width:400px;flex-shrink:0}.blog-page .featured-main{display:flex;flex-direction:column;gap:20px}.blog-page .featured-main h3{font-size:24px;font-weight:600;color:#1a1a1a;margin:0;text-align:center}.blog-page .featured-image-placeholder{width:100%;height:300px;background:linear-gradient(135deg,#d1d5db,#9ca3af);border-radius:8px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;cursor:pointer}.blog-page .featured-image-placeholder .image-icon{font-size:48px;color:#6b7280;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1));width:100%;height:100%;display:flex;align-items:center;justify-content:center}.blog-page .featured-image-placeholder .image-icon img{width:100%;height:100%;object-fit:cover;border-radius:12px}.blog-page .sidebar-articles{display:flex;flex-direction:column;gap:20px}.blog-page .sidebar-card{display:flex;gap:16px;padding:20px;background:#f8f9ff;border-radius:8px;border:1px solid rgba(80,90,179,.08);transition:all .3s ease;cursor:pointer}.blog-page .sidebar-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(80,90,179,.12)}.blog-page .sidebar-image{width:60px;height:60px;background:linear-gradient(135deg,#d1d5db,#9ca3af);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}.blog-page .sidebar-image .image-icon{font-size:24px;color:#6b7280;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.blog-page .sidebar-image .image-icon img{width:100%;height:100%;object-fit:cover;border-radius:8px}.blog-page .sidebar-content{flex:1 1;display:flex;flex-direction:column;justify-content:center}.blog-page .sidebar-content h4{font-size:16px;font-weight:600;color:#4a5bb7;margin:0 0 8px;line-height:1.3}.blog-page .sidebar-content p{font-size:14px;color:#6b7280;margin:0;line-height:1.4}.blog-page .latest-section .section-title{font-size:28px;font-weight:600;color:#1a1a1a;margin:0 0 30px}.blog-page .latest-section .articles-grid{display:flex;flex-wrap:wrap;gap:24px;justify-content:start;width:91%;margin:0 auto}.blog-page .pagination{gap:12px;padding:40px 0;flex-wrap:wrap}.blog-page .page-number,.blog-page .pagination{display:flex;align-items:center;justify-content:center}.blog-page .page-number{width:40px;height:40px;border-radius:8px;font-weight:500;cursor:pointer;transition:all .2s ease;color:#6b7280;border:1px solid #e5e7eb;background:#fff}.blog-page .page-number:hover{background:#f3f4f6;color:#4a5bb7}.blog-page .page-number:disabled{opacity:.5;cursor:not-allowed}.blog-page .page-number:disabled:hover{background:#fff;color:#6b7280}.blog-page .page-number.active{background:#505ab3;color:#fff;border-color:#505ab3;cursor:default}.blog-page .page-number.active:hover{background:#505ab3;color:#fff}.blog-page .page-dots{color:#9ca3af;font-weight:500;padding:0 8px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.blog-page .page-nav{padding:10px 16px;background:#505ab3;color:#fff;border:none;border-radius:8px;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.blog-page .page-nav:hover{background:#4a5bb7}.blog-page .page-nav:disabled{opacity:.5;cursor:not-allowed}.blog-page .page-nav:disabled:hover{background:#505ab3;transform:none}.blog-page .page-nav.prev:hover:not(:disabled){transform:translateX(-2px)}.blog-page .page-nav.next:hover:not(:disabled){transform:translateX(2px)}.blog-page .loading-container{display:flex;align-items:center;justify-content:center;padding:60px 0}.blog-page .loading-spinner{font-size:18px;color:#6b7280;font-weight:500;position:relative}.blog-page .loading-spinner:after{content:"";position:absolute;right:-30px;top:50%;transform:translateY(-50%);width:20px;height:20px;border:2px solid #e5e7eb;border-top-color:#505ab3;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:translateY(-50%) rotate(0deg)}to{transform:translateY(-50%) rotate(1turn)}}.blog-page .bottom-banner{background:#fff;border-radius:8px;padding:0;text-align:center;box-shadow:0 4px 20px rgba(80,90,179,.08);border:1px solid rgba(80,90,179,.1)}.blog-page .bottom-banner h3{font-size:24px;font-weight:600;color:#1a1a1a;margin:0 0 24px}.blog-page .bottom-banner .banner-image{width:100%;height:200px;background:linear-gradient(135deg,#f3f4f6,#d1d5db);border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden}.blog-page .bottom-banner .banner-image .image-icon{font-size:48px;color:#9ca3af;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1));width:100%;height:100%;display:flex;align-items:center;justify-content:center}.blog-page .bottom-banner .banner-image .image-icon img{width:100%;height:100%;object-fit:cover;border-radius:8px}@media(max-width:968px){.blog-page{padding:20px 16px}.blog-page .blog-title{font-size:28px;margin-bottom:30px}.blog-page .featured-section{flex-direction:column;gap:30px;padding:24px}.blog-page .sidebar-articles{width:100%}.blog-page .articles-grid{display:flex;flex-wrap:wrap;gap:20px}}@media(max-width:640px){.blog-page{padding:16px 12px}.blog-page .blog-title{font-size:24px;margin-bottom:24px}.blog-page .featured-section{padding:20px}.blog-page .featured-image-placeholder{height:220px}.blog-page .sidebar-card{padding:16px}.blog-page .article-card{padding:20px}.blog-page .card-image{height:140px;margin-bottom:16px}.blog-page .articles-grid{flex-direction:column;align-items:center}.blog-page .article-card{flex:1 1 100%}.blog-page .bottom-banner .banner-image{height:150px}.blog-page .pagination{padding:30px 0;gap:8px}.blog-page .page-number{width:36px;height:36px;font-size:14px}.blog-page .page-nav{padding:8px 12px;font-size:14px}}