html,
body{
    width:100%;
    height:100dvh;
    min-height:100dvh;
    overflow:hidden;
    background:#eef2f6;
}

/* Panel cố định phía trên */
#top-panel{
    position:sticky;
    top:0;
    z-index:1050;

    background:#e9f1f7;
    border:1px solid #dbe3ee;
    border-radius:14px 14px 0 0;
    overflow:hidden;
    margin-bottom:0;
}

/* Hàng Search */
#top-panel .search-row{
    background:#f8fafc;
    border-top:1px solid #e5ebf3;
    border-bottom:1px solid #e5ebf3;
    padding:10px 14px;
}

/* ==================== STRM LAYOUT ==================== */

#strm-view{
    height:100dvh;
    max-height:100dvh;
    overflow:hidden;
}

/* Card STRM kéo theo chiều cao màn hình */
#strm-view > .card{
    display:flex;
    flex-direction:column;
}

/* Dòng 1: HEADER STRM cố định */
#strm-view > .card > .card-header{
    position:sticky;
    top:0;
    z-index:20;
}

/* Thân card */
#strm-view > .card > .card-body{
    min-height:0;
    padding:0;
}

/* Không để Bootstrap tạo scroll phụ */
#strm-view > .card > .card-body > .table-responsive{
    overflow:visible;
}

/* Chỉ vùng danh sách phim được cuộn */
#movie-list{
    height:calc(100dvh - 93px);
    overflow-y:auto;
    overflow-x:auto;
    background:#ffffff;
    border-left:1px solid #dbe3ee;
    border-right:1px solid #dbe3ee;
    border-bottom:1px solid #dbe3ee;
    border-radius:0 0 14px 14px;
    padding-bottom:0;
}

/* Dòng 2: HEADER BẢNG cố định */
#movie-list thead{
    position:sticky;
    top:0;
    z-index:10;
}

#movie-list thead th{
    position:sticky;
    top:0;
    background:#d7e0ea;
    color:#334155;
    z-index:10;
    border-bottom:1px solid #dbe3ee;
    font-weight:600;
    font-size:14px;
}

/* Dữ liệu phim */
#movie-list tbody tr{
    background:#ffffff;
}

#movie-list tbody tr:nth-child(even){
    background:#f5f7fb;
}

.stat-box{
    width:92px;
    min-width:92px;
    padding:4px 8px;
    border-radius:10px;
    text-align:center;
    color:#fff;
    line-height:1.1;
    box-shadow:0 2px 6px rgba(0,0,0,0.15);
}

.stat-box .label{
    font-size:11px;
    font-weight:700;
}

.stat-box .value{
    font-size:14px;
    font-weight:700;
}

.stat-video{
    background:#198754;
}

.stat-strm{
    background:#2f3b52;
}


/* ===== User panel compact ===== */
.user-panel{
    width:200px;
    padding:6px 8px;
    border:1px solid #e5e7eb;
    border-radius:12px;
    background:#ffffff;
    box-shadow:0 2px 6px rgba(0,0,0,.05);

    display:flex;
    flex-direction:column;
    align-items:center;
}

.user-top{
    width:100%;
    display:flex;
    justify-content:center;
    margin-bottom:4px;
}

.user-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    padding:3px 10px;
    border-radius:999px;
    background:#f8fafc;
    border:1px solid #e5e7eb;
    font-size:13px;
    font-weight:600;
    color:#334155;
    min-width:90px;
}

.user-bottom{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:6px;
    width:100%;
}

.user-bottom .btn{
    min-width:78px;
    padding:2px 8px;
    font-size:12px;
    font-weight:600;
    border-radius:999px;
    line-height:1.2;
}


/* ===== Header compact ===== */
.header-bar{
    max-width:900px;
    width:100%;
    padding-top:4px;
    padding-bottom:4px;
    margin-bottom:10px !important;
}

.header-bar h2{
    margin:0;
    font-size:1.25rem;
    font-weight:700;
    line-height:1.2;
}


/* ===== Khung chính của trang ===== */
.main-container{
    max-width:1500px;
    margin:0 auto;
    padding:12px 16px;
}





/* =========================================================
   HEADER - FINAL CLEAN
   Tiêu đề giữa Header
   Nguồn Phim + Login/Admin ở đáy Header
   ========================================================= */

.container-fluid > .d-flex.justify-content-between.align-items-center.mb-2 {
    display: flex !important;
    align-items: stretch !important;
    min-height: 50px !important;
}

/* Tiêu đề: nằm chính giữa chiều cao Header */
.container-fluid > .d-flex.justify-content-between.align-items-center.mb-2 > h2.mb-0 {
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.2 !important;
}

/* Cụm bên phải: nằm sát đáy Header */
.container-fluid > .d-flex.justify-content-between.align-items-center.mb-2 > .d-flex.align-items-center.gap-2 {
    align-self: flex-end !important;
    align-items: center !important;
    margin-bottom: 0 !important;
    height: 38px !important;
    transform: none !important;
}

