/* public/css/style.css (FINAL & COMPLETE VERSION) */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&display=swap');

:root {
    --primary-color: #1e63ff;
    --primary-hover: #0048d9;
    --danger-color: #e74c3c;
    --danger-hover: #c0392b;
    --text-dark: #2c3e50;
    --white: #ffffff;
    --text-light: #ecf0f1;
    --border-color: #dfe4ea;
    --panel-bg: #f5f7fa;
    --font-family: 'Be Vietnam Pro', sans-serif;
    --transition-speed: 0.3s;
}

/* --- Global & Reset --- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body,
html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: var(--font-family);
    overflow: hidden;
    background-color: #000;
}

.hidden {
    display: none !important;
}

.empty-state {
    text-align: center;
    color: #7f8c8d;
    padding: 20px;
}

/* --- Welcome Overlay Styles --- */
#welcome-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #34495e, #2c3e50);
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    padding: 20px;
    flex-direction: column;
}

.welcome-content i {
    font-size: 60px;
    margin-bottom: 20px;
    color: #fff;
    text-shadow: 0 0 15px rgba(30, 99, 255, 0.5);
}

.welcome-content h2 {
    font-size: 2em;
    margin-bottom: 10px;
    font-weight: 700;
}

.welcome-content p {
    font-size: 1.1em;
    color: #bdc3c7;
    line-height: 1.6;
}

.welcome-btn {
    margin-top: 30px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 12px 25px;
    font-size: 1em;
    font-weight: 600;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.welcome-btn:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}


/* --- ENHANCED: Loading Overlay Styles --- */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 10005;
    display: none;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease;
    opacity: 0;
}

#loading-overlay.active {
    display: flex;
    opacity: 1;
}

.loading-content {
    text-align: center;
    color: white;
}

.loading-content i {
    font-size: 50px;
    -webkit-animation: fa-spin-pulse 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
    animation: fa-spin-pulse 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.7);
}

.loading-content p {
    margin-top: 15px;
    font-weight: 500;
    font-size: 1.1em;
    letter-spacing: 0.5px;
}

@keyframes fa-spin-pulse {
    0% {
        transform: scale(0.95) rotate(0deg);
        opacity: 0.7;
    }

    50% {
        transform: scale(1.1) rotate(180deg);
        opacity: 1;
    }

    100% {
        transform: scale(0.95) rotate(360deg);
        opacity: 0.7;
    }
}


/* --- Panorama Context Menu --- */
#panorama-context-menu {
    position: fixed;
    z-index: 10001;
    background: white;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    padding: 8px 0;
    min-width: 240px;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.95);
    transition: opacity 0.1s ease, transform 0.1s ease;
}

#panorama-context-menu.visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

#panorama-context-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#panorama-context-menu li {
    padding: 10px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--text-dark);
}

#panorama-context-menu li:hover {
    background-color: #f5f5f5;
}

#panorama-context-menu li i {
    width: 16px;
    text-align: center;
    color: var(--primary-color);
}

#panorama-context-menu li#delete-hotspot-ctx i {
    color: var(--danger-color);
}

/* --- Core & Library Overrides --- */
#panorama {
    transition: opacity 0.5s ease-in-out;
    opacity: 0;
    touch-action: none;
    /* <-- Thêm dòng này */
}

#panorama.loaded {
    opacity: 1;
}

#panorama.pnlm-loading {
    opacity: 0.5;
}

.pnlm-hotspot-base {
    z-index: 10 !important;
}

.pnlm-panorama-info,
.pnlm-load-box {
    display: none !important;
}

.swal2-container {
    z-index: 10002 !important;
}

body.swal2-height-auto {
    height: 100% !important;
}

.swal2-popup {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.swal2-html-container {
    overflow-y: auto;
    padding-top: 1em !important;
    padding-bottom: 1em !important;
    max-height: 75vh;
}

.swal-project-info-popup .swal2-html-container {
    max-height: 95vh;
}

/* --- Text-to-Speech Controls --- */
.tts-controls {
    display: flex;
    gap: 10px;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 8px;
    background-color: #f0f3f5;
    justify-content: center;
}

.tts-btn {
    background: none;
    border: 1px solid var(--border-color);
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.tts-btn:hover {
    background-color: var(--border-color);
}

.tts-btn i {
    color: var(--primary-color);
}

.tts-btn#tts-stop i {
    color: var(--danger-color);
}

/* --- SweetAlert Custom Form Styles --- */
.swal-form-input,
.swal-form-textarea,
.swal-form-select,
.select2-container--default .select2-selection--single {
    width: 100% !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    padding: 12px !important;
    font-size: 14px !important;
    font-family: var(--font-family) !important;
    height: auto !important;
    background-color: #eee;
    margin-bottom: 5px;
}

.swal2-file {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: #eee;
}

.ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-blurred {
    background-color: #eee;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 48px !important;
}

.swal2-popup .select2-container {
    z-index: 10003 !important;
    width: 100% !important;
}

.swal2-popup .select2-dropdown {
    border: 1px solid var(--border-color) !important;
    border-radius: 6px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 0 !important;
    line-height: 24px !important;
}

.select2-results__option {
    display: flex;
    align-items: center;
    gap: 10px;
}

.select2-results__option .fa-solid {
    width: 20px;
    text-align: center;
}

/* --- Color Picker Swatches --- */
.color-picker-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.color-picker-wrapper input[type="color"] {
    flex-shrink: 0;
    width: 50px ! important;
    height: 50px !important;
    padding: 5px !important;
}

#swal-hs-color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex-grow: 1;
}

.color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
}

.color-swatch:hover {
    transform: scale(1.1);
}

.swal-form-container label {
    font-weight: 500;
    font-size: 14px;
    margin-top: 0.5em;
    display: block;
    text-align: left;
    margin-bottom: 0.5em;
}

.swal-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
    align-items: center;
}

.swal-form-grid .full-width {
    grid-column: 1 / -1;
}

.swal-form-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 1em;
}

.ck-editor__editable {
    min-height: 150px !important;
    max-height: 30vh;
}

/* --- Scene Primary/Secondary Switch --- */
.swal-form-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 1em;
}

.swal-form-switch label {
    margin: 0;
}

.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}

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

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

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

input:checked+.slider {
    background-color: var(--primary-color);
}

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


/* --- HOTSPOT STYLES (REVISED FOR ZOOM FIX & MOBILE) --- */
.pnlm-hotspot-base.custom-hotspot-icon {
    width: 0;
    height: 0;
    background: none;
    border: none;
    box-shadow: none;
    cursor: pointer;
    pointer-events: all;
}

/* Scaler div for positioning and scaling */
.hotspot-scaler {
    position: absolute;
    bottom: 0;
    left: 0;
    transform-origin: center bottom;
    width: 200px;
    height: 150px;
    transform: translateX(-50%);
    pointer-events: none;
}

.hotspot-scaler * {
    pointer-events: all;
}

.hotspot-scaler .icon-container {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
}

.icon-container img {
    margin-left: -30px;
}

/* Grounding shadow */
.hotspot-scaler::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(10%);
    width: 25px;
    height: 8px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 70%);
    border-radius: 50%;
}

/* --- Cấu trúc CSS mới theo phương pháp "Desktop First" --- */

