/* Cài đặt phông chữ và nền tổng thể */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background-color: #1a1a1a;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* Mỗi trang một ảnh nền phong cách Nhật Bản/thiền riêng (ảnh miễn phí bản quyền
   từ Unsplash). Ảnh phủ toàn bộ nền trang (cố định khi cuộn) chứ không chỉ dải
   banner trên cùng, để khối nội dung kính mờ bên dưới có thể "lộ" ảnh qua. */
body[data-page="home"] {
    background-image: linear-gradient(rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.28)),
        url('https://images.unsplash.com/photo-1753544997965-e818436616e3?auto=format&fit=crop&w=1600&q=80');
}

body[data-page="info"] {
    background-image: linear-gradient(rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.28)),
        url('https://images.unsplash.com/photo-1610623757759-e94661873465?auto=format&fit=crop&w=1600&q=80');
}

body[data-page="contact"] {
    background-image: linear-gradient(rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.28)),
        url('https://images.unsplash.com/photo-1741851374430-d242e0dcd70c?auto=format&fit=crop&w=1600&q=80');
}

body[data-page="gallery"] {
    background-image: linear-gradient(rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.28)),
        url('https://images.unsplash.com/photo-1698618988744-737573cb6a7a?auto=format&fit=crop&w=1600&q=80');
}

body[data-page="cv"] {
    background-image: linear-gradient(rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.28)),
        url('https://images.unsplash.com/photo-1778675470619-a1cdee6aeabd?auto=format&fit=crop&w=1600&q=80');
}

/* ================= KHOẢNG TRỐNG CHO THANH NAV ================= */
/* Không còn ảnh riêng ở đây nữa — để lộ luôn ảnh nền của body phía sau nav */
.hero-banner-container {
    width: 100%;
    height: 200px;
    position: relative;
}

/* ================= KHỐI NỘI DUNG (HIỆU ỨNG KÍNH MỜ) ================= */
/* SỬA LẠI: bỏ hẳn nền/mờ ở .main-content (nó rộng 100% màn hình) — vì để nền
   trắng phủ full-width thì 2 bên rìa (nơi không có chữ) cũng bị mờ theo, uổng
   phí ảnh nền đẹp. Nay khối kính mờ chỉ áp cho .cv-container (cột nội dung
   ~650px ở giữa) — 2 bên trái/phải ngoài cột đó hoàn toàn trong suốt, thấy
   trọn ảnh nền. */
.main-content {
    width: 100%;
    margin-top: -35px;
    position: relative;
    z-index: 10;
}

.cv-container {
    max-width: 650px;
    width: 100%;
    margin: 0 auto;
    padding: 30px 24px 40px 24px;
    box-sizing: border-box;

    /* Tăng thêm độ trắng + độ mờ (blur cao hơn hẳn) để hoa văn mái đền/chi tiết
       rối phía sau không "chọc" qua chữ nữa — chữ đọc êm mắt hơn nhiều. */
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 28px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.25);

    /* Viền sáng quanh chữ đậm hơn bản trước để chữ nổi hẳn lên, không bị lẫn
       vào các mảng màu loang phía sau. */
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9), 0 0 6px rgba(255, 255, 255, 0.7);
}

/* ================= HEADER VÀ AVATAR ================= */
header {
    text-align: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

/* Khung avatar phong cách "chú thuật hồi chiến" (Jujutsu Kaisen) — quầng năng
   lượng chú thuật xanh/tím phát sáng quanh avatar, gợi kỹ thuật "Vô Hạn" của
   nhân vật tóc trắng. Vòng trắng giữ nguyên để avatar vẫn nổi trên nền ảnh. */
.avatar {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    margin: -75px auto 15px auto; /* Avatar tiếp tục trồi lên trên chia đôi 2 mảng */
    border: 4px solid #ffffff;
    background-color: white;
    position: relative;
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.85),
        0 0 22px 6px rgba(56, 189, 248, 0.55),
        0 0 48px 16px rgba(139, 92, 246, 0.35),
        0 8px 20px rgba(0, 0, 0, 0.25);
    animation: nangLuongChuThuat 2.8s ease-in-out infinite alternate;
    transition: transform 0.3s ease;
}

.avatar:hover {
    transform: scale(1.05);
}

@keyframes nangLuongChuThuat {
    from {
        box-shadow:
            0 0 0 3px rgba(255, 255, 255, 0.85),
            0 0 22px 6px rgba(56, 189, 248, 0.55),
            0 0 48px 16px rgba(139, 92, 246, 0.35),
            0 8px 20px rgba(0, 0, 0, 0.25);
    }
    to {
        box-shadow:
            0 0 0 3px rgba(255, 255, 255, 0.85),
            0 0 30px 10px rgba(56, 189, 248, 0.8),
            0 0 65px 22px rgba(139, 92, 246, 0.5),
            0 8px 20px rgba(0, 0, 0, 0.25);
    }
}