/* Nguồn Phim */
.container-fluid > .d-flex.justify-content-between.align-items-center.mb-2 .source-menu-row {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    height: 38px !important;
}

/* Auth */
.container-fluid > .d-flex.justify-content-between.align-items-center.mb-2 #auth-area {
    display: flex !important;
    align-items: center !important;
    height: 38px !important;
    flex-shrink: 0;
}

/* Nút Nguồn Phim / Login / Admin */
.container-fluid > .d-flex.justify-content-between.align-items-center.mb-2 #btn-video-source,
.container-fluid > .d-flex.justify-content-between.align-items-center.mb-2 #btn-login,
.container-fluid > .d-flex.justify-content-between.align-items-center.mb-2 #user-info > button {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    align-self: center !important;
}

/* Admin menu */
#auth-area .user-panel {
    width: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    display: block;
}

.admin-dropdown-menu {
    min-width: 180px;
    z-index: 10001;
}

.admin-dropdown-menu .dropdown-item {
    padding: 8px 14px;
    font-weight: 600;
}

.admin-dropdown-menu .dropdown-item:hover {
    background-color: #f1f5f9;
}

/* Không để CSS user-panel cũ ảnh hưởng Header */
#auth-area .user-badge,
#auth-area .user-bottom {
    display: none !important;
}

/* =========================================================
   F5 NAS - GIỮ ỔN ĐỊNH KÍCH THƯỚC KHI SCROLLBAR XUẤT HIỆN
   Không thay đổi logic NAS / STRM / API.
   ========================================================= */

/* Giữ nguyên bề rộng trang khi scrollbar body thay đổi trạng thái */
html {
    scrollbar-gutter: auto;
}

/* Khu vực danh sách NAS luôn giữ chỗ cho scrollbar */
#nasVideoList .nas-video-table-scroll {
    scrollbar-gutter: stable;
}

/* =========================================================
   NAS VIDEO - HEADER CỐ ĐỊNH / CHỈ DANH SÁCH CUỘN
   ========================================================= */

/*
   Khi đang ở trang Phim NAS:
   - Không cuộn toàn trang
   - Header Phim NAS đứng yên
   - Chọn thể loại + Search đứng yên
   - Dòng Thư Mục / Phim / Dung lượng / Phát đứng yên
   - Chỉ danh sách phim bên dưới được cuộn
*/

#nas-view {
    height: calc(100dvh - 100px);
    overflow: hidden;
}

#nas-view > .card {
    height: 100%;
    overflow: hidden;
}

#nas-view .card-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Toàn bộ khu vực NAS */
#nasVideoList {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;

    border: 1px solid #dbe3ee;
    border-radius: 0 0 12px 12px;
    background: #ffffff;

    display: flex;
    flex-direction: column;
}

/* =========================================================
   HEADER BẢNG
   Không có thanh cuộn
   ========================================================= */

#nasVideoList .nas-video-table-header {
    flex: 0 0 auto;
    overflow: hidden;
    background: #d7e0ea;
    border-bottom: 1px solid #cbd5e1;
}

#nasVideoList .nas-video-table-header table {
    width: 100%;
    table-layout: fixed;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

#nasVideoList .nas-video-table-header th {
    background: #d7e0ea !important;
    color: #334155;
    font-weight: 600;
    border-bottom: 0;
}

/* =========================================================
   DANH SÁCH PHIM
   CHỈ KHU VỰC NÀY CÓ THANH CUỘN
   ========================================================= */

#nasVideoList .nas-video-table-scroll {
    flex: 1 1 auto;
    min-height: 0;

    overflow-y: auto;
    overflow-x: hidden;

    background: #ffffff;
}

#nasVideoList .nas-video-table-scroll table {
    width: 100%;
    table-layout: fixed;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

#nasVideoList .nas-video-table-scroll tbody td {
    background: #ffffff;
}

/* =========================================================
   KHỚP ĐỘ RỘNG 4 CỘT HEADER + BODY
   ========================================================= */

#nasVideoList .nas-video-table-header th:nth-child(1),
#nasVideoList .nas-video-table-scroll td:nth-child(1) {
    width: auto;
}

#nasVideoList .nas-video-table-header th:nth-child(2),
#nasVideoList .nas-video-table-scroll td:nth-child(2) {
    width: auto;
}

#nasVideoList .nas-video-table-header th:nth-child(3),
#nasVideoList .nas-video-table-scroll td:nth-child(3) {
    width: 140px;
}

#nasVideoList .nas-video-table-header th:nth-child(4),
#nasVideoList .nas-video-table-scroll td:nth-child(4) {
    width: 110px;
}

/* Không cho Bootstrap .table-responsive tạo thanh cuộn phụ */
#nasVideoList .table-responsive {
    overflow: visible !important;
}


