/* ==========================================================================
   1. CẤU HÌNH GỐC & BIẾN (BASE & VARIABLES)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    /* Hệ màu tối (Dark Mode) cao cấp phù hợp với 3D Artist */
    --bg-main: hsl(0, 0%, 95%);          /* Màu nền chính của toàn bộ trang web */
    --bg-card: hsl(0, 0%, 15%);          /* Màu nền của các ô Card, Khung nội dung */
    --bg-card-hover: #1a1a1e;    /* Màu nền Card khi di chuột vào */
    --color-primary: #3b82f6;    /* Màu xanh chủ đạo (Accent Blue) */
    --color-text: hsl(0, 0%, 20%);       /* Màu chữ chính (Trắng sáng) */
    --color-text-muted-1: hsl(0, 0%, 20%); /* Màu chữ phụ/mô tả (Xám giảm tương phản) */
    --color-text-muted-2: hsl(0, 0%, 80%);
    --max-width: 1200px;         /* Chiều rộng tối đa của nội dung trang web */
    --transition: all 0.3s ease; /* Hiệu ứng chuyển cảnh mượt mà chung */
}

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

html {
    scroll-behavior: smooth;     /* Cuộn trang mượt mà khi bấm Link điều hướng */
}

body {
    font-size: 16px;             /* Đặt lại 16px chuẩn để tính toán đơn vị rem dễ hơn */
    font-family: 'Montserrat', 'Roboto', sans-serif;
    background-color: var(--bg-main);
    color: var(--color-text);
    line-height: 1.6;
    overflow-x: hidden;          /* Ngăn chặn trang web bị tràn/vỡ theo chiều ngang */
}

/* Khung bọc giới hạn chiều rộng nội dung để không bị tràn ra mép màn hình lớn */
section, article {
    max-width: var(--max-width);
    margin: 0 auto;
    /* padding: 80px 20px;          Khoảng cách trên/dưới tạo khoảng thở cho thiết kế */
}

/* ==========================================================================
   2. THÀNH PHẦN TIỆN ÍCH (UTILITIES) - Dùng chung nhiều nơi
   ========================================================================== */
.text-blue {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
    background-clip: text; /* Tạo hiệu ứng gradient cho chữ */
    -webkit-background-clip: text; /* Tạo hiệu ứng gradient cho chữ */
    -webkit-text-fill-color: transparent; /* Ẩn màu chữ gốc để chỉ hiển thị gradient */
}

.text-blue {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Định dạng các thẻ Badge (Nhãn phụ nằm trên tiêu đề) */
[class^="badge-"], .hero-badge {
    display: inline-block;
    background: rgba(143, 186, 255, 0.15);
    color: var(--color-primary);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

/* Nút bấm (Buttons) */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.95rem;
    transition: var(--transition);
}

.btn-primary {
    background-color: var(--color-primary);
    color: #fff;
}

.btn-primary:hover {
    background-color: #2563eb;
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: transparent;
    color: var(--color-text);
    border: 1px solid #27272a;
}

.btn-secondary:hover {
    background-color: #27272a;
    border-color: #3f3f46;
}

/* ==========================================================================
   3. THANH ĐIỀU HƯỚNG (HEADER & NAVIGATION)
   ========================================================================== */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 40px 0 20px;
    z-index: 1000;
    border-bottom: 1px solid #1c1c1f;
}

header .logo img {
    width: 3em;
    height: 3em;
    margin: 3em 0 2.5em 0;
}

/* Sắp xếp thứ tự chuẩn trên MÁY TÍNH (Desktop) */
.logo         { order: 1; }
.nav-bar      { order: 2; }
.btn-download { order: 3; }

/* Mặc định ẩn các nút bấm đóng/mở của mobile khi ở trên máy tính */
.menu-toggle, .menu-close {
    display: none;
}

/* Kiểu dáng nút Download CV */
.btn-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: hsl(240, 27%, 21%);
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    border: 1px solid #27272a;
    transition: all 0.3s ease;
}
.btn-download:hover {
    background: #3b82f6;
    border-color: #3b82f6;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);
}

