Intro Manta

<section class="hero-video-section">
  <div class="hero-video-wrapper">
    <!-- YouTube embed -->
    <div class="video-embed">
      <iframe src="https://www.youtube.com/embed/0Ko07LXaVyA?autoplay=1&amp;mute=1&amp;loop=1&amp;controls=0&amp;playlist=0Ko07LXaVyA&amp;modestbranding=1&amp;showinfo=0" frameborder="0" allow="autoplay; fullscreen" allowfullscreen>
      </iframe>
      <!-- overlay che watermark -->
      <div class="hide-watermark" id="wm"></div>
    </div>

    <!-- Overlay content -->
    <div class="hero-overlay-bottom">
      <button class="learn-more-btn">Tìm Hiểu Thêm</button>
    </div>
  </div>
</section>

<style>
.hero-video-section {
  position: relative;
  width: 100%;
  height: 100vh; /* full màn hình */
  overflow: hidden;
  background: #000;
}

.hero-video-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* --- ép iframe thành cover video --- */
.video-embed {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.video-embed iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: 177.77vh;   /* tỷ lệ 16:9 */
  height: 100vh;
  transform: translate(-50%, -50%);
  border: none;
  pointer-events: none;
}

/* --- overlay che watermark góc phải dưới --- */
.hide-watermark {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 140px;
  height: 50px;
  background: #000; /* cùng màu nền */
  z-index: 10;
  opacity: 1;
  transition: opacity 0.6s ease;
}
.hide-watermark.hide {
  opacity: 0;
  pointer-events: none;
}

/* --- nút dưới cùng --- */
.hero-overlay-bottom {
  position: absolute;
  bottom: 40px;  /* cách đáy 40px */
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}

.learn-more-btn {
  background: rgba(255,255,255,0.15);
  color: #fff;
  padding: 14px 40px;
  font-size: 18px;
  font-weight: 600;
  border: 2px solid #fff;
  border-radius: 50px;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: all 0.3s ease;
}

.learn-more-btn:hover {
  background: rgba(255,255,255,0.3);
  transform: scale(1.05);
}
</style>

<script>
// Ẩn lớp che watermark sau 3 giây
setTimeout(() => {
  const wm = document.getElementById("wm");
  if (wm) wm.classList.add("hide");
}, 3000);
</script>

<div class="image-block-wrapper elife-toggle-fixed">
  <!-- ảnh đầu + nút -->
  <div class="top-image-wrapper">
    <img class="styled-image" src="https://cdn.shopify.com/s/files/1/0652/3725/4227/files/2025-09-28_13-42-42.png?v=1759041785" alt="Extra Image">

    <!-- Toggle switch: đặt ở bottom của ảnh trên -->
    <div class="toggle-container">
      <div class="toggle-switch clear" id="toggleSwitch">
        <button class="toggle-btn active" data-target="clear" aria-pressed="true">Clear</button>
        <button class="toggle-btn" data-target="durable" aria-pressed="false">Durable</button>
        <span class="toggle-highlight" aria-hidden="true"></span>
      </div>
    </div>
  </div>

  <!-- khối ảnh toggle -->
  <div class="toggle-wrapper" id="toggleWrapper">
    <img class="toggle-img show" data-type="clear" src="https://cdn.shopify.com/s/files/1/0652/3725/4227/files/2025-09-28_14-45-34.png?v=1759045546" alt="Clear Image">
    <img class="toggle-img" data-type="durable" src="https://cdn.shopify.com/s/files/1/0652/3725/4227/files/2025-09-28_14-44-53.png?v=1759045521" alt="Durable Image">
  </div>

  <!-- ảnh cuối -->
  <img class="styled-image" src="https://cdn.shopify.com/s/files/1/0652/3725/4227/files/2025-09-29_15-10-26.png?v=1759133476" alt="Extra Image">
</div>

<style>
.image-block-wrapper {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  position: relative;
}

/* ---- ảnh đầu chứa nút ---- */
.top-image-wrapper {
  position: relative;
}

.styled-image {
  max-width: 100%;
  display: block;
  margin: 0;
}

.toggle-container {
  position: absolute;
  bottom: 12px;       /* đặt sát đáy ảnh đầu */
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  pointer-events: none;
}

.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,0.6);
  border-radius: 999px;
  padding: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  backdrop-filter: blur(8px);
  pointer-events: auto;
}

.toggle-btn {
  border: none;
  background: transparent;
  padding: 12px 36px;
  min-width: 180px;
  font-weight: 700;
  font-size: 16px;
  color: #2b2b2b;
  cursor: pointer;
  z-index: 2;
  white-space: nowrap;
}

