/* --- TẢI FONT BE VIETNAM PRO --- */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* =========================================
   1. GLOBAL & FONT OVERRIDE
   ========================================= */

/* Ép font cho toàn bộ wrapper và các thẻ con bên trong để ghi đè Theme */
.thx-cinema-wrapper, 
.thx-cinema-wrapper h1, .thx-cinema-wrapper h2, .thx-cinema-wrapper h3, .thx-cinema-wrapper h4,
.thx-cinema-wrapper p, .thx-cinema-wrapper span, .thx-cinema-wrapper a, .thx-cinema-wrapper div,
.thx-cinema-wrapper button, .thx-cinema-wrapper input, .thx-cinema-wrapper textarea, .thx-cinema-wrapper label {
    font-family: 'Be Vietnam Pro', sans-serif !important;
}

/* Container chính của ứng dụng */
.thx-cinema-wrapper {
    display: flex;
    flex-direction: column;
    position: relative;
    max-width: 100%;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    color: #fff;
}

/* --- HEADER TEXT LOGO --- */
.thx-brand-text { 
    font-size: 24px; 
    font-weight: 800; 
    letter-spacing: 0.5px; 
    color: #e50914; 
    font-family: 'Be Vietnam Pro', sans-serif !important; 
    text-shadow: 0 2px 4px rgba(0,0,0,0.5); 
    /* Đã bỏ text-transform: uppercase */
}

/* --- INFO BOX (Khung thông tin phim) --- */
.thx-info-box {
    background: transparent;
    padding: 0;
    margin-bottom: 60px;
    display: flex;
    align-items: flex-start;
    gap: 30px; /* Khoảng cách ảnh và nội dung */
    color: #fff;
    font-family: 'Be Vietnam Pro', sans-serif !important;
}

/* Nút Xem Phim (Scroll) */
.thx-scroll-btn {
    background: #e50914;
    color: white;
    padding: 6px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    transition: background 0.2s, transform 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    user-select: none;
    margin-left: 15px;
}
.thx-scroll-btn:hover {
    background: #ff0f1f;
    transform: scale(1.05);
}

