*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial;
}

body{
margin:0;
    background:#071726;
    color:white;
}

/* khung giữa */
.mobile-wrapper{
    max-width:380px;
    margin:0 auto;
    background:#071726;
    min-height:100vh;
    overflow:hidden;
}

/* fix padding cho gọn */
.category,
.title-section,
.movie-list{
    padding-left:10px !important;
    padding-right:10px !important;
}
/* NAVBAR */

.navbar{
display:flex;
align-items:center;
justify-content:space-between;
padding:15px 40px;
background:linear-gradient(90deg,#0f1c2e,#7a1212);
position:sticky;
top:0;
z-index:1000;
gap:10px;
}
/*menu phim*/
/* 2. Cố định vị trí cho mục Phim */
.menu li.dropdown {
    position: relative !important; 
    display:  inline-block;
}

/* 3. Chỉnh lại khung Menu con */
.dropdown-content {
  display: none; 
    position: absolute;
    top: 100%; 
    
    /* Sửa 2 dòng này để căn giữa */
    left: 50%; /* Đẩy sang phải 50% chiều rộng của chữ Phim */
    transform: translateX(-50%); /* Kéo ngược lại 50% chiều rộng của chính cái bảng */
    
    background-color: #1a1a1a; 
    min-width: 200px;
    z-index: 10000 !important;
    pointer-events: auto !important;
    border-radius: 8px;
    padding: 10px 0;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.1);
    margin-top: 10px; /* Thêm khoảng cách nhỏ với chữ Phim cho thoáng */
}

/* 4. Thêm mũi tên nhỏ chỉ lên trên cho chuyên nghiệp */
.dropdown-content::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #1a1a1a;
}

/* 5. Định dạng chữ trong menu con */
.dropdown-content li {
    display: block;
    width: 100%;
}

.dropdown-content li a {
    color: #cbd5e1 !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center;
    transition: 0.2s all;
    background: none !important;
}

/* 6. Hiệu ứng Hover xịn */
.dropdown-content li a:hover {
    background-color: rgba(239, 68, 68, 0.1) !important; /* Màu đỏ mờ */
    color: #ef4444 !important; /* Chữ đỏ */
    padding-left: 25px !important; /* Chữ hơi lệch sang phải khi hover */
}

/* 7. HIỆN MENU KHI RÊ CHUỘT */
/* .dropdown:hover .dropdown-content { */
    /* display: block !important; */
    /* animation: slideDown 0.3s ease-out; */
/* } */
.dropdown-content {
    display: none;
}

.dropdown.active .dropdown-content {
    display: block !important;
}

@keyframes slideDown {
    from { 
        opacity: 0; 
        transform: translateX(-50%) translateY(10px); /* Phải có translateX(-50%) */
    }
    to { 
        opacity: 1; 
        transform: translateX(-50%) translateY(0); 
    }
}
/* LOGO */

.logo{
display:flex;
align-items:center;
gap:10px;
font-size:24px;
font-weight:bold;
color:#ff4d4d;
}
.logo i{
    font-size:22px;
}
/* SEARCH */

/* SEARCH */
.search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #1c2a3a;
    padding: 10px 20px;
    border-radius: 30px;
    width: 100%; /* Chiếm tối đa không gian có thể */
    max-width: 350px; /* Giới hạn độ rộng tối đa để không quá to */
    margin: 0 20px; /* Thêm chút khoảng cách 2 bên cho thoáng */
}
.search-box input{
background:none;
border:none;
outline:none;
color:white;
width:100%;
}

/* MENU */

/* Tìm đến đoạn này trong file CSS của bạn và sửa lại thành: */
/* MENU */
.user-menu{
    display:flex;
    align-items:center;
    gap:10px;
    white-space: nowrap;}
.menu {
    display: flex;
    list-style: none;
    gap: 20px; /* Giảm khoảng cách từ 30px xuống 20px cho vừa vặn hơn */
    align-items: center;
    flex-shrink: 0; /* LỆNH QUAN TRỌNG: Tuyệt đối không cho phép menu bị bóp xẹp */
}
.menu a{
    padding:6px 10px;
    border-radius:6px;
    transition:0.3s;
}
.menu a, .menu span {
    text-decoration: none;
    color: white;
    white-space: nowrap; /* Bắt buộc tất cả các chữ phải nằm trên 1 dòng */
}

.menu a:hover {
    color: red;
    background:rgba(255,255,255,0.1);
}
/* LOGIN */

.login-btn {
    background: red;
    padding: 10px 18px;
    border-radius: 20px;
    text-decoration: none;
    color: white;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
}



/* TITLE */

.title-section{
display:flex;
justify-content:space-between;
align-items:center;
padding:0 60px;
}

.title-section p{
color:#8c9db0;
}

