/* News Hotproducts Section - Signature Theme
   * Updated to match basic theme layout structure and responsiveness
   * Uses signature theme primary color (#F56011)
   *
   * Changes:
   * - Updated comment header
   * - Color updates: #40C706 → #F56011 throughout
   * - Layout: Preserved 1fr 320px structure for main content vs sidebar
   * - Responsive: Preserved mobile-first approach with consistent padding
   * - Cards: Maintained fixed 310px width with proper overflow handling
   * - Navigation: Updated responsive behavior for different screen sizes
   * - Typography: Consistent with basic theme font sizes and line heights
   */

/* =============================================
 * HOT PRODUCTS/NEWS SECTION
 * ============================================= */

.sec-hotproducts {
  padding: var(--spacing-8, 48px) 0;
}

.hotproducts-container {
  max-width: var(--container-max-width, 1440px) !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 var(--spacing-4, 16px) !important;
}

@media (min-width: 768px) {
  .hotproducts-container {
    padding: 0 var(--spacing-5, 20px) !important;
  }
}

@media (min-width: 1024px) {
  .hotproducts-container {
    padding: 0 var(--spacing-5, 20px) !important; /* Match header: 20px */
  }
}

@media (min-width: 1440px) {
  .hotproducts-container {
    padding: 0 var(--spacing-8, 32px) !important; /* Match header: 32px */
  }
}

/* =============================================
 * TIN NỔI BẬT SECTION - Đồng bộ font size
 * ============================================= */

.news-features-section {
  padding: var(--spacing-8, 48px) 0;
}

.news-features-container {
  max-width: var(--container-max-width, 1440px);
  margin: 0 auto;
  padding: 0 var(--spacing-4, 16px);
}

@media (min-width: 768px) {
  .news-features-container {
    padding: 0 var(--spacing-5, 20px);
  }
}

@media (min-width: 1024px) {
  .news-features-container {
    padding: 0 var(--spacing-5, 20px); /* Match header: 20px */
  }
}

@media (min-width: 1440px) {
  .news-features-container {
    padding: 0 var(--spacing-8, 32px); /* Match header: 32px */
  }
}

/* Đồng bộ category-label cho Tin nổi bật và các section tin tức */
.news-features-section .category-label,
.news-features-container .category-label,
.news-container .category-label {
  font-family: var(--font-primary, 'SF Pro Display', sans-serif) !important;
  font-weight: 900 !important;
  font-size: 48px !important;
  line-height: 1.3 !important;
  color: var(--color-black, #000000) !important;
  margin-bottom: 16px !important;
  padding-bottom: 0.75rem !important;
}

@media (max-width: 768px) {
  .news-features-section .category-label,
  .news-features-container .category-label,
  .news-container .category-label {
    font-size: 22px !important;
  }
}

/* Category Label/Section Title */
.hotproducts-container .category-label {
  font-family: var(--font-primary, 'SF Pro Display', sans-serif) !important;
  font-weight: 900 !important;
  font-size: 48px !important;
  line-height: 1.3 !important;
  color: var(--color-black, #000000) !important;
  margin-bottom: 16px !important;
  padding-bottom: 0.75rem !important;
}

@media (max-width: 768px) {
  .hotproducts-container .category-label {
    font-size: 22px !important;
  }
}

/* View More Link in Category Label */
.hotproducts-container .category-label .view-more {
  font-size: var(--font-size-14, 14px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-primary, #40C706);
  text-decoration: none;
  float: right;
  margin-top: 8px;
}

.hotproducts-container .category-label .view-more:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .hotproducts-container .category-label .view-more {
    margin-top: 4px;
    font-size: var(--font-size-12, 12px);
  }
}

/* Content Grid */
.hotproduct-content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

@media (max-width: 1024px) {
  .hotproduct-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .hotproduct-content {
    grid-template-columns: 1fr;
  }
}

/* Individual Card Item */
.hotproduct-item {
  background: var(--color-white, #FFFFFF);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  box-shadow: var(--shadow-card, 0 2px 8px rgba(0, 0, 0, 0.08));
  transition: all var(--duration-normal, 0.3s) ease;
}

.hotproduct-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover, 0 8px 24px rgba(0, 0, 0, 0.12));
}

/* Card Image */
.hotproduct-item .article-img {
  display: block;
  overflow: hidden;
}

.hotproduct-item .article-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-normal, 0.3s) ease;
}

