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

        body {
            font-family: 'Quicksand', sans-serif;
            background: linear-gradient(135deg, #ffe4f2 0%, #ffeef7 50%, #fff5fb 100%);
            min-height: 100vh;
            height: 100vh;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 10px;
            position: relative;
            overflow-x: hidden;
        }

        /* Floating leaves animation */
        .leaf {
            position: fixed;
            width: 30px;
            height: 30px;
            opacity: 0.6;
            z-index: 1;
            pointer-events: none;
            animation: float 15s infinite ease-in-out;
        }

        .leaf:nth-child(1) {
            left: 10%;
            animation-delay: 0s;
        }

        .leaf:nth-child(2) {
            left: 30%;
            animation-delay: 2s;
        }

        .leaf:nth-child(3) {
            left: 50%;
            animation-delay: 4s;
        }

        .leaf:nth-child(4) {
            left: 70%;
            animation-delay: 6s;
        }

        .leaf:nth-child(5) {
            left: 90%;
            animation-delay: 8s;
        }

        @keyframes float {
            0% {
                transform: translateY(-100vh) rotate(0deg);
                opacity: 0;
            }

            10% {
                opacity: 0.6;
            }

            90% {
                opacity: 0.6;
            }

            100% {
                transform: translateY(100vh) rotate(360deg);
                opacity: 0;
            }
        }

        /* Orange slices decoration */
        .orange-slice {
            position: fixed;
            font-size: 40px;
            opacity: 0.3;
            z-index: 1;
            pointer-events: none;
            animation: rotate 20s infinite linear;
        }

        .orange-slice:nth-child(6) {
            top: 10%;
            left: 5%;
        }

        .orange-slice:nth-child(7) {
            top: 80%;
            right: 8%;
            animation-delay: -5s;
        }

        .orange-slice:nth-child(8) {
            top: 30%;
            right: 15%;
            animation-delay: -10s;
        }

        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        .container {
            max-width: 450px;
            width: 100%;
            position: relative;
            z-index: 10;
            max-height: 100vh;
        }

        .container::-webkit-scrollbar {
            width: 6px;
        }

        .container::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.3);
            border-radius: 10px;
        }

        .container::-webkit-scrollbar-thumb {
            background: #ffc4dd;
            border-radius: 10px;
        }

        /* Top controls */
        .top-controls {
            display: flex;
            justify-content: space-between;
            margin-bottom: 12px;
            padding: 0 10px;
        }

        .control-btn {
            background: rgba(255, 255, 255, 0.9);
            border: none;
            border-radius: 50%;
            width: 45px;
            height: 45px;
            font-size: 22px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .control-btn:hover {
            transform: scale(1.1) rotate(10deg);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
        }

        .control-btn:active {
            transform: scale(0.95);
        }

        /* Main profile card */
        .profile-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 25px;
            padding: 25px 20px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
            margin-bottom: 12px;
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(10px);
        }

        .profile-card::before {
            content: '';
            position: absolute;
            top: -10px;
            right: -10px;
            width: 100px;
            height: 100px;
            opacity: 0.1;
            transform: rotate(-15deg);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath fill='%23e879b9' d='M35.885 11.833c0-5.45-4.418-9.868-9.867-9.868-3.308 0-6.227 1.633-8.018 4.129-1.791-2.496-4.71-4.129-8.017-4.129-5.45 0-9.868 4.417-9.868 9.868 0 .772.098 1.52.266 2.241C1.751 22.587 11.216 31.568 18 34.034c6.783-2.466 16.249-11.447 17.617-19.959.17-.721.268-1.469.268-2.242z'/%3E%3C/svg%3E");
            background-size: contain;
            background-repeat: no-repeat;
        }

        /* Header section */
        .profile-header {
            text-align: center;
            margin-bottom: 20px;
        }

        .avatar-container {
            position: relative;
            width: 110px;
            height: 110px;
            margin: 0 auto 15px;
            animation: bounce 2s infinite ease-in-out;
        }

        .avatar {
            width: 110px;
            height: 110px;
            border-radius: 50%;
            border: 4px solid #fff;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            object-fit: cover;
            position: relative;
            z-index: 1;
        }

        .avatar-frame {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 132px;
            height: 132px;
            pointer-events: none;
            z-index: 2;
        }

        @keyframes bounce {

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

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

        .status-badge {
            position: absolute;
            bottom: 3px;
            right: 3px;
            width: 28px;
            height: 28px;
            background: #ffc4dd;
            border-radius: 50%;
            border: 2px solid white;
            animation: pulse 2s infinite;
            z-index: 3;
        }

        @keyframes pulse {

            0%,
            100% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.1);
            }
        }

        .name {
            font-family: 'Fredoka', sans-serif;
            font-size: 28px;
            font-weight: 700;
            color: #e879b9;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .tagline {
            font-size: 15px;
            color: #f5a3c7;
            font-weight: 500;
            font-style: italic;
        }

        /* User info section */
        .user-info {
            background: linear-gradient(135deg, #fff0f8 0%, #ffe8f3 100%);
            border-radius: 15px;
            padding: 15px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 12px;
            box-shadow: 0 5px 15px rgba(255, 192, 221, 0.2);
        }

        .user-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 2px solid white;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            object-fit: cover;
        }

        .user-details {
            flex: 1;
        }

        .username {
            font-family: 'Fredoka', sans-serif;
            font-size: 17px;
            font-weight: 600;
            color: #e879b9;
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 4px;
        }

        .bio {
            font-size: 13px;
            color: #f5a3c7;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        /* Stats section */
        .stats {
            display: flex;
            justify-content: space-around;
            margin-top: 15px;
            padding-top: 15px;
            border-top: 2px dashed #ffc4dd;
        }

        .stat-item {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 14px;
            color: #e879b9;
            font-weight: 600;
        }

        .stat-icon {
            font-size: 18px;
            display: inline-flex;
            align-items: center;
            vertical-align: middle;
        }

        /* Animated emoji styles */
        .animated-emoji {
            display: inline-block;
            vertical-align: middle;
            image-rendering: -webkit-optimize-contrast;
            image-rendering: crisp-edges;
            /* Smooth rendering for animated PNGs */
            /* Pull up animated icons by 10% of their height for better alignment */
            transform: translateY(-10%);
        }

        /* Ensure stat icons with animated emoji render smoothly */
        .stat-icon img.animated-emoji {
            width: 20px;
            height: 20px;
            object-fit: contain;
        }

        /* Inline icon styles for profile section */
        .icon-flower-inline,
        .icon-sparkle-left,
        .icon-sparkle-right,
        .icon-username-deco,
        .icon-location-inline,
        .icon-sunflower-inline {
            display: inline-flex;
            align-items: center;
            vertical-align: middle;
            margin: 0 2px;
        }

        /* Links section */
        .links-section {
            margin-top: 20px;
            text-align: center;
        }

        /* Wrapper cho animation breathe-shake */
        .link-button-wrapper {
            display: inline-block;
            width: 100%;
            animation: button-breathe-shake 5s ease-in-out infinite;
        }

        .link-button {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
            padding: 16px 30px;
            background: transparent;
            border: 3px solid #ffc4dd;
            border-radius: 25px;
            text-decoration: none;
            color: #e879b9;
            font-weight: 700;
            font-size: 18px;
            font-family: 'Fredoka', sans-serif;
            letter-spacing: 1px;
            text-transform: uppercase;
            transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                border-color 0.8s ease,
                color 0.8s ease;
            box-shadow: 0 0 0 0 rgba(232, 121, 185, 0);
            position: relative;
            overflow: hidden;
            cursor: pointer;
            width: 100%;
        }

        /* Combined animation - breathe + shake mỗi 5 giây */
        @keyframes button-breathe-shake {

            /* 0-3s: breathe nhẹ nhàng */
            0% {
                transform: scale(1);
            }

            15% {
                transform: scale(1.012);
            }

            30% {
                transform: scale(1);
            }

            45% {
                transform: scale(1.012);
            }

            60% {
                transform: scale(1);
            }

            /* 60-68%: shake chậm rãi, nhẹ nhàng */
            62% {
                transform: scale(1.012) rotate(0deg);
            }

            64% {
                transform: scale(1.012) rotate(-0.6deg);
            }

            66% {
                transform: scale(1.012) rotate(0.6deg);
            }

            68% {
                transform: scale(1.012) rotate(-0.4deg);
            }

            70% {
                transform: scale(1.012) rotate(0deg);
            }

            /* 70-100%: tiếp tục breathe */
            80% {
                transform: scale(1.012);
            }

            90% {
                transform: scale(1);
            }

            100% {
                transform: scale(1);
            }
        }

        /* Gentle glow background */
        .link-button::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 25px;
            background: linear-gradient(135deg, #fff0f8 0%, #ffe8f3 100%);
            opacity: 0;
            transition: opacity 0.8s ease;
            z-index: -1;
        }

        .link-button:hover::before {
            opacity: 0.5;
        }

        /* Shimmer effect */
        .link-button::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -100%;
            width: 100%;
            height: 200%;
            background: linear-gradient(90deg,
                    transparent,
                    rgba(255, 192, 221, 0.4),
                    transparent);
            transform: rotate(25deg);
            transition: left 1s ease-out;
            z-index: -1;
        }

        .link-button:hover::after {
            left: 200%;
        }

        /* Hover state - smooth lift up */
        .link-button:hover {
            transform: translateY(-6px) scale(1.02);
            box-shadow: 0 8px 25px rgba(255, 192, 221, 0.4),
                0 0 0 6px rgba(232, 121, 185, 0.08);
            border-color: #e879b9;
            color: #e879b9;
        }

        /* Active state - smooth press down */
        .link-button:active {
            transform: translateY(-3px) scale(0.98);
            box-shadow: 0 8px 20px rgba(255, 192, 221, 0.4);
            transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.2s ease;
        }

        /* Icon animations */
        .link-icon {
            font-size: 28px;
            animation: pulse-icon 2s ease-in-out infinite;
            filter: drop-shadow(0 0 8px rgba(232, 121, 185, 0.3));
        }

        @keyframes pulse-icon {

            0%,
            100% {
                transform: scale(1) rotate(0deg);
            }

            25% {
                transform: scale(1.15) rotate(-5deg);
            }

            50% {
                transform: scale(1.25) rotate(0deg);
            }

            75% {
                transform: scale(1.15) rotate(5deg);
            }
        }

        .link-button:hover .link-icon {
            animation: pulse-icon-fast 1s ease-in-out infinite;
        }

        @keyframes pulse-icon-fast {

            0%,
            100% {
                transform: scale(1.1) rotate(0deg);
            }

            50% {
                transform: scale(1.4) rotate(10deg);
            }
        }

        /* Text styling */
        .link-text {
            font-family: 'Fredoka', sans-serif;
            letter-spacing: 1.5px;
            text-shadow: 0 2px 4px rgba(255, 192, 221, 0.2);
            position: relative;
            z-index: 1;
        }

        /* Arrow animations */
        .link-arrow {
            font-size: 24px;
            animation: sparkle-bounce 2s ease-in-out infinite;
            filter: drop-shadow(0 0 8px rgba(232, 121, 185, 0.3));
        }

        @keyframes sparkle-bounce {

            0%,
            100% {
                opacity: 1;
                transform: scale(1) translateX(0) rotate(0deg);
            }

            20% {
                transform: scale(1.2) translateX(3px) rotate(15deg);
            }

            40% {
                opacity: 0.8;
                transform: scale(1.4) translateX(0) rotate(-15deg);
            }

            60% {
                transform: scale(1.2) translateX(3px) rotate(15deg);
            }

            80% {
                opacity: 1;
                transform: scale(1) translateX(0) rotate(0deg);
            }
        }

        .link-button:hover .link-arrow {
            animation: sparkle-bounce-fast 1s ease-in-out infinite;
        }

        @keyframes sparkle-bounce-fast {

            0%,
            100% {
                transform: scale(1.3) translateX(5px) rotate(20deg);
            }

            50% {
                transform: scale(1.6) translateX(8px) rotate(-20deg);
            }
        }

        /* Music player card */
        .music-player {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 18px;
            padding: 12px 15px;
            box-shadow: 0 10px 30px rgba(255, 192, 221, 0.2);
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }

        .music-player:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 35px rgba(255, 192, 221, 0.3);
        }

        .song-info {
            display: flex;
            align-items: center;
            gap: 12px;
            flex: 1;
            min-width: 0;
        }

        .album-art {
            width: 50px;
            height: 50px;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(255, 192, 221, 0.3);
            object-fit: cover;
            flex-shrink: 0;
            transition: transform 0.3s ease;
        }

        .music-player.playing .album-art {
            animation: gentle-pulse 2s ease-in-out infinite;
        }

        @keyframes gentle-pulse {

            0%,
            100% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.05);
            }
        }

        .song-details {
            flex: 1;
            min-width: 0;
        }

        .now-playing {
            font-size: 10px;
            color: #f5a3c7;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            margin-bottom: 4px;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .music-icon {
            font-size: 11px;
            animation: music-pulse 1.5s ease-in-out infinite;
        }

        @keyframes music-pulse {

            0%,
            100% {
                transform: scale(1);
                opacity: 1;
            }

            50% {
                transform: scale(1.2);
                opacity: 0.8;
            }
        }

        .song-title {
            font-family: 'Fredoka', sans-serif;
            font-size: 16px;
            font-weight: 600;
            color: #e879b9;
            margin-bottom: 3px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .artist {
            font-size: 12px;
            color: #f5a3c7;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Play/Pause Button */
        .play-pause-btn {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            border: 2px solid #ffc4dd;
            background: linear-gradient(135deg, #fff0f8 0%, #ffe8f3 100%);
            color: #e879b9;
            font-size: 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(255, 192, 221, 0.2);
            flex-shrink: 0;
        }

        .play-pause-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 20px rgba(255, 192, 221, 0.4);
            background: linear-gradient(135deg, #ffe8f3 0%, #ffd6e8 100%);
            border-color: #ffb3d4;
        }

        .play-pause-btn:active {
            transform: scale(0.95);
        }

        .play-icon {
            display: inline-block;
            transition: transform 0.3s ease;
            /* width: 18px;
            height: 18px; */
        }

        /* SVG play/pause icons styling */
        .play-pause-icon {
            width: 100% !important;
            height: 100% !important;
        }

        /* Play button hover effect */
        .play-pause-btn:hover .play-icon {
            transform: scale(1.1);
        }

        .play-pause-btn:active .play-icon {
            transform: scale(0.9);
        }

        /* Footer */
        .footer {
            text-align: center;
            margin-top: 12px;
            padding: 15px 10px;
            color: #e879b9;
            font-size: 13px;
        }

        @keyframes wiggle {

            0%,
            100% {
                transform: rotate(0deg);
            }

            25% {
                transform: rotate(-10deg);
            }

            75% {
                transform: rotate(10deg);
            }
        }

        /* Responsive */
        @media (max-width: 480px) {
            .profile-card {
                padding: 30px 20px;
            }

            .name {
                font-size: 28px;
            }

            .tagline {
                font-size: 16px;
            }
        }

        /* ============================================
           EXPANDED VIEW STYLES
           ============================================ */

        /* Container States */
        .container {
            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .container[data-view-state="compact"] .compact-view {
            opacity: 1;
            transform: scale(1);
            pointer-events: auto;
            visibility: visible;
        }

        .container[data-view-state="compact"] .expanded-view {
            opacity: 0;
            transform: scale(0.95);
            pointer-events: none;
            visibility: hidden;
        }

        .container[data-view-state="expanded"] .compact-view {
            opacity: 0;
            transform: scale(0.95);
            pointer-events: none;
            visibility: hidden;
        }

        .container[data-view-state="expanded"] .expanded-view {
            opacity: 1;
            transform: scale(1);
            pointer-events: auto;
            visibility: visible;
        }

        /* Expanded View Container */
        .expanded-view {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 1000;
            display: flex;
            flex-direction: column;
            background: linear-gradient(135deg, #ffe4f2 0%, #ffeef7 50%, #fff5fb 100%);
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Back Button */
        .back-button {
            position: fixed;
            top: 20px;
            left: 20px;
            z-index: 1001;
            background: rgba(255, 255, 255, 0.95);
            border: 2px solid #ffc4dd;
            border-radius: 50px;
            padding: 12px 24px;
            font-size: 16px;
            font-weight: 600;
            color: #e879b9;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(255, 192, 221, 0.3);
            display: flex;
            align-items: center;
            gap: 8px;
            transform: scale(0.8);
            /* Scale xuống 0.8 */
            transform-origin: top left;
            /* Giữ vị trí góc trái */
        }

        .back-button:hover {
            transform: translateX(-5px) scale(0.84);
            /* 0.8 × 1.05 = 0.84 */
            box-shadow: 0 6px 20px rgba(255, 192, 221, 0.4);
            background: linear-gradient(135deg, #fff0f8 0%, #ffe8f3 100%);
        }

        .back-button:active {
            transform: translateX(-5px) scale(0.784);
            /* 0.8 × 0.98 = 0.784 */
        }

        /* Carousel Container */
        .carousel-container {
            flex: 1;
            overflow-y: scroll;
            overflow-x: hidden;
            scroll-behavior: auto;
            /* Changed to auto for custom control */
            /* scroll-snap-type removed for custom smooth scrolling */
            -webkit-overflow-scrolling: touch;
        }

        /* Hide scrollbar but keep functionality */
        .carousel-container::-webkit-scrollbar {
            width: 8px;
        }

        .carousel-container::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.3);
            border-radius: 10px;
        }

        .carousel-container::-webkit-scrollbar-thumb {
            background: #ffc4dd;
            border-radius: 10px;
        }

        .carousel-container::-webkit-scrollbar-thumb:hover {
            background: #ffb3d4;
        }

        /* Content Section */
        .content-section {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 80px 20px 60px;
            /* scroll-snap-align removed for custom control */
            position: relative;
            opacity: 1;
            /* Always visible, no fade */
        }

        /* Cute pattern background */
        .content-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image:
                radial-gradient(circle at 15% 25%, rgba(255, 192, 221, 0.04) 2px, transparent 2px),
                radial-gradient(circle at 85% 75%, rgba(232, 121, 185, 0.04) 2px, transparent 2px),
                radial-gradient(circle at 45% 60%, rgba(245, 163, 199, 0.03) 2px, transparent 2px);
            background-size: 60px 60px, 80px 80px, 100px 100px;
            pointer-events: none;
            z-index: 0;
        }

        /* Hide content by default - NO TRANSFORM to prevent layout shift */
        .content-section .section-content {
            opacity: 0;
            /* NO initial transform - prevents page jump after animation */
        }

        .content-section h2 {
            opacity: 0;
            /* NO initial transform - prevents title jump after animation */
        }

        /* Show and animate when active */
        .content-section.active .section-content {
            opacity: 1;
            animation: section-enter 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            /* Increased duration for smoother feel */
        }

        .content-section.active h2 {
            opacity: 1;
            animation: title-slide-in 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.05s backwards;
        }

        /* Section enter animations với hiệu ứng khác nhau cho mỗi section */
        .content-section[data-section="about"].active .section-content {
            animation: slide-from-left 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .content-section[data-section="contact"].active .section-content {
            animation: slide-from-right 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .content-section[data-section="favorites"].active .section-content {
            animation: slide-from-bottom 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        @keyframes slide-from-left {
            0% {
                transform: translateX(-60px);
                /* Reduced distance for smoother feel */
                opacity: 0;
            }

            100% {
                transform: translateX(0);
                opacity: 1;
            }
        }

        @keyframes slide-from-right {
            0% {
                transform: translateX(60px);
                /* Reduced for smoother feel */
                opacity: 0;
            }

            100% {
                transform: translateX(0);
                opacity: 1;
            }
        }

        @keyframes slide-from-bottom {
            0% {
                transform: translateY(60px);
                /* Reduced for smoother feel */
                opacity: 0;
            }

            100% {
                transform: translateY(0);
                opacity: 1;
            }
        }

        @keyframes title-slide-in {
            0% {
                transform: translateY(-30px);
                opacity: 0;
            }

            100% {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .content-section h2 {
            font-family: 'Fredoka', sans-serif;
            font-size: 36px;
            color: #e879b9;
            margin-bottom: 30px;
            text-align: center;
            display: flex;
            align-items: center;
            gap: 15px;
        }

        /* Section Content Card */
        .section-content {
            max-width: 800px;
            width: 100%;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 25px;
            padding: 35px;
            box-shadow: 0 20px 60px rgba(255, 192, 221, 0.2);
            backdrop-filter: blur(10px);
            position: relative;
            z-index: 1;
        }

        /* Scroll Indicator - Always visible, transforms to back button at end */
        .scroll-indicator {
            position: fixed;
            bottom: 20px;
            /* Sát xuống: 30px → 20px */
            left: 50%;
            transform: translateX(-50%) scale(0.9);
            /* Scale toàn bộ xuống 0.9 */
            transform-origin: center bottom;
            /* Scale từ giữa-dưới */
            z-index: 1001;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            /* Sát nhau hơn: 8px → 4px */
            opacity: 1;
            transition: all 0.4s ease;
            pointer-events: none;
            cursor: pointer;
        }

        /* Enable pointer events when it becomes back button */
        .scroll-indicator.is-back-button {
            pointer-events: auto;
        }

        .scroll-indicator .scroll-text {
            color: #e879b9;
            font-size: 12px;
            /* Nhỏ hơn: 14px → 12px */
            font-weight: 500;
            /* Mỏng hơn: 600 → 500 */
            letter-spacing: 1.5px;
            /* Rộng hơn cho elegant: 0.5px → 1.5px */
            text-transform: uppercase;
            animation: bounce-glow 2s ease-in-out infinite;
            /* Dùng chung với arrow */
            text-shadow: 0 2px 6px rgba(232, 121, 185, 0.2);
            /* Nhẹ hơn */
            transition: all 0.3s ease;
        }

        /* Back button state - minimalist & elegant */
        .scroll-indicator.is-back-button .scroll-text {
            animation: none;
            background: transparent;
            color: #e879b9;
            padding: 10px 20px;
            /* Nhỏ hơn: 12px×24px → 10px×20px */
            border-radius: 50px;
            box-shadow: 0 3px 12px rgba(232, 121, 185, 0.15);
            /* Nhẹ hơn */
            border: 1.5px solid #e879b9;
            /* Mỏng hơn: 2px → 1.5px */
            position: relative;
            font-weight: 600;
            /* Giảm: 700 → 600 */
            letter-spacing: 1.2px;
            /* Giảm: 0.8px → 1.2px */
            opacity: 1;
        }

        /* Gentle outer glow - tinh tế hơn */
        .scroll-indicator.is-back-button .scroll-text::before {
            content: '';
            position: absolute;
            inset: -3px;
            /* Gần hơn: -4px → -3px */
            border-radius: 52px;
            border: 1px solid rgba(232, 121, 185, 0.2);
            /* Mờ hơn */
            opacity: 0.4;
            /* Nhẹ hơn: 0.6 → 0.4 */
            pointer-events: none;
        }

        .scroll-indicator.is-back-button .scroll-text:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 18px rgba(232, 121, 185, 0.25);
            /* Vừa phải hơn */
            border-color: #f5a3c7;
            color: #f5a3c7;
        }

        .scroll-indicator.is-back-button .scroll-text:hover::before {
            opacity: 0.7;
            /* Vừa phải: 1 → 0.7 */
            border-color: rgba(245, 163, 199, 0.4);
            /* Mờ hơn */
        }

        .scroll-arrow {
            font-size: 24px;
            /* Nhỏ hơn: 32px → 24px */
            animation: bounce-glow 2s ease-in-out infinite;
            /* Animation chung */
            filter: drop-shadow(0 0 6px rgba(232, 121, 185, 0.3));
            /* Nhẹ hơn */
            transition: all 0.3s ease;
        }

        /* Rotate arrow up when at last section */
        .scroll-indicator.is-back-button .scroll-arrow {
            transform: rotate(180deg);
            animation: bounce-glow-reverse 2s ease-in-out infinite;
        }

        /* Animation chung cho text + arrow - đồng bộ hoàn toàn */
        @keyframes bounce-glow {

            0%,
            100% {
                transform: translateY(0px);
                filter: drop-shadow(0 0 6px rgba(232, 121, 185, 0.3));
            }

            25% {
                filter: drop-shadow(0 0 8px rgba(232, 121, 185, 0.5));
            }

            50% {
                transform: translateY(10px);
                /* Bounce xuống */
                filter: drop-shadow(0 0 10px rgba(232, 121, 185, 0.6));
            }

            75% {
                filter: drop-shadow(0 0 8px rgba(232, 121, 185, 0.5));
            }
        }

        @keyframes bounce-glow-reverse {

            0%,
            100% {
                transform: rotate(180deg) translateY(0px);
                filter: drop-shadow(0 0 6px rgba(232, 121, 185, 0.3));
            }

            25% {
                filter: drop-shadow(0 0 8px rgba(232, 121, 185, 0.5));
            }

            50% {
                transform: rotate(180deg) translateY(-10px);
                filter: drop-shadow(0 0 10px rgba(232, 121, 185, 0.6));
            }

            75% {
                filter: drop-shadow(0 0 8px rgba(232, 121, 185, 0.5));
            }
        }

        /* Section Dots Navigation */
        .section-dots {
            position: fixed;
            right: 30px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 1001;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .section-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 192, 221, 0.4);
            border: 2px solid #ffc4dd;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .section-dot.active {
            background: #e879b9;
            transform: scale(1.3);
            box-shadow: 0 0 15px rgba(232, 121, 185, 0.5);
        }

        .section-dot:hover {
            background: #f5a3c7;
            transform: scale(1.2);
        }

        /* Toast Notification */
        .toast-notification {
            position: fixed;
            bottom: -100px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(255, 255, 255, 0.98);
            border: 2px solid #ffc4dd;
            border-radius: 50px;
            padding: 15px 30px;
            color: #e879b9;
            font-weight: 600;
            font-size: 14px;
            box-shadow: 0 10px 30px rgba(255, 192, 221, 0.4);
            z-index: 10000;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .toast-notification.show {
            bottom: 30px;
        }

        .toast-notification::before {
            content: '✓';
            display: inline-block;
            width: 24px;
            height: 24px;
            background: linear-gradient(135deg, #e879b9, #f5a3c7);
            color: white;
            border-radius: 50%;
            text-align: center;
            line-height: 24px;
            font-size: 16px;
        }

        /* Mobile Responsive for Expanded View */
        @media (max-width: 768px) {
            .back-button {
                top: 15px;
                left: 15px;
                padding: 10px 20px;
                font-size: 14px;
            }

            .content-section {
                padding: 70px 15px 50px;
            }

            .content-section h2 {
                font-size: 28px;
            }

            .section-content {
                padding: 25px;
            }

            .section-dots {
                right: 15px;
            }

            .scroll-indicator {
                bottom: 20px;
                font-size: 12px;
            }
        }

        /* ============================================
           CONTENT COMPONENTS STYLES
           ============================================ */

        /* Info Grid (About Me - Basic Info) */
        .info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 15px;
            margin-bottom: 30px;
        }

        .info-card {
            background: linear-gradient(135deg, #ffebf5 0%, #fff5fa 100%);
            border-radius: 15px;
            padding: 20px;
            text-align: center;
            transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
            border: 1px solid rgba(232, 121, 185, 0.1);
            box-shadow: 0 2px 6px rgba(232, 121, 185, 0.08);
            opacity: 0;
            transform: translateY(30px) scale(0.9);
        }

        /* Staggered animation cho info cards */
        .content-section.active .info-card {
            opacity: 1;
            transform: translateY(0) scale(1);
            /* Final state - no transform */
            animation: card-pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .content-section.active .info-card:nth-child(1) {
            animation-delay: 0.1s;
        }

        .content-section.active .info-card:nth-child(2) {
            animation-delay: 0.15s;
        }

        .content-section.active .info-card:nth-child(3) {
            animation-delay: 0.2s;
        }

        .content-section.active .info-card:nth-child(4) {
            animation-delay: 0.25s;
        }

        .content-section.active .info-card:nth-child(5) {
            animation-delay: 0.3s;
        }

        .content-section.active .info-card:nth-child(6) {
            animation-delay: 0.35s;
        }

        @keyframes card-pop-in {
            0% {
                opacity: 0;
                transform: translateY(30px) scale(0.9);
            }

            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .info-card:hover {
            transform: translateY(-3px);
            border-color: rgba(232, 121, 185, 0.25);
            box-shadow: 0 4px 12px rgba(232, 121, 185, 0.15);
            background: linear-gradient(135deg, #ffd4e9 0%, #ffe8f5 100%);
        }

        .info-icon {
            font-size: 36px;
            margin-bottom: 10px;
        }

        .info-label {
            font-size: 12px;
            color: #f5a3c7;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .info-value {
            font-size: 16px;
            color: #e879b9;
            font-weight: 700;
            font-family: 'Fredoka', sans-serif;
        }

        .info-sub {
            font-size: 13px;
            color: #f5a3c7;
            margin-top: 4px;
        }

        /* Bio Section */
        .bio-section {
            margin: 30px 0;
        }

        .bio-title,
        .personality-title,
        .section-subtitle,
        .fav-title {
            font-family: 'Fredoka', sans-serif;
            font-size: 20px;
            background: linear-gradient(135deg, #e879b9, #f5a3c7, #ffc4dd);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 25px;
            display: flex;
            align-items: center;
            gap: 10px;
            opacity: 0;
            transform: translateX(-30px);
            position: relative;
            filter: drop-shadow(0 2px 6px rgba(232, 121, 185, 0.15));
        }

        /* Decorative sparkles */
        .bio-title::before,
        .personality-title::before,
        .section-subtitle::before {
            content: '✧';
            position: absolute;
            left: -20px;
            color: rgba(255, 192, 221, 0.6);
            font-size: 14px;
            animation: sparkle-twinkle 2s ease-in-out infinite;
        }

        .bio-title::after,
        .personality-title::after,
        .section-subtitle::after {
            content: '✧';
            position: absolute;
            right: -20px;
            color: rgba(232, 121, 185, 0.6);
            font-size: 14px;
            animation: sparkle-twinkle 2s ease-in-out infinite;
            animation-delay: 1s;
        }

        @keyframes sparkle-twinkle {

            0%,
            100% {
                opacity: 0.3;
                transform: scale(1);
            }

            50% {
                opacity: 0.8;
                transform: scale(1.2);
            }
        }

        /* Animation cho section titles */
        .content-section.active .bio-title,
        .content-section.active .personality-title,
        .content-section.active .section-subtitle,
        .content-section.active .fav-title {
            opacity: 1;
            transform: translateX(0);
            /* Final state - no transform */
            animation: slide-fade-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
            animation-delay: 0.2s;
        }

        @keyframes slide-fade-in {
            0% {
                opacity: 0;
                transform: translateX(-30px);
            }

            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .bio-card {
            background:
                linear-gradient(135deg, rgba(255, 245, 250, 0.95) 0%, rgba(255, 250, 253, 0.95) 100%),
                repeating-linear-gradient(90deg, transparent, transparent 30px, rgba(255, 192, 221, 0.05) 30px, rgba(255, 192, 221, 0.05) 31px);
            border-left: none;
            border-radius: 16px;
            padding: 28px;
            margin-bottom: 20px;
            position: relative;
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
            opacity: 0;
            box-shadow: 0 4px 16px rgba(232, 121, 185, 0.08);
            border: 1px solid rgba(255, 192, 221, 0.2);
            overflow: hidden;
            /* NO initial transform - animation will handle it */
        }

        /* Decorative floating hearts */
        .bio-card::before {
            content: '♡';
            position: absolute;
            top: 15px;
            right: 20px;
            color: rgba(255, 192, 221, 0.2);
            font-size: 50px;
            animation: float-heart 4s ease-in-out infinite;
            pointer-events: none;
        }

        .bio-card::after {
            content: '♡';
            position: absolute;
            bottom: 20px;
            left: 25px;
            color: rgba(232, 121, 185, 0.15);
            font-size: 35px;
            animation: float-heart 5s ease-in-out infinite;
            animation-delay: 1s;
            pointer-events: none;
        }

        @keyframes float-heart {

            0%,
            100% {
                transform: translateY(0px) rotate(0deg);
                opacity: 0.2;
            }

            50% {
                transform: translateY(-10px) rotate(5deg);
                opacity: 0.3;
            }
        }

        /* After animation completes, enable hover transition */
        .content-section.active .bio-card {
            opacity: 1;
            transform: translateX(0);
            /* Final state - no transform */
            animation: slide-fade-in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .content-section.active .bio-card:nth-of-type(1) {
            animation-delay: 0.05s;
        }

        .content-section.active .bio-card:nth-of-type(2) {
            animation-delay: 0.15s;
        }

        .content-section.active .bio-card:nth-of-type(3) {
            animation-delay: 0.25s;
        }

        .bio-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 28px rgba(232, 121, 185, 0.15),
                0 0 0 1px rgba(255, 192, 221, 0.3);
            background:
                linear-gradient(135deg, rgba(255, 240, 248, 1) 0%, rgba(255, 245, 250, 1) 100%),
                repeating-linear-gradient(90deg, transparent, transparent 30px, rgba(255, 192, 221, 0.08) 30px, rgba(255, 192, 221, 0.08) 31px);
        }

        .quote-mark {
            position: absolute;
            top: 10px;
            left: 15px;
            font-size: 48px;
            color: #ffc4dd;
            opacity: 0.3;
            font-family: Georgia, serif;
        }

        .bio-text {
            font-size: 15px;
            line-height: 1.8;
            color: #666;
            padding-left: 30px;
            text-align: justify;
        }

        /* Bio Highlight Styles - Key-based text highlights */
        .bio-highlight {
            padding: 1px 6px;
            border-radius: 4px;
            display: inline;
            line-height: 1.4;
            margin: 0 1px;
        }

        /* Fill Blue - Xanh dương sáng nhẹ */
        .bio-highlight-fill-blue {
            background: linear-gradient(135deg, #A8E0F7 0%, #8DD4F5 100%);
            color: white;
            font-weight: 600;
            box-shadow: 0 1px 4px rgba(79, 195, 247, 0.2);
        }

        /* Fill Red - Đỏ nhạt nhẹ */
        .bio-highlight-fill-red {
            background: linear-gradient(135deg, #FFD4D8 0%, #FFC0C7 100%);
            color: white;
            font-weight: 600;
            box-shadow: 0 1px 4px rgba(255, 138, 149, 0.2);
        }

        /* Text Red - Chỉ text màu đỏ nhẹ */
        .bio-highlight-text-red {
            color: #FF8A9A;
            font-weight: 600;
            background: rgba(255, 179, 186, 0.08);
            padding: 1px 4px;
        }

        /* Text Red Italic - với quote marks nhẹ */
        .bio-highlight-text-red-italic {
            color: #FF8A9A;
            font-weight: 600;
            font-style: italic;
            background: rgba(255, 179, 186, 0.08);
            padding: 1px 6px;
            position: relative;
        }

        .bio-highlight-text-red-italic::before {
            content: '"';
            color: rgba(255, 138, 154, 0.35);
            font-size: 1.2em;
            margin-right: 3px;
            font-style: normal;
            vertical-align: -0.05em;
        }

        .bio-highlight-text-red-italic::after {
            content: '"';
            color: rgba(255, 138, 154, 0.35);
            font-size: 1.2em;
            margin-left: 3px;
            font-style: normal;
            vertical-align: -0.05em;
        }

        /* Personality Tags */
        .personality-section {
            margin: 30px 0;
        }

        .tags-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .personality-tag {
            background: linear-gradient(135deg, #ffebf5 0%, #fff5fa 100%);
            color: #e879b9;
            padding: 10px 20px;
            border-radius: 25px;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
            box-shadow: 0 3px 8px rgba(232, 121, 185, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(232, 121, 185, 0.1);
            opacity: 0;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transform: rotate(var(--rotation, 0deg));
            /* NO initial transform - animation will handle it */
        }

        /* Random rotation for sticker effect */
        .personality-tag:nth-child(1) {
            --rotation: -2deg;
        }

        .personality-tag:nth-child(2) {
            --rotation: 1.5deg;
        }

        .personality-tag:nth-child(3) {
            --rotation: -1deg;
        }

        .personality-tag:nth-child(4) {
            --rotation: 2deg;
        }

        .personality-tag:nth-child(5) {
            --rotation: -1.5deg;
        }

        /* Icon inside personality tag */
        .personality-tag iconify-icon,
        .personality-tag .svg-icon-wrapper {
            display: inline-flex;
            align-items: center;
            filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
        }

        /* Staggered animation cho personality tags - faster start, longer duration */
        .content-section.active .personality-tag {
            opacity: 1;
            /* Final state - no transform needed, animation ends at normal position */
            animation: tag-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .content-section.active .personality-tag:nth-child(1) {
            animation-delay: 0.1s;
        }

        .content-section.active .personality-tag:nth-child(2) {
            animation-delay: 0.15s;
        }

        .content-section.active .personality-tag:nth-child(3) {
            animation-delay: 0.2s;
        }

        .content-section.active .personality-tag:nth-child(4) {
            animation-delay: 0.25s;
        }

        .content-section.active .personality-tag:nth-child(5) {
            animation-delay: 0.3s;
        }

        .content-section.active .personality-tag:nth-child(6) {
            animation-delay: 0.35s;
        }

        @keyframes tag-pop {
            0% {
                opacity: 0;
                transform: scale(0.8) rotate(-5deg);
            }

            50% {
                transform: scale(1.1) rotate(2deg);
            }

            100% {
                opacity: 1;
                transform: scale(1) rotate(0deg);
            }
        }

        .personality-tag:hover {
            transform: scale(1.08) rotate(0deg);
            box-shadow: 0 5px 15px rgba(232, 121, 185, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.9);
            background: linear-gradient(135deg, #ffd4e9 0%, #ffe8f5 100%);
            animation: wobble 0.5s ease;
        }

        @keyframes wobble {

            0%,
            100% {
                transform: scale(1.08) rotate(0deg);
            }

            25% {
                transform: scale(1.08) rotate(-3deg);
            }

            50% {
                transform: scale(1.08) rotate(3deg);
            }

            75% {
                transform: scale(1.08) rotate(-2deg);
            }
        }

        /* Names Section */
        .names-section {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .name-card {
            background: linear-gradient(135deg, #ffebf5 0%, #fff5fa 100%);
            padding: 20px;
            text-align: center;
            transition: all 0.3s ease;
            border: 1px solid rgba(232, 121, 185, 0.1);
            box-shadow: 0 2px 8px rgba(232, 121, 185, 0.06);
            position: relative;
        }

        /* Asymmetric shapes for each name card - very subtle */
        .name-card:nth-child(1) {
            border-radius: 18px 15px 17px 16px;
            transform: rotate(-0.5deg);
            background: linear-gradient(135deg, #ffe8f5 0%, #fff5fc 100%);
        }

        .name-card:nth-child(2) {
            border-radius: 16px 18px 15px 17px;
            transform: rotate(0.5deg);
            background: linear-gradient(135deg, #fff0fa 0%, #fffbfe 100%);
        }

        /* Sticker-style decoration */
        .name-card::before {
            content: '✨';
            position: absolute;
            top: -8px;
            right: -8px;
            font-size: 18px;
            animation: sparkle-twinkle 2s ease-in-out infinite;
            filter: drop-shadow(0 2px 4px rgba(232, 121, 185, 0.3));
            opacity: 0.8;
        }

        .name-card:nth-child(2)::before {
            content: '💫';
            left: -8px;
            right: auto;
        }

        .name-card:hover {
            transform: rotate(0deg) scale(1.02);
            box-shadow: 0 4px 16px rgba(232, 121, 185, 0.12);
        }

        .name-card:nth-child(1):hover {
            background: linear-gradient(135deg, #ffe0f0 0%, #fff0f8 100%);
        }

        .name-card:nth-child(2):hover {
            background: linear-gradient(135deg, #ffe8f5 0%, #fff5fc 100%);
        }

        .name-flag {
            font-size: 36px;
            margin-bottom: 10px;
        }

        .name-label {
            font-size: 12px;
            color: #f5a3c7;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
        }

        .name-value {
            font-size: 16px;
            color: #e879b9;
            font-weight: 700;
            font-family: 'Fredoka', sans-serif;
        }

        /* Direct Contact */
        .direct-contact-section {
            margin: 30px 0;
        }

        .contact-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .contact-item {
            background: linear-gradient(135deg, rgba(255, 235, 245, 0.85) 0%, rgba(255, 245, 250, 0.85) 100%);
            backdrop-filter: blur(10px);
            border-radius: 16px;
            padding: 18px 20px;
            display: flex;
            align-items: center;
            gap: 15px;
            transition: all 0.3s ease;
            position: relative;
            opacity: 0;
            border: 1px solid rgba(232, 121, 185, 0.2);
            box-shadow: 0 2px 8px rgba(232, 121, 185, 0.08);
            /* NO initial transform - animation will handle it */
        }

        /* Platform-specific colors for contact items */
        .contact-item:nth-child(1) {
            background: linear-gradient(135deg, rgba(255, 230, 245, 0.9) 0%, rgba(255, 240, 248, 0.9) 100%);
            border-color: rgba(232, 121, 185, 0.25);
        }

        .contact-item:nth-child(2) {
            background: linear-gradient(135deg, rgba(232, 240, 254, 0.9) 0%, rgba(240, 245, 255, 0.9) 100%);
            border-color: rgba(96, 165, 250, 0.25);
        }

        .contact-item:nth-child(3) {
            background: linear-gradient(135deg, rgba(255, 240, 245, 0.9) 0%, rgba(255, 245, 250, 0.9) 100%);
            border-color: rgba(245, 163, 199, 0.25);
        }

        .contact-item:nth-child(4) {
            background: linear-gradient(135deg, rgba(240, 248, 255, 0.9) 0%, rgba(245, 250, 255, 0.9) 100%);
            border-color: rgba(147, 197, 253, 0.25);
        }

        /* Animation cho contact items - faster start, longer duration */
        .content-section.active .contact-item {
            opacity: 1;
            /* Final state - no transform needed, animation ends at normal position */
            animation: slide-from-right-contact 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .content-section.active .contact-item:nth-child(1) {
            animation-delay: 0.05s;
        }

        .content-section.active .contact-item:nth-child(2) {
            animation-delay: 0.15s;
        }

        .content-section.active .contact-item:nth-child(3) {
            animation-delay: 0.25s;
        }

        .content-section.active .contact-item:nth-child(4) {
            animation-delay: 0.35s;
        }

        @keyframes slide-from-right-contact {
            0% {
                opacity: 0;
                transform: translateX(50px);
            }

            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .contact-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(232, 121, 185, 0.15);
        }

        .contact-item:nth-child(1):hover {
            background: linear-gradient(135deg, rgba(255, 220, 240, 1) 0%, rgba(255, 235, 245, 1) 100%);
            border-color: rgba(232, 121, 185, 0.4);
        }

        .contact-item:nth-child(2):hover {
            background: linear-gradient(135deg, rgba(219, 234, 254, 1) 0%, rgba(232, 240, 254, 1) 100%);
            border-color: rgba(96, 165, 250, 0.4);
        }

        .contact-item:nth-child(3):hover {
            background: linear-gradient(135deg, rgba(255, 228, 240, 1) 0%, rgba(255, 240, 245, 1) 100%);
            border-color: rgba(245, 163, 199, 0.4);
        }

        .contact-item:nth-child(4):hover {
            background: linear-gradient(135deg, rgba(224, 242, 254, 1) 0%, rgba(240, 248, 255, 1) 100%);
            border-color: rgba(147, 197, 253, 0.4);
        }

        .contact-item:hover .contact-icon {
            animation: wiggle 0.5s ease;
        }

        @keyframes bounce-gentle {

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

            25% {
                transform: translateY(-8px);
            }

            50% {
                transform: translateY(-4px);
            }

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

        @keyframes wiggle {

            0%,
            100% {
                transform: rotate(0deg);
            }

            25% {
                transform: rotate(-8deg) scale(1.1);
            }

            50% {
                transform: rotate(8deg) scale(1.1);
            }

            75% {
                transform: rotate(-5deg) scale(1.1);
            }
        }

        .contact-item.copyable {
            cursor: pointer;
        }

        .contact-icon {
            font-size: 28px;
            flex-shrink: 0;
        }

        .contact-info {
            flex: 1;
        }

        .contact-label {
            font-size: 12px;
            color: #f5a3c7;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 4px;
        }

        .contact-value {
            font-size: 16px;
            color: #e879b9;
            font-weight: 600;
        }

        .copy-btn {
            background: linear-gradient(135deg, #fff5fa 0%, #fffbfd 100%);
            border: 1px solid rgba(232, 121, 185, 0.08);
            border-radius: 8px;
            padding: 8px 12px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            color: #e879b9;
            font-weight: 600;
            box-shadow: 0 1px 3px rgba(232, 121, 185, 0.05);
        }

        .copy-btn:hover {
            transform: scale(1.03) rotate(1deg);
            box-shadow: 0 3px 8px rgba(232, 121, 185, 0.1);
            background: linear-gradient(135deg, #ffebf5 0%, #fff5fa 100%);
            border-color: rgba(232, 121, 185, 0.15);
        }

        .copy-btn:active {
            transform: scale(0.95);
        }

        /* Social Media Grid */
        .social-section {
            margin: 30px 0;
        }

        .social-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            gap: 15px;
        }

        .social-card {
            background: linear-gradient(135deg, #ffebf5 0%, #fff5fa 100%);
            border-radius: 18px;
            padding: 20px;
            text-align: center;
            transition: all 0.4s ease;
            border: 1px solid rgba(232, 121, 185, 0.12);
            box-shadow: 0 3px 12px rgba(232, 121, 185, 0.08);
            opacity: 0;
            text-decoration: none;
            color: inherit;
            display: block;
            position: relative;
            /* NO initial transform - animation will handle it */
        }

        /* Platform-specific colors for social cards */
        .social-card[href*="facebook"] {
            background: linear-gradient(135deg, #e3f2ff 0%, #f0f8ff 100%);
            border-color: rgba(24, 119, 242, 0.15);
        }

        .social-card[href*="instagram"] {
            background: linear-gradient(135deg, #fff0f8 0%, #fff5fb 100%);
            border-color: rgba(225, 48, 108, 0.15);
        }

        .social-card[href*="spotify"] {
            background: linear-gradient(135deg, #e8f8f0 0%, #f0fdf5 100%);
            border-color: rgba(30, 215, 96, 0.15);
        }

        .social-card[href*="tiktok"] {
            background: linear-gradient(135deg, #fff0f5 0%, #fffafc 100%);
            border-color: rgba(254, 44, 85, 0.15);
        }

        /* Staggered animation cho social cards - faster start, longer duration */
        .content-section.active .social-card {
            opacity: 1;
            /* Final state - no transform needed, animation ends at normal position */
            animation: social-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .content-section.active .social-card:nth-child(1) {
            animation-delay: 0.1s;
        }

        .content-section.active .social-card:nth-child(2) {
            animation-delay: 0.15s;
        }

        .content-section.active .social-card:nth-child(3) {
            animation-delay: 0.2s;
        }

        .content-section.active .social-card:nth-child(4) {
            animation-delay: 0.25s;
        }

        .content-section.active .social-card:nth-child(5) {
            animation-delay: 0.3s;
        }

        .content-section.active .social-card:nth-child(6) {
            animation-delay: 0.35s;
        }

        @keyframes social-pop {
            0% {
                opacity: 0;
                transform: scale(0.8) rotate(-5deg);
            }

            60% {
                transform: scale(1.05) rotate(2deg);
            }

            100% {
                opacity: 1;
                transform: scale(1) rotate(0deg);
            }
        }

        .social-card:not(.disabled):hover {
            transform: translateY(-4px) scale(1.03);
            box-shadow: 0 6px 20px rgba(232, 121, 185, 0.15);
        }

        /* Enhanced hover effects for specific platforms */
        .social-card[href*="facebook"]:hover {
            border-color: rgba(24, 119, 242, 0.3);
            background: linear-gradient(135deg, #d9edff 0%, #e8f4ff 100%);
        }

        .social-card[href*="instagram"]:hover {
            border-color: rgba(225, 48, 108, 0.3);
            background: linear-gradient(135deg, #ffe8f3 0%, #fff0f8 100%);
        }

        .social-card[href*="spotify"]:hover {
            border-color: rgba(30, 215, 96, 0.3);
            background: linear-gradient(135deg, #d4f5e5 0%, #e8f8f0 100%);
        }

        .social-card[href*="tiktok"]:hover {
            border-color: rgba(254, 44, 85, 0.3);
            background: linear-gradient(135deg, #ffe6ec 0%, #fff0f5 100%);
        }

        .social-card.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .social-icon {
            font-size: 32px;
            margin-bottom: 10px;
        }

        .social-name {
            font-size: 14px;
            color: #e879b9;
            font-weight: 700;
            margin-bottom: 5px;
        }

        .social-status {
            font-size: 11px;
            color: #f5a3c7;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .social-link {
            display: inline-block;
            margin-top: 10px;
            color: #e879b9;
            text-decoration: none;
            font-size: 12px;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .social-link:hover {
            color: #f5a3c7;
            transform: translateX(3px);
        }

        /* Favorites Category */
        .fav-category {
            margin: 40px 0;
            position: relative;
        }

        .fav-list {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .fav-item {
            background: linear-gradient(135deg, rgba(255, 240, 250, 0.85) 0%, rgba(255, 250, 253, 0.85) 100%);
            padding: 20px 23px;
            display: flex;
            align-items: center;
            gap: 18px;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            opacity: 0;
            position: relative;
            border: 1px solid rgba(255, 192, 221, 0.15);
            box-shadow: 0 3px 15px rgba(232, 121, 185, 0.08);
            overflow: visible;
            backdrop-filter: blur(10px);
            /* NO initial transform - animation will handle it */
        }

        /* Bubble/Cloud shapes - Organic border-radius */
        .fav-item:nth-child(1) {
            border-radius: 35px 28px 40px 25px;
        }

        .fav-item:nth-child(2) {
            border-radius: 28px 35px 25px 38px;
        }

        .fav-item:nth-child(3) {
            border-radius: 40px 25px 35px 30px;
        }

        .fav-item:nth-child(4) {
            border-radius: 25px 40px 30px 35px;
        }

        .fav-item:nth-child(5) {
            border-radius: 38px 30px 28px 40px;
        }

        /* Category-specific colors for Music (1st category) */
        .fav-category:nth-child(1) .fav-item:nth-child(odd) {
            background: linear-gradient(135deg, rgba(255, 228, 245, 0.9) 0%, rgba(255, 240, 250, 0.9) 100%);
            border-color: rgba(232, 121, 185, 0.2);
        }

        .fav-category:nth-child(1) .fav-item:nth-child(even) {
            background: linear-gradient(135deg, rgba(255, 235, 248, 0.9) 0%, rgba(255, 245, 252, 0.9) 100%);
            border-color: rgba(245, 163, 199, 0.2);
        }

        /* Category-specific colors for Movies (2nd category) */
        .fav-category:nth-child(2) .fav-item:nth-child(odd) {
            background: linear-gradient(135deg, rgba(224, 242, 254, 0.9) 0%, rgba(240, 248, 255, 0.9) 100%);
            border-color: rgba(96, 165, 250, 0.2);
        }

        .fav-category:nth-child(2) .fav-item:nth-child(even) {
            background: linear-gradient(135deg, rgba(232, 245, 254, 0.9) 0%, rgba(245, 250, 255, 0.9) 100%);
            border-color: rgba(147, 197, 253, 0.2);
        }

        /* Category-specific colors for Books (3rd category) */
        .fav-category:nth-child(3) .fav-item:nth-child(odd) {
            background: linear-gradient(135deg, rgba(254, 252, 232, 0.9) 0%, rgba(255, 254, 245, 0.9) 100%);
            border-color: rgba(251, 191, 36, 0.2);
        }

        .fav-category:nth-child(3) .fav-item:nth-child(even) {
            background: linear-gradient(135deg, rgba(254, 249, 195, 0.9) 0%, rgba(255, 252, 220, 0.9) 100%);
            border-color: rgba(250, 204, 21, 0.2);
        }

        /* Category-specific colors for Games (4th category) */
        .fav-category:nth-child(4) .fav-item:nth-child(odd) {
            background: linear-gradient(135deg, rgba(220, 252, 231, 0.9) 0%, rgba(240, 253, 244, 0.9) 100%);
            border-color: rgba(34, 197, 94, 0.2);
        }

        .fav-category:nth-child(4) .fav-item:nth-child(even) {
            background: linear-gradient(135deg, rgba(209, 250, 229, 0.9) 0%, rgba(236, 253, 245, 0.9) 100%);
            border-color: rgba(74, 222, 128, 0.2);
        }

        /* Floating decorations around bubbles */
        .fav-item::before {
            content: '✨';
            position: absolute;
            top: -10px;
            right: 20px;
            font-size: 18px;
            animation: float-decoration 3s ease-in-out infinite;
            opacity: 0.7;
            pointer-events: none;
        }

        .fav-item::after {
            content: '💫';
            position: absolute;
            bottom: -8px;
            left: 25px;
            font-size: 16px;
            animation: float-decoration 3.5s ease-in-out infinite 0.5s;
            opacity: 0.6;
            pointer-events: none;
        }

        /* Alternating decorations */
        .fav-item:nth-child(even)::before {
            content: '🌟';
            left: 20px;
            right: auto;
            animation-delay: 1s;
        }

        .fav-item:nth-child(even)::after {
            content: '⭐';
            right: 25px;
            left: auto;
            animation-delay: 1.5s;
        }

        @keyframes float-decoration {

            0%,
            100% {
                transform: translateY(0) rotate(0deg);
                opacity: 0.7;
            }

            25% {
                transform: translateY(-8px) rotate(10deg);
                opacity: 1;
            }

            50% {
                transform: translateY(-4px) rotate(-5deg);
                opacity: 0.6;
            }

            75% {
                transform: translateY(-10px) rotate(8deg);
                opacity: 0.9;
            }
        }

        /* Animation cho favorite items - faster start, longer duration */
        .content-section.active .fav-item {
            opacity: 1;
            /* Final state - no transform needed, animation ends at normal position */
            animation: fade-up 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .content-section.active .fav-item:nth-child(1) {
            animation-delay: 0.05s;
        }

        .content-section.active .fav-item:nth-child(2) {
            animation-delay: 0.15s;
        }

        .content-section.active .fav-item:nth-child(3) {
            animation-delay: 0.25s;
        }

        .content-section.active .fav-item:nth-child(4) {
            animation-delay: 0.35s;
        }

        .content-section.active .fav-item:nth-child(5) {
            animation-delay: 0.45s;
        }

        @keyframes fade-up {
            0% {
                opacity: 0;
                transform: translateY(30px);
            }

            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Bubble inflate hover effect */
        .fav-item:hover {
            transform: scale(1.03) translateY(-3px);
            box-shadow: 0 8px 25px rgba(232, 121, 185, 0.18);
            filter: brightness(1.03);
        }

        /* Enhanced hover for Music category */
        .fav-category:nth-child(1) .fav-item:hover {
            box-shadow: 0 8px 25px rgba(232, 121, 185, 0.2), css 0 0 20px rgba(255, 192, 221, 0.15);
        }

        /* Enhanced hover for Movies category */
        .fav-category:nth-child(2) .fav-item:hover {
            box-shadow: 0 8px 25px rgba(96, 165, 250, 0.2),
                0 0 20px rgba(147, 197, 253, 0.15);
        }

        /* Enhanced hover for Books category */
        .fav-category:nth-child(3) .fav-item:hover {
            box-shadow: 0 8px 25px rgba(251, 191, 36, 0.2),
                0 0 20px rgba(250, 204, 21, 0.15);
        }

        /* Enhanced hover for Games category */
        .fav-category:nth-child(4) .fav-item:hover {
            box-shadow: 0 8px 25px rgba(34, 197, 94, 0.2),
                0 0 20px rgba(74, 222, 128, 0.15);
        }

        /* Decorations scatter on hover */
        .fav-item:hover::before {
            animation: scatter-decoration 0.6s ease-out forwards;
        }

        .fav-item:hover::after {
            animation: scatter-decoration 0.6s ease-out 0.1s forwards;
        }

        @keyframes scatter-decoration {
            0% {
                transform: translate(0, 0) scale(1);
            }

            50% {
                transform: translate(var(--scatter-x, 15px), var(--scatter-y, -15px)) scale(1.3) rotate(180deg);
                opacity: 1;
            }

            100% {
                transform: translate(var(--scatter-x, 15px), var(--scatter-y, -15px)) scale(1) rotate(360deg);
                opacity: 0.7;
            }
        }

        .fav-icon {
            font-size: 36px;
            flex-shrink: 0;
            animation: float-icon 3s ease-in-out infinite;
            filter: drop-shadow(0 2px 8px rgba(232, 121, 185, 0.2));
        }

        @keyframes float-icon {

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

            25% {
                transform: translateY(-5px) rotate(-3deg);
            }

            50% {
                transform: translateY(-8px) rotate(0deg);
            }

            75% {
                transform: translateY(-5px) rotate(3deg);
            }
        }

        .fav-item:hover .fav-icon {
            animation: bounce-icon 0.6s ease;
            filter: drop-shadow(0 4px 12px rgba(232, 121, 185, 0.4));
        }

        @keyframes bounce-icon {

            0%,
            100% {
                transform: scale(1) rotate(0deg);
            }

            25% {
                transform: scale(1.2) rotate(-10deg);
            }

            50% {
                transform: scale(1.15) rotate(5deg);
            }

            75% {
                transform: scale(1.18) rotate(-5deg);
            }
        }

        .fav-info {
            flex: 1;
        }

        .fav-name {
            font-size: 16px;
            color: #e879b9;
            font-weight: 700;
            margin-bottom: 4px;
        }

        .fav-creator {
            font-size: 14px;
            color: #f5a3c7;
        }

        .fav-year {
            font-size: 12px;
            color: #ccc;
            margin-top: 2px;
        }

        .play-fav-btn {
            background: linear-gradient(135deg, #e879b9 0%, #f5a3c7 100%);
            border: none;
            border-radius: 50%;
            width: 45px;
            height: 45px;
            font-size: 20px;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            flex-shrink: 0;
            box-shadow: 0 4px 15px rgba(232, 121, 185, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .play-fav-btn:hover {
            transform: scale(1.2) rotate(15deg);
            box-shadow: 0 8px 25px rgba(232, 121, 185, 0.5);
            background: linear-gradient(135deg, #f5a3c7 0%, #ffc4dd 100%);
        }

        .play-fav-btn:active {
            transform: scale(0.95);
        }

        /* Category-specific button colors */
        .fav-category:nth-child(2) .play-fav-btn {
            background: linear-gradient(135deg, #60a5fa 0%, #93c5fd 100%);
        }

        .fav-category:nth-child(2) .play-fav-btn:hover {
            background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
            box-shadow: 0 8px 25px rgba(96, 165, 250, 0.5);
        }

        .fav-category:nth-child(3) .play-fav-btn {
            background: linear-gradient(135deg, #fbbf24 0%, #fcd34d 100%);
        }

        .fav-category:nth-child(3) .play-fav-btn:hover {
            background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
            box-shadow: 0 8px 25px rgba(251, 191, 36, 0.5);
        }

        .fav-category:nth-child(4) .play-fav-btn {
            background: linear-gradient(135deg, #22c55e 0%, #4ade80 100%);
        }

        .fav-category:nth-child(4) .play-fav-btn:hover {
            background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
            box-shadow: 0 8px 25px rgba(34, 197, 94, 0.5);
        }

        /* Hobbies Grid - Redesigned for beauty */
        .hobbies-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            gap: 18px;
            margin-top: 20px;
        }

        .hobby-card {
            background: linear-gradient(135deg,
                    rgba(255, 252, 254, 0.95) 0%,
                    rgba(255, 248, 252, 0.95) 100%);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 28px 22px;
            text-align: center;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            border: 1.5px solid rgba(232, 121, 185, 0.12);
            position: relative;
            overflow: hidden;
            box-shadow: 0 3px 12px rgba(232, 121, 185, 0.06);
            transform-origin: center center;
        }

        /* Card deck rotation for hobby cards */
        .hobby-card:nth-child(1) {
            transform: rotate(-2deg);
        }

        .hobby-card:nth-child(2) {
            transform: rotate(1.5deg);
        }

        .hobby-card:nth-child(3) {
            transform: rotate(-1deg);
        }

        .hobby-card:nth-child(4) {
            transform: rotate(2deg);
        }

        /* Unique gradient top bar with shimmer effect */
        .hobby-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg,
                    rgba(255, 192, 203, 0.6),
                    rgba(255, 182, 193, 0.6),
                    rgba(255, 160, 180, 0.6),
                    rgba(255, 182, 193, 0.6),
                    rgba(255, 192, 203, 0.6));
            background-size: 200% 100%;
            animation: shimmer 3s linear infinite;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        @keyframes shimmer {
            0% {
                background-position: 200% 0;
            }

            100% {
                background-position: -200% 0;
            }
        }

        .hobby-card:hover::before {
            opacity: 1;
        }

        .hobby-card:hover {
            transform: translateY(-8px) rotate(0deg) scale(1.05);
            border-color: rgba(232, 121, 185, 0.25);
            box-shadow: 0 12px 32px rgba(232, 121, 185, 0.12),
                0 0 0 1px rgba(255, 192, 221, 0.2);
            background: linear-gradient(135deg,
                    rgba(255, 255, 255, 1) 0%,
                    rgba(255, 250, 253, 1) 100%);
            z-index: 10;
        }

        /* Favorite hobby cards - each with unique pastel gradient */
        /* Card 1: Soft Peach - Đào nhẹ nhàng */
        .hobby-card.favorite:nth-child(1) {
            background: linear-gradient(135deg,
                    rgba(255, 248, 245, 0.95) 0%,
                    rgba(255, 243, 238, 0.95) 100%);
            border-color: rgba(255, 200, 180, 0.22);
        }

        .hobby-card.favorite:nth-child(1)::before {
            background: linear-gradient(90deg,
                    rgba(255, 218, 200, 0.55),
                    rgba(255, 205, 185, 0.55),
                    rgba(255, 190, 170, 0.55),
                    rgba(255, 205, 185, 0.55),
                    rgba(255, 218, 200, 0.55));
        }

        /* Card 2: Lavender Dream - Tím lavender mơ màng */
        .hobby-card.favorite:nth-child(2) {
            background: linear-gradient(135deg,
                    rgba(248, 245, 255, 0.95) 0%,
                    rgba(243, 238, 255, 0.95) 100%);
            border-color: rgba(200, 180, 235, 0.22);
        }

        .hobby-card.favorite:nth-child(2)::before {
            background: linear-gradient(90deg,
                    rgba(220, 200, 245, 0.55),
                    rgba(205, 185, 235, 0.55),
                    rgba(190, 170, 225, 0.55),
                    rgba(205, 185, 235, 0.55),
                    rgba(220, 200, 245, 0.55));
        }

        /* Card 3: Mint Fresh - Xanh mint tươi mát */
        .hobby-card.favorite:nth-child(3) {
            background: linear-gradient(135deg,
                    rgba(245, 255, 250, 0.95) 0%,
                    rgba(238, 252, 245, 0.95) 100%);
            border-color: rgba(180, 230, 210, 0.22);
        }

        .hobby-card.favorite:nth-child(3)::before {
            background: linear-gradient(90deg,
                    rgba(200, 240, 220, 0.55),
                    rgba(185, 230, 210, 0.55),
                    rgba(170, 220, 200, 0.55),
                    rgba(185, 230, 210, 0.55),
                    rgba(200, 240, 220, 0.55));
        }

        /* Card 4: Sky Blush - Xanh hồng trời */
        .hobby-card.favorite:nth-child(4) {
            background: linear-gradient(135deg,
                    rgba(248, 250, 255, 0.95) 0%,
                    rgba(243, 245, 255, 0.95) 100%);
            border-color: rgba(200, 210, 240, 0.22);
        }

        .hobby-card.favorite:nth-child(4)::before {
            background: linear-gradient(90deg,
                    rgba(220, 230, 250, 0.55),
                    rgba(205, 220, 245, 0.55),
                    rgba(190, 210, 240, 0.55),
                    rgba(205, 220, 245, 0.55),
                    rgba(220, 230, 250, 0.55));
        }

        .hobby-card.favorite::before {
            opacity: 0.9;
        }

        .hobby-card.favorite:hover {
            box-shadow: 0 14px 36px rgba(232, 121, 185, 0.18),
                0 0 0 1.5px rgba(232, 121, 185, 0.2);
            transform: translateY(-10px) rotate(-0.5deg);
        }

        .hobby-card.favorite .hobby-name {
            background: linear-gradient(135deg, #e879b9, #f5a3c7);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-weight: 700;
        }

        /* Icon with playful animation */
        .hobby-icon {
            font-size: 44px;
            margin-bottom: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
            filter: drop-shadow(0 2px 8px rgba(232, 121, 185, 0.15));
        }

        .hobby-card:hover .hobby-icon {
            transform: scale(1.12) translateY(-4px) rotate(5deg);
            filter: drop-shadow(0 4px 12px rgba(232, 121, 185, 0.25));
        }

        .hobby-card.favorite .hobby-icon {
            animation: float 3s ease-in-out infinite;
        }

        @keyframes float {

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

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

        /* Text styling - consistent colors */
        .hobby-name {
            font-size: 15px;
            color: #d88db8;
            font-weight: 600;
            margin-bottom: 6px;
            letter-spacing: 0.3px;
            font-family: 'Fredoka', sans-serif;
            transition: color 0.3s ease;
        }

        .hobby-desc {
            font-size: 12px;
            color: #e8a0c7;
            font-style: italic;
            line-height: 1.5;
            opacity: 0.85;
        }

        /* Mobile Responsive for Content Components */
        @media (max-width: 768px) {
            .info-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .bio-text {
                font-size: 14px;
                padding-left: 20px;
            }

            .social-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .hobbies-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 480px) {
            .info-grid {
                grid-template-columns: 1fr;
            }

            .names-section {
                grid-template-columns: 1fr;
            }
        }

        /* ============================================
           CUSTOM SVG ICON STYLES
           ============================================ */

        /* SVG Icon Wrapper */
        .svg-icon-wrapper {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            vertical-align: middle;
        }

        .svg-icon-wrapper svg {
            width: 100%;
            height: 100%;
            display: block;
        }

        /* Arrow animations */
        .arrow-animate {
            animation: arrow-pulse 2s ease-in-out infinite;
        }

        @keyframes arrow-pulse {

            0%,
            100% {
                transform: scale(1);
                opacity: 1;
            }

            50% {
                transform: scale(1.1);
                opacity: 0.8;
            }
        }

        /* Bounce animation for scroll arrow */
        .arrow-bounce {
            animation: arrow-bounce 2s ease-in-out infinite;
        }

        @keyframes arrow-bounce {

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

            50% {
                transform: translateY(8px);
            }
        }

        /* Hover effect for interactive arrows */
        .arrow-interactive {
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .arrow-interactive:hover {
            transform: scale(1.15);
            filter: brightness(1.2);
        }

        /* Sparkle animation for SVG sparkles */
        .sparkle-icon {
            animation: sparkle-rotate 3s linear infinite;
        }

        @keyframes sparkle-rotate {
            0% {
                transform: rotate(0deg) scale(1);
            }

            50% {
                transform: rotate(180deg) scale(1.2);
            }

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

        /* Back button arrow specific styling */
        .back-button .svg-icon-wrapper {
            transition: transform 0.3s ease;
        }

        .back-button:hover .svg-icon-wrapper {
            transform: translateX(-3px);
        }

        /* Scroll indicator arrow specific */
        .scroll-arrow .svg-icon-wrapper {
            animation: arrow-bounce 2s ease-in-out infinite;
        }

        /* Scroll arrow animation */
        .scroll-arrow .svg-icon-wrapper {
            animation: arrow-bounce 2s ease-in-out infinite;
        }

        /* ============================================================================
   RESPONSIVE SECTIONS SCALING
   ============================================================================
   Scale xuống các sections để content vừa viewport
   - About Me: 85% (nhiều content, cần lớn hơn)
   - Contact: 80% (ít content hơn, compact)
   - Favorites: 80% (ít content, compact)
   
   Structure:
   1. About Me (85%)
   2. Contact (80%)
   3. Favorites (80%)
   ============================================================================ */

        /* ============================================================================
   1. ABOUT ME PAGE - SCALE 85%
   ============================================================================ */

        /* Container & Layout */
        .content-section[data-section="about"] .section-content {
            max-width: 680px;
            padding: 30px;
            border-radius: 21px;
        }

        .content-section[data-section="about"] h2 {
            font-size: 31px;
            margin-bottom: 26px;
            gap: 13px;
        }

        /* Info Grid & Cards */
        .content-section[data-section="about"] .info-grid {
            grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
            gap: 13px;
            margin-bottom: 26px;
        }

        .content-section[data-section="about"] .info-card {
            padding: 17px;
            border-radius: 13px;
        }

        .content-section[data-section="about"] .info-icon {
            font-size: 31px;
            margin-bottom: 9px;
        }

        .content-section[data-section="about"] .info-label {
            font-size: 10px;
            letter-spacing: 0.85px;
            margin-bottom: 7px;
        }

        .content-section[data-section="about"] .info-value {
            font-size: 14px;
        }

        .content-section[data-section="about"] .info-sub {
            font-size: 11px;
            margin-top: 3px;
        }

        /* Bio Section */
        .content-section[data-section="about"] .bio-section {
            margin: 26px 0;
        }

        .content-section[data-section="about"] .bio-title,
        .content-section[data-section="about"] .personality-title,
        .content-section[data-section="about"] .section-subtitle,
        .content-section[data-section="about"] .fav-title {
            font-size: 17px;
            margin-bottom: 21px;
            gap: 9px;
        }

        .content-section[data-section="about"] .bio-title::before,
        .content-section[data-section="about"] .personality-title::before,
        .content-section[data-section="about"] .section-subtitle::before {
            left: -17px;
            font-size: 12px;
        }

        .content-section[data-section="about"] .bio-title::after,
        .content-section[data-section="about"] .personality-title::after,
        .content-section[data-section="about"] .section-subtitle::after {
            right: -17px;
            font-size: 12px;
        }

        .content-section[data-section="about"] .bio-card {
            border-radius: 14px;
            padding: 24px;
            margin-bottom: 17px;
        }

        .content-section[data-section="about"] .bio-card::before {
            top: 13px;
            right: 17px;
            font-size: 43px;
        }

        .content-section[data-section="about"] .bio-card::after {
            bottom: 17px;
            left: 21px;
            font-size: 30px;
        }

        .content-section[data-section="about"] .quote-mark {
            top: 9px;
            left: 13px;
            font-size: 41px;
        }

        .content-section[data-section="about"] .bio-text {
            font-size: 13px;
            line-height: 1.75;
            padding-left: 26px;
        }

        .content-section[data-section="about"] .bio-highlight {
            padding: 1px 5px;
            border-radius: 3px;
        }

        /* Personality Section */
        .content-section[data-section="about"] .personality-section {
            margin: 26px 0;
        }

        .content-section[data-section="about"] .tags-container {
            gap: 9px;
        }

        .content-section[data-section="about"] .personality-tag {
            padding: 9px 17px;
            border-radius: 21px;
            font-size: 12px;
            gap: 7px;
        }

        .content-section[data-section="about"] .personality-tag iconify-icon {
            font-size: 17px;
        }

        /* Story Section */
        .content-section[data-section="about"] .story-section {
            margin: 26px 0;
            padding: 21px;
        }

        .content-section[data-section="about"] .story-section h3 {
            font-size: 20px;
            margin-bottom: 15px;
        }

        .content-section[data-section="about"] .story-section p {
            font-size: 13px;
            line-height: 1.75;
        }

        /* UI Controls - About Me */
        .content-section[data-section="about"]~.back-button,
        .expanded-view[data-current-section="about"] .back-button {
            top: 17px;
            left: 17px;
            padding: 10px 20px;
            font-size: 14px;
            border-radius: 43px;
            gap: 7px;
        }

        .content-section[data-section="about"]~.scroll-indicator,
        .expanded-view[data-current-section="about"] .scroll-indicator {
            bottom: 26px;
            gap: 10px;
        }

        .content-section[data-section="about"]~.scroll-indicator .scroll-text,
        .expanded-view[data-current-section="about"] .scroll-indicator .scroll-text {
            font-size: 12px;
            letter-spacing: 0.43px;
        }

        .content-section[data-section="about"]~.scroll-indicator.is-back-button .scroll-text,
        .expanded-view[data-current-section="about"] .scroll-indicator.is-back-button .scroll-text {
            padding: 10px 20px;
            border-radius: 43px;
            letter-spacing: 0.68px;
        }

        .content-section[data-section="about"]~.scroll-indicator .scroll-arrow,
        .expanded-view[data-current-section="about"] .scroll-indicator .scroll-arrow {
            font-size: 27px;
        }

        .content-section[data-section="about"]~.section-dots,
        .expanded-view[data-current-section="about"] .section-dots {
            right: 26px;
            gap: 13px;
        }

        .content-section[data-section="about"]~.section-dots .section-dot,
        .expanded-view[data-current-section="about"] .section-dots .section-dot {
            width: 10px;
            height: 10px;
        }

        /* ============================================================================
   2. CONTACT PAGE - SCALE 80%
   ============================================================================ */

        /* Container & Layout */
        .content-section[data-section="contact"] .section-content {
            max-width: 640px;
            padding: 28px;
            border-radius: 20px;
        }

        .content-section[data-section="contact"] h2 {
            font-size: 29px;
            margin-bottom: 24px;
            gap: 12px;
        }

        /* Contact List & Items */
        .content-section[data-section="contact"] .contact-list {
            gap: 12px;
        }

        .content-section[data-section="contact"] .contact-item {
            border-radius: 13px;
            padding: 14px 16px;
            gap: 12px;
        }

        .content-section[data-section="contact"] .contact-icon {
            font-size: 22px;
        }

        .content-section[data-section="contact"] .contact-label {
            font-size: 10px;
            letter-spacing: 0.8px;
            margin-bottom: 3px;
        }

        .content-section[data-section="contact"] .contact-value {
            font-size: 13px;
        }

        /* Copy Button */
        .content-section[data-section="contact"] .copy-btn {
            border-radius: 6px;
            padding: 6px 10px;
            font-size: 13px;
        }

        /* Social Section */
        .content-section[data-section="contact"] .social-section {
            margin: 24px 0;
        }

        .content-section[data-section="contact"] .social-grid {
            grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
            gap: 12px;
        }

        .content-section[data-section="contact"] .social-card {
            border-radius: 14px;
            padding: 16px;
        }

        .content-section[data-section="contact"] .social-icon {
            font-size: 32px;
            margin-bottom: 8px;
        }

        .content-section[data-section="contact"] .social-name {
            font-size: 12px;
            margin-bottom: 3px;
        }

        .content-section[data-section="contact"] .social-handle {
            font-size: 10px;
        }

        /* Section Titles */
        .content-section[data-section="contact"] .section-subtitle {
            font-size: 16px;
            margin-bottom: 20px;
            gap: 8px;
        }

        .content-section[data-section="contact"] .section-subtitle::before {
            left: -16px;
            font-size: 11px;
        }

        .content-section[data-section="contact"] .section-subtitle::after {
            right: -16px;
            font-size: 11px;
        }

        /* UI Controls - Contact */
        .content-section[data-section="contact"]~.back-button,
        .expanded-view[data-current-section="contact"] .back-button {
            top: 16px;
            left: 16px;
            padding: 10px 19px;
            font-size: 13px;
            border-radius: 40px;
            gap: 6px;
        }

        .content-section[data-section="contact"]~.scroll-indicator,
        .expanded-view[data-current-section="contact"] .scroll-indicator {
            bottom: 24px;
            gap: 10px;
        }

        .content-section[data-section="contact"]~.scroll-indicator .scroll-text,
        .expanded-view[data-current-section="contact"] .scroll-indicator .scroll-text {
            font-size: 11px;
            letter-spacing: 0.4px;
        }

        .content-section[data-section="contact"]~.scroll-indicator.is-back-button .scroll-text,
        .expanded-view[data-current-section="contact"] .scroll-indicator.is-back-button .scroll-text {
            padding: 10px 19px;
            border-radius: 40px;
            letter-spacing: 0.64px;
        }

        .content-section[data-section="contact"]~.scroll-indicator .scroll-arrow,
        .expanded-view[data-current-section="contact"] .scroll-indicator .scroll-arrow {
            font-size: 26px;
        }

        .content-section[data-section="contact"]~.section-dots,
        .expanded-view[data-current-section="contact"] .section-dots {
            right: 24px;
            gap: 12px;
        }

        .content-section[data-section="contact"]~.section-dots .section-dot,
        .expanded-view[data-current-section="contact"] .section-dots .section-dot {
            width: 10px;
            height: 10px;
        }

        /* ============================================================================
   3. FAVORITES PAGE - SCALE 80% + HEIGHT OPTIMIZED
   ============================================================================ */

        /* Container & Layout - Giảm padding để tăng không gian */
        .content-section[data-section="favorites"] .section-content {
            max-width: 640px;
            padding: 20px 28px;
            /* Giảm vertical padding: 28px → 20px */
            border-radius: 20px;
        }

        .content-section[data-section="favorites"] h2 {
            font-size: 29px;
            margin-bottom: 16px;
            /* Giảm: 24px → 16px */
            gap: 12px;
        }

        /* Favorites Category & List - Giảm spacing */
        .content-section[data-section="favorites"] .fav-category {
            margin: 20px 0;
            /* Giảm: 32px → 20px */
        }

        .content-section[data-section="favorites"] .fav-category:first-of-type {
            margin-top: 0;
            /* Category đầu tiên không margin-top */
        }

        .content-section[data-section="favorites"] .fav-list {
            gap: 10px;
            /* Giảm: 16px → 10px */
        }

        /* Favorites Items - Compact hơn, card thấp hơn */
        .content-section[data-section="favorites"] .fav-item {
            padding: 10px 14px;
            /* Giảm height: 12px → 10px */
            gap: 10px;
            /* Giảm: 12px → 10px */
        }

        /* Bubble Shapes - Border Radius */
        .content-section[data-section="favorites"] .fav-item:nth-child(1) {
            border-radius: 28px 22px 32px 20px;
        }

        .content-section[data-section="favorites"] .fav-item:nth-child(2) {
            border-radius: 22px 28px 20px 30px;
        }

        .content-section[data-section="favorites"] .fav-item:nth-child(3) {
            border-radius: 32px 20px 28px 24px;
        }

        .content-section[data-section="favorites"] .fav-item:nth-child(4) {
            border-radius: 20px 32px 24px 28px;
        }

        .content-section[data-section="favorites"] .fav-item:nth-child(5) {
            border-radius: 30px 24px 22px 32px;
        }

        /* Floating Decorations */
        .content-section[data-section="favorites"] .fav-item::before {
            top: -8px;
            right: 16px;
            font-size: 14px;
        }

        .content-section[data-section="favorites"] .fav-item::after {
            bottom: -6px;
            left: 20px;
            font-size: 13px;
        }

        .content-section[data-section="favorites"] .fav-item:nth-child(even)::before {
            left: 16px;
        }

        .content-section[data-section="favorites"] .fav-item:nth-child(even)::after {
            right: 20px;
        }

        /* Favorites Content - Compact spacing, labels thoáng hơn */
        .content-section[data-section="favorites"] .fav-icon {
            font-size: 24px;
            /* Giảm thêm: 26px → 24px */
        }

        .content-section[data-section="favorites"] .fav-name {
            font-size: 13px;
            margin-bottom: 4px;
            /* Tăng khoảng cách: 2px → 4px */
        }

        .content-section[data-section="favorites"] .fav-creator {
            font-size: 11px;
            margin-bottom: 3px;
            /* Thêm khoảng cách với year */
        }

        .content-section[data-section="favorites"] .fav-year {
            font-size: 10px;
            margin-top: 0;
            /* Loại bỏ margin-top, dùng margin-bottom của creator */
        }

        .content-section[data-section="favorites"] .play-fav-btn {
            width: 32px;
            /* Giảm: 36px → 32px */
            height: 32px;
            /* Giảm: 36px → 32px */
            font-size: 14px;
            /* Giảm: 16px → 14px */
        }

        /* Hobbies Grid - Compact hơn, cards thấp hơn */
        .content-section[data-section="favorites"] .hobbies-grid {
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            /* Giảm: 128px → 120px */
            gap: 12px;
            /* Tăng khoảng cách: 10px → 12px */
            margin-top: 12px;
            /* Giảm: 16px → 12px */
        }

        .content-section[data-section="favorites"] .hobby-card {
            border-radius: 16px;
            padding: 14px 12px;
            /* Giảm height: 16px×14px → 14px×12px */
        }

        .content-section[data-section="favorites"] .hobby-icon {
            font-size: 26px;
            /* Giảm: 28px → 26px */
            margin-bottom: 6px;
            /* Giảm: 8px → 6px */
        }

        .content-section[data-section="favorites"] .hobby-name {
            font-size: 12px;
        }

        /* Section Titles - Compact spacing */
        .content-section[data-section="favorites"] .fav-title,
        .content-section[data-section="favorites"] .section-subtitle {
            font-size: 16px;
            margin-bottom: 20px;
            /* Giảm: 20px → 12px */
            gap: 8px;
        }

        .content-section[data-section="favorites"] .fav-title::before,
        .content-section[data-section="favorites"] .section-subtitle::before {
            left: -16px;
            font-size: 11px;
        }

        .content-section[data-section="favorites"] .fav-title::after,
        .content-section[data-section="favorites"] .section-subtitle::after {
            right: -16px;
            font-size: 11px;
        }

        /* UI Controls - Favorites */
        .content-section[data-section="favorites"]~.back-button,
        .expanded-view[data-current-section="favorites"] .back-button {
            top: 16px;
            left: 16px;
            padding: 10px 19px;
            font-size: 13px;
            border-radius: 40px;
            gap: 6px;
        }

        .content-section[data-section="favorites"]~.scroll-indicator,
        .expanded-view[data-current-section="favorites"] .scroll-indicator {
            bottom: 24px;
            gap: 10px;
        }

        .content-section[data-section="favorites"]~.scroll-indicator .scroll-text,
        .expanded-view[data-current-section="favorites"] .scroll-indicator .scroll-text {
            font-size: 11px;
            letter-spacing: 0.4px;
        }

        .content-section[data-section="favorites"]~.scroll-indicator.is-back-button .scroll-text,
        .expanded-view[data-current-section="favorites"] .scroll-indicator.is-back-button .scroll-text {
            padding: 10px 19px;
            border-radius: 40px;
            letter-spacing: 0.64px;
        }

        .content-section[data-section="favorites"]~.scroll-indicator .scroll-arrow,
        .expanded-view[data-current-section="favorites"] .scroll-indicator .scroll-arrow {
            font-size: 26px;
        }

        .content-section[data-section="favorites"]~.section-dots,
        .expanded-view[data-current-section="favorites"] .section-dots {
            right: 24px;
            gap: 12px;
        }

        .content-section[data-section="favorites"]~.section-dots .section-dot,
        .expanded-view[data-current-section="favorites"] .section-dots .section-dot {
            width: 10px;
            height: 10px;
        }

        /* ============================================================================
   MOBILE RESPONSIVE - INLINE HEADER LAYOUT
   ============================================================================
   Desktop: Back button góc trái + h2 title trong content
   Mobile: [← Back] [Title] inline trên top bar
   ============================================================================ */

        /* Mobile Header Bar - Hidden trên desktop */
        .mobile-header-bar {
            display: none;
        }

        /* Desktop: Back button góc trái + desktop title (mặc định) */
        @media (min-width: 769px) {

            /* Ẩn mobile elements */
            .mobile-header-bar {
                display: none !important;
            }

            .mobile-back-btn {
                display: none !important;
            }

            /* Hiện desktop elements */
            .desktop-title {
                display: flex !important;
            }

            .desktop-back-btn {
                display: flex !important;
                position: fixed;
                top: 20px;
                left: 20px;
                transform: scale(0.8);
                transform-origin: top left;
                z-index: 1001;
            }
        }

        /* Mobile Layout (≤ 768px) */
        @media (max-width: 768px) {

            /* Ẩn desktop elements */
            .desktop-title {
                display: none !important;
            }

            .desktop-back-btn {
                display: none !important;
            }

            /* Mobile Header Bar - Fixed top with enhanced styling */
            .mobile-header-bar {
                display: flex;
                align-items: center;
                justify-content: space-between;
                position: fixed !important;
                /* Force fixed */
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                height: 60px;
                padding: 0 16px;
                background: rgba(255, 240, 248, 0.95);
                /* Slightly pink tint */
                backdrop-filter: blur(20px) saturate(180%);
                /* Enhanced blur */
                -webkit-backdrop-filter: blur(20px) saturate(180%);
                /* Safari support */
                border-bottom: 2px solid rgba(255, 196, 221, 0.3);
                box-shadow: 0 2px 20px rgba(255, 192, 221, 0.25);
                /* Enhanced shadow */
                z-index: 1002;
                /* Above all content */
                transition: background 0.3s ease, box-shadow 0.3s ease;
                /* Smooth transitions */
            }

            /* Header scroll effect - Enhance on scroll */
            .mobile-header-bar.scrolled {
                background: rgba(255, 240, 248, 0.98);
                box-shadow: 0 4px 25px rgba(255, 192, 221, 0.3);
            }

            /* Back Button - Chỉ icon, không text */
            .mobile-back-btn {
                display: flex !important;
                position: relative;
                top: unset;
                left: unset;
                transform: scale(1);
                transform-origin: center;
                padding: 8px;
                /* Square padding cho icon */
                font-size: 20px;
                /* Icon size */
                border-radius: 50%;
                /* Circle button */
                gap: 0;
                margin: 0;
                flex-shrink: 0;
                width: 40px;
                height: 40px;
                align-items: center;
                justify-content: center;
                background: transparent;
                /* Transparent background */
                border: 2px solid #ffc4dd;
            }

            .mobile-back-btn:hover {
                transform: scale(1.1);
                background: rgba(255, 196, 221, 0.1);
            }

            .mobile-back-btn:active {
                transform: scale(0.95);
            }

            /* Mobile Section Title - Center, no border */
            .mobile-section-title {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                display: flex;
                align-items: center;
                gap: 10px;
                background: transparent;
                /* No background */
                border: none;
                /* No border */
                border-radius: 0;
                padding: 0;
                box-shadow: none;
                /* No shadow */
            }

            .mobile-title-icon {
                font-size: 24px;
                line-height: 1;
                display: flex;
                align-items: center;
            }

            .mobile-title-text {
                font-size: 18px;
                font-weight: 700;
                color: #e879b9;
                letter-spacing: 0.3px;
            }

            /* Spacer để balance layout */
            .mobile-header-spacer {
                width: 40px;
                flex-shrink: 0;
            }

            /* Expanded view - padding top cho header bar */
            .expanded-view {
                padding-top: 60px;
            }

            /* ============================================
               MOBILE NATIVE SCROLL MODE
               ============================================ */

            /* Carousel Container - Native scroll */
            .carousel-container {
                padding-top: 10px;
                overflow-y: auto !important;
                /* Native scroll */
                scroll-behavior: smooth !important;
                /* Smooth native scroll */
                scroll-snap-type: none !important;
                /* No snap */
                height: auto !important;
                /* Auto height */
                -webkit-overflow-scrolling: touch;
                /* iOS momentum scroll */
            }

            /* Content Sections - Auto height, no constraints */
            .content-section {
                min-height: auto !important;
                /* Remove 100vh constraint */
                height: auto !important;
                /* Auto height based on content */
                padding: 20px 14px 30px !important;
                /* Compact padding */
                justify-content: flex-start !important;
                /* Top align instead of center */
            }

            /* First section - Extra top spacing for header */
            .content-section:first-child {
                padding-top: 40px !important;
                /* Space for fixed header + breathing room */
            }

            /* Last section - Extra bottom spacing */
            .content-section:last-child {
                padding-bottom: 100px !important;
                /* Prevent content cut-off at bottom */
            }

            /* Section content - No overflow constraints */
            .content-section .section-content {
                padding: 16px 14px;
                max-height: none !important;
                /* Remove height limit */
                overflow: visible !important;
                /* Show all content */
            }

            /* Scroll indicator - Ẩn trên mobile */
            .scroll-indicator {
                display: none !important;
            }

            /* Section dots - Compact */
            .section-dots {
                right: 12px;
                gap: 10px;
            }

            .section-dot {
                width: 9px;
                height: 9px;
            }

            /* ============================================
               MOBILE ANIMATIONS OPTIMIZATION
               ============================================ */

            .section-content,
            .section-content * {
                opacity: 1 !important;
                transform: none !important;
            }

            /* Disable all animations for better performance */
            * {
                animation-duration: 0s !important;
                animation-delay: 0s !important;
                transition-duration: 0s !important;
                transition-delay: 0s !important;
            }

            /* Keep hover/active states instant */
            *:hover,
            *:active,
            *:focus {
                animation-duration: 0s !important;
                transition-duration: 0s !important;
            }

            /* Disable all visibility transitions */
            .content-section {
                opacity: 1 !important;
                visibility: visible !important;
                transform: none !important;
            }

            .carousel-container {
                opacity: 1 !important;
                visibility: visible !important;
            }

            /* Keep decorations visible but static */
            .leaf,
            .orange-slice {
                animation: none !important;
                opacity: 0.3 !important;
            }

            /* Disable floating animations */
            @keyframes float {
                from {
                    transform: none;
                }

                to {
                    transform: none;
                }
            }

            @keyframes rotate {
                from {
                    transform: none;
                }

                to {
                    transform: none;
                }
            }

            /* Disable pulse/bounce animations */
            .status-badge {
                animation: none !important;
                transform: scale(1) !important;
            }

            .avatar-container {
                animation: none !important;
                transform: none !important;
            }

            /* Disable button animations */
            .back-button:hover,
            .back-button:active,
            .mobile-back-btn:hover,
            .mobile-back-btn:active {
                transform: none !important;
                box-shadow: none !important;
            }

            /* Keep section dots visible */
            .section-dot {
                opacity: 1 !important;
                visibility: visible !important;
            }

            /* Disable music player animations */
            .music-player.playing .album-art {
                animation: none !important;
                transform: scale(1) !important;
            }

            .music-icon {
                animation: none !important;
            }

            /* Disable link animations */
            .link-button::before {
                animation: none !important;
                left: 0 !important;
            }

            /* Disable control button animations */
            .control-btn {
                animation: none !important;
            }

            /* Smooth scroll for content (not animated) */
            html {
                scroll-behavior: auto !important;
            }

            /* Remove any backdrop blur for better perf */
            .mobile-header-bar {
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
                background: rgba(255, 240, 248, 0.99) !important;
            }

            /* Disable shadow animations */
            .card,
            .profile-card,
            .music-player {
                box-shadow: none !important;
            }

            /* Keep all content visible and accessible */
            .content-section::before {
                animation: none !important;
                opacity: 0.05 !important;
            }

            /* Optimize transforms - remove all custom transforms */
            .carousel-container,
            .content-section,
            .section-content,
            .back-button,
            .mobile-back-btn {
                transform: none !important;
                will-change: auto !important;
            }

            /* Play button optimization for mobile */
            .play-pause-btn:hover .play-icon,
            .play-pause-btn:active .play-icon {
                transform: none !important;
            }

            .play-icon {
                transition: none !important;
            }
        }

        /* Tablet responsive (769px - 1024px) */
        @media (min-width: 769px) and (max-width: 1024px) {
            .content-section h2 {
                font-size: 28px;
            }

            .content-section .section-content {
                max-width: 90%;
                padding: 24px;
            }
        }