display: none !important;
}
/* === START: Thêm CSS cho cài đặt mới === */
.btn-setting.active {
    color: #14f195;
    border-color: #14f195;
}
.btn-setting-group {
    display: -webkit-flex;
    display: flex;
}
.btn-setting-group > .btn-setting {
    -webkit-flex-grow: 1;
    flex-grow: 1;
    -webkit-justify-content: center;
    justify-content: center;
    text-align: center;
}
.btn-setting-group > .btn-setting + .btn-setting {
    margin-left: 10px;
}
/* === END: CSS cho cài đặt mới === */
/* === BẮT ĐẦU: CSS cho Settings Panel (dynamic hub) === */

/* Nội dung settings có thể scroll */
#settings-panel-content {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}
#settings-panel-content::-webkit-scrollbar {
    display: none;
}

/* Footer settings panel */
#settings-panel-footer {
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: 10px;
}

/* Title header động */
#settings-panel-title {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Settings list footer flex */
#settings-list-footer {
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

/* === KẾT THÚC: CSS cho Settings Panel === */

.list-manager-item {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 95%;
    padding: 15px;
    margin-bottom: 10px;
    background: #0e1a22;
    border: 4px solid transparent;
    color: #ccc;
    font-size: 18px;
    outline: none;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.list-manager-item.focus {
    outline: none !important;
    border-color: #14f195 !important;
    background: #18252e;
    color: #fff;
}

.list-manager-item span {
    -webkit-flex-grow: 1;
    flex-grow: 1;
}

/* Kiểu dáng cho công tắc (toggle switch) */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    cursor: pointer;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #333;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 28px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #14f195;
}

.focus .slider {
    box-shadow: 0 0 5px #14f195;
}

input:checked + .slider:before {
    -webkit-transform: translateX(22px);
    transform: translateX(22px);
}

#btnSaveLists {
    justify-content: center;
    background-color: #1f2b33;
}
#btnSaveLists.focus {
    background-color: #14f195;
    color: #000;
    font-weight: bold;
}
#genre-checkbox-container::-webkit-scrollbar {
    display: none; /* Ẩn scrollbar cho trình duyệt WebKit (Tizen) */
}

/* Kiểu dáng cho danh sách lựa chọn của dropdown tùy chỉnh */
.dropdown-options {
    margin-top: 5px;
    border: 2px solid #14f195;
}
#discover-fields-container::-webkit-scrollbar {
    display: none;
}

.discover-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5px; /* Giảm padding dọc */
    margin-bottom: 5px; /* Giảm khoảng cách */
    height: 35px; /* Đặt chiều cao cố định */
    background-color: #0e1a22;
    border: 4px solid transparent;
    outline: none;
}

.discover-row.focus {
    border-color: #14f195;
}

.discover-row label {
    flex-shrink: 0;
    margin-right: 15px;
    color: #ccc;
    font-size: 15px; /* Giảm kích thước font */
    width: 30%; 
}

.discover-row input {
    flex-grow: 1;
    width: 60%;
    padding: 8px;
    background: #04101a;
    border: none;
    color: #fff;
    font-size: 15px; /* Giảm kích thước font */
    outline: none;
}

.discover-row.focus input {
    background-color: #182e2e;
}
.discover-row input.input-error {
    background-color: #58181F !important; /* Màu nền đỏ sậm */
    border-color: #E53935 !important; /* Thêm viền đỏ cho rõ hơn */
    color: #fff !important;
}
.popup-option-item {
    background: none;    
    padding: 12px 15px;
	border: none;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    width: 100%; /* Đảm bảo button chiếm đủ chiều rộng */
}

.popup-option-item.focus {
	border: none !important;
	outline: none !important;
    background-color: rgba(255, 255, 255, 0.1);    border-left-color: #14f195;
}
.popup-option-item .checkmark-icon {
    width: 20px;
    height: 20px;
    margin-right: 15px;
    fill: #555;
    flex-shrink: 0;
}
.popup-option-item.selected .checkmark-icon {
    fill: #14f195;
}
/* Reset style cho các button trong popup */
#popup-options-container::-webkit-scrollbar {
  display: none;
}
/* -- BẮT ĐẦU: Hiển thị và định dạng lại nút AND/OR -- */

/* 1. Hiển thị lại cụm nút và định dạng cơ bản */
#popup-logic-toggle {
    display: none; /* HIỂN THỊ LẠI CỤM NÚT */
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    padding: 3px;
    margin-bottom: 15px;
}