.hotproduct-item:hover .article-img img {
  transform: scale(1.05);
}

/* Card Content */
.hotproduct-item>div {
  padding: 16px;
}

/* Card Title */
.hotproduct-item .article-link {
  font-size: var(--font-size-16, 16px);
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.4;
  color: var(--color-gray-600, #3D3D3D);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
  display: block;
}

.hotproduct-item .article-link:hover {
  color: var(--color-primary, #40C706);
}

/* View More Link */
.hotproduct-item .article-viewmore {
  font-size: var(--font-size-14, 14px);
  color: var(--color-primary, #40C706);
  text-decoration: none;
  font-weight: var(--font-weight-medium, 500);
}

.hotproduct-item .article-viewmore:hover {
  text-decoration: underline;
}

/* =============================================
 * VIEW ALL BUTTON
 * ============================================= */

.hotproducts-view-all-wrapper {
  text-align: center;
  margin-top: 32px;
}

.hotproducts-view-all-btn {
  display: inline-block;
  padding: 12px 32px;
  background: var(--color-primary, #40C706);
  color: var(--color-white, #FFFFFF);
  font-size: var(--font-size-14, 14px);
  font-weight: var(--font-weight-bold, 700);
  text-decoration: none;
  border-radius: var(--radius-md, 8px);
  transition: all var(--duration-normal, 0.3s) ease;
}

.hotproducts-view-all-btn:hover {
  background: var(--color-primary-dark, #34AD00);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 199, 6, 0.3);
}

/* =============================================
 * RESPONSIVE ADJUSTMENTS
 * ============================================= */

@media (max-width: 768px) {
  .sec-hotproducts {
    padding: var(--spacing-6, 32px) 0;
  }

  .hotproduct-content {
    gap: 16px;
  }

  .hotproducts-view-all-wrapper {
    margin-top: 24px;
  }
}

/* =============================================
 * EMPTY STATE
 * ============================================= */

.hotproduct-empty {
  grid-column: 1 / -1;
  padding: 48px 24px;
  text-align: center;
  background: var(--color-gray-50, #FAFAFA);
  border-radius: var(--radius-lg, 12px);
}

.hotproduct-empty p {
  color: var(--color-gray-400, #999999);
  font-size: var(--font-size-16, 16px);
  margin: 0;
}

/* =============================================
 * CUSTOMIZATIONS - Larger Cards, Less Radius
 * ============================================= */

/* Add bottom spacing between sections */
.sec-hotproducts {
  padding: var(--spacing-8, 48px) 0 var(--spacing-10, 64px) 0 !important;
  margin-bottom: var(--spacing-6, 32px);
}

/* Larger gap between cards */
.hotproduct-content {
  gap: 32px !important;
}

/* Less rounded corners */
.hotproduct-item {
  border-radius: 6px !important;
}

/* More padding inside cards */
.hotproduct-item > div {
  padding: 20px !important;
}

/* Empty state also less rounded */
.hotproduct-empty {
  border-radius: 6px !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .sec-hotproducts {
    padding: var(--spacing-6, 32px) 0 var(--spacing-8, 48px) 0 !important;
    margin-bottom: var(--spacing-5, 24px);
  }

  .hotproduct-content {
    gap: 20px !important;
  }

  .hotproduct-item > div {
    padding: 16px !important;
  }
}
/* Override article-img for full image display */
.hotproduct-item .article-img {
    display: block;
    max-height: 276px !important;
    overflow: hidden;
}

.hotproduct-item .article-img img {
    width: 100%;
    height: auto !important;
    max-height: 276px !important;
    object-fit: cover;
    transition: transform var(--duration-normal, 0.3s) ease;
}

.hotproduct-item:hover .article-img img {
    transform: scale(1.05);
}