/* 1. Style mặc định (áp dụng cho DESKTOP) */
.hotspot-content-wrapper {
    position: absolute;
    bottom: 45px;
    /* Vị trí chuẩn cho desktop, giống hệt ban đầu */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.hotspot-text-label {
    background-color: rgba(30, 99, 255, 0.9);
    color: white;
    padding: 8px 16px;
    /* Kích thước chuẩn cho desktop */
    border-radius: 25px;
    font-size: 14px;
    /* Font chữ chuẩn cho desktop */
    font-weight: 600;
    white-space: nowrap;
    /* Không xuống dòng trên desktop */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    pointer-events: all;
}

/* Đường line SVG mặc định sẽ được ẩn trên desktop */
.hotspot-connector-svg {
    display: none;
}

/* Class để ẩn/hiện toàn bộ cụm */
.hotspot-scaler.out-of-view .hotspot-content-wrapper {
    opacity: 0;
    pointer-events: none;
}

/* Logic hover cho các hotspot ẩn text box */
.hotspot-scaler.no-text .hotspot-content-wrapper {
    display: none;
}

.hotspot-scaler.no-text:hover .hotspot-content-wrapper {
    display: flex;
}

/* 2. Ghi đè style (chỉ áp dụng cho MOBILE) */
@media (max-width: 768px) {
#sidebar-content{font-size: 95%;}
.swal-project-info-popup .swal2-html-container{max-height: 65vh;}
    /* Điều chỉnh lại vị trí của wrapper để logic tính toán đường line trên mobile hoạt động */
    /* .hotspot-content-wrapper {
        bottom: 40px;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }
*/
    /* .hotspot-text-label {
        font-weight: 500;
        background-color: rgba(30, 99, 255, 0.7);
    }  */

    /* Hiện đường line lên trên mobile */
    /* .hotspot-connector-svg {
        display: block;
        stroke-width: 1px;
        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
    } */

    /* Các style riêng cho text box trên mobile */
    /* .hotspot-text-label {
        white-space: normal;
        width: 120px;
        max-width: 120px;
        text-align: center;
        font-size: 11px;
        line-height: 1.3;
        padding: 5px 10px;
    } */
}


.hotspot-scaler i {
    font-size: 28px;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
    position: relative;
    z-index: 2;
}

.custom-uploaded-icon {
    max-width: 40px;
    max-height: 40px;
    object-fit: contain;
    filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.6));
}

/* --- Icon Sizing --- */
.iconsize-medium i,
.iconsize-medium .custom-uploaded-icon {
    transform: scale(0.8);
}

.iconsize-small i,
.iconsize-small .custom-uploaded-icon {
    transform: scale(0.6);
}

/* --- Icon Animations --- */
@keyframes bounce-anim {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    40% {
        transform: translateX(-50%) translateY(-20px);
    }

    60% {
        transform: translateX(-50%) translateY(-10px);
    }
}

@keyframes fade-anim {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

/* NEW PULSE ANIMATION (REVISED) */
@keyframes pulse-ripple {
    to {
        box-shadow: 0 0 0 40px rgba(255, 255, 255, 0);
    }
}

/* Áp dụng độ trễ cho animation BOUNCE */
.animation-bounce .icon-container {
    animation: bounce-anim 2.5s infinite ease-in-out;
    animation-delay: var(--random-delay, 0s);
}

/* Áp dụng độ trễ cho animation FADE */
.animation-fade .icon-container {
    animation: bounce-anim 2.5s infinite ease-in-out, fade-anim 2.5s infinite ease-in-out;
    animation-delay: var(--random-delay, 0s);
}

/* Áp dụng độ trễ cho animation PULSE */
.animation-pulse .icon-container::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.9);
    animation: pulse-ripple 2.5s infinite;
    animation-delay: var(--random-delay, 0s);
}

/* Make sure bounce animation is off for pulse */
.animation-pulse .icon-container {
    animation: none !important;
}

/* --- SCENE CAROUSEL STYLES (REVISED) --- */
#scene-carousel-container {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 15px;
    /* Space between fixed and scrollable scenes */
    min-width: 0;
    /* Important for flexbox child to shrink */
    display: none;
    /* Hidden by default, shown when scene list is active */
}

#tour-controls-bar.show-scenes #scene-carousel-container {
    display: flex !important;
}

#fixed-scene-wrapper {
    display: none;
    /* Hide by default, JS will show it */
    flex-shrink: 0;
}

#fixed-scene-wrapper .scene-thumbnail {
    border: 3px solid #00a8ff;
}

#fixed-scene-wrapper .scene-thumbnail.active {
    border-color: rgb(221, 73, 117);
    box-shadow: 0 0 10px rgba(221, 73, 117, 0.7);
}

#scrollable-scenes-container {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

#scene-list-wrapper {
    display: flex;
    flex: 1;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

#scene-list-wrapper::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

.scene-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s;
    display: grid;
    place-items: center;
}

.scene-nav-btn:hover {
    background: rgba(0, 0, 0, 0.8);
}

.scene-nav-btn:disabled {
    opacity: 0.2;
    cursor: not-allowed;
}

#scene-prev-btn {
    left: -15px;
}

#scene-next-btn {
    right: -15px;
}


/* --- Tour Controls Bar --- */
#tour-controls-bar {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: calc(100% - 40px);
    /* Constrain width to enable scrolling */
    min-width: 450px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    z-index: 1000;
    display: flex;
    align-items: center;
    padding: 10px 15px;
    transition: all 0.3s ease;
}

#tour-controls-bar.hidden {
    opacity: 0;
    bottom: -100px;
}

.scene-thumbnail {
    flex-shrink: 0;
    width: 110px;
    height: 70px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s;
    position: relative;
}

.scene-thumbnail:hover {
    transform: scale(1.05);
}

.scene-thumbnail.active {
    border-color: rgb(221, 73, 117);
}

.scene-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#tour-title-wrapper {
    position: absolute;
    left: 50%;
    top: -40px;
    transform: translateX(-50%);
    background: rgba(18, 18, 18, 0.8);
    color: var(--text-light);
    padding: 5px 20px;
    border-radius: 20px;
    font-size: 14px;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#main-controls-wrapper {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    flex-shrink: 0;
}

.ctrl-icon {
    width: 40px;
    height: 40px;
    color: #ccc;
    font-size: 16px;
    display: grid;
    place-items: center;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color 0.2s, color 0.2s;
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* IE 10+ */
    user-select: none;
    /* Standard syntax */
}

.ctrl-icon:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

#tour-controls-bar.no-tour {
    min-width: auto;
    width: auto;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
}

#tour-controls-bar.no-tour>div {
    display: none;
}

#tour-controls-bar.no-tour #main-controls-wrapper {
    display: flex;
    margin-left: 0;
}

#tour-controls-bar.no-tour #main-controls-wrapper .ctrl-icon {
    display: none;
}

#tour-controls-bar.no-tour #main-controls-wrapper #ctrl-user-menu {
    display: grid;
}

.tour-thumbnail {
    flex-shrink: 0;
    width: 150px;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.3s, transform 0.3s;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #2c3e50;
}

.tour-thumbnail:hover {
    transform: scale(1.05);
    border-color: var(--primary-color);
}

.tour-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.3s;
}

.tour-thumbnail:hover img {
    filter: brightness(0.8);
}

.tour-thumbnail .tour-name {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 8px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    color: white;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    pointer-events: none;
}

/* --- Admin Panel --- */
#admin-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95vw;
    max-width: 1200px;
    height: 90vh;
    z-index: 2000;
    background: var(--panel-bg);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-size: 14px;
}

.panel-header {
    display: flex;
    align-items: center;
    padding: 10px 25px;
    background: white;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.panel-header h3 {
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
}

#admin-welcome-message {
    margin-left: auto;
    color: #E91E63;
    font-weight: bold;
}

