/* ============ Page Banner ============ */
.page-banner { background: #f0f0f0; padding: 50px 0 40px; text-align: center; border-bottom: 1px solid #eee; }
.page-banner h1 { font-size: 30px; font-weight: 700; color: #434343; margin-bottom: 12px; letter-spacing: 2px; }
.breadcrumb { font-size: 13px; color: #888; }
.breadcrumb a { color: #434343; font-weight: 600; text-decoration: underline; }
.breadcrumb a:hover { color: #F5A623; }
.breadcrumb span { margin: 0 6px; }
.breadcrumb .current { color: #888; }

/* ============ News Detail Layout ============ */
.news-detail-main { padding: 40px 0 60px; }
.news-detail-layout { display: flex; gap: 30px; }

/* ============ Article ============ */
.news-article { flex: 1; }

.article-header { margin-bottom: 25px; }
.news-tag { display: inline-block; padding: 3px 10px; font-size: 11px; font-weight: 500; color: #F5A623; background: #FFF8EE; border-radius: 2px; margin-bottom: 12px; }
.article-header h2 { font-size: 24px; font-weight: 700; color: #434343; line-height: 1.5; margin-bottom: 14px; }
.article-meta { display: flex; gap: 20px; font-size: 13px; color: #bbb; }
.article-meta i { margin-right: 4px; }

.article-cover { margin-bottom: 30px; overflow: hidden; }
.article-cover img { width: 100%; display: block; }

.article-body { line-height: 1.9; color: #555; font-size: 14px; }
.article-body p { margin-bottom: 16px; }
.article-body h3 { font-size: 17px; font-weight: 600; color: #434343; margin: 28px 0 12px; padding-left: 10px; border-left: 3px solid #F5A623; }
.article-body ul { padding-left: 20px; margin-bottom: 16px; }
.article-body ul li { margin-bottom: 8px; font-size: 14px; color: #555; line-height: 1.8; }
.article-body ul li strong { color: #434343; }

/* ============ Prev / Next ============ */
.article-nav { display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; margin-top: 30px; border-top: 1px solid #eee; }
.article-nav a { flex: 1; padding: 15px 18px; background: #f9f9f9; border-radius: 2px; transition: background .3s; }
.article-nav a:hover { background: #f0f0f0; }
.nav-label { display: block; font-size: 12px; color: #bbb; margin-bottom: 6px; }
.nav-label i { font-size: 11px; }
.nav-title { font-size: 14px; color: #555; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.nav-next { text-align: right; }

/* ============ Sidebar ============ */
.news-sidebar { flex: 0 0 280px; position: sticky; top: 110px; align-self: flex-start; }
.sidebar-block { margin-bottom: 25px; border: 1px solid #eee; padding: 20px; background: #fff; }
.sidebar-block h3 { font-size: 16px; font-weight: 700; color: #434343; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 2px solid #eee; display: flex; align-items: center; gap: 8px; }
.sidebar-block h3 span { width: 3px; height: 16px; background: #F5A623; display: inline-block; }

/* Recent List */
.recent-list { list-style: none; padding: 0; margin: 0; }
.recent-list li { border-bottom: 1px solid #f0f0f0; }
.recent-list li:last-child { border-bottom: none; }
.recent-list li a { display: block; padding: 10px 0; }
.recent-list li a:hover h5 { color: #F5A623; }
.recent-list li h5 { font-size: 13px; font-weight: 500; color: #555; line-height: 1.5; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.recent-date { font-size: 12px; color: #bbb; }

/* Category Links */
.category-links { list-style: none; padding: 0; margin: 0; }
.category-links li { border-bottom: 1px solid #f0f0f0; }
.category-links li:last-child { border-bottom: none; }
.category-links li a { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; font-size: 13px; color: #666; transition: color .3s; }
.category-links li a:hover { color: #F5A623; }
.category-links li a i { font-size: 11px; color: #ccc; }

/* ============ Responsive ============ */
@media (max-width: 992px) {
    .news-detail-layout { flex-direction: column; }
    .news-sidebar { flex: none; position: static; }
}
@media (max-width: 576px) {
    .page-banner h1 { font-size: 24px; }
    .article-header h2 { font-size: 20px; }
    .article-nav { flex-direction: column; }
}