/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
/*Dark Mode*/
/**
 * Dark Mode CSS - Custom Styles for WordPress + Flatsome Theme
 * Thêm vào Custom CSS trong WordPress hoặc tạo file riêng
 */

/* ===== ROOT VARIABLES ===== */
/* Light Mode Colors */
/*:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-tertiary: #adb5bd;
    --border-color: #dee2e6;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --card-bg: #ffffff;
    --header-bg: #ffffff;
    --footer-bg: #1a1a1a;
    --accent-color: #007bff;
    --success-color: #28a745;
    --warning-color: #ffc107;
    --danger-color: #dc3545;
}*/

/* Dark Mode Colors */
/*.dark {
    --bg-primary: #0d1117;
    --bg-secondary: #161b22;
    --bg-tertiary: #21262d;
    --text-primary: #e6edf3;
    --text-secondary: #8b949e;
    --text-tertiary: #6e7681;
    --border-color: #30363d;
    --shadow-color: rgba(0, 0, 0, 0.5);
    --card-bg: #161b22;
    --header-bg: #0d1117;
    --footer-bg: #0d1117;
    --accent-color: #58a6ff;
    --success-color: #3fb950;
    --warning-color: #d29922;
    --danger-color: #f85149;
}*/

/* ===== SMOOTH TRANSITIONS ===== */
/** {transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;}*/

/* ===== BASE STYLES ===== */
/*body {background-color: var(--bg-primary);color: var(--text-primary);}*/

/* ===== HEADER & NAVIGATION ===== */
/*.header,.header-wrapper,.header-main {background-color: var(--header-bg) !important;border-bottom-color: var(--border-color) !important;}
.nav-top,.nav-main {background-color: var(--header-bg) !important; } 
.nav-link, .menu-item a {color: var(--text-primary) !important; } 
.nav-link:hover, .menu-item a:hover {color: var(--accent-color) !important; }*/

/* Dark Mode Toggle Button Styling */ 
/*#dark-mode-toggle {position: relative; width: 50px; height: 50px; border-radius: 50%; background-color: var(--bg-tertiary); border: 2px solid var(--border-color); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; overflow: hidden; } 
#dark-mode-toggle:hover {background-color: var(--accent-color); border-color: var(--accent-color); transform: scale(1.05); } 
#dark-mode-toggle svg {width: 24px; height: 24px; color: var(--text-primary); transition: all 0.3s ease; } 
#dark-mode-toggle:hover svg {color: #ffffff; } */

/* ===== CONTENT SECTIONS ===== */ 
/*.section, .page-section {background-color: var(--bg-primary); color: var(--text-primary); } 
.section-bg, .bg-section {background-color: var(--bg-secondary) !important; } */

/* ===== BUTTONS ===== */ 
/*.button, .btn, .wp-block-button__link {background-color: var(--accent-color) !important; color: #ffffff !important; border-color: var(--accent-color) !important; } 
.button:hover, .btn:hover {opacity: 0.9; } .button.secondary {background-color: var(--bg-tertiary) !important; color: var(--text-primary) !important; } */

/* ===== FORMS ===== */ 
/*input, textarea, select, .form-control {background-color: var(--bg-secondary) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } 
input:focus, textarea:focus, select:focus {border-color: var(--accent-color) !important; background-color: var(--bg-tertiary) !important; } 
input::placeholder, textarea::placeholder {color: var(--text-tertiary) !important; } */

/* ===== TABLES ===== */ 
/*table {background-color: var(--card-bg); color: var(--text-primary); } 
table thead {background-color: var(--bg-tertiary); } 
table tr {border-bottom-color: var(--border-color); } 
table tr:hover {background-color: var(--bg-secondary); } */

/* ===== BADGES & LABELS ===== */ 
/*.badge, .label, .tag {background-color: var(--bg-tertiary); color: var(--text-primary); border-color: var(--border-color); } 
.badge.success {background-color: var(--success-color); color: #ffffff; } 
.badge.warning {background-color: var(--warning-color); color: #000000; } 
.badge.danger {background-color: var(--danger-color); color: #ffffff; } */

