/* style.css */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

:root { /* ... vars ... */ --primary-color: #6a0dad; --secondary-color: #a940c7; --background-color: #1a1a1d; --card-background: #2c2c34; --text-color: #e0e0e0; --text-muted: #a0a0a0; --icon-color: #b39ddb; --progress-bar-bg: #444; --progress-bar-fill: var(--secondary-color); --border-color: #555; --hover-glow: 0 0 15px rgba(179, 157, 219, 0.6); --card-shadow: 0 5px 15px rgba(0, 0, 0, 0.4); --card-hover-shadow: 0 10px 25px rgba(0, 0, 0, 0.6); --cta-button-bg: var(--primary-color); --cta-button-hover-bg: var(--secondary-color); --cursor-dot-color: var(--primary-color); --cursor-outline-color: var(--secondary-color); --badge-tooltip-bg: #444; --badge-tooltip-text: #fff; --primary-color-rgb: 106, 13, 173; }

html { cursor: none !important; }
* { box-sizing: border-box; margin: 0; padding: 0; }

@keyframes moveBackground { 0% { background-position: 0 0; } 100% { background-position: 565.7px -565.7px; } }

body { font-family: 'Roboto', sans-serif; background-color: var(--background-color); color: var(--text-color); display: flex; flex-direction: column; align-items: center; min-height: 100vh; padding: 30px 20px; background-image: linear-gradient(45deg, #1a1a1d 25%, #232328 25%, #232328 50%, #1a1a1d 50%, #1a1a1d 75%, #232328 75%, #232328 100%); background-size: 56.57px 56.57px; animation: moveBackground 45s linear infinite; }

/* --- CSS CHO CON TRỎ TÙY CHỈNH --- */
.cursor-dot, .cursor-outline { position: fixed; top: -100px; left: -100px; border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); will-change: top, left, transform, background-color, border-color; }
.cursor-dot { width: 8px; height: 8px; background-color: var(--cursor-dot-color); transition: transform 0.1s ease-out; }
.cursor-outline { width: 40px; height: 40px; background-color: transparent; border: 2px solid var(--cursor-outline-color); transition: top 0.1s ease-out, left 0.1s ease-out, transform 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out, border-color 0.2s ease-out; }
.cursor-outline.hover-effect { transform: translate(-50%, -50%) scale(1.4); border-color: var(--primary-color); }

/* --- Multi-Card Container, Card, Card Header --- */
.multi-card-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 25px; width: 100%; max-width: 1600px; margin-bottom: 30px; }
.card { background-color: var(--card-background); border-radius: 12px; border: 1px solid var(--border-color); box-shadow: var(--card-shadow), inset 0 0 0 0 rgba(255, 255, 255, 0); display: flex; flex-direction: column; flex: 1 1 350px; min-width: 300px; max-width: 450px; transition: transform 0.3s ease-out, box-shadow 0.4s ease-out; }
.card:hover { box-shadow: var(--card-hover-shadow), inset 0 0 50px 0 rgba(255, 255, 255, 0.04); transform: scale(1.05); z-index: 10; position: relative; }
.card-header { padding: 12px 20px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.15)); border-bottom: 1px solid var(--border-color); flex-shrink: 0; border-radius: 12px 12px 0 0; }
.card-header h3 { margin: 0; font-size: 1.1em; color: var(--text-color); border: none; padding: 0; }
.card-header h3 .icon { color: var(--primary-color); margin-right: 8px; }

/* --- Card Content --- */
.card-content { padding: 20px; flex-grow: 1; overflow-y: auto; display: flex; flex-direction: column; }

