@font-face {
    font-family: "tvtimes";
    src: url("../fonts/tvtimes.ttf");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "tvtimes";
    src: url("../fonts/tvtimesi.ttf");
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: "tvtimes";
    src: url("../fonts/tvtimesb.ttf");
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: "tvtimes";
    src: url("../fonts/tvtimesbi.ttf");
    font-weight: bold;
    font-style: italic;
}
body{
    font-family: tvtimes;
}
.cover-output{
    width:100%;
    padding:0 20%;
    margin-bottom:5px;
    flex:center;
    align-content: between;
}
.cover-output .div-output{
    width:60%;
}
.cover-output .div-output input{
    width:99%;
    font-family: tvtimes;
    font-size:32px;
    line-height:32px;
    padding:5px 5px; 
    border:#f8f9fa 1px solid;
}
.virtual-keyboard{
    width:100%;
    padding-left:20%;
    padding-top:7px;
    position: fixed;
   left: 0;
   bottom: 0;
    background-color: #f8f9fa!important;
}
.row-key{
    width:60%;
    float:left;
}
.row-key div{
    width:10%;
    float:left;
}
.row-key div:first-child{
    float:left;
}
.row-key div:last-child{
    float:right;
}
.row-key div input, .row-key div a{
    width:90%;
    margin: 5% 5%;
    border-radius: 15px;
    font-family: tvtimes;
    font-size:21px;
    background-color:#fff;
    border:none;
    padding:5px 0px;
}
.row-key div input:hover,
.row-key div a:hover,
.row-key div input.up-key:hover{
    background-color: #36b9cc !important;
    border-color: #36b9cc !important;
    color: #fff;
}
.row-key .width-5{
    width:5%;
}.row-key .width-10{
    width:10%;
}.row-key .width-15{
    width:15%;
}
.row-key .width-15 input{
    width:92%;
    margin: 3.33% 4%;
}
.row-key .width-20{
    width:20%;
}
.row-key .width-20 input{
    width:95%;
    margin: 2.5% 2.5%;
}
.row-key .width-25{
    width:25%;
}
.row-key .width-25 input{
    width:92%;
    margin: 1.666% 2.4%;
}
.row-key .width-30{
    width:30%;
}
.row-key .width-30 input, .row-key .width-30 a{
    width:98%;
    margin: 1.25% 1.2%;
}
.row-key .width-40{
    width:40%;
}
.row-key .width-40 input{
    width:98%;
    margin: 1.25% 1.2%;
}
.function-key{
    background-color:#6c757d !important;
    color:#fff;
    /*border-radius:3px solid #fff !important;*/
}
.function-key-active{
    background-color: #007bff !important;
    color:#fff;
}
.up-key{
    background-color: #ffc107 !important;
    color:#fff;
}.special-key{
    background-color: #17a2b8 !important;
    color:#fff;
}
.space{
    border: solid 2px #e3e6f0;
    background-color:white;
    color: #5a5c69;
}
/* 1. Thiết lập cho khung chứa bàn phím tạo một lớp đè hoàn toàn */
#keyboard_container {
    position: relative !important;
    z-index: 999999 !important; /* Đảm bảo chỉ số z-index cực cao để đè lên mọi phần tử */
    background-color: #f8f9fc !important; /* Đảm bảo nền đục, không bị nhìn xuyên thấu */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Thêm bóng đổ giúp bàn phím tách biệt hẳn với nền */
}

/* 2. Đưa các thẻ sub/sup và các chữ chỉ số về z-index thấp hơn bàn phím */
sub, sup, .phien-am, .no-copy {
    position: relative;
    z-index: 1 !important; /* Khống chế z-index của thẻ sub luôn thấp hơn bàn phím */
}
@media screen and (max-width: 1200px) {
    .cover-output{
        width:100%;
        padding:0;
    }
    .cover-output .div-output{
        width:100%;
    }
    .virtual-keyboard{
        padding: 1%;
    }
    .row-key{
        width:100%;
    }
    .row-key div{
    width:10%;
    float:left;
    }
    .row-key div input, .row-key div a{
        border-radius: 5px;;
    }
}