@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');/* ==========================================
   1. GLOBAL RESET & FIX SCROLL
   ========================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    width: 100%;
    /* Quan trọng: Để 100% để Flexbox của body nhận diện được chiều cao */
    height: 100%; 
    overflow-y: auto !important;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    /* Ép body luôn cao ít nhất bằng màn hình */
    min-height: 100vh;
    height: auto !important;
    background-color: #000;
    color: #fff;
    line-height: 1.6;
    font-family: 'Inter', sans-serif;
    
    /* Biến body thành cái khung Flexbox để đẩy Footer */
    display: flex;
    flex-direction: column;
    
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

#root, .app-wrapper {
    /* Đảm bảo React bọc ngoài cũng đi theo luồng Flexbox */
    display: flex;
    flex-direction: column;
    flex: 1; /* Chiếm toàn bộ không gian còn lại */
    width: 100%;
}

/* ==========================================
   2. FOOTER NHÍCH LÊN (STICKY FOOTER STYLE)
   ========================================== */
/* Giả sử bạn có thẻ <main> hoặc div bọc nội dung giữa Header và Footer */
main, .main-content {
    flex: 1 0 auto; /* Nó sẽ tự nở ra để đẩy Footer xuống đáy hoặc nhích Footer lên */
}

footer {
    flex-shrink: 0; /* Không cho Footer bị méo */
    margin-top: auto; /* Phép màu: Tự động nhích lên dựa trên nội dung phía trên */
    padding: 60px 0; /* Tăng padding để Footer nhìn cao và thoáng hơn */
    background-color: #0a0a0a;
    border-top: 1px solid #222;
}

/* ==========================================
   3. TYPOGRAPHY & MEDIA
   ========================================== */
h1, h2, h3, h4, .hero-title, .movie-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ==========================================
   4. CONTAINER & NOT FOUND
   ========================================== */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.not-found-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #0a0a0a;
}* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* =======================================================
   SIDEBAR BASE (PC >= 1024px)
   ======================================================= */
.admin-sidebar {
    width: 260px;
    background-color: #1a1d21;
    color: #ffffff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    z-index: 1200;
    position: sticky;
    top: 0;
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.sidebar-title {
    font-size: 1.3rem;
    font-weight: bold;
    color: #3498db;
}

.sidebar-close-btn {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    display: none; 
}

.sidebar-menu {
    list-style: none;
    padding: 10px 0;
    flex: 1;
    overflow-y: auto;
}

.sidebar-link {
    display: flex;
    align-items: center;
    padding: 12px 25px;
    color: #bdc3c7;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.sidebar-link:hover {
    background-color: #2c3e50;
    color: #ffffff;
}

.sidebar-link.active {
    background-color: #3498db;
    color: #ffffff;
    border-right: 5px solid #ffffff;
}

/* =======================================================
   1. VÙNG TABLET (740px - 1023px)
   👉 Tăng kích thước để không bị nhỏ hơn Mobile
   ======================================================= */
@media screen and (min-width: 740px) and (max-width: 1023px) {
    .admin-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 320px; /* Tablet nới rộng sidebar ra cho thoáng */
        transform: translateX(-100%);
        box-shadow: 4px 0 20px rgba(0,0,0,0.4);
    }

    .admin-sidebar.open {
        transform: translateX(0);
    }

    .sidebar-close-btn {
        display: block;
        font-size: 1.5rem; /* Nút X to rõ cho Tablet */
    }

    .sidebar-title {
        font-size: 1.5rem; /* Tiêu đề to hơn PC và Mobile */
    }

    .sidebar-link {
        padding: 18px 30px; /* Tăng khoảng cách chạm */
        font-size: 1.15rem;   /* Chữ to rõ để dễ đọc trên iPad */
    }

    .sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.6);
        backdrop-filter: blur(2px);
        z-index: 1100;
    }
}

/* =======================================================
   2. VÙNG MOBILE (Dưới 740px)
   👉 Thu nhỏ lại để vừa màn hình điện thoại
   ======================================================= */
@media screen and (max-width: 739px) {
    .admin-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 80%; 
        transform: translateX(-100%);
        box-shadow: 4px 0 20px rgba(0,0,0,0.4);
    }

    .admin-sidebar.open {
        transform: translateX(0);
    }

    .sidebar-close-btn {
        display: block;
    }

    .sidebar-title {
        font-size: 1.1rem;
    }

    .sidebar-link {
        padding: 15px 20px;
        font-size: 1rem; /* Mobile để 1rem là vừa xinh */
    }

    .sidebar-header {
        padding: 15px;
    }

    .sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.6);
        backdrop-filter: blur(2px);
        z-index: 1100;
    }
}/* ========================================================================== 
   HEADER BASE (Mặc định cho PC >= 1024px)
   ========================================================================== */
.admin-header {
    background: #111317;
    color: #ffffff;
    padding: 0 40px;
    height: 72px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    border-bottom: 2px solid rgba(255, 77, 77, 0.3);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.admin-header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.hamburger-btn {
    display: none; 
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 6px;
    font-size: 1.5rem;
    line-height: 0;
}

.admin-logo a {
    font-size: 1.5rem;
    font-weight: 900;
    color: #ff4d4d;
    text-decoration: none;
    letter-spacing: 2px;
}

.admin-info {
    display: flex;
    align-items: center;
    gap: 25px;
}

.admin-name {
    font-size: 0.9rem;
    font-weight: 500;
}

.btn-admin-logout {
    background: linear-gradient(135deg, #ff4d4d 0%, #d63031 100%);
    border: none;
    color: white;
    padding: 8px 18px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: 0.3s ease;
}

/* ========================================================================== 
   1. VÙNG TABLET (Từ 740px đến 1023px) - PHIÊN BẢN SIÊU TO
   👉 Bơm kích thước để xứng tầm với cái Form khổng lồ
   ========================================================================== */
@media screen and (min-width: 740px) and (max-width: 1023px) {
    .admin-header {
        padding: 0 30px;
        height: 85px; /* Tăng chiều cao đáng kể */
    }

    /* ✅ Nút Hamburger to rõ cho iPad */
    .hamburger-btn {
        display: block; 
        font-size: 2.2rem; 
        padding: 10px;
    }

    .admin-logo a {
        font-size: 1.7rem; /* Logo to ra */
    }

    .admin-info {
        gap: 25px;
    }

    .admin-name {
        font-size: 1.1rem; /* Tên admin to rõ */
        font-weight: 600;
    }

    .btn-admin-logout {
        padding: 12px 24px;
        font-size: 1rem;
        border-radius: 10px;
    }
}

/* ========================================================================== 
   2. VÙNG MOBILE (Dưới 740px)
   👉 Giữ gọn gàng để không bị tràn màn hình điện thoại
   ========================================================================== */
@media screen and (max-width: 739px) {
    .admin-header {
        padding: 0 15px;
        height: 60px; 
    }

    .hamburger-btn {
        display: block;
        font-size: 1.6rem;
    }

    .admin-logo a {
        font-size: 1.2rem;
        letter-spacing: 1px;
    }

    .admin-name {
        display: none; /* Mobile hẹp nên ẩn tên cho thoáng */
    }

    .admin-info {
        gap: 10px;
    }

    .btn-admin-logout {
        padding: 6px 12px;
        font-size: 0.75rem;
        border-radius: 6px;
    }
}/* ================= ADMIN LAYOUT ================= */

.admin-container {
    display: flex;
    min-height: 100vh;
    width: 100%;
    background-color: #f8f9fa; /* Nền chung cho toàn bộ trang admin */
}

/* Phần bên phải (Header + Content) */
.admin-right-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0; /* Quan trọng: tránh vỡ layout khi nội dung bên trong quá rộng */
    transition: all 0.3s ease;
}

/* Nội dung chính */
.admin-main-content {
    padding: 30px;
    flex: 1;
    /* Scroll mượt */
    overflow-y: auto;
    overflow-x: hidden; /* Hạn chế scroll ngang ở layout chính, để component tự xử lý */
    -webkit-overflow-scrolling: touch;
}

/* ========================================================================== 
   CHIA LẠI THEO LOGIC MỚI: Dưới 1024px là Sidebar biến mất
   ========================================================================== */

/* 1. KHI VÀO VÙNG TABLET & MOBILE (< 1024px) */
@media screen and (max-width: 1023px) {
    .admin-main-content {
        padding: 20px; /* Tablet & Mobile thu hẹp padding cho thoáng */
    }

    /* Đảm bảo phần bên phải luôn rộng 100% vì Sidebar đã là position: fixed (ẩn trượt) */
    .admin-right-side {
        width: 100%;
    }
}

/* 2. TINH CHỈNH RIÊNG CHO MOBILE THUẦN TÚY (Dưới 740px) */
@media screen and (max-width: 739px) {
    .admin-main-content {
        padding: 15px; /* Mobile hẹp nhất nên padding tối thiểu */
    }

    /* Mobile giảm font nhẹ để hiển thị được nhiều nội dung hơn */
    body {
        font-size: 14px;
    }
    
    /* Tránh việc cuộn ngang cả trang trên điện thoại */
    .admin-container {
        overflow-x: hidden;
    }
}/* =========================================================
   HEADER - CINEMA STAR (CLICK-ONLY OPTIMIZED)
   ========================================================= */

/* --- LAYOUT & LOGO --- */
.user-navbar {
    background-color: rgba(10, 10, 10, 0.98);
    height: 70px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #333;
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(10px);
}

.nav-container {
    width: 100%;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.logo {
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    letter-spacing: 1px;
}

.logo span { color: #f1c40f; }

/* --- HAMBURGER --- */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.hamburger .bar {
    width: 25px; height: 3px;
    background-color: #ffffff;
    border-radius: 2px;
    transition: 0.4s;
}

/* --- NAV LINKS CORE --- */
.nav-links {
    display: flex;
    list-style: none;
    gap: 25px;
    margin: 0; padding: 0;
}

.nav-links > li { position: relative; }

.nav-links > li > a {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    padding: 25px 0;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: 0.3s;
}

/* Màu khi menu đang được click mở hoặc hover link */
.nav-links > li:hover > a,
.has-dropdown.mobile-active > a {
    color: #f1c40f;
}

.icon-down { transition: transform 0.3s ease; }

/* =========================================================
   SUB MENU - CHỈ HIỆN KHI CLICK (Dùng .mobile-active)
   ========================================================= */
.sub-menu {
    list-style: none;
    padding: 10px 0;
    background: #fff;
    z-index: 999;
    display: none; /* MẶC ĐỊNH ẨN TOÀN BỘ (Cả PC & Mobile) */
}

/* HIỆU ỨNG HIỂN THỊ KHI CÓ CLASS .mobile-active */
.has-dropdown.mobile-active > .sub-menu {
    display: block !important;
    animation: slideDown 0.3s ease-out;
}

.has-dropdown.mobile-active .icon-down {
    transform: rotate(180deg);
}

/* Style cho các link bên trong sub-menu */
.sub-menu li a {
    color: #333 !important;
    padding: 12px 20px;
    display: block;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: 0.2s;
}

.sub-menu li a:hover {
    background: #f8f8f8;
    color: #f1c40f !important;
}

/* =========================================================
   XỬ LÝ RIÊNG CHO DESKTOP (PC)
   ========================================================= */
@media (min-width: 769px) {
    .sub-menu {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 220px;
        border-radius: 4px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    }
}

/* =========================================================
   XỬ LÝ RIÊNG CHO MOBILE
   ========================================================= */
@media (max-width: 768px) {
    .hamburger { display: flex; }

    .nav-links {
        position: fixed;
        top: 70px;
        left: -100%;
        width: 280px;
        height: calc(100vh - 70px);
        background: #0d0d0d;
        flex-direction: column;
        transition: 0.4s;
        overflow-y: auto;
    }

    .nav-links.active { left: 0; }

    .nav-links > li > a {
        padding: 15px 20px;
        border-bottom: 1px solid #1a1a1a;
        justify-content: space-between;
    }

    .sub-menu {
        position: static;
        background: #151515;
        width: 100%;
    }

    .sub-menu li a {
        color: #aaa !important;
        padding-left: 40px !important;
        border-bottom: 1px solid #222;
    }
}

/* --- TÀI KHOẢN (USER MENU) --- */
.user-menu { position: relative; }
.account-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #f1c40f;
    cursor: pointer;
    padding: 8px 15px;
    background: #222;
    border-radius: 20px;
    font-size: 0.9rem;
}

.dropdown-content {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: #fff;
    min-width: 200px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    display: none;
    padding: 10px 0;
}

.dropdown-content.show { display: block; }

.dropdown-item {
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #333;
    cursor: pointer;
}

.dropdown-item:hover { background: #f8f8f8; color: #f1c40f; }
.dropdown-divider { height: 1px; background: #eee; margin: 8px 0; }

/* --- ANIMATION --- */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}/* ============================================================
   USER FOOTER - 4 CỘT DESKTOP | 2 CỘT MOBILE (<=767px)
============================================================ */

.user-footer {
    background: #050505;
    color: #ffffff;
    border-top: 1px solid #222;
  padding: 30px 0 20px 0;
}

/* ================= CONTAINER ================= */

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

/* ================= LOGO ================= */

.footer-logo {
    font-size: 2rem;
    font-weight: 900;
    margin-bottom: 15px;
    line-height: 1.2;
    color: #fff;
    text-decoration: none;
    display: block;
}

.footer-logo span {
    color: #f1c40f;
}

/* ================= ABOUT ================= */

.about p {
    color: #aaa;
    line-height: 1.7;
    font-size: 0.8rem;
    max-width: 380px;
}

/* ================= TITLES ================= */

.footer-section h3 {
    margin-bottom: 22px;
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ================= LINKS ================= */

.links ul,
.support ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.links li,
.support li {
    margin-bottom: 12px;
}

.links a,
.support a {
    color: #bbb;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.links a:hover,
.support a:hover {
    color: #f1c40f;
    padding-left: 6px;
}

/* ================= CONTACT ================= */

.contact p {
    color: #bbb;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
}

.contact svg {
    color: #f1c40f;
}

/* ================= SOCIAL ================= */

.social-links {
    margin-top: 20px;
    display: flex;
    gap: 15px;
}

.social-links a {
    color: #fff;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}

.social-links a:hover {
    color: #f1c40f;
    transform: scale(1.15);
}

/* ================= BOTTOM ================= */

.footer-bottom {
    margin-top: 60px;
    padding-top: 25px;
    border-top: 1px solid #222;
    text-align: center;
}

.footer-bottom p {
    color: #666;
    font-size: 0.85rem;
}

/* ============================================================
   RESPONSIVE DUY NHẤT: <= 767px
============================================================ */
/* ============================================================
   RESPONSIVE TỐI ƯU: TRỊ LỖI ZOOM 100%
============================================================ */

@media (max-width: 767px) {
  .footer-container {
        /* SỬA TẠI ĐÂY: Dùng 1 cột để nội dung thoải mái khi zoom 100% */
      grid-template-columns: repeat(2, 1fr);
        gap: 40px; /* Tăng gap một chút để các phần không dính nhau */
        text-align: center;
    }

    /* Nếu Dũng vẫn muốn 2 cột cho máy tính bảng/điện thoại nằm ngang, 
       hãy dùng thêm một mốc nữa ở khoảng 480px */


/* Mẹo nhỏ: Thêm cái này để chữ không bao giờ "vượt biên" */
.user-footer * {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

    /* Chống tràn chữ khi zoom to 100% */
    .about p {
        max-width: 100%;
        margin: 0 auto;
        font-size: 0.8rem; /* Giảm nhẹ font để zoom 100% không bị quá khổ */
    }

    .footer-logo {
        font-size: 1.2rem;
    }

    .contact p {
        justify-content: center;
      
    }

    .social-links {
        justify-content: center;
    }

    .footer-bottom {
        margin-top: 40px;
    }
}/* ============================================================
   USER LAYOUT - FIX ZOOM & SCROLL VERSION
============================================================ */

.user-site-container {
    display: flex;
    flex-direction: column;
    /* Đảm bảo trang luôn đủ cao nhưng cho phép nở dài ra */
    min-height: 100vh; 
    width: 100%;
    background-color: #0a0a0a;
    /* Quan trọng: Cho phép trình duyệt quản lý cuộn dọc */
    overflow-y: visible; 
}

/* ================= HEADER ================= */
.user-header-section {
    flex-shrink: 0; /* KHÔNG cho phép Header bị bóp nghẹt khi zoom */
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 1000;
    /* Đảm bảo header có nền để không bị nội dung bên dưới hiện xuyên qua khi cuộn */
    background-color: #0a0a0a; 
}

/* ================= MAIN - TỐI ƯU CHIỀU CAO ================= */
.user-main-content {
    /* flex: 1 0 auto; giữ nguyên để đẩy footer xuống đáy */
    flex: 1 0 auto; 
    width: 100%;
    display: flex;
    flex-direction: column;

    /* NHÍCH LÊN: Xóa bỏ hoàn toàn padding bottom */
    padding-bottom: 0; 
    
    /* NHÍCH LÊN: Nếu các Section bên trong có margin, 
       đoạn này sẽ ép chúng sát lại với nhau */
    gap: 0; 
    
    /* Ngăn chặn việc tự tạo ra khoảng trống thừa khi zoom */
    justify-content: flex-start; 
}

/* Ép các phần tử con trực tiếp bên trong (như banner, movie-grid) 
   không được tự ý tạo khoảng cách quá lớn */
.user-main-content > div {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 10px; 
    padding-bottom: 10px;
}

/* ================= FOOTER ================= */
.user-footer-section {
    flex-shrink: 0; /* Giữ Footer ổn định */
    width: 100%;
    margin-top: auto; /* Luôn nằm dưới cùng kể cả khi trang ít nội dung */
}/**
 * Swiper 12.1.0
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2026 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: January 28, 2026
 */

:root {
  --swiper-theme-color: #007aff;
  /*
  --swiper-preloader-color: var(--swiper-theme-color);
  --swiper-wrapper-transition-timing-function: initial;
  */
}
:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}
.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
  display: block;
}
.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  box-sizing: content-box;
}
.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}
.swiper-horizontal {
  touch-action: pan-y;
}
.swiper-vertical {
  touch-action: pan-x;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
/* Auto Height */
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}
.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}
.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  backface-visibility: hidden;
}
/* 3D Effects */
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}
.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}
.swiper-3d {
  perspective: 1200px;
  .swiper-slide,
  .swiper-cube-shadow {
    transform-style: preserve-3d;
  }
}

