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

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

/* Existing styles */
#container {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
}

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; /* Giữ các cột trên một dòng */
    justify-content: space-between; /* Khoảng cách đều giữa các cột */
    margin: 10px 0;
}

.sentence {
    flex: 1 1 calc(33.33% - 10px); /* Chia đều cho 3 cột và trừ đi margin */
    margin: 5px;
    font-size: 17px;
    box-sizing: border-box; /* Đảm bảo padding và border được bao gồm trong chiều rộng */
    overflow: hidden; /* Đảm bảo nội dung không bị ẩn */
    border: none; /* Bỏ viền */
    resize: none; /* Disable manual resizing */
    cursor: pointer; /* Thay đổi con trỏ thành pointer khi di chuột vào */
}

.hidden {
    display: none;
}

.show {
    display: block; /* Đảm bảo nút được hiển thị */
    margin: 20px auto; /* Căn giữa nút */
    padding: 5px 10px;
    font-size: 16px;
    width: 1px !important; /* Độ dài của khung nút */
    height: 1630px; /* Chiều cao của khung nút */
    text-align: center; /* Căn giữa văn bản trong nút */
    line-height: 30px; /* Đặt chiều cao dòng để căn giữa văn bản theo chiều dọc */
    border: none; /* Bỏ viền */
    background-color: #d5edf6; /* Light blue color */
    position: absolute; /* Đặt vị trí tuyệt đối */
    top: 50px; /* Điều chỉnh khoảng cách từ trên cùng */
    margin-left:1020px
}

.hidden {
    display: none;
}

textarea {
    line-height: 1.5; /* Adjust line height */
    margin-top: 30px; /* Điều chỉnh khoảng cách từ trên cùng */
    border: none; /* Bỏ viền */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1); /* Thêm đổ bóng */
    width: 46%;
    margin-left: 370px
}

/* New styles for English, Vietnamese, and IPA */
.english-text {
    font-family: 'iCiel Andes Rounded', Arial, sans-serif;
    color: #000000; /* Blue color */
    line-height: 1.5; /* Adjust line height */
}

.vietnamese-text {
    font-family: 'iCiel Andes Rounded', 'Times New Roman', serif;
    color: #008000; /* Green color */
    line-height: 1.5; /* Adjust line height */
}

.ipa-text {
    font-family: 'Baskerville', 'Courier New', monospace;
    color: #FF4500; /* Orange color */
    line-height: 1.5; /* Adjust line height */
    letter-spacing: 0.05em; /* Adjust letter spacing */
}

/* Styles for background colors based on gender */
.male-background {
    background-color: #d5edf6; /* Light blue color */
}

.female-background {
    background-color: #f7d0d6; /* Light pink color */
}

.highlighted {
    border: 2px solid rgb(148, 48, 241); /* Border dày màu tím */
}