/* Định dạng Menu chữ trên Máy tính */
.nav-list {
    display: flex;
    gap: 50px;
    list-style: none;
    margin-left: 5em;
}
.nav-link {
    color: hsl(0, 0%, 90%);
    text-decoration: none;
    font-weight: 500;
    font-size: 1.2rem;
    transition: color 0.3s ease;
}
.nav-link:hover, .nav-link.active {
    color: #3b82f6;
}
/* ==========================================================================
   4. PHẦN GIỚI THIỆU ĐẦU TRANG (HERO SECTION)
   ========================================================================== */
.hero-section {
    padding-top: 18em;          /* Đẩy khoảng cách xuống để tránh bị Menu Header đè lên */
    text-align: center;          /* Căn giữa toàn bộ nội dung Hero */
    max-width: 90vw;            /* Bóp hẹp lại một chút nhìn bố cục chữ sẽ đẹp hơn */
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.hero-description {
    color: var(--color-text-muted-1);
    font-size: 1.15rem;
    margin-bottom: 35px;
}

.hero-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    list-style: none;
    margin-bottom: 50px;
}

/* ==========================================================================
   5. PHẦN GIỚI THIỆU BẢN THÂN (ABOUT SECTION)
   ========================================================================== */
.about-container {
    max-width: 100%;            /* Trải rộng toàn màn hình để đổ nền đen */
    margin-top: 15em;
    color: #ffffff;             /* Chuyển toàn bộ chữ mặc định thành màu trắng */
    background-color: rgba(0, 0, 0, 0.9); /* Màu đen 90% siêu sang trọng */
    padding: 80px 40px;         /* Giới hạn nội dung gọn vào giữa */
}

.about-section {
    max-width: 1200px; 
    margin: 0 auto;
    display: flex;
    align-items: center;        /* Căn cột ảnh và cột chữ bằng nhau theo chiều dọc */
    gap: 60px;                  /* Khoảng cách giữa ảnh và chữ */
}

/* --- CỘT TRÁI: HÌNH ẢNH --- */
.about-left {
    flex: 1;
    display: flex;
    justify-content: center;
}

.about-image-wrapper {
    position: relative;
}

/* Hiệu ứng vòng tròn đứt nét xung quanh ảnh nghệ thuật */
.about-image-wrapper::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    width: 240px;
    height: 240px;
    border: 2px dashed #3b82f6; /* Viền neon xanh tương phản mạnh trên nền đen */
    border-radius: 50%;
    animation: rotateCircle 20s linear infinite;
    z-index: 1;
}

/* Tối ưu ảnh Avatar gốc của bạn */
.about-image {
    width: 360px;                /* Tăng kích thước lên một chút cho cân xứng bố cục Grid */
    height: 360px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    margin: 0 auto;
    border: 4px solid hsl(0, 0%, 50%);   /* Tạo viền sang trọng bọc quanh avatar */
    background: hsl(0, 0%, 90%); /* Nền đen cho avatar nếu ảnh chưa load kịp */
}


.about-header-group {
    margin-bottom: 20px;
}

.about-title {
    font-size: 2.4rem;
    color: #ffffff;             /* Tiêu đề trắng sáng nổi bật */
    margin: 0;
}

.text-gradient {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.about-description {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text-muted-2);    
    margin: 0;
}

/* Danh sách các tính năng/thế mạnh nổi bật */


/* --- ĐỊNH DẠNG NÚT XEM CHI TIẾT (SEE DETAILS) --- */
.about-actions {
    margin-top: 1em;
}

.btn-read-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;        /* Nút màu trắng nổi bật rực rỡ trên nền đen */
    color: #161618;             /* Chữ màu tối sâu */
    padding: 12px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-read-more:hover {
    background: #3b82f6;        /* Chuyển sang xanh neon khi di chuột vào */
    color: #ffffff;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
    transform: translateY(-2px);
}

.icon-arrow-down {
    transition: transform 0.3s ease;
}

.btn-read-more:hover .icon-arrow-down {
    transform: translateY(3px); /* Mũi tên trượt nhẹ xuống khi hover tạo hiệu ứng dẫn lối */
}

/* Hoạt ảnh xoay viền tròn */
@keyframes rotateCircle {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   6. KỸ NĂNG & CÔNG CỤ (SKILLS & SOFTWARE)
   ========================================================================== */

.skills-section {
    margin-top: 80px;
    width: 90vw;
}

.skills-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Cột trái là kỹ năng cứng, cột phải là phần mềm */
    gap: 60px;
}

.skills-header, .portfolio-header, .awards-header, .contact-header {
    text-align: center;
    margin-bottom: 40px;
}