/* CSS Mode */
.swiper-css-mode {
  > .swiper-wrapper {
    overflow: auto;
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
    &::-webkit-scrollbar {
      display: none;
    }
  }
  > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: start start;
  }
  &.swiper-horizontal {
    > .swiper-wrapper {
      scroll-snap-type: x mandatory;
    }
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-inline-start: var(--swiper-slides-offset-before);
      scroll-margin-inline-start: var(--swiper-slides-offset-before);
    }
    > .swiper-wrapper > .swiper-slide:last-child {
      margin-inline-end: var(--swiper-slides-offset-after);
    }
  }
  &.swiper-vertical {
    > .swiper-wrapper {
      scroll-snap-type: y mandatory;
    }
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-block-start: var(--swiper-slides-offset-before);
      scroll-margin-block-start: var(--swiper-slides-offset-before);
    }
    > .swiper-wrapper > .swiper-slide:last-child {
      margin-block-end: var(--swiper-slides-offset-after);
    }
  }
  &.swiper-free-mode {
    > .swiper-wrapper {
      scroll-snap-type: none;
    }
    > .swiper-wrapper > .swiper-slide {
      scroll-snap-align: none;
    }
  }
  &.swiper-centered {
    > .swiper-wrapper::before {
      content: '';
      flex-shrink: 0;
      order: 9999;
    }
    > .swiper-wrapper > .swiper-slide {
      scroll-snap-align: center center;
      scroll-snap-stop: always;
    }
  }
  &.swiper-centered.swiper-horizontal {
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-inline-start: var(--swiper-centered-offset-before);
    }
    > .swiper-wrapper::before {
      height: 100%;
      min-height: 1px;
      width: var(--swiper-centered-offset-after);
    }
  }
  &.swiper-centered.swiper-vertical {
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-block-start: var(--swiper-centered-offset-before);
    }
    > .swiper-wrapper::before {
      width: 100%;
      min-width: 1px;
      height: var(--swiper-centered-offset-after);
    }
  }
}

/* Slide styles start */
/* 3D Shadows */
.swiper-3d {
  .swiper-slide-shadow,
  .swiper-slide-shadow-left,
  .swiper-slide-shadow-right,
  .swiper-slide-shadow-top,
  .swiper-slide-shadow-bottom,
  .swiper-slide-shadow,
  .swiper-slide-shadow-left,
  .swiper-slide-shadow-right,
  .swiper-slide-shadow-top,
  .swiper-slide-shadow-bottom {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
  }
  .swiper-slide-shadow {
    background: rgba(0, 0, 0, 0.15);
  }
  .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
}
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}
.swiper:not(.swiper-watch-progress),
.swiper-watch-progress .swiper-slide-visible {
  .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s infinite linear;
  }
}
.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}
@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Slide styles end */
:root {
  --swiper-navigation-size: 44px;
  /*
  --swiper-navigation-top-offset: 50%;
  --swiper-navigation-sides-offset: 4px;
  --swiper-navigation-color: var(--swiper-theme-color);
  */
}
.swiper-button-prev,
.swiper-button-next {
  position: absolute;

  width: var(--swiper-navigation-size);
  height: var(--swiper-navigation-size);

  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
  &.swiper-button-disabled {
    opacity: 0.35;
    cursor: auto;
    pointer-events: none;
  }
  &.swiper-button-hidden {
    opacity: 0;
    cursor: auto;
    pointer-events: none;
  }
  .swiper-navigation-disabled & {
    display: none !important;
  }
  svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-origin: center;
    fill: currentColor;
    pointer-events: none;
  }
}

.swiper-button-lock {
  display: none;
}

.swiper-button-prev,
.swiper-button-next {
  top: var(--swiper-navigation-top-offset, 50%);
  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
}
.swiper-button-prev {
  left: var(--swiper-navigation-sides-offset, 4px);
  right: auto;
  .swiper-navigation-icon {
    transform: rotate(180deg);
  }
}
.swiper-button-next {
  right: var(--swiper-navigation-sides-offset, 4px);
  left: auto;
}
.swiper-horizontal {
  .swiper-button-prev,
  .swiper-button-next,
  ~ .swiper-button-prev,
  ~ .swiper-button-next {
    top: var(--swiper-navigation-top-offset, 50%);
    margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
    margin-left: 0;
  }
  .swiper-button-prev,
  & ~ .swiper-button-prev,
  &.swiper-rtl .swiper-button-next,
  &.swiper-rtl ~ .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, 4px);
    right: auto;
  }
  .swiper-button-next,
  & ~ .swiper-button-next,
  &.swiper-rtl .swiper-button-prev,
  &.swiper-rtl ~ .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 4px);
    left: auto;
  }
  .swiper-button-prev,
  & ~ .swiper-button-prev,
  &.swiper-rtl .swiper-button-next,
  &.swiper-rtl ~ .swiper-button-next {
    .swiper-navigation-icon {
      transform: rotate(180deg);
    }
  }
  &.swiper-rtl .swiper-button-prev,
  &.swiper-rtl ~ .swiper-button-prev {
    .swiper-navigation-icon {
      transform: rotate(0deg);
    }
  }
}
.swiper-vertical {
  .swiper-button-prev,
  .swiper-button-next,
  ~ .swiper-button-prev,
  ~ .swiper-button-next {
    left: var(--swiper-navigation-top-offset, 50%);
    right: auto;
    margin-left: calc(0px - (var(--swiper-navigation-size) / 2));
    margin-top: 0;
  }
  .swiper-button-prev,
  ~ .swiper-button-prev {
    top: var(--swiper-navigation-sides-offset, 4px);
    bottom: auto;
    .swiper-navigation-icon {
      transform: rotate(-90deg);
    }
  }
  .swiper-button-next,
  ~ .swiper-button-next {
    bottom: var(--swiper-navigation-sides-offset, 4px);
    top: auto;
    .swiper-navigation-icon {
      transform: rotate(90deg);
    }
  }
}
:root {
  /*
  --swiper-pagination-color: var(--swiper-theme-color);
  --swiper-pagination-left: auto;
  --swiper-pagination-right: 8px;
  --swiper-pagination-bottom: 8px;
  --swiper-pagination-top: auto;
  --swiper-pagination-fraction-color: inherit;
  --swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25);
  --swiper-pagination-progressbar-size: 4px;
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-border-radius: 50%;
  --swiper-pagination-bullet-inactive-color: #000;
  --swiper-pagination-bullet-inactive-opacity: 0.2;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;
  */
}
.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
  &.swiper-pagination-hidden {
    opacity: 0;
  }
  .swiper-pagination-disabled > &,
  &.swiper-pagination-disabled {
    display: none !important;
  }
}
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: var(--swiper-pagination-bottom, 8px);
  top: var(--swiper-pagination-top, auto);
  left: 0;
  width: 100%;
}
/* Bullets */
.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
  .swiper-pagination-bullet {
    transform: scale(0.33);
    position: relative;
  }
  .swiper-pagination-bullet-active {
    transform: scale(1);
  }
  .swiper-pagination-bullet-active-main {
    transform: scale(1);
  }
  .swiper-pagination-bullet-active-prev {
    transform: scale(0.66);
  }
  .swiper-pagination-bullet-active-prev-prev {
    transform: scale(0.33);
  }
  .swiper-pagination-bullet-active-next {
    transform: scale(0.66);
  }
  .swiper-pagination-bullet-active-next-next {
    transform: scale(0.33);
  }
}
.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display: inline-block;
  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
  button& {
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    appearance: none;
  }
  .swiper-pagination-clickable & {
    cursor: pointer;
  }

  &:only-child {
    display: none !important;
  }
}
.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

.swiper-vertical > .swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets {
  right: var(--swiper-pagination-right, 8px);
  left: var(--swiper-pagination-left, auto);
  top: 50%;
  transform: translate3d(0px, -50%, 0);
  .swiper-pagination-bullet {
    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
    display: block;
  }
  &.swiper-pagination-bullets-dynamic {
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    .swiper-pagination-bullet {
      display: inline-block;
      transition:
        200ms transform,
        200ms top;
    }
  }
}
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-horizontal.swiper-pagination-bullets {
  .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
  }
  &.swiper-pagination-bullets-dynamic {
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    .swiper-pagination-bullet {
      transition:
        200ms transform,
        200ms left;
    }
  }
}
.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition:
    200ms transform,
    200ms right;
}
/* Fraction */
.swiper-pagination-fraction {
  color: var(--swiper-pagination-fraction-color, inherit);
}
/* Progress */
.swiper-pagination-progressbar {
  background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
  position: absolute;
  .swiper-pagination-progressbar-fill {
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transform-origin: left top;
  }
  .swiper-rtl & .swiper-pagination-progressbar-fill {
    transform-origin: right top;
  }
  .swiper-horizontal > &,
  &.swiper-pagination-horizontal,
  .swiper-vertical > &.swiper-pagination-progressbar-opposite,
  &.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
    width: 100%;
    height: var(--swiper-pagination-progressbar-size, 4px);
    left: 0;
    top: 0;
  }
  .swiper-vertical > &,
  &.swiper-pagination-vertical,
  .swiper-horizontal > &.swiper-pagination-progressbar-opposite,
  &.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
    width: var(--swiper-pagination-progressbar-size, 4px);
    height: 100%;
    left: 0;
    top: 0;
  }
}
.swiper-pagination-lock {
  display: none;
}
.swiper-coverflow {
}
/* ============================================================
    USER HOME - GALAXY STYLE (GRID 4 -> 2, MAX-WIDTH)
    Author: Quang Dung Project
============================================================ */

.user-home {
    padding: 40px 0;
    background-color: #000;
   min-height: auto;
}

/* --- 1. CAROUSEL SECTION (BANNER) --- */
.carousel-wrapper {
    width: 100%;
    position: relative;
    padding: 0 20px;  /* giảm từ 60px xuống 20px */
    box-sizing: border-box;
}

.banner-slide {
    width: 100% !important;
    aspect-ratio: 16 / 6;
    border-radius: 15px;
    overflow: hidden;
    background-color: #050505;
    transition: 0.4s ease;
}

.banner-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top;
}

/* --- 2. MOVIE SECTION --- */
.movie-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;  /* giảm từ 60px xuống 20px */
    box-sizing: border-box;
}

.movie-tabs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #222;
    margin-bottom: 30px;
}

.tab-btn {
    background: none;
    border: none;
    color: #666;
    font-size: 1rem;
    font-weight: 600;
    margin-right: 25px;
    padding-bottom: 10px;
    cursor: pointer;
    text-transform: uppercase;
    position: relative;
}

.tab-btn.active {
    color: #fff;
}

.tab-btn.active::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #03599d;
}

.view-all-link {
    color: #888;
    font-size: 0.9rem;
    cursor: pointer;
}

/* --- 3. GRID & POSTER --- */
.movie-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.poster-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    border-radius: 10px;
    overflow: hidden;
    background: #1a1a1a;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.poster-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s ease;
}

.movie-item:hover .poster-img {
    transform: scale(1.08);
}

.movie-name {
    color: #fff;
    font-size: 0.95rem;
    margin-top: 12px;
    font-weight: 600;
    text-transform: uppercase;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    height: 2.7rem;
}

.age-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    padding: 2px 6px;
    border-radius: 4px;
    color: #fff;
    font-weight: bold;
    font-size: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255,255,255,0.3);
    z-index: 2;
}

.poster-hover {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.6);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.poster-wrapper:hover .poster-hover {
    opacity: 1;
}

.btn-book {
    background-color: #f1c40f;
    color: #000;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    border: none;
    text-transform: uppercase;
}

/* --- 4. RESPONSIVE --- */
/* --- 4. RESPONSIVE --- */
@media (max-width: 767px) {

    /* Tổng thể */
    .user-home {
        padding: 35px 0;
    }

    /* Banner */
    .carousel-wrapper { 
        padding: 0 18px;
    }

    .banner-slide {
        border-radius: 12px;
    }

    /* Container canh giữa + thoáng */
    .movie-container {
        width: 100%;
        max-width: 700px;     /* Giới hạn chiều ngang để phim nhỏ lại */
        margin: 0 auto;
        padding: 30px 20px;   /* Tạo khoảng cách 2 bên */
        box-sizing: border-box;
    }

    /* Grid */
    .movie-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      
    }

    /* Poster thanh hơn để nhìn nhỏ */
    .poster-wrapper {
        aspect-ratio: 2 / 3.2;
        border-radius: 8px;
    }

    /* Tên phim */
    .movie-name {
        font-size: 0.8rem;
        margin-top: 8px;
        line-height: 1.3;
        height: 2.2rem;
    }

    /* Age badge */
    .age-badge {
        font-size: 8px;
        padding: 2px 5px;
    }

    /* Button */
    .btn-book {
        padding: 7px 12px;
        font-size: 0.7rem;
    }
}

/* Import font từ Google Fonts */
:root {
    --primary-color: #ff2c1f; /* Màu đỏ rạp phim đặc trưng */
    --secondary-color: #0c0c0c;
    --accent-color: #ff9f1c;
    --text-light: #ffffff;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
}
.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    /* Gradient nền theo vibe điện ảnh */
    background: radial-gradient(circle at top right, #2c0b0e, #0c0c0c);
    font-family: 'Poppins', sans-serif;
    overflow: hidden;
    position: relative;
}
/* Hiệu ứng trang trí nền */
.auth-container::before {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    background: var(--primary-color);
    filter: blur(150px);
    border-radius: 50%;
    top: -100px;
    left: -100px;
    opacity: 0.3;
}
/* Thẻ Card phong cách Glassmorphism */
.auth-card {
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--glass-border);
    padding: 3rem;
    border-radius: 24px;
    width: 100%;
    max-width: 450px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    text-align: center;
    z-index: 1;
    transition: transform 0.3s ease;
}
.auth-card:hover {
    transform: translateY(-5px);
}
.auth-card h2 {
    color: var(--text-light);
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}
.auth-subtitle {
    color: #aaa;
    margin-bottom: 2.5rem;
    font-size: 1rem;
    font-weight: 300;
}
/* Form Group */
.form-group {
    margin-bottom: 1.8rem;
    text-align: left;
    position: relative;
}
.form-group label {
    display: block;
    color: #ddd;
    margin-bottom: 8px;
    font-size: 0.85rem;
    margin-left: 5px;
    font-weight: 500;
}
.auth-input {
    width: 100%;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    color: black;
    font-size: 1rem;
    transition: all 0.3s ease;
    outline: none;
    box-sizing: border-box;
}
.auth-input:focus {
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 15px rgba(255, 44, 31, 0.2);
}
/* Nút bấm Cinema Style */
.btn-user {
    width: 100%;
    padding: 14px;
    background: linear-gradient(45deg, var(--primary-color), #b31d14);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    margin-top: 1rem;
    box-shadow: 0 10px 20px rgba(255, 44, 31, 0.3);
}
.btn-user:hover:not(:disabled) {
    transform: scale(1.02);
    box-shadow: 0 15px 25px rgba(255, 44, 31, 0.4);
}
.btn-user:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: #555;
}
/* Footer & Link */
.auth-footer {
    margin-top: 2rem;
    color: #888;
    font-size: 0.9rem;
}
.btn-link {
    background: none;
    border: none;
    color: var(--primary-color);
    font-weight: 600;
    cursor: pointer;
    font-size: 0.9rem;
    text-decoration: none;
    margin-left: 5px;
    transition: color 0.3s ease;
}
.btn-link:hover {
    color: var(--accent-color);
    text-decoration: underline;
}
/* Thông báo lỗi đỏ rực rỡ */
.error-message {
    background: rgba(255, 44, 31, 0.1);
    color: #ff2c1f;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 44, 31, 0.2);
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
    animation: shake 0.4s ease-in-out;
}
/* Hiệu ứng rung khi có lỗi */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}
/* Spinner xoay xoay khi đang loading */
.loader {
    width: 20px;
    height: 20px;
    border: 3px solid #ffffff;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    animation: rotation 1s linear infinite;
}
@keyframes rotation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* --- RESPONSIVE BREAKPOINTS --- */
/* Desktop / Tablet ngang (1024px) */
@media (max-width: 1024px) {
    .auth-card {
        max-width: 400px;
        padding: 2.5rem;
    }
}
/* Tablet dọc (768px) */
@media (max-width: 768px) {
    .auth-card {
        max-width: 380px;
        padding: 2rem;
    }
    .auth-card h2 {
        font-size: 1.8rem;
    }
}
/* Mobile (480px) */
@media (max-width: 480px) {
    .auth-container {
        padding: 15px;
        background: #0c0c0c; /* Bỏ bớt gradient nặng để mượt hơn trên mobile */
    }
    .auth-card {
        padding: 1.5rem;
        border-radius: 16px;
        border: none;
        background: transparent; /* Mobile thường tối giản để dễ nhìn */
        box-shadow: none;
    }
    .btn-user {
        padding: 12px;
        font-size: 1rem;
    }
    .auth-input {
        font-size: 16px; /* Chống auto-zoom trên iPhone */
    }
}/* Lớp nền mờ phía sau */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(3px);
}

/* Hộp thoại chính */
.modal-content {
    background: white;
    padding: 40px 30px 30px 30px;
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    position: relative; /* Gốc tọa độ cho nút X */
    animation: modalAppear 0.3s ease-out;
}

/* Nút X ở góc phải */
.modal-close-x {
    position: absolute;
    top: 12px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    color: #bdc3c7;
    cursor: pointer;
    transition: all 0.2s;
}

