/* Trang chủ — section dãy ảnh chạy ngang (#section-moi).
 *
 * Tiêu đề và khoảng cách đo theo "Hệ sinh thái đầu tư" (.investment > h2):
 * Plus Jakarta Sans 40/48 mảnh 300 viết hoa, đường kẻ vàng–xám 1px cách 24px,
 * nội dung cách tiêu đề 32px, đệm section 96px (80px máy tính bảng, 48px điện
 * thoại; điện thoại căn giữa tiêu đề như các section khác).
 *
 * Ảnh kích thước tuỳ ý: mọi ảnh CAO BẰNG NHAU (--anh-marquee-cao), chiều ngang
 * theo đúng tỉ lệ của từng ảnh. Dưới ảnh là tiêu đề bài báo (tối đa 2 dòng,
 * rộng đúng bằng ảnh) — admin điền trong CSM, để trống thì không hiện.
 * home-marquee.js nhân bản dãy ảnh cho đủ dài rồi bật .is-chay; trên điện thoại,
 * không có JS, người dùng tắt hiệu ứng chuyển động, hoặc đang xem trong CSM thì
 * dãy ảnh đứng yên và vuốt ngang được (điện thoại: vuốt từng thẻ, có hít).
 */
.anh-marquee {
  padding-top: 96px;
  padding-bottom: 96px;
}

.anh-marquee > h2 {
  margin: 0;
  color: #1e1f1d;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 40px;
  font-weight: 300;
  line-height: 48px;
  letter-spacing: .005em;
  text-align: left;
  text-transform: uppercase;
}

.anh-marquee > h2::after {
  content: "";
  display: block;
  width: min(495px, 41.58vw);
  height: 1px;
  margin-top: 24px;
  background: linear-gradient(90deg, #b79552 0, #b79552 56px, #ddd6c6 56px, #ddd6c6 100%);
}

.anh-marquee-khung {
  margin-top: 32px;
  overflow-x: auto;
  scrollbar-width: none;
}
.anh-marquee-khung::-webkit-scrollbar { display: none; }

.anh-marquee-hang {
  display: flex;
  gap: 16px;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}

.anh-marquee {
  /* 367px ở màn 1440, 261px ở 1024 — bằng dãy ảnh 2:3 ban đầu. */
  --anh-marquee-cao: clamp(252px, 25.5vw, 372px);
}

.anh-marquee-hang > li {
  flex: 0 0 auto;
}

/* Thẻ = ảnh + tiêu đề. Ảnh không gắn link thì bọc <span> thay cho <a> (CSM để
   trống ô link). Thẻ rộng min-content = đúng bằng ảnh, tiêu đề xuống dòng theo. */
.anh-marquee-hang > li > a,
.anh-marquee-hang > li > span {
  display: block;
  width: min-content;
  color: inherit;
  text-decoration: none;
}

.anh-marquee-anh {
  display: block;
  height: var(--anh-marquee-cao);
  overflow: hidden;
  background: #efece4;
  border-radius: 2px;
}

.anh-marquee-tieu-de {
  display: -webkit-box;
  margin-top: 14px;
  overflow: hidden;
  color: #1e1f1d;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
  min-height: 2.9em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  transition: color .2s ease;
}

.anh-marquee-hang a:hover .anh-marquee-tieu-de { color: #8e6a2f; }

.anh-marquee-hang img {
  display: block;
  width: auto;
  max-width: none;
  height: 100%;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}

.anh-marquee-hang a:hover img { transform: scale(1.04); }
.anh-marquee-hang a:focus-visible { outline: 2px solid #b79552; outline-offset: 4px; }

/* Đang chạy: trượt đều từ phải sang trái, hai mép cắt gọn (không làm mờ);
   rê chuột hoặc dùng bàn phím trong dãy thì dừng. --anh-marquee-dich = độ dài
   đúng một bộ ảnh, nên hết một vòng thì bộ nhân bản nằm đúng chỗ bộ gốc — không giật. */
.anh-marquee-khung.is-chay {
  overflow: hidden;
}

.anh-marquee-khung.is-chay .anh-marquee-hang {
  animation: anh-marquee-chay var(--anh-marquee-thoi-gian, 40s) linear infinite;
  will-change: transform;
}

.anh-marquee-khung.is-chay:hover .anh-marquee-hang,
.anh-marquee-khung.is-chay:focus-within .anh-marquee-hang,
.anh-marquee-khung.is-tam-dung .anh-marquee-hang {
  animation-play-state: paused;
}

@keyframes anh-marquee-chay {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-1 * var(--anh-marquee-dich, 50%)), 0, 0); }
}

@media (max-width: 1023px) {
  .anh-marquee { padding-top: 80px; padding-bottom: 80px; }
}

@media (max-width: 767px) {
  .anh-marquee { padding-top: 48px; padding-bottom: 48px; }
  .anh-marquee > h2 {
    font-size: 28px;
    line-height: 1.34;
    letter-spacing: .01em;
    text-align: center;
  }
  .anh-marquee > h2::after { width: 178px; margin: 18px auto 0; background: linear-gradient(90deg, transparent, #b79552 24%, #b79552 76%, transparent); }
  .anh-marquee-khung { margin-top: 24px; }
  .anh-marquee-hang { gap: 12px; }
  /* Thẻ 3:2 rộng ~69vw (~83% khung), lộ mép thẻ sau để biết còn vuốt được. */
  .anh-marquee { --anh-marquee-cao: 46vw; }
  .anh-marquee-tieu-de { margin-top: 10px; font-size: 14px; }
  /* Điện thoại không chạy tự động (home-marquee.js): vuốt trái/phải, mỗi lần một thẻ. */
  .anh-marquee-khung {
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .anh-marquee-hang > li { scroll-snap-align: start; scroll-snap-stop: always; }
}

@media (prefers-reduced-motion: reduce) {
  .anh-marquee-khung.is-chay .anh-marquee-hang { animation: none; }
  .anh-marquee-hang img { transition: none; }
}