/* Chỉ bỏ 24px padding-bottom của container để loại thanh cuộn ngoài */
body .container-fluid.px-4.py-4{
    padding-bottom:0 !important;
}

/* =========================================================
   NAS CUSTOM VIDEO PLAYER
   ========================================================= */
#nasCustomPlayer {
    position: relative;
    width: 100%;
    background: #000;
    overflow: hidden;
}

/* Khung Video */
#nasCustomPlayer #nasVideoPlayer {
    display: block;
    width: 100%;
    height: auto;
    max-height: 72vh;
    background: #000;
    object-fit: contain;
}

/* Thanh điều khiển */
#nasCustomPlayer .nas-player-controls {
    display: flex;
    align-items: center;
    gap: 8px;

    width: 100%;
    min-height: 48px;
    padding: 7px 10px;

    background: #111827;
    border-top: 1px solid #374151;

    box-sizing: border-box;
}

/* Nút điều khiển */
#nasCustomPlayer .nas-player-btn {
    flex: 0 0 auto;

    width: 36px;
    height: 34px;

    padding: 0;
    border: 0;
    border-radius: 7px;

    background: transparent;
    color: #fff;

    font-size: 17px;
    line-height: 34px;
    text-align: center;

    cursor: pointer;
}

#nasCustomPlayer .nas-player-btn:hover {
    background: #374151;
}

/* Thanh âm lượng */
#nasCustomPlayer .nas-player-volume {
    flex: 0 0 75px;
    width: 75px;
    cursor: pointer;
}

/* Thanh tiến trình */
#nasCustomPlayer .nas-player-progress {
    flex: 1 1 auto;
    min-width: 80px;
    cursor: pointer;
}

/* Chọn tỷ lệ */
#nasCustomPlayer .nas-player-aspect {
    flex: 0 0 auto;

    height: 34px;
    padding: 0 8px;

    border: 1px solid #4b5563;
    border-radius: 7px;

    background: #1f2937;
    color: #fff;

    font-size: 13px;
    cursor: pointer;
}

#nasCustomPlayer .nas-player-aspect:hover {
    background: #374151;
}

/* Thông tin phim */
#nasVideoInfo {
    background: #111827;
}

/* Khi chọn tỷ lệ khung hình */
#nasCustomPlayer.aspect-16-9 #nasVideoPlayer {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    max-height: 72vh;
    object-fit: contain;
}

#nasCustomPlayer.aspect-4-3 #nasVideoPlayer {
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    max-height: 72vh;
    object-fit: contain;
}

#nasCustomPlayer.aspect-21-9 #nasVideoPlayer {
    width: 100%;
    aspect-ratio: 21 / 9;
    height: auto;
    max-height: 72vh;
    object-fit: contain;
}

#nasCustomPlayer.aspect-fit #nasVideoPlayer {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    max-height: 72vh;
    object-fit: contain;
}

/* Fullscreen: bỏ giới hạn chiều cao 72vh */
#nasCustomPlayer:fullscreen {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    background: #000;
}

#nasCustomPlayer:fullscreen #nasVideoPlayer {
    width: 100%;
    height: calc(100vh - 48px);
    max-height: none;
    background: #000;
    object-fit: contain;
}

#nasCustomPlayer:fullscreen .nas-player-controls {
    height: 48px;
    min-height: 48px;
}

/* Mobile / màn hình nhỏ */
@media (max-width: 768px) {
    #nasCustomPlayer .nas-player-controls {
        gap: 4px;
        padding: 6px;
    }

    #nasCustomPlayer .nas-player-volume {
        flex-basis: 55px;
        width: 55px;
    }

    #nasCustomPlayer .nas-player-btn {
        width: 32px;
        height: 32px;
        line-height: 32px;
    }

    #nasCustomPlayer .nas-player-aspect {
        max-width: 88px;
        font-size: 12px;
    }
}

/* =========================================================
   NAS FINAL PLAYER LAYOUT FIX
   ========================================================= */
/* Player bình thường */
#nasCustomPlayer {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #000;
    overflow: hidden;
}

/* Modal không tạo khoảng hở quanh Player */
#nasVideoModal .modal-content {
    margin: 0;
    padding: 0;
    background: #000 !important;
    border: 0;
}

#nasVideoModal .modal-body {
    margin: 0;
    padding: 0 !important;
    background: #000;
}

#nasVideoModal .modal-header {
    margin: 0;
    background: #111827;
}

/* Video */
#nasCustomPlayer #nasVideoPlayer {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #000;
}

/* =========================================================
   Aspect Ratio
   ========================================================= */

#nasCustomPlayer.aspect-16-9 #nasVideoPlayer {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    max-height: 72vh;
    object-fit: contain;
}

#nasCustomPlayer.aspect-4-3 #nasVideoPlayer {
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    max-height: 72vh;
    object-fit: contain;
}

