@charset "UTF-8";
/* ============================================================
   Section 2 — Banner + Carousel (Swiper)
   Nguồn: section-2/style.css — toàn bộ scope trong .section-2
   ============================================================ */
.section-2 {
  /* Biến :root gốc → scope theo section */
  --ink: #000000;
  --bg: #fafafa;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
}
.section-2,
.section-2 *,
.section-2 *::before,
.section-2 *::after {
  box-sizing: border-box;
}
.section-2.vib-banner {
  background: var(--bg);
  padding: 120px 20px 100px;
}
.section-2 .vib-banner__inner {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 50px;
}
.section-2 .vib-banner__content {
  display: flex;
  flex-direction: column;
  width: 380px;
  flex-shrink: 0;
}
.section-2 .vib-banner__title {
  margin: 0;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
}
.section-2 .vib-banner__desc {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  margin-top: 20px;
}
.section-2 .vib-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink);
  text-decoration: none;
}
.section-2 .vib-banner__cta img {
  width: 22px;
  height: 22px;
}
.section-2 {
  /* ---------- Carousel (Swiper) ---------- */
}
.section-2 .vib-banner__carousel {
  position: relative;
  flex: 1 1 auto;
  max-width: 670px;
  height: 480px;
  min-width: 0;
}
.section-2 .vib-swiper {
  width: 100%;
  height: 100%;
}
.section-2 .vib-swiper .swiper-wrapper {
  align-items: center;
}
.section-2 .vib-swiper {
  /* QUAN TRỌNG: Swiper luôn thấy width CỐ ĐỊNH/ĐỒNG NHẤT cho mọi slide
     (= kích thước thẻ active + gap, tính sẵn). Card "to khi active, nhỏ khi
     không" chỉ là hiệu ứng VISUAL của .vib-slide (div con, position:absolute)
     bên trong — hoàn toàn tách khỏi kích thước Swiper dùng để tính layout.
     Lý do: nếu để chính .swiper-slide đổi width theo trạng thái active (cách
     làm ban đầu), Swiper phải tính lại vị trí dựa trên width đang thay đổi
     ngay trong lúc nó cũng đang tính toán target của phép trượt — hai việc này
     không đồng bộ, gây active bị lệch/cắt một khúc bên trái (thấy rõ và không
     tự sửa lại trên mobile). Giữ slot Swiper cố định loại bỏ hẳn nguồn gốc lỗi. */
}
.section-2 .vib-swiper .swiper-slide {
  width: 380px;
  height: 480px;
  transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: transform, opacity;
}
.section-2 .vib-swiper {
  /* Item trước đó: ẩn hoàn toàn */
}
.section-2 .vib-swiper .swiper-slide-prev,
.section-2 .vib-swiper .swiper-slide-duplicate-prev {
  opacity: 0 !important;
  pointer-events: none;
}
.section-2 .vib-swiper .swiper-slide-active .vib-slide {
  width: 360px;
  height: 480px;
  cursor: default;
}
.section-2 .vib-swiper .swiper-slide-active .vib-slide img {
  filter: blur(0);
}
.section-2 .vib-swiper .swiper-slide-active .vib-slide__overlay {
  opacity: 1;
}
.section-2 .vib-swiper .swiper-slide-active .vib-slide__overlay .h3-p {
  font-size: 24px;
}
.section-2 .vib-swiper .swiper-slide-active .vib-slide__overlay p {
  font-size: 16px;
}
.section-2 .vib-slide {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 290px;
  height: 384px;
  border-radius: 20px;
  overflow: hidden;
  transition: width 0.4s ease, height 0.4s ease;
}
.section-2 .vib-slide img {
  filter: blur(6px);
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  /* Chuyển động blur -> nét khi slide thành active — filter nằm ở img nên
     transition cũng phải khai báo ở img, không phải ở .vib-slide (khai báo
     nhầm chỗ trước đây khiến ảnh nét/mờ đột ngột không animate). */
  transition: filter 0.4s ease;
  will-change: filter;
}
.section-2 .vib-slide__overlay {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 20px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000000 100%);
  color: #ffffff;
  opacity: 0;
  transition: opacity 0.3s ease;
  will-change: opacity;
}
.section-2 .vib-slide__overlay .h3-p {
  margin: 0;
  font-size: 16px;
  /* Nhỏ hơn */
  font-weight: 600;
  line-height: 1.2;
  transition: font-size 0.4s ease;
}
.section-2 .vib-slide__overlay p {
  margin: 0;
  font-size: 14px;
  /* Nhỏ hơn */
  font-weight: 400;
  line-height: 1.6;
  transition: font-size 0.4s ease;
}
.section-2 .vib-banner__next {
  position: absolute;
  top: 50%;
  left: 342px;
  transform: translateY(-50%);
  width: 35px;
  height: 35px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 5px rgba(188, 188, 188, 0.5);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
  transition: left 0.4s ease;
  will-change: left;
}
.section-2 .vib-banner__next:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}
.section-2 .vib-banner__next img {
  transform: rotate(-90deg);
}
.section-2 .vib-banner__next {
  /* Hover effect chỉ áp dụng trên 1150px */
}
@media (min-width: 1150px) {
  .section-2 .vib-banner__next:hover {
    background: #000000;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  }
  .section-2 .vib-banner__next:hover img {
    filter: brightness(0) invert(1);
  }
}
@media only screen and (max-width: 1150px) {
  .section-2 .vib-banner__next {
    left: 300px;
  }
  .section-2 .vib-swiper .swiper-slide {
    width: 340px;
    height: 440px;
  }
  .section-2 .vib-swiper .swiper-slide .vib-slide {
    width: 250px;
    height: 344px;
  }
  .section-2 .vib-swiper .swiper-slide-active .vib-slide {
    width: 320px;
    height: 440px;
  }
}
@media only screen and (max-width: 1070px) {
  .section-2 .vib-banner__next {
    left: 280px;
  }
  .section-2 .vib-swiper .swiper-slide {
    width: 320px;
    height: 420px;
  }
  .section-2 .vib-swiper .swiper-slide .vib-slide {
    width: 230px;
    height: 324px;
  }
  .section-2 .vib-swiper .swiper-slide-active .vib-slide {
    width: 300px;
    height: 420px;
  }
}
@media (max-width: 767px) {
  .section-2.vib-banner {
    padding: 60px 20px;
  }
  .section-2 .vib-banner__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
  }
  .section-2 .vib-banner__content {
    width: 100%;
  }
  .section-2 .vib-banner__title {
    font-size: 28px;
  }
  .section-2 .vib-banner__carousel {
    width: 100%;
    max-width: 660px;
    height: 450px;
  }
  .section-2 .vib-swiper .swiper-slide {
    width: 100%;
    height: 450px;
  }
  .section-2 .vib-slide {
    width: 290px;
    height: 383px;
  }
  .section-2 .vib-swiper .swiper-slide-active .vib-slide {
    width: 100%;
    height: 450px;
  }
  .section-2 .vib-banner__next {
    left: unset;
    right: -19px;
  }
  .section-2 .vib-slide__overlay {
    width: calc(100vw - 40px);
  }
  .section-2 .vib-slide__overlay .h3-p {
    font-size: 24px;
    font-weight: 600;
  }
  .section-2 .vib-slide__overlay p:nth-child(2) {
    font-size: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .section-2 .vib-swiper .swiper-slide,
  .section-2 .vib-slide img,
  .section-2 .vib-slide__overlay,
  .section-2 .vib-banner__next {
    transition: none;
  }
}
@media (min-width: 1025px) {
  .section-2 .vib-slide img {
    transition: transform 0.4s ease;
  }
  .section-2 .vib-slide:hover img {
    transform: scale(1.08);
  }
}/*# sourceMappingURL=section-2.css.map */