#logout-btn-panel {
    background: #ecf0f1;
    color: var(--text-dark);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 12px;
    margin: 0 15px;
    cursor: pointer;
    transition: all 0.2s;
}

#logout-btn-panel:hover {
    background-color: #dfe4ea;
}

.close-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
}

.panel-nav {
    display: flex;
    background: white;
    padding: 0 25px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    overflow-x: auto;
}

.nav-tab {
    background: none;
    border: none;
    padding: 15px 0;
    margin-right: 30px;
    font-size: 15px;
    font-weight: 500;
    color: #7f8c8d;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
    white-space: nowrap;
}

.nav-tab.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.nav-tab .tab-count {
    color: #95a5a6;
    font-weight: 400;
    margin-left: 6px;
}

.nav-tab.active .tab-count {
    color: var(--primary-color);
}

.nav-tab.disabled {
    color: #bdc3c7;
    cursor: not-allowed;
    pointer-events: none;
}

.panel-content {
    flex-grow: 1;
    padding: 25px;
    overflow-y: auto;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

.tab-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}

.tab-header h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.btn-primary {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary:hover {
    background: var(--primary-hover);
}

.btn-back-mobile {
    display: none;
    background: #6c757d;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s;
    align-items: center;
    gap: 8px;
    margin-right: auto;
}

.btn-back-mobile:hover {
    background: #5a6268;
}

/* --- List Container & Items --- */
.list-container {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.list-item {
    display: grid;
    grid-template-columns: 40px 1fr 240px 150px auto;
    align-items: center;
    padding: 15px 20px;
    gap: 15px;
    border-bottom: 1px solid var(--border-color);
}

.list-item:last-child {
    border-bottom: none;
}

.list-item-stt {
    color: #7f8c8d;
    font-weight: 500;
}

.list-item-info>span {
    font-weight: 500;
    word-break: break-all;
}

.list-item-info small {
    color: #7f8c8d;
    display: block;
    margin-top: 4px;
}

.list-item-creator {
    font-size: 13px;
    color: #34495e;
}

.list-item-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.badge {
    background-color: #ecf0f1;
    color: #34495e;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.badge.scene-badge {
    background-color: #e0f7fa;
    color: #00796b;
}

.badge.hotspot-badge {
    background-color: #fff3e0;
    color: #f57c00;
}

.badge.primary-badge {
    background-color: #d1e7dd;
    color: #0f5132;
    border: 1px solid #a3cfbb;
}

.badge.secondary-badge {
    background-color: #f8d7da;
    color: #842029;
    border: 1px solid #f5c2c7;
}

.list-item-actions {
    display: flex;
    justify-content: flex-end;
}

.list-item-actions button {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    width: 32px;
    height: 32px;
    margin-left: 10px;
    cursor: pointer;
    color: #7f8c8d;
    transition: all 0.2s;
}

.list-item-actions button:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.list-item-actions .btn-delete:hover {
    background: var(--danger-color);
    border-color: var(--danger-color);
}

.search-wrapper {
    position: relative;
    margin-bottom: 15px;
}

.search-wrapper i {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #adb5bd;
}

.search-wrapper input {
    width: 100%;
    padding: 12px 15px 12px 40px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    font-size: 14px;
    transition: all 0.2s;
}

.search-wrapper input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(30, 99, 255, 0.15);
}

.pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    position: sticky;
    bottom: -20px;
    background-color: #f5f7fa;
    padding: 10px;
}

.pagination-controls button {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.pagination-controls button:hover:not(:disabled) {
    background: #e9ecef;
}

.pagination-controls button.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.pagination-controls button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- Mobile App-like Side Menu --- */
#mobile-menu-toggle {
    display: none;
}

#mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2001;
}

.scene-thumbnail.loading::after {
    content: '\f110';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    animation: fa-spin 1s infinite linear;
    border-radius: 6px;
    z-index: 1;
}

@keyframes fa-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* --- GIẢI PHÁP HOTSPOT CHO DI ĐỘNG --- */

#ctrl-hotspot-list {
    display: grid;
}

/* Tùy chỉnh danh sách hotspot trong SweetAlert2 */
.hotspot-list-swal {
    padding: 0 !important;
}

.hotspot-list-ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    max-height: 50vh;
    overflow-y: auto;
}

.hotspot-list-ul li {
    padding: 15px 20px;
    border-bottom: .1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 15px;
}

.hotspot-list-ul li:last-child {
    border-bottom: none;
}

.hotspot-list-ul li:hover {
    background-color: #204496;
}

.hotspot-list-ul li i {
    color: var(--primary-color);
    font-size: 1.2em;
    width: 25px;
    text-align: center;
}

/* --- HIỆU ỨNG HOTSPOT KHI ĐƯỢC CHỌN (ACTIVE) --- */

@keyframes active-pulse-ripple {
    to {
        box-shadow: 0 0 0 60px rgba(30, 99, 255, 0);
    }
}

.pnlm-hotspot-base.hotspot-active .icon-container::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 2px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(187, 50, 57, 0.9);
    animation: active-pulse-ripple 2s infinite !important;
    animation-delay: 0s !important;
}

/* --- Mobile Responsive --- */
@media (max-width: 768px) {
    #admin-panel {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        transform: none;
        border-radius: 0;
    }

    .panel-content,
    .panel-header {
        padding-left: 15px;
        padding-right: 15px;
    }

    #mobile-menu-toggle {
        display: block;
        background: none;
        border: none;
        font-size: 20px;
        cursor: pointer;
        margin-right: 15px;
    }

    .panel-header h3 {
        margin-right: auto;
    }

    .panel-nav {
        position: fixed;
        top: 0;
        left: -280px;
        width: 280px;
        height: 100%;
        flex-direction: column;
        background: white;
        padding: 20px;
        border-bottom: none;
        box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
        transition: left 0.3s ease;
        z-index: 2002;
    }

    .panel-nav.open {
        left: 0;
    }

    .nav-tab {
        width: 100%;
        text-align: left;
        padding: 15px 10px;
        margin: 5px 0;
        border-bottom: none;
        border-radius: 8px;
    }

    .nav-tab.active {
        background-color: #e9ecef;
    }

    #tour-controls-bar {
        min-width: 95%;
        width: 95%;
        bottom: 10px;
        flex-direction: column;
        align-items: stretch;
    }

    #tour-controls-bar.show-scenes {
        flex-direction: column;
        align-items: stretch;
    }

    #main-controls-wrapper {
        justify-content: center;
        flex-wrap: wrap;
        gap: 2px;
    }

    .scene-thumbnail {
        width: 90px;
        height: 55px;
    }

    .ctrl-icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .swal2-popup {
        width: 90% !important;
    }

    .swal-form-grid {
        grid-template-columns: 1fr;
    }

    .btn-back-mobile {
        display: inline-flex;
    }

    .tab-header h4 {
        display: none;
    }

    .tab-header .btn-primary {
        font-size: 12px;
        padding: 8px 10px;
    }

    .list-item {
        grid-template-columns: 1fr auto;
        grid-template-areas: "info actions" "badges actions" "creator creator";
        padding: 15px;
    }

    .list-item-stt {
        display: none;
    }

    .list-item-info {
        grid-area: info;
    }

    .list-item-actions {
        grid-area: actions;
    }

    .list-item-badges {
        grid-area: badges;
        margin-top: 10px;
        justify-content: flex-start;
    }

    .list-item-creator {
        grid-area: creator;
        margin-top: 5px;
        background: #f9f9f9;
        padding: 5px;
        border-radius: 4px;
        text-align: right;
    }

    .hotspot-scaler i {
        font-size: 22px;
    }

    .custom-uploaded-icon {
        max-width: 30px;
        max-height: 30px;
    }

    .hotspot-scaler::after {
        transform: translateX(-50%) scale(0.8);
    }
}