.skills-title, .portfolio-title, .awards-title, .contact-title {
    font-size: 2.5rem;
    font-weight: 700;
}

.hard-skills-container {
    margin-bottom: 40px;
}

.hard-skills-container h2, .software-container h2 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: hsl(0, 0%, 20%);
    border-left: 4px solid var(--color-primary);
    padding-left: 12px;
}

.hard-skills-list {
    /* display: grid; */
    /* grid-template-columns: repeat(2, 1fr); Chia kỹ năng cứng thành 2 cột song song */
    /* gap: 15px; */
    list-style-position: inside; /* Đẩy dấu chấm đầu dòng thụt vào trong văn bản */
    color: var(--color-text-muted-1);
}

.hard-skills-list li {
    margin: 0;
    font-size: 1.4em;
    line-height: 3;
}

/* Giữ nguyên cấu trúc lưới phần mềm có sẵn của bạn và tối ưu hóa biến */
.software-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Tự động tính toán số cột theo màn hình */
    gap: 20px;
    list-style: none;
    padding: 0;
}

.software-card {
    display: flex;
    align-items: center;
    gap: 15px;
    background: var(--bg-card);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid hsl(0, 0%, 10%);
    transition: var(--transition);
}

.software-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--color-primary);
    transform: translateY(-3px);
}

.software-icon img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
}

.software-info h3 {
    margin: 0 0 5px 0;
    font-size: 1.1rem;
    color: #fff;
}

.software-info p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-muted-2);
}

/* ==========================================================================
   7. DỰ ÁN (PROJECTS)
   ========================================================================== */

.portfolio-section {
    margin: 80px 0 0 0;
    padding: 80px 40px;
    max-width: 100%;
    background: rgba(0, 0, 0, 0.9); /* Nền đen sang trọng cho phần dự án */
}

.portfolio-title { color: hsl(0, 0%, 90%);}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Chuyển flex có sẵn thành Grid 3 cột chuẩn đét */
    gap: 24px;
    list-style: none;
}

.project-card {
    background: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #1c1c1f;
    transition: var(--transition);
}

.project-card:hover {
    transform: translateY(-8px);
    border-color: #27272a;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

/* Khống chế khung hình tỷ lệ điện ảnh (Cinematic 16:9) không méo ảnh nghệ thuật 3D */
.project-thumbnail {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;        /* Ép khung ảnh luôn chuẩn tỷ lệ 16:9 */
    overflow: hidden;
}

.project-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;           /* Ảnh tự động lấp đầy khung mà không bị lùn hay méo */
    display: block;
    transition: var(--transition);
}

.project-card:hover .project-thumbnail img {
    transform: scale(1.05);      /* Phóng to ảnh nhẹ khi hover tạo cảm giác tương tác */
}

.project-content {
    padding: 20px;
}

.project-content h3 {
    margin-bottom: 10px;
    color: #fff;
    font-size: 1.25rem;
}

.project-content p {
    color: var(--color-text-muted-2);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* ==========================================================================
   8. GIẢI THƯỞNG (AWARDS)
   ========================================================================== */
.awards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Grid 2 cột song song */
    gap: 24px;
    list-style: none;
    padding: 0;
}

.award-card {
    background: var(--bg-card);
    border: 1px solid #1c1c1f;
    border-radius: 16px;
    padding: 30px 24px;
    transition: var(--transition);
}

.award-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary);
}

.award-project-type {
    margin: 5px 0 15px 0;
    color: #fff;
    font-size: 1.2rem;
}

.award-sub-list {
    list-style: none;
    padding-left: 0;
}

.award-sub-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
    color: var(--color-text-muted);
}

/* Tạo dấu chấm xanh custom trước mỗi phần thưởng */
.award-sub-list li::before {
    content: "•";
    color: var(--color-primary);
    font-size: 1.2rem;
    position: absolute;
    left: 0;
    top: -2px;
}

/* ==========================================================================
   9. LIÊN HỆ (CONTACT SECTION & FORM) - Hoàn thiện mới 100%
   ========================================================================== */
/* Cấu trúc chia đôi: Trái thông tin liên hệ, Phải là Form nhập liệu */
.contact-section {
    margin: 80px auto;
    width: 90vw;
}

.contact-container {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
}

.contact-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact-info h2 {
    font-size: 1.8rem;
    color: hsl(0, 0%, 10%);
    margin-bottom: 15px;
    line-height: 1.3;
}

