#slider-wrapper {
  position: relative;
  width: 100%;
  /* Chiều cao mặc định cho PC/Tablet */
  height: clamp(320px, 56.25vw, 820px);
  background: #000;
  overflow: hidden;
}

/* Hỗ trợ aspect-ratio cho TẤT CẢ thiết bị hiện đại (bao gồm cả iOS mới) */
@supports (aspect-ratio: 16 / 9) {
  #slider-wrapper {
    height: auto;
    aspect-ratio: 16 / 9;
    min-height: 320px;
    max-height: 820px;
  }
}

/* Media container */
#slider-media-container {
  position: relative;
  width: 100%;
  height: 100%;
}

#slider-media-container img,
#slider-media-container video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #000;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* YouTube iframe cover configuration */
#slider-media-container > div[id^="yt-player"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  background: #000;
}

#slider-media-container iframe {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  /* Container: 16:10 (1.6), Video: 16:9 (1.778)
     To cover: scale video to ensure both dimensions cover container
     Scale by height: video_height needs to cover container_height
     Scale factor = (16/9) / (16/10) = 10/9 = 1.111
     Use 1.12 for safety margin */
  width: 100% !important;
  height: 100% !important;
  transform: translate(-50%, -50%) scale(1.12) !important;
  margin: 0 !important;
  background: #000;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  object-fit: cover;
}

/* Play button */
#play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 10;
  cursor: pointer;
  width: 80px;
  height: 80px;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}

#play-button:hover {
  transform: translate(-50%, -50%) scale(1.1);
}

/* --- FIX RIÊNG CHO MOBILE (DƯỚI 480PX) - CHẠY TỐT TRÊN IOS & ANDROID --- */
/* --- FIX RIÊNG CHO MOBILE (DƯỚI 480PX) - BẢN FINAL --- */
@media (max-width: 480px) {
  
  /* 1. KHUNG BAO NGOÀI: Dùng Flexbox để ép con giãn theo */
  #slider-wrapper {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 443px; /* Chiều cao mong muốn */
    overflow: hidden;
    background: #000;
    aspect-ratio: unset !important;
    
    /* KÍCH HOẠT FLEXBOX */
    display: flex !important; 
    flex-direction: column; 
  }

  /* 2. KHUNG CHỨA MEDIA: Tự động giãn lấp đầy cha */
  #slider-media-container {
    position: relative;
    width: 100%;
    
    /* Thay vì height: 100% (gây lỗi 0px), dùng flex: 1 */
    flex: 1 1 auto !important; 
    height: auto !important; 
    
    aspect-ratio: unset !important;
  }

  /* 3. ẢNH VÀ VIDEO NỀN: Phóng to lấp đầy (Cover) */
  #slider-media-container img,
  #slider-media-container video {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Ép ảnh full khung 443px */
    object-position: center;
  }

  /* 4. YOUTUBE: Cover configuration for mobile */
  #slider-media-container > div[id^="yt-player"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
  }

  #slider-media-container iframe {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 100% !important;
    height: 100% !important;
    transform: translate(-50%, -50%) scale(1.12) !important;
    margin: 0 !important;
    background: #000;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}

/* Hack nhỏ cho video tag trên Chrome cũ/Webkit */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  #slider-media-container video {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

/* Các style phụ cho text */
#scrollable-text .rt-block p { margin: 0; }
#scrollable-text .rt-block * {
  font-weight: inherit; letter-spacing: inherit; text-transform: inherit;
  line-height: inherit; mix-blend-mode: normal !important; text-shadow: none !important;
}
#scrollable-text, #scrollable-text p { color: #fff; }
#scrollable-text .scroll-reveal-char { color: currentColor; transition: opacity 120ms linear; }

/* Heading Hover Effect - Similar to Canvasser Plugin */
.heading-hover-wrapper {
  position: relative;
  display: inline-block;
}