.swal2-close:focus {
    outline: none;
    border: none;
    box-shadow: none;
}

/* --- NÚT FAB KHI FULLSCREEN --- */
#fullscreen-fab {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 50px;
    height: 50px;
    background-color: rgba(30, 99, 255, 0.85);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 10001;
    transition: transform 0.2s ease, opacity 0.3s ease;
}

#fullscreen-fab:hover {
    transform: scale(1.1);
}

body:not(.is-fullscreen) #fullscreen-fab {
    display: none !important;
}

body.is-fullscreen #tour-controls-bar {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 150%);
}

body.is-fullscreen #fullscreen-fab {
    opacity: 1;
}

body.is-fullscreen #tour-controls-bar.show-controls-in-fs {
    opacity: 1;
    pointer-events: all;
    transform: translateX(-50%);
}

/* --- Permission Management Modal --- */
.permissions-container {
    max-height: 50vh;
    overflow-y: auto;
    text-align: left;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: #f9f9f9;
}

.permission-user-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-bottom: 1px solid #eee;
}

.permission-user-row:last-child {
    border-bottom: none;
}

.permission-user-row label {
    font-weight: 500;
}

/* --- Trash Bin Styles --- */
.trash-section {
    margin-bottom: 30px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: white;
}

.trash-section h4 {
    margin: 0;
    padding: 15px 20px;
    background-color: #f8f9fa;
    border-bottom: 1px solid var(--border-color);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.list-item.trash-header {
    font-weight: 600;
    color: var(--text-dark);
    background: #f1f3f5;
}

.list-item[data-type] {
    grid-template-columns: 40px 1fr 150px 150px auto;
}

.trash-deleted-by,
.trash-deleted-at {
    font-size: 13px;
    color: #6c757d;
}

.btn-danger {
    background-color: var(--danger-color);
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-danger:hover {
    background: var(--danger-hover);
}

.btn-danger:disabled,
.btn-primary:disabled {
    background-color: #ced4da;
    cursor: not-allowed;
}

.list-item-actions .btn-delete-perm:hover {
    background: #58151c;
    border-color: #58151c;
    color: white;
}

.nav-tab i {
    margin-right: 8px;
    width: 20px;
    /* Align icons */
    text-align: center;
}

/* --- MyRobot Chat Styles --- */
#myrobot-fab {
    position: fixed;
    bottom: 25px;
    left: 25px;
    width: 60px;
    height: 60px;
    background: linear-gradient(45deg, var(--primary-color), #5f9dff);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    z-index: 10001;
    transition: transform 0.2s ease;
}

#myrobot-fab:hover {
    transform: scale(1.1);
}

#myrobot-chat-popup {
    position: fixed;
    bottom: 100px;
    left: 25px;
    width: 350px;
    max-width: 90vw;
    height: 500px;
    max-height: 70vh;
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    z-index: 10002;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.95) translateY(10px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: bottom left;
}

#myrobot-chat-popup:not(.hidden) {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.chat-header {
    background: linear-gradient(45deg, var(--primary-color), #5f9dff);
    color: white;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.chat-header h3 {
    margin: 0;
    font-size: 1.1em;
    font-weight: 600;
}

#close-chat-btn {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    opacity: 0.8;
}

#close-chat-btn:hover {
    opacity: 1;
}

#chat-messages {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.message {
    display: flex;
    max-width: 85%;
}

.message .message-content {
    padding: 10px 15px;
    border-radius: 18px;
    line-height: 1.5;
}

.message.user {
    align-self: flex-end;
}

.message.user .message-content {
    background-color: var(--primary-color);
    color: white;
    border-bottom-right-radius: 4px;
}

.message.robot {
    align-self: flex-start;
}

.message.robot .message-content {
    background-color: #f1f3f5;
    color: var(--text-dark);
    border-bottom-left-radius: 4px;
}

.message.robot ul {
    padding-left: 20px;
    margin: 5px 0 0 0;
}

.chat-input-area {
    padding: 15px 20px;
    border-top: 1px solid var(--border-color);
    background: #fff;
    flex-shrink: 0;
}

#chat-form {
    display: flex;
    align-items: center;
    gap: 10px;
}

#chat-input {
    flex-grow: 1;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 10px 15px;
    font-size: 14px;
    outline: none;
}

#chat-input:focus {
    border-color: var(--primary-color);
}

#chat-form button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s;
}

#voice-input-btn {
    background-color: #f1f3f5;
    color: var(--text-dark);
}

#voice-input-btn:hover {
    background-color: #e9ecef;
}

#voice-input-btn.is-listening {
    background-color: #e74c3c;
    color: white;
    animation: pulse-mic 1.5s infinite;
}

#send-chat-btn {
    background-color: var(--primary-color);
    color: white;
}

#send-chat-btn:hover {
    background-color: var(--primary-hover);
}

#robot-typing-indicator {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 10px;
}

#robot-typing-indicator span {
    width: 8px;
    height: 8px;
    background-color: #ced4da;
    border-radius: 50%;
    animation: typing-bubble 1.2s infinite ease-in-out;
}

#robot-typing-indicator span:nth-child(2) {
    animation-delay: 0.2s;
}

#robot-typing-indicator span:nth-child(3) {
    animation-delay: 0.4s;
}

/* MyRobot Settings Panel */
.myrobot-settings-section {
    background: white;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    margin-bottom: 25px;
}

.myrobot-settings-section h4 {
    margin-top: 0;
    margin-bottom: 20px;
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
}

.setting-item:last-child {
    border-bottom: none;
    margin-bottom: 20px;
}

.setting-item label {
    font-weight: 500;
}

.setting-item input[type="number"] {
    width: 80px !important;
    text-align: center;
}

/* FAQ List Item */
.faq-item {
    grid-template-columns: 1fr auto !important;
}

.faq-item small b {
    color: var(--primary-color);
}

/* MyRobot Chat Suggestions */
.message.robot .message-content ul {
    list-style: none;
    padding: 0;
    margin-top: 10px;
}

.message.robot .message-content li {
    margin-top: 8px;
}

.faq-suggestion-btn {
    background: none;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    width: 100%;
    text-align: left;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    font-family: var(--font-family);
    font-size: 14px;
}

.faq-suggestion-btn:hover {
    background-color: var(--primary-color);
    color: white;
}

#myrobot-fab.hidden {
    display: none;
    transform: scale(0.5);
    opacity: 0;
}

@keyframes typing-bubble {

    0%,
    60%,
    100% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(-6px);
    }
}

@keyframes pulse-mic {
    0% {
        box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(231, 76, 60, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
    }
}

/* Responsive Trash */
@media (max-width: 768px) {
    .list-item[data-type] {
        grid-template-columns: 40px 1fr auto;
        grid-template-areas:
            "select info actions"
            "select deleted-by actions"
            "select deleted-at actions";
        gap: 2px 10px;
        align-items: center;
    }

    .list-item[data-type] input[type="checkbox"] {
        grid-area: select;
    }

    .list-item[data-type] .list-item-info {
        grid-area: info;
    }

    .list-item[data-type] .list-item-actions {
        grid-area: actions;
        flex-direction: column;
    }

    .trash-deleted-by {
        grid-area: deleted-by;
    }

    .trash-deleted-at {
        grid-area: deleted-at;
    }

    .list-item.trash-header {
        display: none;
    }

    #myrobot-fab {
        width: 32px;
        height: 32px;
    }

    #myrobot-fab i {
        font-size: 16px;
    }
}