/* Styling chung khác */
h2#artist-name-heading { margin-bottom: 5px; border: none; padding: 0; font-size: 1.7em; display: inline-block; vertical-align: middle; max-width: 100%; min-height: 1.2em; color: #fff; }
#artist-name-heading .name-text { display: inline-block; position: relative; overflow: hidden; vertical-align: middle; background: linear-gradient(90deg, var(--secondary-color), #e0e0e0, var(--icon-color), var(--secondary-color)); background-size: 250% auto; color: transparent; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
#artist-name-heading .name-text::after { content: ''; position: absolute; top: 0; left: -150%; width: 50%; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%); transform: skewX(-25deg); animation: textLightSweep 4s linear infinite; animation-delay: 1s; }
@keyframes textLightSweep { 0% { left: -150%; } 40% { left: 150%; } 100% { left: 150%; } }
p { margin-bottom: 10px; line-height: 1.6; color: var(--text-muted); font-size: 0.95em; }
a { color: var(--secondary-color); text-decoration: none; transition: color 0.3s ease-out, text-shadow 0.3s ease-out; }
a:hover { color: var(--primary-color); text-shadow: var(--hover-glow); }
hr { border: 0; height: 1px; background-color: var(--border-color); margin: 15px 0; }
.icon { color: var(--icon-color); margin-right: 10px; width: 18px; text-align: center; }

/* --- ID Card Specific Styles --- */
.id-card .id-header { display: flex; justify-content: space-between; align-items: center; background-color: var(--primary-color); color: white; padding: 10px 15px; margin: 0; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; font-size: 0.9em; border-bottom: none; border-radius: 12px 12px 0 0; }
.id-card .header-icon { font-size: 1.3em; opacity: 0.8; }
.id-card .card-content { display: flex; flex-direction: column; align-items: center; text-align: center; }
.id-photo { flex-shrink: 0; width: 110px; height: 110px; border-radius: 50%; overflow: hidden; border: 4px solid var(--secondary-color); transition: transform 0.3s ease-out, box-shadow 0.4s ease-in-out; margin-bottom: 15px; animation: pulseGlow 4s ease-in-out infinite; }
@keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 10px rgba(169, 64, 199, 0.4); border-color: var(--secondary-color); } 50% { box-shadow: 0 0 22px rgba(169, 64, 199, 0.8), var(--hover-glow); border-color: var(--icon-color); } }
.id-photo img { width: 100%; height: 100%; object-fit: cover; }
.id-photo:hover { transform: scale(1.05); animation-play-state: paused; box-shadow: var(--hover-glow); }
.id-info { width: 100%; }
.id-info p { text-align: left; font-size: 0.9em; }
.id-info .subtitle { font-style: italic; color: var(--icon-color); margin-bottom: 15px; text-align: center; }
#dob { /* Không cần style đặc biệt nữa */ }
.birthday-trigger { display: inline-block; position: relative; margin-left: 5px; color: var(--icon-color); cursor: none; vertical-align: middle; font-size: 0.9em; }
.birthday-trigger i { display: block; }
.tooltip#birthday-tooltip { visibility: hidden; width: max-content; max-width: 200px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 5px 10px; position: absolute; z-index: 10; bottom: 150%; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s ease-out; font-size: 0.9em; pointer-events: none; }
.birthday-trigger:hover .tooltip#birthday-tooltip { visibility: visible; opacity: 1; }
.tooltip#birthday-tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; }

/* CSS CHO BADGE VÀ TOOLTIP CỦA NÓ */
.verified-badge { display: inline-block; margin-left: 5px; font-size: 0.8em; color: var(--secondary-color); vertical-align: middle; cursor: none; transition: transform 0.2s ease-out, filter 0.3s ease-out; position: relative; }
.verified-badge:hover { transform: scale(1.1); filter: brightness(1.2); }
.badge-icon-container { display: inline-block; vertical-align: middle; line-height: 1; font-size: 1em; }
.badge-icon-container > i { color: inherit; }
.badge-icon-container > svg { width: 1em; height: 1em; fill: currentColor; display: block; }
.badge-tooltip { display: none; }
.temp-tooltip { position: fixed; background-color: var(--badge-tooltip-bg); color: var(--badge-tooltip-text); padding: 6px 12px; border-radius: 6px; font-size: 0.9em; white-space: nowrap; z-index: 10000; pointer-events: none; opacity: 0; transition: opacity 0.3s ease-out; }
.temp-tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: var(--badge-tooltip-bg) transparent transparent transparent; }

