body {
     font-family: Arial, sans-serif;
     margin: 0;
     padding: 0;
     background-color: #f5f7fa;
 }

 .container {
     display: flex;
     max-width: 1100px;
     margin: 0 auto;
     padding: 20px;
    
 }

 .main-content {
     display: flex;
     gap: 20px;
     width: 100%;
     margin-bottom: 20px;
 }

 .section {
     display: flex;
     padding: 10px;
     flex-direction: column;
     background-color: white;
    
    height: fit-content;
     border-radius: 20px;
 }

 .section-title {
     font-size: 1.4rem;
     margin-bottom: 10px;
     padding-bottom: 5px;
     border-bottom: 2px solid #0097a7;
     color: #006064;
     padding: 20px;

 }

 .post-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 10px;
 }

 .post-grid a {
     text-decoration: none;
     color: black;
 }

 .post-card {
     background: #fff;
     border-radius: 8px;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     transition: transform 0.2s ease;
     cursor: pointer;
 }

 .post-card:hover {
     transform: translateY(-4px);
 }

 .post-card img {
     padding: 10px;
     border-radius: 20px;
     width: 100%;
     height: 250px;
     object-fit: cover;
 }

 .post-content {
     padding: 10px;
     display: flex;
     flex-direction: column;
 }

 .post-content h3 {
     font-size: 0.95rem;
     margin: 0 0 6px;
     line-height: 1.3em;
     height: 2.6em;
     overflow: hidden;
 }

 .post-content p {
     font-size: 0.85rem;
     color: #555;
     line-height: 1.3em;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 

 @media (max-width: 768px) {
     .container {
         flex-direction: column;
         padding: 10px;
     }

     .post-grid {
         grid-template-columns: 1fr;
         /* Chuyển về 1 cột */
     }

     .post-card img {
         height: 200px;
         /* Giảm chiều cao ảnh nếu cần */
     }

     .sidebar {
         width: 100%;
     }
 }