.fancybox__container {
    z-index: 99999 !important;
}

/* --- ADD TO THE END OF style.css --- */

/* --- NEW: Hotspot Shadow Toggle --- */
.pnlm-hotspot-base.no-shadow .hotspot-scaler::after {
    display: none !important;
}

/* --- NEW: Project Info Styles --- */
.swal-project-info-popup {
    padding: 10px !important;
}

.swal-project-info-popup .swal2-html-container {
    padding: 0 !important;
    margin: 0 !important;
}

.project-info-iframe {
    width: 100%;
    height: calc(95vh - 50px);
    border: none;
    border-radius: 5px;
}

.project-info-container {
    background: white;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.project-info-actions {
    margin-top: 15px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.project-info-actions .btn-secondary {
    background-color: #6c757d;
    color: white;
}

.project-info-actions .btn-secondary:hover {
    background-color: #5a6268;
}

.project-info-container .ck-editor__editable {
    min-height: 40vh;
}

.project-info-upload-wrapper {
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 20px;
}

/* --- NEW: Styling for ContentEditable DIV --- */
.content-editor-iframe {
    width: 100%;
    border: 1px solid var(--border-color);
    min-height: 40vh;
    border-radius: 6px;
    background-color: white;
    margin-top: 10px;
}

.badge.reference-badge {
    background-color: #e8eaf6;
    color: #3f51b5;
    border: 1px solid #c5cae9;
}

.btn-secondary {
    background: #6c757d;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-secondary:hover {
    background: #5a6268;
}

/* Style cho nhóm nút lệnh trong header của tab */
.tab-header .header-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    /* Cho phép xuống dòng trên mobile */
    justify-content: flex-end;
}

/* Layout chính của modal, chia làm 2 cột */
.add-existing-scenes-modal {
    display: flex;
    height: 60vh;
    /* Chiều cao cố định cho modal */
    border-bottom: 1px solid var(--border-color);
}

/* Cột bên trái: Danh sách địa điểm */
.tour-list-pane {
    width: 35%;
    max-width: 320px;
    border-right: 1px solid var(--border-color);
    overflow-y: auto;
    background-color: #f8f9fa;
}

#modal-tour-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#modal-tour-list li {
    padding: 15px 20px;
    cursor: pointer;
    font-weight: 500;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s ease;
}

#modal-tour-list li:hover {
    background-color: #e9ecef;
}

/* Style cho địa điểm đang được chọn */
#modal-tour-list li.active {
    background-color: var(--primary-color);
    color: var(--white);
    font-weight: 600;
}

/* Cột bên phải: Danh sách Flycam */
.scene-list-pane {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    position: relative;
    /* Cần cho placeholder */
}

/* Dàn trang các Flycam theo dạng lưới */
#modal-scene-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    /* Tự động chia cột */
    gap: 15px;
}

#modal-scene-list li {
    border: 2px solid var(--border-color);
    /* Tăng độ dày border để dễ thấy */
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s ease;
    background-color: var(--white);
}

/* SỬA LỖI: Thêm position: relative để checkbox con định vị theo thẻ label */
#modal-scene-list li label {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    height: 100%;
    position: relative;
    /* << Rất quan trọng */
}

/* Style cho Flycam được chọn */
#modal-scene-list li.is-selected {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(30, 99, 255, 0.5);
}

/* Hình ảnh thumbnail của Flycam */
#modal-scene-list img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    display: block;
    background-color: #eee;
    /* Thêm màu nền cho ảnh chờ tải */
}

/* Tên Flycam */
#modal-scene-list span {
    padding: 10px;
    font-weight: 500;
    font-size: 14px;
    flex-grow: 1;
    display: flex;
    align-items: center;
}

/* Style lại checkbox cho đẹp và dễ bấm hơn */
#modal-scene-list input[type="checkbox"] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    accent-color: var(--primary-color);
    /* Đổi màu tick của checkbox */
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 4px;
}

/* Style cho phần placeholder và loading */
#modal-scene-list-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--text-light);
    font-size: 1.1em;
    text-align: center;
}

.list-item-thumb {
    width: 100px;
    height: 60px;
    border-radius: 6px;
    object-fit: cover;
    background-color: #eee;
}

#tab-scenes .list-item {
    grid-template-columns: 40px 100px 1fr 240px 150px auto;
}

.list-item-icon {
    width: 32px;
    text-align: center;
    font-size: 20px;
}

#tab-hotspots .list-item {
    grid-template-columns: 40px 40px 1fr auto auto auto;
}

@media (max-width: 768px) {
    #tab-scenes .list-item {
        grid-template-columns: 100px 1fr auto;
        grid-template-areas:
            "thumb info actions"
            "thumb badges actions"
            "thumb creator creator";
    }

    .list-item-thumb {
        grid-area: thumb;
    }
}

/* Thêm vào cuối file: public/css/style.css */

/* --- Style cho cột Icon trong danh sách Hotspot --- */
.list-item-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

/* Sửa lại grid của hotspot list item để có thêm cột icon */
#tab-hotspots .list-item {
    grid-template-columns: 40px 40px 1fr 150px auto;
    gap: 15px;
}

@media (max-width: 768px) {
    #tab-hotspots .list-item {
        grid-template-columns: 40px 1fr auto;
        grid-template-areas:
            "icon info actions"
            "icon badges actions"
            "icon creator creator";
    }

    .list-item-icon {
        grid-area: icon;
    }
}

/* --- Style cho Audio Player trong Form --- */
.audio-player-wrapper {
    margin-top: 1em;
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: #f8f9fa;
}

.audio-player-wrapper .audio-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

.audio-player-wrapper .audio-controls {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.audio-player-wrapper .audio-btn {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-dark);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    vertical-align: middle;
    justify-content: center;
}

.audio-player-wrapper .audio-btn:hover {
    background-color: #e9ecef;
    color: var(--primary-color);
}

.audio-player-wrapper .audio-btn.danger:hover {
    background-color: var(--danger-hover);
    color: var(--white);
    border-color: var(--danger-color);
}

.audio-player-wrapper .upload-new-audio {
    margin-left: auto;
}

/* Thêm vào cuối file: public/css/style.css */

.btn-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 18px;
    background-color: #27ae60;
    /* Màu xanh lá */
    color: white !important;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-download:hover {
    background-color: #219150;
    /* Màu xanh lá đậm hơn */
}

/* --- Style cho container ảnh và nút tải xuống trong modal chỉnh sửa Flycam --- */
.scene-image-preview-container {
    margin-top: 1.5em;
    /* Khoảng cách với phần trên */
    text-align: center;
    /* Căn giữa nội dung bên trong */
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #fcfcfc;
    display: flex;
    flex-direction: column;
    /* Xếp ảnh và nút theo chiều dọc */
    align-items: center;
    /* Căn giữa theo chiều ngang */
    gap: 15px;
    /* Khoảng cách giữa ảnh và nút */
}

.scene-image-preview-container img {
    max-width: 90%;
    /* Giới hạn kích thước ảnh */
    height: auto;
    /* Giữ tỷ lệ khung hình */
    border-radius: 8px;
    border: 1px solid #ddd;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.swal2-title {
    font-size: 1.3em !important;
    cursor: move;
}

div#hotspot-content {
    text-align: justify;
    font-size: 1em;
}

