/* Há Cảo — custom.css
   Chỉ chứa những gì Tailwind utilities không diễn đạt được:
   - .skeleton / .img-slot
   - .outcomes-wash
   - .nav-link
   - card fan + social bar
   - prefers-reduced-motion
*/

/* ─── Reusable skeleton loading ──────────────────────────────── */
.skeleton {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #e4ebe4 0%, #ebe6e1 55%, #e5dfe8 100%);
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 45%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: skeleton-shimmer 1.35s ease-in-out infinite;
  pointer-events: none;
}

@keyframes skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}

/* ─── Image slots (skeleton while loading) ───────────────────── */
.img-slot {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #e4ebe4 0%, #ebe6e1 55%, #e5dfe8 100%);
}

.img-slot:not(.logo-slot):not([data-loaded="true"])::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 45%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: skeleton-shimmer 1.35s ease-in-out infinite;
  pointer-events: none;
}

.img-slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}

/* Zoom ảnh bên trong khung (khung giữ nguyên nhờ overflow:hidden) */
.img-slot.img-zoom-150 img {
  transform: scale(1.5);
}

/* Logo: nền trong suốt, không skeleton shimmer */
.img-slot.logo-slot {
  background: transparent;
}

.img-slot.logo-slot img {
  object-fit: cover;
  padding: 0;
}

/* Video embed: skeleton cho đến khi iframe được gắn */
.video-frame.skeleton iframe {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.video-frame:not(.skeleton)::after {
  display: none;
}

/* ─── Outcomes section gradient ─────────────────────────────── */
.outcomes-wash {
  background-image:
    radial-gradient(ellipse 72% 85% at 0% 50%, rgba(18, 75, 46, 0.6) 0%, transparent 68%),
    linear-gradient(135deg, #062c1f 0%, #041f16 100%);
}

/* ─── Nav link active underline ─────────────────────────────── */
.nav-link {
  position: relative;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: #062c1f;
  transition: width 0.25s ease;
}

.nav-link:hover::after,
.nav-link[aria-current="page"]::after {
  width: 100%;
}

/* ─── Card Fan Carousel (GSAP) ──────────────────────────────── */
/* Clip ngang để fan + animation enter/exit không làm lệch layout mobile */
.testimonials-carousel {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}

.fan-layout {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 20rem;
  overflow: hidden; /* quan trọng: chặn overflow ngang */
  touch-action: pan-y;
}

.fan-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9.25rem;
  height: 15.5rem;
  padding: 0;
  border: 0;
  border-radius: 1.25rem;
  overflow: hidden;
  background: #fff;
  color: inherit;
  box-shadow: 0 14px 36px rgba(6, 44, 31, 0.16);
  will-change: transform, opacity;
  cursor: zoom-in;
  appearance: none;
  -webkit-appearance: none;
}

.fan-card-inner,
.fan-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.fan-card--skeleton {
  cursor: default;
  pointer-events: none;
  box-shadow: none;
}

@media (min-width: 400px) {
  .fan-layout { height: 22rem; }
  .fan-card { width: 10.25rem; height: 17rem; }
}

@media (min-width: 480px) {
  .fan-layout { height: 26rem; }
  .fan-card { width: 12rem; height: 20rem; }
}

@media (min-width: 640px) {
  .fan-layout { height: 28rem; }
  .fan-card { width: 13.5rem; height: 22.5rem; }
}

@media (min-width: 768px) {
  .fan-layout { height: 32rem; }
  .fan-card { width: 14.5rem; height: 24.5rem; }
}

@media (min-width: 1024px) {
  .fan-layout { height: 34rem; }
  /* Nhỏ hơn một chút để xếp được 6 card trên laptop */
  .fan-card { width: 13.75rem; height: 23rem; }
}

@media (min-width: 1280px) {
  .fan-layout { height: 36rem; }
  .fan-card { width: 14.75rem; height: 24.75rem; }
}

/* ─── Fixed social bar (left-center) ─────────────────────────── */
.social-bar {
  position: fixed;
  left: 0.75rem;
  top: 50%;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.45rem;
  border-radius: 9999px;
  background: #062c1f;
  border: 1px solid rgba(249, 247, 242, 0.08);
  box-shadow: 0 8px 24px rgba(6, 44, 31, 0.28);
  transform: translateY(-50%);
}

.social-bar[hidden] {
  display: none !important;
}

.social-bar__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.2s ease, transform 0.2s ease;
}

.social-bar__link:hover {
  color: #fff;
  transform: translateY(-1px);
}

.social-bar__link[hidden] {
  display: none !important;
}

@media (max-width: 639px) {
  .social-bar {
    left: 0.4rem;
    gap: 0.45rem;
    padding: 0.5rem 0.35rem;
  }

  .social-bar__link {
    width: 1.5rem;
    height: 1.5rem;
  }

  .social-bar__link svg {
    width: 0.85rem;
    height: 0.85rem;
  }
}

/* ─── GLightbox theme tweaks ─────────────────────────────────── */
.glightbox-clean .gslide-description {
  background: transparent;
}

/* ─── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}