/* ===== FOOTER ===== */ 
/*.footer, .footer-wrapper {background-color: var(--footer-bg) !important; color: var(--text-secondary) !important; } 
.footer a {color: var(--text-secondary) !important; } 
.footer a:hover {color: var(--accent-color) !important; } */

/* ===== MODALS & POPUPS ===== */ 
/*.modal-content, .popup-content, .lightbox-content {background-color: var(--card-bg) !important; color: var(--text-primary) !important; } 
.modal-header, .popup-header {border-bottom-color: var(--border-color) !important; } 
.modal-footer, .popup-footer {border-top-color: var(--border-color) !important; } 
.close, .mfp-close {color: var(--text-primary) !important; } */

/* ===== BREADCRUMBS ===== */ 
/*.breadcrumbs {color: var(--text-secondary); } 
.breadcrumbs a {color: var(--text-secondary); } 
.breadcrumbs a:hover {color: var(--accent-color); } */

/* ===== SIDEBAR & WIDGETS ===== */ 
/*.sidebar, .widget {background-color: var(--card-bg); color: var(--text-primary); } 
.widget-title {color: var(--text-primary); border-bottom-color: var(--border-color); } */

/* ===== BLOG POSTS ===== */ 
/*.post, .article, .entry {background-color: var(--card-bg); color: var(--text-primary); } 
.post-title, .entry-title {color: var(--text-primary); } 
.post-meta, .entry-meta {color: var(--text-secondary); } */

/* ===== IMAGES ===== */ .dark img {opacity: 0.9; } 
/*.dark img:hover {opacity: 1; } */

/* ===== SHADOWS ===== */ 
/*.shadow, .box-shadow {box-shadow: 0 2px 8px var(--shadow-color) !important; } 
.shadow-lg {box-shadow: 0 4px 16px var(--shadow-color) !important; } */

/* ===== SCROLLBAR (Chrome, Safari, Edge) ===== */ 
/*.dark ::-webkit-scrollbar {width: 12px; height: 12px; } 
.dark ::-webkit-scrollbar-track {background: var(--bg-secondary); } 
.dark ::-webkit-scrollbar-thumb {background: var(--bg-tertiary); border-radius: 6px; } 
.dark ::-webkit-scrollbar-thumb:hover {background: var(--text-tertiary); } */

/* ===== SPECIFIC FLATSOME OVERRIDES ===== */ 
/*.dark .ux-menu-link__text {color: var(--text-primary) !important; } 
.dark .nav-dropdown {background-color: var(--card-bg) !important; } 
.dark .shop-container, .dark .product-container {background-color: var(--bg-primary); } 
.dark .price {color: var(--accent-color) !important; } 
.dark .star-rating span {color: var(--warning-color) !important; } 
*/
/* ===== RESPONSIVE ADJUSTMENTS ===== */ 
/*@media (max-width: 768px) {
  #dark-mode-toggle {width: 44px; height: 44px; } 
  #dark-mode-toggle svg {width: 20px; height: 20px; } 
} 
*/
/* ===== UTILITY CLASSES ===== */ 
/*.text-dark-mode {color: var(--text-primary) !important; } 
.bg-dark-mode {background-color: var(--bg-primary) !important; } 
.border-dark-mode {border-color: var(--border-color) !important; } */

/*Custom Code*/ 
.bg-brand-blue\/10 {background-color: rgb(59 130 246 / 0.1);} 
.header-bg-color{backdrop-filter: blur(20px);border-bottom: 1px solid rgba(255, 255, 255, 0.05);} 
.text-center > div > div,
.text-center > div{margin-left: unset; margin-right: unset;}

h1, h2, h3, h4, h5, h6{width: auto;}

body {
  background-color: #020617;
  background-image: radial-gradient(at 0% 0%, hsla(253, 16%, 7%, 1) 0, transparent 50%), radial-gradient(at 50% 0%, hsla(225, 39%, 30%, 1) 0, transparent 50%), radial-gradient(at 100% 0%, hsla(339, 49%, 30%, 1) 0, transparent 50%);
  background-attachment: fixed;
  color: #f8fafc;
}

