/* ==========================================================================
   Module: News Section
   ========================================================================== */
.news__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-10);
}

.news__footer { text-align: center; }

@media (max-width: 1023px) {
  .news__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  /* ==========================================================================
     MOBILE RESPONSIVE UPGRADES (SCOPE ISOLATION)
     Lưới trượt ngang, 2 thẻ 1 dòng - Tối ưu hóa không gian
     ========================================================================== */
  .news { padding: 2rem 0 !important; }

  /* Grid trượt ngang */
  .news__grid { 
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory;
    gap: 0.75rem !important;
    margin-bottom: 1.5rem !important;
    padding-bottom: 1rem !important; /* Để dành chỗ cho viền bóng đổ sau khi hover */
    scrollbar-width: none;
  }
  .news__grid::-webkit-scrollbar {
    display: none;
  }
  
  /* Cố định mỗi thẻ chiếm chia đôi 50% màn hình trừ đi nửa kích thước khe gap */
  .homepage-news-item {
    flex: 0 0 calc(50% - 0.375rem) !important;
    scroll-snap-align: start;
    min-width: 0;
  }
  
  /* Nén header section */
  .news .section__header {
    margin-bottom: 1.25rem !important;
  }
  .news .section__header h2 {
    font-size: 1.5rem !important;
  }
  .news .section__header p {
    font-size: 0.85rem !important;
    margin-bottom: 0 !important;
  }
  
  /* Nén Tab Tin Tức kịch trần, bẻ dòng không trượt */
  .news-tabs {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
    margin-bottom: 0.75rem !important;
  }
  .news-tab-btn {
    padding: 6px 12px !important;
    font-size: 0.75rem !important;
    height: auto !important;
    border-radius: 50px !important;
  }
  
  .news__footer-area {
    margin-top: 1rem !important;
    gap: 0.75rem !important;
  }
  
  .news__footer-area .btn--view-all {
    font-size: 0.8rem !important;
    padding: 8px 16px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    border-radius: 99px !important;
  }
  
  .news__footer-area .btn--view-all svg {
    width: 14px !important;
    height: 14px !important;
  }
  
  /* Thu nhỏ cả phần phân trang pagination nếu có */
  .pagination {
    gap: 4px !important;
  }
  .pagination .page-link {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.75rem !important;
  }
}