/* --- FOOTER --- */
.thx-footer {
    width: 100%;
    padding: 30px 20px;
    background: #000;
    border-top: 1px solid #222;
    text-align: center;
    color: #555;
    font-size: 13px;
    margin-top: auto; 
    font-family: 'Be Vietnam Pro', sans-serif !important;
}
.thx-footer a { color: #777; text-decoration: none; }
.thx-footer a:hover { color: #fff; text-decoration: underline; }

/* Responsive Text Logo */
@media (max-width: 850px) {
    .thx-brand-text { font-size: 18px; }
}


/* =========================================
   2. PLAYER LAYOUT (KHUNG CHIẾU PHIM)
   ========================================= */

.thx-col-player {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

.thx-video-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; 
    background: #000;
}
@supports not (aspect-ratio: 16 / 9) { .thx-video-container { padding-bottom: 56.25%; height: 0; } }

/* Video Instance */
.thx-player-instance {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    z-index: 1;
    transition: opacity 1s ease;
    pointer-events: none;
}
.thx-player-instance.is-visible { opacity: 1; z-index: 15; }

/* Các lớp phủ (Curtain, Intro) */
.thx-black-curtain { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; z-index: 10; pointer-events: none; }
.thx-intro-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; background-color: #000; z-index: 20; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 2s ease-in-out, visibility 2s; }
.thx-intro-layer.is-active { opacity: 1; visibility: visible; pointer-events: auto; }


/* =========================================
   3. SIDEBAR & THẢO LUẬN (DISCUSSION)
   ========================================= */

/* Sidebar Overlay */
.thx-col-sidebar {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40px; 
    height: 100%;
    background: transparent;
    border-left: none;
    display: flex;
    flex-direction: column;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 50; 
    overflow: hidden;
    pointer-events: none; 
}

.thx-col-sidebar.is-expanded {
    width: 320px;
    background: rgba(20, 20, 20, 0.95);
    backdrop-filter: blur(5px);
    box-shadow: -5px 0 20px rgba(0,0,0,0.5);
    border-left: 1px solid rgba(255,255,255,0.1);
    pointer-events: auto; 
}

@media (max-width: 768px) {
    .thx-col-sidebar {
        position: relative;
        width: 100%;
        height: 40px;
        background: #1a1a1a;
        border-top: 1px solid #333;
        transition: height 0.3s ease;
        right: auto; top: auto; bottom: auto;
        pointer-events: auto;
    }
    .thx-col-sidebar.is-expanded { width: 100%; height: 400px; }
    .thx-sidebar-toggle { flex-direction: row; }
}

.thx-sidebar-content { display: none; flex-direction: column; height: 100%; width: 100%; }
.thx-col-sidebar.is-expanded .thx-sidebar-content { display: flex; }
.thx-col-sidebar.is-expanded .thx-sidebar-toggle { display: none; }

/* Header Sidebar */
.thx-notes-header {
    padding: 15px;
    background: rgba(30,30,30,0.9);
    border-bottom: 1px solid #333;
    color: #fff;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.thx-notes-close { cursor: pointer; font-size: 24px; line-height: 1; color: #888; }
.thx-notes-close:hover { color: #fff; }

/* Danh sách thảo luận */
.thx-notes-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    color: #ddd;
    font-size: 13px;
    background: rgba(0,0,0,0.3);
}
.thx-notes-list::-webkit-scrollbar { width: 6px; }
.thx-notes-list::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }

/* --- ITEM BÌNH LUẬN --- */
.thx-note-item { 
    background: transparent;
    padding: 10px 0; 
    margin-bottom: 5px; 
    border-radius: 0; 
    position: relative; 
    border-bottom: 1px solid rgba(255,255,255,0.05);
    display: flex;
    gap: 10px;
    transition: opacity 0.2s;
}

/* Thread cấp 2 (Thụt lề) */
.thx-discussion-child {
    padding-left: 45px;
    background: rgba(255,255,255,0.02);
    border-bottom: none;
}

/* Tin nhắn đã bị Xóa mềm */
.thx-note-item.thx-is-deleted .thx-note-content {
    color: #777;
    font-style: italic;
}
.thx-note-item.thx-is-deleted { opacity: 0.8; }
.thx-deleted-msg { color: #888; font-style: italic; font-size: 13px; }

/* Avatar & Meta */
.thx-note-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.thx-note-body { flex: 1; }
.thx-note-meta { display: flex; justify-content: space-between; margin-bottom: 2px; align-items: center; }
.thx-note-author { font-size: 13px; font-weight: 700; color: #e50914; }
.thx-note-time-at { font-size: 11px; color: #aaa; background: rgba(255,255,255,0.1); padding: 1px 4px; border-radius: 3px; margin-left: 5px; }
.thx-note-content { font-size: 13px; color: #ddd; line-height: 1.4; word-break: break-word; }

/* Actions (Reply, Delete, Restore) */
.thx-note-actions { margin-top: 4px; font-size: 11px; color: #888; display: flex; gap: 10px; align-items: center; }
.thx-note-reply { cursor: pointer; font-weight: 600; color: #bbb; }
.thx-note-reply:hover { text-decoration: underline; color: #fff; }

.thx-note-delete { color: #555; font-size: 16px; cursor: pointer; line-height: 1; }
.thx-note-delete:hover { color: #ff4d4d; }

.thx-note-restore { cursor: pointer; font-size: 14px; color: #4CAF50; margin-left: 10px; font-weight: bold; }
.thx-note-restore:hover { color: #81C784; }

.thx-note-delete.is-forever { color: #ff4d4d; font-size: 14px; opacity: 1; }
.thx-note-delete.is-forever:hover { color: #ff0000; transform: scale(1.2); }

/* --- KHU VỰC NHẬP LIỆU --- */
.thx-notes-input-area {
    padding: 15px;
    background: rgba(30,30,30,0.9);
    border-top: 1px solid #333;
    position: relative;
}

/* Thanh trạng thái đang Reply */
.thx-reply-status {
    background: #222;
    color: #aaa;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 4px 4px 0 0;
    margin-bottom: -4px;
    border: 1px solid #444;
    border-bottom: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.thx-reply-name { color: #e50914; font-weight: 700; }
.thx-reply-cancel { cursor: pointer; font-weight: bold; }
.thx-reply-cancel:hover { color: #fff; }

.thx-notes-input-area textarea {
    width: 100%;
    height: 50px;
    background: #222;
    border: 1px solid #444;
    color: #fff;
    padding: 10px;
    border-radius: 4px;
    resize: none;
    font-family: inherit;
    font-size: 13px;
    margin-bottom: 8px;
    box-sizing: border-box;
}
.thx-notes-input-area textarea:focus { outline: none; border-color: #666; background: #333; }

.thx-notes-input-area button {
    width: 100%;
    background: #e50914;
    color: white;
    border: none;
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 700;
}
.thx-notes-input-area button:hover { background: #ff0f1f; }
.thx-notes-input-area button:disabled { background: #555; cursor: not-allowed; }


/* =========================================
   4. ĐIỀU KHIỂN & TRẠNG THÁI PLAYER
   ========================================= */

.thx-progress-track, .thx-btn-fullscreen, .thx-sidebar-toggle {
    opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; pointer-events: none;
}
.thx-cinema-wrapper:hover .thx-progress-track,
.thx-cinema-wrapper:hover .thx-btn-fullscreen,
.thx-cinema-wrapper:hover .thx-sidebar-toggle {
    opacity: 1; visibility: visible; pointer-events: auto;
}
.thx-cinema-wrapper.thx-idle .thx-progress-track,
.thx-cinema-wrapper.thx-idle .thx-btn-fullscreen,
.thx-cinema-wrapper.thx-idle .thx-sidebar-toggle {
    opacity: 0; visibility: hidden; pointer-events: none;
}

.thx-sidebar-toggle {
    width: 100%; height: 100%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(0, 0, 0, 0.4);
}
@media (min-width: 769px) {
    .thx-sidebar-toggle {
        height: 60px; width: 40px; position: absolute; top: 50%; right: 0; transform: translateY(-50%); border-radius: 4px 0 0 4px; border: 1px solid rgba(255,255,255,0.2); border-right: none;
    }
}
.thx-sidebar-toggle:hover { background: #e50914; border-color: #e50914; }
.thx-toggle-icon { font-size: 20px; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }

.thx-progress-track { position: absolute; bottom: 0; left: 0; width: 100%; height: 5px; background: rgba(100, 100, 100, 0.3); z-index: 25; pointer-events: none; }
.thx-video-container:hover .thx-progress-track { opacity: 1; }
.thx-progress-buffer { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: rgba(255, 255, 255, 0.6); z-index: 1; }
.thx-progress-fill { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: #e50914; z-index: 2; }

.thx-btn-fullscreen { position: absolute; bottom: 15px; right: 15px; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 25; }

.thx-status-bar { background: #222; color: #bbb; padding: 8px 15px; font-size: 12px; border-top: 1px solid #333; font-weight: 400; }
.thx-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); display: flex; align-items: center; justify-content: center; z-index: 30; }
.thx-overlay-content { text-align: center; color: white; }
.thx-btn-enter { background: #e50914; color: white; border: none; padding: 12px 30px; font-size: 18px; font-weight: 700; border-radius: 4px; cursor: pointer; margin-top: 15px; }


/* =========================================
   5. FORM ĐĂNG NHẬP (DARK MODE)
   ========================================= */

.thx-cinema-wrapper.thx-login-mode {
    background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://assets.nflxext.com/ffe/siteui/vlv3/f841d4c7-10e1-40af-bcae-07a3f8dc141a/f6d7434e-d6de-4185-a6d4-c77a2d08737b/VN-en-20220502-popsignuptwoweeks-perspective_alpha_website_medium.jpg');
    background-size: cover; background-position: center; min-height: 500px; display: flex; align-items: center; justify-content: center;
}

.thx-login-container { background: rgba(0, 0, 0, 0.85); padding: 40px 50px; border-radius: 8px; width: 100%; max-width: 450px; box-shadow: 0 10px 30px rgba(0,0,0,0.8); text-align: left; }
.thx-login-content h2 { color: #fff; margin: 0 0 20px 0; font-size: 28px; font-weight: 700; }
.thx-login-desc { color: #bbb; margin-bottom: 30px; font-size: 14px; line-height: 1.5; font-weight: 400; }
.thx-form-group { margin-bottom: 20px; }
.thx-form-group label { display: block; color: #8c8c8c; font-size: 13px; margin-bottom: 5px; font-weight: 500; }
.thx-input { width: 100%; background: #333; border: 1px solid #333; border-radius: 4px; padding: 12px 15px; color: #fff; font-size: 15px; transition: 0.2s; box-sizing: border-box; }
.thx-input:focus { background: #444; border-color: #e50914; outline: none; }

.thx-social-login-area { margin-bottom: 15px; text-align: center; }
.thx-social-login-area a { text-decoration: none; }

.thx-btn-login { width: 100%; background: #e50914; color: #fff; border: none; padding: 12px; border-radius: 4px; font-size: 16px; font-weight: 700; cursor: pointer; margin-top: 10px; transition: 0.2s; }
.thx-btn-login:hover { background: #f40612; }

.thx-form-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; font-size: 13px; color: #b3b3b3; }
.thx-form-actions a { color: #b3b3b3; text-decoration: none; }
.thx-form-actions a:hover { text-decoration: underline; }

.thx-register-link { margin-top: 30px; color: #737373; font-size: 15px; }
.thx-register-link a { color: #fff; text-decoration: none; font-weight: 500; }
.thx-register-link a:hover { text-decoration: underline; }

@media (max-width: 500px) { .thx-login-container { padding: 30px 20px; } }


/* =========================================
   6. DANH SÁCH NGƯỜI XEM (VIEWER LIST)
   ========================================= */

.thx-viewer-section { margin-top: 30px; margin-bottom: 50px; border-top: 1px solid #333; padding-top: 20px; }
.thx-viewer-title { font-size: 18px; margin-bottom: 20px; color: #ddd; border-left: 3px solid #e50914; padding-left: 10px; font-weight: 700; }
.thx-viewer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; }

.thx-viewer-card { 
    background: #222; 
    padding: 10px; 
    border-radius: 6px; 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    transition: background 0.2s; 
    border: 1px solid transparent; 
}

.thx-viewer-card.is-watching { background: rgba(30, 50, 30, 0.5); border-color: rgba(0, 255, 0, 0.2); }
.thx-viewer-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.thx-viewer-info { display: flex; flex-direction: column; }
.thx-viewer-name { font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.thx-viewer-status { font-size: 11px; color: #888; display: flex; align-items: center; gap: 5px; font-weight: 500; }

.thx-viewer-status::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.thx-viewer-card.is-watching .thx-viewer-status::before { background-color: #2ecc71; box-shadow: 0 0 5px #2ecc71; }
.thx-viewer-card.is-watching .thx-viewer-status { color: #2ecc71; }
.thx-viewer-card.is-lobby .thx-viewer-status::before { background-color: #f1c40f; }


/* =========================================
   7. ZOOM NOTIFICATION BANNER & MODAL
   ========================================= */

/* --- TOP BANNER (15 phút trước kết thúc) --- */
.thx-zoom-banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 58, 138, 0.95) 100%);
    border-bottom: 2px solid #3b82f6;
    padding: 10px 20px;
    z-index: 28;
    box-sizing: border-box;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    animation: thxSlideDown 0.4s ease-out;
}

@keyframes thxSlideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.thx-zoom-banner-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
    color: #e2e8f0;
    font-weight: 500;
    text-align: center;
    flex-wrap: wrap;
}

.thx-zoom-icon {
    font-size: 16px;
    display: inline-flex;
    align-items: center;
}

.thx-zoom-banner-text {
    line-height: 1.4;
}

.thx-zoom-link {
    color: #60a5fa !important;
    font-weight: 700;
    text-decoration: underline !important;
    margin-left: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(59, 130, 246, 0.2);
    transition: all 0.2s ease;
    display: inline-block;
}

.thx-zoom-link:hover {
    color: #ffffff !important;
    background: #2563eb;
    text-decoration: none !important;
    transform: translateY(-1px);
}

/* --- ZOOM DISCUSSION MODAL (Khi kết thúc phim) --- */
.thx-zoom-modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: thxFadeIn 0.3s ease-out;
}

@keyframes thxFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.thx-zoom-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(6px);
}

.thx-zoom-modal-dialog {
    position: relative;
    z-index: 2;
    background: linear-gradient(160deg, #1e1e24 0%, #111115 100%);
    border: 1px solid rgba(59, 130, 246, 0.4);
    border-radius: 12px;
    padding: 35px 30px;
    max-width: 440px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(37, 99, 235, 0.2);
    box-sizing: border-box;
    animation: thxPopIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

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

.thx-zoom-modal-close {
    position: absolute;
    top: 12px;
    right: 15px;
    font-size: 24px;
    line-height: 1;
    color: #888;
    cursor: pointer;
    transition: color 0.2s;
}

.thx-zoom-modal-close:hover {
    color: #fff;
}

.thx-zoom-modal-icon {
    font-size: 40px;
    margin-bottom: 12px;
}

.thx-zoom-modal-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 0 12px 0 !important;
    letter-spacing: -0.3px;
}

.thx-zoom-modal-desc {
    font-size: 14px;
    color: #cbd5e1;
    line-height: 1.6;
    margin: 0 0 24px 0;
    font-weight: 400;
}

.thx-zoom-modal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff !important;
    font-weight: 700;
    font-size: 15px;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none !important;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
    transition: all 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}

.thx-zoom-modal-btn:hover {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.6);
    transform: translateY(-2px);
    color: #ffffff !important;
}

@media (max-width: 600px) {
    .thx-zoom-banner { padding: 8px 12px; }
    .thx-zoom-banner-content { font-size: 12px; }
    .thx-zoom-modal-dialog { padding: 25px 20px; }
    .thx-zoom-modal-title { font-size: 18px !important; }
    .thx-zoom-modal-desc { font-size: 13px; }
    .thx-zoom-modal-btn { font-size: 14px; padding: 10px 18px; }
}