html, body {
    height: 100%;
}

body {
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
    background-image: url(/img/bg-pc.png);
}
.logo1, .logo2 {
    flex: 1;
    display: flex; /* Sử dụng flexbox */
    justify-content: center; /* Căn giữa ngang */
    align-items: center; /* Căn giữa dọc */
}

.logo1 img {
    margin-top: 20px;
    width: 700px;
    height: auto;
}
.logo2 img {
    margin-top: 15px;
    width: 900px;
    height: auto;
}
.container {
    display: flex;
    justify-content: center; /* Căn giữa ngang */
}

.column1 {
    display: flex; /* Sử dụng flexbox */
    flex-direction: column; /* Xếp các phần tử theo chiều dọc */
    align-items: center; /* Căn giữa theo chiều ngang */
    margin-top: 50px;
    position: relative; /* Thiết lập phần tử cha làm khung chứa cho các phần tử con */

}

.overlay-image {
    position: absolute; /* Định vị ảnh mới */
    top: 0px; /* Đặt ảnh mới ở vị trí đầu tiên */
    left: 30px; /* Đặt ảnh mới ở góc trên bên trái */
}

.overlay-image1 {
    position: absolute; /* Định vị ảnh mới */
    top: 86px; /* Đặt ảnh mới ở vị trí đầu tiên */
    left: 30px; /* Đặt ảnh mới ở góc trên bên trái */
}
.overlay-image2 {
    position: absolute; /* Định vị ảnh mới */
    top: 176px; /* Đặt ảnh mới ở vị trí đầu tiên */
    left: 30px; /* Đặt ảnh mới ở góc trên bên trái */
}
.overlay-image3 {
    position: absolute; /* Định vị ảnh mới */
    top: 265px; /* Đặt ảnh mới ở vị trí đầu tiên */
    left: 30px; /* Đặt ảnh mới ở góc trên bên trái */
}
.column1 img {
    max-width: 90%;
    margin-bottom: 20px; /* Thêm khoảng cách giữa các ảnh */
}
.column2 {
    display: flex; /* Sử dụng flexbox */
    flex-direction: column; /* Xếp các phần tử theo chiều dọc */
    align-items: center; /* Căn giữa theo chiều ngang */
    padding: 20px; /* Khoảng cách giữa các nội dung */
    margin-top: 20px;
    position: relative;
}

.frame-image {
    width: 100%; /* Đảm bảo hình ảnh nằm trong khung */
    height: auto; /* Đảm bảo tỷ lệ khung hình đúng */
    position: relative; /* Ensure the frame image is positioned relative to its container */
    z-index: 1; /* Đảm bảo ảnh khung ở phía trên cùng */
}

video {
    position: absolute;
    width: 81%;
    height: 80%;
    top: 29px;
    left: 69px;
    z-index: 0; /* Set a lower z-index for the video to ensure the play button is above it */
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: 2; /* Ensure the play button appears above other content */
}

.play-button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    border-style: solid;
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent white;
}


.column2 img {
    max-width: 95%;
    height: auto;
}

.last-img {
    margin-top: 20px;
    width: 260px;
    cursor: pointer;
    animation: scaleAnimation 3s infinite alternate; /* Áp dụng animation */
    margin-left: 10px;
}

@keyframes scaleAnimation {
    0% {
        transform: scale(1); /* Kích thước ban đầu */
    }
    50% {
        transform: scale(1.2); /* Phóng to ở giữa animation */
    }
    100% {
        transform: scale(1); /* Trở lại kích thước ban đầu */
    }
}

.last-img img {
    width: 100%; /* Đảm bảo ảnh chiếm toàn bộ kích thước của phần tử cha */
}

.horizontal-images {
    display: flex;
    justify-content: center; /* Căn giữa các ảnh theo chiều ngang */
    margin-top: 10px; /* Khoảng cách giữa container và ảnh */
}

