* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* Cho phép cuộn nếu nội dung dài hơn màn hình */
    overflow-y: auto; 
    background-color: #f0f0f0; /* Màu nền dự phòng */
}

/* Nền mờ ảo phía sau - Trải rộng toàn màn hình */
.background-blur {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradient đa sắc giống ảnh mẫu */
    background: linear-gradient(135deg, #d4e9f9 0%, #f9e2f1 50%, #e3f2e1 100%);
    filter: blur(60px);
    z-index: -1;
    transform: scale(1.1); /* Tránh lộ mép trắng khi blur */
}

.container {
    width: 100%;
    /* Tăng chiều rộng tối đa để box to hơn */
    max-width: 550px; 
    padding: 40px 20px;
}

.profile-card {
    background-color: #0f0f0f; /* Màu đen sâu hơn */
    border-radius: 45px; /* Bo góc cực đại giống mẫu */
    padding: 50px 30px;  /* Tăng khoảng cách đệm bên trong */
    text-align: center;
    color: white;
    position: relative;
    box-shadow: 0 25px 50px rgba(0,0,0,0.3);
}

.menu-icon {
    position: absolute;
    top: 25px;
    left: 30px;
    font-size: 1.4rem;
    cursor: pointer;
    background: rgba(255,255,255,0.1);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* Khu vực ảnh đại diện */
.avatar-container {
    margin-bottom: 15px;
}

.avatar {
    width: 100%;
    max-width: 400px; /* Ảnh to và rõ nét */
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 30px; /* Bo góc ảnh nhẹ hơn box ngoài */
}

.username {
    margin-top: 15px;
    font-size: 2rem; /* Chữ to hơn */
    font-weight: 900;
    color: #f8c8dc; /* Hồng pastel */
    letter-spacing: -0.5px;
}

.contact {
    margin-top: 15px;
    font-size: 1.3rem; /* Chữ to hơn */
    font-weight: 900;
    color: #f8c8dc; /* Hồng pastel */
    letter-spacing: -0.5px;
}

.contact-detail {
    margin-top: 1px;
    font-size: 0.8rem; /* Chữ to hơn */
    font-weight: 900;
    color: #ffffff; /* Hồng pastel */
    letter-spacing: 0.5px;
}

.social-icons {
    margin: 20px 0 35px 0;
    font-size: 1.4rem;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.social-icons i {
    cursor: pointer;
    transition: 0.3s;
    opacity: 0.9;
}

.social-icons i:hover {
    color: #f8c8dc;
    transform: scale(1.2);
}

/* Các nút bấm dài và to */
.links-container {
    display: flex;
    flex-direction: column;
    gap: 18px; /* Khoảng cách giữa các nút */
}

.link-btn {
    display: flex;
    align-items: center;
    background-color: #262626; /* Màu xám đen của nút */
    color: white;
    text-decoration: none;
    padding: 20px 25px;
    border-radius: 20px;
    font-size: 1.05rem;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.05);
    width: 100%;
}

/* Icon trong nút bấm nằm bên trái */
.link-btn i {
    font-size: 1.6rem;
    margin-right: 15px;
    width: 35px;
    text-align: center;
}

/* Căn giữa chữ trong nút nhưng giữ icon bên trái */
.link-btn span {
    flex-grow: 1;
    text-align: center;
    margin-right: 35px; /* Cân bằng lại khoảng trống của icon */
}

.link-btn:hover {
    background-color: #333;
    transform: scale(1.02);
    border-color: #f8c8dc;
}