:root {
    --primary-sky: #6dd5ed;   /* Màu xanh da trời sáng */
    --secondary-sky: #2193b0; /* Màu xanh đậm hơn để tạo gradient */
    --cloud-white: #ffffff;   /* Màu trắng mây */
    --text-main: #333333;
    --text-light: #7f8c8d;
    --accent-blue: #00bcd4;   /* Màu xanh ngọc nhấn mạnh */
}

body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    color: var(--text-main);
    background-color: #fdfdfd;
}

/* 1. Thanh Menu */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 10%;
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid #eee;
    backdrop-filter: blur(5px); /* Hiệu ứng kính mờ cho menu */
    position: fixed; /* Giữ menu ở trên cùng khi cuộn */
    top: 0;
    width: 80%; /* Để bù trừ cho padding 10% */
    z-index: 1000;
}

.logo {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    font-style: italic;
    color: var(--secondary-sky);
    font-weight: 700;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 40px;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-main);
    font-size: 0.95rem;
    font-weight: 400;
}

.btn-cv {
    background: linear-gradient(135deg, var(--primary-sky), var(--secondary-sky)); /* Gradient cho nút */
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: transform 0.2s; /* Hiệu ứng khi di chuột qua */
}

.btn-cv:hover {
    transform: translateY(-2px); /* Nút nổi lên một chút khi di chuột qua */
}

/* 2. Phần giới thiệu chính */
.hero {
    /* Gradient bầu trời mượt mà */
    background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%); 
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
    padding: 0 10%;
    position: relative;
    overflow: hidden;
    margin-top: 70px; /* Bù trừ cho fixed navbar */
}

.hello {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.8rem;
    display: block;
    margin-bottom: 10px;
}

.hero-content h1 {
    font-size: 3.5rem;
    line-height: 1;
    margin: 0;
    letter-spacing: -2px;
}

.hero-image {
    position: absolute;
    right: 10%;
    bottom: -30px; /* Nhô ra một chút */
}

.circle-frame {
    width: 320px;
    height: 380px;
    border-radius: 160px 160px 0 0; /* Bo tròn phía trên */
    overflow: hidden;
    background-color: var(--cloud-white); /* Khung trắng giống ảnh mẫu */
    border: 10px solid rgba(255, 255, 255, 0.3); /* Khung mờ bao quanh */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.circle-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 3. Phần thông tin chi tiết */
.intro {
    background-color: #fcfcfc;
    padding: 100px 10%;
}

.intro-card {
    background: white;
    padding: 60px;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08); /* Đổ bóng nhẹ cho thẻ */
    text-align: center;
    position: relative;
    z-index: 5;
    margin-top: -120px; /* Thẻ đè lên phần Hero */
    border: 1px solid #f1f1f1;
}

.quote {
    font-size: 7rem;
    color: #e0f2f1; /* Màu xanh mờ cho dấu ngoặc kép */
    display: block;
    height: 40px;
    line-height: 1;
    margin-bottom: -10px;
}

.intro-card h2 {
    font-size: 2rem;
    color: var(--text-main);
    margin-bottom: 25px;
}

.personal-info {
    margin-bottom: 30px;
}

.personal-info .name {
    font-size: 1.5rem;
    color: var(--secondary-sky); /* Màu xanh đậm cho tên */
    font-weight: 700;
    margin: 0 0 5px 0;
}

.personal-info .student-id {
    font-size: 1.1rem;
    color: var(--accent-blue); /* Màu xanh ngọc cho mã sinh viên */
    font-weight: 600;
    margin: 0;
}

.description {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-light);
    max-width: 700px;
    margin: 0 auto;
}