#nasCustomPlayer.aspect-21-9 #nasVideoPlayer {
    width: 100%;
    aspect-ratio: 21 / 9;
    height: auto;
    max-height: 72vh;
    object-fit: contain;
}

#nasCustomPlayer.aspect-fit #nasVideoPlayer {
    width: 100%;
    height: auto;
    max-height: 72vh;
    object-fit: contain;
}

/* =========================================================
   FULLSCREEN
   ========================================================= */

#nasCustomPlayer:fullscreen {
    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100vh;

    max-width: none;
    max-height: none;

    margin: 0;
    padding: 0;

    background: #000;
    overflow: hidden;
}

/* Video chiếm toàn bộ vùng trên thanh điều khiển */
#nasCustomPlayer:fullscreen #nasVideoPlayer {
    display: block;

    width: 100vw;
    height: calc(100vh - 48px);

    max-width: none;
    max-height: none;

    margin: 0;
    padding: 0;

    background: #000;
    object-fit: contain;
}

/* Thanh điều khiển nằm sát đáy */
#nasCustomPlayer:fullscreen .nas-player-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    width: 100%;
    height: 48px;
    min-height: 48px;

    margin: 0;
    box-sizing: border-box;
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 768px) {
    #nasCustomPlayer:fullscreen #nasVideoPlayer {
        height: calc(100vh - 44px);
    }

    #nasCustomPlayer:fullscreen .nas-player-controls {
        height: 44px;
        min-height: 44px;
    }
}


/* =========================================================
   DEMO - FINAL ACCENT SKIN V1
   Dark Navy + Neon Accent
   Chỉ chỉnh màu/độ nổi - KHÔNG đổi layout
   ========================================================= */

.fshare-demo-feature-card {
    position: relative;
    background: #1E293B;
    box-shadow:
        0 5px 14px rgba(0, 0, 0, .22),
        inset 0 1px 0 rgba(255, 255, 255, .025);
}

/* FSHARE */
.fshare-demo-fshare {
    background: #1E293B;
    border-color: rgba(0, 98, 255, .70);
    box-shadow:
        0 5px 14px rgba(0, 98, 255, .10),
        inset 3px 0 0 #0062FF;
}

/* NAS */
.fshare-demo-nas {
    background: #1E293B;
    border-color: rgba(5, 150, 105, .70);
    box-shadow:
        0 5px 14px rgba(5, 150, 105, .10),
        inset 3px 0 0 #059669;
}

/* JELLYFIN */
.fshare-demo-jellyfin {
    background: #1E293B;
    border-color: rgba(99, 102, 241, .70);
    box-shadow:
        0 5px 14px rgba(99, 102, 241, .10),
        inset 3px 0 0 #6366F1;
}

/* Tiêu đề nhóm */
.fshare-demo-feature-title {
    color: #FFFFFF !important;
}

/* Các nút chức năng */
.fshare-demo-action {
    background: #172235;
    color: #FFFFFF;
    box-shadow:
        0 3px 8px rgba(0, 0, 0, .22),
        inset 0 1px 0 rgba(255, 255, 255, .025);
}

.fshare-demo-action-text {
    color: #FFFFFF !important;
}

