/*! 
 * Cyber Manga Theme v3 - Simple Color Override
 * Chỉ thay đổi màu sắc, không động đến layout
 */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Rajdhani:wght@400;500;600;700&display=swap');

:root {
    --neon-cyan: #00f5ff;
    --neon-magenta: #ff00ff;
    --neon-purple: #a855f7;
    --neon-pink: #ec4899;
    --bg-dark: #0a0a0f;
    --bg-card: rgba(20, 20, 35, 0.95);
    --text-light: #f0f0f5;
    --text-muted: #a0a0b5;
}

/* ===== BODY ===== */
body {
    background-color: #0a0a0f !important;
    color: #f0f0f5 !important;
}

/* ===== MAIN CONTAINER ===== */
.main .container {
    background-color: #12121a !important;
}

/* ===== HEADER ===== */
.header {
    background: linear-gradient(180deg, #0a0a14 0%, #0f0f1a 100%) !important;
    border-bottom: 1px solid rgba(0, 245, 255, 0.3) !important;
}

/* ===== NAVIGATION ===== */
.main-nav .inner {
    background-color: #08080f !important;
}

.main-menu > li > a {
    color: #a0a0b5 !important;
}

.main-menu > li.active > a,
.main-menu > li.open > a,
.main-menu > li > a:hover {
    color: #00f5ff !important;
    background-color: rgba(0, 245, 255, 0.1) !important;
}

@media (min-width: 768px) {
    .navbar-nav > li {
        border-color: #2a2a3a !important;
    }
}

/* Dropdown */
.main-menu > li .dropdown-menu,
.main-menu > li .megamenu,
.navbar-dropdown {
    background-color: #14141f !important;
    border: 1px solid rgba(0, 245, 255, 0.2) !important;
}

.main-menu > li .megamenu ul li a,
.navbar-dropdown a {
    color: #a0a0b5 !important;
}

.main-menu > li .megamenu ul li a:hover,
.main-menu > li .megamenu ul li.active a,
.navbar-dropdown a:hover {
    color: #00f5ff !important;
    background-color: rgba(0, 245, 255, 0.1) !important;
}

/* ===== SEARCH ===== */
.search-box .searchinput {
    background-color: #1a1a25 !important;
    border: 1px solid rgba(0, 245, 255, 0.2) !important;
    color: #fff !important;
}

.search-box .searchinput:focus {
    border-color: #00f5ff !important;
    box-shadow: 0 0 10px rgba(0, 245, 255, 0.3) !important;
}

.suggestsearch {
    background-color: #14141f !important;
    border: 1px solid rgba(0, 245, 255, 0.2) !important;
}

.suggestsearch ul li {
    border-color: rgba(255, 255, 255, 0.05) !important;
}

.suggestsearch ul li:hover,
.suggestsearch ul li.selected {
    background-color: rgba(0, 245, 255, 0.1) !important;
}

.suggestsearch ul li a h3,
.suggestsearch ul li a h4 {
    color: #fff !important;
}

/* ===== PAGE TITLE ===== */
.page-title {
    color: #00f5ff !important;
    font-family: 'Orbitron', sans-serif !important;
}

/* ===== NOTIFY BLOCK ===== */
.notify_block {
    background-color: rgba(20, 20, 40, 0.8) !important;
    border: 1px solid rgba(0, 245, 255, 0.3) !important;
    color: #f0f0f5 !important;
}

.notify_block .info {
    background: linear-gradient(135deg, #00f5ff, #a855f7) !important;
}

/* ===== MANGA ITEMS ===== */
.items .item {
    visibility: visible !important;
    opacity: 1 !important;
}

.items .item .image {
    border-color: rgba(0, 245, 255, 0.2) !important;
    background-color: #1a1a25 !important;
}

.items .item .image img {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

.items .item .image .view {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%) !important;
    color: #fff !important;
}

.items .item .image .view a {
    color: #fff !important;
}

.items .item:hover .image {
    border-color: #00f5ff !important;
    box-shadow: 0 0 15px rgba(0, 245, 255, 0.3) !important;
}

.items .item figcaption h3 a {
    color: #f0f0f5 !important;
}

.items .item figcaption h3 a:hover {
    color: #00f5ff !important;
}

/* Chapter links */
.chapter a {
    color: #a0a0b5 !important;
}

.chapter a:hover {
    color: #00f5ff !important;
}

.chapter a:focus,
.chapter a:visited,
a.visited {
    color: #606070 !important;
}

.chapter .time {
    color: #505060 !important;
}

/* ===== ITEMS SLIDE ===== */
.items-slide {
    visibility: visible !important;
    opacity: 1 !important;
}

.items-slide .item {
    border-color: rgba(0, 245, 255, 0.2) !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.items-slide .item img {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* Owl Carousel */
.owl-carousel,
.owl-carousel .owl-wrapper,
.owl-carousel .owl-item {
    visibility: visible !important;
}

.owl-carousel .owl-item img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.items-slide .slide-caption {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, transparent 100%) !important;
}

.items-slide .slide-caption a {
    color: #fff !important;
}

/* ===== SIDEBAR / DARKBOX ===== */
.darkBox {
    background-color: #14141f !important;
    border: 1px solid rgba(0, 245, 255, 0.15) !important;
    color: #f0f0f5 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.darkBox ul li {
    visibility: visible !important;
    opacity: 1 !important;
}

.darkBox ul li .thumb {
    background-color: #1a1a25 !important;
}

.darkBox ul li .thumb img {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

.darkBox h2 {
    color: #00f5ff !important;
    border-bottom: 1px solid rgba(0, 245, 255, 0.2) !important;
}

.darkBox ul li {
    border-color: rgba(255, 255, 255, 0.05) !important;
}

.darkBox a {
    color: #f0f0f5 !important;
}

.darkBox a:hover {
    color: #00f5ff !important;
}

.darkBox ul li .txt-rank {
    color: #505060 !important;
}

.darkBox ul li .txt-rank.pos1 {
    color: #00f5ff !important;
}

.darkBox ul li .txt-rank.pos2 {
    color: #a855f7 !important;
}

.darkBox ul li .txt-rank.pos3 {
    color: #ec4899 !important;
}

.darkBox ul li .chapter .viewed a {
    color: #606070 !important;
}

/* Box Tab */
.box-tab ul.tab-nav a {
    background-color: #1a1a25 !important;
    color: #a0a0b5 !important;
    border-top: 2px solid transparent !important;
}

.box-tab ul.tab-nav a.active,
.box-tab ul.tab-nav a:hover {
    background-color: #12121a !important;
    color: #00f5ff !important;
    border-top: 2px solid #00f5ff !important;
}

.box-tab .tab-pane {
    border-color: rgba(255, 255, 255, 0.05) !important;
}

/* ===== PAGINATION ===== */
.pagination > li > a,
.pagination > li > span {
    background-color: #1a1a25 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #a0a0b5 !important;
}

.pagination > li > a:hover {
    border-color: #00f5ff !important;
    color: #00f5ff !important;
}

.pagination > li.active > a {
    background: linear-gradient(135deg, #00f5ff, #a855f7) !important;
    border-color: transparent !important;
    color: #0a0a0f !important;
}

/* ===== BREADCRUMB ===== */
.breadcrumb {
    background-color: transparent !important;
    color: #f0f0f5 !important;
}

.breadcrumb a {
    color: #a0a0b5 !important;
}

.breadcrumb a:hover {
    color: #00f5ff !important;
}

.breadcrumb > .active {
    color: #f0f0f5 !important;
}

/* ===== FOOTER ===== */
.footer {
    background-color: #08080f !important;
    border-top: 1px solid rgba(0, 245, 255, 0.2) !important;
}

.footer .link-footer h4 {
    color: #00f5ff !important;
}

.footer .link-footer ul li a {
    background-color: rgba(20, 20, 40, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #a0a0b5 !important;
}

.footer .link-footer ul li a:hover {
    border-color: #00f5ff !important;
    color: #00f5ff !important;
}

.footer a {
    color: #a0a0b5 !important;
}

.footer a:hover {
    color: #00f5ff !important;
}

.footer .copyright p {
    color: #505060 !important;
}

/* ===== QUICK LINK ===== */
.quick-link {
    background-color: #08080f !important;
}

.quick-link ul li a {
    color: #606070 !important;
}

/* ===== MANGA DETAIL ===== */
#item-detail h1.title-detail {
    color: #f0f0f5 !important;
}

#item-detail .detail-info ul.list-info li p,
#item-detail .detail-info h2 {
    color: #a0a0b5 !important;
}

#item-detail .list-title {
    color: #00f5ff !important;
    border-bottom-color: #00f5ff !important;
}

#item-detail .list-chapter nav {
    background-color: #14141f !important;
    border: 1px solid rgba(0, 245, 255, 0.15) !important;
}

#item-detail .list-chapter nav ul li {
    border-color: rgba(255, 255, 255, 0.05) !important;
}

#item-detail .list-chapter nav ul li:hover {
    background-color: rgba(0, 245, 255, 0.05) !important;
}