textarea{min-height: 70px;}

.blog-archive.page-wrapper{padding-top: 0;}
.glass-panel {background: rgba(255, 255, 255, 0.03);backdrop-filter: blur(16px);-webkit-backdrop-filter: blur(16px);border: 1px solid rgba(255, 255, 255, 0.08);box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);}
#post-content h2 { font-size: 1.75rem; font-weight: 800; color: white; border-left: 4px solid #3b82f6; padding-left: 1rem; margin-top: 3rem; margin-bottom: 1.5rem; background: linear-gradient(to right, rgba(255,255,255,0.05), transparent); padding-top: 0.5rem; padding-bottom: 0.5rem; border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; }
@media (min-width: 768px) { #post-content h2 { font-size: 2rem; } }
#post-content h3 { font-size: 1.4rem; font-weight: 700; color: #3b82f6; margin-top: 2.5rem; margin-bottom: 1rem; display: flex; align-items: center; }
#post-content h4 { font-size: 1.2rem; font-weight: 600; color: #e2e8f0; margin-top: 2rem; margin-bottom: 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 0.25rem; display: inline-block; }
#post-content a { color: #60a5fa; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(96, 165, 250, 0.4); transition: all 0.2s ease; }
#post-content a:hover { color: #93c5fd; border-color: #93c5fd; background: rgba(59, 130, 246, 0.1); padding: 0 2px; border-radius: 2px; }
#post-content blockquote { border-left: 4px solid #f59e0b; background-color: rgba(255,255,255,0.03); padding: 1.5rem; border-radius: 0 0.5rem 0.5rem 0; color: #cbd5e1; font-style: italic; margin: 2rem 0; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
#post-content p { margin-bottom: 1.5rem; line-height: 1.8; }
#post-content ul { list-style-type: disc; padding-left: 1.5rem; margin-bottom: 1.5rem; }
#post-content ol { list-style-type: decimal; padding-left: 1.5rem; margin-bottom: 1.5rem; }
#post-content li { margin-bottom: 0.5rem; }
#post-content img { border-radius: 0.75rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); border: 1px solid rgba(255,255,255,0.05); max-width: 100%; height: auto; }


#main, #wrapper{background-color: unset;}

.absolute-footer{display: none;}
.footer-wrapper .ux-menu .ux-menu-link a {border:unset;transition-duration: 300ms;transition-property: all;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-duration: 150ms;color: rgb(148 163 184);
  font-size: 14px;}
.footer-wrapper .ux-menu .ux-menu-link a:hover{color: rgb(59 130 246);transform: translateX(0.25rem);}

@keyframes pulse {
  50% {opacity:.5}
}
.animate-pulse {animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}

.subtitle{color: rgb(245 158 11);border-radius: 99px;border: 1px solid rgb(255 255 255 / 0.1);background-color: rgb(255 255 255 / 0.05);font-size: 0.75rem;font-weight: 700;line-height: 1rem;padding: 0.25rem 0.75rem;margin-bottom: 1rem;display: inline-block;}
.heading-colorblue{color: transparent;-webkit-background-clip: text;background-clip: text;background-image: linear-gradient(to right, #60a5fa, #a855f7);}


/* Swiper Custom Navigation */
.swiper-button-next,
.swiper-button-prev {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    color: white !important;
    transition: all 0.3s ease;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
    border-color: #2563eb;
    transform: scale(1.1);
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 20px;
    font-weight: bold;
}

/* Swiper Pagination */
.swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.3);
    width: 10px;
    height: 10px;
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
    width: 30px;
    border-radius: 5px;
}

/* Star Rating */
.star-rating {
    color: #fbbf24;
}

/* Button Shine Effect */
.btn-buy {
    position: relative;
    overflow: hidden;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .swiper-button-next,
    .swiper-button-prev {
        width: 40px;
        height: 40px;
    }
}