.modal-close-x:hover {
    color: #e74c3c;
    transform: scale(1.2);
}

/* Icon và Nội dung */
.modal-icon {
    font-size: 3.5rem;
    margin-bottom: 15px;
    display: block;
}

.modal-message {
    color: #636e72;
    margin-bottom: 25px;
    line-height: 1.5;
}

/* Nút bấm phía dưới */
.modal-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.modal-btn {
    padding: 10px 25px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.btn-cancel {
    background-color: #ecf0f1;
    color: #7f8c8d;
}

.btn-cancel:hover {
    background-color: #bdc3c7;
}

@keyframes modalAppear {
    from { transform: translateY(-30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}/* ==========================================
   1. TỔNG THỂ TRANG CHI TIẾT
   ========================================== */
.movie-detail-page {
    background-color: #000000;
    color: #eeeeee;
    padding: 40px 0;
    min-height: 100vh;
}

.detail-content-flex {
    display: flex;
    flex-wrap: wrap;
    max-width: 1250px;
    margin: 0 auto;
    gap: 40px;
    padding: 0 20px;
}

/* Cột chính (7.5) */
.main-detail-col {
    flex: 7.5;
    min-width: 0;
}

/* Sidebar (2.5) */
.sidebar-col {
    flex: 2.5;
    min-width: 280px;
}

/* ==========================================
   2. HEADER: POSTER & THÔNG TIN CHUNG
   ========================================== */
.movie-top-info {
    /* ĐÃ SỬA: Chuyển sang Grid để cột Poster và Text cân bằng */
    display: grid;
    grid-template-columns: minmax(180px, 300px) 1fr;
    gap: 35px;
    margin-bottom: 40px;
}

/* TỐI ƯU POSTER CO GIÃN TỰ ĐỘNG THEO GRID */
.poster-frame {
    width: 100%;
    /* Giữ nguyên logic max-width của ông */
    max-width: 300px;
}

.poster-frame img {
    width: 100%;
    /* Giữ tỷ lệ vàng 2:3 */
    aspect-ratio: 2 / 3;
    height: auto; 
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid #333;
    box-shadow: 0 10px 40px rgba(241, 196, 15, 0.1);
    transition: transform 0.3s ease;
}

.text-frame {
    /* Đã sửa: dùng min-width: 0 để Grid không bị tràn */
    min-width: 0;
}

.text-frame h1 {
    /* Dùng clamp để chữ không bao giờ to quá màn hình */
    font-size: clamp(20px, 5vw, 36px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    color: #aaaaaa;
    margin-bottom: 20px;
}

.rating-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px;
    font-size: 20px;
    color: #f1c40f;
}

.tag-btn {
    padding: 6px 18px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
}

/* ==========================================
   3. NỘI DUNG & LỊCH CHIẾU
   ========================================== */
.section-divider {
    border-left: 4px solid #03599d;
    padding-left: 15px;
    margin: 40px 0 25px;
}

.section-divider h3 {
    font-size: 20px;
    text-transform: uppercase;
}

.description-text {
    line-height: 1.8;
    color: #bbb;
    text-align: justify;
}

/* --- DATE PICKER (Ô NGÀY THÁNG) --- */
.date-picker-tabs {
    display: flex;
    flex-wrap: wrap; 
    gap: 12px;
    background: #0a0a0a;
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 30px;
    border: 1px solid #222;
}

.date-picker-tabs button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 100px; /* Sửa nhẹ để các ô tự dàn đều */
    height: 75px;
    background: #151515;
    border: 1px solid #333;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s ease;
}

.date-picker-tabs button strong {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #666;
    margin-bottom: 4px;
}

.date-picker-tabs button span {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
}

.date-picker-tabs button.active {
    background: #03599d;
    border-color: #03599d;
    box-shadow: 0 4px 15px rgba(3, 89, 157, 0.3);
}

.date-picker-tabs button.active strong,
.date-picker-tabs button.active span {
    color: #ffffff;
}

/* --- SUẤT CHIẾU (GIỜ CHIẾU) --- */
.time-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.time-item {
    padding: 10px 20px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 6px;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s ease;
}

.time-item:hover {
    background: #f1c40f;
    border-color: #f1c40f;
    color: #000;
    transform: translateY(-2px);
}

/* ==========================================
   4. SIDEBAR (PHIM ĐANG CHIẾU)
   ========================================== */
.sidebar-title {
    border-left: 4px solid #f1c40f;
    padding-left: 15px;
    margin-bottom: 30px;
    font-weight: 700;
}

.sidebar-movie-list {
    display: flex;
    flex-direction: column;
    gap: 35px;
}

.simple-movie-item {
    cursor: pointer;
}

.simple-poster {
    width: 100%;
    aspect-ratio: 2/3;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
}

.simple-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.4s ease;
}

.simple-movie-item:hover img {
    transform: scale(1.05);
}

.simple-title {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
}
/* Trailer Section */
.trailer-header-section {
    margin-bottom: 30px;
    width: 100%;
}

.trailer-aspect-ratio {
    position: relative;
    padding-bottom: 45%; /* Tỉ lệ video */
    height: 0;
    overflow: hidden;
    background-color: #000;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.trailer-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Rating in Info Header */
.rating-row {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 15px;
}

.rating-score {
    font-size: 20px;
    margin-left: 8px;
}

.rating-count {
    font-size: 14px;
    color: #888;
    margin-left: 10px;
}

.rating-link {
    color: #03599d;
    text-decoration: underline;
}

/* Actor Section */
.actor-section {
    margin-top: 15px;
}

.actor-label {
    color: #ccc;
    display: block;
    margin-bottom: 8px;
}

.actor-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Star Rating Modal Content */
.star-rating-container {
    text-align: center;
}

.star-rating-hint {
    margin-bottom: 15px;
    color: #ccc;
}

.star-list {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.star-icon {
    cursor: pointer;
    transition: 0.2s;
}

.star-icon.active {
    /* Color handled via props in JSX but can use filter if needed */
}

.review-textarea {
    width: 100%;
    height: 100px;
    margin-top: 15px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #333;
    background-color: #1a1a1a;
    color: #fff;
    resize: none;
}
/* --- KHOẢNG CÁCH GIỮA CÁC RẠP --- */
.showtime-wrapper {
    display: flex;
    flex-direction: column;
    gap: 30px; /* Khoảng cách rõ rệt giữa các rạp */
    margin-top: 20px;
}

.cinema-group {
    background: #0d0d0d; /* Màu nền nhẹ để tách biệt vùng */
    padding: 25px;       /* Đẩy nội dung vào trong cho thoáng */
    border-radius: 12px;
    border: 1px solid #222;
    transition: border-color 0.3s ease;
}

.cinema-group:hover {
    border-color: #03599d; /* Hiệu ứng nhẹ khi rê chuột vào vùng rạp */
}

.cinema-name {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    color: #4da3ff; /* Màu xanh sáng cho tên rạp */
    margin-bottom: 20px; /* Khoảng cách xuống phần giờ chiếu */
    border-bottom: 1px solid #222;
    padding-bottom: 15px;
}
/* ==========================================
   5. RESPONSIVE (TỐI ƯU 3 MỐC)
   ========================================== */

/* Tablet & Laptop nhỏ (Max 1024px) */
@media (max-width: 1024px) {
    .movie-top-info {
        grid-template-columns: minmax(160px, 240px) 1fr;
        gap: 25px;
    }
    .detail-content-flex {
        gap: 30px;
    }
    .text-frame h1 {
        font-size: 28px;
    }
}

/* Phablet & Mobile ngang (Max 768px) */
@media (max-width: 768px) {
    .detail-content-flex {
        flex-direction: column;
    }

    .main-detail-col {
        order: 1;
        width: 100%;
    }

    .sidebar-col {
        order: 2;
        width: 100%;
        margin-top: 50px;
        padding-top: 40px;
        border-top: 1px solid #222;
    }

    .movie-top-info {
        /* Đã sửa: Chuyển về 1 cột trung tâm */
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .poster-frame {
        max-width: 280px; 
        margin: 0 auto;
    }

    .meta-row, 
    .rating-row {
        justify-content: center;
    }

    .sidebar-movie-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .date-picker-tabs button {
        flex: 1 1 calc(25% - 12px);
    }
}

/* Mobile dọc (Max 480px) */
@media (max-width: 480px) {
    .movie-detail-page {
        padding: 20px 0;
    }

    .poster-frame {
        /* Dùng % để ảnh tự bóp khi màn hình siêu nhỏ (189px) */
        width: 70%;
        max-width: none; 
        min-width: 140px;
    }

    .text-frame h1 {
        font-size: 24px;
    }

    .date-picker-tabs button {
        flex: 1 1 calc(33.33% - 12px);
    }

    .time-item {
        flex: 1 1 calc(50% - 15px);
        text-align: center;
    }

    .sidebar-movie-list {
        grid-template-columns: 1fr;
    }
}

/* Fix mốc siêu nhỏ của Dũng */
@media (max-width: 320px) {
    .poster-frame {
        width: 85%;
    }
    .text-frame h1 {
        font-size: 20px;
    }
}/* =========================================
   1. LAYOUT CHÍNH (GIỐNG ACTOR DETAIL)
   ========================================= */
.actor-page-bg {
  background-color: #000000;
  color: #ffffff;
  min-height: 100vh;
  padding-top: 40px;
  padding-bottom: 40px;
  font-family: 'Inter', sans-serif;
}

.actor-content-flex {
  display: flex;
  gap: 35px;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

.main-actor-col {
  flex: 7.5;
}

.sidebar-col {
  flex: 2.5;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 320px; /* Đảm bảo đủ chỗ cho poster 300px */
}

/* =========================================
   2. HEADER & FILTERS
   ========================================= */
.section-header-galaxy {
  display: flex;
  align-items: center;
  gap: 15px;
  border-bottom: 2px solid #1a1a1a;
  margin-bottom: 25px;
  padding-bottom: 15px;
}

.blue-line {
  width: 4px;
  height: 24px;
  background-color: #03599d;
  box-shadow: 0 0 10px rgba(3, 89, 157, 0.5);
}

.section-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.actor-filters-bar {
  display: flex;
  gap: 15px;
  margin-bottom: 30px;
}

.filter-select {
  padding: 10px 15px;
  border: 1px solid #222;
  border-radius: 8px;
  font-size: 14px;
  color: #999;
  background-color: #0a0a0a;
  cursor: pointer;
  transition: 0.3s;
}

.filter-select:focus {
  border-color: #03599d;
  color: #fff;
}

/* =========================================
   3. DANH SÁCH DIỄN VIÊN (CARD NGANG)
   ========================================= */
.actor-list {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.actor-card-horizontal {
  display: flex;
  gap: 25px;
  padding: 25px;
  background-color: #0a0a0a;
  border-radius: 15px;
  border: 1px solid #1a1a1a;
  transition: all 0.3s ease;
}

.actor-card-horizontal:hover {
  border-color: #03599d;
  background-color: #0d0d0d;
  transform: translateX(10px);
}

.actor-img-box {
  flex: 0 0 220px;
  height: 150px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid #1a1a1a;
}

.actor-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.5s;
}

.actor-card-horizontal:hover .actor-img-box img {
  transform: scale(1.1);
}

.actor-content-info {
  flex: 1;
}

.actor-name-link {
  text-decoration: none;
}

.actor-content-info h3 {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 12px 0;
  transition: 0.3s;
}

.actor-name-link:hover h3 {
  color: #03599d;
}

.actor-meta-row {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.btn-fb-like {
  background-color: #1877f2;
  color: white;
  border: none;
  padding: 6px 15px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.view-count {
  font-size: 13px;
  color: #666;
  display: flex;
  align-items: center;
  gap: 6px;
}

.actor-biography-text {
  font-size: 14px;
  color: #999;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Giới hạn 2 dòng cho gọn */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =========================================
   4. SIDEBAR PHIM (CHUẨN 300x400)
   ========================================= */
.sidebar-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 25px;
  color: #fff;
  border-left: 4px solid #03599d;
  padding-left: 12px;
  text-transform: uppercase;
}

.simple-movie-item {
  margin-bottom: 30px;
  cursor: pointer;
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}

.simple-poster {
  width: 300px;
  height: 400px; /* Rộng 300 cao 400 chuẩn Quang Dũng */
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #222;
  position: relative;
}

.simple-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.5s ease;
}

.simple-movie-item:hover .simple-poster img {
  transform: scale(1.05);
}

.simple-title {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 600;
  color: #ccc;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.simple-movie-item:hover .simple-title {
  color: #03599d;
}

.view-more-btn {
  width: 100%;
  padding: 12px;
  background: transparent;
  border: 1px solid #ff9639;
  color: #ff9639;
  border-radius: 8px;
  font-weight: 700;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: 0.3s;
}

.view-more-btn:hover {
  background: #ff9639;
  color: #000;
}

/* =========================================
   5. RESPONSIVE (ĐỒNG BỘ VỚI DETAIL)
   ========================================= */
@media (max-width: 1024px) {
  .actor-content-flex { gap: 20px; }
  .sidebar-col { flex: 3; min-width: 250px; }
  .simple-movie-item, .simple-poster { width: 240px; height: 320px; }
}

@media (max-width: 768px) {
  .actor-content-flex { flex-direction: column; }
  .sidebar-movie-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }
  .simple-movie-item { width: 100%; }
  .simple-poster { width: 100%; height: auto; aspect-ratio: 3 / 4; }
}

@media (max-width: 480px) {
  .actor-card-horizontal {
    flex-direction: column;
    text-align: center;
    padding: 15px;
  }
  .actor-img-box { width: 100%; height: 180px; }
  .actor-meta-row { justify-content: center; }
  .sidebar-movie-list { grid-template-columns: repeat(2, 1fr); }
  .simple-title { font-size: 13px; }
}/* =========================================
   1. TỔNG THỂ & LAYOUT CHÍNH
   ========================================= */
.actor-profile-page {
  background-color: #000000;
  color: #ffffff;
  min-height: 100vh;
  padding-top: 40px;
  padding-bottom: 40px;
  font-family: 'Inter', sans-serif;
}

.detail-content-flex {
  display: flex;
  gap: 35px;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

.main-detail-col {
  flex: 7.5; /* Ưu tiên diện tích cho nghệ sĩ */
}

.sidebar-col {
  flex: 2.5; /* Thu hẹp sidebar */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* =========================================
   2. HEADER NGHỆ SĨ (AVATAR & INFO)
   ========================================= */
.actor-header {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 40px;
  background-color: #0a0a0a;
  padding: 30px;
  border-radius: 20px;
  border: 1px solid #1a1a1a;
}

.actor-avatar-wrapper {
  width: 150px;
  height: 150px;
  flex-shrink: 0;
}

.actor-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #03599d;
}

.actor-name-title {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 10px;
  color: #ffffff;
}

.badge-item {
  display: inline-block;
  margin-right: 15px;
  font-size: 14px;
  color: #999;
}

.badge-item i {
  margin-right: 5px;
  color: #03599d;
}

/* =========================================
   3. PHẦN TIỂU SỬ
   ========================================= */
.section-divider {
  border-left: 4px solid #03599d;
  padding-left: 15px;
  margin-bottom: 20px;
}

.section-divider h3 {
  font-size: 22px;
  margin: 0;
  text-transform: uppercase;
}

.description-text {
  background-color: #0a0a0a;
  padding: 25px;
  border-radius: 12px;
  line-height: 1.7;
  color: #ccc;
  border: 1px solid #111;
}

/* =========================================
   4. GRID PHIM THAM GIA (CỘT TRÁI)
   ========================================= */
.actor-movie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
}

.actor-movie-card {
  background-color: #0a0a0a;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #1a1a1a;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.actor-movie-card:hover {
  transform: translateY(-8px);
  border-color: #03599d;
}

.actor-movie-poster {
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
}

.actor-movie-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.actor-movie-info {
  padding: 10px;
  text-align: center;
}

.actor-movie-info h4 {
  margin: 0;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================
   5. SIDEBAR PHIM ĐANG CHIẾU (ĐÃ THU NHỎ)
   ========================================= */
.sidebar-title-v2 {
   
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #fff;
}

.blue-line {
  color: #03599d;
  font-weight: 900;
  margin-right: 10px;
}

.sidebar-movie-item-vertical {
  margin-bottom: 25px;
  cursor: pointer;
  /* ÉP KÍCH THƯỚC NHỎ LẠI */
  width: 300px; 
  margin-left: auto;
  margin-right: auto;
}

.sidebar-poster-vertical {
  width: 100%;
  height: 400px; /* Chiều cao ngắn lại cho cân đối */
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #222;
}

.sidebar-poster-vertical img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sidebar-movie-name {
  margin-top: 8px;
  font-size: 13px;
  text-align: center;
  color: #aaa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Overlay nhỏ nhắn */
.movie-meta-overlay {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.rating-tag {
  background: rgba(0, 0, 0, 0.85);
  color: #ffc107;
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 10px;
}

.age-limit-tag {
  background: #e91e63;
  color: #fff;
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 10px;
}

/* =========================================
   6. RESPONSIVE BREAKPOINTS
   ========================================= */

/* --- Tablet & Laptop nhỏ (1024px) --- */
@media (max-width: 1024px) {
  .detail-content-flex {
    gap: 10px;
  }

  .sidebar-col {
    flex: 3;
  }
}

/* --- Mobile Lớn (768px) --- */
@media (max-width: 768px) {
  .detail-content-flex {
    flex-direction: column;
  }

  .main-detail-col, 
  .sidebar-col {
    width: 100%;
  }

  /* Sidebar khi nhảy xuống dưới sẽ dàn hàng ngang */
  .sidebar-movie-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 15px;
  }

  .sidebar-movie-item-vertical {
    width: 100%;
  }

  .sidebar-poster-vertical {
    height: 200px;
  }
}

/* --- Mobile Nhỏ (480px) --- */
@media (max-width: 480px) {
  .actor-header {
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }

  .actor-avatar-wrapper {
    width: 120px;
    height: 120px;
  }

  .actor-name-title {
    font-size: 24px;
  }

  .actor-movie-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sidebar-movie-list {
    grid-template-columns: repeat(3, 1fr); /* 3 cột siêu nhỏ */
  }

  .sidebar-poster-vertical {
    height: 150px;
  }

  .sidebar-movie-name {
    font-size: 11px;
  }
}/* =========================================
   CINEMA STAR - TRANG BOOKING FULL WIDTH
   ========================================= */

:root {
  --primary-orange: #f37021;
  --secondary-blue: #03599d;
  --vip-gold: #f3ad0c;
  --booked-red: #e74c3c;
  --text-dark: #333;
  --text-gray: #666;
  --bg-light: #f4f7f9;
  --border-color: #e0e0e0;
  
  /* ĐỒNG BỘ KÍCH THƯỚC GHẾ */
  --seat-height: 30px;
  --seat-width-std: 30px;
  --seat-width-couple: 60px; 
}

/* 1. WRAPPER TỔNG THỂ */
.booking-page-full-wrapper {
  width: 100%;
  min-height: 100vh;
  background-color: var(--bg-light);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: var(--text-dark);
}

/* 2. THANH TIẾN TRÌNH (STEPPER) */
.stepper-bar-full {
  background: white;
  border-bottom: 1px solid var(--border-color);
  width: 100%;
  padding: 15px 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.stepper-content {
  max-width: 1800px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.step-item {
  padding: 0 30px;
  color: #ccc;
  font-size: 14px;
  font-weight: 500;
  position: relative;
  white-space: nowrap;
}

.step-item.done { 
  color: var(--secondary-blue); 
}

.step-item.active {
  color: var(--secondary-blue);
  font-weight: 700;
}

.step-item.active::after {
  content: '';
  position: absolute;
  bottom: -16px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--secondary-blue);
  border-radius: 2px 2px 0 0;
}

/* 3. BỐ CỤC CHÍNH (MAIN LAYOUT) */
.booking-main-layout {
  max-width: 1800px;
  margin: 30px auto;
  padding: 0 40px;
}

.booking-grid-container {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 30px;
  align-items: flex-start;
}

/* 4. KHU VỰC CHỌN GHẾ (BÊN TRÁI) */
.seat-selection-card {
  background: white;
  border-radius: 12px;
  padding: 50px 30px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.screen-container { 
  width: 90%; 
  /* Tăng margin để tạo khoảng cách rộng với hàng ghế cuối */
  margin: 80px auto 40px auto; 
  position: relative;
}

.screen-line {
  width: 100%;
  /* Tạo đường viền cong vòm lên trên */
  border-top: 6px solid var(--primary-orange);
  border-radius: 100px 100px 0 0; 
  
  /* Tăng padding để chữ "MÀN HÌNH" cách xa đường kẻ hơn */
  padding-top: 30px; 
  
  color: #888;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 15px; /* Giãn chữ rộng hơn nữa */
  text-align: center;
  text-transform: uppercase;
  
  /* Hiệu ứng hắt sáng neon xuống dưới */
  box-shadow: 0 -15px 40px -10px rgba(255, 84, 0, 0.3);
  
  /* Thêm hiệu ứng mờ dần ở hai đầu đường kẻ */
  mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

/* Tùy chọn: Thêm một luồng sáng ảo phía sau chữ */
.screen-container::after {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 50px;
  background: radial-gradient(ellipse at center, rgba(255, 84, 0, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.seats-layout-engine {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 50px;
  overflow-x: auto;
  padding: 10px;
}

.seat-row { 
  display: flex; 
  align-items: center; 
  gap: 20px; 
}

.side-label { 
  width: 30px; 
  font-size: 14px; 
  color: #999; 
  font-weight: bold; 
  text-align: center; 
}

.row-cells-group { 
  display: flex; 
  gap: 10px; 
}
.selected-seats-display {
    display: flex;
    flex-wrap: wrap; /* Cho phép xuống dòng */
    gap: 4px;
}

.highlight-orange {
    word-break: break-word; /* Tự động ngắt chữ nếu cần */
    color: var(--primary-orange);
    font-weight: bold;
}
/* ĐỊNH NGHĨA GHẾ CHUNG */
.seat-unit, 
.legend-box {
  height: var(--seat-height);
  border: 1.5px solid #ddd;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  background: white;
  cursor: pointer;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

/* GHẾ ĐƠN & CHÚ THÍCH ĐƠN */
.seat-unit:not(.couple), 
.legend-box:not(.type-couple) { 
  width: var(--seat-width-std); 
}

/* ĐỒNG BỘ GHẾ ĐÔI & CHÚ THÍCH ĐÔI */
.seat-unit.couple, 
.legend-box.type-couple {
  width: var(--seat-width-couple);
  min-width: var(--seat-width-couple);
  border-color: #f26bba;
  color: #f26bba;
  background-color: #fff0f6;
}

/* CÁC TRẠNG THÁI GHẾ */
.seat-unit.vip, 
.legend-box.type-vip { 
  border-color: var(--vip-gold); 
  color: var(--vip-gold); 
}

.seat-unit.selected, 
.legend-box.status-selected { 
  background: var(--primary-orange) !important; 
  border-color: var(--primary-orange) !important; 
  color: white !important; 
}

.seat-unit.booked, 
.legend-box.status-booked { 
  background: var(--booked-red) !important; 
  border-color: var(--booked-red) !important; 
  color: white !important; 
  cursor: not-allowed; 
}
/* Màu cho ghế bảo trì */
.seat-unit.maintenance {
    background-color: #444 !important; /* Màu xám tối */
    border: 1px dashed #ff4d4f !important; /* Viền đỏ nét đứt */
    cursor: not-allowed !important;
    opacity: 0.7;
}

.maintenance-icon {
    color: #ff4d4f;
    font-weight: bold;
}

/* Legend cho bảo trì */
.legend-box.status-maintenance {
    background-color: #444;
    border: 1px dashed #ff4d4f;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff4d4f;
    font-size: 10px;
}
/* HIỂN THỊ SỐ TRONG GHẾ ĐÔI */
.couple-numbers {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  font-size: 12px;
  font-weight: bold;
}

/* KHU VỰC CHÚ THÍCH (LEGEND) */
.seat-legend-area {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 30px;
  border-top: 1px solid #f0f0f0;
  width: 100%;
}

.legend-item { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  font-size: 13px; 
  color: var(--text-gray); 
}

/* 5. THANH THANH TOÁN (SIDEBAR PHẢI) */
.sidebar-sticky-content {
  background: white;
  border-radius: 16px;
  padding: 25px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  position: sticky;
  top: 20px;
}

.timer-display-box {
  background: #fff8f5;
  border: 1px solid #ffe0d1;
  padding: 12px;
  border-radius: 10px;
  text-align: center;
  font-weight: 700;
  color: var(--primary-orange);
  margin-bottom: 20px;
}

.movie-info-summary {
  display: flex;
  gap: 15px;
  padding-bottom: 20px;
  border-bottom: 1.5px dashed var(--border-color);
  margin-bottom: 20px;
}

.summary-poster { 
  width: 90px; 
  height: 130px; 
  object-fit: cover; 
  border-radius: 8px; 
}

.movie-title-text {
  font-size: 18px;
  color: var(--secondary-blue);
  margin: 0 0 8px 0;
  text-transform: uppercase;
  font-weight: bold;
}

.age-badge-t18 {
  background: var(--primary-orange);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.ticket-details-breakdown { 
  font-size: 15px; 
  line-height: 1.8; 
  margin-bottom: 20px; 
}

.highlight-orange { 
  color: var(--primary-orange); 
  font-weight: bold; 
}

.payment-footer-section { 
  border-top: 2px solid #f9f9f9; 
  padding-top: 20px; 
}

.total-amount-row { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  margin-bottom: 20px; 
}

.total-value { 
  font-size: 28px; 
  font-weight: 900; 
  color: var(--primary-orange); 
}

.btn-confirm-booking {
  background: var(--primary-orange);
  color: white;
  border: none;
  padding: 16px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 18px;
  cursor: pointer;
  width: 100%;
}

.btn-confirm-booking:hover:not(:disabled) { 
  background: #d95f1a; 
}

.btn-confirm-booking:disabled { 
  background: #ccc; 
}

.btn-go-back {
  background: none;
  border: none;
  color: var(--text-gray);
  margin-top: 15px;
  cursor: pointer;
  text-decoration: underline;
  width: 100%;
  font-size: 14px;
}/* ================= TIÊU ĐỀ ================= */
.food-title-main {
    color: #ffca08;
    margin-bottom: 25px;
    text-transform: uppercase;
    font-size: 22px;
    border-left: 4px solid #ffca08;
    padding-left: 15px;
}

/* ================= DANH SÁCH MÓN ================= */
.food-grid {
    display: flex;                 /* đổi từ grid -> flex */
    flex-direction: column;        /* hiển thị dọc */
    gap: 20px;
    max-height: 70vh;
    overflow-y: auto;
    padding-right: 10px;
    margin-bottom: 20px;
}

/* ================= CARD ================= */
.food-card {
    display: flex;                 /* hiển thị ngang */
    align-items: center;
    gap: 20px;
    background: #ffffff;           /* nền trắng giống Galaxy */
    border-radius: 10px;
    padding: 15px;
    border: 1px solid #eee;
    transition: all 0.3s ease;
}

.food-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* ================= ẢNH ================= */
.food-img-box {
    width: 120px;
    height: 120px;
    background: #f5f5f5;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.food-img-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    padding: 5px;
}

/* ================= CHI TIẾT ================= */
.food-details {
    flex: 1;
    text-align: left;
    padding: 0;
}

.food-name {
    font-size: 18px;
    color: #222;
    margin-bottom: 6px;
    font-weight: 600;
    height: auto;
    display: block;
}

.food-price {
    color: #000;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 8px;
}

/* ================= NÚT TĂNG GIẢM ================= */
.food-ctrl {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.food-ctrl button {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    border: 1px solid #ddd;
    background: #f5f5f5;
    color: #333;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    transition: 0.2s;
}

.food-ctrl button:hover {
    background: #ffca08;
    border-color: #ffca08;
    color: #000;
}

/* ================= SIDEBAR ================= */
.price-breakdown {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #ddd;
}

.breakdown-title {
    font-size: 14px;
    color: #ffca08;
    margin-bottom: 12px;
    font-weight: bold;
    text-transform: uppercase;
}

.item-detail {
    font-size: 13.5px;
    margin-bottom: 8px;
    color: #444;
    display: block;
    text-align: left;
}

.food-item {
    color: #ffca08;
    font-style: italic;
}

.total-amount {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 2px solid #ffca08;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.btn-qty {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--primary-orange);
    background: white;
    color: var(--primary-orange);
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-qty:hover {
    background: var(--primary-orange);
    color: white;
}

.food-card-custom:hover {
    border-color: var(--primary-orange) !important;
    box-shadow: 0 4px 12px rgba(243, 112, 33, 0.1);
}
/* ================= SCROLL ================= */
.food-grid::-webkit-scrollbar {
    width: 6px;
}

.food-grid::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

/* ================= RESPONSIVE ================= */

/* -------- 1024px -------- */
@media (max-width: 1024px) {

    .food-img-box {
        width: 110px;
        height: 110px;
    }

    .food-name {
        font-size: 16px;
    }

    .food-price {
        font-size: 15px;
    }

    .food-ctrl button {
        width: 28px;
        height: 28px;
        font-size: 15px;
    }
}

/* -------- 768px -------- */
@media (max-width: 768px) {

    .food-title-main {
        font-size: 20px;
    }

    .food-card {
        gap: 15px;
        padding: 12px;
    }

    .food-img-box {
        width: 100px;
        height: 100px;
    }

    .food-name {
        font-size: 15px;
    }

    .food-price {
        font-size: 14px;
    }
}

/* -------- 480px -------- */
@media (max-width: 480px) {

    .food-title-main {
        font-size: 18px;
        padding-left: 10px;
        border-left-width: 3px;
    }

    .food-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .food-img-box {
        width: 100%;
        height: 140px;
    }

    .food-details {
        width: 100%;
    }

    .food-ctrl {
        width: 100%;
        justify-content: flex-start;
        margin-top: 10px;
    }

    .food-ctrl button {
        width: 26px;
        height: 26px;
        font-size: 14px;
    }
}/* =========================================
   1. KHUNG CHÍNH (LAYOUT)
   ========================================= */
.payment-page {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f7f6; 
}

.payment-header {
    text-align: center;
    padding: 30px 0;
}

.payment-header h2 {
    font-size: 28px;
    font-weight: 800;
    color: #222;
    letter-spacing: 1px;
    position: relative;
    display: inline-block;
}

.payment-header h2::after {
    content: '';
    display: block;
    width: 50px;
    height: 4px;
    background: #ffc107;
    margin: 10px auto 0;
    border-radius: 2px;
}

.booking-content {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

/* =========================================
   2. PHẦN BÊN TRÁI (FORM TRẮNG)
   ========================================= */
.seat-map-section {
    flex: 1.6;
}

.customer-info-form {
    background: #ffffff; /* NỀN TRẮNG */
    padding: 35px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); /* Đổ bóng mịn */
    border: 1px solid #eee;
}

.form-title {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
}

.title-border {
    margin-top: 40px;
    padding-top: 25px;
    border-top: 1px solid #f0f0f0;
}

/* Input Styles */
.input-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.payment-input {
    flex: 1;
    padding: 14px 16px;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    font-size: 15px;
    background: #fafafa;
    transition: all 0.3s ease;
    color: #333;
}

.payment-input:focus {
    outline: none;
    border-color: #ffc107;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.1);
}

.input-full {
    width: 100%;
    margin-bottom: 10px;
}

.email-highlight {
    font-weight: 600;
    color: #2c3e50;
}

/* Payment Method Selection */
.method-label {
    display: flex;
    align-items: center;
    padding: 18px;
    border: 2px solid #f0f0f0;
    border-radius: 12px;
    cursor: pointer;
    transition: 0.3s;
    background: #fff;
}

.method-label:hover {
    border-color: #ffc107;
}

.method-label.active {
    border-color: #ffc107;
    background: #fffdf5;
}

.method-label input[type="radio"] {
    width: 20px;
    height: 20px;
    margin-right: 15px;
    accent-color: #ffc107;
}

.method-label span {
    font-weight: 600;
    color: #444;
}

/* =========================================
   3. SIDEBAR BÊN PHẢI (SUMMARY)
   ========================================= */
.booking-info-sidebar {
    flex: 1;
    background: #ffffff; /* NỀN TRẮNG */
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid #eee;
    position: sticky;
    top: 20px;
}

.movie-mini-info {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}

.movie-mini-info img {
    width: 90px;
    height: 130px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.movie-mini-info h4 {
    margin: 5px 0;
    font-size: 18px;
    color: #222;
    line-height: 1.3;
}

.type-tag {
    display: inline-block;
    background: #f1f1f1;
    color: #666;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 4px;
    font-weight: 600;
}

.detail-list {
    margin-bottom: 20px;
}

.detail-list p {
    margin: 8px 0;
    font-size: 14px;
    color: #555;
}

.detail-list strong {
    color: #222;
}

/* Price Breakdown */
.price-breakdown {
    border-top: 1px dashed #ddd;
    padding-top: 20px;
    margin-top: 20px;
}

.breakdown-title {
    font-size: 12px;
    color: #999;
    font-weight: 700;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.price-row-custom {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 14px;
    color: #444;
}

.total-amount {
    border-top: 2px solid #f0f0f0;
    margin-top: 20px;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.total-amount span {
    font-weight: 700;
    font-size: 16px;
}

.price-num {
    color: #e67e22;
    font-size: 24px !important;
    font-weight: 800 !important;
}

/* =========================================
   4. NÚT BẤM (BUTTONS)
   ========================================= */
.action-buttons {
    display: flex;
    gap: 15px;
    margin-top: 30px;
}

.btn-back-detail {
    flex: 1;
    padding: 14px;
    background: #f5f5f5;
    color: #777;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.btn-back-detail:hover {
    background: #e8e8e8;
    color: #333;
}

.btn-go-next {
    flex: 2;
    padding: 14px;
    background: #ffc107;
    color: #000;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
    text-transform: uppercase;
}

.btn-go-next:hover {
    background: #ffca2c;
    box-shadow: 0 8px 20px rgba(255, 193, 7, 0.3);
    transform: translateY(-2px);
}

/* ================= 1024px ================= */
@media (max-width: 1024px) {

    .payment-page {
        max-width: 95%;
        margin: 30px auto;
    }

    .booking-content {
        gap: 20px;
    }

    .seat-map-section {
        flex: 1.4;
    }

    .booking-info-sidebar {
        flex: 1;
        padding: 20px;
    }

    .movie-mini-info img {
        width: 80px;
        height: 115px;
    }

    .price-num {
        font-size: 22px !important;
    }

    .btn-go-next {
        font-size: 14px;
    }
}
/* ================= 768px ================= */
@media (max-width: 768px) {

    .booking-content {
        flex-direction: column;
        gap: 25px;
    }

    .customer-info-form {
        padding: 25px;
    }

    .input-row {
        flex-direction: column;
        gap: 15px;
    }

    .booking-info-sidebar {
        width: 100%;
        position: static;
        padding: 20px;
    }

    .movie-mini-info {
        gap: 12px;
    }

    .movie-mini-info img {
        width: 75px;
        height: 105px;
    }

    .movie-mini-info h4 {
        font-size: 16px;
    }

    .price-num {
        font-size: 20px !important;
    }

    .action-buttons {
        flex-direction: column;
    }

    .btn-back-detail,
    .btn-go-next {
        width: 100%;
    }
}
/* ================= 480px ================= */
@media (max-width: 480px) {

    .payment-page {
        padding: 0 12px;
        margin: 20px auto;
    }

    .customer-info-form {
        padding: 18px;
        border-radius: 12px;
    }

    .form-title {
        font-size: 16px;
        margin-bottom: 18px;
    }

    .payment-input {
        padding: 12px;
        font-size: 14px;
    }

    .method-label {
        padding: 14px;
    }

    .method-label span {
        font-size: 14px;
    }

    .booking-info-sidebar {
        padding: 18px;
        border-radius: 12px;
    }

    .movie-mini-info {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .movie-mini-info img {
        width: 100px;
        height: 140px;
    }

    .movie-mini-info h4 {
        font-size: 15px;
    }

    .detail-list p {
        font-size: 13px;
    }

    .total-amount span {
        font-size: 15px;
    }

    .price-num {
        font-size: 18px !important;
    }

    .btn-go-next {
        padding: 12px;
        font-size: 13px;
    }

    .btn-back-detail {
        padding: 12px;
        font-size: 13px;
    }
}/* =========================================
   1. CONFIGURATION (BIẾN TỔNG)
   ========================================= */
:root {
  /* Màu sắc chủ đạo */
  --clr-primary: #ff4d4d;
  --clr-success: #2ecc71;
  --clr-bg-dark: #121212;
  --clr-card: #1a1a1a;
  --clr-ticket: #ffffff;
  
  /* Màu chữ */
  --clr-text-main: #ffffff;
  --clr-text-muted: #aaaaaa;
  --clr-text-dark: #333333;
  
  /* Thông số nút bấm */
  --btn-padding: 20px;
  --btn-font-size: 18px;
  --btn-radius: 12px;

  /* Hiệu ứng */
  --transition: all 0.3s ease;
  --shadow-card: 0 20px 40px rgba(0, 0, 0, 0.5);
}

/* =========================================
   2. TRANG TỔNG (LAYOUT)
   ========================================= */
.success-page-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 40px 20px;
  background-color: var(--clr-bg-dark);
  font-family: 'Segoe UI', Tahoma, sans-serif;
}

.success-card {
  width: 100%;
  max-width: 650px;
  padding: 40px;
  background-color: var(--clr-card);
  border-radius: 24px;
  box-shadow: var(--shadow-card);
  text-align: center;
  color: var(--clr-text-main);
}

/* =========================================
   3. PHẦN ĐẦU (HEADER & TICK V)
   ========================================= */
.check-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  margin: 0 auto 24px;
  background-color: var(--clr-success);
  border-radius: 50%;
  font-size: 50px;
  color: white;
  box-shadow: 0 0 30px rgba(46, 204, 113, 0.4);
  animation: bounceIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes bounceIn {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.success-header h2 {
  font-size: 30px;
  font-weight: 800;
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.success-header p {
  color: var(--clr-text-muted);
  margin-bottom: 35px;
}

/* =========================================
   4. CHIẾC VÉ (TICKET COMPONENT)
   ========================================= */
.ticket-visual {
  display: flex;
  margin-bottom: 40px;
  background-color: var(--clr-ticket);
  color: var(--clr-text-dark);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  text-align: left;
}

/* Bên trái: Ảnh & Thông tin */
.ticket-left {
  flex: 1.8;
  padding: 25px;
  display: flex;
  gap: 20px;
}

.movie-poster-mini img {
  width: 110px;
  height: 160px;
  border-radius: 8px;
  object-fit: cover;
}

.ticket-movie-title {
  margin: 0 0 12px;
  color: var(--clr-primary);
  font-size: 22px;
  font-weight: 900;
  line-height: 1.2;
}

/* Lưới chi tiết vé */
.ticket-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.detail-item .label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
}

.detail-item .value {
  font-size: 14px;
  font-weight: 700;
}

.seat-highlight {
  color: var(--clr-primary) !important;
  font-size: 16px !important;
}

/* Đường cắt vé (Divider) */
.ticket-divider {
  position: relative;
  width: 30px;
  background-color: var(--clr-ticket);
}

.dashed-line {
  height: 80%;
  margin: 10% auto;
  border-left: 2px dashed #ddd;
}

.arc-top,
.arc-bottom {
  position: absolute;
  left: 50%;
  width: 30px;
  height: 30px;
  background-color: var(--clr-card);
  border-radius: 50%;
  transform: translateX(-50%);
}

.arc-top {
  top: -15px;
}

.arc-bottom {
  bottom: -15px;
}

/* Bên phải: PIN & QR */
.ticket-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: #fcfcfc;
  border-left: 1px solid #eeeeee;
}

.pin-label {
  font-size: 11px;
  color: #999;
  font-weight: 600;
}

.pin-number {
  font-size: 34px;
  font-weight: 900;
  color: var(--clr-success);
  letter-spacing: 2px;
  margin: 4px 0;
}

/* =========================================
   5. CÁC NÚT BẤM (ACTION BUTTONS)
   ========================================= */
.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* Nút Về Trang Chủ */
.btn-home {
  width: 100%;
  padding: var(--btn-padding);
  font-size: var(--btn-font-size);
  font-weight: 800;
  text-transform: uppercase;
  color: white;
  background-color: var(--clr-primary);
  border: none;
  border-radius: var(--btn-radius);
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 6px 20px rgba(255, 77, 77, 0.3);
}

.btn-home:hover {
  background-color: #e63939;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(255, 77, 77, 0.4);
}

/* Nút In Vé Cứng */
.btn-print {
  width: 100%;
  padding: var(--btn-padding);
  font-size: var(--btn-font-size);
  font-weight: 800;
  text-transform: uppercase;
  color: white;
  background-color: #2a2a2a;
  border: 1px solid #444;
  border-radius: var(--btn-radius);
  cursor: pointer;
  transition: var(--transition);
}

.btn-print:hover {
  background-color: #383838;
  transform: translateY(-3px);
}

/* =========================================
   6. CẤU HÌNH KHI IN (PRINT)
   ========================================= */
@media print {
  body * {
    visibility: hidden;
  }

  .ticket-visual,
  .ticket-visual * {
    visibility: visible;
  }

  .ticket-visual {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0;
    border: 1px solid #ddd;
    box-shadow: none !important;
  }

  .arc-top,
  .arc-bottom {
    display: none;
  }

  .ticket-right {
    border-left: 1px dashed #ccc !important;
  }
}:root {
  --bank-blue: #1a237e; /* Màu xanh Navy đậm */
  --bank-blue-light: #e8eaf6;
  --bank-orange: #ff9800; /* Màu nút bấm nổi bật */
  --text-main: #333333;
  --text-secondary: #727272;
  --white: #ffffff;
  --bg-body: #f4f7f6;
}

.bank-checkout-page {
  background-color: var(--bg-body);
  min-height: 100vh;
  font-family: 'Inter', 'Segoe UI', sans-serif;
  padding-bottom: 50px;
}

/* Header */
.bank-nav-bar {
  background: var(--white);
  padding: 15px 0;
  border-bottom: 3px solid var(--bank-blue);
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  margin-bottom: 40px;
}

.nav-content {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 0 20px;
}

.nav-content img {
  height: 35px;
}

.nav-content span {
  font-weight: 700;
  color: var(--bank-blue);
  font-size: 1.1rem;
}

/* Container chính */
.bank-checkout-container {
  max-width: 950px;
  margin: 0 auto;
  display: flex;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  border: 1px solid #eee;
}

/* Cột trái: Thông tin */
.bank-order-details {
  flex: 1;
  padding: 45px;
  border-right: 1px dashed #d1d1d1;
  background-color: #fafafa;
}

.section-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--bank-blue);
  margin-bottom: 30px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.info-group {
  margin-bottom: 25px;
}

.info-group label {
  display: block;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 6px;
  font-weight: 500;
}

.vendor-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vendor-info img {
  width: 45px;
  height: 45px;
  border-radius: 8px;
  object-fit: cover;
}

.order-value {
  font-weight: 700;
  font-size: 16px;
  color: var(--text-main);
}

.order-value.amount {
  font-size: 32px;
  color: #d32f2f;
  font-weight: 800;
  margin-top: 5px;
}

/* Box đồng hồ đếm ngược */
.bank-expiry-box {
  margin-top: 40px;
  background: var(--bank-blue-light);
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  border: 1px solid rgba(26, 35, 126, 0.1);
}

.bank-expiry-box p {
  font-size: 14px;
  color: var(--bank-blue);
  margin-bottom: 8px;
  font-weight: 600;
}

.expiry-timer {
  font-size: 36px;
  font-weight: 900;
  color: var(--bank-blue);
  letter-spacing: 2px;
}

/* Cột phải: Nhập OTP */
.bank-otp-section {
  flex: 1.2;
  background: var(--bank-blue);
  padding: 60px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.otp-card {
  background: var(--white);
  padding: 40px 30px;
  border-radius: 20px;
  width: 100%;
  max-width: 360px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.otp-title {
  color: var(--bank-blue);
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 12px;
}

.otp-sub {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 5px;
}

.otp-email {
  font-weight: 700;
  color: var(--bank-blue);
  word-break: break-all;
  margin-bottom: 30px;
  display: block;
}

.otp-input-wrapper {
  margin-bottom: 30px;
}

.otp-field {
  width: 100%;
  padding: 15px;
  font-size: 32px;
  text-align: center;
  letter-spacing: 10px;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  outline: none;
  transition: all 0.3s ease;
  background: #fdfdfd;
}

.otp-field:focus {
  border-color: var(--bank-orange);
  box-shadow: 0 0 15px rgba(255, 152, 0, 0.2);
  background: #fff;
}

.btn-confirm-payment {
  width: 100%;
  padding: 18px;
  background: var(--bank-orange);
  color: var(--white);
  border: none;
  border-radius: 12px;
  font-weight: 800;
  font-size: 17px;
  cursor: pointer;
  transition: transform 0.2s, background 0.3s;
  text-transform: uppercase;
}

.btn-confirm-payment:hover:not(:disabled) {
  background: #f57c00;
  transform: translateY(-2px);
}

.btn-confirm-payment:active:not(:disabled) {
  transform: translateY(0);
}

.btn-confirm-payment:disabled {
  background: #9e9e9e;
  cursor: not-allowed;
  opacity: 0.7;
}

.bank-help-text {
  margin-top: 25px;
  font-size: 14px;
  color: var(--text-secondary);
}

.cancel-text {
  margin-top: 35px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.3s;
}

.cancel-text:hover {
  color: var(--white);
  text-decoration: underline;
}
/* Wrapper cho hình QR nhỏ */
.bank-qr-mini-wrapper {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto 20px;
  padding: 10px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  overflow: hidden;
}

.bank-qr-mini {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Hiệu ứng thanh quét cho QR ngân hàng */
.qr-scan-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--bank-blue);
  box-shadow: 0 0 8px var(--bank-blue);
  animation: bankScan 2.5s infinite ease-in-out;
  opacity: 0.6;
}

@keyframes bankScan {
  0% { top: 0%; }
  100% { top: 100%; }
}

/* Điều chỉnh lại otp-card để cân đối hơn */
.otp-card {
  padding: 25px 30px; /* Giảm padding một chút vì có thêm QR */
}

.otp-title {
  font-size: 18px; /* Giảm nhẹ font size tiêu đề */
  margin-bottom: 8px;
}
/* Responsive */
@media (max-width: 850px) {
  .bank-checkout-container {
    flex-direction: column;
    margin: 0 15px;
  }
  .bank-order-details {
    border-right: none;
    border-bottom: 1px dashed #d1d1d1;
    padding: 30px;
  }
  .bank-otp-section {
    padding: 40px 20px;
  }
}:root {
  --momo-pink: #ae2070;
  --momo-pink-light: #fff0f6;
  --text-main: #333333;
  --text-secondary: #727272;
  --white: #ffffff;
  --bg-body: #f4f4f4;
}

/* 1. Cấu trúc tổng thể trang */
.momo-checkout-page {
  background-color: var(--bg-body);
  min-height: 100vh;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  padding-bottom: 40px;
}

/* 2. Thanh điều hướng (Navigation Bar) */
.momo-nav-bar {
  background: var(--white);
  padding: 12px 0;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 30px;
}

.nav-content {
  max-width: 950px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
}

.nav-content img {
  width: 35px;
}

.nav-content span {
  font-weight: 600;
  color: #444;
  font-size: 15px;
}

/* 3. Khung nội dung chính (Card Container) */
.momo-checkout-container {
  max-width: 950px;
  margin: 0 auto;
  display: flex;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* 4. Cột trái: Thông tin đơn hàng */
.momo-order-details {
  flex: 1;
  padding: 40px;
  border-right: 1px dashed #e0e0e0;
}

.section-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 30px;
  text-transform: uppercase;
}

.info-group {
  margin-bottom: 24px;
}

.info-group label {
  display: block;
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 5px;
}

.order-value {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-main);
  margin: 0;
}

.order-value.amount {
  font-size: 26px;
  color: var(--momo-pink);
  font-weight: 700;
}

.vendor-info {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
}

.vendor-info img {
  width: 60px;
  height: 60px;
  border-radius: 4px;
}

/* 5. Hộp thời gian hết hạn */
.momo-expiry-box {
  margin-top: 50px;
  background: var(--momo-pink-light);
  padding: 15px;
  border-radius: 8px;
  text-align: center;
}

.momo-expiry-box p {
  color: var(--momo-pink);
  font-size: 14px;
  margin-bottom: 10px;
}

.expiry-timer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 32px;
  font-weight: 800;
  color: var(--momo-pink);
}

/* 6. Cột phải: Vùng quét mã QR */
.momo-qr-section {
  flex: 1.2;
  background: var(--momo-pink);
  padding: 50px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.qr-card {
  background: var(--white);
  padding: 25px;
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 300px;
  transition: transform 0.3s ease;
  position: relative;
}

.qr-card:hover {
  transform: scale(1.02);
}

/* 7. Hiệu ứng quét QR (Scanner Animation) */
.qr-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid #f0f0f0;
  padding: 10px;
  background: #fff;
}

.qr-wrapper img {
  width: 100%;
  display: block;
  animation: qr-pulse 2s infinite ease-in-out;
}

.scan-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--momo-pink);
  box-shadow: 0 0 15px 2px var(--momo-pink);
  z-index: 10;
  animation: scan-move 2.5s infinite ease-in-out;
}

/* 8. Các Keyframes cho Animation */
@keyframes scan-move {
  0% {
    top: 0%;
    opacity: 0;
  }
  10%, 90% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

@keyframes qr-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.98);
    opacity: 0.95;
  }
}

/* 9. Chỉ dẫn và trợ giúp */
.qr-instruction {
  margin-top: 30px;
  color: var(--white);
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  max-width: 280px;
}

.help-text {
  margin-top: 25px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
}

.help-text a {
  color: #ffeb3b;
  text-decoration: none;
  font-weight: 600;
}

/* 10. Tương thích di động (Responsive) */
@media (max-width: 768px) {
  .momo-checkout-container {
    flex-direction: column;
    margin: 15px;
  }
  .momo-order-details {
    border-right: none;
    border-bottom: 1px dashed #ddd;
  }
}/* ============================================================
   MOVIE STATUS PAGE - CLEAN MODERN VERSION
============================================================ */

.movie-client-page {
    background: #0a0a0a;
    min-height: auto;
    padding: 50px 16px 80px;
    color: #fff;
}

/* ================= CONTAINER ================= */

.status-header-simple,
.movie-grid {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* ================= HEADER ================= */

.status-header-simple {
    margin-bottom: 40px;
    text-align: center;
}

.status-header-simple h1 {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ================= GRID ================= */

.movie-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px 22px;
}

/* ================= MOVIE ITEM ================= */

.movie-item {
    display: flex;
    flex-direction: column;
}

/* ================= POSTER ================= */

.movie-item__poster-container {
    position: relative;
    aspect-ratio: 2 / 3;
    border-radius: 12px;
    overflow: hidden;
    background: #1a1a1a;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.movie-item__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.movie-item:hover .movie-item__img {
    transform: scale(1.08);
}

/* ================= OVERLAY ================= */

.card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: 0.3s ease;
    z-index: 2;
}

/* Hover desktop */
.movie-item__poster-container:hover .card-overlay {
    opacity: 1;
}

/* ================= BUTTON ================= */

.btn-detail {
    padding: 10px 18px;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    background: #f1c40f;
    color: #000;
    cursor: pointer;
    transition: 0.3s ease;
}

.btn-detail:hover {
    background: #ffd84d;
    transform: scale(1.05);
}

/* ================= AGE TAG ================= */

.movie-item__age-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #e74c3c;
    padding: 4px 8px;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 5px;
    z-index: 3;
}

/* ================= FALLBACK ================= */

.movie-item__fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #1a1a1a;
    color: #888;
    font-size: 0.85rem;
}

.fallback-icon {
    font-size: 1.6rem;
    margin-bottom: 6px;
}

/* ================= INFO ================= */

.movie-item__info {
    margin-top: 14px;
}

.movie-item__title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 6px;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.movie-item__meta {
    font-size: 0.8rem;
    color: #888;
}

/* ================= EMPTY ================= */

.empty-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 0;
    color: #777;
}

/* ================= LOADING ================= */

.loading-state {
    min-height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    color: #aaa;
}

/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 767px) {

    .movie-client-page {
        padding: 35px 12px 60px;
    }

    .movie-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px 14px;
    }

    .movie-item__poster-container {
        border-radius: 8px;
        aspect-ratio: 2 / 2.9;
    }

    .movie-item__title {
        font-size: 0.9rem;
    }

    .movie-item__meta {
        font-size: 0.75rem;
    }

    /* Mobile: hiện overlay luôn */
    .card-overlay {
        opacity: 1;
        background: rgba(0, 0, 0, 0.4);
    }
}/* ==========================================================================
   1. BIẾN VÀ THIẾT LẬP CHUNG (DARK THEME)
   ========================================================================== */
:root {
    --primary-color: #03599d;
    --accent-color: #f1c40f;
    --bg-dark-deep: #000000;
    --bg-dark-card: #0a0a0a;
    --bg-dark-item: #151515;
    --text-bright: #ffffff;
    --text-gray: #aaaaaa;
    --border-soft: #222222;
}

.cinema-detail-wrapper {
    background-color: var(--bg-dark-deep);
    color: var(--text-bright);
    min-height: 100vh;
    padding-bottom: 50px;
    font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;
}

/* ==========================================================================
   2. HEADER THÔNG TIN RẠP
   ========================================================================== */
.cinema-top-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-dark-deep);
    padding: 40px 10%;
    border-bottom: 1px solid var(--border-soft);
}

.c-name {
    font-size: 32px;
    font-weight: 800;
    color: var(--text-bright);
    margin-bottom: 12px;
    text-transform: uppercase;
}

.c-address, 
.c-hotline {
    font-size: 14px;
    color: var(--text-gray);
    margin: 6px 0;
}

.info-right {
    display: flex;
    gap: 15px;
}

.select-box {
    padding: 12px;
    background: var(--bg-dark-card);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    color: var(--text-bright);
    min-width: 180px;
    outline: none;
    cursor: pointer;
}

/* ==========================================================================
   3. THANH CHỌN NGÀY (DATE STRIP) - FIX FLEX-WRAP
   ========================================================================== */
.date-picker-strip {
    display: flex;
    flex-wrap: wrap; /* Tự động xuống hàng nếu màn hình nhỏ */
    gap: 10px;
    margin-bottom: 40px;
    padding: 10px 0;
}

.date-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 1 100px; /* Độ rộng linh hoạt */
    height: 75px;
    background: var(--bg-dark-item);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.date-item .day-text {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-gray);
    margin-bottom: 4px;
}

.date-item .date-text {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-bright);
}

.date-item.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: 0 5px 15px rgba(3, 89, 157, 0.4);
    transform: translateY(-3px);
}

.date-item.active .day-text, 
.date-item.active .date-text { 
    color: #ffffff; 
}

.date-item:hover:not(.active) {
    border-color: var(--accent-color);
}

/* ==========================================================================
   4. GRID PHIM VÀ CARD
   ========================================================================== */
.cinema-main-content {
    max-width: 1250px;
    margin: 0 auto;
    padding: 20px;
}

.movie-grid-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr); 
    gap: 25px;
    row-gap: 40px;
}

.movie-grid-card {
    cursor: pointer;
}

.poster-wrapper {
    position: relative;
    aspect-ratio: 2 / 3;
    border-radius: 12px;
    border: 1px solid var(--border-soft);
    overflow: hidden;
}

.poster-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.movie-grid-card:hover img {
    transform: scale(1.08);
}

.movie-grid-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-bright);
    line-height: 1.4;
    margin-top: 15px;
    text-align: left;
}

