body { background: #111; }
.vod-grid-wrap { background: #111; padding: 20px; }
.vod-section-title { font-size: 18px; font-weight: bold; color: #fff; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid #2a2a2a; font-family: Arial, sans-serif; }
.vod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.vod-card { background: #1a1a1a; border-radius: 6px; overflow: hidden; cursor: pointer; transition: transform 0.2s; font-family: Arial, sans-serif; }
.vod-card:hover { transform: scale(1.03); }
.vod-card-media { position: relative; width: 100%; padding-top: 56.25%; overflow: hidden; background: #000; }
.vod-card-media img, .vod-card-media video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.vod-card-media video { display: none; }
.vod-card:hover .vod-card-media img { display: none; }
.vod-card:hover .vod-card-media video { display: block; }
.vod-duration { position: absolute; bottom: 6px; left: 8px; background: rgba(0,0,0,0.75); color: #fff; font-size: 11px; padding: 2px 5px; border-radius: 3px; }
.vod-views { position: absolute; bottom: 6px; right: 8px; background: rgba(0,0,0,0.75); color: #fff; font-size: 11px; padding: 2px 5px; border-radius: 3px; }
.vod-badge { position: absolute; top: 8px; left: 8px; background: #e50914; color: #fff; font-size: 10px; font-weight: bold; padding: 2px 6px; border-radius: 3px; text-transform: uppercase; }
.vod-card-info { padding: 10px; }
.vod-card-title { font-size: 13px; font-weight: bold; color: #eee; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vod-card-meta { display: flex; justify-content: space-between; align-items: center; }
.vod-card-tags span { font-size: 11px; color: #e50914; margin-right: 6px; }
.vod-card-price { font-size: 13px; font-weight: bold; color: #4caf50; }
@media(max-width: 900px) { .vod-grid { grid-template-columns: repeat(2, 1fr); } }
@media(max-width: 500px) { .vod-grid { grid-template-columns: 1fr; } }