.horizontal-images img {
    width: 300px; /* Chiều rộng ảnh */
    max-width: 100%; /* Đảm bảo ảnh không vượt quá kích thước của phần tử cha */
    margin: 0 30px; /* Khoảng cách giữa các ảnh */
    transition: transform 0.3s ease; /* Thêm hiệu ứng chuyển động */
}

.horizontal-images img:hover {
    transform: scale(1.1); /* Phóng to ảnh khi di chuột qua */
}

@media only screen and (max-width: 1400px) {
    html, body {
        height: 100%;
    }
    
    body {
        background-color: #f0f0f0; /* Màu nền của body */
        margin: 0; /* Loại bỏ khoảng trắng xung quanh body */
        padding: 0; /* Loại bỏ padding mặc định của body */
        background-image: url(/img/bg-pc.png);
    }
    .logo1, .logo2 {
        flex: 1;
        display: flex; /* Sử dụng flexbox */
        justify-content: center; /* Căn giữa ngang */
        align-items: center; /* Căn giữa dọc */
    }
    
    .logo1 img {
        margin-top: 20px;
        width: 700px;
        height: auto;
    }
    .logo2 img {
        margin-top: 15px;
        width: 900px;
        height: auto;
    }
    .container {
        display: flex;
        justify-content: center; /* Căn giữa ngang */
    }
    
    .column1 {
        display: flex; /* Sử dụng flexbox */
        flex-direction: column; /* Xếp các phần tử theo chiều dọc */
        align-items: center; /* Căn giữa theo chiều ngang */
        margin-top: 50px;
        position: relative; /* Thiết lập phần tử cha làm khung chứa cho các phần tử con */
    
    }
    
    .overlay-image {
        position: absolute; /* Định vị ảnh mới */
        top: 0px; /* Đặt ảnh mới ở vị trí đầu tiên */
        left: 24px; /* Đặt ảnh mới ở góc trên bên trái */
    }
    
    .overlay-image1 {
        position: absolute; /* Định vị ảnh mới */
        top: 77px; /* Đặt ảnh mới ở vị trí đầu tiên */
        left: 24px; /* Đặt ảnh mới ở góc trên bên trái */
    }
    .overlay-image2 {
        position: absolute; /* Định vị ảnh mới */
        top: 157px; /* Đặt ảnh mới ở vị trí đầu tiên */
        left: 24px; /* Đặt ảnh mới ở góc trên bên trái */
    }
    .overlay-image3 {
        position: absolute; /* Định vị ảnh mới */
        top: 237px; /* Đặt ảnh mới ở vị trí đầu tiên */
        left: 24px; /* Đặt ảnh mới ở góc trên bên trái */
    }
    .column1 img {
        max-width: 90%;
        margin-bottom: 20px; /* Thêm khoảng cách giữa các ảnh */
    }
    .column2 {
        display: flex; /* Sử dụng flexbox */
        flex-direction: column; /* Xếp các phần tử theo chiều dọc */
        align-items: center; /* Căn giữa theo chiều ngang */
        padding: 20px; /* Khoảng cách giữa các nội dung */
        margin-top: 20px;
        position: relative;
    }
    
    .frame-image {
        width: 100%; /* Đảm bảo hình ảnh nằm trong khung */
        height: auto; /* Đảm bảo tỷ lệ khung hình đúng */
        z-index: 1; /* Đảm bảo ảnh khung ở phía trên cùng */
    }
    
    video {
        position: absolute;
        width: 81%;
        height: 78%;
        top: 29px;
        left: 69px;
    }
    
    .column2 img {
        max-width: 95%;
        height: auto;
    }
    
    .last-img {
        margin-top: 20px;
        width: 260px;
    }
    .horizontal-images {
        display: flex;
        justify-content: center; /* Căn giữa các ảnh theo chiều ngang */
        margin-top: 10px; /* Khoảng cách giữa container và ảnh */
    }
    
    .horizontal-images img {
        width: 250px;
        max-width: 100%;
        margin: 0 30px; /* Khoảng cách giữa các ảnh */
    }
}

