/* Page styles: blog-detail */
/* ── BLOG DETAIL EXTRAS ── */
.blog-detail-layout { display:grid; grid-template-columns:1fr 320px; gap:36px; align-items:start; }
.blog-hero-img { width:100%; height:440px; object-fit:cover; border-radius:16px; margin-bottom:28px; box-shadow:0 8px 32px rgba(0,0,0,.12); }
.blog-meta-bar { display:flex; gap:20px; flex-wrap:wrap; margin-bottom:22px; padding-bottom:18px; border-bottom:2px solid #f0f0f0; }
.blog-meta-bar span { display:flex; align-items:center; gap:7px; font-size:13px; color:#888; }
.blog-meta-bar i { color:#f5a623; }
.blog-cat-badge { background:#f5a623; color:#fff; font-size:11px; font-weight:700; padding:4px 14px; border-radius:20px; }
.blog-title { font-size:34px; font-weight:800; color:#5c1414; line-height:1.25; margin-bottom:18px; }
.blog-content { font-size:15px; color:#444; line-height:1.95; }
.blog-content p { margin-bottom:18px; }
.blog-content h2 { font-size:22px; font-weight:800; color:#5c1414; margin:32px 0 14px; padding-left:14px; border-left:4px solid #f5a623; }
.blog-content h3 { font-size:18px; font-weight:700; color:#5c1414; margin:24px 0 10px; }
.blog-content ul,.blog-content ol { padding-left:22px; margin-bottom:18px; }
.blog-content li { margin-bottom:8px; color:#555; }
.blog-content blockquote { background:#fdf7f7; border-left:4px solid #f5a623; padding:16px 20px; border-radius:0 10px 10px 0; margin:24px 0; font-style:italic; color:#555; font-size:15px; }
.blog-content .tip-box { background:#fff8e1; border-radius:12px; padding:16px 20px; margin:20px 0; display:flex; gap:12px; align-items:flex-start; }
.blog-content .tip-box i { font-size:20px; color:#f5a623; margin-top:2px; flex-shrink:0; }
.blog-content .tip-box p { margin:0; font-size:13px; }
.blog-content .warn-box { background:#fff3f3; border-radius:12px; padding:16px 20px; margin:20px 0; display:flex; gap:12px; align-items:flex-start; border-left:4px solid #e74c3c; }
.blog-content .warn-box i { font-size:20px; color:#e74c3c; margin-top:2px; flex-shrink:0; }
.blog-content .warn-box p { margin:0; font-size:13px; color:#555; }
.blog-inline-img { width:100%; border-radius:12px; margin:20px 0; box-shadow:0 4px 16px rgba(0,0,0,.10); }
.inline-img-caption { text-align:center; font-size:12px; color:#aaa; margin-top:-12px; margin-bottom:20px; }
/* Social share */
.share-bar { display:flex; align-items:center; gap:12px; padding:18px 0; border-top:1px solid #eee; border-bottom:1px solid #eee; margin:28px 0; flex-wrap:wrap; }
.share-bar span { font-size:14px; font-weight:600; color:#5c1414; }
.share-btn { display:inline-flex; align-items:center; gap:7px; padding:8px 16px; border-radius:7px; font-size:13px; font-weight:600; color:#fff; transition:.2s; cursor:pointer; border:none; }
.share-btn.fb { background:#1877f2; }
.share-btn.wa { background:#25d366; }
.share-btn.tw { background:#1da1f2; }
.share-btn.cp { background:#5c1414; }
.share-btn:hover { opacity:.88; }
/* Tags */
.tag-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px; }
.tag-item { padding:5px 14px; background:#fbf0f0; color:#5c1414; font-size:12px; font-weight:600; border-radius:20px; }
/* Author box */
.author-box { display:flex; gap:18px; background:#fdf7f7; border-radius:14px; padding:20px; margin-bottom:30px; align-items:flex-start; }
.author-avatar { width:64px; height:64px; background:#5c1414; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#f5a623; font-size:24px; font-weight:800; flex-shrink:0; }
.author-info h4 { font-size:16px; font-weight:700; color:#5c1414; margin-bottom:3px; }
.author-info span { font-size:12px; color:#f5a623; font-weight:600; display:block; margin-bottom:6px; }
.author-info p { font-size:13px; color:#666; line-height:1.7; }
/* Comments */
.comments-section h3 { font-size:20px; font-weight:800; color:#5c1414; margin-bottom:20px; }
.comment-card { display:flex; gap:14px; margin-bottom:20px; }
.comment-avatar { width:44px; height:44px; background:#5c1414; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#f5a623; font-size:16px; font-weight:700; flex-shrink:0; }
.comment-body { background:#fdf7f7; border-radius:12px; padding:14px 16px; flex:1; }
.comment-body .cn { font-size:14px; font-weight:700; color:#5c1414; }
.comment-body .cd { font-size:11px; color:#aaa; margin-left:8px; }
.comment-body p  { font-size:13px; color:#555; line-height:1.7; margin-top:6px; }
/* Sidebar */
.blog-sb-card { background:#fff; border-radius:14px; box-shadow:0 3px 14px rgba(0,0,0,.08); overflow:hidden; margin-bottom:22px; }
.blog-sb-head { background:#5c1414; color:#fff; padding:14px 18px; font-size:14px; font-weight:700; }
.blog-sb-head span { color:#f5a623; }
.blog-sb-body { padding:16px 18px; }
.related-post { display:flex; gap:11px; align-items:flex-start; padding:10px 0; border-bottom:1px solid #f0f0f0; }
.related-post:last-child { border-bottom:none; }
.related-post img { width:70px; height:58px; object-fit:cover; border-radius:8px; flex-shrink:0; }
.related-post h5 { font-size:13px; font-weight:600; color:#5c1414; line-height:1.4; margin-bottom:3px; }
.related-post span { font-size:11px; color:#bbb; }
@media(max-width:900px){ .blog-detail-layout{grid-template-columns:1fr;} .blog-hero-img{height:280px;} .blog-title{font-size:24px;} }
@media(max-width:540px){ .blog-hero-img{height:220px;} .blog-title{font-size:20px;} }