.skills-card .card-content { padding-top: 15px; }
.skill { margin-bottom: 15px; opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; }
.skills-card.visible .skill { opacity: 1; transform: translateY(0); }
.skills-card.visible .skill:nth-child(1) { transition-delay: 0.1s; }
.skills-card.visible .skill:nth-child(2) { transition-delay: 0.15s; }
.skills-card.visible .skill:nth-child(3) { transition-delay: 0.2s; }
.skills-card.visible .skill:nth-child(4) { transition-delay: 0.25s; }
.skills-card.visible .skill:nth-child(5) { transition-delay: 0.3s; }
.skills-card.visible .skill:nth-child(6) { transition-delay: 0.35s; }
.skills-card.visible .skill:nth-child(7) { transition-delay: 0.4s; }
.skills-card.visible .skill:nth-child(8) { transition-delay: 0.45s; }
.skills-card.visible .skill:nth-child(9) { transition-delay: 0.42s; }
.skill-info { display: flex; justify-content: space-between; margin-bottom: 5px; font-weight: 500; font-size: 0.9em;}
.skill-info .icon { margin-right: 8px; }
.progress-bar-container { background-color: var(--progress-bar-bg); border-radius: 5px; height: 10px; overflow: hidden; width: 100%; position: relative; }
.progress-bar { background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); height: 100%; border-radius: 5px; width: 0; transition: width 1.5s cubic-bezier(0.25, 1, 0.5, 1); position: relative; overflow: hidden; }
.progress-bar::after { content: ''; position: absolute; top: 0; left: -150%; width: 75%; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%); transform: skewX(-25deg); animation: lightSweep 2.5s linear infinite; opacity: 0; transition: opacity 0.5s ease-out; }
.skills-card.visible .progress-bar::after { opacity: 1; }
.skills-card.visible .skill:nth-child(1) .progress-bar::after { animation-delay: 1.8s; }
.skills-card.visible .skill:nth-child(2) .progress-bar::after { animation-delay: 1.95s; }
.skills-card.visible .skill:nth-child(3) .progress-bar::after { animation-delay: 1.85s; }
.skills-card.visible .skill:nth-child(4) .progress-bar::after { animation-delay: 2.0s; }
.skills-card.visible .skill:nth-child(5) .progress-bar::after { animation-delay: 1.9s; }
.skills-card.visible .skill:nth-child(6) .progress-bar::after { animation-delay: 2.05s; }
.skills-card.visible .skill:nth-child(7) .progress-bar::after { animation-delay: 1.98s; }
.skills-card.visible .skill:nth-child(8) .progress-bar::after { animation-delay: 2.1s; }
.skills-card.visible .skill:nth-child(9) .progress-bar::after { animation-delay: 2.02s; }
@keyframes lightSweep { 0% { left: -150%; } 100% { left: 150%; } }

/* --- Spotify Card --- */
/* (Giữ nguyên) */
.spotify-card .card-content { padding: 15px; }
.spotify-intro { text-align: center; margin-bottom: 15px; font-size: 0.9em; color: var(--text-muted); }
.spotify-card iframe { display: block; margin: 0 auto; max-width: 100%; border-radius: 12px !important; }

