/* Thiết lập cơ bản */
body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding-top: 20px;
    padding-bottom: 20px;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

/* Phần Header */
header {
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
}

.profile-image {
    width: 120px; /* Kích thước ảnh đại diện */
    height: 120px; /* Kích thước ảnh đại diện */
    border-radius: 50%; /* Bo tròn hoàn toàn */
    margin: 0 auto 15px auto;
    overflow: hidden; /* Đảm bảo ảnh con cũng bị cắt theo hình tròn */
    background-color: #ddd; /* Màu nền nhẹ nếu ảnh không tải được */
    display: flex; /* Căn giữa ảnh nếu nó nhỏ hơn container */
    justify-content: center;
    align-items: center;
}

.profile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Đảm bảo ảnh lấp đầy và không bị méo, phần thừa sẽ bị cắt */
}

header h1 {
    margin: 0;
    font-size: 2.5em;
    color: #2c3e50;
}

header .tagline {
    font-size: 1.1em;
    color: #555;
    margin-top: 5px;
}

/* Các Section chung */
section {
    padding: 20px 0;
    margin-bottom: 15px;
}

section h2 {
    font-size: 1.8em;
    color: #34495e;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 2px solid #007bff;
    display: inline-block;
}

/* Phần Dịch vụ */
.services ul {
    list-style: none;
    padding: 0;
}

.services li {
    background-color: #e9ecef;
    padding: 10px 15px;
    margin-bottom: 8px;
    border-radius: 5px;
    border-left: 4px solid #007bff;
}

/* Phần Liên hệ */
.contact p {
    margin-bottom: 15px;
}

.contact-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Khoảng cách giữa các nút */
    justify-content: center;
}

.button {
    display: inline-flex; /* Sử dụng flex để căn chỉnh icon và text */
    align-items: center; /* Căn giữa icon và text theo chiều dọc */
    gap: 8px; /* Khoảng cách giữa icon và text */
    padding: 10px 18px; /* Điều chỉnh padding cho phù hợp với icon */
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1em;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border: none;
    cursor: pointer;
    text-align: center;
}

.button:hover {
    background-color: #0056b3;
    transform: translateY(-2px); /* Hiệu ứng nhấc nhẹ khi hover */
}

.button i {
    font-size: 1.1em; /* Kích thước icon hơi lớn hơn chữ một chút */
}

/* Màu sắc đặc trưng cho từng nút (tùy chọn) */
.button.email { background-color: #c71610; } /* Gmail red */
.button.email:hover { background-color: #a70f09; }
.button.phone { background-color: #28a745; } /* Green */
.button.phone:hover { background-color: #1e7e34; }
.button.website { background-color: #17a2b8; } /* Info blue */
.button.website:hover { background-color: #117a8b; }
.button.linkedin { background-color: #0077b5; }
.button.linkedin:hover { background-color: #005582; }
.button.facebook { background-color: #1877f2; } /* Facebook blue */
.button.facebook:hover { background-color: #125dbf; }
.button.tiktok { background-color: #000000; } /* TikTok black */
.button.tiktok:hover { background-color: #333333; }
.button.youtube { background-color: #ff0000; } /* YouTube red */
.button.youtube:hover { background-color: #cc0000; }


/* Phần Footer */
footer {
    text-align: center;
    padding: 20px 0;
    margin-top: 30px;
    border-top: 1px solid #eee;
    font-size: 0.9em;
    color: #777;
}

/* Responsive cho thiết bị di động */
@media (max-width: 768px) { /* Tăng breakpoint để các nút dễ nhìn hơn */
    .contact-links {
        /* Có thể không cần column nếu các nút không quá dài */
        /* flex-direction: column; */
    }
    .button {
        padding: 10px 15px; /* Giảm padding chút cho mobile */
        font-size: 0.95em;
    }
}

@media (max-width: 600px) {
    .container {
        margin: 0 10px;
        padding: 15px;
    }

    header h1 {
        font-size: 2em;
    }

    header .tagline {
        font-size: 1em;
    }

    section h2 {
        font-size: 1.5em;
    }

    .profile-image {
        width: 100px;
        height: 100px;
    }

    .contact-links {
         /* Bật lại flex-direction column nếu màn hình nhỏ, mỗi nút 1 hàng */
        flex-direction: column;
    }

    .button {
        width: 100%;
        box-sizing: border-box;
        justify-content: center; /* Căn giữa nội dung nút khi nó full-width */
    }
}