.contact-subtitle {
    color: var(--color-text-muted-1);
    margin-bottom: 35px;
}

.contact-methods {
    list-style: none;
}

.method-item {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}

.method-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.method-detail a {
    color: var(--color-text-muted-1);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
}

.method-detail a:hover {
    color: var(--color-primary);
}

.method-detail p {color: var(--color-text-muted-1);}

.social-links {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 5px;
}

.social-links a {
    color: var(--color-text-muted-2);
    text-decoration: none;
    font-size: 0.9rem;
    background: #1c1c1f;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #27272a;
    transition: var(--transition);
}

.social-links a:hover {
    color: #fff;
    background: var(--color-primary);
    border-color: var(--color-primary);
}

/* Định dạng Form nhập liệu */
.contact-form {
    background: var(--bg-card);
    padding: 40px;
    border-radius: 16px;
    border: 1px solid #1c1c1f;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 0.88rem;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--color-text-muted-2);
}

.contact-form input, .contact-form textarea {
    width: 100%;
    background: #0a0a0c;
    border: 1px solid #27272a;
    border-radius: 8px;
    padding: 14px;
    color: #fff;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    transition: var(--transition);
}

.contact-form input:focus, .contact-form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Nút Submit gửi tin nhắn */
.btn-submit {
    width: 100%;
    background: var(--color-primary);
    color: #fff;
    border: none;
    padding: 14px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: var(--transition);
}

.btn-submit:hover {
    background: #2563eb;
    transform: translateY(-2px);
}

/* ==========================================================================
   10. CHÂN TRANG (FOOTER) & BACK TO TOP (Giữ lại cấu trúc nguyên bản)
   ========================================================================== */
.main-footer {
    background: hsl(0, 0%, 10%);
    padding: 60px 0 30px 0;
    border-top: 1px solid #1c1c1f;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
}

.footer-logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
}

.footer-tagline {
    margin: 8px 0 0 0;
    color: var(--color-text-muted-2);
    font-size: 0.9rem;
}

.footer-links {
    display: flex;
    gap: 30px;
    list-style: none;
}

.footer-links a {
    color: var(--color-text-muted-2);
    text-decoration: none;
    font-size: 0.95rem;
    transition: var(--transition);
}

.footer-links a:hover {
    color: #fff;
}

.footer-divider {
    border: 0;
    border-top: 1px solid hsl(0, 0%, 80%);
    max-width: var(--max-width);
    margin: 40px auto 20px auto;
}

.footer-bottom {
    text-align: center;
}

.copyright {
    color: var(--color-text-muted-2);
    font-size: 0.85rem;
}

/* Nút Back to top */
.btn-back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    border: none;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}

.btn-back-to-top:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(236, 72, 153, 0.4);
}

.btn-back-to-top.show {
    opacity: 1;
    visibility: visible;
}

.arrow-icon {
    width: 22px;
    height: 22px;
    transition: var(--transition);
}

.btn-back-to-top:hover .arrow-icon {
    transform: translateY(-2px);
}

/* ==========================================================================
   11. XỬ LÝ ĐA MÀN HÌNH (RESPONSIVE MEDIA QUERIES) - ĐÚNG CHUẨN CHƯƠNG 17
   ========================================================================== */

/* --- TABLET VIEW (Màn hình nhỏ hơn 992px) --- */


@media (max-width: 992px) {
    body { font-size: 15px; }

    header { padding: 0 30px 0 10px }
    
    .hero-title { font-size: 2.8rem; }
    
    .about-image { width: 320px; height: 320px; }
    
    .projects-grid { grid-template-columns: repeat(2, 1fr); } /* Chuyển thành 2 cột */
    
    .contact-container {
        grid-template-columns: 1fr; /* Thông tin lên trên, Form xuống dưới */
        gap: 40px;
    }
}