.view-all{
color:red;
text-decoration:none;
}

/* MOVIE LIST */

.movie-list{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:25px;
}

/* CARD */

.movie-card{
    overflow: hidden;
    position: relative;
display:flex;
    flex-direction:column;
    height:100%;

    background:#0f1c2e;
    border-radius:12px;
    padding:10px
}

.movie-card img{
    width:100%;
    aspect-ratio: 2/3;
    height:auto;
    object-fit:cover;

}

.movie-card h3{
 flex:1;
}

.movie-card p{
padding:0 10px 10px;
color:#9aa7b8;
}
.movie-link{
text-decoration:none;
color:white;
}

/* TAG */

.tag{
position:absolute;
top:10px;
left:10px;
background:red;
padding:5px 12px;
border-radius:20px;
font-size:13px;
}

/* RATING */

.rating{
position:absolute;
top:10px;
right:10px;
background:#333;
padding:5px 12px;
border-radius:20px;
font-size:13px;
color:#FFD700;
}
.rating i{
color:gold;
}

/* hover card */

.movie-card{
    transition:0.3s;
    cursor:pointer;
}

.movie-card:hover{
    transform:scale(1.05);
}

/* hover ảnh */

.movie-card img{
    transition:0.4s;
}

.movie-card:hover img{
    filter:brightness(70%);
}



/* LOGIN PAGE */

.login-container{
width:400px;
margin:80px auto;
background:#0f1c2e;
padding:40px;
border-radius:15px;
box-shadow:0 0 20px rgba(0,0,0,0.5);
}

.login-container h1{
text-align:center;
margin-bottom:10px;
font-size:32px;
}

.login-container h7{
display:block;
text-align:center;
color:#8fa2b8;
margin-bottom:30px;
}

/* LABEL */

.login-container label{
display:block;
margin-bottom:8px;
margin-top:15px;
font-weight:500;
}

/* INPUT */

.login-container input{
width:100%;
padding:12px;
border-radius:10px;
border:1px solid #2a3b52;
background:#0b1624;
color:white;
outline:none;
margin-bottom:10px;
}

.login-container input:focus{
border-color:red;
}

/* BUTTON */

    .login-container button {
        width: 100%;
        padding: 12px;
        border: none;
        border-radius: 10px;
        background: red;
        color: white;
        font-size: 16px;
        margin-top: 15px;
        cursor: pointer;
        
    }

.login-container button:hover{
background:#cc0000;
}

/* REGISTER */

.register-text{
text-align:center;
margin-top:20px;
color:#8fa2b8;
}

.register-text a{
color:red;
text-decoration:none;
font-weight:bold;
}




/* ===== REGISTER PAGE ===== */

.logo-box{
width:70px;
height:70px;
background:red;
margin:40px auto 20px;
border-radius:15px;
display:flex;
align-items:center;
justify-content:center;
font-size:28px;
color:white;
}

h1{
text-align:center;
margin-top:10px;
}

.subtitle{
text-align:center;
color:#8fa2b8;
margin-bottom:30px;
}

/* FORM BOX */

.register-container{
width:420px;
margin:0 auto;
background:#0f1c2e;
padding:35px;
border-radius:15px;
box-shadow:0 0 20px rgba(0,0,0,0.5);
}

/* LABEL */

.register-container label{
display:block;
margin-top:15px;
margin-bottom:8px;
}

/* INPUT BOX */

.input-box{
display:flex;
align-items:center;
background:#0b1624;
border:1px solid #2a3b52;
border-radius:12px;
padding:12px;
gap:10px;
}

.input-box input{
flex:1;
background:none;
border:none;
outline:none;
color:white;
font-size:14px;
}

.input-box i{
color:#9aa7b8;
}

.input-box:focus-within{
border-color:red;
}

/* CHECKBOX */

.checkbox{
display:flex;
align-items:center;
gap:10px;
margin-top:20px;
color:#9aa7b8;
font-size:14px;
}

.checkbox span{
color:red;
cursor:pointer;
}

/* BUTTON */

.register-btn{
width:100%;
padding:13px;
margin-top:20px;
border:none;
border-radius:12px;
background-color: #ff0000;
color:white;
font-size:16px;
cursor:pointer;
}

.register-btn:hover{
background:#cc0000;
}

/* LOGIN TEXT */

.login-text{
text-align:center;
margin-top:25px;
color:#9aa7b8;
}

.login-text a{
color:red;
text-decoration:none;
font-weight:500;
}

/*admin_movies*/


