/*
 * TOKEN + KIỂU DÙNG CHUNG CHO TRANG CHỦ ECOMAX — chép từ components/ecomax/shared/ecomax.css của app gốc.
 * Font (@font-face) đã chuyển sang fonts.css.
 *
 * Màu: giữ hai màu xanh BTrace (#118784 teal, #73B24B lime). FarmMax = lime, CoopMax = teal, TraceMax = dải teal → lime.
 * Mọi token khai dưới `.ex-root`.
 */

.ex-root {
  --ex-ink: #0b1f1d;
  --ex-ink-2: #29403d;
  --ex-muted: #5b7472;
  --ex-line: #e2ebe9;
  --ex-wash: #f4f8f7;
  --ex-surface: #ffffff;

  --ex-deep: #021b19;
  --ex-deep-2: #062b28;
  --ex-deep-line: rgba(255, 255, 255, 0.1);

  --ex-teal: #118784;
  --ex-teal-deep: #0f766e;
  --ex-teal-soft: #e3f3f2;
  --ex-lime: #73b24b;
  --ex-lime-text: #4a7f2b; /* lime đủ tương phản cho chữ nhỏ trên nền trắng */
  --ex-lime-bright: #9fd477; /* lime cho chữ trên nền tối */
  --ex-lime-soft: #edf6e6;
  --ex-grad: linear-gradient(100deg, #118784 0%, #3d9d6a 55%, #73b24b 100%);

  --ex-font: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;

  font-family: var(--ex-font);
  color: var(--ex-ink);
  background: var(--ex-surface);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* Header dính ~68–100px — neo #hash phải chừa chỗ, không thì tiêu đề mục chui dưới header. */
.ex-root [id] {
  scroll-margin-top: 88px;
}

/*
 * MỐC MÀN HÌNH (17/10/2026, user chốt dùng chung với landing BTrace / AssessTrace / VCtrace): đúng 6 mốc `bp-*` khai
 * trong tailwind.config.ts — 576 · 768 · 992 · 1200 · 1600 (· 2001). Trong class Tailwind viết `bp-md:` chứ KHÔNG
 * `md:` (mốc mặc định 768 trùng số nhưng `sm`/`lg`/`xl` lệch: 640/1024/1280); trong CSS viết thẳng các số này. Không
 * đẻ mốc mới — mốc lẻ của bản thiết kế quy về mốc gần nhất.
 *
 * Khung nội dung: rộng tối đa 1360px (trước 1240, nới lên 1360 từ 1440px — nay một cỡ cho mọi màn), lề hai bên
 * 20 → 32 (≥768) → 40 (≥992). `.ex-fluid` (header, chữ bám mép màn ở màn đầu) cùng lề nên mép trái mọi khối thẳng nhau.
 */
.ex-container {
  width: 100%;
  max-width: 1360px;
  margin-inline: auto;
  padding-inline: 20px;
}
.ex-fluid {
  width: 100%;
  padding-inline: 20px;
}
@media (min-width: 768px) {
  .ex-container,
  .ex-fluid { padding-inline: 32px; }
}
@media (min-width: 992px) {
  .ex-container,
  .ex-fluid { padding-inline: 40px; }
}

/* TÍT KHỐI (Đối tác · Tin tức · Kêu gọi): cỡ CỐ ĐỊNH theo từng dải màn, gom một chỗ — cùng cách `.at-h2` của landing
   BTrace. Trước đây mỗi khối tự viết clamp(34px, 4.4vw, 64px): máy tính bảng ra gần cỡ điện thoại, và cỡ trôi theo
   từng px bề ngang nên không chốt được bố cục từng dải. Font/màu vẫn do từng khối tự khai.
   Khoảng cách dòng 1.2 cũng gom ở đây (user 17/10/2026: "dính nhau"): Momo Trust Display có dấu chồng tiếng Việt cao
   (ồ, ả, ệ) — 1.05/1.08 cũ khiến dấu dòng dưới chạm chân chữ dòng trên khi tít tự xuống dòng trên màn hẹp. */
.ex-h2 { font-size: 30px; line-height: 1.2; }
@media (min-width: 576px) { .ex-h2 { font-size: 34px; } }
@media (min-width: 768px) { .ex-h2 { font-size: 40px; } }
@media (min-width: 992px) { .ex-h2 { font-size: 46px; } }
@media (min-width: 1200px) { .ex-h2 { font-size: 52px; } } /* user 17/10/2026: 56 → 52 */
@media (min-width: 1600px) { .ex-h2 { font-size: 64px; } }

/* Tít Momo Trust Display của các khối (19/10/2026, dùng cho 3 khối sản phẩm — Đối tác/Tin tức/Kêu gọi vẫn khai riêng như
   cũ). Font chỉ có nét 400: để trình duyệt tự tô đậm là chữ nhoè. */
.ex-momo {
  font-family: 'Momo Trust Display', 'Be Vietnam Pro', sans-serif;
  font-weight: 400;
  letter-spacing: -0.025em;
}
/* Cụm nhấn của tít: xanh lá như phần "eco" của logo — bản nền sáng (như "Góc nhìn" ở Tin tức) và bản nền tối (như
   "trên cả nước." ở Đối tác). Đệm hộp nền để dấu (ố, ư) và chân chữ không bị cắt — background-clip chỉ tô trong hộp nền. */
.ex-accent-light,
.ex-accent-dark {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding: 0.2em 0.06em 0.18em;
  margin: -0.2em -0.06em -0.18em;
}
.ex-accent-light { background-image: linear-gradient(100deg, #8fcf45 0%, #45b57a 50%, #279240 100%); }
.ex-accent-dark { background-image: linear-gradient(100deg, #a8dc4f 0%, #74c043 50%, #3f9e3c 100%); }

.ex-grad-text {
  background: var(--ex-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Lưới chấm mờ làm nền khối tối — tạo chiều sâu kiểu trang SaaS mà không cần ảnh. */
.ex-grid-bg {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* Thẻ kính mờ đặt nổi trên ảnh. */
.ex-glass {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 20px 50px -20px rgba(2, 27, 25, 0.45);
}

/*
 * HIỆU ỨNG HIỆN DẦN KHI CUỘN — CSS THUẦN, KHÔNG JS.
 *
 * Cố ý không dùng IntersectionObserver: landing BTrace từng mắc lỗi khối render muộn (tin tức,
 * chờ API) lỡ lượt quét của observer rồi kẹt `opacity: 0` vĩnh viễn (ghi ở NewsSection.vue).
 * `animation-timeline: view()` gắn vào chính phần tử nên render lúc nào cũng chạy đúng; trình
 * duyệt không hỗ trợ thì phần tử hiện bình thường, chỉ mất hiệu ứng.
 */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ex-reveal {
      animation: ex-reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
  }
}
@keyframes ex-reveal-in {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .ex-float { animation: ex-float 6s ease-in-out infinite; }
  .ex-float-delay { animation: ex-float 6s ease-in-out 1.5s infinite; }
}
@keyframes ex-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Chữ có chân cho phương án tạp chí — Playfair Display có bộ ký tự tiếng Việt đầy đủ dấu. */
.ex-serif {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-optical-sizing: auto;
}

/* Ảnh nền trôi rất chậm (đầu trang điện ảnh). */
@media (prefers-reduced-motion: no-preference) {
  .ex-kenburns { animation: ex-kenburns 24s ease-in-out infinite alternate; }
}
@keyframes ex-kenburns {
  from { transform: scale(1.12) translate3d(-1.5%, -1%, 0); }
  to { transform: scale(1.02) translate3d(1%, 1%, 0); }
}

/* Ảnh trôi lệch nhịp với trang khi cuộn — CSS thuần, gắn vào chính khung ảnh. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ex-parallax {
      animation: ex-parallax linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}
@keyframes ex-parallax {
  from { transform: translateY(-9%) scale(1.18); }
  to { transform: translateY(9%) scale(1.18); }
}

/* Chữ "đổ màu" dần theo cuộn: mỗi từ sáng lên khi tới vùng giữa màn hình.
   Trình duyệt không hỗ trợ thì chữ trắng sẵn, chỉ mất hiệu ứng. */
.ex-word { color: #fff; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ex-word {
      color: rgba(255, 255, 255, 0.16);
      animation: ex-word-in linear both;
      animation-timeline: view();
      animation-range: entry 100% cover 55%;
    }
  }
}
@keyframes ex-word-in {
  to { color: #fff; }
}

/* Dải logo chạy vô tận: nội dung lặp 2 lần, trượt đúng 50%. */
.ex-marquee {
  display: flex;
  width: max-content;
}
@media (prefers-reduced-motion: no-preference) {
  .ex-marquee { animation: ex-marquee 38s linear infinite; }
  .ex-marquee-reverse { animation-direction: reverse; }
}
@keyframes ex-marquee {
  to { transform: translateX(-50%); }
}

/* Trang (pages/ecomax/dien-anh.vue) */
.ex-cinema {
  background: #ffffff;
  color: #0b1f1d;
}