/* CSS của chân trang.
   Website gốc để đoạn này inline trong application/views/homepage/footer.php,
   không nằm trong file css nào - nên bị bỏ sót khi chuyển sang theme. Thiếu nó
   thì logo đối tác giữ nguyên bề rộng gốc 396px và bị cắt trong khung slider. */

.c_footer_logo_slider {
  background-color: #fff;
  padding: 30px 0;
}

.swiper-container.slider3 {
  width: 100%;
  height: 100%;
}

.slider3 img {
  width: 180px;
  height: auto;
}

.slider3 .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.social-icon {
  float: right;
}

.social-detail {
  text-align: center;
  color: var(--nv-primary);
  font-size: 20px;
  margin: 5px;
  padding: 5px 0;
}

.social-detail img {
  width: 35px;
}

.social-detail img:hover {
  box-shadow: 3px 3px 6px rgb(0 0 0 / 12%);
}

/* Logo chân trang: cỡ đặt ở đây thay vì width="70%" trên thẻ img như trước, để
   đổi logo không phải sửa PHP. Giới hạn theo chiều cao vì logo có thể là bản
   chữ dài hoặc bản biểu tượng vuông, hai dạng cần bề rộng rất khác nhau. */
.nv-footer-logo {
  display: inline-block;
  margin-bottom: 14px;
}

/* Cùng nguyên tắc với logo ở thanh điều hướng: ràng theo chiều cao để logo hình
   gì cũng chiếm đúng một khoảng như nhau, max-width chặn logo chữ quá dài, và
   object-fit: contain để khi bị chặn thì ảnh thu vào chứ không kéo méo. */
.nv-footer-logo img {
  height: 58px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
}

/* ---------------------------------------------------------------------------
   Section "Đối tác": tiêu đề, mô tả và dải logo.
   Danh sách sửa ở quản trị: menu Đối tác; tiêu đề và mô tả ở Thông tin website.
   --------------------------------------------------------------------------- */

.nv-partners {
  padding: 44px 0 30px;
}

.nv-partners-head {
  text-align: center;
  margin-bottom: 26px;
}

.nv-partners-title {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--nv-primary);
}

.nv-partners-rule {
  display: block;
  width: 100px;
  height: 4px;
  margin: 18px auto 0;
  background: var(--nv-primary);
  border-radius: 2px;
}

.nv-partners-desc {
  margin: 14px auto 0;
  max-width: 680px;
  color: #5b6a75;
  line-height: 1.7;
}

/* Logo thật của các hãng có nền và tỉ lệ rất khác nhau, nên ràng theo chiều cao
   và để contain: hãng nào cũng chiếm đúng một khoảng như nhau, không méo. */
.nv-partners .swiper-slide img {
  height: 62px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin: 0 auto;
}

.nv-partners .swiper-slide a {
  display: block;
}

@media (max-width: 767px) {
  .nv-partners {
    padding: 30px 0 20px;
  }

  .nv-partners-title {
    font-size: 24px;
  }
}

/* ---------------------------------------------------------------------------
   Nút nhạc nền, nằm ngay trên nút lên đầu trang ở góc phải.
   --------------------------------------------------------------------------- */

.nv-music-btn {
  position: fixed;
  right: 30px;
  /* Nút lên đầu trang cao 40px, đáy cách 30px - đặt cách nó 12px. */
  bottom: 82px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--nv-primary);
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(15, 30, 45, .22);
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}

.nv-music-btn:hover,
.nv-music-btn:focus {
  background: var(--nv-primary);
  color: #fff;
  outline: none;
}

/* Đang phát: đảo màu để nhìn là biết ngay, khỏi phải bấm thử. */
.nv-music-btn.is-playing {
  background: var(--nv-primary);
  color: #fff;
}

.nv-music-btn.is-playing:hover {
  background: var(--nv-primary-deep);
}

/* Ba vạch nhún nhảy khi đang phát; lúc dừng thì ẩn hẳn, chỉ còn nốt nhạc. */
.nv-music-wave {
  display: none;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
  margin-left: 4px;
}

.nv-music-btn.is-playing .nv-music-wave {
  display: inline-flex;
}

.nv-music-wave i {
  width: 2px;
  height: 4px;
  border-radius: 1px;
  background: currentColor;
  animation: nv-music-bounce .9s ease-in-out infinite;
}

.nv-music-wave i:nth-child(2) { animation-delay: .15s; }
.nv-music-wave i:nth-child(3) { animation-delay: .3s; }

@keyframes nv-music-bounce {
  0%, 100% { height: 4px; }
  50%      { height: 12px; }
}

/* Đang phát thì nút rộng ra một chút để chứa ba vạch. */
.nv-music-btn.is-playing {
  width: auto;
  padding: 0 12px;
}

/* Người dùng đã tắt hiệu ứng chuyển động thì bỏ phần nhún nhảy - giữ ba vạch
   đứng yên, vẫn thấy được là đang phát. */
@media (prefers-reduced-motion: reduce) {
  .nv-music-wave i {
    animation: none;
    height: 8px;
  }
}

@media (max-width: 767px) {
  .nv-music-btn {
    right: 20px;
    bottom: 76px;
  }
}