@media only screen and (max-width: 1200px) {
    html, body {
        height: 100%;
    }
    
    body {
        background-color: #f0f0f0; /* Màu nền của body */
        margin: 0; /* Loại bỏ khoảng trắng xung quanh body */
        padding: 0; /* Loại bỏ padding mặc định của body */
        background-image: url(/img/bg-pc.png);
    }
    .logo1, .logo2 {
        flex: 1;
        display: flex; /* Sử dụng flexbox */
        justify-content: center; /* Căn giữa ngang */
        align-items: center; /* Căn giữa dọc */
    }
    
    .logo1 img {
        margin-top: 20px;
        width: 700px;
        height: auto;
    }
    .logo2 img {
        margin-top: 15px;
        width: 900px;
        height: auto;
    }
    .container {
        display: flex;
        justify-content: center; /* Căn giữa ngang */
    }
    
    .column1 {
        display: flex; /* Sử dụng flexbox */
        flex-direction: column; /* Xếp các phần tử theo chiều dọc */
        align-items: center; /* Căn giữa theo chiều ngang */
        margin-top: 50px;
        position: relative; /* Thiết lập phần tử cha làm khung chứa cho các phần tử con */
    
    }
    
    .overlay-image {
        position: absolute; /* Định vị ảnh mới */
        top: 0px; /* Đặt ảnh mới ở vị trí đầu tiên */
        left: 20px; /* Đặt ảnh mới ở góc trên bên trái */
    }
    
    .overlay-image1 {
        position: absolute; /* Định vị ảnh mới */
        top: 68px; /* Đặt ảnh mới ở vị trí đầu tiên */
        left: 20px; /* Đặt ảnh mới ở góc trên bên trái */
    }
    .overlay-image2 {
        position: absolute; /* Định vị ảnh mới */
        top: 137px; /* Đặt ảnh mới ở vị trí đầu tiên */
        left: 20px; /* Đặt ảnh mới ở góc trên bên trái */
    }
    .overlay-image3 {
        position: absolute; /* Định vị ảnh mới */
        top: 206px; /* Đặt ảnh mới ở vị trí đầu tiên */
        left: 20px; /* Đặt ảnh mới ở góc trên bên trái */
    }
    .column1 img {
        max-width: 90%;
        margin-bottom: 20px; /* Thêm khoảng cách giữa các ảnh */
    }
    .column2 {
        display: flex; /* Sử dụng flexbox */
        flex-direction: column; /* Xếp các phần tử theo chiều dọc */
        align-items: center; /* Căn giữa theo chiều ngang */
        padding: 20px; /* Khoảng cách giữa các nội dung */
        margin-top: 20px;
        position: relative;
    }
    
    .frame-image {
        width: 100%; /* Đảm bảo hình ảnh nằm trong khung */
        height: auto; /* Đảm bảo tỷ lệ khung hình đúng */
        z-index: 1; /* Đảm bảo ảnh khung ở phía trên cùng */
    }
    
    video {
        position: absolute;
        width: 77%;
        height: 72%;
        top: 29px;
        left: 69px;
    }
    
    .column2 img {
        max-width: 95%;
        height: auto;
    }
    
    .last-img {
        margin-top: 20px;
        width: 260px;
    }
    .horizontal-images {
        display: flex;
        justify-content: center; /* Căn giữa các ảnh theo chiều ngang */
        margin-top: 10px; /* Khoảng cách giữa container và ảnh */
    }
    
    .horizontal-images img {
        width: 250px;
        max-width: 100%;
        margin: 0 30px; /* Khoảng cách giữa các ảnh */
    }
}

