* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  background:#111; color:#eee;
}
.container { width:95%; max-width:1200px; margin:0 auto; }
a { text-decoration:none; color:inherit; }

header.header { background:#000; padding:15px 0; }
.header-container { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.logo { font-size:28px; font-weight:bold; color:#ff4c4c; }
.nav ul { display:flex; list-style:none; gap:15px; flex-wrap:wrap; }
.nav ul li a { color:#eee; transition:color 0.3s; }
.nav ul li a:hover { color:#ff4c4c; }
.search-form { display:flex; }
.search-form input { padding:5px 10px; border-radius:4px 0 0 4px; border:none; outline:none; }
.search-form button { padding:6px 12px; border:none; border-radius:0 4px 4px 0; background:#ff4c4c; color:#fff; cursor:pointer; }

.carousel { position:relative; overflow:hidden; margin:20px 0; border-radius:10px; }
.carousel-track { display:flex; transition:transform 0.5s ease-in-out; }
.carousel-item { min-width:100%; height:400px; background-size:cover; background-position:center; position:relative; }
.carousel-overlay { position:absolute; bottom:20px; left:20px; color:#fff; text-shadow:1px 1px 5px rgba(0,0,0,0.7); }
.carousel-btn { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,0.5); border:none; color:#fff; font-size:24px; padding:10px; cursor:pointer; border-radius:50%; }
.carousel-btn.prev { left:10px; }
.carousel-btn.next { right:10px; }

.vod-section h2 { margin:20px 0 10px; color:#ff4c4c; }
.vod-grid { display:flex; flex-wrap:wrap; gap:15px; }
.vod-card { position:relative; width:calc(33.33% - 10px); border-radius:8px; overflow:hidden; cursor:pointer; transition:transform 0.3s; }
.vod-card:hover { transform:scale(1.05); }
.vod-card img { width:100%; display:block; }
.vod-overlay { position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,0.7); padding:10px; color:#fff; display:flex; flex-direction:column; gap:5px; opacity:0; transition:opacity 0.3s; }
.vod-card:hover .vod-overlay { opacity:1; }
.vod-play { color:#ff4c4c; font-weight:bold; }

.footer { background:#000; color:#aaa; text-align:center; padding:20px 0; margin-top:40px; }

@media(max-width:1024px) { .vod-card { width:calc(50% - 10px); } }
@media(max-width:768px) { .vod-card { width:100%; } .carousel-item { height:250px; } }