/* Ô icon */
.fshare-demo-action-icon {
    color: #FFFFFF;
    background: #1E293B;
    box-shadow:
        0 3px 7px rgba(0, 0, 0, .25),
        inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* Accent FSHARE */
.fshare-demo-fshare .fshare-demo-action {
    border-color: rgba(0, 98, 255, .38);
}

.fshare-demo-fshare .fshare-demo-action-icon {
    border-color: rgba(0, 98, 255, .65);
    background: rgba(0, 98, 255, .14);
}

/* Accent NAS */
.fshare-demo-nas .fshare-demo-action {
    border-color: rgba(5, 150, 105, .38);
}

.fshare-demo-nas .fshare-demo-action-icon {
    border-color: rgba(5, 150, 105, .65);
    background: rgba(5, 150, 105, .14);
}

/* Accent JELLYFIN */
.fshare-demo-jellyfin .fshare-demo-action {
    border-color: rgba(99, 102, 241, .38);
}

.fshare-demo-jellyfin .fshare-demo-action-icon {
    border-color: rgba(99, 102, 241, .65);
    background: rgba(99, 102, 241, .14);
}

/* Hiệu ứng nổi nhẹ */
.fshare-demo-action:hover {
    transform: translateY(-2px);
    background: #1E293B;
    box-shadow:
        0 7px 14px rgba(0, 0, 0, .30),
        inset 0 1px 0 rgba(255, 255, 255, .04);
}

.fshare-demo-action:active {
    transform: translateY(0);
    box-shadow:
        0 2px 5px rgba(0, 0, 0, .25);
}

/* Welcome giữ cùng mặt nền */
.fshare-demo-welcome {
    background: #1E293B;
    border-color: #334155;
}


/* =========================================================
   DEMO - CỘT TRÁI / CỘT PHẢI / HOẠT ĐỘNG
   V1
   Chỉ giao diện - KHÔNG đổi layout tổng thể
   ========================================================= */

/* CỘT TRÁI */
.fshare-demo-left {
    background: #1E293B;
    border-color: #334155;
}

.fshare-demo-left-content {
    padding: 16px 14px;
}

.fshare-demo-title {
    color: #FFFFFF;
    border-bottom-color: #334155;
}

.fshare-demo-menu-group {
    margin-top: 10px;
}

.fshare-demo-menu-title {
    color: #FFFFFF;
}

.fshare-demo-menu-item {
    color: #94A3B8;
    border: 1px solid transparent;
    background: transparent;
    transition:
        background .12s ease,
        border-color .12s ease,
        transform .12s ease;
}

.fshare-demo-menu-item:hover {
    background: #172235;
    border-color: #334155;
    color: #FFFFFF;
    transform: translateX(2px);
}

.fshare-demo-left-status {
    border-top-color: #334155;
}

.fshare-demo-status {
    color: #FFFFFF;
}

.fshare-demo-version {
    color: #94A3B8;
}

/* CỘT PHẢI */
.fshare-demo-right {
    background: #1E293B;
    border-color: #334155;
}

.fshare-demo-right-content {
    height: 100%;
    padding: 12px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
}

.fshare-demo-side-card {
    padding: 11px;
    border: 1px solid #334155;
    border-radius: 12px;
    background: #172235;
    box-shadow:
        0 4px 10px rgba(0, 0, 0, .18),
        inset 0 1px 0 rgba(255, 255, 255, .025);
}

.fshare-demo-side-title {
    padding-bottom: 8px;
    margin-bottom: 7px;
    border-bottom: 1px solid #334155;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
}

.fshare-demo-stat-list {
    display: flex;
    flex-direction: column;
}

.fshare-demo-stat-row {
    min-height: 29px;
    padding: 5px 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-radius: 7px;
    color: #94A3B8;
    font-size: 12px;
}

.fshare-demo-stat-row + .fshare-demo-stat-row {
    border-top: 1px solid rgba(51, 65, 85, .45);
}

.fshare-demo-stat-row strong {
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
}

/* THỐNG KÊ NHANH */
.fshare-demo-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.fshare-demo-quick-item {
    min-height: 50px;
    padding: 8px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid #334155;
    border-radius: 9px;
    background: #1E293B;
    box-shadow:
        0 2px 5px rgba(0, 0, 0, .16);
}

.fshare-demo-quick-item span {
    color: #94A3B8;
    font-size: 10px;
    line-height: 1.2;
}

.fshare-demo-quick-item strong {
    margin-top: 3px;
    color: #FFFFFF;
    font-size: 16px;
    line-height: 1;
}

/* HÀNG HOẠT ĐỘNG */
.fshare-demo-bottom {
    background: #1E293B;
    border-color: #334155;
}

.fshare-demo-bottom-content {
    height: 100%;
    padding: 13px 16px;
    box-sizing: border-box;
}

.fshare-demo-bottom-title {
    padding-bottom: 8px;
    border-bottom: 1px solid #334155;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
}

.fshare-demo-activity-empty {
    margin-top: 16px;
    color: #64748B;
    font-size: 12px;
    text-align: center;
}

/* =========================================================
   DEMO - CỘT PHẢI GỌN TRONG KHUNG
   Không cho xuất hiện thanh cuộn dọc
   ========================================================= */

.fshare-demo-right-content {
    overflow-y: hidden;
    gap: 8px;
    padding: 10px;
}

.fshare-demo-side-card {
    padding: 9px;
}

.fshare-demo-side-title {
    padding-bottom: 6px;
    margin-bottom: 5px;
}

.fshare-demo-stat-row {
    min-height: 25px;
    padding: 3px 4px;
}

.fshare-demo-quick-grid {
    gap: 5px;
}

.fshare-demo-quick-item {
    min-height: 42px;
    padding: 6px;
}

.fshare-demo-quick-item strong {
    margin-top: 2px;
}


/* =========================================================
   DEMO - CỘT TRÁI
   Dark Navy Navigation Skin V2
   Chỉ chỉnh giao diện - KHÔNG đổi chức năng
   ========================================================= */

.fshare-demo-left-content {
    padding: 14px 12px;
}

/* Tiêu đề TỔNG QUAN */
.fshare-demo-title {
    padding: 0 4px 10px;
    margin-bottom: 6px;
    color: #FFFFFF;
    border-bottom: 1px solid #334155;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .2px;
}

/* Các nhóm */
.fshare-demo-menu-group {
    margin-top: 9px;
}

/* Tên nhóm */
.fshare-demo-menu-title {
    padding: 3px 6px;
    margin-bottom: 3px;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .15px;
}

/* Mục chức năng */
.fshare-demo-menu-item {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 27px;
    padding: 4px 8px;
    margin: 1px 0;
    box-sizing: border-box;

    border: 1px solid transparent;
    border-radius: 7px;

    background: transparent;
    color: #94A3B8;

    font-size: 12px;
    line-height: 1.3;
    text-align: left;

    transition:
        background .12s ease,
        border-color .12s ease,
        color .12s ease,
        transform .12s ease,
        box-shadow .12s ease;
}

/* Hover nhẹ */
.fshare-demo-menu-item:hover {
    background: #172235;
    border-color: #334155;
    color: #FFFFFF;

    transform: translateX(2px);

    box-shadow:
        0 3px 7px rgba(0, 0, 0, .18);
}

/* Nhấn xuống nhẹ */
.fshare-demo-menu-item:active {
    transform: translateX(1px);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, .18);
}

