@font-face {
    font-family: 'ChalkboardSE';
    src: url('fonts/ChalkboardSE.ttc') format('truetype');
}

@font-face {
    font-family: 'AndesRoundedLight';
    src: url('fonts/AndesRoundedLight.otf') format('opentype');
}

@font-face {
    font-family: 'Baskerville';
    src: url('fonts/Baskerville.ttc') format('truetype');
}

@font-face {
    font-family: 'BalihoScript';
    src: url('fonts/BalihoScript.otf') format('truetype');
}

body {
    overflow-x: hidden; /* Vô hiệu hóa cuộn ngang */
}

.live-schedule {
    font-family: 'ChalkboardSE', Arial, sans-serif;
    font-size: 20px;
    color: blue;
    text-align: center;
    margin-top: 5px;
    position: absolute; /* Hoặc absolute nếu cần căn chỉnh chính xác hơn */
    top: 5px; /* Điều chỉnh vị trí theo trục Y */
    left: 18px; /* Điều chỉnh vị trí theo trục X */
}

.yellow-box {
    width: 540px;
    height: 190px;
    background-color: yellow;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0px solid rgb(159, 74, 239);
    font-family: 'ChalkboardSE', Arial, sans-serif;
    font-size: 16px;
    color: black;
    border-radius: 15px; 
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); /* Đổ bóng cho ô màu vàng */
}

.image-gallery img.topic {
    position: absolute; /* Khóa vị trí của hình ảnh */
    width: 95%;
    height: auto;
    margin: 0; /* Đặt lại margin để hình ảnh sát khung trên */
    border-radius: 10px; /* Bo tròn các góc của hình ảnh */
    margin-top: -1340px; /* Điều chỉnh vị trí theo trục Y để nhích lên */
    margin-left:4px
}

.pink-box {
    width: 540px;
    height: 610px;
    background-color: #ECD1FF;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0px solid rgb(159, 74, 239);
    font-family: 'ChalkboardSE', Arial, sans-serif;
    font-size: 16px;
    color: black;
    border-radius: 15px; 
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); /* Đổ bóng cho ô màu hồng */
    margin-top: 15px; /* Khoảng cách giữa ô màu vàng và ô màu hồng */
}


.vn-textarea {
    position: absolute; /* Khóa vị trí của hình ảnh */
    width: 75%;
    height: 30%;
    font-family: 'BalihoScript', Arial, sans-serif;
    font-size: 36px;
    padding: 0px;
    border-radius: 5px;
    border: 0px solid #ccc;
    resize: none;
    background-color: transparent; /* Làm cho nền của textarea trong suốt */
    letter-spacing: 1px; /* Giãn chữ */
    line-height: 1.2; /* Giãn dòng */
    margin-left: -110px;
    margin-top: -330px; /* Nhích ô textarea lên trên */
    outline: none; /* Loại bỏ viền khung khi type */
    caret-color: rgba(255, 255, 255, 1); /* Thay đổi màu con trỏ chuột thành màu trắng đậm */
    color: #60BA3E;
}

.custom-textarea {
    position: absolute; /* Khóa vị trí của hình ảnh */
    width: 97%;
    height: 30%;
    font-family: 'AndesRoundedLight', Arial, sans-serif;
    font-size: 36px;
    padding: 0px;
    border-radius: 5px;
    border: 0px solid #ccc;
    resize: none;
    background-color: transparent; /* Làm cho nền của textarea trong suốt */
    letter-spacing: 1px; /* Giãn chữ */
    line-height: 1.2; /* Giãn dòng */
    margin-left: 8px;
    margin-top: 40px; /* Nhích ô textarea lên trên */
    outline: none; /* Loại bỏ viền khung khi type */
    caret-color: rgba(255, 255, 255, 1); /* Thay đổi màu con trỏ chuột thành màu trắng đậm */
}



.ipa-textarea {
    position: absolute; /* Khóa vị trí của hình ảnh */
    width: 75%;
    height: 30%;
    font-family: 'Baskerville', Arial, sans-serif;
    font-size: 36px;
    padding: 0px;
    border-radius: 5px;
    border: 0px solid #ccc;
    resize: none;
    background-color: transparent; /* Làm cho nền của textarea trong suốt */
    letter-spacing: 1.2px; /* Giãn chữ */
    line-height: 1.2; /* Giãn dòng */
    margin-left: -110px;
    margin-top: 350px; /* Nhích ô textarea lên trên */
    outline: none; /* Loại bỏ viền khung khi type */
    caret-color: rgba(255, 255, 255, 1); /* Thay đổi màu con trỏ chuột thành màu trắng đậm */
    color: red;
}

.image-gallery {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -20px; /* Giảm khoảng cách giữa ô màu hồng và hình ảnh */
}

.image-gallery img {
    width: 100px;
    height: 100px;
    margin: 0 0px; /* Khoảng cách giữa các hình ảnh */
    border-radius: 10px; /* Bo tròn các góc của hình ảnh */
}



.image-gallery img.girl {
    position: absolute; /* Khóa vị trí của hình ảnh */
    width: 44%;
    height: 30%;
    margin: 0; /* Đặt lại margin để hình ảnh sát khung trên */
    border-radius: 10px; /* Bo tròn các góc của hình ảnh */
    margin-top: -1040px; /* Điều chỉnh vị trí theo trục Y để nhích lên */
    margin-left:450px
}

.image-gallery img.dog {
    position: absolute; /* Khóa vị trí của hình ảnh */
    width: 20%;
    height: 15%;
    margin: 0; /* Đặt lại margin để hình ảnh sát khung trên */
    border-radius: 10px; /* Bo tròn các góc của hình ảnh */
    margin-top: -360px; /* Điều chỉnh vị trí theo trục Y để nhích lên */
    margin-left:430px
}

.image-gallery img.glass {
    position: absolute; /* Khóa vị trí của hình ảnh */
    width: 11%;
    height: 10%;
    margin: 0; /* Đặt lại margin để hình ảnh sát khung trên */
    border-radius: 10px; /* Bo tròn các góc của hình ảnh */
    margin-top: -90px; /* Điều chỉnh vị trí theo trục Y để nhích lên */
    margin-left:500px
}

.live-schedule-textarea {
    width: 90%;
    font-size: 50px;
    font-weight: bold;
    background-color: yellow;
    border: none;
    resize: none;
    padding: 20px;
}