#item-detail .detail-content p.shortened:before,
#item-detail .list-chapter .view-more:before {
    background: linear-gradient(rgba(18, 18, 26, 0), #12121a) !important;
}

#item-detail .list-chapter .view-more {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ===== CHAPTER READER ===== */
.chapter-detail {
    background-color: #050508 !important;
}

.chapter-detail .main .container {
    background-color: transparent !important;
}

.reading .top,
.reading .reading-control,
.reading .comment {
    background-color: #12121a !important;
}

.reading .reading-control .select-chapter {
    background-color: #1a1a25 !important;
    border: 1px solid rgba(0, 245, 255, 0.2) !important;
    color: #fff !important;
}

.reading .reading-control .prev,
.reading .reading-control .next {
    background: linear-gradient(135deg, #00f5ff, #a855f7) !important;
    border: none !important;
}

.reading .reading-control .action,
.reading .reading-control .next-raw {
    color: #00f5ff !important;
}

.reading .reading-control .chapter-nav.scroll-to-fixed-fixed {
    background-color: #12121a !important;
}

/* ===== TOOLTIP ===== */
#cluetip {
    background-color: #14141f !important;
    border: 1px solid rgba(0, 245, 255, 0.3) !important;
}

#cluetip .box_li .title {
    background-color: transparent !important;
    color: #00f5ff !important;
}