.rating-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: bold;
    color: var(--accent-color);
    backdrop-filter: blur(5px);
}

/* ==========================================================================
   5. PANEL SUẤT CHIẾU (FIX FLEX-WRAP)
   ========================================================================== */
.showtime-dropdown-panel {
    grid-column: 1 / -1; 
    background: var(--bg-dark-card);
    border: 1px solid var(--primary-color);
    border-radius: 12px;
    padding: 30px;
    margin: 10px 0;
    animation: slideDown 0.4s ease forwards;
}

.panel-title {
    font-size: 18px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.showtime-slots {
    display: flex;
    flex-wrap: wrap; /* Suất chiếu tự nhảy dòng */
    gap: 15px;
}

.showtime-slots button {
    padding: 12px 25px;
    background: var(--bg-dark-item);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    color: var(--text-bright);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.showtime-slots button:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #000000;
    transform: translateY(-2px);
}

/* ==========================================================================
   6. RESPONSIVE (TỐI ƯU MƯỢT MÀ)
   ========================================================================== */

/* Laptop nhỏ / Tablet Ngang (Max 1024px) */
@media (max-width: 1024px) {
    .movie-grid-container {
        grid-template-columns: repeat(4, 1fr);
    }
    .cinema-top-info {
        padding: 30px 5%;
    }
}

/* Tablet Dọc (Max 768px) */
@media (max-width: 768px) {
    .cinema-top-info {
        flex-direction: column;
        text-align: center;
        gap: 25px;
    }

    .info-right {
        width: 100%;
        justify-content: center;
    }

    .movie-grid-container {
        grid-template-columns: repeat(3, 1fr);
    }

    .c-name {
        font-size: 24px;
    }

    .date-item {
        flex: 1 1 calc(25% - 10px); /* 4 ô mỗi hàng trên tablet */
        min-width: 80px;
    }
}

/* Mobile Dọc (Max 480px) */
@media (max-width: 480px) {
    .movie-grid-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .date-item {
        flex: 1 1 calc(33.33% - 10px); /* 3 ô mỗi hàng trên mobile */
    }

    .showtime-slots button {
        flex: 1 1 calc(50% - 15px); /* Suất chiếu chia đôi cho dễ bấm */
        padding: 12px 10px;
        text-align: center;
    }

    .select-box {
        min-width: 140px;
    }
}

/* ==========================================================================
   7. ANIMATIONS
   ========================================================================== */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}/* ==========================================
   1. TỔNG THỂ LAYOUT
   ========================================== */