/* --- Gallery Slider Card (Đã cập nhật) --- */
.gallery-card .card-content {
    padding: 0; /* Giữ padding 0 cho content */
    position: relative;
    /* Thêm padding vào wrapper thay vì content để note nằm đúng */
}
.slider-wrapper {
     /* padding-bottom: 30px; */ /* Bỏ padding bottom cũ */
     padding: 0; /* Reset padding wrapper */
}
.slider-container {
    position: relative; overflow: hidden; width: auto; /* Để margin hoạt động */
    aspect-ratio: 16 / 10;
    /* ** Thêm border-radius và margin ** */
    border-radius: 10px; /* Bo góc slider */
    margin: 15px; /* Khoảng cách xung quanh slider */
}
.slider-track { display: flex; height: 100%; transition: transform 0.5s ease-in-out; }
.slide { flex-shrink: 0; width: 100%; height: 100%; }
.slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slider-btn { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.5); color: white; border: none; border-radius: 50%; width: 40px; height: 40px; font-size: 1.2em; cursor: none; transition: background-color 0.3s ease-out, transform 0.25s ease-out; z-index: 5; display: flex; justify-content: center; align-items: center; }
.slider-btn:hover { background-color: rgba(0, 0, 0, 0.8); }
.slider-btn.prev:hover { transform: translateY(-50%) scale(1.1) translateX(-4px); }
.slider-btn.next:hover { transform: translateY(-50%) scale(1.1) translateX(4px); }
.slider-btn.prev { left: 10px; }
.slider-btn.next { right: 10px; }
.slider-dots { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 5; }
.slider-dots .dot { width: 10px; height: 10px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); cursor: none; transition: background-color 0.3s ease-out, transform 0.2s ease-out; }
.slider-dots .dot:hover { transform: scale(1.2); }
.slider-dots .dot.active { background-color: rgba(255, 255, 255, 1); transform: scale(1.1); }
.gallery-note {
    /* position: absolute; bottom: 10px; left: 0; width: 100%; */ /* Bỏ absolute */
    text-align: center; font-style: italic; font-size: 0.85em;
    color: var(--text-muted);
    /* Thêm padding dưới và hai bên, margin top */
    padding: 0 15px 15px 15px;
    margin-top: 5px;
}

