.section-badge{display:inline-block;font-family:'Inter',sans-serif;font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:3px;color:var(--primary);background:var(--primary-light);padding:4px 16px;border-radius:100px;margin-bottom:12px}.section-title{font-size:clamp(2rem,4vw,2.8rem);line-height:1.2;color:var(--gray-900);margin-bottom:16px}.section-title .highlight{background:linear-gradient(135deg,var(--primary),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}.section-subtitle{font-size:1.1rem;color:var(--gray-500);max-width:600px;margin:0 auto}.section-header{text-align:center;max-width:720px;margin:0 auto 48px auto}.hero-blog{padding:40px 0 60px 0;background:linear-gradient(135deg,var(--gray-50) 0,white 100%);border-bottom:1px solid var(--gray-200)}.hero-blog .hero-blog-content{max-width:720px}.hero-blog .hero-blog-content h1{font-size:clamp(2.2rem,4.5vw,3.4rem);line-height:1.15;margin-bottom:8px}.hero-blog .hero-blog-content h1 .highlight{background:linear-gradient(135deg,var(--primary),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}.hero-blog .hero-blog-content p{font-size:1.1rem;color:var(--gray-500);max-width:560px}.blog-filter{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 8px 0;padding-bottom:8px;border-bottom:1px solid var(--gray-200)}.blog-filter .filter-btn{padding:8px 20px;border-radius:100px;border:1px solid var(--gray-200);background:transparent;color:var(--gray-600);font-weight:500;font-size:0.8rem;cursor:pointer;transition:var(--transition);font-family:'Inter',sans-serif}.blog-filter .filter-btn:hover{border-color:var(--primary);color:var(--primary)}.blog-filter .filter-btn.active{background:var(--primary);border-color:var(--primary);color:white}.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px;margin:32px 0 48px 0}.blog-card{background:white;border-radius:var(--radius-md);overflow:hidden;transition:var(--transition);border:1px solid var(--gray-200);cursor:pointer;display:flex;flex-direction:column}.blog-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}.blog-card .blog-image{width:100%;height:220px;flex-shrink:0;background:var(--gray-200);position:relative;overflow:hidden}.blog-card .blog-image img{width:100%;height:100%;object-fit:cover;transition:var(--transition)}.blog-card:hover .blog-image img{transform:scale(1.05)}.blog-card .blog-image .blog-tag{position:absolute;top:16px;left:16px;background:var(--primary);color:white;padding:4px 14px;border-radius:100px;font-size:0.65rem;font-weight:600;letter-spacing:0.5px}.blog-card .blog-image .blog-date-badge{position:absolute;bottom:16px;right:16px;background:rgba(0,0,0,0.7);backdrop-filter:blur(4px);color:white;padding:4px 14px;border-radius:100px;font-size:0.7rem;font-weight:500}.blog-card .blog-content{padding:24px;flex:1;display:flex;flex-direction:column}.blog-card .blog-meta{display:flex;align-items:center;gap:16px;font-size:0.75rem;color:var(--gray-400);margin-bottom:8px}.blog-card .blog-meta i{margin-right:4px}.blog-card .blog-title{font-family:'Inter',sans-serif;font-size:1.1rem;font-weight:700;color:var(--gray-900);margin-bottom:8px;line-height:1.4}.blog-card .blog-excerpt{font-size:0.9rem;color:var(--gray-500);flex:1;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;line-height:1.5}.blog-card .blog-readmore{display:inline-flex;align-items:center;gap:6px;margin-top:16px;color:var(--primary);font-weight:600;font-size:0.85rem;transition:var(--transition)}.blog-card .blog-readmore i{transition:var(--transition)}.blog-card:hover .blog-readmore i{transform:translateX(4px)}

