/* Video Card Styles - Enhanced version */
.video-card {
  margin-bottom: 1.25rem;
  contain: layout paint style; /* Cải thiện performance bằng CSS containment */
  /* Ghi đè outline-color từ file khác */
  --primary: 0 0 0; /* Reset biến --primary nếu được sử dụng */
}

/* Card container */
.video-card a {
  display: block;
  border-radius: var(--radius-lg, 0.75rem);
  overflow: hidden;
  background: var(--card-bg, rgba(15, 15, 25, 0.6));
  box-shadow: var(--card-shadow, 0 4px 15px rgba(0, 0, 0, 0.1));
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  will-change: transform; /* Báo trước cho browser về thuộc tính sẽ thay đổi */
}

.video-card a:hover {
  transform: translateY(-3px);
  box-shadow: var(--card-hover-shadow, 0 10px 25px rgba(0, 0, 0, 0.2));
}

/* Thumbnail container */
.video-card-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg, 0.75rem) var(--radius-lg, 0.75rem) 0 0;
  height: 0;
  /* Sử dụng tỷ lệ từ dữ liệu hình ảnh thực tế */
  padding-bottom: calc(var(--skeleton-height, 56.25) * 1%);
  contain: strict; /* Mạnh mẽ hơn, giới hạn tác động khi thay đổi nội dung */
  /* Ghi đè outline từ file CSS khác */
  outline: none !important;
  outline-width: 0 !important;
  outline-color: transparent !important;
  /* Thêm border riêng phù hợp với theme */
  border: 1px solid var(--card-border, rgba(0, 0, 0, 0.3)) !important;
}

/* Sửa lại border khi hover không dùng outline */
.video-card a:hover .video-card-wrap {
  border-color: var(--card-border, rgba(0, 0, 0, 0.3)) !important;
}

/* Đảm bảo outline được ghi đè khi hover */
.video-card-wrap:hover,
.group:hover .video-card-wrap,
.video-card a:hover .video-card-wrap,
.video-card > a.tap-active .video-card-wrap {
  outline: none !important;
  outline-style: none !important;
  outline-width: 0 !important;
  outline-color: transparent !important;
}

/* Image styling - tối ưu CLS */
.video-card-wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
  transform: translate3d(0,0,0); /* Force GPU acceleration */
  transition: transform 0.5s cubic-bezier(0.2, 0, 0.2, 1); /* Easing function tối ưu */
  backface-visibility: hidden; /* Cải thiện rendering */
}

.video-card a:hover img {
  transform: scale(1.05);
}

/* Gradient overlay */
.video-card-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%);
  opacity: 0.8;
  transition: opacity 0.3s ease;
  z-index: 1;
  pointer-events: none; /* Cho phép click events xuyên qua */
}

.video-card a:hover .video-card-wrap::after {
  opacity: 0.9;
}

/* Play overlay */
.play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none; /* Không chặn click events */
}

.play-icon {
  width: 50px;
  height: 50px;
  background: rgba(var(--color-primary-rgb, 0, 0, 0), 0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transform: scale(0.9);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.play-icon::before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent white;
  margin-left: 4px;
}

.video-card a:hover .play-overlay {
  opacity: 1;
}

.video-card a:hover .play-icon {
  transform: scale(1);
  background: var(--color-primary, rgba(0, 0, 0, 0.9));
}

/* Duration badge */
.video-card-badge {
  position: absolute;
  z-index: 3;
  contain: content; /* Cải thiện performance bằng CSS containment */
}

/* Ribbon badge (top left) */
.video-card-badge.top-1\.5.left-1\.5 {
  top: 10px;
  left: 10px;
  background-color: var(--card-badge-bg, var(--header-bg, rgba(0, 0, 0, 0.85)));
  color: white;
  padding: 4px 8px;
  border-radius: var(--radius-sm, 4px);
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 0.75rem;
  box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.2));
  border: 1px solid rgba(255, 255, 255, 0.2);
  /* High contrast ratio for accessibility */
  color: #ffffff;
}