.audio-status {
    font-size: 13px;
    font-style: italic;
    color: var(--primary-color);
    margin-left: 15px;
}

/* Thêm vào cuối file: public/css/style.css */

/* --- ĐIỀU CHỈNH KHI TRUY CẬP TRÊN THIẾT BỊ DI ĐỘNG (MOBILE-FIRST ADAPTATIONS) --- */
@media (max-width: 768px) {
    /* Áp dụng cho màn hình có chiều rộng tối đa 768px (điện thoại, máy tính bảng nhỏ) */

    /* Vòng sáng (pulsating effect) */
    .custom-hotspot-icon::before {
        /* Điều chỉnh kích thước vòng sáng khi ở chế độ mobile */
        width: 45px !important;
        height: 45px !important;
        opacity: 0.6 !important;
        /* Giảm độ trong suốt để bớt nổi bật */
    }

    /* Hotspot Text Label (tên điểm đánh dấu) */
    .hotspot-text-label {
        font-size: 12px !important;
        /* Cỡ chữ nhỏ hơn */
        padding: 4px 8px !important;
        /* Giảm padding */
        white-space: nowrap;
        /* Giữ trên một dòng */
        /* transform: translate(-50%, -150%) scale(0.8) !important; */
        /* Thu nhỏ và dịch chuyển để không che icon */
        min-width: unset !important;
        /* Bỏ giới hạn chiều rộng tối thiểu */
        max-width: 180px !important;
        /* Giới hạn chiều rộng tối đa */
        overflow: hidden;
        /* Ẩn chữ thừa */
        text-overflow: ellipsis;
        /* Hiển thị dấu ba chấm */
    }

    /* Vị trí của label để không bị icon che */
    .custom-hotspot-icon:hover+.hotspot-text-label,
    .custom-hotspot-icon.active+.hotspot-text-label {
        transform: translate(-50%, -150%) scale(0.8) !important;
        /* Vẫn giữ transform này khi hover/active */
    }

    /* Điều chỉnh kích thước các popup SweetAlert2 khi ở mobile */
    .swal2-popup {
        width: 90% !important;
        /* Chiều rộng 90% màn hình */
        margin: 1em auto !important;
        /* Căn giữa và có khoảng cách */
        font-size: 0.9em !important;
        /* Cỡ chữ nhỏ hơn */
    }

    .swal2-title {
        font-size: 1.2em !important;
        /* Tiêu đề popup nhỏ hơn */
    }

    .swal2-html-container {
        font-size: 0.9em !important;
        /* Nội dung HTML nhỏ hơn */
    }

    /* Nếu có các nút điều khiển TTS/Audio, cũng cần điều chỉnh */
    .tts-controls .tts-btn {
        padding: 8px 12px !important;
        font-size: 0.9em !important;
    }

    .audio-player-wrapper .audio-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 12px !important;
    }
}

:root {
    --swal2-backdrop: rgba(0, 0, 0, 0.4) !important;
}

/* Thêm vào cuối file: public/css/style.css */

/* --- Style cho Select2 có hình ảnh và icon --- */
.select2-results__option,
.select2-selection__rendered {
    display: flex;
    align-items: center;
    gap: 10px;
}

.select2-results__option .select2-thumbnail,
.select2-selection__rendered .select2-thumbnail {
    width: 50px;
    height: 30px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.select2-results__option .select2-icon,
.select2-selection__rendered .select2-icon {
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.select2-results__option .select2-text-details {
    display: flex;
    flex-direction: column;
}

.select2-results__option .select2-text-details small {
    font-size: 0.8em;
    color: #6c757d;
}

/* Thêm vào cuối file: public/css/style.css */

/* Sửa lỗi màu chữ khó đọc khi chọn một mục trong Select2 */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
    color: var(--white);
}

/* --- Style cho các nút trong form FAQ ban đầu --- */
.faq-script-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

/* --- NEW: MyRobot Script Follow UI --- */
.script-follow-container {
    padding: 10px;
}

.script-follow-container h4 {
    margin: 0 0 15px 0;
    font-size: 1em;
    font-weight: 600;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 8px;
}

.script-steps-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.script-step {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9em;
    transition: all 0.3s ease;
}

.script-step .step-icon {
    width: 20px;
    text-align: center;
    font-size: 1.1em;
    transition: color 0.3s ease;
}

.script-step.pending {
    color: #6c757d;
    opacity: 0.7;
}

.script-step.pending .step-icon {
    color: #adb5bd;
}

.script-step.in-progress {
    color: var(--primary-color);
    font-weight: 500;
}

.script-step.in-progress .step-icon {
    color: var(--primary-color);
}

.script-step.completed {
    color: #28a745;
}

.script-step.completed .step-description {
    text-decoration: line-through;
    opacity: 0.8;
}

.script-step.completed .step-icon {
    color: #28a745;
}

/* --- NEW: Slideshow Effects --- */
#slideshow-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10003;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

#slideshow-overlay .media-indicator {
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 20px 30px;
    border-radius: 10px;
    font-size: 1.2em;
}

#slideshow-overlay .video-container {
    width: 90%;
    height: 90%;
    max-width: 1280px;
    pointer-events: all;
}

#slideshow-overlay video {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.textrun-effect {
    font-size: 2.5em;
    color: white;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-weight: bold;
    font-family: 'Courier New', Courier, monospace;
    background-color: rgba(0, 0, 0, 0.5);
    max-width: 85vw;
    word-wrap: break-word;
    box-sizing: border-box;
}

.textrun-effect.left {
    position: absolute;
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
}

.textrun-effect.center {
    text-align: center;
}

.textrun-effect.bottom {
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
}

/* --- NEW: Slideshow Selection Modal Styles --- */

/* Tùy chỉnh nền và tiêu đề của modal */
.slideshow-selection-popup {
    background: #f0f2f5 url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23d8dbe0" fill-opacity="0.4"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E') !important;
    border-radius: 16px !important;
}

.slideshow-selection-title {
    color: #1e3a5f !important;
    font-weight: 700 !important;
}

.slideshow-selection-container {
    padding: 0 !important;
}

/* Vùng chứa các thẻ lựa chọn */
.slideshow-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 10px;
    max-height: 60vh;
    overflow-y: auto;
}

/* Kiểu dáng cho mỗi thẻ lựa chọn */
.slideshow-card {
    display: flex;
    align-items: center;
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e0e7ff;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transform: scale(1);
    animation: fadeIn 0.5s ease-out forwards;
}

/* Hiệu ứng khi di chuột qua */
.slideshow-card:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 15px -3px rgba(30, 99, 255, 0.1), 0 4px 6px -2px rgba(30, 99, 255, 0.05);
    border-color: #a5b4fc;
}

/* Icon lớn bên trái */
.slideshow-card .card-icon {
    font-size: 2em;
    color: var(--primary-color);
    margin-right: 20px;
    background-color: #eef2ff;
    width: 60px;
    height: 60px;
    display: grid;
    place-items: center;
    border-radius: 50%;
}

/* Nội dung text */
.slideshow-card .card-content {
    flex-grow: 1;
    text-align: left;
}

.slideshow-card h3 {
    margin: 0 0 5px 0;
    font-size: 1.1em;
    color: #1e3a5f;
    font-weight: 600;
}

.slideshow-card p {
    margin: 0;
    font-size: 0.9em;
    color: #6b7280;
    line-height: 1.5;
}

/* Mũi tên bên phải */
.slideshow-card .card-arrow {
    font-size: 1.2em;
    color: #9ca3af;
    transition: transform 0.3s ease;
}

