/* BLOG POST PAGE V3 */
.blog-post-hero { padding:24px 0 0; background:linear-gradient(180deg, #E8F4FD 0%, #F5FAFF 100%); }
.blog-post-breadcrumb { padding:16px 0; font-size:14px; color:var(--text-l); }
.blog-post-breadcrumb a { color:var(--p); }
.blog-post-breadcrumb a:hover { text-decoration:underline; }
.blog-post-breadcrumb .sep { margin:0 8px; color:var(--border); }

/* Post Layout */
.blog-post-section { padding:40px 0 var(--sp); background:#fff; }
.blog-post-layout { display:grid; grid-template-columns:1fr 320px; gap:48px; align-items:start; }

/* Post Content */
.blog-post-header { margin-bottom:24px; }
.blog-post-badge { display:inline-block; padding:6px 16px; background:var(--p); color:#fff; font-size:12px; font-weight:600; border-radius:4px; text-transform:uppercase; margin-bottom:12px; }
.blog-post-title { font-family:var(--fh); font-size:32px; font-weight:700; line-height:1.3; margin-bottom:16px; }
.blog-post-meta { display:flex; align-items:center; gap:20px; font-size:14px; color:var(--text-l); flex-wrap:wrap; }
.blog-post-meta span { display:flex; align-items:center; gap:6px; }
.blog-post-meta i { color:var(--p); }

.blog-post-img { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--r); margin-bottom:32px; }

.blog-post-content { color:var(--text-s); line-height:1.8; }
.blog-post-content h2 { font-family:var(--fh); font-size:24px; color:var(--text); margin:32px 0 16px; }
.blog-post-content h3 { font-family:var(--fh); font-size:20px; color:var(--text); margin:24px 0 12px; }
.blog-post-content p { margin-bottom:16px; }
.blog-post-content img { width:100%; max-width:400px; border-radius:var(--r); margin:16px 0; }
.blog-post-content img.float-left { float:left; margin-right:24px; max-width:300px; }
.blog-post-content img.float-right { float:right; margin-left:24px; max-width:300px; }
.blog-post-content ul, .blog-post-content ol { margin:16px 0; padding-left:24px; }
.blog-post-content li { margin-bottom:8px; }
.blog-post-content strong { color:var(--text); }

/* Conclusion Box */
.blog-conclusion { background:var(--bg-light); border-radius:var(--r); padding:24px 32px; margin:32px 0; display:flex; align-items:center; gap:16px; }
.blog-conclusion i { font-size:32px; color:var(--p); flex-shrink:0; }
.blog-conclusion h4 { font-family:var(--fh); font-size:18px; margin-bottom:6px; }
.blog-conclusion p { font-size:14px; color:var(--text-s); margin:0; }

/* Share */
.blog-share { display:flex; align-items:center; gap:16px; padding:24px 0; border-top:1px solid var(--border); margin-top:32px; }
.blog-share span { font-weight:600; font-size:14px; }
.blog-share a { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px; transition:0.3s; }
.blog-share a:hover { transform:translateY(-2px); }
.blog-share .fb { background:#3b5998; }
.blog-share .tw { background:#1da1f2; }
.blog-share .wa { background:#25d366; }
.blog-share .li { background:#0077b5; }

/* Prev/Next */
.blog-nav { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:32px; }
.blog-nav-item { display:flex; align-items:center; gap:16px; padding:20px; background:var(--bg-light); border-radius:var(--r); transition:0.3s; }
.blog-nav-item:hover { background:var(--p); color:#fff; }
.blog-nav-item:hover h4, .blog-nav-item:hover p { color:#fff; }
.blog-nav-item img { width:80px; height:80px; border-radius:var(--r-sm); object-fit:cover; flex-shrink:0; }
.blog-nav-item div h4 { font-size:14px; font-weight:600; margin-bottom:4px; color:var(--text); transition:0.3s; }
.blog-nav-item div p { font-size:12px; color:var(--text-l); transition:0.3s; }

/* Sidebar */
.blog-post-sidebar { display:flex; flex-direction:column; gap:24px; }
.blog-post-widget { background:var(--bg-light); border-radius:var(--r); padding:24px; }
.blog-post-widget h3 { font-family:var(--fh); font-size:18px; margin-bottom:16px; }

/* Author */
.blog-author { display:flex; align-items:center; gap:16px; }
.blog-author img { width:64px; height:64px; border-radius:50%; object-fit:cover; }
.blog-author div h4 { font-size:16px; font-weight:600; margin-bottom:4px; }
.blog-author div p { font-size:13px; color:var(--text-s); line-height:1.5; }

/* Promo Card */
.blog-promo { background:var(--p); border-radius:var(--r); padding:32px 24px; text-align:center; color:#fff; }
.blog-promo h3 { font-family:var(--fh); font-size:20px; margin-bottom:12px; }
.blog-promo p { font-size:14px; opacity:0.9; margin-bottom:20px; }

@media(max-width:1199px){
  .blog-post-layout{grid-template-columns:1fr;}
  .blog-post-sidebar{max-width:400px;margin:0 auto;width:100%;}
}
@media(max-width:767px){
  .blog-post-title{font-size:24px;}
  .blog-post-content img.float-left,.blog-post-content img.float-right{float:none;max-width:100%;margin:16px 0;}
  .blog-nav{grid-template-columns:1fr;}
}