.video-home-item {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border: 1px solid #efefef;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.video-home-item .vh-media {
  position: relative;
  aspect-ratio: 3 / 4;
  background: #111;
  overflow: hidden;
  cursor: pointer;
}

.video-home-item .vh-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-home-item .vh-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
  pointer-events: none;
}

.video-home-item .vh-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: transform 0.2s ease, background 0.2s ease;
}

.video-home-item .vh-media:hover .vh-play {
  background: rgba(0, 0, 0, 0.65);
  transform: translate(-50%, -50%) scale(1.06);
}

.video-home-item .vh-title {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  z-index: 2;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.video-home-item .vh-player {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #000;
}

.video-home-item .vh-player iframe,
.video-home-item .vh-player video,
.video-home-item .vh-player blockquote.tiktok-embed {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.video-home-item .vh-player video {
  object-fit: cover;
}

/* Fullscreen: object-fit: cover làm video bị cắt/zoom - chuyển sang contain để hiện đủ khung hình.
   LƯU Ý: mỗi pseudo-class fullscreen phải để RIÊNG 1 rule, không được gộp chung bằng dấu phẩy -
   nếu 1 trình duyệt không hiểu 1 trong các pseudo-class đó (vd Chrome không hiểu
   :-moz-full-screen) thì theo spec CSS, cả rule gộp chung sẽ bị bỏ qua hoàn toàn,
   khiến fix này không bao giờ chạy trên Chrome (đây chính là nguyên nhân video bị vỡ/zoom
   khi bấm full màn hình). */
.video-home-item .vh-player video:fullscreen {
  object-fit: contain;
  width: 100%;
  height: 100%;
  background: #000;
}

.video-home-item .vh-player video:-webkit-full-screen {
  object-fit: contain;
  width: 100%;
  height: 100%;
  background: #000;
}

.video-home-item .vh-player video:-moz-full-screen {
  object-fit: contain;
  width: 100%;
  height: 100%;
  background: #000;
}

.video-home-item .vh-player video:-ms-fullscreen {
  object-fit: contain;
  width: 100%;
  height: 100%;
  background: #000;
}

/* Phòng khi fullscreen rơi vào .vh-player (thẻ cha) thay vì video - đảm bảo
   video con vẫn giữ tỉ lệ gốc. Vẫn phải để riêng từng rule như trên. */
.video-home-item .vh-player:fullscreen video {
  object-fit: contain;
  width: 100%;
  height: 100%;
  background: #000;
}

.video-home-item .vh-player:-webkit-full-screen video {
  object-fit: contain;
  width: 100%;
  height: 100%;
  background: #000;
}

.video-home-item .vh-player .vh-player-loading,
.video-home-item .vh-player .vh-player-error {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  text-align: center;
  padding: 12px;
}

/* ---- Khối sản phẩm dưới video (slide khi có nhiều hơn 1 sản phẩm) ---- */
.video-home-item .vh-products {
  position: relative;
  margin-top: auto;
  padding: 10px;
  border-top: 1px solid #f0f0f0;
}

.video-home-item .vh-products-track {
  display: flex;
}

.video-home-item .vh-products.is-slider .vh-products-track {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.video-home-item .vh-products.is-slider .vh-products-track::-webkit-scrollbar {
  display: none;
}

.video-home-item .product-card {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: start;
  padding: 10px;
  background: #fff;
  border: 2px solid #eee;
  border-radius: 11px;
  overflow: hidden;
}

.video-home-item .product-card-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.video-home-item .product-thumb {
  width: 35%;
  min-width: 35%;
  aspect-ratio: 1;
  border-radius: 7px;
  overflow: hidden;
  background: #9da1a4;
}

.video-home-item .product-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.video-home-item .product-content {
  flex: 1;
  min-width: 0;
}

.video-home-item .product-title {
  margin: 0;
  color: #050505;
  font-size: 16px;
  line-height: 1.34;
  font-weight: 400;
  letter-spacing: -0.4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-home-item .product-rating {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
}

.video-home-item .stars {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 15px;
  line-height: 1;
  color: #ffb719;
}

.video-home-item .star-empty {
  color: #d8dbde;
}

.video-home-item .half-star {
  position: relative;
  width: 15px;
  height: 15px;
  display: inline-block;
}

.video-home-item .half-star .star-bg {
  position: absolute;
  inset: 0;
  color: #d8dbde;
}

.video-home-item .half-star .star-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  overflow: hidden;
  color: #ffb719;
}

.video-home-item .review-count {
  font-size: 13px;
  color: #777;
  font-weight: 400;
}

.video-home-item .product-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 8px;
}

.video-home-item .price-new {
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  color: #000;
  white-space: nowrap;
}

.video-home-item .price-old {
  font-size: 14px;
  line-height: 1;
  font-weight: 400;
  color: #777;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  white-space: nowrap;
}

.video-home-item .currency {
  font-size: 0.65em;
  margin-left: 2px;
  text-decoration: underline;
}

/* Nút "Thêm vào giỏ hàng" hiện khi hover - cùng hiệu ứng với sản phẩm thường */
.video-home-item .vh-cart-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  background: linear-gradient(to top, #fff 65%, rgba(255, 255, 255, 0));
}

.video-home-item .product-card:hover .vh-cart-overlay {
  opacity: 1;
  visibility: visible;
}

.video-home-item .btn-add-to-cart-view_buy_now {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 8px 10px;
  background: #fff;
  color: #111;
  border: 1px solid #111;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}

.video-home-item .btn-add-to-cart-view_buy_now:hover {
  background: #111;
  color: #fff;
}

.video-home-item .btn-add-to-cart-view_buy_now:active {
  transform: translateY(1px);
}

.video-home-item .btn-add-to-cart-view_buy_now.rotate-arrow-light-dark::after {
  width: 14px;
  height: 15px;
  margin-left: 4px;
  background-size: contain;
}

/* Thiết bị cảm ứng không có hover: hiện nút cố định dưới thẻ sản phẩm */
@media (max-width: 768px) {
  .video-home-item .vh-cart-overlay {
    position: static;
    padding: 8px 0 0;
    opacity: 1;
    visibility: visible;
    background: none;
  }

  .video-home-item .btn-add-to-cart-view_buy_now {
    background: #111;
    color: #fff;
  }

  .video-home-item .btn-add-to-cart-view_buy_now.rotate-arrow-light-dark::after {
    background: url('data:image/svg+xml;utf8,<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.49851 6.99392L13.506 6.99392L13.506 12.0014M6.49386 14.0061L13.4359 7.06405" stroke="%23fff" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center center;
    background-size: contain;
  }
}

/* Dots điều hướng slide sản phẩm */
.video-home-item .vh-products-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.video-home-item .vh-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #d8dbde;
  cursor: pointer;
  transition: background 0.2s ease, width 0.2s ease;
}

.video-home-item .vh-dot.is-active {
  width: 18px;
  border-radius: 4px;
  background: #d0021b;
}

/* Màn hình nhỏ: card hẹp hơn nên thu nhỏ chữ theo tỉ lệ của thiết kế */
@media (max-width: 575.98px) {
  .video-home-item .product-card {
    gap: 10px;
    padding: 8px;
  }

  .video-home-item .product-title {
    font-size: 14px;
  }

  .video-home-item .stars {
    font-size: 13px;
  }

  .video-home-item .half-star {
    width: 13px;
    height: 13px;
  }

  .video-home-item .review-count {
    font-size: 12px;
  }

  .video-home-item .price-new {
    font-size: 16px;
  }

  .video-home-item .price-old {
    font-size: 13px;
  }
}

/* Carousel video trang chủ: khoảng cách + chiều cao đều nhau */
.video-home-list {
  padding: 4px 12px;
}

.video-home-list .owl-stage {
  display: flex;
}

.video-home-list .owl-item {
  display: flex;
}

.video-home-list .owl-item > div {
  width: 100%;
}

@media (max-width: 575.98px) {
  .video-home-list {
    padding: 4px 8px;
  }
}

/* ==========================================================================
   Video + Slide sản phẩm theo danh mục (Category_product.blade.php)
   - Khung video (trái): chiều rộng cố định, không đổi theo số lượng sản phẩm.
   - Slide sản phẩm (phải): chiếm phần chiều rộng còn lại, chạy owlCarousel
     độc lập với video. Hai khối cùng hàng và luôn giữ nguyên hàng ngang
     kể cả trên di động (không xuống dòng).
   ========================================================================== */
.category-slider-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 16px;
  width: 100%;
}

.category-video-col {
  position: relative;
  flex: 0 0 300px;
  width: 300px;
  max-width: 300px;
}

.category-product-col {
  flex: 1 1 0;
  min-width: 0;
}

/* Khung video lấp đầy đúng chiều cao của cột (đồng bộ với khu vực sản phẩm
   bên cạnh) thay vì khoá theo tỉ lệ 3/4 như ở carousel video toàn trang chủ. */
.category-video-col .owl-carousel-category-video,
.category-video-col .owl-stage-outer,
.category-video-col .owl-stage,
.category-video-col .owl-item,
.category-video-col .video-home-item {
  height: 100%;
}

.category-video-col .owl-stage {
  display: flex;
}

.category-video-col .owl-item {
  display: flex;
}

.category-video-col .video-home-item .vh-media {
  aspect-ratio: auto;
  height: 100%;
}

/* Chỉ hiển thị 1 video/lúc: nút prev/next đặt nổi ở giữa phía dưới khung video */
.category-video-col .owl-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  display: flex;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
  z-index: 4;
}

.category-video-col .owl-nav button.owl-prev,
.category-video-col .owl-nav button.owl-next {
  pointer-events: auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.category-video-col .owl-nav button.owl-prev:hover,
.category-video-col .owl-nav button.owl-next:hover {
  background: rgba(0, 0, 0, 0.7);
}

/* Tablet: thu hẹp khung video để nhường chỗ cho slide sản phẩm */
@media (max-width: 1024px) {
  .category-video-col {
    flex-basis: 240px;
    width: 240px;
    max-width: 240px;
  }
}

/* Mobile: vẫn giữ 2 khối cùng hàng, chỉ giảm số card sản phẩm hiển thị
   (xử lý ở responsive của owlCarousel-category-product trong home.js) */
@media (max-width: 768px) {
  .category-slider-row {
    gap: 10px;
  }
  .category-video-col {
    flex-basis: 42%;
    width: 42%;
    max-width: 42%;
  }
}

@media (max-width: 575.98px) {
  .category-video-col {
    flex-basis: 48%;
    width: 48%;
    max-width: 48%;
  }
  .category-video-col .owl-nav button.owl-prev,
  .category-video-col .owl-nav button.owl-next {
    width: 26px;
    height: 26px;
  }
}