.toggle-btn.active { color: #071022; }

.toggle-highlight {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 6px;
  width: calc(50% - 12px);
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(8,12,20,0.06);
  transition: transform 300ms cubic-bezier(.2,.9,.2,1);
  z-index: 1;
}

.toggle-switch.clear .toggle-highlight { transform: translateX(0%); }
.toggle-switch.durable .toggle-highlight { transform: translateX(100%); }

/* ---- ảnh toggle ---- */
.toggle-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 12;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.toggle-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.toggle-img.show { opacity: 1; }

/* responsive */
@media (max-width: 820px) {
  .toggle-btn { min-width: 130px; padding: 10px 24px; font-size: 15px; }
  .toggle-container { bottom: 8px; }
}
</style>

<script>
(function () {
  const wrapper = document.getElementById('toggleWrapper');
  const switchWrap = document.getElementById('toggleSwitch');
  const buttons = switchWrap.querySelectorAll('.toggle-btn');
  const imgs = wrapper.querySelectorAll('.toggle-img');

  const srcClear = imgs[0].src;
  const srcDurable = imgs[1].src;

  wrapper.style.backgroundImage = `url("${srcClear}")`;

  function setActive(target) {
    const activeBtn = switchWrap.querySelector('.toggle-btn.active');
    if (activeBtn && activeBtn.dataset.target === target) return;

    buttons.forEach(b => {
      const is = b.dataset.target === target;
      b.classList.toggle('active', is);
      b.setAttribute('aria-pressed', is);
    });

    switchWrap.classList.remove('clear','durable');
    switchWrap.classList.add(target);

    wrapper.style.backgroundImage = `url("${target === 'clear' ? srcClear : srcDurable}")`;

    imgs.forEach(img => {
      img.classList.toggle('show', img.dataset.type === target);
    });
  }

  buttons.forEach(btn => {
    btn.addEventListener('click', () => setActive(btn.dataset.target));
  });
})();
</script>

<!-- SECTION PRACTICAL -->
<section class="practical-section">
  <div class="container">
    <!-- Heading -->
    <h2 class="practical-title">Practical</h2>
    <p class="practical-subtitle">Maximize enjoyment with ingenious designs</p>

    <!-- Grid -->
    <div class="practical-grid">
      <!-- Item 1 -->
      <div class="practical-item">
        <img src="https://cdn.shopify.com/s/files/1/0652/3725/4227/files/Practical-Dual_Sidebars.webp?v=1759134752" alt="DUAL_Sidebars">
        <div class="practical-caption">
          <h3 class="practical-caption-title">Dual Sidebars</h3>
          <p class="practical-caption-text">Navigate more efficiently and access quickly.</p>
        </div>
      </div>

      <!-- Item 2 -->
      <div class="practical-item">
        <img src="https://cdn.shopify.com/s/files/1/0652/3725/4227/files/Practical-Penloop.webp?v=1759134753" alt="Pen loop">
        <div class="practical-caption">
          <h3 class="practical-caption-title">Attachable Pen Loop</h3>
          <p class="practical-caption-text">Adaptable to different pen sizes and easy to replace.</p>
        </div>
      </div>

      <!-- Item 3 -->
      <div class="practical-item">
        <img src="https://cdn.shopify.com/s/files/1/0652/3725/4227/files/Practical-Foot_Pads.webp?v=1759134752" alt="Stable Foot Pads">
        <div class="practical-caption">
          <h3 class="practical-caption-title">Stable Foot Pads</h3>
          <p class="practical-caption-text">Write more comfortably on desktop.</p>
        </div>
      </div>

      <!-- Item 4 -->
      <div class="practical-item">
        <img src="https://cdn.shopify.com/s/files/1/0652/3725/4227/files/Practical-Top_Charging.webp?v=1759134753" alt="Top Charging Port">
        <div class="practical-caption">
          <h3 class="practical-caption-title">Top Charging Port</h3>
          <p class="practical-caption-text">PConnect cable conveniently and neatly on desktop.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<style>
/* Section wrapper */
.practical-section {
  background: #f6f7f8; /* giống tone Supernote */
  padding: 60px 20px;
  text-align: center;
}

.practical-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #222;
}

.practical-subtitle {
  font-size: 16px;
  color: #555;
  margin-bottom: 40px;
}

/* Grid layout */
.practical-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.practical-item {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.practical-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}

.practical-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* Caption */
.practical-caption {
  padding: 16px;
  text-align: center;
}

.practical-caption-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
  color: #222;
}

.practical-caption-text {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}

/* Responsive */
@media (max-width: 1024px) {
  .practical-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .practical-grid {
    grid-template-columns: 1fr;
  }
}
</style>