.article-header{padding:var(--spacing-xl) 0;background-color:var(--color-bg-white);border-bottom:1px solid var(--color-border-light);}
.article-header-content{max-width:900px;margin:0 auto;}
.article-category-badge{display:inline-flex;align-items:center;gap:4px;padding:6px var(--spacing-md);background-color:rgba(24,144,255,0.1);color:var(--color-primary);font-size:var(--font-size-sm);font-weight:600;border-radius:var(--border-radius-base);margin-bottom:var(--spacing-md);}
.article-title{font-size:var(--font-size-h1);font-weight:700;line-height:var(--line-height-heading);color:var(--color-text-primary);margin-bottom:var(--spacing-md);}
.article-summary{font-size:var(--font-size-lg);color:var(--color-text-secondary);line-height:var(--line-height-base);margin-bottom:var(--spacing-lg);}
.article-meta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacing-lg);padding:var(--spacing-md) 0;font-size:var(--font-size-sm);color:var(--color-text-tertiary);border-top:1px solid var(--color-border-light);border-bottom:1px solid var(--color-border-light);}
.meta-item{display:flex;align-items:center;gap:6px;}
.article-main{padding:20px 0;}
.article-layout{display:grid;grid-template-columns:1fr;gap:var(--spacing-xl);margin:0 auto;}
.breadcrumb-container{display:flex;justify-content:flex-start;align-items:center;gap:8px;min-width:0;overflow:hidden;width:100%;}
@media (max-width:768px){.breadcrumb-container{width:auto !important;gap:4px;padding:0 0;margin-left:auto;margin-right:auto;margin-top:14px;max-width:90%;overflow:hidden;}.article-layout{display:block;}}
.article-content-wrapper{background-color:var(--color-bg-white);border-radius:var(--border-radius-lg);padding:20px;box-shadow:var(--shadow-sm);}
.article-meta-info{width:100%;display:flex;justify-content:center;align-content:center;padding:10px 0;}
.article-published-time,.article-author{padding:0 6px;}
.article-published-time{font-weight:bold;}
.article-cover{width:100%;border-radius:var(--border-radius-lg);margin-bottom:var(--spacing-xl);box-shadow:var(--shadow-base);}
.article-content{font-size:var(--font-size-base);line-height:1.8;color:var(--color-text-primary);}
.article-content h1,.article-content h2,.article-content h3,.article-content h4,.article-content h5,.article-content h6{margin-top:var(--spacing-xl);margin-bottom:var(--spacing-md);font-weight:600;line-height:var(--line-height-heading);}
.article-content h1{font-size:var(--font-size-h2);margin-top:16px;}
.article-content h2{font-size:var(--font-size-h3);}
.article-content h3{font-size:var(--font-size-h4);}
.article-content p{margin-bottom:var(--spacing-md);text-align:justify;}
.article-content img{max-width:100%;height:auto;border-radius:var(--border-radius-base);margin:var(--spacing-lg) 0;box-shadow:var(--shadow-sm);}
.article-content a{color:var(--color-primary);text-decoration:underline;transition:color var(--transition-fast);}
.article-content a:hover{color:var(--color-primary-dark);}
.article-content blockquote{margin:var(--spacing-lg) 0;padding:var(--spacing-md) var(--spacing-lg);border-left:4px solid var(--color-primary);background-color:var(--color-bg-light);border-radius:var(--border-radius-base);font-style:italic;color:var(--color-text-secondary);}
.article-content code{padding:2px 6px;background-color:var(--color-bg-light);color:#e83e8c;border-radius:var(--border-radius-sm);font-family:'Courier New',monospace;font-size:0.9em;}
.article-content pre{background-color:#282c34;color:#abb2bf;padding:var(--spacing-md);border-radius:var(--border-radius-base);overflow-x:auto;margin:var(--spacing-lg) 0;}
.article-content pre code{background:none;color:inherit;padding:0;}
.article-content ul,.article-content ol{margin:var(--spacing-md) 0;padding-left:var(--spacing-xl);}
.article-content li{margin-bottom:var(--spacing-xs);}
.article-content table{width:100%;margin:var(--spacing-lg) 0;border-collapse:collapse;border-radius:var(--border-radius-base);overflow:hidden;box-shadow:var(--shadow-sm);}
.article-content th,.article-content td{padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--color-border-light);text-align:left;}
.article-content th{background-color:var(--color-bg-light);font-weight:600;}
.article-actions{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-md);padding:var(--spacing-lg) 0;margin-top:var(--spacing-xl);border-top:1px solid var(--color-border-light);}
.article-tags{display:flex;align-items:center;gap:var(--spacing-sm);flex-wrap:wrap;}
.article-tags-label{font-size:var(--font-size-sm);color:var(--color-text-tertiary);}
.article-tag{padding:4px var(--spacing-sm);background-color:var(--color-bg-light);color:var(--color-text-secondary);font-size:var(--font-size-xs);border-radius:var(--border-radius-sm);transition:all var(--transition-fast);}
.article-tag:hover{background-color:var(--color-primary);color:var(--color-text-white);}
.article-share{display:flex;align-items:center;gap:var(--spacing-sm);}
.share-button{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background-color:var(--color-bg-light);border-radius:var(--border-radius-round);color:var(--color-text-secondary);transition:all var(--transition-fast);}
.share-button:hover{background-color:var(--color-primary);color:var(--color-text-white);transform:translateY(-2px);}
.social-share-section{margin-top:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);background:linear-gradient(135deg,#f8fafc 0%,#f1f5f9 100%);border-radius:var(--border-radius-base);border:1px solid var(--color-border-light);}
.social-share-title{display:flex;align-items:center;gap:var(--spacing-xs);font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-primary);margin-bottom:var(--spacing-xs);}
.social-share-title svg{color:var(--color-primary);width:16px;height:16px;}
.social-share-buttons{display:flex;flex-wrap:wrap;gap:var(--spacing-xs);}
.share-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--border-radius-base);font-size:var(--font-size-xs);font-weight:500;color:#fff;text-decoration:none;transition:all var(--transition-fast);box-shadow:var(--shadow-sm);}
.share-btn svg{width:16px;height:16px;}
.share-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);color:#fff;}
.share-btn:active{transform:translateY(0);}
.share-btn svg{flex-shrink:0;}
.share-btn-facebook{background:linear-gradient(135deg,#1877f2 0%,#0d65d9 100%);}
.share-btn-facebook:hover{background:linear-gradient(135deg,#0d65d9 0%,#0a52b3 100%);}
.share-btn-twitter{background:linear-gradient(135deg,#1da1f2 0%,#0c85d0 100%);}
.share-btn-twitter:hover{background:linear-gradient(135deg,#0c85d0 0%,#0a6fb0 100%);}
.share-btn-whatsapp{background:linear-gradient(135deg,#25d366 0%,#1da851 100%);}
.share-btn-whatsapp:hover{background:linear-gradient(135deg,#1da851 0%,#178a42 100%);}
.share-btn-linkedin{background:linear-gradient(135deg,#0a66c2 0%,#0854a0 100%);}
.share-btn-linkedin:hover{background:linear-gradient(135deg,#0854a0 0%,#064580 100%);}
.share-btn-pinterest{background:linear-gradient(135deg,#e60023 0%,#c4001d 100%);}
.share-btn-pinterest:hover{background:linear-gradient(135deg,#c4001d 0%,#a00018 100%);}
.share-btn-email{background:linear-gradient(135deg,#6b7280 0%,#4b5563 100%);}
.share-btn-email:hover{background:linear-gradient(135deg,#4b5563 0%,#374151 100%);}
@media (max-width:480px){.share-btn{padding:12px;}.share-btn span{display:none;}}
.article-navigation{margin-top:var(--spacing-xl);padding:var(--spacing-lg);background:var(--color-bg-white);border-radius:var(--border-radius-lg);border:1px solid var(--color-border-light);box-shadow:var(--shadow-sm);}
.nav-section-title{display:flex;align-items:center;gap:var(--spacing-xs);font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin-bottom:var(--spacing-lg);padding-bottom:var(--spacing-sm);border-bottom:2px solid var(--color-primary);}
.nav-section-title svg{color:var(--color-primary);}
.nav-articles-grid{display:grid;grid-template-columns:1fr;gap:var(--spacing-md);}
.nav-article{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);background:linear-gradient(135deg,#f8fafc 0%,#f1f5f9 100%);border-radius:var(--border-radius-lg);border:1px solid var(--color-border-light);text-decoration:none;transition:all var(--transition-base);}
.nav-article:hover{background:linear-gradient(135deg,var(--color-primary-light) 0%,var(--color-primary) 100%);border-color:var(--color-primary);box-shadow:var(--shadow-lg);transform:translateY(-2px);}
.nav-article:hover .nav-article-icon,.nav-article:hover .nav-label,.nav-article:hover .nav-title{color:#fff;}
.nav-article-icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:var(--color-bg-white);border-radius:var(--border-radius-round);color:var(--color-primary);flex-shrink:0;transition:all var(--transition-fast);box-shadow:var(--shadow-sm);}
.nav-article:hover .nav-article-icon{background:rgba(255,255,255,0.2);}
.nav-article-content{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1;}
.nav-article-prev .nav-article-content{text-align:left;}
.nav-article-next .nav-article-content{text-align:right;}
.nav-label{font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:var(--color-text-tertiary);transition:color var(--transition-fast);}
.nav-title{font-size:var(--font-size-base);font-weight:500;color:var(--color-text-primary);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color var(--transition-fast);}
.nav-article-placeholder{display:none;}
@media (max-width:767px){.article-navigation{margin-top:20px;padding:16px;}.nav-article{gap:14px;padding:4px 8px;}.nav-article-icon{width:32px;height:32px;}.nav-title{font-size:13px;}.nav-articles-grid{gap:10px;}}
.article-sidebar{display:none;}
.sidebar-widget{background-color:var(--color-bg-white);border-radius:var(--border-radius-lg);padding:var(--spacing-lg);margin-bottom:var(--spacing-lg);box-shadow:var(--shadow-sm);}
.sidebar-title{font-size:var(--font-size-lg);font-weight:600;margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:2px solid var(--color-primary);}
.sidebar-link{display:block;padding:var(--spacing-sm) 0;color:var(--color-text-secondary);font-size:var(--font-size-sm);border-bottom:1px solid var(--color-border-light);transition:all var(--transition-fast);}
.sidebar-link:hover{color:var(--color-primary);padding-left:var(--spacing-xs);}
.sidebar-link:last-child{border-bottom:none;}
.toc-list{list-style:none;padding-left:0;}
.toc-item{margin-bottom:var(--spacing-xs);}
.toc-link{display:block;padding:var(--spacing-xs) var(--spacing-sm);color:var(--color-text-secondary);font-size:var(--font-size-sm);border-left:2px solid var(--color-border-light);transition:all var(--transition-fast);}
.toc-link:hover,.toc-link.active{color:var(--color-primary);border-left-color:var(--color-primary);background-color:rgba(24,144,255,0.05);}
@media (min-width:768px){.article-title{font-size:calc(var(--font-size-h1) * 1.1);}.nav-articles-grid{grid-template-columns:repeat(2,1fr);}.nav-article-placeholder{display:block;}}
@media (min-width:1024px){.article-layout{grid-template-columns:1fr 320px;}.article-sidebar{display:block;}.sidebar-widget.sticky{position:sticky;top:calc(var(--header-height) + var(--spacing-md));}}
.related-articles-section,.other-articles-section,.comment-section{margin-top:var(--spacing-xl);padding:var(--spacing-lg);background:var(--color-bg-white);border-radius:var(--border-radius-lg);border:1px solid var(--color-border-light);box-shadow:var(--shadow-sm);}
.section-title{display:flex;align-items:center;gap:var(--spacing-xs);font-size:var(--font-size-lg);font-weight:600;color:var(--color-text-primary);margin-bottom:var(--spacing-lg);padding-bottom:var(--spacing-sm);border-bottom:2px solid var(--color-primary);}
.section-title svg{color:var(--color-primary);flex-shrink:0;}
.related-articles-grid{display:grid;grid-template-columns:1fr;gap:var(--spacing-md);}
.related-article-card{display:block;text-decoration:none;border-radius:var(--border-radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:all var(--transition-base);}
.related-article-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.related-article-image{position:relative;width:100%;padding-bottom:56.25%;background-color:var(--color-bg-light);overflow:hidden;}
.related-article-image img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform var(--transition-base);}
.related-article-card:hover .related-article-image img{transform:scale(1.05);}
.related-article-placeholder{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#e2e8f0 0%,#cbd5e1 100%);color:var(--color-text-tertiary);}
.related-article-overlay{position:absolute;bottom:0;left:0;right:0;padding:var(--spacing-md);background:linear-gradient(to top,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.4) 60%,transparent 100%);}
.related-article-title{font-size:var(--font-size-base);font-weight:600;color:#fff;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;}
@media (min-width:640px){.related-articles-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1024px){.related-articles-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:767px){.related-articles-section,.other-articles-section{padding:8px;}.related-article-overlay{padding:6px;}.related-article-title{font-size:14px;}.other-article-link{padding:4px 0px !important;gap:3px !important;}.other-article-link span{font-size:13px !important;}}
.other-articles-list{list-style:none;padding:0;margin:0;}
.other-article-item{border-bottom:1px solid var(--color-border-light);}
.other-article-item:last-child{border-bottom:none;}
.other-article-link{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-xs) var(--spacing-sm);color:var(--color-text-secondary);text-decoration:none;transition:all var(--transition-fast);}
.other-article-link:hover{color:var(--color-primary);background-color:rgba(24,144,255,0.05);padding-left:var(--spacing-md);}
.other-article-link svg{flex-shrink:0;color:var(--color-text-quaternary);transition:color var(--transition-fast);}
.other-article-link:hover svg{color:var(--color-primary);}
.other-article-link span{font-size:var(--font-size-base);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.comment-section{padding:var(--spacing-sm) var(--spacing-md);margin-top:var(--spacing-md);}
.comment-section .section-title{font-size:var(--font-size-base);margin-bottom:var(--spacing-sm);padding-bottom:var(--spacing-xs);}
.comment-form{display:flex;flex-direction:column;gap:var(--spacing-sm);}
.form-group{display:flex;flex-direction:column;gap:2px;}
.form-label{font-size:var(--font-size-xs);font-weight:600;color:var(--color-text-primary);}
.form-label .required{color:var(--color-error);margin-left:2px;}
.form-input,.form-textarea{width:100%;padding:8px var(--spacing-sm);font-size:var(--font-size-sm);color:var(--color-text-primary);background-color:var(--color-bg-white);border:1px solid var(--color-border);border-radius:var(--border-radius-base);transition:all var(--transition-fast);font-family:inherit;}
.form-input:focus,.form-textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px rgba(24,144,255,0.1);}
.form-input::placeholder,.form-textarea::placeholder{color:var(--color-text-quaternary);}
.form-textarea{resize:vertical;min-height:60px;}
.form-hint{font-size:11px;color:var(--color-text-tertiary);}
.form-row{display:grid;grid-template-columns:1fr;gap:var(--spacing-sm);}
@media (min-width:640px){.form-row{grid-template-columns:1fr 1fr;}}
.captcha-group{max-width:350px;}
.captcha-wrapper{display:flex;align-items:stretch;gap:var(--spacing-xs);}
.captcha-input{flex:1;min-width:0;}
.captcha-image-wrapper{display:flex;align-items:center;gap:4px;flex-shrink:0;}
.captcha-image{height:34px;width:auto;border-radius:var(--border-radius-sm);border:1px solid var(--color-border);cursor:pointer;}
.captcha-refresh{display:flex;align-items:center;justify-content:center;width:34px;height:34px;background-color:var(--color-bg-light);border:1px solid var(--color-border);border-radius:var(--border-radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-fast);}
.captcha-refresh svg{width:14px;height:14px;}
.captcha-refresh:hover{background-color:var(--color-primary);border-color:var(--color-primary);color:#fff;}
.form-actions{display:flex;justify-content:flex-start;padding-top:var(--spacing-xs);}
.btn-submit{display:inline-flex;align-items:center;gap:6px;padding:8px var(--spacing-md);font-size:var(--font-size-sm);font-weight:600;color:#fff;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);border:none;border-radius:var(--border-radius-base);cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-sm);}
.btn-submit svg{width:14px;height:14px;}
.btn-submit:hover{background:linear-gradient(135deg,var(--color-primary-dark) 0%,#064580 100%);transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.btn-submit:active{transform:translateY(0);}
.btn-submit:disabled{opacity:0.6;cursor:not-allowed;transform:none;}
.form-notice{display:flex;align-items:center;gap:6px;padding:6px var(--spacing-sm);background-color:rgba(24,144,255,0.08);border-radius:var(--border-radius-sm);border-left:2px solid var(--color-primary);}
.form-notice svg{flex-shrink:0;color:var(--color-primary);width:14px;height:14px;}
.form-notice span{font-size:var(--font-size-xs);color:var(--color-text-secondary);line-height:1.4;}
.comment-message{margin-top:var(--spacing-sm);padding:var(--spacing-sm);border-radius:var(--border-radius-base);text-align:center;}
.comment-message.success{background-color:rgba(82,196,26,0.1);border:1px solid var(--color-success);}
.comment-message.error{background-color:rgba(245,34,45,0.1);border:1px solid var(--color-error);}
.message-content{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm);}
.message-icon{width:48px;height:48px;border-radius:var(--border-radius-round);display:flex;align-items:center;justify-content:center;}
.comment-message.success .message-icon{background-color:var(--color-success);color:#fff;}
.comment-message.error .message-icon{background-color:var(--color-error);color:#fff;}
.message-text{font-size:var(--font-size-base);font-weight:500;margin:0;}
.comment-message.success .message-text{color:var(--color-success);}
.comment-message.error .message-text{color:var(--color-error);}
.sidebar-random-articles .sidebar-title{display:flex;align-items:center;gap:var(--spacing-xs);}
.sidebar-random-articles .sidebar-title svg{color:var(--color-primary);}
.sidebar-article-list{list-style:none;padding:0;margin:0;overflow-y:auto;}
.sidebar-article-item{border-bottom:1px solid var(--color-border-light);}
.sidebar-article-item:last-child{border-bottom:none;}
.sidebar-article-link{display:flex;align-items:flex-start;gap:6px;padding:var(--spacing-xs) 0;color:var(--color-text-secondary);text-decoration:none;font-size:var(--font-size-sm);line-height:1.4;transition:all var(--transition-fast);}
.sidebar-article-link:hover{color:var(--color-primary);padding-left:var(--spacing-xs);}
.sidebar-article-link svg{flex-shrink:0;margin-top:2px;color:var(--color-text-quaternary);transition:color var(--transition-fast);}
.sidebar-article-link:hover svg{color:var(--color-primary);}
.sidebar-article-link span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.sidebar-quick-nav .sidebar-title{display:flex;align-items:center;gap:var(--spacing-xs);}
.sidebar-quick-nav .sidebar-title svg{color:var(--color-primary);}
.sidebar-nav-grid{display:flex;flex-direction:column;gap:var(--spacing-xs);}
.sidebar-nav-item{display:flex;align-items:center;padding:10px var(--spacing-md);background:linear-gradient(135deg,#f8fafc 0%,#f1f5f9 100%);border-radius:var(--border-radius-base);border:1px solid var(--color-border-light);color:var(--color-text-secondary);text-decoration:none;font-size:var(--font-size-sm);font-weight:500;transition:all var(--transition-fast);}
.sidebar-nav-item:hover{background:linear-gradient(135deg,var(--color-primary-light) 0%,var(--color-primary) 100%);border-color:var(--color-primary);color:#fff;transform:translateX(4px);box-shadow:var(--shadow-sm);}
.nav-item-text{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}