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

/* Custom Styles */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0; /* Màu nền tổng thể */
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* 100% chiều cao của viewport */
    background-image: url('your-background-image.jpg'); /* Đường dẫn đến hình ảnh nền */
    background-size: cover; /* Đảm bảo hình ảnh nền bao phủ toàn bộ */
    background-position: center; /* Canh giữa hình ảnh nền */
    position: relative; /* Cho phép vị trí tương đối cho các phần tử con */
}

.character {
    position: absolute;
    bottom: 20%; /* Vị trí từ bottom của character */
    left: 50%; /* Canh chỉnh từ trái */
    transform: translateX(-50%);
    max-width: 80%; /* Chiều rộng tối đa của character */
    height: auto; /* Đảm bảo tỷ lệ hình ảnh tự điều chỉnh */
}

.text {
    text-align: center;
    color: #333; /* Màu chữ */
    position: absolute;
    bottom: 10%; /* Vị trí từ bottom của văn bản */
    left: 50%; /* Canh chỉnh từ trái */
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.9); /* Màu nền văn bản */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Đổ bóng */
    max-width: 80%; /* Chiều rộng tối đa của văn bản */
}

.text h1 {
    font-size: 3rem; /* Kích thước tiêu đề lớn */
    margin-bottom: 20px; /* Khoảng cách dưới của tiêu đề */
}

.text p {
    font-size: 1.2rem; /* Kích thước văn bản thông thường */
}

.text a {
    color: #10b981; /* Màu của liên kết */
    text-decoration: none; /* Không gạch chân liên kết */
    transition: color 0.3s ease; /* Hiệu ứng màu khi hover */
}

.text a:hover {
    color: #087f5b; /* Màu của liên kết khi hover */
}