/* Duration badge (bottom right) */
.video-card-badge.bottom-1\.5.right-1\.5 {
  bottom: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.75);
  padding: 3px 8px;
  border-radius: var(--radius-sm, 4px);
  box-shadow: var(--shadow-sm, 0 2px 5px rgba(0, 0, 0, 0.3));
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.video-card-badge .duration,
.video-card-badge .stats {
  font-size: 0.85rem;
  color: white;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* Video title */
.video-card-title {
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--card-text, white);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s ease;
  margin: 0; /* Remove any default margin */
  height: calc(0.95rem * 1.4 * 2 + 1.5rem); /* Chiều cao cố định: fontsize * lineheight * 2 dòng + padding */
  min-height: calc(0.95rem * 1.4 * 2 + 1.5rem);
  /* High contrast ratio for accessibility */
  color: var(--color-text-primary, rgba(255, 255, 255, 0.95));
}

.video-card a:hover .video-card-title {
  color: var(--card-hover-text, var(--header-hover, #fff)); /* Sử dụng màu chủ đề thay vì màu tím cố định */
}

/* Ensure compatibility with tailwind classes */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Additional fixes for compatibility */
.text-xs {
  font-size: 0.75rem;
}

.text-primary-foreground\/70 {
  color: rgba(255, 255, 255, 0.95); /* Tăng contrast ratio */
}

/* Skeleton Loading Styles - Cải thiện hiệu ứng */
.skeleton-loading {
  position: relative;
  overflow: hidden;
  background: rgba(30, 30, 50, 0.8);
  border-radius: 0.75rem;
  width: 100%;
  contain: layout style paint;
}

/* Cải thiện hiệu ứng shimmer */
.skeleton-loading::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.05) 20%,
    rgba(var(--color-primary-rgb, 0, 0, 0), 0.15) 60%,
    rgba(255, 255, 255, 0)
  );
  animation: shimmer 1.8s infinite; /* Làm animation chậm hơn một chút */
  will-change: transform;
  z-index: 5; /* Đảm bảo hiệu ứng luôn hiển thị trên cùng */
}

/* Tối ưu animation - Làm cho chuyển động mượt hơn */
@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Content Visibility tối ưu */
@media (min-width: 768px) {
  .video-card:nth-child(n+13) {
    content-visibility: auto;
    contain-intrinsic-size: 1px calc(var(--skeleton-height, 56.25) * 1% + (0.95rem * 1.4 * 2 + 1.5rem));
  }
} 

/* No override needed since .video-card-wrap now uses --skeleton-height directly */

/* Image visibility states - Cải thiện để hiệu ứng mượt hơn */
.video-card-wrap img.lazy:not(.loaded) {
  opacity: 0;
  transform: scale(0.98);
  transition: none; /* Không cần transition khi chưa tải */
}

.video-card-wrap img.lazy.loaded {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.5s ease, transform 0.3s ease;
}

/* Skeleton titles */
.skeleton-loading .video-card-title {
  height: calc(0.95rem * 1.4 * 2 + 1.5rem); /* Giữ chính xác chiều cao như tiêu đề thật */
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  contain: content; /* Cải thiện performance */
}

.skeleton-loading .video-card-title::before,
.skeleton-loading .video-card-title::after {
  content: '';
  display: block;
  height: calc(0.95rem * 1.4);
  background: rgba(40, 40, 60, 0.4);
  border-radius: 4px;
}

.skeleton-loading .video-card-title::after {
  width: 70%; /* Dòng thứ hai ngắn hơn để trông tự nhiên */
} 

/* Đảm bảo tỷ lệ khung hình 16:9 cho video container */
.aspect-video {
  aspect-ratio: 16 / 9 !important;
  height: 0 !important; 
  padding-bottom: 56.25% !important; /* 9/16*100% */
}

/* Đảm bảo iframe lấp đầy toàn bộ container */
.aspect-video iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
} 

/* Đảm bảo tỷ lệ khung hình 16:9 */
.aspect-video {
  aspect-ratio: 16 / 9;
}