.slideshow-card:hover .card-arrow {
    transform: translateX(5px);
    color: var(--primary-color);
}

/* Hiệu ứng xuất hiện */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* style.css -> THÊM VÀO CUỐI FILE */

/* --- NEW: Slideshow Progress UI (Step Flow) --- */
#slideshow-progress-container {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 320px;
    max-height: calc(100vh - 40px);
    background-color: rgba(17, 24, 39, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    z-index: 10004;
    color: #f9fafb;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    padding: 15px;
    display: flex;
    flex-direction: column;
    transition: opacity 0.5s ease, transform 0.5s ease;
    transform: translateX(0);
}

#slideshow-progress-container.fade-out {
    opacity: 0;
    transform: translateX(100%);
}

.progress-title {
    margin: 0 0 15px 0;
    font-size: 1.1em;
    font-weight: 600;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.progress-steps-list {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Custom scrollbar for progress list */
.progress-steps-list::-webkit-scrollbar {
    width: 5px;
}

.progress-steps-list::-webkit-scrollbar-track {
    background: transparent;
}

.progress-steps-list::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
}

.progress-step {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9em;
    transition: all 0.3s ease;
}

.progress-step .step-icon {
    width: 22px;
    text-align: center;
    font-size: 1.2em;
    transition: color 0.3s ease;
}

.progress-step .step-description {
    line-height: 1.4;
}

.progress-step.pending {
    color: #9ca3af;
    /* Gray-400 */
    opacity: 0.7;
}

.progress-step.pending .step-icon {
    color: #6b7280;
    /* Gray-500 */
}

.progress-step.in-progress {
    color: #60a5fa;
    /* Blue-400 */
    font-weight: 500;
}

.progress-step.in-progress .step-icon {
    color: #60a5fa;
    /* Blue-400 */
}

.progress-step.completed {
    color: #4ade80;
    /* Green-400 */
}

.progress-step.completed .step-description {
    text-decoration: line-through;
    opacity: 0.7;
}

.progress-step.completed .step-icon {
    color: #4ade80;
    /* Green-400 */
}

/* style.css -> THÊM VÀO CUỐI FILE */

/* --- NEW: Slideshow Active State & Controls --- */
body.slideshow-active #tour-controls-bar,
body.slideshow-active #myrobot-fab {
    display: none !important;
    /* Ẩn các control mặc định */
}

#slideshow-controls-bar {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    z-index: 10001;
    display: flex;
    align-items: center;
    padding: 8px 15px;
    gap: 20px;
    color: white;
}

#slideshow-progress-inline {
    font-size: 0.9em;
    font-weight: 500;
}

#slideshow-progress-inline span {
    opacity: 0.7;
    margin-right: 8px;
}

.slideshow-buttons {
    display: flex;
    align-items: center;
    gap: 5px;
}

.slideshow-buttons button {
    background: transparent;
    border: none;
    color: #eee;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.slideshow-buttons button:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: white;
}

#ss-btn-exit:hover {
    background-color: #e74c3c;
}

#slideshow-progress-container.hidden {
    display: none;
}

/* style.css -> THÊM VÀO CUỐI FILE */

/* --- NEW: Slideshow Controls & Progress Bar FIX --- */
#slideshow-controls-bar {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    z-index: 10001;
    display: flex;
    align-items: center;
    padding: 8px 8px 8px 20px;
    /* Thêm padding bên trái */
    gap: 15px;
    color: white;
    width: 90%;
    max-width: 600px;
    /* Giới hạn chiều rộng tối đa */
}

#slideshow-progress-inline {
    flex: 1;
    min-width: 200px;
    /* FIX: Thêm chiều rộng tối thiểu */
    font-size: 0.9em;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

#slideshow-progress-inline span {
    opacity: 0.7;
    margin-right: 8px;
}

.slideshow-buttons {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    /* Ngăn các nút bị co lại */
}

/* --- NEW: Info Sidebar & Scene Controls (Redesigned v2) --- */
#info-sidebar {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 320px;
    /* << Chiều rộng cố định theo yêu cầu của bạn */
    max-width: 90vw;
    height: auto;
    max-height: calc(100vh - 40px);
    background: rgba(17, 24, 39, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1001;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    transform: translateX(calc(100% + 40px));
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

#info-sidebar:not(.hidden) {
    transform: translateX(0);
}

#sidebar-header {
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

#sidebar-title {
    margin: 0;
    font-size: 1.2em;
    font-weight: 600;
    color: #f9fafb;
}

#sidebar-content {
    padding: 20px;
    overflow-y: auto;
    flex-grow: 1;
    color: #d1d5db;
    line-height: 1.7;
    /* Thêm thuộc tính này để chữ luôn xuống dòng đúng cách */
    white-space: normal;
    text-align: justify;
}

/* --- NEW: Hiệu ứng Fade-in cho nội dung Sidebar --- */
@keyframes fadeInContent {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.content-reveal-animation {
    /* Áp dụng animation */
    animation: fadeInContent 0.8s ease-out forwards;
}


/* --- Các style cũ cho sidebar vẫn giữ nguyên --- */
#sidebar-content h1,
#sidebar-content h2,
#sidebar-content h3 {
    color: #f9fafb;
}

#sidebar-content a {
    color: #93c5fd;
    text-decoration: none;
}

#sidebar-content a:hover {
    text-decoration: underline;
}

#sidebar-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 15px 0;
}

/* Tùy chỉnh popup hỏi quyền phát nhạc */
.music-permission-popup {
    border-radius: 16px !important;
}

.music-permission-popup .btn-primary,
.music-permission-popup .btn-secondary {
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease;
    margin: 0 5px;
}

.music-permission-popup .btn-primary:hover,
.music-permission-popup .btn-secondary:hover {
    transform: scale(1.05);
}

.music-permission-popup .btn-primary {
    background-color: var(--primary-color) !important;
}

.music-permission-popup .btn-secondary {
    background-color: #6c757d !important;
}

#scene-controls-overlay {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1002;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#scene-controls-overlay.hidden {
    display: none;
}

.scene-control-btn {
    width: 45px;
    height: 45px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    font-size: 1.1em;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all 0.2s ease;
}

.scene-control-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

/* --- MyRobot Fullscreen --- */
.chat-header .header-buttons {
    display: flex;
    align-items: center;
    gap: 5px;
}

#fullscreen-chat-btn {
    background: none;
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
    opacity: 0.8;
    padding: 5px;
    line-height: 1;
}

#fullscreen-chat-btn:hover {
    opacity: 1;
}

#myrobot-chat-popup.chat-fullscreen {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
}

/* style.css -> Thêm vào cuối file */
.swal-warning-text {
    color: #dc3545;
    font-weight: 500;
    margin-bottom: 1em;
}

/* style.css -> THÊM VÀO CUỐI FILE */

/* --- Căn chỉnh cho Form Phân quyền --- */
.permission-radio-container {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    /* Khoảng cách giữa "Tất cả" và "Chỉ định" */
    margin: 10px 0 15px 0;
}

.permission-radio-group {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Khoảng cách giữa nút radio và chữ */
}

.permission-radio-group input[type="radio"] {
    margin: 0;
    cursor: pointer;
}

.permission-radio-group label {
    margin: 0 !important;
    /* Ghi đè các margin mặc định */
    cursor: pointer;
    font-weight: normal !important;
    /* Ghi đè các font-weight mặc định */
}

/* style.css -> THÊM VÀO CUỐI FILE */