/* Accent nhẹ cho từng nhóm */
.fshare-demo-menu-group:nth-of-type(2)
.fshare-demo-menu-title {
    color: #60A5FA;
}

.fshare-demo-menu-group:nth-of-type(3)
.fshare-demo-menu-title {
    color: #34D399;
}

.fshare-demo-menu-group:nth-of-type(4)
.fshare-demo-menu-title {
    color: #A78BFA;
}

.fshare-demo-menu-group:nth-of-type(5)
.fshare-demo-menu-title {
    color: #94A3B8;
}

/* Khu vực trạng thái cuối */
.fshare-demo-left-status {
    margin-top: auto;
    padding: 10px 5px 0;
    border-top: 1px solid #334155;
}

.fshare-demo-status {
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 600;
}

.fshare-demo-version {
    margin-top: 3px;
    color: #64748B;
    font-size: 10px;
}


/* =========================================================
   MEDIA VIEW BACKGROUND
   Nền nhẹ cho Phim STRM + Phim NAS
   ========================================================= */

.strm-only {
    background: #f1f5f9;
}

#nas-view {
    background: #f1f5f9;
}

/* ===== STRM TOP BAR ALIGN ===== */

/* Nhóm điều khiển Row 1 */
#strm-view .card-header > .d-flex{
    width:100%;
    align-items:center;
}

/* 3 control chính cùng chiều cao */
#strm-view .category-dropdown > button,
#strm-view #btn-delete-series,
#strm-view #searchInput{
    height:38px;
    box-sizing:border-box;
}

/* Search đứng trước 2 ô thống kê */
#strm-view #searchInput{
    order:3;
}

/* VIDEO + STRM sang góc phải */
#strm-view .stat-video{
    order:4;
    margin-left:auto;
}

#strm-view .stat-strm{
    order:5;
}

/* Search không bị margin/padding làm lệch chiều cao */
#strm-view #searchInput{
    padding-top:6px;
    padding-bottom:6px;
}

/* 2 ô VIDEO / STRM căn giữa theo chiều cao */
#strm-view .stat-video,
#strm-view .stat-strm{
    min-height:38px;
    box-sizing:border-box;
    display:flex;
    align-items:center;
}


/* ===== STRM STAT - DASHBOARD STYLE ===== */

#strm-view .stat-box{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:7px;
    height:38px;
    min-height:38px;
    padding:3px 7px;
    box-sizing:border-box;
}

#strm-view .stat-box .quick-icon{
    width:22px;
    height:22px;
    flex:0 0 22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    line-height:1;
}

#strm-view .stat-box .quick-info{
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    line-height:1;
    text-align:left;
}

#strm-view .stat-box .quick-info strong{
    font-size:12px;
    font-weight:700;
    line-height:1.1;
    white-space:nowrap;
}

#strm-view .stat-box .quick-info em{
    margin-top:2px;
    font-size:9px;
    font-style:normal;
    font-weight:700;
    line-height:1;
    white-space:nowrap;
}


/* =========================================================
   NAS VIDEO - LAYOUT ĐỒNG BỘ STRM
   Header 2 tầng trái/phải - chỉ danh sách phim cuộn
   ========================================================= */

#nas-view{
    height:100dvh;
    max-height:100dvh;
    overflow:hidden;
}

#nas-view > .card{
    height:100%;
    max-height:100%;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

/* ===== HEADER NAS - 1 KHỐI, 2 TẦNG ===== */

#nas-view > .card > .card-header{
    flex:0 0 auto;
    position:sticky;
    top:0;
    z-index:20;
    padding:8px 16px;
}

#nas-view .nas-header-layout{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

/* Bên trái: tiêu đề + controls */
#nas-view .nas-header-left{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:7px;
}

#nas-view .nas-title{
    line-height:1.2;
}

/* Category + Search */
#nas-view .nas-controls{
    display:flex;
    align-items:center;
    gap:8px;
}

#nas-view #nasVideoCategory,
#nas-view #nasVideoSearch{
    height:38px;
    box-sizing:border-box;
}