h1 {
    color: #2c3e50;
    margin: 0 0 5px 0;
    font-size: 28px;
}

.title {
    /* Đổi từ xám nhạt #7f8c8d sang xám đậm hơn để đủ tương phản trên nền kính mờ */
    color: #4a5a68;
    font-size: 16px;
    margin: 0;
    font-weight: 600;
}

h2 {
    color: #2c3e50;
    border-left: 4px solid #3498db;
    padding-left: 12px;
    font-size: 20px;
    margin-top: 30px;
}

/* ================= DANH SÁCH & SỞ THÍCH ================= */
ul {
    list-style-type: none;
    padding: 0;
}

li {
    background: #f8f9fa;
    margin-bottom: 12px;
    padding: 15px;
    border-radius: 8px;
    border-left: 3px solid #bdc3c7;
    transition: transform 0.2s;
}

li:hover {
    transform: translateX(5px);
    border-left-color: #3498db;
}

li strong {
    color: #34495e;
}

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

.hobby-tag {
    background-color: #e1f0fa;
    color: #2980b9;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
}

footer {
    text-align: center;
    margin-top: 40px;
    font-size: 14px;
    /* Đổi từ xám rất nhạt #95a5a6 sang đậm hơn để không bị mất chữ trên nền kính mờ */
    color: #64727d;
}

/* ================= TRANG CHỦ ================= */
.home-welcome {
    text-align: center;
    color: #34495e;
    font-size: 16px;
}

/* ================= KHO ẢNH ================= */
.gallery-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 15px 0;
}

.gallery-controls .social-btn {
    border: none;
    cursor: pointer;
    font-size: 14px;
}

.gallery-status {
    color: #4a5a68;
    font-size: 14px;
    margin-bottom: 15px;
}

.gallery {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 15px; 
    margin-top: 20px;
}

.gallery img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s;
    cursor: pointer; /* báo cho người xem biết bấm vào được */
}

.gallery img:hover {
    transform: scale(1.05);
}

/* ================= XEM ẢNH PHÓNG TO (LIGHTBOX) ================= */
.lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 40px;
    box-sizing: border-box;
    cursor: zoom-out;
}

.lightbox-overlay.hien {
    display: flex;
}

.lightbox-overlay img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 10px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.6);
    cursor: default;
}

.lightbox-close {
    position: absolute;
    top: 18px;
    right: 28px;
    color: #ffffff;
    font-size: 42px;
    line-height: 1;
    cursor: pointer;
    font-weight: 300;
}

.contact-list li {
    background: #fdfdfd;
}

/* ================= BỘ NÚT MẠNG XÃ HỘI ================= */
.social-links-container {
    display: flex;
    flex-wrap: wrap; 
    gap: 10px; 
    margin-top: 10px; 
    width: 100%;
}

.social-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border-radius: 20px;
    text-decoration: none !important; 
    color: white !important; 
    font-size: 14px;
    font-weight: bold;
    transition: transform 0.2s;
}

.social-btn:hover {
    transform: translateY(-3px);
}

