.blog-page{padding-top:100px;padding-bottom:60px} .blog-header{padding:20px 0 10px} .blog-header h1{font-size:2.4rem;font-weight:800;color:var(--primary)} .blog-header h1 span{color:var(--accent)} .blog-header p{color:var(--text-light);font-size:1.05rem;margin-top:4px} .blog-layout{display:grid;grid-template-columns:1fr 320px;gap:40px;margin-top:30px} .blog-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px} 
.blog-card{background:var(--bg-white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:var(--transition);border:1px solid var(--border-color);position:relative}.blog-card .blog-link{display:block;text-decoration:none;color:inherit;cursor:pointer}.blog-card .blog-link::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;z-index:1}.blog-card .blog-link .read-more{position:relative;z-index:2}.blog-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);border-color:var(--accent)}.blog-card .image{height:200px;background-size:cover;background-position:center;position:relative}.blog-card .image .category-badge{position:absolute;top:14px;left:14px;background:var(--accent);color:#fff;padding:4px 14px;border-radius:60px;font-size:0.7rem;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;z-index:3}.blog-card .content{padding:20px 24px 24px;position:relative;z-index:2}.blog-card .content .meta{display:flex;align-items:center;gap:16px;font-size:0.8rem;color:var(--text-light);margin-bottom:8px}.blog-card .content .meta i{margin-right:4px}.blog-card .content .meta .date,.blog-card .content .meta .views{display:flex;align-items:center;gap:4px}.blog-card .content h3{font-size:1.1rem;font-weight:700;color:var(--primary);margin-bottom:8px;line-height:1.4;transition:var(--transition)}.blog-card .blog-link:hover .content h3{color:var(--accent)}.blog-card .content p{font-size:0.92rem;color:var(--text-gray);line-height:1.6;margin-bottom:16px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.blog-card .content .read-more{color:var(--accent);font-weight:600;font-size:0.85rem;display:inline-flex;align-items:center;gap:6px;transition:var(--transition)}.blog-card .blog-link:hover .read-more{gap:12px}

.sidebar{display:flex;flex-direction:column;gap:30px} .sidebar-search{background:var(--bg-white);border-radius:var(--radius);padding:20px 24px;border:1px solid var(--border-color);box-shadow:var(--shadow)} .sidebar-search h4{font-size:0.9rem;font-weight:700;color:var(--primary);margin-bottom:12px} .sidebar-search .search-box{display:flex;border:2px solid var(--border-color);border-radius:var(--radius-sm);overflow:hidden;transition:var(--transition)} .sidebar-search .search-box:focus-within{border-color:var(--accent)} .sidebar-search .search-box input{flex:1;padding:10px 7px;border:none;background:transparent;font-size:0.95rem;color:var(--text-dark);outline:none} .sidebar-search .search-box button{padding:10px 16px;background:var(--accent);color:#fff;border:none;cursor:pointer;transition:var(--transition)} .sidebar-search .search-box button:hover{background:var(--accent-hover)} .sidebar-categories{background:var(--bg-white);border-radius:var(--radius);padding:20px 24px;border:1px solid var(--border-color);box-shadow:var(--shadow)} .sidebar-categories h4{font-size:0.9rem;font-weight:700;color:var(--primary);margin-bottom:12px;display:flex;align-items:center;gap:8px} .sidebar-categories h4 i{color:var(--accent)} .sidebar-categories ul li{padding:8px 0;border-bottom:1px solid var(--border-color)} .sidebar-categories ul li:last-child{border-bottom:none} .sidebar-categories ul li a{display:flex;justify-content:space-between;align-items:center;font-size:0.92rem;color:var(--text-gray);transition:var(--transition)} .sidebar-categories ul li a:hover{color:var(--accent)} .sidebar-categories ul li a .count{background:var(--bg-light);color:var(--text-light);padding:0 10px;border-radius:60px;font-size:0.75rem;font-weight:600} .sidebar-popular{background:var(--bg-white);border-radius:var(--radius);padding:20px 24px;border:1px solid var(--border-color);box-shadow:var(--shadow)} .sidebar-popular h4{font-size:0.9rem;font-weight:700;color:var(--primary);margin-bottom:12px;display:flex;align-items:center;gap:8px} .sidebar-popular h4 i{color:var(--accent)} .sidebar-popular .popular-item{display:flex;gap:14px;padding:10px 0;border-bottom:1px solid var(--border-color);cursor:pointer;transition:var(--transition)} .sidebar-popular .popular-item:last-child{border-bottom:none} .sidebar-popular .popular-item:hover .popular-title{color:var(--accent)} .sidebar-popular .popular-item .popular-img{width:70px;height:70px;border-radius:var(--radius-sm);background-size:cover;background-position:center;flex-shrink:0} .sidebar-popular .popular-item .popular-title{font-size:0.85rem;font-weight:600;color:var(--primary);line-height:1.3;transition:var(--transition)} .sidebar-popular .popular-item .popular-date{font-size:0.75rem;color:var(--text-light)} .sidebar-tags{background:var(--bg-white);border-radius:var(--radius);padding:20px 24px;border:1px solid var(--border-color);box-shadow:var(--shadow)} .sidebar-tags h4{font-size:0.9rem;font-weight:700;color:var(--primary);margin-bottom:12px;display:flex;align-items:center;gap:8px} .sidebar-tags h4 i{color:var(--accent)} .sidebar-tags .tags-cloud{display:flex;flex-wrap:wrap;gap:8px} .sidebar-tags .tags-cloud a{background:var(--bg-light);padding:4px 14px;border-radius:60px;font-size:0.8rem;color:var(--text-gray);transition:var(--transition)} .sidebar-tags .tags-cloud a:hover{background:var(--accent);color:#fff} .sidebar-banner{background:linear-gradient(145deg,var(--primary),var(--primary-dark));border-radius:var(--radius);padding:28px 24px;color:#fff;text-align:center;border:1px solid var(--border-color);box-shadow:var(--shadow)} .sidebar-banner .badge{display:inline-block;background:var(--accent);padding:2px 14px;border-radius:60px;font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px} .sidebar-banner h4{font-size:1.3rem;font-weight:700;margin-bottom:6px} .sidebar-banner h4 span{color:var(--accent-light)} .sidebar-banner p{font-size:0.9rem;opacity:0.85;margin-bottom:16px} .sidebar-banner .btn-accent{background:var(--accent-light)} .sidebar-banner .btn-accent:hover{background:var(--accent)} .pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:40px} .pagination a,.pagination span{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius-sm);font-weight:600;font-size:0.95rem;color:var(--text-gray);transition:var(--transition);border:1px solid var(--border-color);background:var(--bg-white)} .pagination a:hover{border-color:var(--accent);color:var(--accent)} .pagination .active{background:var(--accent);color:#fff;border-color:var(--accent)} .pagination .prev,.pagination .next{width:auto;padding:0 18px;gap:6px} 

@media (max-width:1024px){.blog-layout{grid-template-columns:1fr} .sidebar{display:grid;grid-template-columns:1fr 1fr;gap:24px} .main-nav{display:none} .mobile-toggle{display:block} .header-phone{display:none} .header-actions .btn-primary{padding:10px 18px;font-size:0.75rem} .header-actions .btn-primary span{display:none} } 
@media (max-width:768px){.blog-grid{grid-template-columns:1fr} .sidebar{grid-template-columns:1fr} .blog-header h1{font-size:1.8rem} .blog-page{padding-top:80px} .blog-card .image{height:160px} .pagination a,.pagination span{width:38px;height:38px;font-size:0.85rem} .pagination .prev,.pagination .next{padding:0 12px} } @media (max-width:480px){.blog-header h1{font-size:1.5rem} .blog-card .content{padding:16px 18px 20px} .blog-card .content h3{font-size:1rem} .sidebar-search,.sidebar-categories,.sidebar-popular,.sidebar-tags,.sidebar-banner{padding:16px 18px} } </style>
<style> .article-page{padding-top:100px;padding-bottom:60px} .article-layout{display:grid;grid-template-columns:1fr 320px;gap:40px;margin-top:20px} .article-main{background:var(--bg-white);border-radius:var(--radius);padding:40px 44px;box-shadow:var(--shadow);border:1px solid var(--border-color)} .article-main .category-badge{display:inline-block;background:var(--accent);color:#fff;padding:4px 16px;border-radius:60px;font-size:0.7rem;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:12px} .article-main h1{font-size:2.2rem;font-weight:800;color:var(--primary);line-height:1.2;margin-bottom:12px} .article-main .article-meta{display:flex;flex-wrap:wrap;gap:20px;font-size:0.9rem;color:var(--text-light);padding-bottom:16px;border-bottom:1px solid var(--border-color);margin-bottom:24px} .article-main .article-meta i{margin-right:6px} .article-main .article-meta .author{color:var(--accent);font-weight:600} .article-main .featured-image{border-radius:var(--radius);overflow:hidden;margin-bottom:28px} .article-main .featured-image img{width:100%;max-height:420px;object-fit:cover} .article-main .article-content{font-size:1.05rem;color:var(--text-gray);line-height:1.9} .article-main .article-content p{margin-bottom:18px} .article-main .article-content h2{font-size:1.5rem;font-weight:700;color:var(--primary);margin:32px 0 12px} .article-main .article-content h3{font-size:1.2rem;font-weight:700;color:var(--primary);margin:24px 0 10px} .article-main .article-content ul{margin:16px 0 20px;padding-left:24px;list-style:disc} .article-main .article-content ul li{margin-bottom:8px;color:var(--text-gray)} .article-main .article-content ul li::marker{color:var(--accent)} .article-main .article-content ol{margin:16px 0 20px;padding-left:24px;list-style:decimal} .article-main .article-content ol li{margin-bottom:8px;color:var(--text-gray)} .article-main .article-content ol li::marker{color:var(--accent);font-weight:700} .article-main .article-content blockquote{border-left:4px solid var(--accent);padding:16px 24px;margin:24px 0;background:var(--bg-light);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-style:italic;color:var(--text-dark)} .article-main .article-content blockquote cite{display:block;margin-top:8px;font-style:normal;font-weight:600;color:var(--accent)} .article-main .article-content .info-box{background:var(--bg-light);border-radius:var(--radius-sm);padding:20px 24px;margin:24px 0;border-left:4px solid var(--primary)} .article-main .article-content .info-box strong{color:var(--primary)} .article-main .article-content .info-box.accent{border-left-color:var(--accent)} .article-tags{display:flex;flex-wrap:wrap;gap:8px;padding-top:20px;border-top:1px solid var(--border-color);margin-top:30px} .article-tags a{background:var(--bg-light);padding:4px 14px;border-radius:60px;font-size:0.8rem;color:var(--text-gray);transition:var(--transition)} .article-tags a:hover{background:var(--accent);color:#fff} .article-author{display:flex;gap:20px;padding:24px;background:var(--bg-light);border-radius:var(--radius-sm);margin-top:30px;align-items:center} .article-author .avatar{width:72px;height:72px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;flex-shrink:0} .article-author .info h4{font-size:1rem;font-weight:700;color:var(--primary)} .article-author .info .position{color:var(--accent);font-weight:600;font-size:0.85rem} .article-author .info p{color:var(--text-light);font-size:0.9rem;margin-top:4px} .article-navigation{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px;padding-top:20px;border-top:1px solid var(--border-color)} .article-navigation .nav-link{padding:16px 20px;border-radius:var(--radius-sm);border:1px solid var(--border-color);transition:var(--transition);background:var(--bg-white)} .article-navigation .nav-link:hover{border-color:var(--accent);box-shadow:var(--shadow-hover)} .article-navigation .nav-link .label{font-size:0.75rem;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-light)} .article-navigation .nav-link .title{font-weight:600;color:var(--primary);font-size:0.95rem} .article-navigation .nav-link.next{text-align:right} @media (max-width:1024px){.article-layout{grid-template-columns:1fr} .article-main{padding:28px 24px} .article-main h1{font-size:1.8rem} .article-navigation{grid-template-columns:1fr} .article-navigation .nav-link.next{text-align:left} } @media (max-width:768px){.sidebar{grid-template-columns:1fr} .article-main{padding:20px 18px} .article-main h1{font-size:1.5rem} .article-main .article-content{font-size:0.98rem} .article-main .article-content h2{font-size:1.3rem} .article-main .featured-image img{max-height:240px} .article-page{padding-top:80px} .article-author{flex-direction:column;text-align:center} .article-main .article-meta{gap:12px;font-size:0.8rem} } @media (max-width:480px){.article-main h1{font-size:1.3rem} .article-main .article-content{font-size:0.92rem} .article-main .article-content blockquote{padding:12px 16px} .article-main .article-content .info-box{padding:16px 18px} .article-author .avatar{width:56px;height:56px;font-size:1.4rem} }

.sidebar-doctor-widget{background:linear-gradient(165deg,#ffffff 0,#f8fafc 100%);border-radius:var(--radius);border:1px solid var(--border-color);box-shadow:var(--shadow);overflow:hidden;transition:var(--transition)}.sidebar-doctor-widget:hover{box-shadow:var(--shadow-hover)}[data-theme="dark"] .sidebar-doctor-widget{background:linear-gradient(165deg,#1a2332 0,#0f1520 100%)}.widget-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px 0}.widget-badge{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:#fff;padding:2px 14px;border-radius:60px;font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:0.5px}.widget-badge i{font-size:0.55rem}.widget-doctor-icon .icon-letters{position:relative;font-size:20px;font-weight:700;line-height:1;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--bg-light);border-radius:50%;border:2px solid var(--border-color)}.widget-doctor-icon .icon-letters .l{color:#dc2626;position:absolute;top:-6px;left:2px;font-size:22px}.widget-doctor-icon .icon-letters .v{color:#2563eb;position:absolute;bottom:-6px;right:0;font-size:22px}.widget-body{padding:12px 20px 20px}.widget-body h4{font-size:1.1rem;font-weight:700;color:var(--primary);margin-bottom:8px}.widget-body h4 span{color:var(--accent)}.doctor-name{display:flex;align-items:center;gap:8px;font-weight:600;font-size:0.95rem;color:var(--text-dark);margin-bottom:6px}.doctor-name i{color:var(--accent)}.doctor-spec{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}.spec-badge{background:var(--bg-light);padding:2px 12px;border-radius:60px;font-size:0.7rem;font-weight:600;color:var(--text-gray)}.exp-badge{display:flex;align-items:center;gap:4px;font-size:0.7rem;color:var(--text-light)}.exp-badge i{font-size:0.65rem}.doctor-rating{display:flex;align-items:center;gap:8px;margin-bottom:10px}.doctor-rating .stars{color:#f1c40f;font-size:0.9rem;letter-spacing:2px}.doctor-rating .rating-value{font-size:0.8rem;color:var(--text-light)}.doctor-clinics{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}.clinic-item{display:flex;align-items:center;gap:8px;font-size:0.8rem;color:var(--text-gray)}.clinic-item i{color:var(--accent);font-size:0.75rem;width:14px}.widget-price{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);margin-bottom:14px}.price-old{font-size:0.85rem;color:var(--text-light);text-decoration:line-through}.price-new{font-size:1.3rem;font-weight:800;color:var(--accent)}.price-discount{background:var(--accent);color:#fff;padding:0 10px;border-radius:60px;font-size:0.7rem;font-weight:700}.widget-actions{display:flex;flex-direction:column;gap:8px}.widget-actions .btn-block{width:100%;justify-content:center;padding:12px;font-size:0.85rem}.widget-actions .btn-outline{background:transparent;color:var(--primary);border:2px solid var(--border-color);padding:10px;font-size:0.85rem;border-radius:var(--radius-sm);font-weight:600;transition:var(--transition);cursor:pointer;text-align:center}.widget-actions .btn-outline:hover{border-color:var(--accent);color:var(--accent)}.widget-footer{display:flex;justify-content:space-between;margin-top:12px;padding-top:10px;border-top:1px solid var(--border-color)}.widget-footer div{display:flex;align-items:center;gap:6px;font-size:0.7rem;color:var(--text-light)}.widget-footer i{font-size:0.7rem}@media (max-width:1024px){.sidebar-doctor-widget{max-width:100%}}@media (max-width:768px){.widget-body h4{font-size:1rem} .doctor-name{font-size:0.85rem} .doctor-clinics .clinic-item{font-size:0.75rem} .price-new{font-size:1.1rem} .widget-actions .btn-block{font-size:0.8rem;padding:10px}}@media (max-width:480px){.widget-header{padding:12px 16px 0} .widget-body{padding:10px 16px 16px} .widget-doctor-icon .icon-letters{width:34px;height:34px;font-size:16px} .widget-doctor-icon .icon-letters .l,.widget-doctor-icon .icon-letters .v{font-size:18px} .widget-price{flex-wrap:wrap;gap:6px} .widget-footer{flex-direction:column;gap:4px;align-items:center}}

.sidebar-banner-link{display:block;text-decoration:none;color:inherit;background:linear-gradient(145deg,var(--primary),var(--primary-dark));border-radius:var(--radius);padding:28px 24px;color:#fff;text-align:center;border:1px solid var(--border-color);box-shadow:var(--shadow);transition:var(--transition);cursor:pointer}.sidebar-banner-link:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,0.25)}.sidebar-banner-link .badge{display:inline-block;background:var(--accent);padding:2px 14px;border-radius:60px;font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}.sidebar-banner-link h4{font-size:1.3rem;font-weight:700;margin-bottom:6px;color:#fff}.sidebar-banner-link h4 span{color:var(--accent-light)}.sidebar-banner-link p{font-size:0.9rem;opacity:0.85;margin-bottom:16px;color:#fff}