#cluetip .box_li .message_main p {
    color: #a0a0b5 !important;
}

#cluetip .box_li .message_main p label {
    color: #00f5ff !important;
}

/* ===== MODAL ===== */
.modal-content {
    background-color: #14141f !important;
    border: 1px solid rgba(0, 245, 255, 0.2) !important;
}

.modal-header {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.modal-title {
    color: #00f5ff !important;
}

.modal-footer {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.modal .chapter-list a {
    background-color: #1a1a25 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #a0a0b5 !important;
}

.modal .chapter-list a:hover {
    border-color: #00f5ff !important;
    color: #00f5ff !important;
}

.modal .chapter-list a.active {
    border-color: #ff00ff !important;
    color: #ff00ff !important;
}

.close {
    color: #fff !important;
}

/* ===== COMMENTS ===== */
.comment-list .item .summary .info {
    background-color: #1a1a25 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.comment-header {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.authorname {
    color: #00f5ff !important;
}

.new-comments .darkBox ul li h3 a:hover {
    color: #00f5ff !important;
}

.new-comments .darkBox ul li p {
    color: #a0a0b5 !important;
}

/* ===== LINKS ===== */
a {
    color: #00f5ff !important;
}

a:hover {
    color: #ff00ff !important;
}

/* ===== BUTTONS ===== */
.btn-primary,
.btn-danger {
    background: linear-gradient(135deg, #00f5ff, #a855f7) !important;
    border: none !important;
    color: #0a0a0f !important;
}

/* ===== DARK MODE TOGGLE ===== */
.toggle-dark {
    color: #00f5ff !important;
}

/* ===== BACK TO TOP ===== */
#back-to-top {
    background-color: #14141f !important;
    border: 1px solid #00f5ff !important;
    color: #00f5ff !important;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #00f5ff, #a855f7);
    border-radius: 4px;
}

/* ===== FORM CONTROLS ===== */
.form-control {
    background-color: #1a1a25 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

.form-control:focus {
    border-color: #00f5ff !important;
    box-shadow: 0 0 10px rgba(0, 245, 255, 0.2) !important;
}

/* ===== FILTER ===== */
.filter-icon {
    border-color: #00f5ff !important;
    color: #00f5ff !important;
}

/* ===== NAV TABS ===== */
.nav-tabs {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.nav-tabs > li {
    background-color: #1a1a25 !important;
}

.nav-tabs > li > a {
    color: #a0a0b5 !important;
    border-color: transparent !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background-color: #12121a !important;
    color: #00f5ff !important;
    border-color: transparent !important;
    border-top: 2px solid #00f5ff !important;
}

/* ===== COMIC FILTER ===== */
.comic-filter .nav-tabs li a {
    background-color: #1a1a25 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #a0a0b5 !important;
}

.comic-filter .nav-tabs li.active a {
    background: linear-gradient(135deg, #00f5ff, #a855f7) !important;
    color: #0a0a0f !important;
    border: none !important;
}

.comic-filter .sort-by a {
    background-color: #1a1a25 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #a0a0b5 !important;
}

.comic-filter .sort-by a.active {
    background: linear-gradient(135deg, #00f5ff, #a855f7) !important;
    color: #0a0a0f !important;
    border: none !important;
}

/* ===== GENRES ===== */
.genres ul li a {
    color: #a0a0b5 !important;
}

.genres ul li a:hover,
.genres ul li.active a {
    color: #00f5ff !important;
}

/* ===== USER ELEMENTS ===== */
.nav-account > li > a {
    color: #fff !important;
}

.nav-account > li > a:hover {
    color: #00f5ff !important;
}

/* ===== MOBILE ===== */
@media (max-width: 767px) {
    .navbar-collapse {
        background-color: #0a0a14 !important;
    }
    
    .navbar-toggle {
        background: linear-gradient(135deg, #00f5ff, #a855f7) !important;
    }
    
    .main-menu > li > a {
        color: #a0a0b5 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    }
    
    .main-menu > li.active > a,
    .main-menu > li > a:hover {
        color: #00f5ff !important;
        background-color: transparent !important;
    }
    
    .main-menu > li .megamenu ul li a {
        color: #a0a0b5 !important;
    }
    
    .main-menu > li .megamenu ul li.active a {
        color: #00f5ff !important;
    }
    
    .search-button-icon .fa {
        color: #00f5ff !important;
    }
}

/* ===== DISABLE OLD DARK MODE STYLES ===== */
.dark {
    background-color: #0a0a0f !important;
}

.dark .main .container {
    background-color: #12121a !important;
}

.dark a {
    color: #00f5ff !important;
}

.dark a:hover {
    color: #ff00ff !important;
}

/* ===== ENSURE ALL IMAGES VISIBLE ===== */
img {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Lazy loading support */
img.lazy,
img[data-src],
img[loading="lazy"] {
    background-color: #1a1a25 !important;
}

img.lazy.loaded,
img.lazyloaded {
    opacity: 1 !important;
}