/* ===================================
   DARK THEME - CHỈ ĐỔI MÀU
   Giữ nguyên 100% layout gốc
   Chỉ thay đổi màu sắc
   =================================== */

/* Force dark background */
body {
    background: #0a0e27 !important;
    background-image: none !important;
    color: #e2e8f0 !important;
}

/* Override white panels */
.stui-pannel-bg {
    background-color: rgba(18, 24, 46, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.stui-vodlist__bg {
    background-color: rgba(18, 24, 46, 0.8) !important;
}

/* Header colors */
.stui-header__top {
    background-color: #12182e !important;
}

.stui-header__menu {
    background-color: #0a0e27 !important;
}

.stui-header__menu li a {
    color: #94a3b8 !important;
}

.stui-header__menu li.active a,
.stui-header__menu li:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #e2e8f0 !important;
}

/* Text colors */
a, h1, h2, h3, h4, h5, h6 {
    color: #e2e8f0 !important;
}

a:hover {
    color: #6366f1 !important;
}

.text-muted {
    color: #94a3b8 !important;
}

.stui-vodlist__detail .text {
    color: #64748b !important;
}

/* Form controls */
.form-control {
    background-color: #1a2035 !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.form-control:focus {
    border-color: #6366f1 !important;
    -webkit-box-shadow: inset 0 1px 1px rgba(99, 102, 241, 0.075), 0 0 8px rgba(99, 102, 241, 0.6) !important;
    box-shadow: inset 0 1px 1px rgba(99, 102, 241, 0.075), 0 0 8px rgba(99, 102, 241, 0.6) !important;
}

.form-control option {
    background: #1a2035 !important;
    color: #e2e8f0 !important;
}

/* Buttons */
.btn {
    color: #e2e8f0 !important;
}

.btn-default {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.btn-default:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

.btn-primary {
    background-color: #6366f1 !important;
    border: 1px solid #6366f1 !important;
    color: #ffffff !important;
}

.btn-primary:hover {
    background-color: #5558e3 !important;
    border: 1px solid #5558e3 !important;
}

/* Dropdown */
.dropdown-menu {
    background-color: #1a2035 !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.dropdown-menu:before {
    background-color: #1a2035 !important;
}

.dropdown-menu > .active > a {
    background-color: #6366f1 !important;
    color: #ffffff !important;
}

/* Navigation */
.nav-head > li.active > a,
.nav-tabs > li.active > a {
    border-bottom: 2px solid #6366f1 !important;
    color: #6366f1 !important;
}

.nav-tag > li > a,
.nav-page > li > a {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #e2e8f0 !important;
}

.nav-tag > li > a:hover,
.nav-tag > li.active a,
.nav-page > li > a:hover,
.nav-page > li.active > a {
    background-color: #6366f1 !important;
    border: 1px solid #6366f1 !important;
    color: #ffffff !important;
}

/* Tags */
.tag-type li a {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #94a3b8 !important;
}

.tag-type li a:hover,
.tag-type li.active a {
    background-color: #6366f1 !important;
    border: 1px solid #6366f1 !important;
    color: #ffffff !important;
}

.tag-btn li a {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #94a3b8 !important;
}

.tag-btn li a:hover,
.tag-btn li.active a {
    background-color: #6366f1 !important;
    color: #ffffff !important;
}

/* Striped list */
.stui-vodlist__text.striped .striped-head,
.stui-vodlist__text.to-color li:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

/* Link pics */
.stui-link__pic li a {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.stui-link__pic li a:hover {
    border: 1px solid #6366f1 !important;
}

/* Screen list */
.stui-screen__list li a {
    color: #e2e8f0 !important;
}

.stui-screen__list li.active a {
    background-color: #6366f1 !important;
    color: #ffffff !important;
}

/* Playlist */
.stui-content__playlist li a {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.stui-content__playlist li a:hover,
.stui-content__playlist li.active a {
    border: 1px solid #6366f1 !important;
    background-color: #6366f1 !important;
    color: #ffffff !important;
}

/* Pagination */
.stui-page li a,
.stui-page li .num,
.stui-page-text a,
.stui-page-text em,
.stui-page-text span {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #94a3b8 !important;
}

.stui-page li a:hover,
.stui-page li.active a,
.stui-page li.active .num,
.stui-page-text span.pagenow {
    background-color: #6366f1 !important;
    color: #ffffff !important;
    border: 1px solid #6366f1 !important;
}

.stui-page-text .pagego {
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    background: #1a2035 !important;
    color: #e2e8f0 !important;
}

.stui-page-text .pagebtn {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #e2e8f0 !important;
}

/* Extra sidebar */
.stui-extra li a,
.stui-extra li span {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.stui-extra li a.backtop {
    background-color: rgba(0, 0, 0, 0.6) !important;
    color: #ffffff !important;
}

.stui-extra li .sideslip {
    background-color: #1a2035 !important;
}

.stui-extra li .sideslip:before {
    background-color: #1a2035 !important;
}

/* Popup */
.popup {
    background-color: #0a0e27 !important;
}

.popup-head {
    background-color: #12182e !important;
}

/* Tabbar */
.stui_nav__taddar .item .icon,
.stui_nav__taddar .item .title {
    color: #94a3b8 !important;
}

.stui_nav__taddar .item.active .title,
.stui_nav__taddar .item.active .icon {
    color: #6366f1 !important;
}

.stui_nav__taddar.fixed {
    background-color: #12182e !important;
}

/* Line colors */
.split-line {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.top-line:before,
.bottom-line:after {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Autocomplete */
.autocomplete-suggestions,
.mac_results {
    background-color: #1a2035 !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.autocomplete-suggestion,
.mac_results li {
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #e2e8f0 !important;
}

.autocomplete-suggestion:hover,
.mac_results li:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Modal */
.stui-modal__content {
    background-color: #12182e !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: #0a0e27;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    border: 2px solid #0a0e27;
}

::-webkit-scrollbar-thumb:hover {
    background: #6366f1;
}

/* Mobile */
@media (max-width: 767px) {
    .form-control {
        background-color: #1a2035 !important;
        color: #e2e8f0 !important;
    }
}

/* END - CHỈ ĐỔI MÀU, GIỮ NGUYÊN LAYOUT */