/* CHÂN TRANG — style scoped của EcomaxFooter.vue. */
[data-ex-section="footer"] .ex-footer-reveal {
  position: sticky;
  bottom: 0;
  z-index: 0;
}

[data-ex-section="footer"] .ex-footer-video {
  opacity: 0.6;
  /* Giữ tông gốc của video (xanh ngọc) — trùng tông màn đầu, nơi cùng video này đang chạy. */
  -webkit-mask-image: linear-gradient(to top, #000 35%, transparent 100%);
  mask-image: linear-gradient(to top, #000 35%, transparent 100%);
}

[data-ex-section="footer"] .ex-footer-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
}

/* Gạch chân xanh lá logo chạy từ trái sang khi rê chuột (user 17/10). */
[data-ex-section="footer"] .ex-uline {
  background: linear-gradient(#74c043, #74c043) 0 100% / 0 1px no-repeat;
  padding-bottom: 2px;
  transition: background-size 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), color 0.25s;
}
/* Rê chuột chỉ trên máy có chuột — cảm ứng giữ trạng thái hover sau khi chạm. */
@media (hover: hover) {
  [data-ex-section="footer"] .ex-uline:hover { background-size: 100% 1px; }
  [data-ex-section="footer"] .ex-social:hover { border-color: rgba(255, 255, 255, 0.5); color: #fff; }
}

/* Sản phẩm của trang đang xem: sáng + đậm. KHÔNG khai `transition` riêng — đè mất transition của `.ex-uline`. */
[data-ex-section="footer"] .ex-prod.is-current { color: #fff; font-weight: 600; }
@media (hover: hover) {
  [data-ex-section="footer"] .ex-prod:hover { color: #fff; }
}

[data-ex-section="footer"] .ex-live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #74c043;
}
@media (prefers-reduced-motion: no-preference) {
  [data-ex-section="footer"] .ex-live { animation: ex-live 2.4s ease-out infinite; }
}
@keyframes ex-live {
  0% { box-shadow: 0 0 0 0 rgba(116, 192, 67, 0.55); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(116, 192, 67, 0); }
}

/* Chữ to "ecomax" (logo 2041×331) — hiện ĐỦ chữ, bám góc dưới phải. */
[data-ex-section="footer"] .ex-giant {
  --mx: 50%;
  --my: 50%;
  position: relative;
  aspect-ratio: 2041 / 331;
  user-select: none;
}
[data-ex-section="footer"] .ex-giant img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
[data-ex-section="footer"] .ex-giant-base { opacity: 0.14; }
[data-ex-section="footer"] .ex-giant-lit {
  opacity: 0;
  -webkit-mask-image: radial-gradient(circle 220px at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, 0.6) 45%, transparent 100%);
  mask-image: radial-gradient(circle 220px at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, 0.6) 45%, transparent 100%);
  transition: opacity 0.45s;
}
[data-ex-section="footer"] .ex-giant.is-glow .ex-giant-lit { opacity: 0.9; }