/* 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. home-marquee.js nhân bản dãy ảnh cho đủ dài rồi bật .is-chay;
 * 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.
 */
.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;
}

/* Ảnh không gắn link thì bọc <span> thay cho <a> (CSM để trống ô link). */
.anh-marquee-hang > li > a,
.anh-marquee-hang > li > span {
  display: block;
  height: var(--anh-marquee-cao);
  overflow: hidden;
  background: #efece4;
  border-radius: 2px;
}

.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: -2px; }

/* Đ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; }
  .anh-marquee { --anh-marquee-cao: 63vw; }
}

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