/* --- Links Card, CTA, Footer --- */
/* (Giữ nguyên) */
.links-card .card-content { text-align: center; justify-content: space-between; }
.social-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; margin-bottom: 25px; }
.link-icon { display: inline-flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 50%; background-color: var(--progress-bar-bg); color: var(--icon-color); font-size: 1.3em; cursor: none; transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55), background-color 0.3s ease-out, color 0.3s ease-out, box-shadow 0.3s ease-out; }
.link-icon:hover { box-shadow: var(--hover-glow); color: white; transform: translateY(-6px) scale(1.1) rotate(8deg); }
.social-icon-animate { opacity: 0; transform: scale(0.5) translateY(10px); transition: opacity 0.4s ease-out, transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); }
.links-card.visible .social-icon-animate { opacity: 1; transform: scale(1) translateY(0); }
.links-card.visible .social-icon-animate:nth-child(1)  { transition-delay: 0.1s; } /* ... delays ... */
.links-card.visible .social-icon-animate:nth-child(2)  { transition-delay: 0.14s; }
.links-card.visible .social-icon-animate:nth-child(3)  { transition-delay: 0.18s; }
.links-card.visible .social-icon-animate:nth-child(4)  { transition-delay: 0.22s; }
.links-card.visible .social-icon-animate:nth-child(5)  { transition-delay: 0.26s; }
.links-card.visible .social-icon-animate:nth-child(6)  { transition-delay: 0.30s; }
.links-card.visible .social-icon-animate:nth-child(7)  { transition-delay: 0.34s; }
.links-card.visible .social-icon-animate:nth-child(8)  { transition-delay: 0.38s; }
.links-card.visible .social-icon-animate:nth-child(9)  { transition-delay: 0.42s; }
.links-card.visible .social-icon-animate:nth-child(10) { transition-delay: 0.46s; }
.links-card.visible .social-icon-animate:nth-child(11) { transition-delay: 0.50s; }
.link-icon.spotify:hover    { background-color: #1DB954; } /* ... hover colors ... */
.link-icon.apple:hover      { background-color: #A2AAAD; }
.link-icon.soundcloud:hover { background-color: #ff5500; }
.link-icon.youtube:hover    { background-color: #FF0000; }
.link-icon.facebook:hover   { background-color: #1877F2; }
.link-icon.github:hover     { background-color: #333; }
.link-icon.instagram:hover  { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%); }
.link-icon.x-twitter:hover  { background-color: #000000; }
.link-icon.tiktok:hover     { background-color: #000000; }
.link-icon.discord:hover    { background-color: #5865F2; }
.link-icon.email:hover      { background-color: #c71610; }
.cta-section { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--border-color); width: 100%; }
.cta-button { display: inline-flex; align-items: center; justify-content: center; padding: 12px 25px; background-color: var(--cta-button-bg); color: white; border: none; border-radius: 8px; text-decoration: none; font-weight: 500; font-size: 1em; cursor: none; transition: background-color 0.3s ease-out, transform 0.2s ease-out, box-shadow 0.3s ease-out, letter-spacing 0.3s ease-out; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); position: relative; overflow: hidden; }
.cta-button:hover { background-color: var(--cta-button-hover-bg); transform: translateY(-3px) scale(1.02); box-shadow: 0 7px 18px rgba(0, 0, 0, 0.5); letter-spacing: 0.5px; animation: pulseCtaGlow 2s ease-in-out infinite; }
.cta-button:active { transform: translateY(-1px) scale(0.98); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4); transition-duration: 0.1s; animation: none; }
.cta-button i { margin-right: 10px; font-size: 1.1em; position: relative; z-index: 1; }
@keyframes pulseCtaGlow { 0% { box-shadow: 0 7px 18px rgba(0, 0, 0, 0.5), 0 0 0px rgba(var(--primary-color-rgb), 0.4); } 50% { box-shadow: 0 7px 18px rgba(0, 0, 0, 0.5), 0 0 15px rgba(var(--primary-color-rgb), 0.7); } 100% { box-shadow: 0 7px 18px rgba(0, 0, 0, 0.5), 0 0 0px rgba(var(--primary-color-rgb), 0.4); } }
.main-footer { text-align: center; margin-top: 20px; padding-top: 15px; width: 100%; border-top: 1px solid var(--border-color); font-size: 0.9em; color: var(--text-muted); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.animated { opacity: 0; } .animated.fadeIn { animation: fadeIn 0.8s ease-out forwards; } .delay-4 { animation-delay: 0.8s; }
.scroll-animate { opacity: 0; transform: translateY(50px) rotate(-4deg); transition: opacity 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); }
.scroll-animate.visible { opacity: 1; transform: translateY(0) rotate(0deg); }
@media (max-width: 768px) { html { cursor: auto !important; } body { padding: 20px 10px; animation: none; } .multi-card-container { flex-direction: column; align-items: center; gap: 20px; } .card { flex-basis: auto; width: 95%; max-width: 500px; min-width: unset; margin: 0 auto; } .card:hover { transform: scale(1.02); } .cursor-dot, .cursor-outline { display: none; } * { cursor: auto !important; } #artist-name-heading .name-text::after { display: none; } #artist-name-heading .name-text { background: none; color: #fff; -webkit-background-clip: unset; background-clip: unset; -webkit-text-fill-color: unset; animation: none; } .id-photo { animation: none; } .cta-button:hover { animation: none; } }
@media (max-width: 480px) { /* ... */ h2#artist-name-heading { font-size: 1.5em !important; } #artist-name-heading .name-text { display: inline; } .card { border-radius: 10px; } .id-photo { width: 90px; height: 90px;} .id-info .subtitle { font-size: 0.9em; } .id-info p { font-size: 0.85em;} .verified-badge { font-size: 0.7em; margin-left: 4px;} .card-header h3 { font-size: 1em; } .skill-info { font-size: 0.85em; } .link-icon { width: 35px; height: 35px; font-size: 1.1em;} .slider-btn { width: 35px; height: 35px; font-size: 1em;} .slider-dots .dot { width: 8px; height: 8px; } .gallery-note { font-size: 0.8em; bottom: 5px; } .spotify-card iframe { height: 300px; } .cta-button { font-size: 0.9em; padding: 10px 20px; } }