@media only screen and (max-width: 992px) {
    html, body {
        height: 100%;
    }
    
    body {
        background-color: #f0f0f0; /* Màu nền của body */
        margin: 0; /* Loại bỏ khoảng trắng xung quanh body */
        padding: 0; /* Loại bỏ padding mặc định của body */
        background-image: url(/img/bg-pc.png);
    }
    .logo1, .logo2 {
        flex: 1;
        display: flex; /* Sử dụng flexbox */
        justify-content: center; /* Căn giữa ngang */
        align-items: center; /* Căn giữa dọc */
    }
    
    .logo1 img {
        margin-top: 20px;
        width: 550px;
        height: auto;
    }
    .logo2 img {
        margin-top: 15px;
        width: 690px;
        height: auto;
    }
    .container {
        display: flex;
        justify-content: center; /* Căn giữa ngang */
    }
    
    .column1 {
        display: flex; /* Sử dụng flexbox */
        flex-direction: column; /* Xếp các phần tử theo chiều dọc */
        align-items: center; /* Căn giữa theo chiều ngang */
        margin-top: 50px;
        position: relative; /* Thiết lập phần tử cha làm khung chứa cho các phần tử con */
    
    }
    
    .overlay-image {
        position: absolute; /* Định vị ảnh mới */
        top: 0px; /* Đặt ảnh mới ở vị trí đầu tiên */
        left: -22px; /* Đặt ảnh mới ở góc trên bên trái */
    }
    
    .overlay-image1 {
        position: absolute; /* Định vị ảnh mới */
        top: 64px; /* Đặt ảnh mới ở vị trí đầu tiên */
        left: -22px; /* Đặt ảnh mới ở góc trên bên trái */
    }
    .overlay-image2 {
        position: absolute; /* Định vị ảnh mới */
        top: 128px; /* Đặt ảnh mới ở vị trí đầu tiên */
        left: -22px; /* Đặt ảnh mới ở góc trên bên trái */
    }
    .overlay-image3 {
        position: absolute; /* Định vị ảnh mới */
        top: 192px; /* Đặt ảnh mới ở vị trí đầu tiên */
        left: -22px; /* Đặt ảnh mới ở góc trên bên trái */
    }
    .column1 img {
        max-width: 120%;
        margin-bottom: 20px; /* Thêm khoảng cách giữa các ảnh */
    }
    .column2 {
        display: flex; /* Sử dụng flexbox */
        flex-direction: column; /* Xếp các phần tử theo chiều dọc */
        align-items: center; /* Căn giữa theo chiều ngang */
        padding: 20px; /* Khoảng cách giữa các nội dung */
        margin-top: 20px;
        position: relative;
    }
    
    .frame-image {
        width: 100%; /* Đảm bảo hình ảnh nằm trong khung */
        height: auto; /* Đảm bảo tỷ lệ khung hình đúng */
        z-index: 1; /* Đảm bảo ảnh khung ở phía trên cùng */
    }
    
    video {
        position: absolute;
        width: 81%;
        height: 58%;
        top: 40px;
        left: 105px;
    }
    
    .column2 img {
        max-width: 100%;
        height: auto;
        margin-left: 130px;

    }
    
    .last-img {
        margin-top: 10px;
        width: 160px;
        height: 40px;
    }
    .horizontal-images {
        display: flex;
        justify-content: center; /* Căn giữa các ảnh theo chiều ngang */
        margin-top: 40px; /* Khoảng cách giữa container và ảnh */
    }
    
    .horizontal-images img {
        width: 200px;
        max-width: 100%;
        margin: 0 30px; /* Khoảng cách giữa các ảnh */
    }
}