/* 2. Style cho các nút con bên trong */
#popup-logic-toggle .btn-setting {
    flex-grow: 1; /* Chia đều không gian */
    background: transparent;
    border: none;
    color: #999; /* Màu chữ khi không được chọn */
    font-weight: bold;
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

/* 3. Style cho nút đang được chọn (.active) */
#popup-logic-toggle .btn-setting.active {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* 4. Style cho nút đang được focus (di chuyển remote tới) */
#popup-logic-toggle .btn-setting.focus {
    background-color: rgba(255, 255, 255, 0.25);
    color: #fff;
    outline: none;
}

/* -- KẾT THÚC -- */

/* 3. Tinh chỉnh lại khoảng cách các mục trong danh sách cho phù hợp */
.popup-option-item {
    padding-top: 12px;
    padding-bottom: 12px;
}

/* -- KẾT THÚC: Điều chỉnh -- */
/* -- BẮT ĐẦU: Giao diện Popup Lựa chọn Tối giản (Đã sửa lỗi) -- */

/* 1. Thay đổi toàn bộ hộp thoại popup */
#selection-popup.popup-box {
    max-width: 450px;
    background: rgba(20, 20, 20, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: none;
    border-radius: 8px;
    padding: 20px; /* Thêm padding chung */
}

/* 2. Đồng bộ hóa kiểu chữ của tiêu đề */
#selection-popup h4 {
    color: #aaa;
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: left;
    margin: 0 0 10px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* 3. CHỈ ẨN nút OK/Cancel */
#selection-popup .popup-actions {
    display: none !important;
}

/* 4. Định dạng lại danh sách và các mục con */
#popup-options-container {
    border: none;
    height: 30vh;
}

/* 5. Style cho các mục lựa chọn (sử dụng button) */
.popup-option-item {
    background: none;
    border: none;
    padding: 12px 15px 12px 45px;
    margin: 0;
    font: inherit;
    color: #ccc;
    text-align: left;
    cursor: pointer;
    width: 100%;
    border-radius: 4px;
    position: relative;
    font-weight: normal;
    transition: color 0.2s ease, background-color 0.2s ease;
}

/* 6. Hiệu ứng khi focus (di chuyển remote tới) */
.popup-option-item.focus {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    outline: none !important;
    border: none !important; /* Đảm bảo không có viền lạ */
}

/* 7. Kiểu dáng cho mục đã được chọn */
.popup-option-item.selected {
    font-weight: bold;
    color: #fff;
}

/* 8. Định vị và hiển thị checkmark */
.popup-option-item .checkmark-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    fill: #14f195;
    transition: opacity 0.2s ease;
}

.popup-option-item.selected .checkmark-icon {
    opacity: 1;
}

/* -- KẾT THÚC: Giao diện Popup -- */
#popup-options-container {
    border-top: none !important;
    border-bottom: none !important;
}
/* -- BẮT ĐẦU: Tinh chỉnh giao diện tiêu đề khu vực trong Popup -- */

#popup-options-container h5 {
    background: none !important; /* Loại bỏ màu nền xanh */
    padding: 15px 15px 5px 15px !important; /* Điều chỉnh lại khoảng đệm */
    margin-top: 10px !important; /* Thêm khoảng cách với mục phía trên */
    color: #888 !important; /* Chuyển màu chữ thành xám mờ */
    font-size: 14px !important; /* Giảm kích thước chữ */
    font-weight: bold;
    text-transform: uppercase; /* Viết hoa để phân biệt */
}

/* Xóa khoảng đệm trên của nhóm đầu tiên để giao diện gọn gàng */
#popup-options-container h5:first-child {
    margin-top: 0 !important;
}

/* -- KẾT THÚC -- */
/* === BẮT ĐẦU ĐIỀU CHỈNH: Nền sáng CHỈ dành cho logo nhà sản xuất === */

/* 1. Container chính giờ chỉ có nhiệm vụ định vị và sắp xếp */
#logo-container {
    position: absolute;
    bottom: -320px; 
    right: 10px;
    z-index: 30;
    pointer-events: none;
    
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}

/* 2. Áp dụng nền "viên thuốc" CHỈ cho logo nhà sản xuất */
#production-company-logo {
    height: 50px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;

    /* Thêm các thuộc tính nền vào đây */
    background-color: #fff;
    padding: 5px;
    
    
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    
    /* Cần thêm flex để căn giữa logo bên trong nền mới */
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}
#production-company-logo:empty {
    display: none;
}
/* 3. Logo nhà cung cấp chỉ cần các thuộc tính cơ bản */
#backdrop-provider-logo {
    height: 60px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}