/* --- Giao diện danh sách quyền đã gán --- */
#permission-current-list-container {
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #f9f9f9;
    max-height: 250px;
    overflow-y: auto;
}

.permission-user-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s ease;
}

.permission-user-summary:last-child {
    border-bottom: none;
}

.permission-user-summary:hover {
    background-color: #f0f3f5;
}

.perm-user-info {
    display: flex;
    flex-direction: column;
}

.perm-user-info strong {
    font-size: 1.1em;
    color: #333;
}

.perm-user-info small {
    color: #6c757d;
}

.perm-user-actions {
    display: flex;
    gap: 8px;
}

.perm-user-actions button {
    background: white;
    border: 1px solid #ccc;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: grid;
    place-items: center;
    color: #555;
    transition: all 0.2s ease;
}

.perm-user-actions .btn-edit-perm:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.perm-user-actions .btn-delete-perm:hover {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
}

/* --- Custom File Input Styling --- */

/* Style cho toàn bộ vùng input */
.swal2-file {
    color: #888;
    /* Màu chữ ban đầu khi chưa chọn file */
    background-color: #f8f9fa;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px;
    font-family: var(--font-family);
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
    width: 100%;
    display: block;
}

.swal2-file:hover {
    border-color: var(--primary-color);
}

/* Style cho nút "Choose File" / "Browse..." */
.swal2-file::file-selector-button {
    /* Reset style mặc định */
    border: none;
    outline: none;

    /* Style giống nút primary */
    background: var(--primary-color);
    color: var(--white);
    padding: 8px 15px;
    border-radius: 6px;
    font-weight: 500;
    font-family: var(--font-family);
    cursor: pointer;
    margin-right: 12px;
    /* Khoảng cách giữa nút và tên file */
    transition: background-color 0.2s ease;
}

/* Hiệu ứng khi di chuột qua nút */
.swal2-file::file-selector-button:hover {
    background: var(--primary-hover);
}

/* Đổi màu chữ sau khi người dùng đã chọn file */
.swal2-file:valid {
    color: var(--text-dark);
}

/* style.css -> THÊM VÀO CUỐI FILE */

/* --- Music Player Widget in Forms --- */
.music-player-widget {
    background-color: #f8f9fa;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.music-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    color: var(--text-dark);
}

.music-info i {
    color: var(--primary-color);
}

.music-filename {
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.music-controls {
    display: flex;
    gap: 5px;
}

.music-btn {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--text-dark);
    transition: all 0.2s ease;
}

.music-btn:hover {
    background-color: #e9ecef;
    color: var(--primary-color);
}

.music-btn.danger:hover {
    background-color: #dc3545;
    color: white;
    border-color: #dc3545;
}

.empty-state-small {
    font-size: 0.9em;
    color: #6c757d;
    padding: 10px;
    text-align: center;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px dashed var(--border-color);
}

/* --- Hiệu ứng gõ chữ cho Sidebar --- */
@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

@keyframes blink-caret {

    from,
    to {
        border-color: transparent
    }

    50% {
        border-color: #f9fafb;
    }
}

.typing-effect {
    display: inline-block;
    /* Quan trọng để animation width hoạt động */
    overflow: hidden;
    /* Ẩn chữ cho đến khi được hiển thị */
    white-space: nowrap;
    /* Giữ chữ trên một dòng khi đang gõ */
    border-right: .15em solid #f9fafb;
    /* Con trỏ gõ chữ */
    animation:
        typing 3.5s steps(40, end) forwards,
        blink-caret .75s step-end infinite;
}

/* Áp dụng lại white-space sau khi gõ xong */
#sidebar-content:has(.typing-effect) {
    animation: finishTyping 3.6s forwards;
}

@keyframes finishTyping {
    to {
        white-space: normal;
    }
}

#sidebar-content .typing-effect>* {
    white-space: normal;
    /* Cho phép các thẻ con bên trong xuống dòng */
}

.custom-swal-popup {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    color: #d1d5db;
    background: rgba(17, 24, 39, 0.85);

}

.custom-swal-popup .tts-controls {
    background: transparent
}

.custom-swal-popup .tts-controls * {
    color: #d1d5db;
}

/* --- Ghi đè để cho phép định vị popup tùy chỉnh --- */
/* 1. Tắt cơ chế căn giữa của VÙNG CHỨA bên ngoài */
.swal2-container.swal2-container-custom-position {
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

/* 2. (QUAN TRỌNG) Reset margin của chính POPUP để nó tuân theo top/left */
.swal2-popup.swal-popup-custom-position {
    margin: 0 !important;
}

/* Style cho thumbnail trong popup danh sách */
.hotspot-list-ul .list-item-thumb-small {
    width: 80px;
    height: 50px;
    border-radius: 6px;
    object-fit: cover;
    background-color: #eee;
    flex-shrink: 0;
    border: 1px solid #ddd;
}
/* style.css -> THÊM TOÀN BỘ KHỐI NÀY VÀO CUỐI FILE */

/* --- File Manager Styles --- */
.file-manager-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 25px;
    height: calc(90vh - 120px);
}
.fm-sidebar {
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    padding: 15px;
    overflow-y: auto;
}
.fm-sidebar h4 {
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}
#fm-directory-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
#fm-directory-list li {
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-dark);
    transition: background-color 0.2s, color 0.2s;
    margin-bottom: 5px;
}
#fm-directory-list li:hover {
    background-color: var(--primary-light);
}
#fm-directory-list li.active {
    background-color: var(--primary-color);
    color: white;
}
.fm-main {
    display: flex;
    flex-direction: column;
}
.fm-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-shrink: 0;
}
.fm-filters {
    display: flex;
    gap: 15px;
}
.fm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    overflow-y: auto;
    padding: 5px;
    flex-grow: 1;
}
.fm-file-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    height: 180px;
}
.fm-card-icon {
    font-size: 3.5em;
    margin-bottom: 15px;
    height: 60px;
}
.file-icon-image { color: #2ecc71; }
.file-icon-pdf { color: #e74c3c; }
.file-icon-word { color: #3498db; }
.file-icon-excel { color: #1abc9c; }
.file-icon-video { color: #9b59b6; }
.file-icon-audio { color: #f39c12; }
.file-icon-other { color: #bdc3c7; }
.fm-card-info strong {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    margin-bottom: 5px;
}
.fm-card-info small {
    color: var(--text-light);
    font-size: 0.8em;
}
.fm-card-actions {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(44, 62, 80, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s, transform 0.3s;
}
.fm-file-card:hover .fm-card-actions {
    opacity: 1;
    transform: translateY(0);
}
.fm-action-btn {
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.2s;
}
.fm-action-btn:hover {
    background: rgba(255,255,255,0.4);
}
/* File Viewer Modal */
.file-viewer-popup {
    width: 90vw !important;
    max-width: 1600px !important;
    padding: 10px !important;
}
.file-viewer-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 15px;
    height: 85vh;
}
.file-viewer-preview, .file-viewer-details {
    overflow: auto;
    background: #f0f2f5;
    border-radius: 8px;
}
.file-viewer-preview iframe {
    width: 100%;
    height: 100%;
    border: none;
}
.file-viewer-details {
    padding: 20px;
    text-align: left;
}
.file-viewer-details h4 {
    margin-top: 0;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
}
.detail-item {
    margin-bottom: 15px;
}
.detail-item strong {
    display: block;
    color: #555;
    font-size: 0.9em;
    margin-bottom: 5px;
}
.detail-item p {
    margin: 0;
    background: white;
    padding: 8px;
    border-radius: 4px;
}