/* =========================================================
   お客様の声 – Video slider
   Toàn bộ style nằm trong .voice-videos để không đụng CSS khác
   ========================================================= */
.voice-videos {
  --vv-bg: #fffbf2;
  --vv-text: #3b2e22;
  --vv-dot: #e3e3e3;
  --vv-dot-active: #d4b08e;
  --vv-serif: "Shippori Mincho", "Zen Old Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;

  --vv-slide-w: 48.5%;   /* độ rộng slide giữa so với khung */
  --vv-gap: 5%;          /* khoảng cách giữa các slide */

  background: var(--vv-bg);
  color: var(--vv-text);
  padding: 60px 0 60px;
  font-family: var(--vv-serif);
}

.voice-videos__title {
  margin: 0 0 56px;
  text-align: center;
  font-family: var(--vv-serif);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: .06em;
  line-height: 1.3;
}

/* Khung slider. Chừa chỗ hai bên cho nút mũi tên nằm ngoài:
   --vv-arrow-size + --vv-arrow-space mỗi bên */
.voice-videos {
  --vv-arrow-size: 36px;
  --vv-arrow-space: 18px;   /* khoảng cách từ nút đến mép video */
}
.voice-videos__stage {
  position: relative;
  width: calc(100% - 2 * (var(--vv-arrow-size) + var(--vv-arrow-space)) - 16px);
  max-width: 1200px;
  margin: 0 auto;
}

/* .swiper cắt hai slide bên (thay cho stage) để nút ở ngoài không bị cắt */
.voice-videos .swiper { overflow: hidden; }

.voice-videos .swiper-slide {
  width: var(--vv-slide-w);
  cursor: pointer;
}

/* Thumbnail / player */
.vv-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #ddd;
  overflow: hidden;
}
.vv-media img,
.vv-media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  display: block;
}

/* Nút play nhỏ trên slide đang active (ẩn khi đã phát) */
.vv-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .35);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.vv-play::after {
  content: "";
  position: absolute;
  left: 26px;
  top: 20px;
  border-style: solid;
  border-width: 12px 0 12px 19px;
  border-color: transparent transparent transparent #fff;
}
.swiper-slide-active .vv-play { opacity: 1; }
.swiper-slide-active:hover .vv-play { background: rgba(0, 0, 0, .55); }
.vv-media.is-playing .vv-play { display: none; }

.vv-caption {
  margin: 18px 0 0;
  font-size: clamp(14px, 1.35vw, 16px);
  line-height: 2.1;
  letter-spacing: .03em;
}

/* Mũi tên: nằm trên vùng ảnh của 2 slide bên.
   Hộp này cao đúng bằng chiều cao ảnh (slide-w × 9/16) để căn giữa theo chiều dọc. */
.voice-videos .vv-arrows {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  /* chiều cao = chiều cao ảnh = độ rộng khung × slide-w × 9/16 */
  padding-top: calc(var(--vv-slide-w) * 0.5625);
  pointer-events: none;
  z-index: 20;
}
/* !important để CSS button của theme WordPress không ghi đè */
.voice-videos .vv-arrow {
  position: absolute !important;
  top: 50% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: var(--vv-arrow-size) !important;
  height: var(--vv-arrow-size) !important;
  min-width: 0 !important;
  margin: calc(var(--vv-arrow-size) / -2) 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(120, 120, 120, .5) !important;
  box-shadow: none !important;
  color: #fff !important;
  line-height: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
  cursor: pointer;
  pointer-events: auto;
  transition: background .25s;
}
.voice-videos .vv-arrow:hover { background: rgba(100, 100, 100, .7) !important; }
.voice-videos .vv-arrow svg { width: 18px; height: 18px; display: block; fill: currentColor; }
/* Nút nằm ngoài khung video */
.voice-videos .vv-arrow--prev { left: calc(-1 * (var(--vv-arrow-size) + var(--vv-arrow-space))) !important; right: auto !important; }
.voice-videos .vv-arrow--prev svg { margin-left: -3px; }
.voice-videos .vv-arrow--next { right: calc(-1 * (var(--vv-arrow-size) + var(--vv-arrow-space))) !important; left: auto !important; }
.voice-videos .vv-arrow--next svg { margin-left: 3px; }

/* Hàng chấm tròn (+ nút mũi tên trên SP) */
.vv-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: 40px;
}
.vv-dots {
  display: flex;
  justify-content: center;
  gap: 30px;
}
/* Nút cạnh chấm tròn: chỉ hiện trên SP */
.voice-videos .vv-nav__btn { display: none !important; }
.voice-videos .vv-dot {
  display: block !important;
  width: 12px !important;
  height: 12px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--vv-dot) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background .3s;
}
.voice-videos .vv-dot.is-active { background: var(--vv-dot-active) !important; }

/* SP: chỉ 1 video ở giữa, mũi tên nằm hai bên video */
@media (max-width: 767px) {
  .voice-videos {
    --vv-slide-w: 100%;      /* 1 video chiếm hết khung */
    --vv-gap: 24px;          /* video bên cạnh nằm ngoài khung → bị ẩn */
    --vv-arrow-size: 32px;
    --vv-arrow-space: 6px;   /* khoảng cách nút ↔ video */
    --vv-edge: 6px;          /* khoảng cách nút ↔ mép màn hình */
    padding: 48px 0 56px;
  }
  .voice-videos__title { margin-bottom: 32px; }

  /* Rộng theo màn hình (bỏ qua padding của khung cha), chừa chỗ cho 2 nút */
  .voice-videos__stage {
    --vv-side: calc(var(--vv-arrow-size) + var(--vv-arrow-space) + var(--vv-edge));
    width: calc(100vw - 2 * var(--vv-side));
    max-width: none;
    margin-left: calc(50% - 50vw + var(--vv-side));
    margin-right: 0;
  }
  .voice-videos .vv-arrow svg { width: 13px; height: 13px; }

  .vv-nav { margin-top: 24px; }
  .vv-dots { gap: 22px; }

  .vv-play { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
  .vv-play::after { left: 21px; top: 16px; border-width: 10px 0 10px 16px; }
}

@media (max-width: 767px) {
  .voice-videos.voice-videos--plain { padding: 24px 0; }
}