.btn-fb { background-color: #1877F2 !important; }
.btn-zalo { background-color: #0068FF !important; }
.btn-tiktok { background-color: #000000 !important; }
/* Nút tải CV — tím, hợp với quầng sáng chú thuật quanh avatar */
.btn-cv { background-color: #7c3aed !important; }

/* ================= NÚT TẢI CV: CHỌN NGÔN NGỮ ================= */
.cv-download-wrap {
    position: relative;
    display: inline-block;
    margin-top: 14px;
}

.cv-download-wrap .btn-cv {
    border: none;
    font-family: inherit;
    cursor: pointer;
}

.cv-download-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    padding: 8px;
    min-width: 160px;
    z-index: 30;
}

.cv-download-menu.hien {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cv-download-menu a {
    display: block;
    padding: 9px 14px;
    border-radius: 8px;
    text-decoration: none !important;
    color: #2c3e50 !important;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    transition: background 0.2s;
}

.cv-download-menu a:hover {
    background: #f1e9fd;
    color: #6d28d9 !important;
}
/* Thanh menu nổi trên ảnh -- cố định (fixed) để luôn hiện khi cuộn trang */
.top-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    box-sizing: border-box;
    z-index: 200;
}

.nav-link {
    background: rgba(255, 255, 255, 0.6);
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: bold;
    color: #2c3e50;
    cursor: pointer;
    backdrop-filter: blur(5px);
    transition: 0.3s;
}

.nav-link:hover, .nav-link.active {
    background: #ffffff;
    color: #e74c3c;
}

.lang-selector {
    background: rgba(255, 255, 255, 0.6);
    padding: 8px 16px;
    border-radius: 20px;
    backdrop-filter: blur(5px);
    font-weight: bold;
}

.lang-option {
    cursor: pointer;
    color: #7f8c8d;
    transition: color 0.2s;
}

.lang-option:hover {
    color: #2c3e50;
}

.lang-option.active-lang {
    color: #e74c3c;
}

/* ================= TRÌNH PHÁT NHẠC LƠ LỬNG ================= */
.music-player {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 500;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 10px;
}

/* ---- Khối chính: tên bài, thanh tua thời gian, các nút điều khiển ---- */
.music-panel {
    width: 260px;
    max-width: calc(100vw - 24px);
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 20px;
    padding: 12px 14px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.28);
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-sizing: border-box;
}

.music-panel-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.music-btn {
    border: none;
    background: rgba(255, 255, 255, 0.8);
    color: #2c3e50;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 12px;
    transition: 0.2s;
}

.music-btn:hover {
    background: #ffffff;
    color: #e74c3c;
}

.music-play {
    background: #3498db;
    color: #fff;
    width: 38px;
    height: 38px;
    font-size: 14px;
}

.music-play:hover {
    background: #2980b9;
    color: #fff;
}

.music-player.is-playing .music-toggle i {
    animation: quayDiaNhac 3s linear infinite;
}

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

.music-track-name {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: #2c3e50;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Thanh tua thời gian (seek bar) ---- */
.music-seek-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.music-time {
    font-size: 11px;
    color: #4a5a68;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    width: 30px;
    text-align: center;
}

/* ---- Thanh trượt dùng chung (tua thời gian + âm lượng) ---- */
.music-range {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(to right, #3498db var(--val, 0%), rgba(44, 62, 80, 0.18) var(--val, 0%));
    outline: none;
    cursor: pointer;
    margin: 0;
}

.music-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #3498db;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9);
    cursor: pointer;
}

.music-range::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: none;
    border-radius: 50%;
    background: #3498db;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9);
    cursor: pointer;
}

.music-range::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: rgba(44, 62, 80, 0.18);
}

.music-range::-moz-range-progress {
    height: 4px;
    border-radius: 2px;
    background: #3498db;
}

.music-seek {
    flex: 1;
    min-width: 0;
}

/* ---- Hàng nút điều khiển + âm lượng (luôn hiện, không cần bấm mở) ---- */
.music-controls-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.music-volume-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.music-volume-slider {
    width: 60px;
}

.music-playlist {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 16px;
    padding: 8px;
    max-height: 260px;
    overflow-y: auto;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.28);
    width: 250px;
}

.music-playlist.hien {
    display: flex;
}

.music-playlist-item {
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 13px;
    color: #34495e;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.2s;
}

.music-playlist-item i {
    flex-shrink: 0;
    font-size: 11px;
    color: #7f8c8d;
}

.music-playlist-item:hover {
    background: #e1f0fa;
}

.music-playlist-item.active {
    background: #3498db;
    color: #fff;
}

.music-playlist-item.active i {
    color: #fff;
}

/* ================= RESPONSIVE (ĐIỆN THOẠI) ================= */
@media (max-width: 600px) {
    .hero-banner-container {
        height: 180px;
    }

    .top-nav {
        padding: 12px 15px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .nav-center {
        display: flex;
        gap: 4px;
    }

    .nav-link {
        padding: 6px 10px;
        font-size: 13px;
    }

    .lang-selector {
        padding: 6px 10px;
        font-size: 13px;
    }

    .cv-container {
        padding: 0 15px 30px 15px;
    }

    .gallery {
        grid-template-columns: 1fr;
    }

    .music-player {
        right: 12px;
        bottom: 12px;
    }

    .music-panel {
        width: 220px;
    }

    .music-volume-slider {
        width: 44px;
    }

    .music-playlist {
        width: 200px;
    }
}

/* ================= HIỆU ỨNG CÁNH HOA RƠI LẢ TẢ ================= */
#canhHoaBoc {
    position: fixed;
    inset: 0;
    z-index: 5;
    overflow: hidden;
    pointer-events: none;
}

.canh-hoa-ngoai {
    position: absolute;
    top: -8vh;
    animation-name: canhHoaRoi;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.canh-hoa-trong {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #ffe4ef 0%, #ffb8d2 55%, #ff8fb8 100%);
    /* Bo góc bất đối xứng để trông giống cánh hoa thật thay vì hình tròn/oval đều */
    border-radius: 0% 70% 60% 70% / 0% 70% 30% 70%;
    box-shadow: 0 0 4px rgba(255, 143, 184, 0.45);
    animation-name: canhHoaLacLu;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes canhHoaRoi {
    from {
        top: -8vh;
    }
    to {
        top: 108vh;
    }
}

@keyframes canhHoaLacLu {
    0%, 100% {
        transform: translateX(0) rotate(0deg);
    }
    50% {
        transform: translateX(34px) rotate(180deg);
    }
}