.sidebar-blog{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin:16px 0 48px 0}.sidebar-widget{background:white;border-radius:var(--radius-md);padding:28px;border:1px solid var(--gray-200)}.sidebar-widget h4{font-family:'Inter',sans-serif;font-size:0.85rem;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--gray-700);margin-bottom:16px;display:flex;align-items:center;gap:8px}.sidebar-widget .widget-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--gray-100);cursor:pointer;transition:var(--transition)}.sidebar-widget .widget-item:last-child{border-bottom:none}.sidebar-widget .widget-item:hover{padding-left:4px;color:var(--primary)}.sidebar-widget .widget-item .widget-icon-box{width:44px;height:44px;border-radius:10px;background:var(--primary-light);display:flex;align-items:center;justify-content:center;color:var(--primary);flex-shrink:0}.sidebar-widget .widget-item .widget-text{flex:1}.sidebar-widget .widget-item .widget-text h5{font-size:0.85rem;font-weight:600;margin-bottom:2px;line-height:1.3}.sidebar-widget .widget-item .widget-text span{font-size:0.7rem;color:var(--gray-400)}.widget-tags{display:flex;flex-wrap:wrap;gap:8px}.widget-tags .tag{padding:4px 14px;border-radius:100px;background:var(--gray-100);color:var(--gray-600);font-size:0.75rem;font-weight:500;cursor:pointer;transition:var(--transition)}.widget-tags .tag:hover{background:var(--primary);color:white}@media (max-width:768px){.blog-grid{grid-template-columns:1fr}}@media (max-width:480px){.blog-filter{gap:6px} .blog-filter .filter-btn{padding:6px 14px;font-size:0.7rem}}