.genre-page-bg {
    background-color: #ffffff; /* Nền trắng cho trang danh sách giống Galaxy */
    min-height: 100vh;
    padding: 30px 0;
}

.genre-content-flex {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    gap: 30px;
    padding: 0 15px;
}

/* Cột chính (8/12) */
.main-genre-col {
    flex: 8;
    min-width: 0;
}

/* Sidebar (4/12) */
.sidebar-col {
    flex: 4;
    min-width: 300px;
}

/* ==========================================
   2. HEADER & BỘ LỌC (FILTERS)
   ========================================== */
.section-header-galaxy {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
}

.blue-line {
    width: 4px;
    height: 28px;
    background: #03599d;
    border-radius: 2px;
}

.section-title {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.genre-filters-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 35px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eeeeee;
}

.filter-select {
    padding: 8px 15px;
    border: 1px solid #dddddd;
    border-radius: 5px;
    font-size: 14px;
    color: #444;
    background-color: #fff;
    min-width: 140px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-select:focus {
    color: black;
    border-color: #03599d;
    outline: none;
}
.movie-release-info {
    margin-top: 12px;
    font-size: 13px;
    font-style: italic;
    color: #888;
}

/* Hiệu ứng loading cho chuyên nghiệp */
.loading {
    text-align: center;
    padding: 100px;
    font-size: 18px;
    color: #03599d;
    font-weight: bold;
    letter-spacing: 1px;
}
/* ==========================================
   3. DANH SÁCH PHIM (CARD NGANG)
   ========================================== */
.movie-genre-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.movie-card-horizontal {
    display: flex;
    gap: 20px;
    padding-bottom: 30px;
    border-bottom: 1px dashed #e0e0e0;
    transition: transform 0.3s ease;
}

.movie-img-box {
    flex: 0 0 200px; /* Độ rộng cố định cho poster */
    height: 300px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.movie-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

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

.movie-content-info {
    flex: 1;
}

.movie-name-link {
    text-decoration: none;
}

.movie-content-info h3 {
    font-size: 20px;
    color: #333;
    margin-bottom: 12px;
    font-weight: 700;
    text-transform: uppercase;
    transition: color 0.2s;
}

.movie-name-link:hover h3 {
    color: #03599d;
}

.movie-meta-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px;
}

.btn-fb-like {
    background: #1877f2;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 4px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.view-count {
    font-size: 13px;
    color: #888;
    display: flex;
    align-items: center;
    gap: 6px;
}

.movie-summary-text {
    font-size: 15px;
    color: #666;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Giới hạn 4 dòng mô tả */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: justify;
}

/* ==========================================
   4. SIDEBAR (MUA VÉ & DANH SÁCH PHỤ)
   ========================================== */
.quick-buy-box {
    background: #ffffff;
    border: 1px solid #03599d;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 40px;
    box-shadow: 0 5px 15px rgba(3, 89, 157, 0.1);
}

.quick-buy-header {
    background: #03599d;
    color: #fff;
    padding: 12px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    font-size: 16px;
}

.quick-buy-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quick-buy-body select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f9f9f9;
}