@media only screen and (max-width: 768px) {
    html, body {
        height: 100%;
    }
    
    body {
        background-color: #f0f0f0; /* Màu nền của body */
        margin: 0; /* Loại bỏ khoảng trắng xung quanh body */
        padding: 0; /* Loại bỏ padding mặc định của body */
        background-image: url(/img/bg-pc.png);
    }
    .logo1, .logo2 {
        flex: 1;
        display: flex; /* Sử dụng flexbox */
        justify-content: center; /* Căn giữa ngang */
        align-items: center; /* Căn giữa dọc */
    }
    
    .logo1 img {
        margin-top: 10px; /* Giữ nguyên giá trị px */
        width: 300px; /* Sử dụng 60% của chiều rộng của màn hình */
        height: auto;
        max-width: 90%;
    }
    
    .logo2 img {
        margin-top: 10px; /* Giữ nguyên giá trị px */
        width: 400px; /* Sử dụng 80% của chiều rộng của màn hình */
        height: auto;
        max-width: 90%;
    }
    
    .container {
        display: flex;
        justify-content: center; /* Căn giữa ngang */
        flex-direction: column; /* Xếp các ảnh theo chiều dọc */
    }
    
    .column1 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center; /* Căn giữa theo cả hai chiều */
        margin-top: 130px;
        left: 50%; /* Đặt phần tử ở giữa màn hình theo chiều ngang */
        transform: translate(-50%, -50%); /* Đưa phần tử về vị trí giữa */
        width: 350px;
    }
    
    .overlay-image {
        top: 0;
        left: 50%; /* Đặt phần tử ở giữa màn hình theo chiều ngang */
        transform: translateX(-50%); /* Dịch chuyển phần tử về bên trái 50% chiều rộng của chính nó */
    }
    
    .overlay-image1 {
        top: 40px;
        left: 50%; /* Đặt phần tử ở giữa màn hình theo chiều ngang */
        transform: translateX(-50%); /* Dịch chuyển phần tử về bên trái 50% chiều rộng của chính nó */
    }
    
    .overlay-image2 {
        top: 80px;
        left: 50%; /* Đặt phần tử ở giữa màn hình theo chiều ngang */
        transform: translateX(-50%); /* Dịch chuyển phần tử về bên trái 50% chiều rộng của chính nó */
    }
    
    .overlay-image3 {
        top: 120px;
        left: 50%; /* Đặt phần tử ở giữa màn hình theo chiều ngang */
        transform: translateX(-50%); /* Dịch chuyển phần tử về bên trái 50% chiều rộng của chính nó */
    }

    
    .column1 img {
        width: auto;
        margin-bottom: 0px;
        max-width: 80%;
    }
    
    .last-img {
        margin-top: 10px;
        width: 160px;
        height: 40px;
        margin-left: 18px;
    }
    
    
    
    .column2 {
        display: flex; /* Sử dụng flexbox */
        justify-content: center; /* Căn giữa các ảnh theo chiều ngang */
        align-items: center; /* Căn ảnh vào giữa khung */
        padding: 20px; /* Khoảng cách giữa các nội dung */
        margin-top: 20px;
        left: 50%; /* Giữa màn hình theo chiều ngang */
        transform: translate(-50%, -50%); /* Đưa logo vào giữa màn hình */
        max-width: 90%;
    }
    
    .frame-image {
        height: auto; /* Đảm bảo tỷ lệ khung hình đúng */
        z-index: 1; /* Đảm bảo ảnh khung ở phía trên cùng */
    }
    
    video {
        width: 325px;
        height: 215px;
        margin-top: 90px;
        left: 50%; /* Giữa màn hình theo chiều ngang */
        transform: translate(-50%, -50%); /* Đưa logo vào giữa màn hình */
    }
    
    .column2 img {
        max-width: 1000px;
        height: auto;
        margin: 0; /* Đặt margin thành 0 để loại bỏ margin mặc định */
        width: 365px;
    }
    
    
    
    .horizontal-images {
        display: flex;
        justify-content: center; /* Căn giữa các ảnh theo chiều ngang */
        align-items: center; /* Căn ảnh vào giữa khung */
        margin-top: -100px; /* Khoảng cách giữa container và ảnh */
        flex-wrap: wrap; /* Cho phép các ảnh xuống dòng khi không còn đủ không gian */
    }
    
    .horizontal-images img {
        width: 40%;
        max-width: 100%; /* Đảm bảo ảnh không vượt quá kích thước của phần tử cha */
        margin: 5px; /* Khoảng cách giữa các ảnh */
    }
    
}