/*view*/
.breadcrumbs{padding:24px 0 8px 0;font-size:0.8rem;color:var(--gray-500)}.breadcrumbs a{color:var(--gray-500);text-decoration:none;transition:var(--transition)}.breadcrumbs a:hover{color:var(--primary)}.breadcrumbs span{color:var(--gray-400);margin:0 8px}.breadcrumbs .current{color:var(--gray-700);font-weight:500}.article-page{display:grid;grid-template-columns:2fr 1fr;gap:48px;margin:16px 0 60px 0;align-items:start}.article-header{margin-bottom:32px}.article-header .article-tag{display:inline-block;background:var(--primary-light);color:var(--primary);padding:4px 16px;border-radius:100px;font-size:0.7rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}.article-header h1{font-size:clamp(2rem,3.5vw,2.8rem);line-height:1.2;margin-bottom:12px;color:var(--gray-900)}.article-header .article-meta{display:flex;flex-wrap:wrap;gap:20px;font-size:0.85rem;color:var(--gray-500);padding-bottom:16px;border-bottom:1px solid var(--gray-200)}.article-header .article-meta i{margin-right:6px}.article-header .article-meta .author{font-weight:600;color:var(--gray-700)}.article-featured-image{border-radius:var(--radius-md);overflow:hidden;margin-bottom:32px;background:var(--gray-200)}.article-featured-image img{width:100%;height:auto;display:block}.article-body{font-size:1.05rem;color:var(--gray-700);line-height:1.8}.article-body p{margin-bottom:20px}.article-body h2{font-family:'Playfair Display',serif;font-size:1.6rem;margin:36px 0 12px 0;color:var(--gray-900)}.article-body h3{font-family:'Playfair Display',serif;font-size:1.3rem;margin:28px 0 10px 0;color:var(--gray-800)}.article-body ul,.article-body ol{margin:0 0 20px 24px}.article-body li{margin-bottom:8px}.article-body .highlight-box{background:var(--primary-light);border-left:4px solid var(--primary);padding:20px 24px;border-radius:var(--radius-sm);margin:24px 0}.article-body .highlight-box strong{color:var(--primary)}.article-body blockquote{border-left:4px solid var(--gold);padding:16px 24px;margin:24px 0;background:var(--gold-light);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-style:italic;color:var(--gray-600)}.article-tags-section{display:flex;flex-wrap:wrap;gap:8px;margin:32px 0 24px 0;padding-top:24px;border-top:1px solid var(--gray-200)}.article-tags-section .tag-label{font-size:0.8rem;font-weight:600;color:var(--gray-600);margin-right:8px;display:flex;align-items:center}.article-tags-section .tag{padding:4px 14px;border-radius:100px;background:var(--gray-100);color:var(--gray-600);font-size:0.75rem;font-weight:500;cursor:pointer;transition:var(--transition)}.article-tags-section .tag:hover{background:var(--primary);color:white}.article-share{display:flex;align-items:center;gap:12px;margin:16px 0 32px 0}.article-share span{font-size:0.85rem;font-weight:600;color:var(--gray-600)}.article-share a{width:40px;height:40px;border-radius:50%;background:var(--gray-100);color:var(--gray-500);display:flex;align-items:center;justify-content:center;text-decoration:none;transition:var(--transition);font-size:0.9rem}.article-share a:hover{background:var(--primary);color:white;transform:translateY(-2px)}.author-bio{background:white;border-radius:var(--radius-md);padding:28px;border:1px solid var(--gray-200);display:flex;gap:24px;align-items:flex-start;margin:32px 0}.author-bio .author-avatar{width:80px;height:80px;border-radius:50%;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:2.2rem;color:var(--primary);flex-shrink:0}.author-bio .author-info h4{font-family:'Inter',sans-serif;font-size:1rem;font-weight:700;margin-bottom:2px}.author-bio .author-info .author-role{font-size:0.8rem;color:var(--primary);font-weight:500;margin-bottom:6px}.author-bio .author-info p{font-size:0.9rem;color:var(--gray-500);line-height:1.6}
.related-posts{margin:40px 0 16px 0}.related-posts h3{font-family:'Inter',sans-serif;font-size:1.1rem;font-weight:700;margin-bottom:20px}.related-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.related-card{display:flex;gap:14px;align-items:center;padding:16px;background:white;border-radius:var(--radius-sm);border:1px solid var(--gray-200);transition:var(--transition);text-decoration:none;color:inherit;cursor:pointer}.related-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:transparent}.related-card .related-img{width:80px;height:80px;border-radius:var(--radius-sm);background:var(--gray-200);flex-shrink:0;overflow:hidden}.related-card .related-img img{width:100%;height:100%;object-fit:cover}.related-card .related-text h5{font-family:'Inter',sans-serif;font-size:0.85rem;font-weight:600;margin-bottom:2px;line-height:1.3;color:var(--gray-900)}.related-card .related-text span{font-size:0.7rem;color:var(--gray-400)}.related-card:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.sidebar-toc{background:white;border-radius:var(--radius-md);padding:28px;border:1px solid var(--gray-200);margin-bottom:24px}.sidebar-toc h4{font-family:'Inter',sans-serif;font-size:0.85rem;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--gray-700);margin-bottom:12px;display:flex;align-items:center;gap:8px}.sidebar-toc ul{list-style:none}.sidebar-toc ul li{padding:6px 0;border-bottom:1px solid var(--gray-100)}.sidebar-toc ul li:last-child{border-bottom:none}.sidebar-toc ul li a{color:var(--gray-600);text-decoration:none;font-size:0.85rem;transition:var(--transition);display:block}.sidebar-toc ul li a:hover{color:var(--primary);padding-left:4px}@media (max-width:1024px){.article-page{grid-template-columns:1.6fr 1fr;gap:32px}}@media (max-width:768px){.nav-menu{display:none !important} .article-page{grid-template-columns:1fr;gap:32px} .article-sidebar{position:static} .related-grid{grid-template-columns:1fr} .author-bio{flex-direction:column;align-items:center;text-align:center}}@media (max-width:480px){.article-share{flex-wrap:wrap} .breadcrumbs{font-size:0.7rem}}
.table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:24px 0 32px 0;border-radius:var(--radius-sm);border:1px solid var(--gray-200)}.table-responsive table{width:100%;min-width:640px;border-collapse:collapse;font-size:0.9rem;background:white}.table-responsive thead{background:var(--primary);color:white}.table-responsive thead th{padding:14px 20px;text-align:left;font-weight:600;font-size:0.8rem;text-transform:uppercase;letter-spacing:0.5px;white-space:nowrap}.table-responsive tbody td{padding:12px 20px;border-bottom:1px solid var(--gray-200);color:var(--gray-700);vertical-align:top}.table-responsive tbody tr:last-child td{border-bottom:none}.table-responsive tbody tr:hover{background:var(--primary-light);transition:var(--transition)}.table-responsive table caption{caption-side:bottom;text-align:left;font-size:0.8rem;color:var(--gray-500);padding:8px 4px 0 4px;font-style:italic}@media (max-width:768px){.table-responsive table{min-width:520px;font-size:0.8rem} .table-responsive thead th{padding:10px 14px;font-size:0.7rem} .table-responsive tbody td{padding:10px 14px}}@media (max-width:480px){.table-responsive table{min-width:460px;font-size:0.75rem} .table-responsive thead th{padding:8px 12px;font-size:0.65rem} .table-responsive tbody td{padding:8px 12px}}.article-body .table-responsive{margin:28px 0 32px 0}