.top{margin-top:25px;}
.main-layout{display:flex;gap:25px;margin-bottom:25px}
.articles-section{flex:1;min-width:0}
.recommendation-section{width:300px;flex-shrink:0;position:sticky;top:20px;align-self:flex-start}
.articles-list{display:flex;flex-direction:column;gap:15px}
.article-card{background:white;border-radius:10px;overflow:hidden;box-shadow:0 3px 15px rgba(0,0,0,0.05);transition:all 0.2s ease;display:flex;flex-direction:column;cursor:pointer}
.article-card:hover{transform:translateY(-2px);box-shadow:0 5px 20px rgba(0,0,0,0.1)}
.article-content{padding:18px;display:flex;flex-direction:column;gap:10px}
.article-content p {color: #444; line-height: 1.7;font-size: 16px;}
.article-content p:first-child { margin-top: 0}
.article-date{color:#718096;font-size:0.8rem;display:flex;align-items:center;gap:4px}
.article-title a{font-size:2rem;font-weight:700;color:#2d3748;line-height:1.3;margin-bottom:5px}
.article-excerpt{color:#4a5568;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:0.9rem}
.article-image-container{height:80px;overflow:hidden;transition:height 0.3s ease;border-top:1px solid #edf2f7}
.article-card:hover .article-image-container{height:160px}
.article-image{width:100%;height:160px;background-size:cover;background-position:center;position:relative;transform:translateY(-80px);transition:transform 0.3s ease}
.article-card:hover .article-image{transform:translateY(0)}
.recommendation-card{background:white;border-radius:10px;overflow:hidden;box-shadow:0 3px 15px rgba(0,0,0,0.05);margin-bottom:15px}
.rec-header{background:linear-gradient(135deg,#2c3e50 0%,#4a6491 100%);color:white;padding:12px 15px;font-weight:700;font-size:0.95rem;display:flex;align-items:center;gap:8px}
.rec-content{padding:12px}
.rec-item{padding:10px 0;border-bottom:1px solid #edf2f7;cursor:pointer;transition:all 0.2s}
.rec-item:last-child{border-bottom:none}
.rec-item:hover{background:#f8fafc;padding-left:8px;border-radius:5px}
.rec-title{font-weight:600;font-size:0.9rem;color:#2d3748;margin-bottom:4px;line-height:1.3}
.rec-meta{font-size:0.75rem;color:#718096;display:flex;align-items:center;gap:10px}
footer{text-align:center;margin-top:30px;padding:15px;color:#718096;font-size:0.85rem;border-top:1px solid #e2e8f0}
@media (max-width:1024px){.main-layout{flex-direction:column}
.recommendation-section{width:100%;position:static}
.rec-content{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.rec-item{border-bottom:none;border:1px solid #edf2f7;border-radius:8px;padding:12px;margin-bottom:8px}
}@media (max-width:768px){header h1{font-size:1.5rem}
.rec-content{grid-template-columns:1fr}
}@keyframes fadeInUp{from{opacity:0;transform:translateY(15px)}
to{opacity:1;transform:translateY(0)}
}
.read-more-btn{background:#f3f3f3;color:#0b1952;border:none;padding:8px 16px;border-radius:6px;font-size:0.85rem;font-weight:600;cursor:pointer;transition:all 0.2s ease;align-self:flex-start;margin: 0 0 10px 20px}
.read-more-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(37,117,252,0.3)}
.icon{display:inline-block;width:1em;height:1em;vertical-align:middle;margin-right:4px}