/* 5. Style chung cho thẻ img bên trong cả hai logo */
#production-company-logo img,
#backdrop-provider-logo img {
    height: 100%;
    width: auto;
    max-width: 120px;
    filter: none; /* Bỏ drop-shadow */
}

/* 6. Quy tắc hiển thị chung không đổi */
#wrap.details-visible #production-company-logo,
#wrap.details-visible #backdrop-provider-logo {
    opacity: 1;
}

/* === KẾT THÚC ĐIỀU CHỈNH === */
/* === BẮT ĐẦU ĐIỀU CHỈNH: Tạo lớp CSS cuộn chung === */

/* 1. Style cho KHUNG CHỨA (Container) */
#focus-info-panel .overview,
#detailPlot {
    overflow: hidden; /* Quan trọng: Luôn ẩn phần nội dung bị tràn */
    display: block; /* Đảm bảo là block element */
}

/* 2. Giới hạn chiều cao riêng cho từng khu vực */
#focus-info-panel .overview {
    max-height: 5.6em; /* 4 dòng cho tóm tắt phim/series */
}
#detailPlot {
    max-height: 4.2em; /* 3 dòng cho tóm tắt tập phim */
}

/* 3. Style cho NỘI DUNG CUỘN (Content) */
.overview-scroller,
.plot-scroller {
    transition: transform 1s linear;
    transform: translateY(0);
}

/* === KẾT THÚC ĐIỀU CHỈNH === */
/* === BẮT ĐẦU: CSS cho Popup Tiến Trình (Đã sửa lỗi Highlight) === */

/* 1. Định dạng container chính (không thay đổi) */
#progress-popup-container {
    background: rgba(20, 20, 20, 0.85);
    color: #fff;
    padding: 20px;
    font-size: 22px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    pointer-events: auto;
}

/* 2. Định dạng tiêu đề h4 (không thay đổi) */
#progress-popup-container h4 {
    color: #aaa;
    margin: 0 0 15px 0;
    font-weight: bold;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 3. Container của thanh trượt */
#progress-slider-container {
    width: 100%;
    padding: 10px;
    cursor: pointer;
    outline: none;
    border-radius: 4px;
    box-sizing: border-box;
    transition: background-color 0.2s ease-in-out;
    display: flex;
    align-items: center;
}

/* 4. SỬA LỖI HIGHLIGHT: Ghi đè quy tắc toàn cục */
#progress-slider-container.focus {
    outline: none !important; /* QUAN TRỌNG: Gỡ bỏ viền xanh */
    border: none !important;  /* Đảm bảo không có viền nào khác */
    background-color: rgba(255, 255, 255, 0.1);
}

/* 5. Cho thanh trượt chiếm phần lớn không gian */
#progress-slider-bar {
    flex-grow: 1;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    position: relative;
}

/* Các thành phần còn lại giữ nguyên */
#progress-slider-fill {
    height: 100%;
    background-color: #E50914;
    border-radius: 4px;
    width: 0%;
}

#progress-slider-thumb {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.15s ease-out;
}

#progress-slider-container.focus #progress-slider-thumb {
    transform: translate(-50%, -50%) scale(1.2);
}

#progress-slider-label {
    flex-shrink: 0;
    width: 55px;
    margin-left: 20px;
    text-align: right;
    font-size: 16px;
    font-weight: bold;
    color: #14f195;
    text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}

/* === KẾT THÚC: CSS cho Popup === */

/* === START: CSS cho các view trong List Manager Panel === */
.lm-sub-view {
    display: none; /* Mặc định ẩn tất cả các view con */
}
/* === END: CSS cho các view trong List Manager Panel === */

/* === Folder / Collapsible group === */
.folder-header {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    width: 100%;
    padding: 15px;
    margin-bottom: 6px;
    background: #0a1a24;
    border: 4px solid transparent;
    border-left: 4px solid #14f195;
    color: #14f195;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    outline: none;
    box-sizing: border-box;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.folder-header.focus {
    border-color: #14f195;
    background: #18252e;
    color: #fff;
}
.folder-header svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    margin-right: 12px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    -webkit-transition: transform 0.2s;
    transition: transform 0.2s;
}
.folder-header.open svg.folder-arrow {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
.folder-body {
    display: none;
    padding-left: 15px;
    border-left: 2px solid #163042;
    margin-left: 10px;
    margin-bottom: 8px;
}
.folder-body.open {
    display: block;
}