/* CSS của slider đầu trang.
   Website gốc để đoạn này inline trong application/views/homepage/slider.php
   chứ không nằm trong file css nào, nên tách ra đây. */

/* ---------------------------------------------------------------------------
   Chiều cao khung slide.

   Trên desktop slide chiếm trọn màn hình. Không phải trừ đi gì cả: đầu trang chỉ
   còn thanh điều hướng, mà ở trang chủ thanh này nổi lên trên slide chứ không
   chiếm chỗ riêng.

   Khai một biến duy nhất cho chiều cao vì hệ số phóng video bên dưới cũng phải
   dùng đúng con số này; để rời hai chỗ là video hở viền đen khi đổi chiều cao.
   --------------------------------------------------------------------------- */
:root {
  --nv-hero-h: 100vh;
}

.slider_intro .swiper-slide {
  background-size: cover;
  background-position: 50%;
  min-height: var(--nv-hero-h);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.swiper-pagination-bullet {
  background-color: transparent;
  border: 2px solid #fff;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background-color: #fff;
}

.swiper-button-container {
  background-color: rgba(0, 0, 0, 0.25);
}

.swiper-button-prev {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}

.swiper-button-next {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}



.nv-breadcrumb { background: #f5f7f9; padding: 10px 0; }
.nv-breadcrumb .breadcrumb { font-size: 14px; }
.nv-content img { max-width: 100%; height: auto; }
/* paginate_links(type=>'list') sinh ra <ul class="page-numbers"> - tức là chính
   thẻ ul cũng mang class page-numbers. Nếu tạo kiểu cho ".page-numbers" chung
   thì luật đó (2 class) thắng luật ".nv-pagination ul" (1 class + 1 thẻ), khiến
   ul bị đặt display:inline-block và có viền -> các trang xếp dọc trong một khung.
   Vì vậy phải nhắm riêng ul và riêng các thẻ a/span bên trong. */
.nv-pagination ul.page-numbers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  border: 0;
  background: none;
}

.nv-pagination ul.page-numbers > li {
  margin: 0;
  padding: 0;
  list-style: none;
  display: block;
}

.nv-pagination a.page-numbers,
.nv-pagination span.page-numbers {
  display: inline-block;
  min-width: 38px;
  padding: 7px 12px;
  border: 1px solid #dbe4e9;
  border-radius: 6px;
  color: #33424e;
  line-height: 22px;
  text-align: center;
}

.nv-pagination a.page-numbers:hover {
  border-color: var(--nv-primary);
  color: var(--nv-primary);
  text-decoration: none;
}

.nv-pagination span.page-numbers.current {
  background: var(--nv-primary);
  color: #fff;
  border-color: var(--nv-primary);
}
.nv-add-to-cart.nv-added { opacity: .65; pointer-events: none; }

/* Slider "Sản phẩm nổi bật" ở trang chủ.
   Vốn nằm inline trong application/views/homepage/layout_products.php. */
.swiper-container.slider2 {
  width: 100%;
  height: 100%;
}

.slider2 .swiper-slide {
  font-size: 18px;
  background: transparent;
  display: flex;
  /* Thẻ trong slider dùng chung kiểu với trang danh sách nên phải kéo cao
     bằng nhau thay vì canh giữa theo chiều dọc. */
  align-items: stretch;
  height: auto;
}
.slider2 .swiper-slide > .nv-post-card { width: 100%; }

.home-sector-left span { font-size: 14px; }

/* Slide đầu trang chủ: hỗ trợ cả ảnh nền và video.
   Một slide thì dựng tĩnh (.nv-hero-single), nhiều slide mới dùng Swiper. */
/* Khung ngoài phải position: relative, nếu không lớp nội dung (.nv-hero-overlay,
   inset: 0) sẽ bám vào tổ tiên có định vị gần nhất - hoá ra bám tận body và cao
   839px trong khi khung chỉ 254px, tràn xuống đè cả khối bên dưới. */
.nv-hero-single {
  position: relative;
}

.nv-hero-single .nv-hero-slide,
.slider_intro .swiper-slide {
  position: relative;
  overflow: hidden;
}

.nv-hero-single .nv-hero-slide {
  background-size: cover;
  background-position: 50%;
  min-height: var(--nv-hero-h);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* Video phủ kín khung, cắt phần thừa như ảnh nền */
.nv-slide-video,
.nv-slide-embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.nv-slide-video { object-fit: cover; }

/* Iframe YouTube/Vimeo luôn là khung 16:9, phải phóng to để phủ kín khung slide.
   Không dùng cặp min-width/min-height rời rạc: chúng áp dụng độc lập nên iframe
   dễ lệch khỏi tỉ lệ 16:9, khiến trình phát YouTube kẻ viền đen bên trong.
   Thay vào đó tính một hệ số phóng chung cho cả hai chiều: lấy cạnh nào cần
   phóng nhiều hơn giữa chiều rộng (100vw) và chiều cao khung slide. */
.nv-slide-embed iframe {
  --nv-cover: max(calc(100vw / 16), calc(var(--nv-hero-h) / 9));
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(16 * var(--nv-cover));
  height: calc(9 * var(--nv-cover));
  /* Chỉ là lưới an toàn cho trường hợp slide cao hơn khung vì chữ dài. */
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
}

@media screen and (max-width: 800px) {
  /* 30vh như bản cũ giờ không đủ: hồi đó khung này chỉ có ảnh, nay còn tiêu đề,
     mô tả và nút - đo được nội dung cao 283px trong khung 254px nên chữ tràn ra
     đè xuống khối bên dưới. 74vh vừa đủ chứa mà vẫn thấy được phần đầu của khối
     tiếp theo, người xem biết là còn nội dung phía dưới. */
  :root { --nv-hero-h: 74vh; }
}

/* Lớp phủ tối nhẹ cho slide video, tương đương gradient của slide ảnh */
.swiper-slide.has-video::after,
.nv-hero-slide.has-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .1), rgba(0, 0, 0, .35));
  z-index: 1;
}




