/* @RFKONG VLX Weekly list */
@font-face {
    font-family: 'vlx';
    src: url('/assets/font/font.woff2') format('woff2');
}

:root {
    --tst: bottom 0.5s ease 0s;
    --dark: #E6E6E6;
    --primary: #ffc107;
    --secondary: #696969;
}

html::-webkit-scrollbar {
    width: 0px;
}

body {
    background: #000000;
    font-family: "vlx", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #fff;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

header {
    text-align: center;
    padding: 20px 10px;
    background: #00000075;
    margin: 20px;
}

header h1 {
    font-size: 2.2em;
    margin-bottom: 5px;
}

header p {
    font-size: 0.9em;
    color: #aaa;
}

.swiper {
    width: 100%;
    padding-top: 20px;
    padding-bottom: 60px;
}

.swiper-slide {
    background-position: center;
    background-size: cover;
    width: auto;
    height: 650px;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.swiper-slide:hover {
    transform: scale(1.02);
}

.swiper-pagination-bullet {
    background: var(--secondary);
    transition: all 0.5s ease 0s;
    border-radius: 8px;
}

.swiper-pagination-bullet-active {
    background: var(--primary);
    width: 30px;
}

.movie-info {
    position: absolute;
    width: calc(100% + 2px);
    height: calc(35% + 2px);
    text-align: center;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 40%);
    padding: 10px;
    left: 0;
    bottom: 0;
    box-sizing: border-box;
    transition: var(--tst);
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.movie-info h2 {
    font-size: 1.7em;
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.movie-info span {
    width: 100%;
    margin: 0.2em 0;
    display: inline-block;
    padding: 0.5em 0.5em 0.5em 3.2em;
    box-sizing: border-box;
    color: var(--dark);
    text-align: left;
    position: relative;
    font-size: 13px;
    border-radius: 1.5em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    line-height: 1.4;
}

.movie-info span:hover {
    background: rgba(0, 0, 0, 0.6);
    filter: invert(1);
}

.movie-info span:before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    filter: invert(1);
    background-size: contain;
}

.movie-info span.director:before {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-fill" viewBox="0 0 16 16"><path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" /> </svg>') no-repeat center;
}

.movie-info span.year:before {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar-date" viewBox="0 0 16 16"><path d="M6.445 11.688V6.354h-.633A12.6 12.6 0 0 0 4.5 7.16v.695c.375-.257.969-.62 1.258-.777h.012v4.61h.675zm1.188-1.305c.047.64.594 1.406 1.703 1.406 1.258 0 2-1.066 2-2.871 0-1.934-.781-2.668-1.953-2.668-.926 0-1.797.672-1.797 1.809 0 1.16.824 1.77 1.676 1.77.746 0 1.23-.376 1.383-.79h.027c-.004 1.316-.461 2.164-1.305 2.164-.664 0-1.008-.45-1.05-.82h-.684zm2.953-2.317c0 .696-.559 1.18-1.184 1.18-.601 0-1.144-.383-1.144-1.2 0-.823.582-1.21 1.168-1.21.633 0 1.16.398 1.16 1.23z" /> <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z" /> </svg>') no-repeat center;
}

.movie-info span.genre:before {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-layers-fill" viewBox="0 0 16 16"><path d="M7.765 1.559a.5.5 0 0 1 .47 0l7.5 4a.5.5 0 0 1 0 .882l-7.5 4a.5.5 0 0 1-.47 0l-7.5-4a.5.5 0 0 1 0-.882l7.5-4z"/><path d="m2.125 8.567-1.86.992a.5.5 0 0 0 0 .882l7.5 4a.5.5 0 0 0 .47 0l7.5-4a.5.5 0 0 0 0-.882l-1.86-.992-5.17 2.756a1.5 1.5 0 0 1-1.41 0l-5.17-2.756z"/></svg>') no-repeat center;
}

.movie-info span.rating:before {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star" viewBox="0 0 16 16"><path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z"/></svg>') no-repeat center;
}

.movie-info span:hover:before {
    filter: invert(0);
}

footer {
    background: #00000075;
    color: #aaa;
    padding: 20px 15px;
    text-align: center;
    position: relative;
    font-size: 13px;
    line-height: 1.6;
}

footer p {
    margin: 8px 0;
}

.footer-brand {
    color: var(--primary);
    font-weight: bold;
    font-size: 16px;
}

.copyright {
    font-size: 12px;
    color: #777;
    margin-top: 15px;
}