/*
 * Khối mới của trang chủ bản viết lại.
 * Class nào styles.css có rồi thì dùng lại, ở đây chỉ chứa phần thật sự mới.
 */

/* Lưới giữ nguyên của styles.css (6 cột, mỗi thẻ chiếm 3 → 2 thẻ mỗi hàng).
   KHÔNG ghi đè grid-template-columns ở đây: các thẻ đã khai `grid-column: span 3`,
   đổi số cột là mỗi thẻ chiếm trọn hàng và mục dài gấp đôi. */
.problems-section .problem-grid-four article strong {
  display: block;
  margin-top: 12px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--gold-dark);
}

/* Khối số liệu thị trường — phải đọc ra ngay rằng đây là số của tổng thị trường,
   không phải kết quả của chúng tôi. Vì vậy tách hẳn khung và ghi nguồn tại chỗ. */
.market-context {
  margin-top: 28px;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--premium-line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--premium-shadow-sm);
}

.market-context > strong {
  display: block;
  margin-bottom: 16px;
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  line-height: 1.5;
  color: var(--premium-950);
}

.market-context ul {
  display: grid;
  gap: 14px;
  margin: 0 0 16px;
  padding-left: 20px;
}

.market-context li {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--premium-ink);
}

.market-context cite {
  display: block;
  margin-top: 4px;
  font-size: 0.82rem;
  font-style: normal;
  line-height: 1.5;
  color: var(--premium-muted);
}

.market-context-note {
  margin: 0;
  padding: 14px 16px;
  border-left: 3px solid var(--premium-gold);
  border-radius: 0 10px 10px 0;
  background: var(--premium-surface);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--premium-muted);
}

@media (max-width: 540px) {
  .market-context ul {
    padding-left: 18px;
  }
}