.container {
    display: flex; /* Kích hoạt Flexbox */
    flex-direction: row-reverse; /* Căn chỉnh các phần tử theo chiều ngang */
    justify-content: center; /* Khoảng cách giữa các phần tử */
    align-items: flex-start; /* Căn giữa theo chiều dọc */
    width: 100%;
    max-width: 100%; /* Giới hạn chiều rộng tối đa */
    margin: 20px auto; /* Căn giữa container */
    gap: 20px; /* Khoảng cách giữa các phần tử */
    box-sizing: border-box;
    background-color: white;
}
/* Header Logo */
.header-logo {
    text-align: center;
    padding: 20px;
    display: flex;
    justify-content: center; /* Căn giữa logo theo chiều ngang */
    align-items: center;    /* Căn giữa theo chiều dọc */
    height: 150px;          /* Tạo khoảng trống để logo ở trung tâm */
}

.logo {
    max-height: 120%; /* Giảm kích thước logo */
    max-width: 120%;  /* Đảm bảo logo không bị vỡ tỷ lệ */
    margin: auto;     /* Căn giữa logo */
}

.artist-info-1 h2 {
    font-family: "Source Sans Pro", sans-serif; 
    font-size: 35px;
    font-weight: 200;
    margin-bottom: 20px;
    text-align: left;
    color: black;
}

.artist-details {
    border-collapse: collapse; /* Loại bỏ khoảng cách giữa các ô */
    width: 550px;
    height: 120px;/* Đảm bảo bảng chiếm toàn bộ chiều rộng container */
    margin: 20px 30px; /* Thêm khoảng cách bên trên và dưới */
    font-family: 'Courier New', Courier, monospace; /* Font chữ nhất quán */
    margin-top: 40px;
    font-size: 20px;
    
}


.artist-details td {
    text-align: left; /* Canh trái nội dung trong bảng */
    padding-left: 15px;
    padding-right: 40px;
    padding-top: 20px;
    padding-bottom: 20px;/* Khoảng cách nội dung và viền ô */  
    width: 50px;
  
}

.artist-details tr {
    background-color: rgb(240, 240, 240); /* Màu nền tiêu đề bảng */
    color: black; /* Màu chữ tiêu đề */
    /* Chữ in hoa tiêu đề */
}


.artist-bio {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
    text-align: justify;
    margin-top: 20px;
}

.artist-info-1 h1 {
    font-family: 'Montserrat', sans-serif; /* Use Montserrat as specified in your HTML */
    font-size: 55px; /* Adjust the size as needed */
    font-weight: 700;
    letter-spacing: 2px; /* Adjust spacing for better readability */
    line-height: 1.2;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    margin-bottom: 0px;
}

h1 {/* Giảm khoảng cách dưới h1 */
    margin-top: 0px;
    }

h2 {
    margin-top: 20px;
    /* Loại bỏ khoảng cách trên h2 */
}

.image-gallery {
    text-align: center;
    margin-top: 20px;
}

.main-image {
    width: 75%;
    height: auto;
    max-width: 600px; /* Khung chính vừa khít Box2 */
    aspect-ratio: 3 / 4; /* Tỷ lệ 600x800 (3:4) */
    overflow: hidden; /* Đảm bảo hình ảnh không tràn khung */
    position: relative;
    /*background-color: #f0f0f0; /* Màu nền khung */
}

.main-image img {
    width: 100%;
    max-width: 600px;
    height: auto;
    object-fit: cover; /* Hình ảnh tự động căn chỉnh để không bị méo */
    display: block;
    
}

.thumbnail-images {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 10px;
}

.thumbnail-images img {
    width: 80px; /* Chiều rộng khung ảnh nhỏ */
    height: 80px; /* Chiều cao khung ảnh nhỏ */
    object-fit: cover; /* Đảm bảo hình ảnh giữ đúng tỷ lệ */
    border: 2px solid transparent; /* Viền trong suốt */
    border-radius: 5px; /* Bo góc nhẹ nếu cần */
    transition: transform 0.3s ease, border-color 0.3s ease; /* Hiệu ứng hover */
}



/* Hiệu ứng xuất hiện dần cho h1 */
.animate-slide {
    opacity: 0; /* Bắt đầu ẩn */
    animation: slideDown 2s ease-out forwards; /* Hiệu ứng kéo dài 2 giây */
}

@keyframes slideDown {
    0% {
        transform: translateY(-50px); /* Bắt đầu từ trên xuống */
        opacity: 0;
    }
    100% {
        transform: translateY(0); /* Đến vị trí ban đầu */
        opacity: 1;
    }
}

/* Hiệu ứng xuất hiện kết hợp gõ chữ cho h2 */
#typewriter {
    opacity: 0; /* Bắt đầu ẩn */
    animation: fadeIn 3s ease-out forwards; /* Hiệu ứng kéo dài 3 giây */
    overflow: hidden;
    white-space: nowrap;
    font-family: 'Courier New', Courier, monospace;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes blink {
    from {
        border-right-color: transparent;
    }
    to {
        border-right-color: black;
    }
}

.artist-info-1, .artist-info-2 {
    width: 48%;
    max-width: 600px; /* Hạn chế chiều rộng trên màn hình lớn */
    margin: 0px 0px;
    flex: 1;
}
.artist-info-1 {
    text-align: left; /* Giới hạn chiều rộng tối đa */
    box-sizing: border-box;
}

.artist-info-2 {
    text-align: right;
    background: #ffffff;
    order: 1;
}