/* ---------------------------------------------------------------------------
   Khối nội dung trên slide đầu trang.

   Nằm đè lên slider chứ không nằm trong từng slide: nội dung dùng chung cho mọi
   slide nên không đổi khi slide chuyển, và cũng không bị Swiper nhân bản khi
   chạy vòng lặp. Nội dung sửa ở quản trị: Trang chủ → Giới thiệu & tiêu đề →
   "Nội dung trên slide đầu trang".
   --------------------------------------------------------------------------- */

/* Chưa có slide nào bật mà vẫn có nội dung chữ: dựng một nền phẳng màu chủ đạo
   để section không sập xuống và chữ trắng vẫn đọc được. */
.nv-hero-blank {
  background: linear-gradient(120deg, var(--nv-primary-deep), var(--nv-primary));
}

.nv-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  /* Để lọt chuột xuống slider bên dưới, nếu không thì không kéo slide được và
     nút chuyển của Swiper cũng không bấm được. Chữ và nút bật lại bên dưới. */
  pointer-events: none;
}

.nv-hero-overlay .container {
  width: 100%;
}

.nv-hero-copy {
  pointer-events: auto;
  color: var(--nv-slide-color, #fff);
  /* Ảnh slide sáng tối tuỳ tấm, đổ bóng nhẹ cho chữ luôn tách khỏi nền. */
  text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}

.nv-hero-heading {
  margin: 0;
  font-size: 52px;
  font-weight: 700;
  line-height: 1.22;
}

/* Bọc <b> quanh vài chữ trong tiêu đề để tô màu chủ đạo cho phần đó. */
.nv-hero-heading b,
.nv-hero-heading strong {
  color: var(--nv-primary);
  font-weight: 700;
}

/* Không có nút bên dưới nữa nên đoạn mô tả là thứ khép lại cả khối chữ: nới rộng
   thêm một chút và giãn dòng cho nó đủ sức đứng một mình, chứ để hẹp như lúc còn
   nút thì khối chữ trông cụt. */
.nv-hero-desc {
  margin: 24px 0 0;
  max-width: 620px;
  font-size: 18px;
  line-height: 1.8;
}

.nv-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
  padding: 10px 10px 10px 28px;
  border-radius: 999px;
  background: #fff;
  color: var(--nv-primary-deep);
  font-weight: 700;
  text-shadow: none;
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}

.nv-hero-btn i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--nv-primary);
  color: #fff;
  font-size: 14px;
  transition: transform .25s ease;
}

.nv-hero-btn:hover,
.nv-hero-btn:focus {
  color: var(--nv-primary-deep);
  text-decoration: none;
  transform: translateY(-2px);
}

.nv-hero-btn:hover i {
  transform: translateX(3px);
}

/* Nửa phải: ảnh hoặc video. Không có thì cả cột này không được dựng ra. */
.nv-hero-media {
  pointer-events: auto;
}

.nv-hero-media img,
.nv-hero-media video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(10, 25, 40, .35);
}

/* Video nhúng (YouTube, Vimeo) giữ khung 16:9 - iframe không tự có tỉ lệ. */
.nv-hero-media .nv-slide-embed {
  position: relative;
  padding-top: 56.25%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(10, 25, 40, .35);
}

.nv-hero-media .nv-slide-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  /* Khung này có tỉ lệ riêng nên không dùng cách phóng to của slide nền. */
  transform: none;
  min-width: 0;
  min-height: 0;
}

@media (max-width: 991px) {
  /* Chừa lề trên dưới cho chữ khỏi chạm mép khung.
     Chỉ đặt padding-top/bottom, KHÔNG dùng lối viết gộp `padding: 24px 0`: thẻ
     này là .col-lg-6 của Bootstrap, viết gộp sẽ xoá luôn phần đệm ngang 15px và
     chữ dính sát mép trái màn hình. */
  .nv-hero-copy {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .nv-hero-heading {
    font-size: 30px;
  }

  .nv-hero-desc {
    margin-top: 16px;
    font-size: 15px;
  }

  /* Màn hẹp thì hai cột xếp dọc, mà slide chỉ cao 30vh - không đủ chỗ cho ảnh
     bên phải, nên ẩn đi và giữ lại phần chữ. */
  .nv-hero-media {
    display: none;
  }
}