@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

:root {
    --bg-main: #0f1014; /* Màu nền chuẩn Gogophim */
    --bg-header: #0f1014;
    --primary: #ffb400; /* Màu vàng thương hiệu */
    --text-white: #ffffff;
    --text-gray: #a0a0a0;
    --card-hover: #1f2129;
}

body { background-color: var(--bg-main); color: var(--text-white); font-family: 'Inter', sans-serif; margin: 0; padding-bottom: 50px; }
a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; padding: 0; margin: 0; }

/* HEADER */
header { background: var(--bg-header); padding: 15px 40px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 1000; box-shadow: 0 4px 20px rgba(0,0,0,0.5); }

.logo-container { display: flex; align-items: center; gap: 30px; }
.logo { font-size: 28px; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 5px; }
.logo i { color: var(--primary); font-size: 32px; }

/* Menu chính */
.main-menu { display: flex; gap: 20px; }
.main-menu a { font-size: 14px; font-weight: 500; color: #ccc; }
.main-menu a:hover { color: #fff; }
.badge-new { background: var(--primary); color: #000; padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: bold; margin-right: 5px; }

/* Thanh tìm kiếm */
.search-group { background: #1e1f26; border-radius: 8px; padding: 8px 15px; width: 350px; display: flex; align-items: center; }
.search-group input { background: transparent; border: none; color: #fff; width: 100%; outline: none; margin-left: 10px; }
.btn-login { background: #2d2f36; padding: 8px 20px; border-radius: 20px; font-weight: 600; font-size: 14px; }

/* HERO BANNER (Phim nổi bật to đùng) */
.hero-section {
    height: 550px;
    background-size: cover;
    background-position: center top;
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, #0f1014 30%, rgba(15,16,20,0.8) 60%, transparent 100%), linear-gradient(to top, #0f1014 10%, transparent 50%); }
.hero-content { position: relative; z-index: 2; width: 45%; padding-left: 50px; }
.hero-title { font-size: 48px; font-weight: 800; margin-bottom: 10px; line-height: 1.2; }
.hero-meta { display: flex; gap: 10px; font-size: 13px; color: #ddd; margin-bottom: 20px; align-items: center; }
.imdb-badge { background: #f5c518; color: #000; font-weight: bold; padding: 2px 5px; border-radius: 3px; }
.hero-desc { color: #aaa; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 30px; font-size: 15px; }
.btn-hero-play { width: 60px; height: 60px; background: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #000; box-shadow: 0 0 20px rgba(255, 180, 0, 0.4); cursor: pointer; transition: 0.3s; }
.btn-hero-play:hover { transform: scale(1.1); }

/* CATEGORY CARDS (Các thẻ màu sắc) */
.container { max-width: 1400px; margin: 0 auto; padding: 0 40px; }
.category-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; margin-bottom: 40px; }
.cat-card { padding: 20px; border-radius: 12px; height: 100px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; transition: 0.3s; overflow: hidden; position: relative; }
.cat-card:hover { transform: translateY(-5px); }
.cat-title { font-size: 18px; font-weight: 800; z-index: 2; }
.cat-link { font-size: 12px; font-weight: 600; z-index: 2; display: flex; align-items: center; }
/* Màu sắc cụ thể cho từng thẻ */
.bg-red { background: linear-gradient(135deg, #ff4b4b, #b71c1c); }
.bg-green { background: linear-gradient(135deg, #00c853, #1b5e20); }
.bg-yellow { background: linear-gradient(135deg, #ffd600, #f57f17); color: #000 !important; }
.bg-blue { background: linear-gradient(135deg, #2979ff, #1565c0); }
.bg-purple { background: linear-gradient(135deg, #aa00ff, #4a148c); }

/* MOVIE SECTIONS */
.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.section-title { font-size: 24px; font-weight: 700; color: #fff; }

.movie-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-bottom: 40px; }
.movie-card { background: transparent; cursor: pointer; }
.poster-wrapper { position: relative; border-radius: 8px; overflow: hidden; padding-top: 145%; margin-bottom: 10px; }
.poster-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: 0.4s; }
.movie-card:hover .poster-img { transform: scale(1.1); }
.ep-badge { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); padding: 4px 8px; border-radius: 4px; font-size: 11px; }

/* LANDSCAPE CARDS (Phim Trung Quốc mới - giống ảnh 2) */
.grid-landscape { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card-landscape { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 16/9; cursor: pointer; }
.card-landscape img { width: 100%; height: 100%; object-fit: cover; transition: 0.4s; }
.card-landscape:hover img { transform: scale(1.05); }
.land-overlay { position: absolute; inset: 0; background: linear-gradient(to top, #000 0%, transparent 80%); display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; }
.land-title { font-weight: bold; font-size: 16px; margin-bottom: 5px; }

/* RANKING SIDEBAR (Sôi Nổi Nhất - Giống ảnh 3) */
.ranking-list { background: #16171d; border-radius: 12px; padding: 20px; }
.rank-item { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
.rank-num { font-size: 30px; font-weight: 900; color: #333; width: 30px; }
.rank-1 { color: #ff4b4b; }
.rank-2 { color: #ffb400; }
.rank-3 { color: #00c853; }
.rank-img { width: 50px; height: 70px; border-radius: 4px; object-fit: cover; }

@media (max-width: 1024px) {
    .category-row, .movie-grid { grid-template-columns: repeat(3, 1fr); }
    .hero-title { font-size: 30px; }
}

//* =========================================
   GIAO DIỆN ADMIN V3 (FIX LỖI VỠ GIAO DIỆN)
   ========================================= */

/* 1. Bố cục chung */
.admin-wrapper {
    display: flex;
    min-height: 100vh;
    background-color: #0f1014; /* Nền đen chính */
    font-family: 'Inter', sans-serif;
}

/* 2. Sidebar (Menu trái) */
.sidebar {
    width: 260px; /* Chiều rộng cố định */
    background: #16171d;
    border-right: 1px solid #2a2b36;
    display: flex;
    flex-direction: column;
    flex-shrink: 0; /* Không cho phép co lại */
    position: sticky;
    top: 0;
    height: 100vh;
}

.sidebar-header {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #2a2b36;
}

.sidebar-menu {
    padding: 20px 0;
    display: flex;
    flex-direction: column; /* Xếp dọc các mục menu */
    gap: 5px; /* Khoảng cách giữa các mục */
}

.menu-item {
    display: flex;
    align-items: center;
    padding: 12px 25px;
    color: #a0a0a0;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 500;
    font-size: 14px;
    border-left: 3px solid transparent; /* Viền trái ẩn */
}

.menu-item i {
    width: 35px; /* Cố định chiều rộng icon để chữ thẳng hàng */
    font-size: 18px;
    text-align: center;
}

.menu-item:hover, .menu-item.active {
    background: rgba(255, 180, 0, 0.08); /* Nền vàng nhạt khi hover */
    color: #ffb400; /* Chữ vàng */
    border-left-color: #ffb400; /* Hiện viền trái */
}

/* 3. Nội dung chính (Bên phải) */
.admin-main {
    flex: 1;
    padding: 40px;
    overflow-y: auto;
    background: #0f1014;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #2a2b36;
}

.page-title {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 4. Nút bấm đẹp hơn */
.btn-submit {
    background: linear-gradient(135deg, #ffb400, #ff8a00); /* Gradient vàng cam */
    color: #000;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(255, 180, 0, 0.3);
    transition: 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    font-size: 13px;
}
.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 180, 0, 0.5);
}

/* 5. Bảng dữ liệu (Table) chuẩn UI mới */
.table-container {
    background: #1e1f26;
    border-radius: 12px;
    border: 1px solid #2a2b36;
    overflow: hidden; /* Bo góc cho bảng */
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.custom-table {
    width: 100%;
    border-collapse: collapse;
}

.custom-table th {
    background: #25262e;
    color: #888;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
    padding: 15px 20px;
    text-align: left;
    border-bottom: 1px solid #333;
}

.custom-table td {
    padding: 15px 20px;
    border-bottom: 1px solid #2a2b36;
    color: #eee;
    vertical-align: middle;
    font-size: 14px;
}

.custom-table tr:hover {
    background-color: #23242a; /* Hiệu ứng hover dòng */
}

/* Cột ID và Poster */
.custom-table td:first-child { color: #666; font-family: monospace; }
.poster-thumb {
    width: 40px;
    height: 60px;
    border-radius: 4px;
    object-fit: cover;
    border: 1px solid #333;
}

/* Nút hành động nhỏ (Sửa/Xóa) */
.action-group { display: flex; gap: 8px; }
.btn-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: 0.2s;
    background: #2a2b36;
    color: #aaa;
}
.btn-icon:hover {
    background: #fff;
    color: #000;
    transform: scale(1.1);
}
.btn-icon.delete:hover {
    background: #ff1744;
    color: #fff;
}
/* --- SỬA LỖI GIAO DIỆN ADMIN (Dán vào cuối file style.css) --- */

/* 1. Thiết lập Flexbox để chia đôi màn hình */
.admin-wrapper {
    display: flex !important; /* Bắt buộc dùng Flex */
    width: 100%;
    min-height: 100vh;
    background-color: #0f1014;
    overflow-x: hidden;
}

/* 2. Cố định Sidebar bên trái */
.sidebar {
    width: 260px !important;
    min-width: 260px; /* Không cho co nhỏ hơn */
    background: #16171d;
    border-right: 1px solid #2a2b36;
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: sticky;
    top: 0;
    z-index: 100;
}

/* 3. Nội dung chính nằm bên phải */
.admin-main {
    flex-grow: 1; /* Tự động chiếm hết khoảng trống còn lại */
    padding: 30px;
    background: #0f1014;
    width: calc(100% - 260px); /* Trừ đi phần của sidebar */
    overflow-y: auto;
}

/* Style lại Logo Admin cho gọn */
.sidebar-header {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #222;
}

/* Menu items */
.sidebar-menu { padding-top: 20px; }
.menu-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    color: #888;
    text-decoration: none;
    font-weight: 500;
    transition: 0.3s;
}
.menu-item:hover, .menu-item.active {
    background: rgba(255, 180, 0, 0.1);
    color: #ffb400;
    border-right: 3px solid #ffb400;
}
.menu-item i { width: 30px; text-align: center; }
/* =========================================
   FIX LỖI THẺ PHIM CAO THẤP KHÔNG ĐỀU
   ========================================= */

/* Lưới phim: Đảm bảo các cột có chiều cao bằng nhau */
.movie-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); /* Responsive: tự chia cột, tối thiểu 160px/cột */
    gap: 20px; /* Khoảng cách giữa các phim */
    align-items: stretch; /* Kéo giãn các thẻ cho bằng nhau */
}

/* Thẻ phim: Biến thành flex container để căn chỉnh nội dung bên trong */
.movie-card {
    background: #1e1f26; /* Màu nền thẻ */
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column; /* Xếp nội dung theo chiều dọc */
    height: 100%; /* Chiếm toàn bộ chiều cao của ô lưới */
}

.movie-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Ảnh Poster: Giữ tỉ lệ chuẩn (ví dụ 2:3) */
.poster-wrapper {
    position: relative;
    width: 100%;
    padding-top: 150%; /* Tỉ lệ khung hình 2:3 (height = 150% width) */
    overflow: hidden;
}

.poster-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ảnh phủ kín khung mà không bị méo */
}

/* Phần nội dung bên dưới ảnh (Tên + Năm) */
.movie-card-content {
    padding: 10px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Phần này sẽ tự co giãn để lấp đầy khoảng trống */
    justify-content: space-between; /* Đẩy phần năm sản xuất xuống đáy */
}

/* Tên phim: Giới hạn 2 dòng, quá thì hiện dấu ... */
.movie-card-title {
    font-weight: bold;
    color: #fff;
    font-size: 14px;
    margin-bottom: 5px;
    line-height: 1.3;
    
    /* Kỹ thuật giới hạn số dòng */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Số dòng tối đa muốn hiển thị */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Thông tin năm & quốc gia */
.movie-card-meta {
    font-size: 12px;
    color: #888;
}
/* =========================================
   MENU DROPDOWN (THẢ XUỐNG)
   ========================================= */
.main-menu { display: flex; gap: 25px; align-items: center; height: 100%; }
.menu-item-parent { position: relative; padding: 15px 0; cursor: pointer; height: 100%; display: flex; align-items: center; }

/* Link menu chính */
.menu-link { color: #ccc; font-weight: 500; font-size: 14px; transition: 0.3s; display: block; }
.menu-link:hover { color: var(--primary); }

/* Khối danh sách thả xuống */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #1e1f26;
    min-width: 180px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    border-radius: 0 0 8px 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: 0.3s;
    z-index: 1000;
    border-top: 2px solid var(--primary);
    padding: 10px 0;
}

/* Hiệu ứng hiển thị khi di chuột vào */
.menu-item-parent:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Các link con bên trong */
.dropdown-item {
    display: block;
    padding: 10px 20px;
    color: #bbb;
    font-size: 13px;
    border-bottom: 1px solid #2a2b36;
}
.dropdown-item:last-child { border-bottom: none; }
.dropdown-item:hover {
    background: #25262e;
    color: var(--primary);
    padding-left: 25px; /* Hiệu ứng đẩy chữ sang phải */
}
/* =========================================
   GIAO DIỆN ĐĂNG NHẬP / ĐĂNG KÝ (DARK MODE)
   ========================================= */
.auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.8)), url('https://assets.nflxext.com/ffe/siteui/vlv3/f841d4c7-10e1-40af-bcae-07a3f8dc141a/f6d7434e-d6de-4185-a6d4-c77a2d08737b/US-en-20220502-popsignuptwoweeks-perspective_alpha_website_medium.jpg');
    background-size: cover;
    background-position: center;
    font-family: 'Segoe UI', sans-serif;
}

.auth-box {
    background: rgba(0, 0, 0, 0.75); /* Nền đen mờ */
    backdrop-filter: blur(10px); /* Hiệu ứng kính mờ */
    width: 100%;
    max-width: 400px;
    padding: 40px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 15px 40px rgba(0,0,0,0.6);
}

.auth-header {
    text-align: center;
    margin-bottom: 30px;
}

.auth-logo {
    font-size: 28px;
    font-weight: 800;
    color: white;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 10px;
}

.auth-title {
    color: #ccc;
    font-size: 14px;
}

.form-group {
    position: relative;
    margin-bottom: 20px;
}

.form-input {
    width: 100%;
    background: #333;
    border: 1px solid #333;
    color: white;
    padding: 12px 15px;
    border-radius: 4px;
    outline: none;
    font-size: 14px;
    transition: 0.3s;
}

.form-input:focus {
    background: #444;
    border-color: #ffb400; /* Màu vàng thương hiệu */
}

.btn-auth {
    width: 100%;
    padding: 12px;
    background: #ffb400; /* Màu vàng */
    color: #000;
    border: none;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: 0.3s;
    margin-top: 10px;
}

.btn-auth:hover {
    background: #ffc107;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 180, 0, 0.3);
}

.auth-footer {
    text-align: center;
    margin-top: 25px;
    color: #888;
    font-size: 13px;
}

.auth-footer a {
    color: white;
    text-decoration: none;
    font-weight: 500;
}

.auth-footer a:hover {
    text-decoration: underline;
    color: #ffb400;
}

/* Thông báo lỗi/thành công */
.alert {
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 20px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.alert-error { background: rgba(231, 76, 60, 0.2); border: 1px solid #e74c3c; color: #ff6b6b; }
.alert-success { background: rgba(46, 204, 113, 0.2); border: 1px solid #2ecc71; color: #2ecc71; }
/* Container chính căn giữa và giới hạn độ rộng tối đa */
.watch-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 20px;
}

/* Fix trình phát video chuẩn tỉ lệ 16:9 */
.player-wrapper {
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 50px rgba(0,0,0,0.8);
    margin-bottom: 30px;
}

.video-screen {
    position: relative;
    padding-bottom: 56.25%; /* Tỉ lệ 16:9 */
    height: 0;
}

.video-screen iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: none;
}

/* Chia bố cục bên dưới thành 2 cột: 70% thông tin - 30% tập phim */
.content-grid {
    display: grid;
    grid-template-columns: 7fr 3fr;
    gap: 30px;
}

.movie-title {
    font-size: 28px;
    color: #ffb400;
    margin: 0 0 15px 0;
}

.movie-meta {
    display: flex;
    gap: 20px;
    color: #888;
    font-size: 14px;
    margin-bottom: 20px;
}

.movie-description {
    line-height: 1.6;
    color: #ccc;
    background: #1e1f26;
    padding: 20px;
    border-radius: 10px;
}

/* Danh sách tập phim làm gọn lại bên phải */
.side-episodes {
    background: #1e1f26;
    border-radius: 12px;
    padding: 20px;
    height: fit-content;
}

.episode-header {
    font-weight: bold;
    color: #fff;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #333;
}

.episode-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
}

.ep-item {
    background: #2a2b36;
    color: #fff;
    text-align: center;
    padding: 8px 0;
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
    transition: 0.3s;
}

.ep-item:hover, .ep-item.active {
    background: #ffb400;
    color: #000;
}

/* Responsive cho mobile */
@media (max-width: 900px) {
    .content-grid {
        grid-template-columns: 1fr;
    }
}