:root {
            /* Cyberpunk Color Palette */
            --neon-cyan: #00ffff;
            --neon-pink: #ff0080;
            --neon-purple: #8000ff;
            --neon-green: #00ff41;
            --neon-orange: #ff8000;
            --neon-blue: #0080ff;
            --neon-yellow: #ffff00;
            --neon-red: #ff0040;
            
            /* Dark Theme */
            --bg-primary: #0a0a0f;
            --bg-secondary: #111118;
            --bg-tertiary: #1a1a24;
            --bg-card: #1e1e2e;
            --text-primary: #ffffff;
            --text-secondary: #b4b4c7;
            --text-muted: #6b6b7d;
            --border-color: #2a2a3a;
            
            /* Light Theme */
            --light-bg-primary: #f8fafc;
            --light-bg-secondary: #ffffff;
            --light-bg-tertiary: #f1f5f9;
            --light-bg-card: #ffffff;
            --light-text-primary: #1e293b;
            --light-text-secondary: #475569;
            --light-text-muted: #64748b;
            --light-border-color: #e2e8f0;
            
            /* Gradients */
            --gradient-primary: linear-gradient(135deg, var(--neon-cyan) 0%, var(--neon-purple) 50%, var(--neon-pink) 100%);
            --gradient-secondary: linear-gradient(135deg, var(--neon-blue) 0%, var(--neon-green) 100%);
            --gradient-tertiary: linear-gradient(135deg, var(--neon-orange) 0%, var(--neon-pink) 100%);
            --gradient-rainbow: linear-gradient(45deg, var(--neon-red), var(--neon-orange), var(--neon-yellow), var(--neon-green), var(--neon-cyan), var(--neon-blue), var(--neon-purple), var(--neon-pink));
            
            /* Shadows */
            --shadow-neon: 0 0 20px rgba(0, 255, 255, 0.3);
            --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.3);
            --shadow-hover: 0 16px 64px rgba(0, 255, 255, 0.2);
            --shadow-light: 0 4px 20px rgba(0, 0, 0, 0.1);
            --shadow-light-hover: 0 8px 40px rgba(0, 0, 0, 0.15);
        }

        [data-theme="light"] {
            --bg-primary: var(--light-bg-primary);
            --bg-secondary: var(--light-bg-secondary);
            --bg-tertiary: var(--light-bg-tertiary);
            --bg-card: var(--light-bg-card);
            --text-primary: var(--light-text-primary);
            --text-secondary: var(--light-text-secondary);
            --text-muted: var(--light-text-muted);
            --border-color: var(--light-border-color);
            --shadow-card: var(--shadow-light);
            --shadow-hover: var(--shadow-light-hover);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: var(--bg-primary);
            color: var(--text-primary);
            overflow-x: hidden;
            line-height: 1.6;
            transition: all 0.3s ease;
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: var(--bg-secondary);
        }

        ::-webkit-scrollbar-thumb {
            background: var(--gradient-primary);
            border-radius: 4px;
        }

        /* Mobile Touch Optimizations */
        @media (max-width: 768px) {
            ::-webkit-scrollbar {
                width: 4px;
            }
            
            /* Improve touch targets */
            .btn,
            .nav-link,
            .social-link,
            .project-link,
            .contact-item {
                min-height: 44px;
                min-width: 44px;
            }
            
            /* Reduce motion for better performance on mobile */
            @media (prefers-reduced-motion: reduce) {
                *,
                *::before,
                *::after {
                    animation-duration: 0.01ms !important;
                    animation-iteration-count: 1 !important;
                    transition-duration: 0.01ms !important;
                }
            }
            
            /* Optimize for mobile performance */
            .floating-particles {
                display: none;
            }
            
            .bg-shapes {
                opacity: 0.3;
            }
            
            .particle {
                display: none;
            }
        }

        /* Loading Screen */
        .loading-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--bg-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            transition: opacity 0.5s ease;
        }

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

        .loading-logo {
            font-family: 'Orbitron', monospace;
            font-size: 4rem;
            font-weight: 900;
            background: var(--gradient-rainbow);
            background-size: 400% 400%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 2rem;
            animation: rainbow-flow 3s ease-in-out infinite, pulse-glow 2s ease-in-out infinite;
        }

        .loading-spinner {
            width: 80px;
            height: 80px;
            border: 4px solid transparent;
            border-top: 4px solid var(--neon-cyan);
            border-right: 4px solid var(--neon-pink);
            border-bottom: 4px solid var(--neon-purple);
            border-left: 4px solid var(--neon-green);
            border-radius: 50%;
            animation: spin-rainbow 1s linear infinite;
            margin: 0 auto 1rem;
            position: relative;
        }

        .loading-spinner::before {
            content: '';
            position: absolute;
            top: -8px;
            left: -8px;
            right: -8px;
            bottom: -8px;
            border: 2px solid transparent;
            border-top: 2px solid var(--neon-orange);
            border-radius: 50%;
            animation: spin-rainbow 2s linear infinite reverse;
        }

        .loading-text {
            color: var(--text-secondary);
            font-size: 1.2rem;
            animation: fade-pulse 1.5s ease-in-out infinite;
            font-weight: 500;
        }

        @keyframes rainbow-flow {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }

        @keyframes spin-rainbow {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes pulse-glow {
            0%, 100% { filter: drop-shadow(0 0 20px var(--neon-cyan)); }
            25% { filter: drop-shadow(0 0 30px var(--neon-pink)); }
            50% { filter: drop-shadow(0 0 40px var(--neon-purple)); }
            75% { filter: drop-shadow(0 0 30px var(--neon-green)); }
        }

        @keyframes fade-pulse {
            0%, 100% { opacity: 0.5; }
            50% { opacity: 1; }
        }

        /* Animated Background */
        .bg-animated {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .bg-grid {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px);
            background-size: 50px 50px;
            animation: grid-move 20s linear infinite;
        }

        [data-theme="light"] .bg-grid {
            background-image: 
                linear-gradient(rgba(0, 150, 255, 0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 150, 255, 0.1) 1px, transparent 1px);
        }

        @keyframes grid-move {
            0% { transform: translate(0, 0); }
            100% { transform: translate(50px, 50px); }
        }

        .floating-particles {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .particle {
            position: absolute;
            width: 6px;
            height: 6px;
            background: var(--neon-cyan);
            border-radius: 50%;
            animation: float-up 15s linear infinite;
            box-shadow: 0 0 10px currentColor;
        }

        .particle:nth-child(2n) { background: var(--neon-pink); animation-duration: 18s; }
        .particle:nth-child(3n) { background: var(--neon-purple); animation-duration: 12s; }
        .particle:nth-child(4n) { background: var(--neon-green); animation-duration: 20s; }
        .particle:nth-child(5n) { background: var(--neon-orange); animation-duration: 16s; }
        .particle:nth-child(6n) { background: var(--neon-yellow); animation-duration: 14s; }

        @keyframes float-up {
            0% {
                transform: translateY(100vh) rotate(0deg) scale(0);
                opacity: 0;
            }
            10% { opacity: 1; transform: translateY(90vh) rotate(36deg) scale(1); }
            90% { opacity: 1; transform: translateY(-10vh) rotate(324deg) scale(1); }
            100% {
                transform: translateY(-100px) rotate(360deg) scale(0);
                opacity: 0;
            }
        }

        /* Geometric Shapes */
        .bg-shapes {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .shape {
            position: absolute;
            opacity: 0.1;
            animation: float-shapes 20s ease-in-out infinite;
        }

        .shape:nth-child(1) {
            top: 10%;
            left: 10%;
            width: 100px;
            height: 100px;
            background: var(--gradient-primary);
            border-radius: 50%;
            animation-delay: 0s;
        }

        .shape:nth-child(2) {
            top: 60%;
            right: 10%;
            width: 80px;
            height: 80px;
            background: var(--gradient-secondary);
            transform: rotate(45deg);
            animation-delay: 5s;
        }

        .shape:nth-child(3) {
            bottom: 20%;
            left: 20%;
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 87px solid var(--neon-purple);
            animation-delay: 10s;
        }

        @keyframes float-shapes {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            25% { transform: translateY(-20px) rotate(90deg); }
            50% { transform: translateY(-10px) rotate(180deg); }
            75% { transform: translateY(-30px) rotate(270deg); }
        }

        /* Navigation */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            padding: 1rem 0;
            background: rgba(10, 10, 15, 0.95);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--border-color);
            z-index: 1000;
            transition: all 0.3s ease;
            min-height: 80px;
            display: flex;
            align-items: center;

        }

        [data-theme="light"] .navbar {
            background: rgba(248, 250, 252, 0.9);
        }

        .navbar.scrolled {
            background: rgba(10, 10, 15, 0.95);
            box-shadow: var(--shadow-card);
            transform: translateY(0);
        }

        [data-theme="light"] .navbar.scrolled {
            background: rgba(248, 250, 252, 0.95);
        }

        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 80px;
        }

        .nav-logo {
            font-family: 'Orbitron', monospace;
            font-size: 1.8rem;
            font-weight: 700;
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .nav-logo:hover {
            filter: drop-shadow(0 0 10px var(--neon-cyan));
            transform: scale(1.05);
        }

        .nav-menu {
            display: flex;
            list-style: none;
            gap: 2rem;
        }

        .nav-link {
            color: var(--text-secondary);
            text-decoration: none;
            font-weight: 500;
            position: relative;
            transition: all 0.3s ease;
            padding: 0.5rem 1rem;
            border-radius: 8px;
        }

        .nav-link::before {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 50%;
            width: 0;
            height: 2px;
            background: var(--gradient-primary);
            transition: all 0.3s ease;
            transform: translateX(-50%);
        }

        .nav-link::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--gradient-primary);
            opacity: 0;
            border-radius: 8px;
            transition: all 0.3s ease;
            z-index: -1;
        }

        .nav-link:hover,
        .nav-link.active {
            color: var(--text-primary);
            transform: translateY(-2px);
        }

        .nav-link:hover::before,
        .nav-link.active::before {
            width: 80%;
        }

        .nav-link:hover::after {
            opacity: 0.1;
        }

        .nav-toggle {
            display: none;
            background: none;
            border: none;
            color: var(--text-primary);
            font-size: 1.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .nav-toggle:hover {
            transform: scale(1.1);
            color: var(--neon-cyan);
        }

        .theme-toggle {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            color: var(--text-primary);
            padding: 0.7rem;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 1.2rem;
            position: relative;
            overflow: hidden;
        }

        .theme-toggle::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: var(--gradient-primary);
            transition: left 0.3s ease;
            z-index: -1;
        }

        .theme-toggle:hover {
            color: white;
            box-shadow: var(--shadow-neon);
            transform: scale(1.05);
        }

        .theme-toggle:hover::before {
            left: 0;
        }

        /* Hero Section */
        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            padding: 0 2rem;
            position: relative;
            perspective: 1000px;
            scroll-margin-top: 100px;
            padding-top: 100px;
        }

        .hero-container {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
        }

        .hero-content {
            animation: slide-in-left 1s ease-out;
        }

        .hero-greeting {
            color: var(--neon-cyan);
            font-size: 1.3rem;
            margin-bottom: 1rem;
            font-family: 'JetBrains Mono', monospace;
            animation: typing 2s steps(20) 1s both;
        }

        @keyframes typing {
            from { width: 0; }
            to { width: 100%; }
        }

        .hero-title {
            font-family: 'Orbitron', monospace;
            font-size: 4rem;
            font-weight: 900;
            line-height: 1.1;
            margin-bottom: 1rem;
            background: var(--gradient-rainbow);
            background-size: 400% 400%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: rainbow-flow 4s ease-in-out infinite;
            position: relative;
        }

        .hero-title::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--gradient-primary);
            opacity: 0;
            filter: blur(20px);
            animation: title-glow 3s ease-in-out infinite;
            z-index: -1;
        }

        @keyframes title-glow {
            0%, 100% { opacity: 0; transform: scale(1); }
            50% { opacity: 0.3; transform: scale(1.05); }
        }

        .hero-subtitle {
            font-size: 1.6rem;
            color: var(--text-secondary);
            margin-bottom: 2rem;
            position: relative;
            height: 2em;
        }

        .rotating-text {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            animation: text-rotate 16s infinite;
            background: var(--gradient-secondary);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-weight: 600;
        }

        .rotating-text:nth-child(1) { animation-delay: 0s; }
        .rotating-text:nth-child(2) { animation-delay: 4s; }
        .rotating-text:nth-child(3) { animation-delay: 8s; }
        .rotating-text:nth-child(4) { animation-delay: 12s; }

        @keyframes text-rotate {
            0%, 25% { opacity: 1; transform: translateY(0) rotateX(0deg); }
            33%, 100% { opacity: 0; transform: translateY(-20px) rotateX(90deg); }
        }

        .hero-description {
            color: var(--text-muted);
            font-size: 1.2rem;
            margin-bottom: 2rem;
            line-height: 1.8;
            animation: fade-in-up 1s ease-out 0.5s both;
        }

        @keyframes fade-in-up {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .hero-buttons {
            display: flex;
            gap: 1rem;
            margin-bottom: 3rem;
            animation: fade-in-up 1s ease-out 0.7s both;
        }

        .btn {
            padding: 1.2rem 2.5rem;
            border: none;
            border-radius: 12px;
            font-weight: 600;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            font-size: 1.1rem;
        }

        .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.6s;
        }

        .btn:hover::before {
            left: 100%;
        }

        .btn-primary {
            background: var(--gradient-primary);
            color: white;
            box-shadow: var(--shadow-neon);
        }

        .btn-primary:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: var(--shadow-hover);
        }

        .btn-secondary {
            background: transparent;
            color: var(--text-primary);
            border: 2px solid var(--neon-cyan);
            position: relative;
        }

        .btn-secondary::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--neon-cyan);
            opacity: 0;
            transition: all 0.3s ease;
            z-index: -1;
        }

        .btn-secondary:hover {
            color: var(--bg-primary);
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 0 30px var(--neon-cyan);
        }

        .btn-secondary:hover::after {
            opacity: 1;
        }

        .hero-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            animation: fade-in-up 1s ease-out 0.9s both;
        }

        .stat-item {
            text-align: center;
            padding: 1.5rem;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .stat-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.1), transparent);
            transition: left 0.6s;
        }

        .stat-item:hover::before {
            left: 100%;
        }

        .stat-item:hover {
            transform: translateY(-5px) rotateX(5deg);
            box-shadow: var(--shadow-hover);
            border-color: var(--neon-cyan);
        }

        .stat-number {
            font-family: 'Orbitron', monospace;
            font-size: 3rem;
            font-weight: 700;
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            display: block;
            margin-bottom: 0.5rem;
        }

        .stat-label {
            color: var(--text-muted);
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 500;
        }

        .hero-visual {
            display: flex;
            justify-content: center;
            align-items: center;
            animation: slide-in-right 1s ease-out;
            perspective: 1000px;
        }

        .hero-avatar {
            width: 450px;
            height: 450px;
            background: var(--gradient-rainbow);
            background-size: 400% 400%;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10rem;
            color: white;
            position: relative;
            animation: float 20s ease-in-out infinite, rainbow-flow 4s ease-in-out infinite;
            box-shadow: 0 0 50px rgba(0, 255, 255, 0.3);
        }

        .hero-avatar::before {
            content: '';
            position: absolute;
            top: -30px;
            left: -30px;
            right: -30px;
            bottom: -30px;
            background: var(--gradient-primary);
            border-radius: 50%;
            z-index: -1;
            opacity: 0.2;
            animation: pulse 3s ease-in-out infinite;
        }

        .hero-avatar::after {
            content: '';
            position: absolute;
            top: -50px;
            left: -50px;
            right: -50px;
            bottom: -50px;
            background: var(--gradient-secondary);
            border-radius: 50%;
            z-index: -2;
            opacity: 0.1;
            animation: pulse 4s ease-in-out infinite reverse;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px) rotateY(0deg); }
            25% { transform: translateY(-20px) rotateY(90deg); }
            50% { transform: translateY(-10px) rotateY(180deg); }
            75% { transform: translateY(-15px) rotateY(270deg); }
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 0.2; }
            50% { transform: scale(1.1); opacity: 0.1; }
        }

        @keyframes slide-in-left {
            0% { transform: translateX(-100px) rotateY(-30deg); opacity: 0; }
            100% { transform: translateX(0) rotateY(0deg); opacity: 1; }
        }

        @keyframes slide-in-right {
            0% { transform: translateX(100px) rotateY(30deg); opacity: 0; }
            100% { transform: translateX(0) rotateY(0deg); opacity: 1; }
        }

        /* Section Styles */
        .section {
            padding: 8rem 2rem;
            position: relative;
            scroll-margin-top: 120px;
        }

        .section-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .section-header {
            text-align: center;
            margin-bottom: 5rem;
        }

        .section-title {
            font-family: 'Orbitron', monospace;
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            background: var(--gradient-rainbow);
            background-size: 400% 400%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: rainbow-flow 4s ease-in-out infinite;
            position: relative;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            width: 100px;
            height: 4px;
            background: var(--gradient-primary);
            transform: translateX(-50%);
            border-radius: 2px;
        }

        .section-subtitle {
            color: var(--text-muted);
            font-size: 1.3rem;
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.6;
        }

        /* Cards */
        .card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            padding: 2.5rem;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(10px);
        }

        .card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.1), transparent);
            transition: left 0.6s;
        }

        .card:hover::before {
            left: 100%;
        }

        .card:hover {
            transform: translateY(-15px) rotateX(5deg);
            box-shadow: var(--shadow-hover);
            border-color: var(--neon-cyan);
        }

        /* Skills Section */
        .skills-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 2.5rem;
        }

        .skill-category {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            padding: 2.5rem;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }

        .skill-category::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--gradient-primary);
            opacity: 0;
            transition: all 0.4s ease;
            z-index: -1;
        }

        .skill-category:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: var(--shadow-hover);
            border-color: var(--neon-cyan);
        }

        .skill-category:hover::before {
            opacity: 0.05;
        }

        .skill-icon {
            width: 70px;
            height: 70px;
            background: var(--gradient-primary);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            color: white;
            margin-bottom: 1.5rem;
            transition: all 0.3s ease;
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
        }

        .skill-category:hover .skill-icon {
            transform: rotateY(180deg) scale(1.1);
            box-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
        }

        .skill-title {
            font-size: 1.4rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
            color: var(--text-primary);
        }

        .skill-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.2rem;
        }

        .skill-name {
            color: var(--text-secondary);
            font-weight: 500;
            font-size: 1.1rem;
        }

        .skill-level {
            color: var(--neon-cyan);
            font-weight: 600;
            font-family: 'JetBrains Mono', monospace;
            font-size: 1rem;
        }

        .skill-bar {
            height: 10px;
            background: var(--bg-tertiary);
            border-radius: 5px;
            overflow: hidden;
            margin-top: 0.5rem;
            position: relative;
        }

        .skill-progress {
            height: 100%;
            background: var(--gradient-primary);
            border-radius: 5px;
            transition: width 2s ease;
            position: relative;
            overflow: hidden;
        }

        .skill-progress::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            animation: shimmer 2s infinite;
        }

        @keyframes shimmer {
            0% { left: -100%; }
            100% { left: 100%; }
        }

        /* Projects Section */
        .projects-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
            gap: 2.5rem;
        }

        .project-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            overflow: hidden;
            transition: all 0.4s ease;
            position: relative;
            perspective: 1000px;
        }

        .project-card:hover {
            transform: translateY(-15px) rotateX(5deg) rotateY(5deg);
            box-shadow: var(--shadow-hover);
            border-color: var(--neon-cyan);
        }

        .project-image {
            height: 220px;
            background: var(--gradient-secondary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3.5rem;
            color: white;
            position: relative;
            overflow: hidden;
        }

        .project-image::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
            transform: translateX(-100%);
            transition: transform 0.6s;
        }

        .project-card:hover .project-image::before {
            transform: translateX(100%);
        }

        .project-content {
            padding: 2.5rem;
        }

        .project-title {
            font-size: 1.4rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: var(--text-primary);
            transition: all 0.3s ease;
        }

        .project-card:hover .project-title {
            color: var(--neon-cyan);
        }

        .project-description {
            color: var(--text-secondary);
            margin-bottom: 1.5rem;
            line-height: 1.7;
            font-size: 1.1rem;
        }

        .project-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.7rem;
            margin-bottom: 2rem;
        }

        .project-tag {
            background: var(--bg-tertiary);
            color: var(--neon-cyan);
            padding: 0.4rem 1rem;
            border-radius: 25px;
            font-size: 0.9rem;
            font-weight: 500;
            border: 1px solid var(--border-color);
            transition: all 0.3s ease;
        }

        .project-tag:hover {
            background: var(--neon-cyan);
            color: var(--bg-primary);
            transform: scale(1.05);
        }

        .project-links {
            display: flex;
            gap: 1.5rem;
        }

        .project-link {
            color: var(--neon-cyan);
            text-decoration: none;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.3s ease;
            padding: 0.5rem 1rem;
            border-radius: 8px;
            border: 1px solid var(--border-color);
        }

        .project-link:hover {
            color: var(--neon-pink);
            transform: translateX(5px) scale(1.05);
            background: var(--bg-tertiary);
            box-shadow: 0 0 15px rgba(255, 0, 128, 0.3);
        }

        /* Contact Section */
        .contact-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 5rem;
            align-items: start;
        }

        .contact-info {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

        .contact-item {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            padding: 2rem;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            transition: all 0.4s ease;
            text-decoration: none;
            color: inherit;
            position: relative;
            overflow: hidden;
        }

        .contact-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: var(--gradient-primary);
            opacity: 0;
            transition: all 0.4s ease;
            z-index: -1;
        }

        .contact-item:hover {
            transform: translateX(15px) scale(1.02);
            border-color: var(--neon-cyan);
            box-shadow: var(--shadow-neon);
        }

        .contact-item:hover::before {
            left: 0;
            opacity: 0.1;
        }

        .contact-icon {
            width: 60px;
            height: 60px;
            background: var(--gradient-primary);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: white;
            transition: all 0.3s ease;
        }

        .contact-item:hover .contact-icon {
            transform: rotateY(180deg) scale(1.1);
        }

        .contact-details h4 {
            color: var(--text-primary);
            margin-bottom: 0.5rem;
            font-size: 1.2rem;
        }

        .contact-details p {
            color: var(--text-secondary);
            margin: 0;
            font-size: 1.1rem;
        }

        .social-links {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
        }

        .social-link {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1.5rem;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            color: var(--text-primary);
            text-decoration: none;
            transition: all 0.4s ease;
            font-size: 1.8rem;
            position: relative;
            overflow: hidden;
        }

        .social-link::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--gradient-primary);
            opacity: 0;
            transition: all 0.3s ease;
            z-index: -1;
        }

        .social-link:hover {
            transform: translateY(-8px) rotateZ(5deg);
            box-shadow: var(--shadow-neon);
            color: white;
        }

        .social-link:hover::before {
            opacity: 1;
        }

        .social-link.github:hover { box-shadow: 0 0 30px rgba(51, 51, 51, 0.5); }
        .social-link.facebook:hover { box-shadow: 0 0 30px rgba(24, 119, 242, 0.5); }
        .social-link.instagram:hover { box-shadow: 0 0 30px rgba(228, 64, 95, 0.5); }
        .social-link.tiktok:hover { box-shadow: 0 0 30px rgba(255, 0, 80, 0.5); }
        .social-link.email:hover { box-shadow: 0 0 30px rgba(234, 67, 53, 0.5); }
        .social-link.phone:hover { box-shadow: 0 0 30px rgba(0, 255, 65, 0.5); }

        /* Footer */
        .footer {
            background: var(--bg-secondary);
            border-top: 1px solid var(--border-color);
            padding: 3rem 2rem;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--gradient-primary);
        }

        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .footer-text {
            color: var(--text-muted);
            font-size: 1.1rem;
        }

        .footer-badges {
            display: flex;
            gap: 1rem;
        }

        .badge {
            background: var(--bg-tertiary);
            color: var(--neon-cyan);
            padding: 0.7rem 1.5rem;
            border-radius: 25px;
            font-size: 0.9rem;
            font-weight: 500;
            border: 1px solid var(--border-color);
            transition: all 0.3s ease;
        }

        .badge:hover {
            background: var(--neon-cyan);
            color: var(--bg-primary);
            transform: scale(1.05);
        }

        /* Progress Bar */
        .progress-bar {
            position: fixed;
            top: 0;
            left: 0;
            width: 0%;
            height: 4px;
            background: var(--gradient-rainbow);
            background-size: 400% 400%;
            z-index: 1001;
            transition: width 0.3s ease;
            animation: rainbow-flow 2s ease-in-out infinite;
        }

        /* Responsive Design */
        @media (max-width: 1024px) {
            .nav-container {
                padding: 0 1.5rem;
            }
            
            .hero-container {
                gap: 3rem;
            }
            
            .hero-title {
                font-size: 3.2rem;
            }
            
            .hero-avatar {
                width: 380px;
                height: 380px;
                font-size: 8rem;
            }
            
            .section {
                padding: 6rem 1.5rem;
            }
        }

        @media (max-width: 768px) {
            .navbar {
                padding: 0.8rem 0;
            }
            
            .nav-container {
                padding: 0 1rem;
            }
            
            .nav-menu {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                background: rgba(17, 17, 24, 0.98);
                backdrop-filter: blur(20px);
                flex-direction: column;
                padding: 2rem;
                border-top: 1px solid var(--border-color);
                box-shadow: var(--shadow-card);
                z-index: 999;
            }
            
            [data-theme="light"] .nav-menu {
                background: rgba(248, 250, 252, 0.98);
            }
            
            .nav-menu.active {
                display: flex;
                animation: slideDown 0.3s ease;
            }
            
            @keyframes slideDown {
                from { opacity: 0; transform: translateY(-20px); }
                to { opacity: 1; transform: translateY(0); }
            }
            
            .nav-link {
                padding: 1rem;
                font-size: 1.1rem;
                border-radius: 12px;
                margin-bottom: 0.5rem;
                text-align: center;
            }
            
            .nav-toggle {
                display: block;
            }
            
            .theme-toggle {
                padding: 0.6rem;
                font-size: 1.1rem;
            }
            
            .hero {
                padding: 8rem 1rem 4rem;
                min-height: calc(100vh - 80px);
            }
            
            .hero-container {
                grid-template-columns: 1fr;
                text-align: center;
                gap: 3rem;
                max-width: 100%;
            }
            
            .hero-title {
                font-size: 2.8rem;
                line-height: 1.2;
                margin-bottom: 1.5rem;
                margin-top: 1rem;
                padding-top: 1rem;
            }
            
            .hero-subtitle {
                font-size: 1.3rem;
                margin-bottom: 1.5rem;
            }
            
            .hero-description {
                font-size: 1.1rem;
                margin-bottom: 2rem;
                padding: 0 1rem;
            }
            
            .hero-avatar {
                width: 280px;
                height: 280px;
                font-size: 6rem;
                margin: 0 auto;
            }
            
            .hero-stats {
                grid-template-columns: repeat(3, 1fr);
                gap: 1rem;
                margin-top: 2rem;
            }
            
            .stat-item {
                padding: 1.2rem 0.8rem;
            }
            
            .stat-number {
                font-size: 2.2rem;
            }
            
            .stat-label {
                font-size: 0.9rem;
            }
            
            .hero-buttons {
                flex-direction: column;
                gap: 1rem;
                margin-bottom: 2rem;
            }
            
            .btn {
                justify-content: center;
                padding: 1rem 2rem;
                font-size: 1rem;
                width: 100%;
                max-width: 280px;
                margin: 0 auto;
            }
            
            .section {
                padding: 5rem 1rem;
                scroll-margin-top: 100px;
            }
            
            .section-title {
                font-size: 2.5rem;
                margin-bottom: 0.8rem;
            }
            
            .section-subtitle {
                font-size: 1.1rem;
                padding: 0 1rem;
            }
            
            .section-header {
                margin-bottom: 3rem;
            }
            
            .skills-grid,
            .projects-grid {
                grid-template-columns: 1fr;
                gap: 2rem;
            }
            
            .skill-category,
            .project-card {
                padding: 2rem 1.5rem;
            }
            
            .contact-grid {
                grid-template-columns: 1fr;
                gap: 3rem;
            }
            
            .social-links {
                grid-template-columns: repeat(3, 1fr);
                gap: 1rem;
            }
            
            .social-link {
                padding: 1.2rem;
                font-size: 1.5rem;
            }
            
            .footer {
                padding: 2rem 1rem;
            }
            
            .footer-content {
                flex-direction: column;
                gap: 1.5rem;
                text-align: center;
            }
            
            .footer-badges {
                justify-content: center;
                flex-wrap: wrap;
                gap: 0.8rem;
            }
            
            .badge {
                padding: 0.6rem 1.2rem;
                font-size: 0.85rem;
            }
            
            .scroll-top {
                width: 50px;
                height: 50px;
                bottom: 1.5rem;
                right: 1.5rem;
                font-size: 1.2rem;
            }
        }

        @media (max-width: 480px) {
            .navbar {
                padding: 0.8rem 0;
                min-height: 70px;
            }
            
            .nav-container {
                padding: 0 0.8rem;
            }
            
            .nav-logo {
                font-size: 1.5rem;
            }
            
            .hero {
                padding: 6rem 0.8rem 3rem;
                scroll-margin-top: 70px;

            }
            
            .hero-title {
                font-size: 2.2rem;
                line-height: 1.1;
                margin-top: 1.5rem;
                padding-top: 1.5rem;
            }
            
            .hero-greeting {
                font-size: 1.1rem;
            }
            
            .hero-subtitle {
                font-size: 1.2rem;
            }
            
            .hero-description {
                font-size: 1rem;
                padding: 0;
            }
            
            .hero-avatar {
                width: 240px;
                height: 240px;
                font-size: 5rem;
            }
            
            .hero-stats {
                gap: 0.8rem;
            }
            
            .stat-item {
                padding: 1rem 0.6rem;
            }
            
            .stat-number {
                font-size: 1.8rem;
            }
            
            .stat-label {
                font-size: 0.8rem;
            }
            
            .section {
                padding: 4rem 0.8rem;
                scroll-margin-top: 80px;
            }
            
            .section-title {
                font-size: 2rem;
                line-height: 1.2;
            }
            
            .section-subtitle {
                font-size: 1rem;
                padding: 0;
            }
            
            .card,
            .skill-category,
            .project-card {
                padding: 1.5rem 1rem;
            }
            
            .skill-icon {
                width: 60px;
                height: 60px;
                font-size: 1.5rem;
            }
            
            .skill-title {
                font-size: 1.2rem;
            }
            
            .skill-name {
                font-size: 1rem;
            }
            
            .project-title {
                font-size: 1.2rem;
            }
            
            .project-description {
                font-size: 1rem;
            }
            
            .project-tags {
                gap: 0.5rem;
            }
            
            .project-tag {
                padding: 0.3rem 0.8rem;
                font-size: 0.8rem;
            }
            
            .contact-item {
                padding: 1.5rem 1rem;
            }
            
            .contact-icon {
                width: 50px;
                height: 50px;
                font-size: 1.3rem;
            }
            
            .contact-details h4 {
                font-size: 1.1rem;
            }
            
            .contact-details p {
                font-size: 1rem;
            }
            
            .social-links {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .social-link {
                padding: 1rem;
                font-size: 1.3rem;
            }
            
            .scroll-top {
                width: 45px;
                height: 45px;
                bottom: 1rem;
                right: 1rem;
                font-size: 1.1rem;
            }
        }

        @media (max-width: 360px) {
            .navbar {
                padding: 0.6rem 0;
                min-height: 65px;
            }
            
            .hero {
                padding: 5.5rem 0.6rem 3rem;
                scroll-margin-top: 65px;
                
            }
            
            .hero-title {
                font-size: 1.8rem;
                margin-top: 2rem;
                padding-top: 2rem;
            }
            
            .section {
                padding: 3.5rem 0.6rem;
                scroll-margin-top: 75px;
            }
            
            .section-title {
                font-size: 1.8rem;
            }
            
            .hero-avatar {
                width: 200px;
                height: 200px;
                font-size: 4rem;
            }
            
            .hero-stats {
                grid-template-columns: 1fr;
                max-width: 200px;
                margin: 2rem auto 0;
            }
            
            .social-links {
                grid-template-columns: 1fr;
                max-width: 200px;
                margin: 0 auto;
            }
        }

        /* Animation Classes */
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.6s ease;
        }

        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .slide-in-left {
            opacity: 0;
            transform: translateX(-50px);
            transition: all 0.6s ease;
        }

        .slide-in-left.visible {
            opacity: 1;
            transform: translateX(0);
        }

        .slide-in-right {
            opacity: 0;
            transform: translateX(50px);
            transition: all 0.6s ease;
        }

        .slide-in-right.visible {
            opacity: 1;
            transform: translateX(0);
        }

        .scale-in {
            opacity: 0;
            transform: scale(0.8);
            transition: all 0.6s ease;
        }

        .scale-in.visible {
            opacity: 1;
            transform: scale(1);
        }

        @media (hover: hover) {
            .cursor,
            .cursor-follower {
                opacity: 1;
            }
        }

        /* Scroll to top button */
        .scroll-top {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            width: 60px;
            height: 60px;
            background: var(--gradient-primary);
            border: none;
            border-radius: 50%;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
            opacity: 0;
            visibility: hidden;
            z-index: 1000;
        }

        .scroll-top.visible {
            opacity: 1;
            visibility: visible;
        }

        .scroll-top:hover {
            transform: translateY(-5px) scale(1.1);
            box-shadow: var(--shadow-hover);
        }

        /* Matrix code effect */
        .matrix-column {
            position: absolute;
            top: 0;
            font-family: monospace;
            font-size: 18px;  /* Tăng kích thước chữ */
            font-weight: bolder; /* Làm chữ đậm hơn */
            color: rgb(0, 255, 0);  /* Tăng độ sáng màu chữ */
            text-shadow: 
                0 0 5px rgba(0, 255, 0, 0.8),   /* Thêm bóng mờ sáng */
                0 0 10px rgba(0, 255, 0, 0.9),  /* Bóng sáng hơn */
                0 0 20px rgba(0, 255, 0, 1),    /* Tạo hiệu ứng sáng mạnh mẽ hơn */
                0 0 30px rgba(0, 255, 0, 0.9);  /* Tăng độ sáng của bóng */
            opacity: 1;  /* Đảm bảo không bị mờ */
            animation: matrix-fall 5s linear infinite;
        }


        @keyframes matrix-fall {
            0% {
                transform: translateY(-100vh);
                opacity: 0;
            }
            100% {
                transform: translateY(100vh);
                opacity: 1;
            }
        }

        .matrix-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
            opacity: 0.05;
        }

        @keyframes grid-move {
            0% {
                transform: translate(0, 0);
            }
            100% {
                transform: translate(50px, 50px);
            }
        }

        .bg-grid {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px);
            background-size: 50px 50px;
            animation: grid-move 20s linear infinite;
        }
         
        /* ====== All Projects Modal ====== */
        .ap-overlay{
        position:fixed; inset:0; background:rgba(0,0,0,.5);
        display:none; align-items:center; justify-content:center;
        z-index:2000; backdrop-filter: blur(6px);
        }
        .ap-overlay.show{display:flex;}

        .ap-modal{
        width:min(1200px, 92vw); height:min(88vh, 900px);
        background:var(--bg-card); border:1px solid var(--border-color);
        border-radius:20px; box-shadow: var(--shadow-hover);
        display:flex; flex-direction:column; overflow:hidden;
        }

        .ap-header{
        display:flex; align-items:center; justify-content:space-between;
        padding:1rem 1.25rem; border-bottom:1px solid var(--border-color);
        background: linear-gradient(135deg, rgba(0,255,255,.05), transparent);
        }
        .ap-header h3{
        margin:0; font-family:'Orbitron',monospace; font-weight:800;
        background:var(--gradient-primary); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
        }
        .ap-close{
        background:transparent; border:none; color:var(--text-secondary);
        font-size:1.3rem; cursor:pointer; padding:.5rem; border-radius:10px;
        transition:.2s;
        }
        .ap-close:hover{ color:var(--text-primary); transform:rotate(90deg) scale(1.1); }

        .ap-toolbar{
        display:flex; gap:1rem; padding:1rem 1.25rem; flex-wrap:wrap;
        border-bottom:1px solid var(--border-color); background:var(--bg-secondary);
        }
        .ap-input{
        flex:1; display:flex; align-items:center; gap:.6rem;
        background:var(--bg-tertiary); border:1px solid var(--border-color);
        padding:.75rem 1rem; border-radius:12px;
        }
        .ap-input input{
        width:100%; background:transparent; border:none; outline:none; color:var(--text-primary);
        font-size:1rem;
        }

        .ap-filters{ display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
        .ap-filters select{
        background:var(--bg-tertiary); color:var(--text-primary);
        border:1px solid var(--border-color); padding:.7rem .9rem; border-radius:10px;
        }
        .ap-tags{ display:flex; gap:.6rem; flex-wrap:wrap; max-width:520px; }
        .ap-tag{
        padding:.45rem .8rem; border:1px solid var(--border-color); border-radius:999px;
        font-size:.9rem; cursor:pointer; color:var(--neon-cyan); background:var(--bg-tertiary);
        transition:.15s; user-select:none;
        }
        .ap-tag.active{ background:var(--neon-cyan); color:var(--bg-primary); box-shadow:0 0 18px rgba(0,255,255,.35); }

        .ap-grid{
        padding:1.25rem; overflow:auto; display:grid;
        grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap:1.25rem; flex:1;
        }
        .ap-card{
        background:var(--bg-card); border:1px solid var(--border-color); border-radius:16px;
        display:flex; flex-direction:column; overflow:hidden; transition:.25s; position:relative;
        }
        .ap-card:hover{ transform: translateY(-6px) scale(1.02); box-shadow:var(--shadow-hover); border-color:var(--neon-cyan); }
        .ap-thumb{
        height:160px; background:var(--gradient-secondary); display:flex; align-items:center; justify-content:center;
        font-size:2rem; color:white; position:relative; overflow:hidden;
        }
        .ap-thumb::before{
        content:''; position:absolute; inset:0;
        background:linear-gradient(45deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
        transform:translateX(-100%); transition: transform .6s;
        }
        .ap-card:hover .ap-thumb::before{ transform:translateX(100%); }

        .ap-body{ padding:1rem 1rem 0; display:flex; flex-direction:column; gap:.4rem; }
        .ap-title{ font-weight:700; font-size:1.05rem; }
        .ap-desc{ color:var(--text-secondary); font-size:.95rem; line-height:1.5; min-height:3.1em; }

        .ap-chiprow{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.4rem; }
        .ap-chip{
        font-size:.8rem; padding:.25rem .6rem; border-radius:999px;
        border:1px solid var(--border-color); color:var(--neon-cyan); background:var(--bg-tertiary);
        }

        .ap-actions{
        display:flex; gap:.6rem; padding:1rem; border-top:1px solid var(--border-color); margin-top:auto;
        }
        .ap-btn{
        flex:1; display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
        border:none; border-radius:10px; padding:.6rem .8rem; cursor:pointer; transition:.2s;
        background:var(--bg-tertiary); color:var(--text-primary);
        border:1px solid var(--border-color);
        }
        .ap-btn:hover{ transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.15); }
        .ap-btn.primary{ background:var(--gradient-primary); color:#fff; box-shadow:var(--shadow-neon); border:none; }

        .ap-footer{
        display:flex; align-items:center; justify-content:space-between;
        padding:.9rem 1.25rem; border-top:1px solid var(--border-color); background:var(--bg-secondary);
        }
        .ap-count{ color:var(--text-secondary); font-size:.95rem; }
        .ap-pager{ display:flex; gap:.4rem; flex-wrap:wrap; }
        .ap-page{
        min-width:38px; height:38px; border-radius:10px; border:1px solid var(--border-color);
        background:var(--bg-tertiary); color:var(--text-primary); cursor:pointer; transition:.2s;
        }
        .ap-page.active{ background:var(--neon-cyan); color:var(--bg-primary); box-shadow:0 0 16px rgba(0,255,255,.35); }
        .ap-page:hover{ transform:translateY(-2px); }

        @media (max-width:768px){
        .ap-grid{ grid-template-columns: 1fr 1fr; }
        }
        @media (max-width:520px){
        .ap-grid{ grid-template-columns: 1fr; }
        }
        /* —— Modal layout: header / toolbar (sticky) / grid (scroll) / footer —— */
        .ap-modal{
        display:grid;
        grid-template-rows: auto /* header */ auto /* toolbar */ 1fr /* grid */ auto /* footer */;
        }

        /* Toolbar giữ cố định khi cuộn danh sách */
        .ap-toolbar{
        position: sticky;
        top: 0;
        z-index: 2;
        }

        /* Khu vực grid cuộn độc lập, luôn vừa khung */
        .ap-grid{
        overflow: auto;
        height: 100%;
        max-height: calc(88vh - 180px); /* 88vh (modal) - header+toolbar+footer */
        padding: 1.25rem;
        display:grid;
        grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
        gap: 1.25rem;
        }

        /* Scrollbar đẹp cho ap-grid */
        .ap-grid::-webkit-scrollbar { width: 10px; }
        .ap-grid::-webkit-scrollbar-track { background: var(--bg-secondary); border-radius: 8px; }
        .ap-grid::-webkit-scrollbar-thumb {
        background: var(--gradient-primary);
        border-radius: 8px;
        border: 2px solid transparent;
        background-clip: padding-box;
        }

        /* Chip All nổi bật hơn một chút (tuỳ thích) */
        .ap-tag[data-tag="All"].active{
        box-shadow: 0 0 22px rgba(0,255,255,.45);
        }


/* OVERDRIVE ADD-ONS 2025-08-27 */
#spotlight{position:fixed;inset:0;pointer-events:none;z-index:1;background:radial-gradient(600px 400px at var(--sx,50%) var(--sy,50%), rgba(0,255,255,.10), rgba(128,0,255,.06) 35%, transparent 70%);opacity:.65;mix-blend-mode:screen;}
#dotnav{position:fixed;right:18px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px;z-index:1200;}
#dotnav a{width:10px;height:10px;border-radius:50%;display:block;position:relative;border:1px solid var(--border-color);background:rgba(255,255,255,.08);transition:transform .2s ease, box-shadow .2s ease, background .2s ease;}
#dotnav a.active{transform:scale(1.35);background:var(--neon-cyan);box-shadow:0 0 12px rgba(0,255,255,.5);}
#dotnav a:hover{transform:scale(1.25);}
#toTop{position:fixed;right:20px;bottom:24px;z-index:1200;opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease;background:rgba(0,0,0,.6);border:1px solid var(--border-color);border-radius:12px;padding:.5rem .7rem;color:#fff;}
#toTop.show{opacity:1;pointer-events:auto;}
.hero-title.apex{ position:relative; }
.hero-title.apex::before{content: attr(data-text); position:absolute; inset:0; pointer-events:none; transform: translate(2px, 0); mix-blend-mode:screen; text-shadow: -2px 0 rgba(0,255,255,.3); opacity:0; transition: opacity .2s ease;}
.hero-title.apex:hover::before{ opacity:1; }
.hero-title.apex{ --scan: linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.18), rgba(255,255,255,.0)); background-image: var(--scan); background-size: 15% 100%; background-repeat: no-repeat; background-position: -20% 0; }
.hero-title.apex:hover{ animation: scan-move 2s linear infinite; }
@keyframes scan-move{ to{ background-position: 120% 0; } }
#project-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px;}
#project-filters .pill{padding:.4rem .75rem;border:1px solid var(--border-color);border-radius:999px;background:rgba(255,255,255,.04);cursor:pointer;transition:transform .18s ease, box-shadow .25s ease;}
#project-filters .pill.active{background:linear-gradient(90deg, var(--neon-cyan), var(--neon-purple));color:#000;box-shadow:0 6px 18px rgba(0,255,255,.25);}
#dotnav a::after{content:attr(data-label);position:absolute;right:150%;top:50%;transform:translateY(-50%);white-space:nowrap;background:rgba(0,0,0,.7);color:#fff;padding:.25rem .45rem;border-radius:8px;font-size:.75rem;opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;border:1px solid var(--border-color);}
#dotnav a:hover::after{opacity:1;transform:translateY(-50%) translateX(-2px);}
@media (max-width: 900px){ #dotnav{display:none;} #spotlight{opacity:.35;} }


/* ============================
   MOTION-X (2025-08-27)
   Extra motion, safe & performant
   ============================ */

/* Parallax layers container */
#parallaxHost{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Base layer styles */
.parallax-layer{
  position: absolute; inset:0;
  will-change: transform, opacity;
  opacity: .5;
}

/* Layer: code streaks */
.parallax-streaks{
  opacity:.25;
  background:
    repeating-linear-gradient( 75deg, rgba(0,255,255,.12) 0 2px, transparent 2px 140px),
    repeating-linear-gradient(-75deg, rgba(128,0,255,.08) 0 2px, transparent 2px 160px);
  mix-blend-mode: screen;
}

/* Layer: grid flare */
.parallax-flare{
  opacity:.22;
  background:
    radial-gradient(800px 500px at 60% 20%, rgba(0,255,255,.18), transparent 60%),
    radial-gradient(600px 400px at 20% 70%, rgba(128,0,255,.14), transparent 70%);
  filter: blur(4px);
}

/* Layer: subtle neon blobs */
.parallax-blobs{
  opacity:.18;
  background:
    radial-gradient(500px 500px at 10% 30%, rgba(255,0,128,.16), transparent 60%),
    radial-gradient(500px 500px at 90% 70%, rgba(0,255,255,.16), transparent 60%);
  animation: blob-shift 18s ease-in-out infinite alternate;
}
@keyframes blob-shift{
  from{ transform: translate3d(0,0,0) scale(1); }
  to{ transform: translate3d(0,-20px,0) scale(1.06); }
}

/* Text split reveal */
.splitted .char{
  display:inline-block;
  transform: translateY(16px) rotate(0.5deg);
  opacity:0;
  animation: char-rise .65s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(var(--i) * 22ms);
}
@keyframes char-rise{
  to{ transform: translateY(0) rotate(0); opacity:1; }
}

/* Float utility for images/cards */
.anim-float{ animation: float-y 6s ease-in-out infinite; }
@keyframes float-y{
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(-8px) }
}

/* Ken Burns on hover for media inside card */
.kenburns{ overflow:hidden; border-radius: inherit; }
.kenburns img{ display:block; width:100%; transform-origin:center; transition: transform 6s ease; }
.kenburns:hover img{ transform: scale(1.08) translate3d(2px, -2px, 0); }

/* Click ripple for .btn */
.btn{ position:relative; overflow:hidden; }
.btn .ripple{
  position:absolute; width:8px; height:8px; border-radius:50%;
  left:var(--x); top:var(--y); transform: translate(-50%, -50%) scale(1);
  background: radial-gradient(circle, rgba(0,255,255,.6), rgba(0,255,255,.0) 60%);
  animation: ripple .6s ease-out forwards;
}
@keyframes ripple{
  to{ transform: translate(-50%, -50%) scale(18); opacity:0; }
}

/* Make sure hero sits above parallax */
.hero, .top-bar{ position:relative; z-index: 2; }

@media (max-width: 900px){
  #parallaxHost{ opacity:.6; }
  .parallax-streaks{ display:none; }
}