@keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-fade-in {
            animation: fadeIn 0.6s ease-out forwards;
        }
        .delay-100 { animation-delay: 0.1s; }
        .delay-150 { animation-delay: 0.15s; }
        .delay-300 { animation-delay: 0.3s; }
        html.dark-theme,
        body.dark-theme {
            background: #0f172a !important;
            color: #e5e7eb !important;
        }
        html.dark-theme body.bg-background { background-color: #0f172a !important; }
        body.dark-theme .bg-background { background-color: #0f172a !important; }
        body.dark-theme .bg-surface,
        body.dark-theme .bg-white { background-color: #1e293b !important; }
        body.dark-theme .bg-gray-50 { background-color: #172033 !important; }
        body.dark-theme .bg-gray-100 { background-color: #334155 !important; }
        body.dark-theme .text-primary { color: #f8fafc !important; }
        body.dark-theme .text-gray-900,
        body.dark-theme .text-gray-800 { color: #f8fafc !important; }
        body.dark-theme .text-gray-500,
        body.dark-theme .text-gray-600,
        body.dark-theme .text-gray-400,
        body.dark-theme .text-text_muted { color: #cbd5e1 !important; }
        body.dark-theme h1,
        body.dark-theme h2,
        body.dark-theme h3 {
            color: #f8fafc;
            text-shadow: 0 1px 2px rgba(2, 6, 23, 0.35);
        }
        body.dark-theme .border-gray-100,
        body.dark-theme .border-gray-200,
        body.dark-theme .border-gray-300 { border-color: #475569 !important; }
        body.dark-theme input,
        body.dark-theme textarea { background-color: #172033 !important; color: #f8fafc !important; border-color: #475569 !important; }
        body.dark-theme #messagesList .message-item {
            background-color: #263449 !important;
            border-color: #475569 !important;
            color: #f8fafc;
        }
        body.dark-theme #messagesList .message-name,
        body.dark-theme #messagesList .message-content { color: #f8fafc !important; }
        body.dark-theme #messagesList .message-time,
        body.dark-theme #messagesList .message-favorite { color: #cbd5e1 !important; }
        body.dark-theme #messagesList .message-item .message-favorite.text-pink-600 {
            color: #f9a8d4 !important;
        }
        body.dark-theme #socialSection > div > a {
            background-color: #1e293b !important;
            border-color: #475569 !important;
        }
        body.dark-theme #socialSection > div > a > div {
            background-color: #334155 !important;
            color: #f8fafc !important;
            box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.2);
        }
        body.dark-theme #socialSection > div > a:nth-child(1) > div,
        body.dark-theme #socialSection > div > a:nth-child(4) > div {
            background-color: #1d4ed8 !important;
            color: #dbeafe !important;
        }
        body.dark-theme #socialSection > div > a:nth-child(3) > div {
            background-color: #b91c1c !important;
            color: #fee2e2 !important;
        }
        body.dark-theme #socialSection > div > a:hover > div,
        body.dark-theme #socialSection > div > a:focus-visible > div {
            background-color: #475569 !important;
            color: #ffffff !important;
        }
        body.dark-theme #socialSection > div > a:nth-child(1):hover > div,
        body.dark-theme #socialSection > div > a:nth-child(1):focus-visible > div,
        body.dark-theme #socialSection > div > a:nth-child(4):hover > div,
        body.dark-theme #socialSection > div > a:nth-child(4):focus-visible > div {
            background-color: #2563eb !important;
        }
        body.dark-theme #socialSection > div > a:nth-child(3):hover > div,
        body.dark-theme #socialSection > div > a:nth-child(3):focus-visible > div {
            background-color: #dc2626 !important;
        }
        body.dark-theme #socialSection > div > a:nth-child(2) > div {
            background-color: #164e63 !important;
            color: #a5f3fc !important;
        }
        body.dark-theme #socialSection > div > a:nth-child(2):hover > div,
        body.dark-theme #socialSection > div > a:nth-child(2):focus-visible > div {
            background-color: #0891b2 !important;
        }
        .theme-toggle {
            position: fixed;
            top: 0.75rem;
            right: 0.75rem;
            z-index: 60;
            width: 2.25rem;
            height: 2.25rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(148, 163, 184, 0.45);
            border-radius: 9999px;
            background: rgba(255, 255, 255, 0.9);
            color: #334155;
            box-shadow: 0 4px 14px rgba(15, 23, 42, 0.15);
            transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
        }
        .theme-toggle:hover,
        .theme-toggle:focus-visible {
            transform: scale(1.08);
            outline: none;
        }
        body.dark-theme .theme-toggle {
            background: #1e293b;
            color: #facc15;
        }
        .qr-hover-overlay {
            position: fixed;
            inset: 0;
            z-index: 100;
            background: rgba(0, 0, 0, 0.82);
            opacity: 0;
            transition: opacity 0.45s ease;
            pointer-events: none;
        }
        .qr-hover-image {
            position: fixed;
            left: 50%;
            top: 50%;
            z-index: 110;
            width: min(88vw, 520px);
            max-width: none;
            opacity: 0;
            transform: translate(-50%, -50%) scale(0.72);
            transition: opacity 0.45s ease, transform 0.45s ease;
            pointer-events: none;
        }
        .qr-hover-group.is-active > img:first-child {
            filter: brightness(0.28) blur(1px);
        }
        .qr-hover-overlay.is-visible {
            opacity: 1;
        }
        .qr-hover-image.is-visible {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1.08);
        }
        .avatar-hover-group {
            position: relative;
            z-index: 1;
        }
        .avatar-hover-overlay,
        .avatar-hover-image {
            position: fixed;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.35s ease, transform 0.35s ease;
        }
        .avatar-hover-overlay {
            inset: 0;
            z-index: 70;
            background: rgba(15, 23, 42, 0.72);
        }
        .avatar-hover-image {
            left: 50%;
            top: 50%;
            z-index: 71;
            width: min(78vw, 620px);
            max-height: 82vh;
            object-fit: contain;
            transform: translate(-50%, -50%) scale(0.35);
            filter: contrast(1.05) saturate(1.08);
        }
        .avatar-hover-overlay.is-visible,
        .avatar-hover-image.is-visible {
            opacity: 1;
        }
        .avatar-hover-overlay.is-visible {
            pointer-events: none;
        }
        .avatar-hover-image.is-visible {
            transform: translate(-50%, -50%) scale(1);
        }
        @media (max-width: 640px) {
            .avatar-hover-image {
                width: min(82vw, 360px);
                max-height: 76vh;
            }
        }
        .zalo-phone-popup {
            opacity: 0;
            transform: translate(-50%, 4px);
            pointer-events: none;
            transition: opacity 0.2s ease, transform 0.2s ease;
            min-width: max-content;
        }
        .zalo-link:hover .zalo-phone-popup,
        .zalo-link:focus-visible .zalo-phone-popup {
            opacity: 1;
            transform: translate(-50%, 0);
        }
        /* ==================== Nút bấm rõ ràng cho "Dự án cá nhân" và "Video kỷ yếu" ====================
           Mục đích: người xem nhìn là biết BẤM ĐƯỢC (nền + viền + mũi tên + badge "MỞ" + nhấc lên khi rê chuột). */
        .link-cta {
            display: inline-flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.5rem;
            max-width: 100%;
            padding: 0.4rem 0.85rem;
            border: 1px solid rgba(37, 99, 235, 0.35);
            border-radius: 9999px;
            background: linear-gradient(180deg, rgba(37, 99, 235, 0.16), rgba(37, 99, 235, 0.07));
            color: #1d4ed8;
            font-weight: 700;
            line-height: 1.3;
            text-align: left;
            text-decoration: underline dotted rgba(29, 78, 216, 0.5);
            text-underline-offset: 3px;
            cursor: pointer;
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
            transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease,
                        transform 0.2s ease, color 0.2s ease, text-decoration-color 0.2s ease;
            -webkit-tap-highlight-color: rgba(37, 99, 235, 0.2);
        }
        .link-cta:hover,
        .link-cta:focus-visible {
            color: #1e40af;
            border-color: #2563eb;
            background: linear-gradient(180deg, rgba(37, 99, 235, 0.24), rgba(37, 99, 235, 0.14));
            box-shadow: 0 10px 20px -10px rgba(37, 99, 235, 0.6);
            transform: translateY(-1px);
            text-decoration-style: solid;
            text-decoration-color: #1e40af;
        }
        .link-cta:active { transform: translateY(0) scale(0.99); }
        .link-cta:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
        .link-cta-icon { font-size: 1.05em; color: #2563eb; }
        .link-cta-arrow {
            font-size: 0.95em;
            color: #2563eb;
            transition: transform 0.2s ease;
        }
        .link-cta:hover .link-cta-arrow,
        .link-cta:focus-visible .link-cta-arrow { transform: translate(2px, -2px); }
        /* Badge "MỞ" / "FACEBOOK" — nhấp nháy nhẹ để mời bấm */
        .link-cta-hint {
            padding: 0.1rem 0.45rem;
            border-radius: 9999px;
            background: #2563eb;
            color: #ffffff;
            font-size: 0.6875rem;
            font-weight: 700;
            letter-spacing: 0.02em;
            text-transform: uppercase;
            animation: linkCtaPulse 2.4s ease-in-out infinite;
        }
        @keyframes linkCtaPulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.55); }
            50% { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0); }
        }
        /* Dòng gợi ý nhỏ ngay dưới nút */
        .link-cta-note {
            display: flex;
            align-items: center;
            gap: 0.35rem;
            margin: 0.35rem 0 0;
            font-size: 0.75rem;
            color: #6b7280;
        }
        .link-cta-note i { color: #2563eb; font-size: 0.9em; }
        @media (prefers-reduced-motion: reduce) {
            .link-cta, .link-cta-arrow, .link-cta-hint { transition: none; animation: none; }
            .link-cta:hover { transform: none; }
        }
        /* Dark theme cho nút bấm */
        body.dark-theme .link-cta,
        html.dark-theme .link-cta {
            color: #bfdbfe !important;
            border-color: rgba(96, 165, 250, 0.5);
            background: linear-gradient(180deg, rgba(59, 130, 246, 0.3), rgba(59, 130, 246, 0.16));
        }
        body.dark-theme .link-cta:hover,
        body.dark-theme .link-cta:focus-visible,
        html.dark-theme .link-cta:hover,
        html.dark-theme .link-cta:focus-visible {
            color: #ffffff !important;
            border-color: #93c5fd;
            background: linear-gradient(180deg, rgba(59, 130, 246, 0.45), rgba(59, 130, 246, 0.26));
        }
        body.dark-theme .link-cta-icon,
        body.dark-theme .link-cta-arrow,
        html.dark-theme .link-cta-icon,
        html.dark-theme .link-cta-arrow { color: #93c5fd; }
        body.dark-theme .link-cta-hint,
        html.dark-theme .link-cta-hint { background: #3b82f6; }
        body.dark-theme .link-cta-note,
        html.dark-theme .link-cta-note { color: #cbd5e1; }
        .video-preview-card {
            position: relative;
            z-index: 0;
            transition: transform 0.3s ease, box-shadow 0.3s ease, z-index 0s linear 0.3s;
        }
        .video-preview-card:hover,
        .video-preview-card:focus-within {
            z-index: 10;
            transform: scale(1.04);
            box-shadow: 0 18px 35px rgba(15, 23, 42, 0.2);
            transition-delay: 0s;
        }
        .video-frame {
            transition: filter 0.3s ease;
        }
        .fb-video iframe {
            width: 100% !important;
            height: 100% !important;
            max-width: 100%;
            border: 0;
        }
        .video-preview-card:hover .video-frame,
        .video-preview-card:focus-within .video-frame {
            filter: brightness(1.05);
        }
        .album-pop-card {
            min-height: 112px;
        }
        .album-pop-stack img {
            transform-origin: center;
            transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), z-index 0s linear 0.2s;
        }
        .album-pop-stack img:nth-child(1) {
            z-index: 1;
        }
        .album-pop-stack img:nth-child(2) {
            z-index: 2;
        }
        .album-pop-stack img:nth-child(3) {
            z-index: 3;
        }
        .album-pop-card:hover .album-pop-stack img:nth-child(1),
        .album-pop-card:focus-within .album-pop-stack img:nth-child(1) {
            transform: translateX(-62px) rotate(-18deg);
            z-index: 1;
        }
        .album-pop-card:hover .album-pop-stack img:nth-child(2),
        .album-pop-card:focus-within .album-pop-stack img:nth-child(2) {
            transform: translateX(62px) rotate(18deg);
            z-index: 2;
        }
        .album-pop-card:hover .album-pop-stack img:nth-child(3),
        .album-pop-card:focus-within .album-pop-stack img:nth-child(3) {
            transform: translateY(-3px) scale(1.04);
            z-index: 3;
        }
        .message-photo {
            transform-origin: center;
            transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
        }
        .message-photo:hover,
        .message-photo:focus-visible {
            box-shadow: 0 18px 36px rgba(15, 23, 42, 0.3);
            filter: saturate(1.08) contrast(1.04);
        }
        #messagesList {
            position: relative;
            z-index: 50;
        }
        @media (max-width: 640px) {
            main {
                gap: 1rem !important;
                padding-top: 1rem !important;
                padding-bottom: 1rem !important;
            }
            main > .lg\:col-span-7 {
                gap: 1rem !important;
            }
            .video-preview-card {
                padding: 0.625rem !important;
                border-radius: 0.875rem;
            }
            .video-preview-card:hover,
            .video-preview-card:focus-within {
                transform: none;
                box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
            }
            .video-preview-card h3:not(.video-title) {
                font-size: 0.8125rem;
            }
            .video-frame {
                border-radius: 0.625rem;
            }
            .video-preview-card .grid.grid-cols-2 {
                grid-template-columns: minmax(0, 1fr);
                gap: 0.75rem;
            }
            .video-preview-card .fb-video {
                min-width: 0;
            }
        }