/* --- MOBILE VIEW (Màn hình nhỏ hơn 768px) --- */
@media (max-width: 768px) {

    .about-container {
        padding: 60px 20px;
    }
    
    .about-section {
        flex-direction: column; /* Xếp dọc: Ảnh ở trên, Chữ ở dưới trên điện thoại */
        gap: 40px;
        text-align: center;
    }

    .about-image-wrapper::before {
        width: 180px;
        height: 180px;
    }

    .about-image {
        width: 320px;
        height: 320px;
    }
    
    .btn-read-more {
        width: 100%;            /* Nút bấm full màn hình trên điện thoại giúp dễ tương tác */
        justify-content: center;
    }

/* 1. ẨN NÚT DOWNLOAD TRÊN DESKTOP */
    .desktop-only {
        display: none;
    }
    
    .menu-toggle svg line, .menu-toggle svg {
        stroke: #ffffff !important; /* Đổi màu viền nét vẽ thành trắng */
    }

    .menu-close svg line, .menu-close svg {
        stroke: #ffffff !important; /* Đổi màu viền nét vẽ thành trắng */
    }


    /* ĐỔI THỨ TỰ HIỂN THỊ TRÊN DI ĐỘNG BẰNG CSS ORDER */
    .logo         { order: 1; }
    .btn-download { order: 2; } /* Đưa nút Download ra giữa */
    .menu-toggle  { order: 3; } /* Đưa nút mở menu sang bên phải */

    /* Thu nhỏ chữ Download CV một chút trên điện thoại cho gọn */
    .btn-download {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    /* 2. HIỆN NÚT ICON LIST (HAMBURGER) */
    .menu-toggle {
        display: block;
        background: none;
        border: none;
        color: var(--color-text);
        cursor: pointer;
        padding: 5px;
    }

    /* 3. BIẾN NAV-BAR THÀNH BẢN XỔ TOÀN MÀN HÌNH */
    .nav-bar {
        position: fixed;
        top: 0;
        right: -100%; /* Giấu menu sang bên phải màn hình */
        width: 100%;
        height: 100vh;
        background: hsla(240, 10%, 10%, 0.95); /* Nền tối sang trọng giống Cỏ Dại */
        z-index: 2000;       /* Nổi lên trên cùng đè cả nút back-to-top */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1); /* Hiệu ứng trượt mượt */
    }

    /* Khi có JavaScript thêm class .active vào thì trượt ra */
    .nav-bar.active {
        right: 0 !important; 
    }

    /* 4. HIỆN NÚT DẤU X ĐỂ ĐÓNG MENU MOBILE */
    .menu-close {
        display: block;
        position: absolute;
        top: 25px;
        right: 25px;
        background: none;
        border: none;
        color: var(--color-text-muted);
        cursor: pointer;
    }

    /* 5. DÀN CÁC MỤC MENU THEO HÀNG DỌC CHỮ TO */
    .nav-list {
        flex-direction: column;
        align-items: center;
        gap: 35px;
        margin-left:0;
    }

    .nav-link {
        font-size: 1.6rem; /* Chữ to để ngón tay dễ bấm chạm */
        font-weight: 700;
        color: #fff;
    }

    /* 6. HIỆN CHỮ DOWNLOAD CV RIÊNG TRÊN MOBILE */
    .mobile-only {
        display: block;
        margin-top: 20px;
    }

    .mobile-only .nav-link {
        color: var(--color-primary);
        font-size: 1.2rem;
    }
    
    /* Khóa cuộn trang khi đang xem menu */
    body.menu-open {
        overflow: hidden; 
    }

    header {
        position: fixed;         /* Cố định header dính trên đỉnh màn hình */
        top: 0;
        left: 0;
        width: 100%;
        height: 65px;            /* Khóa cứng chiều cao chuẩn */
        display: flex;
        flex-direction: row;     /* Logo một bên, Nút menu một bên song song */
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
    }
    
    .hero-section { 
        padding-top: 40px; 
        margin-top: 14em; 
    }
    
    .hero-title { font-size: 2.2rem; }
    
    .hero-stats {
        flex-direction: column;  /* Số liệu thống kê xếp dọc */
        gap: 25px;
    }
    
    .skills-container {
        display: block;
    }

    .hard-skills-list { grid-template-columns: 1fr; } /* Kỹ năng xếp thành 1 hàng dọc */
    
    .projects-grid, .awards-grid { 
        grid-template-columns: 1fr; /* Toàn bộ card dự án và giải thưởng xếp thành 1 cột dọc */
    }
    
    .contact-form { padding: 25px; }
    
    .footer-container {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        text-align: center;
    }
    
    .footer-links { flex-wrap: wrap; justify-content: center; gap: 15px; }
    
    .btn-back-to-top { bottom: 20px; right: 20px; width: 45px; height: 45px; }

    
}