.blog-topbar{background:#0b1220;color:#fff;border-bottom:1px solid rgba(255,255,255,.1)}
.blog-container{width:min(1120px,calc(100% - 40px));margin:0 auto}
.blog-nav{height:72px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.blog-brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.blog-brand img{width:38px;height:38px;object-fit:contain}
.blog-nav nav{display:flex;gap:8px;flex-wrap:wrap}
.blog-nav nav a{color:#cbd5e1;text-decoration:none;font-weight:700;padding:9px 11px;border-radius:10px}
.blog-nav nav a:hover,.blog-nav nav a[aria-current="page"]{background:rgba(255,255,255,.08);color:#fff}
.blog-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:28px;padding:42px 0 70px}
.blog-heading h1{font-size:clamp(30px,5vw,52px);line-height:1.05;margin:4px 0 20px;color:#0f172a}
.blog-search{display:flex;gap:10px;margin-bottom:20px}
.blog-search input,.blog-comment-form input,.blog-comment-form textarea{width:100%;border:1px solid #dbe1ee;border-radius:12px;padding:12px 14px;font:inherit}
.blog-search button,.blog-comment-form button{border:0;border-radius:12px;padding:12px 18px;background:#2563eb;color:#fff;font-weight:800;cursor:pointer}
.blog-card{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;background:#fff;border:1px solid #e6e8f2;border-radius:18px;padding:18px;margin-bottom:16px;box-shadow:0 16px 38px rgba(15,23,42,.06)}
.blog-card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;background:#eef2f7}
.blog-card h2{margin:6px 0 8px;font-size:24px}.blog-card h2 a{text-decoration:none;color:#0f172a}.blog-card p{color:#5b6478;margin:0 0 12px}
.blog-meta,.blog-empty{color:#64748b;font-size:14px;font-weight:700}.blog-read,.blog-back{color:#2563eb;font-weight:800;text-decoration:none}
.blog-sidebar{display:flex;flex-direction:column;gap:16px}.blog-widget{background:#fff;border:1px solid #e6e8f2;border-radius:18px;padding:18px}
.blog-widget h2{font-size:18px;margin:0 0 12px}.blog-widget>a{display:flex;justify-content:space-between;text-decoration:none;color:#0f172a;padding:9px 0;border-bottom:1px solid #eef2f7}.blog-widget>a:last-child{border-bottom:0}
.blog-tags{display:flex;gap:8px;flex-wrap:wrap}.blog-tags a{background:#eef2ff;color:#1d4ed8;border-radius:999px;padding:7px 10px;text-decoration:none;font-size:13px;font-weight:800}
.blog-article{max-width:820px;margin:0 auto;padding:46px 0 28px}.blog-article h1{font-size:clamp(34px,6vw,60px);line-height:1.04;margin:8px 0 14px;color:#0f172a}
.blog-excerpt{font-size:19px;color:#5b6478}.blog-cover{width:100%;max-height:460px;object-fit:cover;border-radius:18px;margin:26px 0}
.blog-content{font-size:18px;line-height:1.75;color:#172033}.blog-content img{max-width:100%;border-radius:14px}.blog-content a{color:#2563eb}
.blog-comments{max-width:820px;margin:0 auto 70px}.blog-comment{background:#fff;border:1px solid #e6e8f2;border-radius:14px;padding:16px;margin-bottom:12px}.blog-comment span{display:block;color:#64748b;font-size:13px;margin-top:3px}
.blog-comment-form{display:grid;gap:12px;background:#fff;border:1px solid #e6e8f2;border-radius:18px;padding:20px;margin-top:22px}.blog-message{background:#ecfdf5;color:#166534;border-radius:12px;padding:10px 12px;margin:0}
@media (max-width:840px){.blog-layout{grid-template-columns:1fr}.blog-card{grid-template-columns:1fr}.blog-nav{height:auto;padding:14px 0;align-items:flex-start;flex-direction:column}}

/* ===== Blog: breadcrumb, pagination, related, image widgets (2026-07 update) ===== */
.blog-breadcrumb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;color:#64748b;margin:0 0 14px}
.blog-breadcrumb a{color:#64748b;text-decoration:none}
.blog-breadcrumb a:hover{color:#2563eb;text-decoration:underline}
.blog-breadcrumb span[aria-current]{color:#0f172a;font-weight:700;max-width:60ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.blog-pagination{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:26px}
.blog-pagination a,.blog-pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:40px;padding:9px 13px;border-radius:12px;border:1px solid #e2e8f0;background:#fff;color:#0f172a;text-decoration:none;font-weight:700;font-size:14px}
.blog-pagination a:hover{border-color:#2563eb;color:#2563eb}
.blog-pagination span[aria-current]{background:linear-gradient(135deg,#6d28d9,#2563eb);color:#fff;border-color:transparent}
.blog-related{margin:34px 0 8px}
.blog-related h2{font-size:20px;margin:0 0 14px}
.blog-related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.blog-related-card{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid #e2e8f0;border-radius:16px;background:#fff;text-decoration:none;color:#0f172a;font-size:14px;line-height:1.5;transition:box-shadow .15s ease,border-color .15s ease}
.blog-related-card:hover{border-color:#2563eb;box-shadow:0 10px 26px rgba(37,99,235,.12)}
.blog-related-card img{width:100%;height:120px;object-fit:cover;border-radius:12px}
.blog-image-box{margin-bottom:10px}
.blog-image-box img{width:100%;max-height:200px;object-fit:cover;border-radius:14px;border:1px solid var(--admin-line,#e2e8f0)}
.blog-content table{width:100%;border-collapse:collapse;margin:18px 0;font-size:15px}
.blog-content table th,.blog-content table td{border:1px solid #e2e8f0;padding:10px 12px;text-align:left;vertical-align:top}
.blog-content table th{background:#f8fafc}
.blog-content pre{background:#0f172a;color:#e2e8f0;border-radius:14px;padding:16px 18px;overflow:auto;font-size:14px}
.blog-content blockquote{border-left:4px solid #6d28d9;margin:18px 0;padding:6px 18px;background:#f8f7ff;border-radius:0 14px 14px 0;color:#334155}
.blog-content img{max-width:100%;height:auto;border-radius:14px}
.blog-cta{margin:26px 0;padding:22px 24px;border-radius:18px;background:linear-gradient(135deg,#6d28d9,#2563eb);color:#fff}
.blog-cta h3{margin:0 0 8px;color:#fff}
.blog-cta p{margin:0 0 14px;color:#e0e7ff}
.blog-cta a{display:inline-flex;padding:11px 18px;border-radius:12px;background:#fff;color:#1d4ed8;font-weight:800;text-decoration:none}