@media (min-width: 980px) {
    .mobile-only { display: none !important; }
    .desktop-only { display: block !important; }
    
    /* Ép Sidebar về bên phải và nội dung chính bên trái */
    .container { 
        width: 980px !important; 
        margin: 0 auto; 
        display: block; 
        overflow: visible; 
    }
    .left-content { 
        float: left !important; 
        width: 670px !important; 
    }
    .right-content { 
        float: right !important; 
        width: 300px !important; 
        display: block !important; 
    }
}

/* Màn hình nhỏ (Mobile & Tablet dưới 980px) */
@media (max-width: 979px) {
    .desktop-only { display: none !important; }
    .mobile-only { display: block !important; }

    /* Nội dung tràn 100% màn hình */
    .left-content, .right-content { 
        float: none !important; 
        width: 100% !important; 
    }
	#top-slide {
        width: auto;
        height: auto;
    }
	#player {
        width: 100%;
        height: 230px;
    }
    .container {
        width: 100%!important;
        padding: 0!important;
    }
	#top-slide li img {
        width: 100%;
    }
    /* LOGO MOBILE CĂN GIỮA TUYỆT ĐỐI */
    #header {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        position: relative;
        height: 25px;
        background: #7713F1;
        border-bottom: 2px solid #5300B9;
    }
    #header .logo { margin: 0 auto !important; display: block !important; }
    #header .logo img { width: 110px; height: auto; display: block; }

    /* Hamburger góc trái, Search góc phải */
    .btn-humber {
        position: absolute !important;
        left: 15px !important;
        top: 50% !important;
        transform: translateY(-50%);
        font-size: 24px;
        color: #fff;
        z-index: 100;
        cursor: pointer;
    }
    .btn-search {
        position: absolute !important;
        right: 15px !important;
        top: 50% !important;
        transform: translateY(-50%);
        font-size: 22px;
        color: #000;
        z-index: 100;
        cursor: pointer;
    }

    /* FIX MENU MOBILE TRƯỢT VÀ XỔ XUỐNG */
    #main-menu-mobile {
        position: fixed;
        width: 260px;
        background: #34495e;
        bottom: 0; top: 0; left: 0;
        z-index: 100000;
        transition: transform 0.3s ease-in-out;
        visibility: hidden; /* Ẩn khi chưa expanded */
        transform: translateX(-100%);
        overflow-y: auto;
    }
    #main-menu-mobile.expanded {
        visibility: visible;
        transform: translateX(0);
        box-shadow: 5px 0 15px rgba(0,0,0,0.5);
    }
    #main-menu-mobile ul li {
        width: 100%;
        /*display: block;*/
        float: none !important;
    }
    #main-menu-mobile ul li a {
        color: #E8E8E8;
        padding: 15px 20px;
        display: block;
        font-size: 16px;
        border-bottom: 1px solid #2c3e50;
    }

    /* Menu con Mobile mặc định ẩn cho slideToggle hoạt động */
    #main-menu-mobile .sub-menu {
        display: none; 
        background: #2c3e50;
        list-style: none;
        padding: 0;
    }
    #main-menu-mobile .sub-menu li a {
        padding-left: 40px;
        font-size: 14px;
        background: rgba(0,0,0,0.1);
    }

    /* Thanh User Đăng nhập/Đăng ký trên Mobile */
    #menu-user1 {
        display: flex;
        justify-content: center;
        padding: 10px 0;
        background: #222;
        margin: 0;
    }
    #menu-user1 li { list-style: none; margin: 0 5px; float: none !important; }
    #menu-user1 li a { padding: 5px 10px; font-size: 12px; border-radius: 4px; display: block; }

    .container { width: 100% !important; padding: 0 10px !important; box-sizing: border-box; }
}

/* --- 2. HỆ THỐNG SEARCH BAR MOBILE --- */
.mobile-search-bar {
    height: 50px; width: 100%; background: #7713F1;
    left: 0; position: absolute; top: 0; z-index: 1000;
    display: flex; align-items: center;
}
.mobile-search-bar #keyword, 
.mobile-search-bar #keyword-mobile {
    flex: 1; border: none; background: transparent;
    color: #fff; padding: 0 15px; font-size: 18px; outline: none;
}
.close-button { width: 50px; text-align: center; color: #fff; font-size: 22px; cursor: pointer; }

/* --- 3. LƯỚI PHIM (FILM GRID) --- */
@media(max-width: 639px) {
    .list-film .film-item { width: 31%; margin: 1% !important; float: left; }
    .list-film .film-item img { height: 160px; object-fit: cover; width: 100%; }
}
@media(max-width: 479px) {
    .list-film .film-item { width: 48%; margin: 1% !important; }
    .list-film .film-item img { height: 200px; }
}

/* --- 4. TIỆN ÍCH CHUNG --- */
.hide { display: none !important; }
#overlay_menu {
    position: fixed;
    background: rgba(0, 0, 0, 0.7);
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 99999;
}
.overlow-hidden { overflow: hidden !important; }