#nas-view #nasVideoCategory{
    width:220px;
}

#nas-view #nasVideoSearch{
    width:300px;
}

/* Bên phải: Dashboard + VIDEO */
#nas-view .nas-header-right{
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:7px;
}

#nas-view .nas-dashboard-btn{
    height:31px;
    box-sizing:border-box;
}

/* ===== VIDEO STAT - GIỐNG STRM ===== */

#nas-view .nas-stat-video{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:7px;
    height:38px;
    min-height:38px;
    padding:3px 7px;
    box-sizing:border-box;
}

#nas-view .nas-stat-video .quick-icon{
    width:22px;
    height:22px;
    flex:0 0 22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    line-height:1;
}

#nas-view .nas-stat-video .quick-info{
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    line-height:1;
    text-align:left;
}

#nas-view .nas-stat-video .quick-info strong{
    font-size:12px;
    font-weight:700;
    line-height:1.1;
    white-space:nowrap;
}

#nas-view .nas-stat-video .quick-info em{
    margin-top:2px;
    font-size:9px;
    font-style:normal;
    font-weight:700;
    line-height:1;
    white-space:nowrap;
}

/* ===== THÂN NAS ===== */

#nas-view > .card > .card-body{
    flex:1 1 auto;
    min-height:0;
    padding:0 !important;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

#nasVideoList{
    flex:1 1 auto;
    min-height:0;
    overflow:hidden;
}

/* Header bảng màu xám, không cuộn */
#nasVideoList .nas-video-table-header{
    flex:0 0 auto;
}

/* Chỉ danh sách phim được cuộn */
#nasVideoList .nas-video-table-scroll{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
}

/* ===== HEADER BẢNG GIỐNG STRM ===== */

#nasVideoList .nas-video-table-header th{
    background:#d7e0ea !important;
    color:#334155;
    border-bottom:1px solid #dbe3ee;
    font-weight:600;
    font-size:14px;
}

/* Dữ liệu phim */
#nasVideoList .nas-video-table-scroll tbody tr{
    background:#ffffff;
}

#nasVideoList .nas-video-table-scroll tbody tr:nth-child(even){
    background:#f5f7fb;
}


/* =========================================================
   NAS HEADER - ĐỒNG BỘ STRM / 2 HÀNG / 1 NỀN ĐEN
   ========================================================= */

#nas-view > .card > .card-header{
    flex:0 0 auto;
    position:sticky;
    top:0;
    z-index:20;

    padding:8px 16px;

    background:#212529 !important;
    color:#fff !important;
}

/* Toàn bộ header NAS */
#nas-view .nas-header-layout{
    width:100%;

    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:auto auto;

    column-gap:20px;
    row-gap:6px;

    align-items:center;

    background:#212529 !important;
}

/* ==================== HÀNG 1 ==================== */

/* Tiêu đề Phim NAS */
#nas-view .nas-header-left{
    grid-column:1;
    grid-row:1 / span 2;

    min-width:0;

    display:grid;
    grid-template-rows:auto 38px;
    row-gap:6px;

    background:#212529 !important;
}

#nas-view .nas-title{
    margin:0;
    padding:0;

    color:#fff !important;

    font-size:18px;
    font-weight:600;
    line-height:31px;

    white-space:nowrap;
}

/* ==================== HÀNG 2 ==================== */

#nas-view .nas-controls{
    display:flex;
    align-items:center;
    gap:8px;

    min-width:0;

    background:#212529 !important;
}

#nas-view #nasVideoCategory,
#nas-view #nasVideoSearch{
    height:38px;
    box-sizing:border-box;
}

#nas-view #nasVideoCategory{
    width:220px;
}

#nas-view #nasVideoSearch{
    width:300px;
}

/* ==================== BÊN PHẢI ==================== */

#nas-view .nas-header-right{
    grid-column:2;
    grid-row:1 / span 2;

    display:grid;
    grid-template-rows:31px 38px;
    row-gap:6px;

    justify-items:end;
    align-items:center;

    background:#212529 !important;
}

/* Dashboard - đồng bộ nút điều khiển STRM */
#nas-view .nas-dashboard-btn{
    grid-row:1;

    height:31px;
    min-height:31px;

    box-sizing:border-box;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:4px 10px;

    background:#212529 !important;
    border:1px solid rgba(255,255,255,.55) !important;
    color:#fff !important;

    font-size:13px;
    font-weight:600;

    border-radius:4px;
}

/* Hover Dashboard */
#nas-view .nas-dashboard-btn:hover{
    background:#343a40 !important;
    color:#fff !important;
    border-color:#fff !important;
}

/* VIDEO - giống stat VIDEO của STRM */
#nas-view .nas-stat-video{
    grid-row:2;

    height:38px;
    min-height:38px;

    box-sizing:border-box;

    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:7px;

    padding:3px 7px;

    background:#212529 !important;
    color:#fff !important;
}