.edit-btn{ background:#3b82f6; color:white; padding:6px 12px; border-radius:6px; text-decoration:none; margin-right:5px; }


.search-box button{ padding:8px 15px; background:#ef4444; color:white; border:none; border-radius:6px; cursor:pointer; }
.edit-btn:hover{ background:#2563eb; }
.delete-btn{ background:#ef4444; color:white; padding:6px 12px; border-radius:6px; text-decoration:none; }
.addeps-btn{ background:green; color:white; padding:6px 12px; border-radius:6px; text-decoration:none; }
.delete-btn:hover{ background:#dc2626; }
.header{ display:flex; align-items:center; justify-content:space-between; padding:15px 40px; background:linear-gradient(90deg,#0f172a,#7f1d1d); }
.logo{ font-size:22px; font-weight:bold; }
.search{ width:400px; padding:10px; border-radius:20px; border:none; }
nav a{ margin:0 10px; text-decoration:none; color:white; }
.login{ background:red; border:none; padding:10px 20px; color:white; border-radius:20px; }
.container{ padding:40px; }
.add-btn{ display:inline-block; padding:10px 20px; background:#e50914; color:white; text-decoration:none; border-radius:6px; font-weight:bold; transition:0.3s; margin-bottom:20px; }
.add-btn:hover{ background:#b20710; }
table{ width:100%; border-collapse:collapse; background:#111827; }
th,td{ padding:15px; text-align:center; }
th{ background:#1f2937; }
tr{ border-bottom:1px solid #333; }
.logout-btn {
    background: #ff0000; /* Màu đỏ của nút Đăng nhập */
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 20px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px; /* Khoảng cách giữa icon và chữ */
    transition: 0.3s;
    white-space: nowrap; /* THÊM DÒNG NÀY: Cấm rớt dòng chữ Đăng xuất */
}

.logout-btn:hover {
    background: #cc0000; /* Đỏ sậm hơn khi hover */
}
/* USER MENU */
.user-menu {
    display: flex;
    align-items: center;
    white-space: nowrap; /* Ép chữ Xin chào và nút không được rớt dòng */
}


/* fix padding cho gọn */
.category,
.title-section,
.movie-list{
    padding-left:10px !important;
    padding-right:10px !important;
}
.menu-toggle{
    display:none;
    font-size:22px;
    color:white;
    cursor:pointer;
}

/*admin*/
.action-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}
.left{
    display:flex;
    gap:10px;
}

.add-btn.gray{
    background:#6b7280;
}
.search-box{
    width:400px;
    display:flex;
    gap:10px;
    margin:20px 0;
}

.search-box input{
    flex:1;
    padding:10px;
    border-radius:20px;
    border:none;
    background:#1e293b;
    color:white;
}

.search-box button{
    padding:10px 15px;
    border:none;
    border-radius:20px;
    background:#ef4444;
    color:white;
}

table{
    width:100%;
    border-collapse: collapse;
    background:#0f172a;
    border-radius:12px;
    overflow:hidden;
    margin-top:10px;
}

table th{
    background:#1e293b;
    padding:14px;
    font-weight:600;
}

table td{
    padding:14px;
    border-bottom:1px solid #1e293b;
}

table tr:hover{
    background:#1e293b;
    transition:0.2s;
}


/* ===== SLIDER ===== */
.movie-wrapper{
    position:relative;
    width:100%;
    max-width:1200px; /* PC rộng hơn */
    margin:20px auto;
    overflow:hidden;
}

.movie-container{
    overflow:hidden;
}

.movie-track{
    display:flex;
    transition:0.4s;
}

.movie-card{
    flex: 0 0 20%; /* PC: 5 phim / lần */
    display: flex;
    flex-direction: column;
    background: #0f1c2e;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 5px;
}

.movie-card img{
    
 width: 100%;
    height: auto; /* Giữ tỷ lệ ảnh thật */
    border-radius: 10px;
    object-fit: cover;
}

/* Tên phim */
.movie-card p {
    margin-top: 8px; /* cách ảnh 1 chút */
    text-align: left;
    font-weight: bold;
    color: #fff;
    font-size: 14px;
}

/* Nút */
.nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:rgba(0,0,0,0.5);
    color:white;
    border:none;
    padding:10px;
    cursor:pointer;
    z-index:10;
    font-size:18px;
    border-radius:50%;
    transition:0.3s;
}

.nav:hover{
    background:rgba(255,77,77,0.8);
}

.nav.left{ left:10px; }
.nav.right{ right:10px; }

/* Chữ "Quên mật khẩu?" */
.login-container a.forgot-link {
    display: block;           /* hiển thị xuống dòng */
    text-align: left;        /* canh phải */
    font-size: 0.85em;        /* cỡ chữ nhỏ vừa phải */
    color: #7a1212;           /* màu đỏ nổi bật */
    text-decoration: none; /* gạch chân để dễ nhận biết là link */
    margin-bottom: 15px;      /* khoảng cách dưới link */
    transition: color 0.3s;
}

.login-container a.forgot-link:hover {
    color: #ff1a1a !important;           /* đổi đỏ tươi khi hover */
}


/* mobile chuẩn */
@media (max-width:768px){
 /* hiện nút ☰ */
    .menu-toggle{
        display:block;
    }

    /* ẩn menu ngang */
    .menu{
       position:absolute;
    top:60px;
    left:0;
    width:100%;
    background:rgba(15,28,46,0.95);

 display:block;

    max-height:0;
    overflow:hidden;
    transition:0.4s ease;

     z-index:2000;

    backdrop-filter: blur(10px); /* xịn */
    border-radius:0 0 15px 15px; /* bo góc */
    }

    /* khi bấm ☰ */
    .menu.show{
        max-height:400px;
    padding:10px 0;
    }

    .menu li{
        border-bottom:1px solid rgba(255,255,255,0.05);
    }

    .menu a{
        padding:12px 15px;
        display:block;
        font-size:14px;
    }

    /* thu gọn navbar */
    .navbar{
            display:flex;              /* QUAN TRỌNG */
    align-items:center;
    justify-content:space-between;
    position:relative;
    }

    /* search nhỏ lại hoặc ẩn */
    .search-box{
        display:none;
    }
.movie-list{
    grid-template-columns: repeat(2, 1fr);
    gap:10px;
}
.movie-card{
    flex: 0 0 50%; /* 2 phim / hàng */
        padding:5px;
        box-sizing:border-box;
}
.movie-container{
        overflow:hidden;
    }
 .movie-track{
        display:flex;
        transition:0.4s ease;
        scroll-behavior: smooth; /* scroll mượt */
    }
.content-wrapper{
       max-width:100%;
        overflow:hidden;
        position:relative;
        margin:15px 0;
         padding:0 10px;
    }

    .poster-card{
        width:100%;
        max-width:250px;
        margin:0 auto;
    }

    .movie-title{
        font-size:22px;
        text-align:center;
    }

    .meta-data{
        justify-content:center;
        flex-wrap:wrap;
    }

    .description-box{
        font-size:14px;
    }

    .action-buttons{
        justify-content:center;
    }

    .user-menu span{
    display: none !important;
    }
    .logo span{
        font-size:16px;
    }
    .logo i{
        font-size:16px;
    }

    .login-btn,
    .logout-btn{
        font-size:13px;
        padding:6px 10px;
    }

    .user-menu span{
        display:none !important;
    }

    .stats-container {
        display: none !important;
    }
.category {
    display: flex;
    flex-wrap: wrap;       /* cho các nút xuống hàng khi hẹp */
    gap: 8px;              /* khoảng cách giữa các nút */
    justify-content: center; /* căn giữa trên điện thoại */
    padding: 5px 10px;
}

.category button {
    flex: 1 1 auto;       /* co giãn theo chiều ngang */
    min-width: 80px;      /* giới hạn nút nhỏ nhất */
    max-width: 120px;     /* giới hạn nút lớn nhất */
    font-size: 14px;      /* chữ nhỏ vừa nhìn trên mobile */
    padding: 6px 10px;
}

/* --- Thêm đoạn này vào trong media query 768px --- */

    /* 1. Cho phép menu cha hiển thị các mục con */
    .menu li.dropdown {
        position: relative;
        width: 100%; /* Giãn bằng chiều ngang menu mobile */
    }

    /* 2. Chỉnh lại khung xổ xuống trên Mobile */
    .dropdown-content {
        position: relative !important; /* Chuyển từ bay lơ lửng sang đẩy nội dung xuống */
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: 100% !important;
        background: rgba(255, 255, 255, 0.05) !important; /* Nền hơi sáng hơn menu tí cho dễ phân biệt */
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        max-height: 0; /* Mặc định ẩn */
        overflow: hidden;
        transition: 0.3s ease-in-out;
    }

    /* 3. Khi bấm vào Phim thì hiện menu con (Dùng class active) */
    .dropdown.active .dropdown-content {
        max-height: 300px; /* Cho phép xổ xuống */
        padding: 5px 0 !important;
    }

    /* 4. Chỉnh lại các link thể loại cho to, dễ bấm bằng tay */
    .dropdown-content li a {
        padding: 10px 30px !important; /* Thụt lề vào trong tí */
        font-size: 13px !important;
        color: #ccc !important;
        border-bottom: 1px solid rgba(255,255,255,0.02) !important;
    }

    /* 5. Ẩn cái mũi tên hoặc chỉnh lại cho gọn */
    .dropbtn i {
        float: right;
        margin-top: 5px;
    }
    
}


/* PC giữ nguyên full màn */
@media (min-width:768px){
    body{
        background:#071726;
    }

    .mobile-wrapper{
        max-width:100%;
    }
}