/* Ensure headings without alt text are never masked */
/* This applies to headings inside heading-hover-wrapper that don't have data-alt-heading */
/* NOTE: We only clear masks, never touch visibility - let the animation system control that */
.heading-hover-wrapper > h1:not([data-alt-heading]),
.heading-hover-wrapper > h2:not([data-alt-heading]),
.heading-hover-wrapper > h3:not([data-alt-heading]),
.heading-hover-wrapper > h4:not([data-alt-heading]),
.heading-hover-wrapper > h5:not([data-alt-heading]),
.heading-hover-wrapper > h6:not([data-alt-heading]) {
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

/* Ensure headings WITH alt text are visible by default (mask only applied on hover via JS) */
.heading-hover-wrapper > [data-alt-heading] {
  /* Mask will be applied by JavaScript only on hover */
  /* By default, no mask - heading is fully visible */
}

/* Also ensure headings outside heading-hover-wrapper are never masked */
h1:not([data-alt-heading]):not(.heading-rear-layer h1),
h2:not([data-alt-heading]):not(.heading-rear-layer h2),
h3:not([data-alt-heading]):not(.heading-rear-layer h3),
h4:not([data-alt-heading]):not(.heading-rear-layer h4),
h5:not([data-alt-heading]):not(.heading-rear-layer h5),
h6:not([data-alt-heading]):not(.heading-rear-layer h6) {
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

.heading-main {
  position: relative;
  z-index: 82;
  /* Main heading stays fully visible - no mask */
}

.heading-alt {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 79;
  opacity: 0;
  pointer-events: none;
  /* Allow text to wrap naturally */
  white-space: normal;
  word-wrap: break-word;
}

.heading-rear-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 79;
  /* Initially hidden - JavaScript will show on hover */
  opacity: 0;
  visibility: hidden;
  /* No filter - white text will blend with global overlay to appear black */
  filter: none;
  /* clip-path will be applied via JavaScript to only show circle area */
  clip-path: circle(0% at 50% 50%);
  -webkit-clip-path: circle(0% at 50% 50%);
  /* No transitions - rear layer is always present, just clipped */
  /* Allow background to show through where there's no text */
  mix-blend-mode: normal;
}

.heading-rear-layer h1,
.heading-rear-layer h2,
.heading-rear-layer h3,
.heading-rear-layer h4,
.heading-rear-layer h5,
.heading-rear-layer h6 {
  /* Position is set absolutely by JavaScript to match main heading exactly - no default positioning */
  filter: none;
  /* Allow text to wrap naturally like the main heading */
  white-space: normal;
  word-wrap: break-word;
  /* Ensure text doesn't block background where it doesn't exist */
  background: transparent;
  /* Text color is white - will blend with global overlay (difference mode) to appear black */
  color: white;
  /* No animation - remove animated-heading class effects */
  /* Visibility controlled by parent .heading-rear-layer */
  visibility: inherit;
}

.heading-mask-canvas {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 83;
  opacity: 0;
  visibility: hidden;
}

/* Global Blend Overlay - Circular inverse color effect across entire page */
.global-blend-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 99999;
  /* Use mix-blend-mode: difference to create inverse color effect */
  mix-blend-mode: difference;
  -webkit-mix-blend-mode: difference;
  /* Radial gradient background for soft edges - will be dynamically positioned by JavaScript */
  background: radial-gradient(circle 225px at 50% 50%, white 0%, rgba(255, 255, 255, 0.95) 40%, rgba(255, 255, 255, 0.7) 60%, rgba(255, 255, 255, 0.4) 75%, rgba(255, 255, 255, 0.15) 85%, rgba(255, 255, 255, 0.05) 92%, transparent 100%);
  /* clip-path will be applied via JavaScript to only show circle area */
  clip-path: circle(0% at 50% 50%);
  -webkit-clip-path: circle(0% at 50% 50%);
  /* Performance optimizations */
  will-change: clip-path, background;
  transform: translateZ(0); /* Force GPU acceleration */
  backface-visibility: hidden; /* Additional GPU optimization */
  /* Ensure it covers the entire viewport */
  margin: 0;
  padding: 0;
  /* Remove any potential borders */
  border: none;
  outline: none;
  /* Ensure visibility */
  visibility: visible;
  opacity: 1;
}