#nas-view .nas-stat-video .quick-icon{
    width:22px;
    height:22px;
    flex:0 0 22px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    font-size:16px;
    line-height:1;
}

#nas-view .nas-stat-video .quick-info{
    min-width:0;

    display:flex;
    flex-direction:column;
    justify-content:center;

    line-height:1;
    text-align:left;
}

#nas-view .nas-stat-video .quick-info strong{
    font-size:12px;
    font-weight:700;
    line-height:1.1;
    white-space:nowrap;
}

#nas-view .nas-stat-video .quick-info em{
    margin-top:2px;

    font-size:9px;
    font-style:normal;
    font-weight:700;
    line-height:1;

    white-space:nowrap;
}


    
/* NAS STEP 1 - DASHBOARD BUTTON */
#nas-view > .card > .card-header .btn-light{
    background:#212529 !important;
    color:#fff !important;
    border:1px solid rgba(255,255,255,.55) !important;
}

#nas-view > .card > .card-header .btn-light:hover{
    background:#343a40 !important;
    color:#fff !important;
    border-color:#fff !important;
}

    
/* NAS STEP 2 - SECOND ROW BACKGROUND */
#nas-view > .card > .card-body{
    background:#212529 !important;
}

#nas-view > .card > .card-body > .d-flex{
    background:#212529 !important;
}


/* NAS STEP 3 - CANH HAI DAU HANG 2 */
#nas-view > .card > .card-body > .d-flex{
    width:100%;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
}

#nas-view > .card > .card-body > .d-flex #nasVideoCategory{
    margin-left:0 !important;
}

#nas-view > .card > .card-body > .d-flex .stat-video{
    margin-left:auto !important;
    margin-right:0 !important;
}


/* NAS STEP 4 - CANH LE HANG 2 */
#nas-view > .card > .card-body > .d-flex{
    padding-left:16px !important;
    padding-right:16px !important;
}


/* NAS STEP 5 - VIDEO STAT DASHBOARD STYLE */

#nas-view .stat-video{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:7px;
    height:38px;
    min-height:38px;
    padding:3px 7px;
    box-sizing:border-box;
}

#nas-view .stat-video::before{
    content:"🎞️";
    width:22px;
    height:22px;
    flex:0 0 22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    line-height:1;
}

#nas-view .stat-video .label{
    margin:0;
    font-size:9px;
    font-weight:700;
    line-height:1;
    white-space:nowrap;
    order:2;
}

#nas-view .stat-video .value{
    font-size:12px;
    font-weight:700;
    line-height:1.1;
    white-space:nowrap;
    order:1;
}

#nas-view .stat-video .label,
#nas-view .stat-video .value{
    display:block;
}

#nas-view .stat-video{
    position:relative;
}

#nas-view .stat-video .value{
    position:absolute;
    left:36px;
    top:6px;
}

#nas-view .stat-video .label{
    position:absolute;
    left:36px;
    top:21px;
}


/* NAS STEP 6 - REMOVE DUPLICATE VIDEO ICON */

#nas-view .stat-video .label{
    font-size:0 !important;
}

#nas-view .stat-video .label::after{
    content:"VIDEO";
    font-size:9px;
    font-weight:700;
    line-height:1;
}


/* NAS STEP 8 - TABLE HEADER SIZE */

#nasVideoList .nas-video-table-header th{
    height:48px;
    padding-top:10px !important;
    padding-bottom:10px !important;
    font-size:15px !important;
    vertical-align:middle;
}

/* ===== DASHBOARD CLOCK - STEP 1 ===== */

.fshare-demo-welcome{
    position:relative;
    min-height:64px;
    padding-right:150px;
}

.fshare-demo-welcome-clock{
    position:absolute;
    top:50%;
    right:15px;
    transform:translateY(-50%);
    display:flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
}

.fshare-demo-welcome-clock .clock-icon{
    font-size:18px;
    line-height:1;
}

.fshare-demo-welcome-clock #dashboard-clock{
    font-size:15px;
    font-weight:700;
    color:#FFFFFF;
    letter-spacing:.5px;
    font-variant-numeric:tabular-nums;
}

/* ===== DASHBOARD DATE - STEP 2 ===== */

.fshare-demo-welcome-clock{
    display:grid;
    grid-template-columns:auto auto;
    grid-template-rows:auto auto;
    column-gap:6px;
    row-gap:2px;
    align-items:center;
}

.fshare-demo-welcome-clock .clock-icon{
    grid-column:1;
    grid-row:1;
}

.fshare-demo-welcome-clock #dashboard-clock{
    grid-column:2;
    grid-row:1;
}

.fshare-demo-welcome-clock #dashboard-date{
    grid-column:2;
    grid-row:2;
    font-size:11px;
    font-weight:600;
    line-height:1.2;
    color:#94A3B8;
    white-space:nowrap;
}