.sidebar-title {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
    padding-left: 12px;
    border-left: 4px solid #f1c40f;
}

.sidebar-movie-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.simple-movie-item {
    cursor: pointer;
}

.simple-poster {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; /* Ảnh ngang cho sidebar xịn hơn */
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 10px;
}

.simple-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* .age-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 800;
    font-size: 12px;
} */

.simple-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.view-more-btn {
    width: 100%;
    margin-top: 25px;
    padding: 10px;
    background: transparent;
    border: 1px solid #03599d;
    color: #03599d;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.view-more-btn:hover {
    background: #03599d;
    color: #fff;
}

/* ==========================================
   5. RESPONSIVE
   ========================================== */
@media (max-width: 992px) {
    .genre-content-flex {
        flex-direction: column;
    }
    .sidebar-col {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .movie-card-horizontal {
        flex-direction: column;
    }
    .movie-img-box {
        flex: none;
        width: 100%;
        height: auto;
        aspect-ratio: 2/3;
    }
}/* Container chính */
.review-detail-container {
    max-width: 940px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: 'Roboto', sans-serif;
    color: #333;
    background-color: #fff;
}

/* Nút quay lại */
.back-to-list {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #666;
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 25px;
    transition: color 0.3s;
}

.back-to-list:hover {
    color: #034ea2; /* Màu xanh Galaxy */
}

/* Header bài viết */
.review-header {
    margin-bottom: 30px;
}

.review-main-title {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 15px;
    color: #1a1a1a;
}

.review-meta-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.meta-left {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #777;
}

/* Nút Like Facebook style */
.btn-fb-like {
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: #1877f2;
    color: white;
    border: none;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

/* Banner ảnh chính */
.review-banner {
    width: 100%;
    margin-bottom: 35px;
}

.review-banner img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* NỘI DUNG CHÍNH (Xử lý HTML từ Database) */
.review-body-text {
    font-size: 18px;
    line-height: 1.8;
    color: #333;
    text-align: justify;
}

/* Fix lỗi ảnh trong bài viết bị tràn */
.review-body-text img {
    max-width: 100%;
    height: auto !important;
    display: block;
    margin: 25px auto;
    border-radius: 4px;
}

.review-body-text p {
    margin-bottom: 20px;
}

.review-body-text h2, .review-body-text h3 {
    margin: 30px 0 15px;
    color: #000;
}

/* Footer & Tags */
.review-footer {
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.review-tags {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tag-label {
    background-color: #f5f5f5;
    color: #666;
    padding: 4px 15px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.3s;
}

.tag-label:hover {
    background-color: #e0e0e0;
}

/* Responsive cho điện thoại */
@media (max-width: 768px) {
    .review-main-title {
        font-size: 26px;
    }
    
    .review-meta-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .review-body-text {
        font-size: 16px;
    }
}/* Container bao phủ toàn màn hình */
.admin-login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
}

/* Thẻ card chứa form đăng nhập */
.admin-card {
    background: #1f2937; /* Màu xám đậm chuẩn Admin */
    color: #ffffff;
    padding: 40px;
    border-radius: 12px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    border-top: 4px solid #ef4444; /* Đường viền đỏ phía trên tạo điểm nhấn */
}

.admin-card h2 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #f3f4f6;
}

/* Các nhóm nhập liệu */
.form-group {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.form-group label {
    margin-bottom: 8px;
    font-size: 14px;
    color: #9ca3af;
    text-align: left;
}

/* Input dành riêng cho Admin */
.admin-input {
    width: 100%;
    padding: 12px 15px;
    background: #374151;
    border: 1px solid #4b5563;
    border-radius: 6px;
    color: black;
    font-size: 16px;
    transition: all 0.3s ease;
    box-sizing: border-box; /* Giúp input không bị tràn khỏi card */
}

.admin-input:focus {
    outline: none;
    border-color: #ef4444;
    background: #4b5563;
    box-shadow: 0 0 5px rgba(239, 68, 68, 0.4);
}

/* Nút bấm Đăng nhập */
.btn-admin {
    width: 100%;
    padding: 14px;
    margin-top: 10px;
    background-color: #ef4444; /* Màu đỏ mạnh mẽ */
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    transition: background 0.3s ease;
}

.btn-admin:hover {
    background-color: #dc2626;
}

.btn-admin:disabled {
    background-color: #991b1b;
    cursor: not-allowed;
    opacity: 0.7;
}
/* Chữ báo lỗi dưới input admin */
.admin-error-text {
    color: #ff4d4d;
    font-size: 0.8rem;
    margin-top: 6px;
    display: block;
    font-style: italic;
    animation: slideIn 0.3s ease;
}

/* Viền đỏ khi input admin có lỗi */
.admin-input.input-error {
    border: 1px solid #ff4d4d !important;
    background: rgba(255, 77, 77, 0.05) !important;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Giữ form không bị nhảy khi lỗi hiện ra */
.form-group {
    margin-bottom: 1.5rem;
    min-height: 90px;
}
/* Hiệu ứng Responsive cho màn hình nhỏ */
/* --- HIỆU ỨNG RESPONSIVE CHI TIẾT --- */

/* 1. Cho Máy tính bảng (Tablet) - Dưới 768px */
@media (max-width: 768px) {
    .admin-card {
        max-width: 340px; /* Thu nhỏ card lại một chút */
        padding: 30px;
    }
    
    .admin-card h2 {
        font-size: 20px; /* Chữ nhỏ lại để không bị xuống dòng */
    }
}

/* 2. Cho Điện thoại di động (Mobile) - Dưới 480px */
@media (max-width: 480px) {
    .admin-login-page {
        padding: 15px; /* Thêm khoảng cách với rìa màn hình */
        background: #1a1a2e; /* Đơn giản hóa background để mượt hơn trên mobile */
    }

    .admin-card {
        padding: 25px 20px;
        border-radius: 8px; /* Bo góc ít hơn cho hợp màn hình nhỏ */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    }

    .admin-card h2 {
        font-size: 18px;
        margin-bottom: 20px;
    }

    .admin-input {
        padding: 10px; /* Input nhỏ lại một chút cho dễ bấm */
        font-size: 14px;
    }

    .btn-admin {
        padding: 12px;
        font-size: 14px;
    }

    .admin-subtitle {
        font-size: 13px;
        margin-bottom: 20px;
    }
}

/* 3. Cho màn hình cực nhỏ hoặc xoay ngang (Small Mobile) - Dưới 350px */
@media (max-width: 350px) {
    .admin-card {
        padding: 15px;
    }
    
    .admin-card h2 {
        font-size: 16px;
    }
}

/* --- TỐI ƯU TRẢI NGHIỆM CẢM ỨNG --- */
@media (pointer: coarse) {
    .btn-admin, .admin-input {
        min-height: 48px; /* Kích thước chuẩn để dễ chạm bằng ngón tay */
    }
}/* --- TỔNG THỂ --- */
.dashboard-content {
    padding: 25px;
    animation: fadeIn 0.6s ease-in-out;
    background-color: #f4f7fe; /* Nền xanh xám nhạt Horizon UI */
    min-height: 100vh;
    font-family: 'Plus Jakarta Sans', sans-serif; /* Font hiện đại nếu Dũng có dùng */
}

/* Header */
.dashboard-header {
    margin-bottom: 25px;
}

.dashboard-header h1 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1b1b28;
    margin-bottom: 5px;
}

.dashboard-header p {
    color: #a3aed0;
    font-size: 0.95rem;
}

/* --- BỘ LỌC PHONG CÁCH ACB ONE --- */
.acb-filter-container {
    margin-top: 30px;
    background: #ffffff;
    padding: 24px;
    border-radius: 20px;
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.filter-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: #00468f; /* Màu xanh thương hiệu ACB */
    font-weight: 700;
}

.filter-controls {
    display: flex;
    gap: 20px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-group label {
    font-size: 0.85rem;
    color: #a3aed0;
    font-weight: 600;
    text-transform: uppercase;
}

.filter-group input[type="date"] {
    padding: 10px 15px;
    border-radius: 12px;
    border: 1.5px solid #e0e5f2;
    outline: none;
    color: #1b1b28;
    transition: all 0.2s ease;
}

.filter-group input[type="date"]:focus {
    border-color: #00468f;
    box-shadow: 0 0 0 3px rgba(0, 70, 143, 0.1);
}

.btn-update-acb {
    background: #00468f;
    color: #ffffff !important;
    padding: 12px 28px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.btn-update-acb:hover {
    background: #003366;
    transform: scale(1.02);
}

/* --- GRID THẺ THỐNG KÊ (4 CỘT) --- */
.dashboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px;
    margin-top: 20px;
}

.stat-card-new {
    background: #ffffff;
    border-radius: 15px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    border-left: 5px solid #d1d5db;
    transition: all 0.3s ease;
}

.stat-card-new:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.card-blue { border-left-color: #4318ff; }
.card-red { border-left-color: #ee5d50; }
.card-green { border-left-color: #05cd99; }
.card-gold { border-left-color: #ffb81c; }

.stat-data span {
    display: block;
    color: #a3aed0;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.stat-data h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: #1b1b28;
}

.stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1b1b28 !important; 
    background: #f4f7fe; 
    width: 48px;
    height: 48px;
    border-radius: 12px;
}

/* --- CONTAINER BIỂU ĐỒ --- */
.dashboard-charts-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin-top: 30px;
}

.chart-box {
    background: #ffffff;
    padding: 24px;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.chart-box h3 {
    font-size: 1rem;
    color: #1b1b28;
    margin-bottom: 20px;
    font-weight: 700;
}

.chart-wrapper {
    width: 100%;
    height: 300px;
}

/* Biểu đồ cột chiếm trọn 2 cột */
.full-width {
    grid-column: span 2;
}

.taller {
    height: 380px;
}

/* --- HIỆU ỨNG & RESPONSIVE --- */
.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    color: #4318ff;
    font-weight: bold;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1200px) {
    .dashboard-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .dashboard-charts-container {
        grid-template-columns: 1fr;
    }
    .full-width {
        grid-column: span 1;
    }
}

@media (max-width: 600px) {
    .dashboard-stats-grid {
        grid-template-columns: 1fr;
    }
    .filter-controls {
        flex-direction: column;
        align-items: stretch;
    }
    .btn-update-acb {
        justify-content: center;
    }
}/* ========================================================================== 
   CONTAINER & HEADER
   ========================================================================== */

.user-list-container {
    background-color: #ffffff;
    padding: 20px 30px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    margin: 10px;

    width: 100%;
    max-width: 100%;
    box-sizing: border-box;

    overflow-x: auto;
    overflow-y: visible;

    -webkit-overflow-scrolling: touch; /* 🔥 scroll mượt mobile */
}

/* Scrollbar */
.user-list-container::-webkit-scrollbar {
    height: 8px;
}

.user-list-container::-webkit-scrollbar-track {
    background: #f1f3f5;
}

.user-list-container::-webkit-scrollbar-thumb {
    background: #ced4da;
    border-radius: 10px;
}

.user-list-container::-webkit-scrollbar-thumb:hover {
    background: #adb5bd;
}


/* ========================================================================== 
   HEADER
   ========================================================================== */

.user-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 2px solid #f1f3f5;
    padding-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}

.user-list-header h2 {
    display: flex;
    align-items: center;
    font-size: 1.3rem;
    color: #2d3436;
    margin: 0;
    font-weight: 700;
}

.header-icon {
    margin-right: 12px;
    color: #0984e3;
}


/* ========================================================================== 
   BUTTON
   ========================================================================== */

.btn-add-user {
    background-color: #00b894;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-add-user:hover {
    background-color: #00a082;
    transform: translateY(-1px);
}


/* ========================================================================== 
   TABLE
   ========================================================================== */

.admin-table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    margin-top: 5px;

    font-size: 1rem; /* 🔥 cố định chữ mọi màn hình */
}

.admin-table th,
.admin-table td {
    white-space: nowrap;
}

.admin-table th {
    background-color: #f8f9fa;
    color: #636e72;
    font-weight: 600;
    text-transform: uppercase;
    padding: 12px 16px;
    text-align: left;
    border-bottom: 2px solid #dee2e6;
}

.admin-table td {
    padding: 10px 16px;
    vertical-align: middle;
    color: #2d3436;
    border-bottom: 1px solid #f1f3f5;
}


/* ========================================================================== 
   ACTION BUTTONS
   ========================================================================== */

.th-actions {
    width: 130px;
    text-align: center;
}

.action-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.btn-edit,
.btn-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.btn-edit {
    background-color: #0984e3;
    color: white;
}

.btn-delete {
    background-color: #ff7675;
    color: white;
}

.btn-edit:hover,
.btn-delete:hover {
    transform: scale(1.1);
    filter: brightness(0.9);
}


/* ========================================================================== 
   BADGE & OTHER
   ========================================================================== */

.status-badge {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 700;
    display: inline-block;
}

.status-badge.used {
    background-color: #e3fcef;
    color: #00b894;
}

.status-badge.pending {
    background-color: #fff4e5;
    color: #ff9f43;
}

.ticket-code {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
}

.movie-poster-img {
    width: 70px;
    height: 90px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* ========================================================================== 
    RESPONSIVE - CHỈNH SỬA THEO MỐC MỚI (740px & 1024px)
   ========================================================================== */

/* 1. VÙNG TABLET (740px - 1023px) - 👉 SIÊU TO CHO DỄ NHÌN */
@media screen and (min-width: 740px) and (max-width: 1023px) {
    .user-list-container {
        padding: 25px 30px; /* Nới rộng container */
        margin: 15px;
    }

    .user-list-header h2 {
        font-size: 1.6rem; /* Tiêu đề trang to rõ */
    }

    .btn-add-user {
        padding: 12px 20px;
        font-size: 1.1rem; /* Nút thêm mới to ra */
    }

    /* 🔥 Chữ trong bảng to lên rõ rệt */
    .admin-table {
        font-size: 1.2rem; 
    }

    .admin-table th {
        padding: 16px 20px;
        font-size: 1.2rem; /* Tiêu đề cột cũng to lên */
    }

    .admin-table td {
        padding: 15px 20px; /* Hàng bảng cao hơn cho dễ nhìn */
    }

    /* Badge trạng thái to lên */
    .status-badge {
        padding: 6px 12px;
        font-size: 1.2rem;
    }

    /* Ảnh poster to hơn cho iPad */
    .movie-poster-img {
        width: 80px;
        height: 110px;
    }

    /* 🔥 Nút Sửa/Xóa to ra để ngón tay dễ chạm, không bấm nhầm */
    .btn-edit,
    .btn-delete {
        width: 42px;
        height: 42px;
        font-size: 1.2rem;
        border-radius: 8px;
    }

    .action-buttons {
        gap: 15px; /* Khoảng cách nút xa nhau ra tí */
    }
}

/* 2. VÙNG MOBILE (Dưới 740px) - 👉 GỌN GÀNG TỐI ƯU */
@media screen and (max-width: 739px) {
    .user-list-container {
        padding: 12px;
        margin: 5px;
        border-radius: 8px;
    }

    .user-list-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .user-list-header h2 {
        font-size: 1.1rem;
    }

    .btn-add-user {
        width: 100%;
        justify-content: center;
        padding: 10px;
        font-size: 1rem;
    }

    .admin-table {
        font-size: 0.9rem;
    }

    .movie-poster-img {
        width: 50px;
        height: 70px;
    }

    .user-list-container::-webkit-scrollbar {
        height: 5px;
    }
}/* ==========================================================================
   PHẦN 1: STYLE CHO FORM NHẬP LIỆU (USER ADD / UPDATE)
   ========================================================================== */
.user-form-container {
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    max-width: 650px; /* Tăng nhẹ để chứa form row */
    margin: 40px auto;
}

.user-form-container h2 {
    margin-bottom: 25px;
    color: #2c3e50;
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
}

/* Layout chia 2 cột cho các trường ngắn */
.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 5px;
}

.form-row .form-group {
    flex: 1;
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 18px;
}

.form-group label {
    font-weight: 600;
    margin-bottom: 6px;
    color: #34495e;
    font-size: 0.9rem;
}

/* Style cho Input, Select và Textarea */
.form-group input, 
.form-group select, 
.form-group textarea {
    padding: 12px;
    border: 1px solid #dcdde1;
    border-radius: 6px;
    font-size: 0.95rem;
    font-family: inherit;
    transition: all 0.3s ease;
    background-color: #f9f9f9;
}

.form-group textarea {
    resize: vertical; /* Cho phép kéo giãn chiều cao */
    min-height: 80px;
}

.form-group input:focus, 
.form-group select:focus, 
.form-group textarea:focus {
    border-color: #3498db;
    background-color: #fff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15);
}

.error-text {
    color: #e74c3c;
    font-size: 0.8rem;
    margin-top: 5px;
    font-weight: 500;
}

.form-actions {
    display: flex;
    gap: 15px;
    margin-top: 30px;
}

.btn-save {
    flex: 2;
    background: #3498db;
    color: white;
    padding: 13px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1rem;
    transition: all 0.3s;
}

.btn-back {
    flex: 1;
    background: #95a5a6;
    color: white;
    padding: 13px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s;
}

.btn-save:hover { 
    background: #2980b9; 
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.btn-back:hover { 
    background: #7f8c8d; 
}

/* ==========================================================================
   PHẦN 2: STYLE CHO MODAL (GIỮ NGUYÊN NHƯ CŨ)
   ========================================================================== */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(3px);
}

.modal-content {
    background: white;
    padding: 30px;
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    animation: modalAppear 0.3s ease-out;
}
/* Container bao quanh ảnh preview */
.poster-preview-wrapper {
    margin-top: 12px;
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-start; /* Căn trái */
    align-items: center;
}

/* Style cho tấm hình thumbnail */
.img-thumbnail {
    width: 100px;               /* Thu nhỏ kích thước lại theo ý bạn */
    height: 140px;              /* Giữ tỉ lệ chuẩn của poster phim (2:3) */
    object-fit: cover;          /* Giúp ảnh không bị méo khi kích thước gốc khác tỉ lệ */
    border-radius: 6px;         /* Bo góc nhẹ cho hiện đại */
    border: 2px solid #e0e0e0;  /* Viền xám nhạt */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Đổ bóng nhẹ cho ảnh nổi bật */
    transition: transform 0.3s ease, border-color 0.3s ease;
    background-color: #f8f9fa;
}

/* Hiệu ứng khi rê chuột vào ảnh */
.img-thumbnail:hover {
    transform: scale(1.05);     /* Phóng to nhẹ khi hover */
    border-color: #007bff;      /* Đổi màu viền sang xanh dương */
    cursor: zoom-in;
}
@keyframes modalAppear {
    from { transform: translateY(-30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ==========================================================================
   PHẦN 3: ĐỘ MẠNH MẬT KHẨU (NEW)
   ========================================================================== */
.strength-meter {
    margin-top: 8px;
    padding: 5px;
    background: #f8f9fa;
    border-radius: 4px;
}

.meter-bg {
    height: 6px;
    background: #e9ecef;
    border-radius: 3px;
    overflow: hidden;
}

.meter-fill {
    height: 100%;
    transition: width 0.4s ease, background-color 0.4s ease;
}

.strength-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    margin-top: 6px;
}

.text-center {
     text-align: center; 
}
/* ==========================================================================
   PHẦN 4: RESPONSIVE CHO FORM & MODAL (NEW)
   ========================================================================== */

/* --- Dành cho Tablet & Laptop nhỏ (< 1024px) --- */
@media screen and (max-width: 1023px) {
    .user-form-container {
        max-width: 90%; /* Form rộng ra vì không còn sidebar cố định */
        padding: 25px;
        margin: 20px auto;
    }
}

/* --- Dành cho Mobile (< 740px) --- */
@media screen and (max-width: 739px) {
    .user-form-container {
        width: 95%;
        padding: 20px 15px;
        margin: 15px auto;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* Giảm bóng đổ cho nhẹ máy */
    }

    .user-form-container h2 {
        font-size: 1.2rem;
        margin-bottom: 20px;
    }

    /* ❗ QUAN TRỌNG: Chuyển 2 cột thành 1 cột trên Mobile */
    .form-row {
        flex-direction: column; 
        gap: 0; /* Bỏ gap của row vì đã xếp dọc */
    }

    .form-group {
        margin-bottom: 15px;
    }

    .form-group label {
        font-size: 0.85rem;
    }

    .form-group input, 
    .form-group select, 
    .form-group textarea {
        padding: 10px; /* Input nhỏ lại xíu cho cân đối */
        font-size: 16px; /* ❗ Chống auto-zoom trên iOS khi focus vào input */
    }

    /* Điều chỉnh các nút bấm */
    .form-actions {
        flex-direction: column; /* Nút Save và Back xếp chồng lên nhau */
        gap: 10px;
    }

    .btn-save, .btn-back {
        width: 100%;
        padding: 12px;
        flex: none; /* Bỏ flex cũ để chiếm 100% width */
    }

    /* Poster preview cho mobile */
    .poster-preview-wrapper {
        justify-content: center; /* Căn giữa ảnh poster trên mobile */
    }

    .img-thumbnail {
        width: 80px;  /* Nhỏ lại một chút trên điện thoại */
        height: 112px;
    }

    /* Modal trên mobile */
    .modal-content {
        width: 95%;
        padding: 20px;
    }
}

/* Tinh chỉnh cho màn hình cực nhỏ (iPhone 5/SE cũ) */
@media screen and (max-width: 375px) {
    .user-form-container h2 {
        font-size: 1.1rem;
    }
}.update-user-wrapper {
    background-color: #ffffff;
    max-width: 700px; /* Tăng nhẹ chiều rộng để Grid thoáng hơn */
    margin: 30px auto;
    padding: 40px;
    border-radius: 15px;
    border-top: 6px solid #f39c12; /* Màu cam Edit */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.update-user-wrapper h2 {
    color: #2c3e50;
    font-size: 1.8rem;
    margin-bottom: 5px;
    text-align: center;
    font-weight: 800;
}

.update-subtitle {
    text-align: center;
    color: #95a5a6;
    margin-bottom: 35px;
    font-size: 0.95rem;
}

/* --- Grid Hệ Thống --- */
.update-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Chia đôi form */
    gap: 20px 25px; /* Khoảng cách giữa các ô */
}

.update-field {
    display: flex;
    flex-direction: column;
}

/* Class này giúp ô Email, Địa chỉ, Mật khẩu chiếm trọn chiều ngang */
.full-width {
    grid-column: span 2;
}

.update-field label {
    font-weight: 700;
    margin-bottom: 8px;
    color: #34495e;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Style chung cho Input, Select và Textarea */
.update-field input, 
.update-field select, 
.update-field textarea {
    padding: 13px 15px;
    border: 1px solid #dcdde1;
    border-radius: 8px;
    background-color: #fcfcfc;
    font-size: 0.95rem;
    color: #2c3e50;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    font-family: inherit;
}

/* Riêng cho ô Địa chỉ */
.update-field textarea {
    min-height: 90px;
    resize: vertical;
}

/* Hiệu ứng khi nhấn vào ô nhập liệu */
.update-field input:focus, 
.update-field select:focus, 
.update-field textarea:focus {
    background-color: #fff;
    border-color: #f39c12;
    outline: none;
    box-shadow: 0 0 0 4px rgba(243, 156, 18, 0.15);
    transform: translateY(-1px);
}

/* Style cho dropdown Role */
.update-field select {
    cursor: pointer;
    appearance: none; /* Xóa icon mặc định để custom nhẹ */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%237f8c8d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 40px;
}

.error-msg {
    color: #e74c3c;
    font-size: 0.8rem;
    margin-top: 6px;
    font-weight: 500;
}

/* --- Nút Bấm --- */
.update-actions {
    margin-top: 40px;
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    border-top: 1px solid #eee;
    padding-top: 25px;
}

.btn-submit-update {
    background-color: #f39c12;
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-submit-update:hover {
    background-color: #e67e22;
    box-shadow: 0 5px 15px rgba(230, 126, 34, 0.4);
    transform: translateY(-2px);
}

.btn-go-back {
    background-color: #f1f2f6;
    color: #7f8c8d;
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-go-back:hover {
    background-color: #dfe4ea;
    color: #2f3542;
}
/* ==========================================================================
    PHẦN BỔ SUNG: RESPONSIVE CHO UPDATE USER (GRID SYSTEM)
    ========================================================================== */

/* --- 1. VÙNG TABLET (Từ 740px đến 1023px) --- 
   👉 Tăng kích thước font và padding để chữ không bị lọt thỏm so với Mobile
*/
@media screen and (min-width: 740px) and (max-width: 1023px) {
    .update-user-wrapper {
        max-width: 85%; /* Nới rộng form ra vì Tablet màn hình to hơn Mobile */
        padding: 45px 35px;
        margin: 25px auto;
    }

    .update-user-wrapper h2 {
        font-size: 1.7rem; /* Tiêu đề to rõ */
    }

    .update-subtitle {
        font-size: 1rem; /* Subtitle to hơn Mobile một chút */
        margin-bottom: 30px;
    }

    .update-form-grid {
        gap: 20px 30px; /* Khoảng cách giữa các ô rộng rãi */
    }

    .update-field label {
        font-size: 0.95rem; /* Tăng size nhãn để dễ đọc */
        margin-bottom: 10px;
    }

    .update-field input, 
    .update-field select, 
    .update-field textarea {
        padding: 15px 18px; /* Ô nhập liệu "mập" hơn, dễ chạm tay */
        font-size: 1.05rem;  /* Chữ to rõ, không bị lí nhí */
    }

    .btn-submit-update, 
    .btn-go-back {
        padding: 14px 35px;
        font-size: 1.1rem; /* Nút bấm to, uy tín */
    }
}

/* --- 2. VÙNG MOBILE (Dưới 740px) --- 
   👉 Giữ nguyên logic 1 cột, nhưng kích thước tinh chỉnh cho màn hình hẹp
*/
@media screen and (max-width: 739px) {
    .update-user-wrapper {
        width: 95%;
        padding: 25px 15px;
        margin: 15px auto;
        border-top-width: 4px;
    }

    .update-user-wrapper h2 {
        font-size: 1.4rem;
    }

    .update-subtitle {
        margin-bottom: 25px;
        font-size: 0.85rem;
    }

    /* Chuyển Grid từ 2 cột về 1 cột dọc */
    .update-form-grid {
        grid-template-columns: 1fr; 
        gap: 15px;
    }

    .full-width {
        grid-column: span 1;
    }

    .update-field label {
        font-size: 0.85rem;
    }

    .update-field input, 
    .update-field select, 
    .update-field textarea {
        padding: 12px;
        font-size: 16px; /* Chống auto-zoom trên iOS */
    }

    .update-actions {
        flex-direction: column-reverse;
        margin-top: 30px;
        padding-top: 20px;
        gap: 10px;
    }

    .btn-submit-update, 
    .btn-go-back {
        width: 100%;
        padding: 13px;
        justify-content: center;
        display: flex;
        font-size: 1rem;
    }
}

/* Tinh chỉnh cho điện thoại cực nhỏ (iPhone SE, etc.) */
@media screen and (max-width: 400px) {
    .update-user-wrapper {
        padding: 20px 10px;
    }
    
    .update-user-wrapper h2 {
        font-size: 1.25rem;
    }
}/* ==========================================================
   ADMIN SEAT CONTAINER
   ========================================================== */
.admin-seat-container {
    padding: 30px;
    background: #f4f6f9;
    min-height: 100vh;
    font-family: 'Inter', sans-serif;
}

/* ==========================================================
   HEADER & FILTERS
   ========================================================== */
.seat-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    flex-wrap: wrap;
    gap: 20px;
}

.seat-list-header h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #2d3436;
    margin: 0;
}

.filter-controls {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-group label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #636e72;
    text-transform: uppercase;
}

.filter-group select {
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #dfe6e9;
    font-size: 0.9rem;
    cursor: pointer;
    background: white;
    min-width: 150px;
}

.filter-group select:disabled {
    background: #ecf0f1;
    cursor: not-allowed;
}

/* ==========================================================
   ACTION BUTTONS
   ========================================================== */
.action-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
}

.action-buttons .btn {
    height: 44px;
    min-width: 140px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-init { background: #10b981; color: white; }
.btn-delete { background: #ef4444; color: white; }

.action-buttons .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* ==========================================================
   SEAT MAP AREA
   ========================================================== */
.seat-content-area {
    margin-top: 25px;
}

.seat-map-wrapper {
    background: white;
    padding: 50px 40px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.screen {
    width: 70%;
    margin-bottom: 50px;
    background: #dfe6e9;
    padding: 12px;
    border-radius: 50px;
    text-align: center;
    font-weight: 700;
    color: #636e72;
    letter-spacing: 5px;
    font-size: 0.75rem;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}

/* ==========================================================
   GRID & SEAT ITEMS
   ========================================================== */
.admin-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    align-items: center;
}

.seat-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.row-name {
    width: 30px;
    font-weight: 800;
    color: #b2bec3;
    font-size: 0.9rem;
}

.seat-item {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    border: 1px solid rgba(0,0,0,0.05);
}

.seat-item:hover {
    transform: scale(1.15);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
    z-index: 2;
}

/* ==========================================================
   SEAT STATES (MÀU SẮC)
   ========================================================== */
.seat-standard { background: #ced6e0; color: #2f3542; }
.seat-vip { background: #ffc107; color: #2f3542; }
.seat-couple { background: #e84393; color: white; width: 90px; }
.seat-maintenance { background: #2d3436; color: #ff7675; border: 2px dashed #ff7675; }
.seat-booked { background: #636e72; color: #dfe6e9; cursor: help; }

/* ==========================================================
   SEAT LEGEND (BẢNG CHÚ THÍCH)
   ========================================================== */
.seat-legend {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #f1f2f6;
    flex-wrap: wrap;
    width: 100%;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #636e72;
}

.seat-item.small {
    width: 24px;
    height: 24px;
    font-size: 0;
    cursor: default;
}

.seat-item.small:hover {
    transform: none;
    box-shadow: none;
}

/* ==========================================================
   MODAL & UTILS
   ========================================================== */
.loading-text, .empty-text {
    text-align: center;
    margin-top: 80px;
    color: #b2bec3;
}

.modal-body-info { padding: 5px 0; }
.info-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.status-badge.booked {
    background: #ffeaa7;
    color: #d63031;
    padding: 5px 12px;
    border-radius: 6px;
    font-weight: 800;
    font-size: 11px;
    display: inline-block;
    margin-bottom: 10px;
}

.warning-text {
    color: #d63031;
    font-size: 0.8rem;
    background: #fff5f5;
    padding: 10px;
    border-radius: 6px;
    border-left: 4px solid #d63031;
}

.text-center { text-align: center; }
.mb-3 { margin-bottom: 1rem; }/* --- BIẾN MÀU SẮC CHỦ ĐẠO --- */
:root
{
    --primary: #4f46e5;
    --primary-hover: #4338ca;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --bg-main: #f8fafc;
    --bg-card: #ffffff;
    --bg-dark: #0f172a;
    --text-main: #1e293b;
    --text-muted: #64748b;
    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    --radius: 14px;
}

/* --- TỔNG THỂ --- */
.admin-ticket-container
{
    padding: 2rem;
    background-color: var(--bg-main);
    min-height: 100vh;
    color: var(--text-main);
    font-family: 'Inter', system-ui, sans-serif;
}

.admin-ticket-header h2
{
    font-size: 1.75rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 2.5rem;
    background: linear-gradient(to right, var(--primary), #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* --- TOOLBAR BỘ LỌC --- */
.top-toolbar
{
    background: var(--bg-card);
    padding: 1.5rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid #e2e8f0;
    margin-bottom: 2rem;
}

.filter-selection-grid
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.filter-group
{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-group label
{
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
}

.filter-group select
{
    height: 48px;
    padding: 0 1rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    font-size: 0.95rem;
    transition: all 0.2s;
    cursor: pointer;
}

.filter-group select:focus
{
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
    outline: none;
}

/* --- NÚT CHUYỂN TAB --- */
.view-mode-switch
{
    background: #f1f5f9;
    padding: 4px;
    border-radius: 10px;
    display: inline-flex;
    gap: 4px;
}

.view-mode-switch button
{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.6rem 1.5rem;
    border: none;
    background: transparent;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.view-mode-switch button.active
{
    background: #fff;
    color: var(--primary);
    box-shadow: var(--shadow-sm);
}

/* --- STATS CARDS --- */
.ticket-stats-cards
{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card
{
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 1.5rem;
    border-radius: var(--radius);
    color: white;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover
{
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.stat-card.blue
{
    background: linear-gradient(135deg, #6366f1, #4f46e5);
}

.stat-card.green
{
    background: linear-gradient(135deg, #10b981, #059669);
}

.stat-card.yellow
{
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.stat-card span
{
    font-size: 2.25rem;
    font-weight: 800;
    display: block;
    line-height: 1;
}

.stat-card p
{
    margin: 4px 0 0 0;
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0.9;
    display: flex;
    align-items: center;
}

/* --- TABLE SECTION --- */
.search-bar
{
    position: relative;
    margin-bottom: 1.5rem;
}

.search-icon-input
{
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.search-bar input
{
    width: 100%;
    padding: 12px 15px 12px 45px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.95rem;
    transition: all 0.2s;
}

.search-bar input:focus
{
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.05);
}

.admin-table
{
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.admin-table th
{
    background: #f8fafc;
    padding: 1.25rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    border-bottom: 2px solid #f1f5f9;
}

.admin-table td
{
    padding: 1.25rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.9rem;
}

.status-badge
{
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.status-badge.used
{
    background: #dcfce7;
    color: #15803d;
}

.status-badge.pending
{
    background: #fef3c7;
    color: #b45309;
}

/* --- VISUAL MONITOR (SƠ ĐỒ GHẾ) --- */
.visual-monitor-container
{
    background: #ffffff;
    padding: 4rem 2rem;
    border-radius: 24px;
    box-shadow: var(--shadow-lg);
    text-align: center;
    border: 1px solid #f1f5f9;
}

.screen-bar-admin
{
    width: 60%;
    height: 8px;
    background: #e2e8f0;
    margin: 0 auto 4rem;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.monitor-grid
{
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.seat-row-admin
{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
}

.row-label-admin
{
    width: 30px;
    color: #94a3b8;
    font-weight: 800;
    font-size: 0.85rem;
}

.seat-item-admin
{
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: default;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid #e2e8f0;
}

.seat-num-text
{
    font-size: 10px;
    font-weight: 700;
    z-index: 2;
}

.seat-icon-bg
{
    position: absolute;
    opacity: 0.2;
    z-index: 1;
}

/* TRẠNG THÁI GHẾ ADMIN */
.seat-item-admin.empty
{
    background-color: #f8fafc;
    color: #cbd5e1;
}

.seat-item-admin.reserved
{
    background-color: var(--warning);
    color: white;
    border-color: #d97706;
}

.seat-item-admin.sold
{
    background-color: var(--danger);
    color: white;
    border-color: #dc2626;
    cursor: pointer;
}

.seat-item-admin.used
{
    background-color: var(--success);
    color: white;
    border-color: #059669;
}

.seat-item-admin.Couple
{
    width: 90px;
}

.seat-item-admin.sold:hover
{
    transform: scale(1.15) translateY(-5px);
    z-index: 10;
    box-shadow: 0 8px 15px rgba(239, 68, 68, 0.3);
}

.customer-mininame
{
    position: absolute;
    bottom: 2px;
    font-size: 7px;
    font-weight: 400;
    text-transform: uppercase;
    max-width: 90%;
    overflow: hidden;
}

/* --- CHÚ THÍCH (LEGEND) --- */
.map-legend
{
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px dashed #e2e8f0;
}

.legend-item
{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.legend-item .box
{
    width: 18px;
    height: 18px;
    border-radius: 4px;
}

.box.empty
{
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.box.reserved
{
    background: var(--warning);
}

.box.sold
{
    background: var(--danger);
}

.box.used
{
    background: var(--success);
}

/* --- UTILS --- */
.loader
{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    color: var(--text-muted);
    font-weight: 600;
    gap: 12px;
}

.spin-icon
{
    animation: spin 1s linear infinite;
}

@keyframes spin
{
    from
    {
        transform: rotate(0deg);
    }

    to
    {
        transform: rotate(360deg);
    }
}

.empty-msg
{
    text-align: center;
    padding: 4rem;
    background: #fff;
    border-radius: var(--radius);
    color: var(--text-muted);
    border: 1px dashed #cbd5e1;
}

.checkin-btn
{
    padding: 6px 16px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.checkin-btn:hover
{
    background: var(--primary-hover);
}

.disabled-btn
{
    padding: 6px 16px;
    background: #f1f5f9;
    color: #94a3b8;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: not-allowed;
}/* Container bọc ngoài cùng */
.booking-detail-wrapper {
    background-color: #f1f5f9;
    min-height: 100vh;
    padding: 40px 20px;
    display: flex;
    justify-content: center;
}

/* Khung nội dung chính max 800px */
.booking-detail-container {
    width: 100%;
    max-width: 800px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    overflow: hidden;
    padding: 30px;
}

/* Header & Title */
.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.detail-title-section {
    text-align: center;
    margin-bottom: 30px;
    border-bottom: 2px dashed #e2e8f0;
    padding-bottom: 20px;
}

/* Các phần nội dung dọc */
.detail-section {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f1f5f9;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    color: #475569;
    margin-bottom: 15px;
}

.section-body p {
    margin: 8px 0;
    color: #1e293b;
}

/* Highlight thông tin */
.movie-name-highlight {
    font-size: 1.3rem;
    font-weight: 700;
    color: #0f172a;
}

.time-highlight {
    color: #2563eb;
    font-weight: 600;
}

/* Ghế ngồi kiểu badge */
.seat-list-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.seat-badge {
    background: #eff6ff;
    color: #1e40af;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #bfdbfe;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Dịch vụ bắp nước */
.food-item-line {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
}

/* Phần tổng tiền cuối cùng */
.total-card-final {
    background: #f8fafc;
    padding: 20px;
    border-radius: 12px;
    border: none;
}

.footer-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.main-total {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 2px solid #e2e8f0;
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
}

.amount-highlight {
    color: #10b981;
}

.memo-text {
    font-family: monospace;
    font-weight: 600;
    color: #64748b;
}

/* Status colors */
.status-tag {
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
}
.status-tag.completed{ 
    background: #dcfce7; 
    color: #15803d; 
}
.status-tag.cancelled { 
    background: #fee2e2; 
    color: #b91c1c; 
}

/* =========================
   RESPONSIVE - 1024px
========================= */
@media (max-width: 1024px) {

    .booking-detail-container {
        max-width: 720px;
        padding: 25px;
    }

    .detail-title-section {
        padding-bottom: 15px;
    }

    .main-total {
        font-size: 1.3rem;
    }

}


/* =========================
   RESPONSIVE - 768px
========================= */
@media (max-width: 768px) {

    .booking-detail-wrapper {
        padding: 30px 15px;
    }

    .booking-detail-container {
        max-width: 100%;
        border-radius: 12px;
        padding: 20px;
    }

    .detail-header {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }

    .detail-title-section {
        text-align: left;
    }

    .section-title {
        font-size: 1rem;
    }

    .movie-name-highlight {
        font-size: 1.15rem;
    }

    .footer-row {
        flex-direction: column;
        gap: 6px;
    }

    .main-total {
        font-size: 1.25rem;
    }

}


/* =========================
   RESPONSIVE - 480px
========================= */
@media (max-width: 480px) {

    .booking-detail-wrapper {
        padding: 20px 10px;
    }

    .booking-detail-container {
        padding: 16px;
        border-radius: 10px;
    }

    .section-title {
        font-size: 0.95rem;
        gap: 6px;
    }

    .section-body p {
        font-size: 0.9rem;
    }

    .movie-name-highlight {
        font-size: 1rem;
    }

    .seat-badge {
        font-size: 0.8rem;
        padding: 5px 10px;
    }

    .food-item-line {
        flex-direction: column;
        gap: 4px;
        font-size: 0.9rem;
    }

    .main-total {
        font-size: 1.1rem;
    }

    .status-tag {
        font-size: 0.7rem;
        padding: 4px 10px;
    }

}/* Container tổng thể */
.movie-genre-wrapper {
    padding: 20px;
    background-color: #f8f9fa;
    min-height: 100vh;
}

/* Header và Subtitle */
.admin-header-flex {
    margin-bottom: 20px;
    border-left: 5px solid #e50914; /* Màu đỏ thương hiệu Cinema */
    padding-left: 15px;
}

.column-header {
    margin: 0;
    color: #333;
    font-size: 24px;
    font-weight: bold;
}

.subtitle {
    color: #666;
    font-size: 14px;
}

/* Table styling */
.table-container {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    overflow: hidden;
}

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

.assignment-table th {
    background-color: #343a40;
    color: #fff;
    padding: 15px;
    text-align: left;
    font-weight: 500;
}

.assignment-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}

/* Thông tin phim (Poster + Title) */
.movie-item-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.table-poster {
    width: 50px;
    height: 70px;
    object-fit: cover;
    border-radius: 4px;
    background-color: #ddd;
}

.title-text {
    font-weight: 600;
    color: #222;
    margin-bottom: 4px;
}

.status-badge {
    font-size: 11px;
    padding: 2px 8px;
    background: #e9ecef;
    border-radius: 10px;
    color: #495057;
    display: inline-block;
}

/* Grid checkbox thể loại */
.genre-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}

.genre-checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    padding: 5px;
    transition: background 0.2s;
    border-radius: 4px;
}

.genre-checkbox-item:hover {
    background-color: #f1f3f5;
}

.genre-checkbox-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.genre-name {
    color: #444;
}

/* Nút Lưu trên từng dòng */
.btn-save-row {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-save-row:hover {
    background-color: #218838;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.text-center {
    text-align: center;
}

/* Trạng thái đang tải */
.loading {
    text-align: center;
    padding: 50px;
    font-size: 18px;
    color: #666;
}/* Container tổng thể */
.movie-actor-wrapper {
    background: #ffffff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    margin-top: 20px;
    position: relative; /* Bổ sung để các phần tử con căn chỉnh chuẩn */
}

.column-header {
    font-size: 22px;
    color: #1a202c;
    margin-bottom: 25px;
    font-weight: 700;
    border-left: 5px solid #e53e3e; 
    padding-left: 15px;
}

/* Table Style */
.assignment-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 12px;
}

.assignment-table th {
    padding: 12px 15px;
    color: #718096;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.05em;
    border-bottom: 2px solid #edf2f7;
    text-align: left;
}

/* Poster và thông tin phim */
.movie-info-cell {
    display: flex;
    align-items: center;
    gap: 15px;
}

.table-poster {
    width: 50px;
    height: 70px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.title-text {
    font-weight: 600;
    color: #2d3748;
    font-size: 14px;
}

/* CUSTOM SELECT CONTAINER */
.custom-select-container {
    position: relative;
    width: 100%;
    min-width: 250px;
}

/* Ô hiển thị chính */
.select-box {
    padding: 12px 16px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #4a5568;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.select-box:hover {
    border-color: #3182ce;
    background: #f7fafc;
}

/* Hiệu ứng mũi tên xoay */
.arrow {
    font-size: 10px;
    transition: transform 0.3s;
    color: #a0aec0;
}
.arrow.up { transform: rotate(180deg); color: #3182ce; }

/* DROPDOWN LIST */
.dropdown-list {
    position: absolute;
    top: calc(100% + 8px); 
    left: 0;
    right: 0;
    z-index: 999; /* Đảm bảo luôn nằm trên các hàng khác */
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    padding: 12px;
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Ô Search bên trong dropdown */
.search-input {
    width: 100%;
    padding: 10px 14px;
    margin-bottom: 12px;
    border: 1px solid #edf2f7;
    border-radius: 8px;
    outline: none;
    background: #f8fafc;
    font-size: 13px;
    box-sizing: border-box; /* Quan trọng: để padding không làm tràn ô input */
}

/* Danh sách Option - Fix 5 dòng */
.options-list {
    /* Mỗi dòng .option-item cao 40px, 5 dòng là 200px */
    max-height: 200px; 
    overflow-y: auto;
    padding-right: 5px;
}

/* Tùy chỉnh thanh cuộn xịn */
.options-list::-webkit-scrollbar { width: 6px; }
.options-list::-webkit-scrollbar-track { background: #f7fafc; }
.options-list::-webkit-scrollbar-thumb { 
    background: #cbd5e0; 
    border-radius: 10px; 
}
.options-list::-webkit-scrollbar-thumb:hover { background: #a0aec0; }

.option-item {
    height: 40px; /* Chiều cao cố định để tính scroll cho chuẩn */
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 13px;
    border-radius: 6px;
    transition: 0.2s;
    margin-bottom: 2px;
    white-space: nowrap; /* Không cho tên diễn viên xuống dòng */
    overflow: hidden;
    text-overflow: ellipsis; /* Tên dài quá thì hiện dấu ... */
    color: #2d3748;
}

.option-item:hover {
    background: #edf2f7;
}

.option-item.selected {
    background: #ebf8ff;
    color: #2b6cb0;
    font-weight: 600;
}

.option-item input[type="checkbox"] {
    accent-color: #3182ce;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Nút Lưu */
.btn-save-row {
    background: #48bb78;
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 6px rgba(72, 187, 120, 0.2);
}

.btn-save-row:hover {
    background: #38a169;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(72, 187, 120, 0.3);
}

.text-center { text-align: center; }

/* Trạng thái khi mở Dropdown để hàng đó nổi bật hơn (tùy chọn) */
.assignment-table tr:has(.dropdown-list) {
    background-color: #fcfcfc;
}